/* =========================================================
   $NOKIA — the indestructible memecoin
   Palette split into two worlds:
   · Cream + emerald  = money / stonks / CTA
   · Nokia LCD green   = the phone screen world
   ========================================================= */

:root{
  --cream:      #F4EEDD;
  --cream-2:    #EDE5CE;
  --cream-3:    #E4D9BC;
  --ink:        #16210F;
  --ink-soft:   #38452c;

  --lcd:        #9BBB2E;   /* 3310 backlight pea-green */
  --lcd-bright: #B9DB3B;
  --lcd-screen: #8FAe2b;
  --lcd-ink:    #1c2a06;

  --stonk:      #23B84B;   /* money green */
  --stonk-dark: #17842f;
  --signal:     #E0483B;   /* alert red for the down-jokes */

  --line:       #cbbf9c;
  --shadow:     0 18px 0 -6px rgba(22,33,15,.12), 0 30px 60px -30px rgba(22,33,15,.5);

  --f-display: "Anton", Impact, "Haettenschweiler", sans-serif;
  --f-pixel:   "Press Start 2P", monospace;
  --f-body:    "Space Grotesk", system-ui, sans-serif;

  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--cream);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(155,187,46,.14), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(35,184,75,.10), transparent 40%);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; }
img{ max-width:100%; }

/* ---------- shared bits ---------- */
.eyebrow{
  font-family:var(--f-pixel);
  font-size:.6rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--stonk-dark);
  margin:0 0 1.1rem;
}
.eyebrow--dark{ color:var(--lcd-bright); }

.section__title{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(2rem,5vw,3.6rem);
  line-height:.98;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.section__title--light{ color:var(--cream); }
.section__lead{
  max-width:56ch;
  font-size:1.06rem;
  color:var(--ink-soft);
  margin:.9rem 0 0;
}
.section__lead--light{ color:#d6d0b8; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--f-body); font-weight:700; font-size:.98rem;
  padding:.85rem 1.4rem;
  border:2.5px solid var(--ink);
  border-radius:2px;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease, background .15s;
  box-shadow:4px 4px 0 var(--ink);
}
.btn:hover{ transform:translate(-1px,-1px); box-shadow:6px 6px 0 var(--ink); }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.btn--buy{ background:var(--stonk); color:#062910; }
.btn--ghost{ background:var(--cream); color:var(--ink); }
.btn--lcd{ background:var(--lcd); color:var(--lcd-ink); font-family:var(--f-pixel); font-size:.72rem; }
.btn--lg{ font-size:1.08rem; padding:1rem 1.7rem; }
.btn--full{ width:100%; }

/* =========================================================
   TOP TICKER TAPE
   ========================================================= */
.tape{
  background:var(--ink); color:var(--lcd-bright);
  font-family:var(--f-pixel); font-size:.62rem;
  padding:.55rem 0; overflow:hidden; white-space:nowrap;
  border-bottom:3px solid var(--lcd);
}
.tape__track{ display:inline-flex; gap:2.6rem; will-change:transform; animation:tape 34s linear infinite; }
.tape__track span{ opacity:.92; }
.tape__track .up{ color:var(--lcd-bright); }
.tape__track .dn{ color:var(--signal); }
@keyframes tape{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:1.5rem;
  padding:.7rem clamp(1rem,4vw,2.4rem);
  background:rgba(244,238,221,.82);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--line);
}
.nav__brand{ display:flex; align-items:center; gap:.55rem; }
.nav__signal{ color:var(--stonk-dark); letter-spacing:-2px; font-size:1.1rem; }
.nav__ticker{ font-family:var(--f-display); font-size:1.5rem; letter-spacing:.02em; }
.nav__links{ display:flex; gap:1.4rem; margin-left:auto; font-weight:500; }
.nav__links a{ position:relative; }
.nav__links a:hover{ color:var(--stonk-dark); }
.nav__buy{ font-size:.85rem; padding:.55rem 1rem; box-shadow:3px 3px 0 var(--ink); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(2.5rem,6vw,5rem) clamp(1rem,4vw,2.4rem) 4rem;
  display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center;
}
.hero__title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.4rem,6.4vw,5.4rem);
  line-height:.92; letter-spacing:.005em; text-transform:uppercase;
  margin:.2rem 0 1.4rem;
}
.hero__hl{
  background:linear-gradient(180deg,transparent 58%, rgba(224,72,59,.32) 58%);
  padding:0 .05em;
}
.hero__hl--green{
  background:linear-gradient(180deg,transparent 58%, rgba(35,184,75,.38) 58%);
  color:var(--stonk-dark);
}
.hero__sub{ font-size:1.12rem; color:var(--ink-soft); max-width:46ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin:1.6rem 0 1.4rem; }
.hero__proof{
  list-style:none; display:flex; gap:1.8rem; padding:0; margin:1.4rem 0 0;
  font-family:var(--f-pixel); font-size:.6rem; color:var(--ink-soft);
}
.hero__proof b{ display:block; font-size:1.5rem; color:var(--ink); margin-bottom:.4rem; }

