/* ============================================================
   AFGCoin — design system
   Palette derived from the AFG coin emblem: gold on obsidian,
   with Afghan flag red + green as restrained secondary accents.
   ============================================================ */

:root{
  /* surfaces */
  --bg:#07080A;
  --bg-2:#0A0C10;
  --surface:#101319;
  --surface-2:#151922;
  --surface-3:#1B2029;

  /* lines */
  --line:rgba(233,185,73,.16);
  --line-soft:rgba(255,255,255,.07);
  --line-hard:rgba(255,255,255,.12);

  /* brand */
  --gold:#E9B949;
  --gold-2:#F5D98B;
  --gold-3:#C9922B;
  --gold-deep:#8A6414;
  --red:#C1272D;
  --green:#0E7A45;
  --green-2:#19A362;

  /* ink */
  --ink:#F4F1EA;
  --ink-2:#CFCBC1;
  --muted:#9C9890;
  --muted-2:#6E6B64;

  /* type */
  --display:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* geometry */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --shell:1200px;

  /* shadow */
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 12px 32px -12px rgba(0,0,0,.7);
  --sh-3:0 32px 80px -24px rgba(0,0,0,.85);
  --glow:0 0 60px -12px rgba(233,185,73,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.05;margin:0}
p{margin:0}
::selection{background:var(--gold);color:#0B0A06}

/* focus — visible, on-brand, never removed */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:#0B0A06;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:700}
.skip-link:focus{left:0}

.shell{width:min(var(--shell),calc(100% - 48px));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- ambient background art ---------- */
.bg-art{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg-art .grid-lines{
  position:absolute;inset:-20%;
  background-image:linear-gradient(rgba(233,185,73,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(233,185,73,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 75%);
}
.bg-art .aura{position:absolute;border-radius:50%;opacity:.55}
.aura-gold{width:1100px;height:820px;top:-380px;left:50%;transform:translateX(-42%);background:radial-gradient(closest-side,rgba(233,185,73,.26),rgba(233,185,73,.10) 42%,rgba(233,185,73,.03) 66%,transparent 80%)}
.aura-green{width:900px;height:760px;top:48%;left:-300px;background:radial-gradient(closest-side,rgba(14,122,69,.22),rgba(14,122,69,.07) 45%,transparent 78%)}
.aura-red{width:780px;height:680px;top:115%;right:-260px;background:radial-gradient(closest-side,rgba(193,39,45,.16),rgba(193,39,45,.05) 45%,transparent 78%)}

/* ---------- icon system ---------- */
.icon{width:24px;height:24px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:18px;height:18px}
.icon-lg{width:30px;height:30px}
.icon-fill{fill:currentColor;stroke:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 24px;border-radius:var(--r-pill);border:1px solid transparent;
  font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,background .22s,border-color .22s,color .22s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  color:#100B02;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 30px -10px rgba(233,185,73,.6);
}
.btn-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 16px 40px -12px rgba(233,185,73,.75)}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--ink);border-color:var(--line-hard);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--gold);background:rgba(233,185,73,.08);color:var(--gold-2)}
.btn-sm{padding:11px 18px;font-size:13.5px}
.btn-lg{padding:18px 32px;font-size:16px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-block{width:100%}

/* ---------- shared section furniture ---------- */
.section{padding:120px 0;position:relative}
.section-tight{padding:88px 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;color:var(--gold);
  margin:0 0 20px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.eyebrow .num{color:var(--muted-2);letter-spacing:.12em}
.section-title{font-size:clamp(34px,4.6vw,60px);letter-spacing:-.045em;max-width:16ch}
.section-title em{font-style:normal;background:linear-gradient(100deg,var(--gold-2),var(--gold-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.section-intro{color:var(--ink-2);font-size:17.5px;line-height:1.72;max-width:60ch;margin-top:22px}
.section-head{margin-bottom:56px;max-width:760px}
.lead-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:start;margin-bottom:56px}
.rule{height:1px;background:linear-gradient(90deg,var(--line),transparent);border:0;margin:0}
.text-link{display:inline-flex;align-items:center;gap:9px;color:var(--gold);font-family:var(--display);font-weight:600;font-size:14px;transition:gap .2s,color .2s}
.text-link:hover{gap:14px;color:var(--gold-2)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.nav.stuck{background:rgba(7,8,10,.82);backdrop-filter:blur(18px) saturate(140%);border-bottom-color:var(--line-soft)}
.nav-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.03em}
.brand-coin{width:38px;height:38px;border-radius:50%;box-shadow:0 0 0 1px rgba(233,185,73,.35),0 4px 14px -4px rgba(233,185,73,.6)}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-text small{font-family:var(--body);font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a:not(.btn){padding:9px 14px;border-radius:var(--r-pill);color:var(--ink-2);font-size:14.5px;font-weight:500;transition:color .2s,background .2s}
.nav-links a:not(.btn):hover{color:var(--gold);background:rgba(233,185,73,.07)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-mobile-cta{display:none}
.menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line-hard);background:rgba(255,255,255,.03);border-radius:var(--r-sm);align-items:center;justify-content:center;cursor:pointer}

/* wallet button states */
.wallet-connect{font-variant-numeric:tabular-nums}
.ticker.mobile-flow-ticker,.stat-band.mobile-flow-stats,.hero-lede-mobile{display:none}
.wallet-connected{background:rgba(25,163,98,.14);border-color:rgba(25,163,98,.5);color:#7FE3B0}
.wallet-connected:hover{background:rgba(25,163,98,.2);border-color:var(--green-2);color:#9BEDC4}
.wallet-wrong{background:rgba(193,39,45,.14);border-color:rgba(193,39,45,.5);color:#FF9B9E}

/* ---------- hero ---------- */
.hero{position:relative;padding:64px 0 96px}
.hero-inner{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;padding:7px 15px 7px 9px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:rgba(233,185,73,.06);
  font-size:12.5px;font-weight:500;color:var(--gold-2);letter-spacing:.01em;margin-bottom:28px;
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green-2);box-shadow:0 0 0 4px rgba(25,163,98,.18);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(25,163,98,.22)}50%{box-shadow:0 0 0 8px rgba(25,163,98,0)}}
.hero h1{font-size:clamp(46px,6.4vw,84px);letter-spacing:-.055em;line-height:.96}
.hero h1 em{font-style:normal;background:linear-gradient(96deg,var(--gold-2) 10%,var(--gold) 45%,var(--gold-3) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lede{color:var(--ink-2);font-size:19px;line-height:1.7;max-width:52ch;margin:26px 0 14px}
.hero-sub{color:var(--muted);font-size:15.5px;line-height:1.7;max-width:52ch;margin-bottom:34px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px}
.trust-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line-soft);border-radius:var(--r-pill);background:rgba(255,255,255,.02);font-size:12.5px;color:var(--ink-2)}
.trust-chip .icon{color:var(--gold);width:15px;height:15px}

/* coin stage */
.coin-stage{position:relative;display:grid;place-items:center;min-height:520px}
.coin-glow{position:absolute;width:min(520px,92%);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(233,185,73,.28),rgba(233,185,73,.05) 55%,transparent 72%);filter:blur(4px)}
.coin-rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.coin-rings svg{width:min(560px,100%);height:auto;overflow:visible}
.ring-spin{transform-origin:center;animation:spin 34s linear infinite}
.ring-spin-rev{transform-origin:center;animation:spin 46s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.coin-img{width:min(340px,64%);height:auto;aspect-ratio:auto;object-fit:contain;position:relative;z-index:2;animation:float 7s ease-in-out infinite;filter:drop-shadow(0 24px 48px rgba(0,0,0,.6)) drop-shadow(0 0 44px rgba(233,185,73,.35))}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
.float-badge{
  position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:rgba(16,19,25,.9);backdrop-filter:blur(10px);
  font-size:12px;font-weight:500;color:var(--ink-2);box-shadow:var(--sh-2);
}
.float-badge .icon{width:15px;height:15px;color:var(--gold)}
.badge-a{top:8%;right:-2%;animation:float 8s ease-in-out infinite}
.badge-b{bottom:14%;left:-4%;animation:float 9s ease-in-out .6s infinite}
.badge-c{bottom:40%;right:-6%;animation:float 7.5s ease-in-out 1.2s infinite}

/* ---------- ticker ---------- */
.ticker{border-block:1px solid var(--line-soft);background:rgba(233,185,73,.022);overflow:hidden;padding:16px 0}
.ticker-track{display:flex;gap:44px;width:max-content;animation:marquee 38s linear infinite;align-items:center}
.ticker-track span{font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.ticker-track .icon{width:14px;height:14px;color:var(--gold)}
@keyframes marquee{to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* ---------- stat band ---------- */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.stat-band > div{background:var(--bg-2);padding:30px 26px;transition:background .25s}
.stat-band > div:hover{background:var(--surface)}
.stat-band .icon{color:var(--gold);margin-bottom:16px}
.stat-band strong{display:block;font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:-.05em;line-height:1;background:linear-gradient(100deg,var(--gold-2),var(--gold-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-band span{display:block;color:var(--muted);font-size:13px;margin-top:9px}

/* ---------- cards ---------- */
.card{
  position:relative;background:linear-gradient(165deg,var(--surface),var(--bg-2));
  border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:30px;
  transition:border-color .3s,transform .3s,box-shadow .3s;overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,rgba(233,185,73,.5),transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:var(--sh-3)}
.card:hover::before{opacity:1}
.card h3{font-size:20px;margin-bottom:11px;letter-spacing:-.03em}
.card p{color:var(--muted);font-size:14.5px;line-height:1.68}
.card-icon{
  width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center;
  margin-bottom:22px;color:var(--gold);
  background:linear-gradient(160deg,rgba(233,185,73,.16),rgba(233,185,73,.04));
  border:1px solid rgba(233,185,73,.22);
  transition:transform .3s,box-shadow .3s;
}
.card:hover .card-icon{transform:scale(1.06) rotate(-4deg);box-shadow:0 8px 24px -8px rgba(233,185,73,.5)}
.card-icon.green{color:#4FD79A;background:linear-gradient(160deg,rgba(25,163,98,.18),rgba(25,163,98,.04));border-color:rgba(25,163,98,.26)}
.card:hover .card-icon.green{box-shadow:0 8px 24px -8px rgba(25,163,98,.5)}
.card-icon.red{color:#F08287;background:linear-gradient(160deg,rgba(193,39,45,.18),rgba(193,39,45,.04));border-color:rgba(193,39,45,.26)}
.card:hover .card-icon.red{box-shadow:0 8px 24px -8px rgba(193,39,45,.5)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* ---------- pillars (about) ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-soft);margin-top:8px}
.pillar{padding:30px 28px 30px 0;border-right:1px solid var(--line-soft)}
.pillar:last-child{border-right:0;padding-right:0}
.pillar:not(:first-child){padding-left:28px}
.pillar .icon{color:var(--gold);margin-bottom:16px}
.pillar h4{font-size:16.5px;margin-bottom:9px}
.pillar p{color:var(--muted);font-size:14px;line-height:1.65}

/* ---------- tokenomics ---------- */
.token-layout>*,.alloc>*,.spec-row>*,.contract>*,.card>*,.phase>*,.utility-row>*{min-width:0}
.token-layout>*{max-width:100%}
.token-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start}
.donut-card{background:linear-gradient(165deg,var(--surface),var(--bg-2));border:1px solid var(--line-soft);border-radius:var(--r-xl);padding:36px;text-align:center;position:relative;overflow:hidden}
.donut-card::after{content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:280px;height:280px;background:radial-gradient(closest-side,rgba(233,185,73,.16),transparent);pointer-events:none}
.donut{position:relative;width:min(260px,100%);margin-inline:auto}
.donut svg{width:100%;height:auto;transform:rotate(-90deg)}
.donut-seg{fill:none;stroke-width:20;transition:stroke-width .3s,opacity .3s;cursor:default}
.donut:hover .donut-seg{opacity:.4}
.donut .donut-seg:hover,.donut-seg.is-active{opacity:1;stroke-width:25}
.donut-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.donut-center strong{display:block;font-family:var(--display);font-size:38px;font-weight:700;letter-spacing:-.05em;line-height:1}
.donut-center small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-top:7px}
.alloc-list{display:grid;gap:2px}
.alloc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:17px 14px;border-radius:var(--r-md);transition:background .25s;cursor:default}
.alloc:hover{background:rgba(255,255,255,.03)}
.alloc-swatch{width:11px;height:11px;border-radius:3px;flex:none}
.alloc b{display:block;font-family:var(--display);font-size:15.5px;font-weight:600;letter-spacing:-.02em}
.alloc p{color:var(--muted);font-size:13px;line-height:1.55;margin-top:3px}
.alloc-pct{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.alloc-bar{grid-column:1/-1;height:3px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:2px}
.alloc-bar i{display:block;height:100%;border-radius:2px;width:0;transition:width 1.1s cubic-bezier(.2,.7,.3,1)}

/* spec table */
.spec{margin-top:22px;width:100%;text-align:left;border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.spec-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line-soft);font-size:14.5px}
.spec-row:last-child{border-bottom:0}
.spec-row span{color:var(--muted)}
.spec-row b{font-family:var(--display);font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;text-align:right}
.spec-row .pending{color:var(--gold);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:7px}

/* copyable contract */
.contract{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--r-md);margin-top:18px}
.contract code{flex:1 1 0;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--r-sm);border:1px solid var(--line-hard);background:rgba(255,255,255,.03);cursor:pointer;font-size:12.5px;font-weight:600;transition:all .2s}
.copy-btn:hover{border-color:var(--gold);color:var(--gold)}
.copy-btn.copied{border-color:var(--green-2);color:#7FE3B0}


/* ---------- contract actions + testnet warning ---------- */
.contract-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.contract-actions .btn{flex:0 0 auto}
.testnet-note{
  display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;
  margin-top:14px;padding:18px 20px;
  border:1px solid rgba(233,185,73,.34);background:rgba(233,185,73,.07);
  border-radius:var(--r-md);
}
.testnet-note .icon{color:var(--gold);margin-top:2px}
.testnet-note b{color:var(--ink);font-weight:600}
.testnet-note > div > b{display:block;font-family:var(--display);font-size:14.5px;margin-bottom:7px}
.testnet-note p{color:var(--ink-2);font-size:13px;line-height:1.68}

/* ---------- steps (how to buy) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
.step{position:relative;padding:32px 26px;border:1px solid var(--line-soft);border-radius:var(--r-lg);background:linear-gradient(165deg,var(--surface),var(--bg-2));transition:border-color .3s,transform .3s}
.step:hover{transform:translateY(-4px);border-color:var(--line)}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);color:var(--gold);font-family:var(--display);font-weight:700;font-size:14px;margin-bottom:20px;background:rgba(233,185,73,.07)}
.step h4{font-size:17.5px;margin-bottom:10px}
.step p{color:var(--muted);font-size:14px;line-height:1.65}
.step .icon{position:absolute;top:30px;right:26px;color:var(--muted-2);width:20px;height:20px}

/* ---------- roadmap ---------- */
.roadmap{display:grid;gap:16px}
.phase{
  display:grid;grid-template-columns:190px 1fr;gap:36px;
  padding:34px;border:1px solid var(--line-soft);border-radius:var(--r-xl);
  background:linear-gradient(150deg,var(--surface),var(--bg-2));
  transition:border-color .3s,box-shadow .3s;position:relative;overflow:hidden;
}
.phase:hover{border-color:var(--line);box-shadow:var(--sh-2)}
.phase-live{border-color:rgba(233,185,73,.32);background:linear-gradient(150deg,rgba(233,185,73,.055),var(--bg-2))}
.phase-side{display:flex;flex-direction:column;gap:14px}
.phase-num{font-family:var(--display);font-size:52px;font-weight:700;letter-spacing:-.07em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(233,185,73,.5)}
.phase-live .phase-num{background:linear-gradient(100deg,var(--gold-2),var(--gold-3));-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0;color:transparent}
.status{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;width:max-content;font-family:var(--display)}
.status-live{background:rgba(233,185,73,.14);color:var(--gold-2);border:1px solid rgba(233,185,73,.3)}
.status-next{background:rgba(255,255,255,.05);color:var(--ink-2);border:1px solid var(--line-soft)}
.status-later{background:transparent;color:var(--muted-2);border:1px solid var(--line-soft)}
.status .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.status-live .dot{animation:pulse-gold 2s ease-in-out infinite}
@keyframes pulse-gold{0%,100%{opacity:1}50%{opacity:.3}}
.phase h3{font-size:26px;margin-bottom:11px;letter-spacing:-.04em}
.phase > div > p{color:var(--ink-2);font-size:15px;line-height:1.72;max-width:66ch;margin-bottom:20px}
.phase ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:11px 28px}
.phase li{display:flex;align-items:flex-start;gap:11px;color:var(--muted);font-size:14px;line-height:1.55}
.phase li .icon{width:17px;height:17px;color:var(--gold);margin-top:3px}
.phase-later li .icon{color:var(--muted-2)}

/* ---------- utility list ---------- */
.utility-list{border-top:1px solid var(--line-soft)}
.utility-row{display:grid;grid-template-columns:52px 240px 1fr;gap:28px;align-items:start;padding:28px 0;border-bottom:1px solid var(--line-soft);transition:background .25s,padding .25s}
.utility-row:hover{background:rgba(233,185,73,.028)}
.utility-row .icon{color:var(--gold);width:26px;height:26px}
.utility-row b{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.03em}
.utility-row .u-num{display:block;font-size:11px;letter-spacing:.16em;color:var(--muted-2);margin-top:6px}
.utility-row p{color:var(--muted);font-size:14.5px;line-height:1.7;max-width:62ch}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line-soft)}
.faq-list details{border-bottom:1px solid var(--line-soft);transition:background .25s}
.faq-list details[open]{background:rgba(233,185,73,.025)}
.faq-list summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 20px 24px 0;font-family:var(--display);font-weight:600;font-size:17.5px;letter-spacing:-.025em;
  transition:color .2s;
}
.faq-list details[open] summary{padding-left:20px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--gold)}
.faq-icon{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-soft);display:grid;place-items:center;flex:none;transition:transform .3s,border-color .3s,color .3s}
.faq-list summary:hover .faq-icon{border-color:var(--gold);color:var(--gold)}
.faq-list details[open] .faq-icon{transform:rotate(45deg);border-color:var(--gold);color:var(--gold)}
.faq-answer{padding:0 20px 26px;color:var(--muted);font-size:15px;line-height:1.75;max-width:78ch}
.faq-answer p+p{margin-top:14px}
.faq-list details[open] .faq-answer{padding-left:20px}

/* ---------- community ---------- */
.social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.social{
  display:flex;align-items:center;gap:15px;padding:22px;
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--surface),var(--bg-2));
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.social:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:var(--sh-2)}
.social .icon{width:26px;height:26px;color:var(--gold);flex:none}
.social b{display:block;font-family:var(--display);font-size:15.5px;font-weight:600;letter-spacing:-.02em}
.social span{display:block;color:var(--muted-2);font-size:12.5px;margin-top:2px}
.social[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* ---------- CTA banner ---------- */
.cta-banner{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  border:1px solid rgba(233,185,73,.26);
  background:linear-gradient(135deg,rgba(233,185,73,.10),rgba(14,122,69,.08) 55%,rgba(193,39,45,.07));
  padding:64px 56px;text-align:center;
}
.cta-banner .cta-art{position:absolute;inset:0;opacity:.5;pointer-events:none}
.cta-banner > *{position:relative;z-index:1}
.cta-banner h2{font-size:clamp(32px,4.4vw,54px);letter-spacing:-.05em;margin-bottom:20px}
.cta-banner p{color:var(--ink-2);font-size:17.5px;line-height:1.7;max-width:56ch;margin-inline:auto;margin-bottom:34px}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- disclaimer ---------- */
.disclaimer{display:flex;gap:16px;align-items:flex-start;padding:26px 28px;border:1px solid rgba(193,39,45,.25);background:rgba(193,39,45,.05);border-radius:var(--r-lg)}
.disclaimer .icon{color:#F08287;flex:none;margin-top:2px}
.disclaimer b{display:block;font-family:var(--display);font-size:15px;margin-bottom:7px}
.disclaimer p{color:var(--muted);font-size:13.5px;line-height:1.7}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line-soft);margin-top:110px;padding:64px 0 40px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:52px}
.footer-brand p{color:var(--muted);font-size:14px;line-height:1.7;max-width:34ch;margin-top:20px}
.footer-col h5{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin:0 0 18px}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.footer-col a{color:var(--ink-2);font-size:14.5px;transition:color .2s}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:28px;border-top:1px solid var(--line-soft);color:var(--muted-2);font-size:13px;flex-wrap:wrap}
.footer-bottom a:hover{color:var(--gold)}
.to-top{display:inline-flex;align-items:center;gap:8px}


