:root{
  --bg:#060a18;--card:#0d1536;--card2:#101a46;--line:#2a3773;
  --text:#f0f3ff;--muted:#a9b7de;--gold:#f1cc6d;--accent:#88a9ff;
}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:radial-gradient(1200px 800px at 0% -10%,#15245f,#060a18),radial-gradient(1200px 800px at 110% 110%,#0b1233,#060a18);color:var(--text);font:400 17px/1.75 'Outfit',system-ui}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.nav{position:sticky;top:0;z-index:60;background:rgba(6,10,24,.6);backdrop-filter:blur(10px) saturate(150%);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}.avatar{width:85px;height:85px;border-radius:12px;border:1px solid var(--line)}
.name{font-weight:900;letter-spacing:.3px}.name b{color:var(--gold)}
.links{display:flex;gap:10px;flex-wrap:wrap}
.links a{padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#101a48,#0b1232);color:var(--text);text-decoration:none}
.links .gold{background:linear-gradient(180deg,#2c220f,#1b1509);border-color:#6b5326}
.hero{padding:70px 0 20px}
.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
h1{font:900 clamp(36px,6vw,64px)/1.05;margin:0 0 10px}
.lead{font-size:20px;color:#d6e2ff}
.cta{display:flex;gap:10px;margin:12px 0 6px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,#101a48,#0b1232);color:#fff;text-decoration:none}
.btn.gold{background:linear-gradient(180deg,#2b210f,#1b1409)}
.facts{list-style:none;padding:0;margin:16px 0 0;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap}
.art img{width:100%;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.45)}

.section{padding:40px 0}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:16px;padding:18px}
.card h3{margin:0 0 10px;font-size:24px}
#tokenomics h2,#roadmap h2,#buy h2{font-size:34px;margin:0 0 12px}
.tokengrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:10px 0 14px}
.t{background:linear-gradient(180deg,#0b1232,#0f1a49);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}
.t b{font:800 28px/1.1 Outfit;color:var(--gold)}
.wallets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wallets code{display:block;background:#0a1030;border:1px solid var(--line);padding:10px;border-radius:8px;word-break:break-all}
.timeline{list-style:none;padding-left:14px;border-left:3px solid var(--line)}.timeline li{margin:12px 0}
.buysec .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0 16px}
.step{background:linear-gradient(180deg,#0b1232,#0f1a49);border:1px solid var(--line);border-radius:14px;padding:14px}
.step span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--gold);color:#111;font-weight:900;margin-bottom:6px}
.footer{padding:30px 0 44px;background:linear-gradient(180deg,#0a0f22,#060a18);border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1fr 2fr 1fr;gap:12px;align-items:center}
.avatar.small{width:85px;height:85px}
.legal{color:var(--muted)}.copy{justify-self:end;color:var(--muted)}

@media(max-width:1000px){
  .grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .tokengrid{grid-template-columns:repeat(3,1fr)}
  .wallets{grid-template-columns:1fr}
  .buysec .steps{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr}
  .copy{justify-self:start}
}

/* --- MOBILE HEADER FIX --- */
@media (max-width: 820px) {
  .nav .wrap { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

  /* keep logo + name together on one line */
  .brand { order:1; flex:1 0 60%; display:flex; align-items:center; gap:10px; }
  .brand .name { white-space: nowrap; font-size: 20px; }        /* prevent word wrap */
  .brand .avatar { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }

  /* lay out buttons neatly */
  .links { order:2; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:8px; width:100%; }
  .links a { text-align:center; padding:10px 12px; font-size:14px; border-radius:10px; }
  .links .buy { grid-column: 1 / -1; }                           /* Buy button spans full width */
}

@media (max-width: 480px) {
  .brand .name { font-size: 18px; }
  .brand .avatar { width: 44px; height: 44px; }
  .links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; }
  .links a { padding:8px 10px; font-size:13px; }
  .links .buy { grid-column: 1 / -1; }
}