/* ---- the phone: Nokia 3310 (two-tone navy + chrome) ---- */
.hero__phone{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.phone{
  position:relative;
  width:228px;
  /* desaturated navy front cover */
  background:linear-gradient(160deg,#4a5064 0%, #3a4155 50%, #2c3345 100%);
  border:2px solid #232a3b;
  border-radius:54px 54px 40px 40px / 74px 74px 46px 46px;
  padding:20px 16px 26px;
  box-shadow:
    var(--shadow),
    inset 0 3px 5px rgba(255,255,255,.26),
    inset 0 -12px 22px rgba(0,0,0,.42),
    inset 0 0 0 2px rgba(20,28,44,.5);
}
.phone.dropping{ animation:drop .6s cubic-bezier(.5,-0.4,.6,1.4); }
@keyframes drop{
  0%{ transform:translateY(-8px) rotate(-2deg); }
  55%{ transform:translateY(10px) rotate(3deg); }
  70%{ transform:translateY(4px) rotate(-1deg); }
  100%{ transform:translateY(0) rotate(0); }
}

/* vertical column of speaker dots */
.phone__ear{ display:flex; flex-direction:column; align-items:center; gap:3px; margin:2px auto 12px; }
.phone__ear span{
  width:5px; height:5px; border-radius:50%;
  background:#1c2336; box-shadow:inset 0 1px 1px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.06);
}

/* chrome NOKIA badge above the screen */
.phone__badge{
  width:98px; margin:0 auto 12px; padding:4px 0; text-align:center; text-indent:.24em;
  border-radius:5px;
  background:linear-gradient(180deg,#eef0f4 0%,#c3c7d0 48%,#9da2af 52%,#d2d5dc 100%);
  border:1px solid #83879333;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85), inset 0 -2px 3px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.35);
  font-family:var(--f-body); font-weight:700; font-size:.6rem; letter-spacing:.24em;
  color:#2b3143;
}

/* recessed screen with dark bezel */
.phone__screenwrap{
  background:#242f45; border:1px solid #171f2f; border-radius:8px;
  padding:8px 10px; box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
}
.phone__screen{
  background:var(--lcd-screen); border-radius:3px; padding:6px;
  box-shadow:inset 0 0 10px rgba(38,48,8,.55), inset 0 0 0 1px rgba(0,0,0,.22);
}
#lcd{ display:block; width:100%; height:auto; image-rendering:pixelated; }

/* silver metallic band across the soft-key row (bleeds to phone edges) */
.phone__band{
  margin:12px -16px 14px; padding:11px 18px 13px;
  background:linear-gradient(180deg,#e4e6eb 0%,#c2c6cf 42%,#aab0bb 58%,#cfd2d9 100%);
  border-top:1px solid rgba(255,255,255,.7);
  border-bottom:1px solid rgba(0,0,0,.3);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.16);
}

/* nav cluster: dark curved soft keys + center cyan up/down rocker */
.phone__navi{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:9px; }
.softkey{
  height:29px; cursor:pointer; border:1px solid #202638;
  background:linear-gradient(180deg,#4a5164 0%,#333a4c 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.35);
  transition:filter .1s, transform .05s;
}
.softkey--l{ border-radius:22px 7px 7px 22px; }
.softkey--r{ border-radius:7px 22px 22px 7px; }
.softkey:hover{ filter:brightness(1.12); }
.softkey:active{ transform:translateY(1px); filter:brightness(.85); }

.navi{
  width:48px; height:26px; border-radius:15px; overflow:hidden;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#93dced 0%,#5cc0d6 50%,#3ba6bd 100%);
  border:1px solid #2f93a8;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.7), inset 0 -2px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.3);
}
.navi__up,.navi__dn{
  flex:1; background:none; border:none; cursor:pointer; color:#0c4653; font-size:.5rem;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.navi__up{ align-items:flex-end; padding-bottom:1px; }
.navi__dn{ align-items:flex-start; padding-top:1px; }
.navi__up:active,.navi__dn:active{ background:rgba(0,0,0,.15); }

/* keypad: cream oval keys with blue T9 letters */
.phone__keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px 9px; }
.pk{
  display:flex; align-items:center; justify-content:center; gap:3px;
  padding:8px 0; cursor:pointer;
  border-radius:50% / 58%;
  border:1px solid #96968c;
  background:linear-gradient(180deg,#edece4 0%,#cdccc2 52%,#b7b6ac 100%);
  color:#262b38;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85), 0 2px 2px rgba(0,0,0,.32);
  transition:transform .05s, filter .1s;
}
.pk:hover{ filter:brightness(1.05); }
.pk:active{ transform:translateY(1px); box-shadow:inset 0 1px 3px rgba(0,0,0,.3); }
.pk__n{ font-family:var(--f-body); font-weight:700; font-size:.98rem; line-height:1; }
.pk__a{ font-size:.4rem; letter-spacing:.03em; color:#3a5a88; text-transform:lowercase; line-height:1; }

.phone__caption{ font-size:.82rem; color:var(--ink-soft); text-align:center; max-width:30ch; margin:0; }
.btn--sm{ font-size:.82rem; padding:.5rem 1rem; box-shadow:3px 3px 0 var(--ink); }

/* =========================================================
   WHY / BELIEF
   ========================================================= */
.why{ max-width:var(--maxw); margin:0 auto; padding:3rem clamp(1rem,4vw,2.4rem) 4rem; }
.why__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:2.4rem; }
.belief{
  background:var(--cream-2); border:2.5px solid var(--ink); border-radius:4px;
  padding:1.5rem 1.3rem; box-shadow:5px 5px 0 var(--ink);
  transition:transform .12s, box-shadow .12s;
}
.belief:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
.belief__ico{ font-size:2rem; margin-bottom:.7rem; }
.belief h3{ font-family:var(--f-body); font-size:1.08rem; font-weight:700; margin-bottom:.5rem; line-height:1.15; }
.belief p{ font-size:.94rem; color:var(--ink-soft); margin:0; }

/* =========================================================
   THE LEGEND — dark section
   ========================================================= */
.legend{
  background:var(--ink); color:var(--cream);
  padding:4.5rem clamp(1rem,4vw,2.4rem);
  border-top:5px solid var(--lcd); border-bottom:5px solid var(--lcd);
}
.legend__head{ max-width:var(--maxw); margin:0 auto; }
.legend__body{
  max-width:var(--maxw); margin:2.6rem auto 0;
  display:grid; grid-template-columns:1.3fr .7fr; gap:2rem; align-items:start;
}
.chart{ display:flex; flex-direction:column; gap:1.1rem; }
.chart__row{ display:grid; grid-template-columns:110px 1fr; grid-template-areas:"label bar" "label val"; gap:.2rem .9rem; align-items:center; }
.chart__label{ grid-area:label; font-family:var(--f-pixel); font-size:.62rem; color:var(--lcd-bright); }
.chart__bar{ grid-area:bar; height:26px; background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.18); border-radius:2px; overflow:visible; position:relative; }
.chart__bar span{
  display:block; height:100%; width:var(--v);
  background:repeating-linear-gradient(90deg,var(--lcd) 0 8px,var(--lcd-bright) 8px 10px);
  transition:width 1s cubic-bezier(.2,.8,.2,1);
}
.chart__bar--overflow{ box-shadow:0 0 0 2px var(--stonk); position:relative; }
.chart__bar--overflow::after{ content:"→→→"; position:absolute; right:-2.4rem; top:2px; color:var(--stonk); font-family:var(--f-pixel); font-size:.6rem; }
.chart__val{ grid-area:val; font-size:.8rem; color:#c9c2a8; }
.chart__row--win .chart__label{ color:var(--stonk); }
.chart__row--win .chart__val{ color:var(--lcd-bright); }

/* drop test */
.droptest{
  background:#0f180a; border:2.5px solid var(--lcd); border-radius:6px;
  padding:1.6rem; position:relative; overflow:hidden;
}
.droptest h3{ font-family:var(--f-body); font-size:1.15rem; margin-bottom:.4rem; }
.droptest p{ font-size:.9rem; color:#c9c2a8; margin:0 0 1.1rem; }
.droptest__result{ font-family:var(--f-pixel); font-size:.55rem; line-height:1.7; color:var(--lcd-bright); margin-top:1.1rem !important; min-height:2.4em; }
.droptest__crack{
  position:absolute; inset:auto 0 0 0; height:0; pointer-events:none;
  background:
    linear-gradient(105deg,transparent 48%,var(--signal) 49% 51%,transparent 52%),
    linear-gradient(75deg,transparent 46%,var(--signal) 47% 49%,transparent 50%);
  opacity:0; transition:height .3s, opacity .3s;
}
.droptest.cracked .droptest__crack{ height:60px; opacity:.6; }

.legend__facts{
  max-width:var(--maxw); margin:2.8rem auto 0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem;
}
.legend__facts li{
  font-size:.98rem; color:#e6e0cb; padding:.9rem 1.1rem;
  border-left:4px solid var(--lcd); background:rgba(255,255,255,.03); font-style:italic;
}
.legend__facts b{ color:var(--lcd-bright); font-style:normal; }

/* =========================================================
   TOKENOMICS / METRICS / BUY
   ========================================================= */
.tokenomics{ max-width:var(--maxw); margin:0 auto; padding:4.5rem clamp(1rem,4vw,2.4rem); }
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:2.4rem 0 1rem; }
.metrics__status{
  display:flex; align-items:center; gap:.55rem; margin:0 0 2.8rem;
  font-family:var(--f-pixel); font-size:.55rem; color:var(--ink-soft); letter-spacing:.02em;
}
.metrics__dot{
  width:9px; height:9px; border-radius:50%; flex:none; background:var(--stonk);
  box-shadow:0 0 0 0 rgba(35,184,75,.5); animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(35,184,75,.5); }
  70%{ box-shadow:0 0 0 7px rgba(35,184,75,0); }
  100%{ box-shadow:0 0 0 0 rgba(35,184,75,0); }
}
.metrics__status--stale{ color:var(--signal); }
.metrics__status--stale .metrics__dot{ background:var(--signal); animation:none; }
.metric{
  background:var(--cream-2); border:2.5px solid var(--ink); border-radius:4px;
  padding:1.3rem; box-shadow:5px 5px 0 var(--ink); display:flex; flex-direction:column; gap:.3rem;
}
.metric__label{ font-family:var(--f-pixel); font-size:.55rem; text-transform:uppercase; color:var(--ink-soft); }
.metric__val{ font-family:var(--f-display); font-size:2rem; line-height:1; }
.metric__delta{ font-weight:700; font-size:.86rem; }
.metric__delta--up{ color:var(--stonk-dark); }
.metric__delta--down{ color:var(--signal); }
.metric__sub{ font-size:.8rem; color:var(--ink-soft); }

.split{ display:grid; grid-template-columns:.9fr 1.1fr; gap:1.4rem; }
.distro,.buy{
  background:var(--cream-2); border:2.5px solid var(--ink); border-radius:4px;
  padding:1.8rem; box-shadow:6px 6px 0 var(--ink);
}
.distro h3,.buy h3{ font-family:var(--f-display); font-weight:400; font-size:1.7rem; text-transform:uppercase; margin-bottom:1.1rem; }
.distro__list{ list-style:none; padding:0; margin:0 0 1.2rem; display:flex; flex-direction:column; gap:.7rem; }
.distro__list li{ display:flex; align-items:center; gap:.6rem; font-size:.98rem; }
.distro__list b{ margin-left:auto; font-family:var(--f-pixel); font-size:.7rem; }
.dot{ width:14px; height:14px; border-radius:50%; background:var(--c); border:2px solid var(--ink); flex:none; }
.distro__bar{ display:flex; height:20px; border:2.5px solid var(--ink); border-radius:2px; overflow:hidden; }
.distro__bar span{ width:var(--w); background:var(--c); }
.distro__note{ font-size:.84rem; color:var(--ink-soft); margin:1rem 0 0; }

.buy__steps{ margin:0 0 1.3rem; padding-left:1.2rem; display:flex; flex-direction:column; gap:.55rem; font-size:.96rem; }
.ca{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; background:var(--ink); color:var(--lcd-bright); padding:.7rem .8rem; border-radius:3px; margin-bottom:1.2rem; }
.ca__label{ font-family:var(--f-pixel); font-size:.5rem; text-transform:uppercase; color:#8a9a63; }
.ca__addr{ font-family:var(--f-pixel); font-size:.56rem; word-break:break-all; flex:1 1 200px; }
.ca__copy{ font-family:var(--f-body); font-weight:700; font-size:.8rem; background:var(--lcd); color:var(--lcd-ink); border:none; border-radius:3px; padding:.4rem .8rem; cursor:pointer; }
.ca__copy:hover{ background:var(--lcd-bright); }
.buy__actions{ display:flex; gap:.8rem; flex-wrap:wrap; }
.buy__chain{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; font-size:.86rem; color:var(--ink-soft); margin:1.2rem 0 0; }
.chain-pill{ font-family:var(--f-pixel); font-size:.52rem; background:var(--ink); color:var(--lcd-bright); padding:.4rem .6rem; border-radius:20px; }

.disclaimer{ font-size:.76rem; color:var(--ink-soft); max-width:80ch; margin:2.4rem auto 0; text-align:center; opacity:.85; }

/* =========================================================
   ROADMAP
   ========================================================= */
.roadmap{ background:var(--ink); color:var(--cream); padding:4.5rem clamp(1rem,4vw,2.4rem); }
.rm__head{ max-width:var(--maxw); margin:0 auto 2.6rem; }
.rm__list{ max-width:var(--maxw); margin:0 auto; padding:0; list-style:none; display:grid; gap:1rem; }
.phase{ display:flex; gap:1.3rem; align-items:flex-start; padding:1.5rem; border:2px solid rgba(255,255,255,.14); border-radius:5px; background:rgba(255,255,255,.03); transition:border-color .15s, background .15s; }
.phase:hover{ border-color:var(--lcd); background:rgba(155,187,46,.06); }
.phase__bar{ font-family:var(--f-pixel); font-size:1.4rem; color:var(--lcd); line-height:1; }
.phase--done{ border-color:var(--stonk); }
.phase--done .phase__bar{ color:var(--stonk); }
.phase__body h3{ font-family:var(--f-body); font-size:1.2rem; margin-bottom:.3rem; }
.phase--done .phase__body h3::after{ content:" ✓"; color:var(--stonk); }
.phase__body p{ font-size:.96rem; color:#cbc4ac; margin:0; }

/* =========================================================
   RIBBON / MEME WALL
   ========================================================= */
.ribbonwrap{ max-width:var(--maxw); margin:0 auto; padding:4rem clamp(1rem,4vw,2.4rem) 2rem; }
.rib__head{ display:flex; flex-direction:column; align-items:flex-start; gap:.2rem; }
.rib__head .btn{ margin-top:1.4rem; }
.ribbon{
  overflow:hidden; white-space:nowrap; background:var(--ink);
  border-top:4px solid var(--lcd); border-bottom:4px solid var(--lcd);
  padding:1rem 0; margin-bottom:0;
}
.ribbon__track{ display:inline-flex; gap:1rem; will-change:transform; animation:ribbon 60s linear infinite; }
.ribbon:hover .ribbon__track{ animation-play-state:paused; }
@keyframes ribbon{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.meme-chip{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--cream); color:var(--ink); border:2px solid var(--lcd-bright);
  border-radius:30px; padding:.55rem 1.1rem; font-size:.95rem; font-weight:500; flex:none;
}
.meme-chip__ico{ font-size:1.1rem; }
.meme-chip--new{ border-color:var(--stonk); box-shadow:0 0 0 3px rgba(35,184,75,.25); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background:var(--cream-3); border-top:3px solid var(--ink);
  padding:2.4rem clamp(1rem,4vw,2.4rem); display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center;
}
.footer__brand{ display:flex; align-items:center; gap:.6rem; font-size:1.2rem; }
.footer__tag{ font-family:var(--f-pixel); font-size:.5rem; color:var(--ink-soft); }
.footer__links{ display:flex; gap:1.3rem; margin-left:auto; font-weight:500; }
.footer__links a:hover{ color:var(--stonk-dark); }
.footer__fine{ width:100%; font-size:.78rem; color:var(--ink-soft); margin:0; }

/* =========================================================
   MODAL + TOAST
   ========================================================= */
.modal{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:1.2rem; background:rgba(22,33,15,.72); backdrop-filter:blur(4px); }
.modal[hidden]{ display:none; }
.modal__box{ position:relative; width:100%; max-width:440px; background:var(--cream); border:3px solid var(--ink); border-radius:6px; box-shadow:10px 10px 0 var(--ink); padding:2rem 1.8rem; }
.modal__x{ position:absolute; top:.8rem; right:.9rem; background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--ink); }
.modal__box h3{ font-family:var(--f-display); font-weight:400; font-size:1.9rem; text-transform:uppercase; margin-bottom:.5rem; }
.modal__note{ font-size:.92rem; color:var(--ink-soft); margin:0 0 1.3rem; }
.modal__ok{ font-family:var(--f-pixel); font-size:.56rem; color:var(--stonk-dark); background:rgba(35,184,75,.12); border:2px solid var(--stonk); border-radius:3px; padding:.7rem; margin:0 0 1.1rem; line-height:1.6; }
.modal__label{ display:block; font-weight:700; font-size:.9rem; margin-bottom:.4rem; }
.modal__input{ width:100%; font-family:var(--f-body); font-size:1rem; padding:.8rem; border:2.5px solid var(--ink); border-radius:3px; margin-bottom:1rem; background:var(--cream-2); }
.modal__input:focus{ outline:3px solid var(--lcd); }
.modal__hint{ font-size:.78rem; color:var(--ink-soft); margin:.9rem 0 0; }

.toast{ position:fixed; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:90; background:var(--ink); color:var(--lcd-bright); font-family:var(--f-pixel); font-size:.6rem; padding:.9rem 1.3rem; border-radius:4px; box-shadow:var(--shadow); }
.toast[hidden]{ display:none; }

/* =========================================================
   FOCUS / A11Y
   ========================================================= */
a:focus-visible, button:focus-visible, .pk:focus-visible, .softkey:focus-visible, input:focus-visible{
  outline:3px solid var(--stonk); outline-offset:2px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .hero{ grid-template-columns:1fr; text-align:center; }
  .hero__proof{ justify-content:center; }
  .hero__cta{ justify-content:center; }
  .hero__phone{ order:-1; }
  .why__grid{ grid-template-columns:repeat(2,1fr); }
  .metrics{ grid-template-columns:repeat(2,1fr); }
  .legend__body{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .legend__facts{ grid-template-columns:1fr; }
  .nav__links{ display:none; }
}
@media (max-width:520px){
  .why__grid{ grid-template-columns:1fr; }
  .metrics{ grid-template-columns:1fr; }
  .chart__row{ grid-template-columns:80px 1fr; }
  .hero__proof{ gap:1.1rem; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto; transition-duration:.01ms !important; }
  .tape__track,.ribbon__track{ animation:none; }
}