/* ---------- verification panel (official channels + contact rules) ---------- */
.verify-panel{
  display:grid;grid-template-columns:1fr 1.15fr;gap:44px;
  margin-top:20px;padding:38px 40px;
  border:1px solid rgba(233,185,73,.28);border-radius:var(--r-xl);
  background:linear-gradient(150deg,rgba(233,185,73,.07),rgba(10,12,16,.9) 55%);
  position:relative;overflow:hidden;
}
.verify-panel::after{
  content:"";position:absolute;top:-140px;right:-80px;width:340px;height:340px;
  background:radial-gradient(closest-side,rgba(233,185,73,.14),transparent);pointer-events:none;
}
.verify-col{position:relative;z-index:1;min-width:0}
.verify-col h3{display:flex;align-items:center;gap:11px;font-size:19px;letter-spacing:-.03em;margin-bottom:14px}
.verify-col h3 .icon{color:var(--gold);flex:none}
.verify-intro{color:var(--muted);font-size:14px;line-height:1.65;margin-bottom:20px}

.verify-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.verify-list li{
  display:grid;grid-template-columns:20px auto 1fr;align-items:center;gap:12px;
  padding:13px 14px;border-radius:var(--r-md);background:rgba(255,255,255,.028);
  border:1px solid var(--line-soft);
}
.verify-list li .icon{color:var(--gold)}
.verify-list a{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  color:var(--gold-2);word-break:break-all;
  /* expand the real tap target to the li's own padding without shifting
     layout: padding grows the clickable box, the matching negative margin
     cancels it back out for sizing purposes only (margin doesn't count
     toward the hit area). Was 21px tall, under the WCAG 24px minimum. */
  display:inline-block;padding-block:13px;margin-block:-13px;
}
.verify-list a:hover{text-decoration:underline}
.verify-list span{color:var(--muted-2);font-size:11.5px;text-align:right;white-space:nowrap}

