:root{
  --bg:#0b0b0c; --panel:#141416; --text:#f7f7f7; --muted:#c7c7c7;
  --yellow:#ffd54a; --yellow-2:#ffec99; --outline:#2a2a2e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font:16px/1.6 system-ui,Segoe UI,Roboto,Inter,Arial}
.container{max-width:1000px;margin:0 auto;padding:20px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--outline)}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:50%}
.name{font-weight:700}
.nav{display:flex;align-items:center;gap:16px}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--text)}
.btn{padding:10px 16px;border-radius:10px;border:1px solid transparent;text-decoration:none;display:inline-block}
.btn.buy{background:linear-gradient(135deg,var(--yellow),var(--yellow-2));color:#151515;font-weight:700}
.hero h1{font-size:38px;margin:0 0 8px}
.accent{background:linear-gradient(135deg,var(--yellow),var(--yellow-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted)}
.cta-row{margin:16px 0}
.card{background:linear-gradient(180deg,#131316,#0f0f12);
  border:1px solid var(--outline);border-radius:16px;padding:20px;margin-top:26px}
.gallery{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
.gallery-img{width:100%;height:auto;border-radius:12px;border:1px solid var(--outline);object-fit:cover}
.mantra{font-size:22px;background:linear-gradient(135deg,var(--yellow),var(--yellow-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;text-align:center}
.roadmap .single{margin:0;padding-left:18px}
.footer{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:26px 0;color:var(--muted)}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--text)}