.never-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.never-list li{
  display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;
  color:var(--muted);font-size:14px;line-height:1.6;
}
.never-list li .icon{color:#F08287;margin-top:3px}
.never-list b{color:var(--ink);font-weight:600}

.independence{
  display:grid;grid-template-columns:20px 1fr;gap:13px;align-items:start;
  margin-top:24px;padding:18px 20px;
  border:1px solid rgba(193,39,45,.28);background:rgba(193,39,45,.06);border-radius:var(--r-md);
}
.independence .icon{color:#F08287;margin-top:3px}
.independence b{display:block;font-family:var(--display);font-size:14.5px;margin-bottom:6px}
.independence p{color:var(--muted);font-size:13px;line-height:1.65}

/* ---------- sticky mobile action bar (mobile only) ---------- */
.mobile-bar{display:none}

/* ---------- scroll reveal ---------- */
/* content is visible by default; only hidden once JS confirms it can reveal it */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */

/* ===== tablet / small desktop ===== */
@media(max-width:1080px){
  .hero-inner{gap:36px}
  .token-layout{grid-template-columns:1fr;gap:40px}
  .lead-grid{gap:40px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .social-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
}

/* ===== mobile ===== */
@media(max-width:900px){

  /* --- rhythm: tighter vertical scale --- */
  .section{padding:60px 0}
  .section-tight{padding:48px 0}
  .section-head{margin-bottom:30px}
  .section-title{font-size:clamp(30px,7.6vw,40px);letter-spacing:-.04em;max-width:none;text-wrap:balance}
  .section-intro{font-size:15.5px;line-height:1.68;margin-top:16px;max-width:none}
  .section-intro+.section-intro{margin-top:12px}
  .eyebrow{margin-bottom:12px;font-size:10.5px}
  .lead-grid{grid-template-columns:1fr;gap:20px;margin-bottom:32px}
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr;gap:10px}

  /* --- touch ergonomics --- */
  a,button,summary{-webkit-tap-highlight-color:transparent}
  .btn:active,.card:active,.step:active,.social:active{transform:scale(.985)}
  .btn{padding:16px 22px}
  .btn-lg{padding:17px 26px;font-size:15.5px}

  /* --- nav --- */
  .nav-inner{height:64px}
  .brand{min-height:44px}
  .nav-links{
    display:none;position:absolute;top:60px;left:18px;right:18px;
    flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(12,14,18,.98);backdrop-filter:blur(20px);
    border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:10px;box-shadow:var(--sh-3);
  }
  .nav-links.open{display:flex}
  .nav-links a:not(.btn){display:flex;align-items:center;min-height:50px;padding:0 14px;font-size:16px;border-radius:var(--r-md)}
  .nav-links a:not(.btn):active{background:rgba(233,185,73,.1)}
  .menu-toggle{display:flex;width:44px;height:44px}
  .nav-cta{gap:8px}
  .nav-cta .btn:not(.wallet-connect){display:none}
  .nav-mobile-cta{display:inline-flex!important;margin-top:8px;justify-content:center;min-height:50px}
  .wallet-connect{padding:0 14px;font-size:12.5px;height:44px;min-width:44px;border-radius:var(--r-sm);white-space:nowrap}

  /* --- hero ---
     .hero-copy dissolves so its children order directly against the coin.
     Two extra items — .mobile-flow-ticker and .mobile-flow-stats — are real
     DOM siblings inside .hero-inner (display:none by default, see base CSS)
     carrying the exact same ticker/stat-band markup that lives further down
     the page. Duplicating rather than re-flowing the real sections keeps
     this entirely mobile-scoped: desktop never sees or loads different CSS
     for the originals, it just never renders these hidden duplicates.
     Order: coin -> headline -> short description -> ticker -> stats -> CTA.
     The status pill and the four trust chips are dropped on mobile — the
     ticker+stats duplicates already state the same facts (fixed supply, no
     pre-sale, public allocations, community-first) without repeating them
     a third time in the same screen. */
  .hero{padding:14px 0 32px}
  .hero-inner{grid-template-columns:1fr;gap:0}
  .hero-copy{display:contents}
  .hero-badge{display:none}
  .coin-stage{order:1;min-height:0;margin:0 0 16px;padding:0}
  .hero h1{order:2;font-size:clamp(40px,11.6vw,54px);letter-spacing:-.05em;text-wrap:balance}
  .hero-lede{display:none}
  .hero-sub{display:none}
  .hero-lede-mobile{display:block;order:3;font-size:16px;line-height:1.6;color:var(--ink-2);margin:12px 0 0;max-width:none}
  .ticker.mobile-flow-ticker{display:block;order:4;width:100vw;margin:18px 0 0 calc(50% - 50vw);padding:12px 0;border-block:1px solid var(--line-soft);background:rgba(233,185,73,.022)}
  .stat-band.mobile-flow-stats{display:grid;order:5;margin:16px 0 0}
  .hero-actions{order:6;flex-direction:column;gap:10px;margin:20px 0 0;align-self:stretch}
  .hero-actions .btn{width:100%}
  .hero-trust{display:none}

  /* coin box forced square regardless of the source image's own proportions
     (720x689px, ~4.5% wider than tall) so it stays concentric with the
     perfectly circular orbit rings at every mobile size. Animation frozen
     here so the coin sits dead-still and dead-centre, matching the static
     composition; it still floats gently on desktop as designed. */
  .coin-img{aspect-ratio:1;animation:none}
  /* the ring SVG's own auto-sized grid row is taller than the now-collapsed
     coin-stage box; place-items:center only centres content WITHIN a track,
     it doesn't centre an oversized track within the container. Needs
     align-content too, or the whole ring assembly hugs the top edge. */
  .coin-rings{place-content:center}
  .coin-rings svg{width:min(292px,84%)}
  .coin-img{width:min(196px,56%)}
  .coin-glow{width:min(300px,88%)}

  /* the floating badges repeat the trust chips directly below — drop them */
  .float-badge{display:none}

  /* --- ticker --- */
  .ticker:not(.mobile-flow-ticker){display:none}
  .stat-band-section{display:none}
  .ticker-track{gap:30px}
  .ticker-track span{font-size:11px;letter-spacing:.16em}

  /* --- stat band: 2x2, never a single column --- */
  .stat-band{grid-template-columns:1fr 1fr;border-radius:var(--r-md)}
  .stat-band>div{padding:20px 16px}
  .stat-band .icon{width:22px;height:22px;margin-bottom:11px}
  .stat-band strong{font-size:27px}
  .stat-band span{font-size:11.5px;margin-top:5px;line-height:1.4}

  /* --- cards become compact rows: icon left, text right --- */
  .card{
    display:grid;grid-template-columns:46px minmax(0,1fr);
    column-gap:15px;row-gap:5px;padding:20px 18px;align-items:start;
    border-radius:var(--r-md);
  }
  .card:hover{transform:none}
  .card-icon{width:46px;height:46px;margin-bottom:0;grid-row:span 2;border-radius:12px}
  .card:hover .card-icon{transform:none}
  .card-icon .icon{width:24px;height:24px}
  .card h3{grid-column:2;font-size:17px;margin-bottom:0;align-self:center;min-height:46px;display:flex;align-items:center}
  .card p{grid-column:2;font-size:14px;line-height:1.6}

  /* --- pillars --- */
  .pillars{grid-template-columns:1fr;margin-top:0}
  .pillar{
    display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;
    border-right:0;border-bottom:1px solid var(--line-soft);padding:20px 0;
  }
  .pillar:not(:first-child){padding-left:0}
  .pillar:last-child{border-bottom:0}
  .pillar .icon{width:26px;height:26px;margin-bottom:0;grid-row:span 2}
  .pillar h4{grid-column:2;font-size:16px;margin-bottom:5px}
  .pillar p{grid-column:2;font-size:13.5px}

  /* --- tokenomics --- */
  .donut-card{padding:24px 16px;border-radius:var(--r-lg)}
  .donut{width:min(210px,72%)}
  .donut-center strong{font-size:32px}
  .spec{margin-top:18px}
  .spec-row{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:13px 14px;font-size:13.5px}
  .spec-row b{text-align:right}
  .alloc{grid-template-columns:auto minmax(0,1fr) auto;padding:14px 10px;column-gap:12px;row-gap:4px}
  .alloc b{font-size:15px}
  .alloc p{font-size:12.5px;line-height:1.5}
  .alloc-pct{font-size:18px}
  .contract{padding:12px 13px;gap:9px}
  .contract-actions{gap:8px}
  .contract-actions .btn{flex:1 1 auto;justify-content:center}
  .testnet-note{padding:15px 15px;gap:11px;grid-template-columns:20px 1fr}
  .testnet-note p{font-size:12.5px}
  .contract code{font-size:11.5px}
  .copy-btn{min-height:44px;padding:8px 14px}

  /* --- steps become numbered rows --- */
  .steps{grid-template-columns:1fr;gap:10px}
  .step{
    display:grid;grid-template-columns:44px minmax(0,1fr);
    column-gap:15px;row-gap:5px;padding:20px 18px;border-radius:var(--r-md);
  }
  .step:hover{transform:none}
  .step>.icon{display:none}
  .step-num{width:44px;height:44px;margin-bottom:0;grid-row:span 2;font-size:13.5px}
  .step h4{grid-column:2;font-size:16.5px;margin-bottom:0;min-height:44px;display:flex;align-items:center}
  .step p{grid-column:2;font-size:13.5px;line-height:1.6}

  /* --- roadmap --- */
  .roadmap{gap:10px}
  .phase{grid-template-columns:1fr;gap:16px;padding:22px 18px;border-radius:var(--r-lg)}
  .phase-side{flex-direction:row;align-items:center;gap:14px}
  .phase-num{font-size:34px}
  .phase h3{font-size:21px;margin-bottom:8px}
  .phase>div>p{font-size:14px;line-height:1.62;margin-bottom:14px;max-width:none}
  .phase ul{grid-template-columns:1fr;gap:9px}
  .phase li{font-size:13.5px}

  /* --- ecosystem --- */
  .utility-row{grid-template-columns:30px minmax(0,1fr);gap:14px;row-gap:7px;padding:20px 0}
  .utility-row .icon{width:24px;height:24px}
  .utility-row b{font-size:17px}
  .utility-row .u-num{font-size:10px;margin-top:4px}
  .utility-row p{grid-column:2;font-size:13.5px;line-height:1.62;max-width:none}

  /* --- verification panel --- */
  .verify-panel{grid-template-columns:1fr;gap:30px;padding:24px 18px;border-radius:var(--r-lg);margin-top:14px}
  .verify-col h3{font-size:17px;gap:10px}
  .verify-intro{font-size:13.5px;margin-bottom:16px}
  .verify-list li{grid-template-columns:18px 1fr;row-gap:2px;padding:12px 13px}
  .verify-list a{font-size:12.5px}
  .verify-list span{grid-column:2;text-align:left;font-size:11px}
  .never-list li{font-size:13.5px;gap:10px}
  .independence{padding:16px 15px;margin-top:20px}
  .independence p{font-size:12.5px}

  /* --- FAQ --- */
  .faq-list summary{font-size:16px;gap:14px;padding:19px 14px 19px 0;min-height:56px}
  .faq-list details[open] summary{padding-left:14px}
  .faq-answer{font-size:14.5px;line-height:1.7;padding:0 14px 20px}
  .faq-list details[open] .faq-answer{padding-left:14px}
  .faq-icon{width:30px;height:30px}

  /* --- community: 2-up --- */
  .social-grid{grid-template-columns:1fr 1fr;gap:10px}
  .social{flex-direction:column;align-items:flex-start;gap:11px;padding:17px 15px;border-radius:var(--r-md);min-height:104px}
  .social:hover{transform:none}
  .social .icon{width:23px;height:23px}
  .social b{font-size:14.5px}
  .social span{font-size:11.5px}

  /* --- CTA --- */
  .cta-banner{padding:36px 20px;border-radius:var(--r-lg)}
  .cta-banner h2{font-size:clamp(28px,7.6vw,38px);margin-bottom:14px}
  .cta-banner p{font-size:15.5px;margin-bottom:24px}
  .cta-actions{flex-direction:column;gap:10px}
  .cta-actions .btn{width:100%}

  /* --- disclaimer --- */
  .disclaimer{padding:20px 18px;gap:13px;border-radius:var(--r-md)}
  .disclaimer p{font-size:12.5px;line-height:1.65}

  /* --- footer: 2-up columns, 44px tap targets --- */
  .footer{margin-top:64px;padding:44px 0 30px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:26px 20px;margin-bottom:32px}
  .footer-brand{grid-column:1/-1}
  .footer-brand p{font-size:13.5px;margin-top:14px;max-width:none}
  .footer-col h5{margin-bottom:6px;font-size:11px}
  .footer-col ul{gap:0}
  .footer-col a{display:flex;align-items:center;min-height:44px;font-size:14.5px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px;font-size:12.5px;padding-top:20px}
  .to-top{min-height:44px}
  .text-link{min-height:44px}

  /* --- sticky mobile action bar --- */
  .mobile-bar{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    gap:9px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(8,9,12,.93);backdrop-filter:blur(18px) saturate(140%);
    border-top:1px solid var(--line-soft);
    transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.7,.3,1);
  }
  .mobile-bar.show{transform:none}
  .mobile-bar .btn{flex:1;padding:14px 12px;font-size:13.5px;gap:7px}
  body.has-mobile-bar{padding-bottom:74px}
}

/* ===== small phones ===== */
@media(max-width:430px){
  .shell{width:calc(100% - 32px)}
  .brand-text small{display:none}
  .brand{gap:10px}
  .brand-coin{width:34px;height:34px}
  .coin-rings svg{width:min(262px,86%)}
  .coin-img{width:min(176px,56%)}
  .coin-glow{width:min(270px,90%)}
  .hero h1{font-size:clamp(36px,11.4vw,48px)}
  .section-title{font-size:clamp(27px,8.4vw,36px)}
  .cta-banner h2{font-size:clamp(26px,8.4vw,34px)}
  .stat-band strong{font-size:24px}
  .card,.step{column-gap:13px;padding:18px 15px}
  .card-icon{width:42px;height:42px}
  .card h3{min-height:42px;font-size:16.5px}
  .step-num{width:42px;height:42px}
  .step h4{min-height:42px;font-size:16px}
  .donut{width:min(190px,76%)}
  .alloc{padding:13px 6px;column-gap:10px}
  .social{min-height:98px;padding:15px 13px}
  .mobile-bar .btn{font-size:12.5px;padding:13px 8px}
}

/* ===== very small phones ===== */
@media(max-width:360px){
  .shell{width:calc(100% - 26px)}
  .hero h1{font-size:36px}
  .trust-chip{font-size:11px;padding:6px 9px}
  .social-grid{grid-template-columns:1fr}
  .social{flex-direction:row;align-items:center;min-height:0}
}

/* ===== landscape phones: keep the hero from filling the screen ===== */
@media(max-width:900px) and (orientation:landscape) and (max-height:520px){
  .coin-rings svg{width:min(210px,52%)}
  .coin-img{width:min(140px,34%)}
  .coin-glow{width:min(216px,54%)}
  .hero{padding:14px 0 32px}
  .mobile-bar{display:none}
  body.has-mobile-bar{padding-bottom:0}
}

/* ---------- motion / print ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}