/* ============================================================
   MEWAPULT — $MEWPULT — Sol83
   Toy-vinyl launch range: pastel mint sky, petrol-teal ink,
   tangerine elastic, zap yellow, bone-brick fortress bands.
   Fonts: Bungee (display) / Schibsted Grotesk (body) / Martian Mono (telemetry)
   ============================================================ */

:root{
  --sky:#D4EBE8;
  --sky-hi:#E7F5F1;
  --sky-mid:#C4E3DE;
  --sky-deep:#7FB9B1;
  --teal-ink:#123F49;
  --teal-ink-deep:#0C2E36;
  --teal:#1E6E7E;
  --teal-soft:#3E93A3;
  --tang:#F26B1D;
  --tang-deep:#D5570F;
  --tang-ink:#B84A0A; /* AA-contrast tangerine for text on light surfaces */
  --tang-hi:#FF8A3D;
  --zap:#FFD92B;
  --zap-deep:#EDBE00;
  --bone:#F0E8CF;
  --bone-line:#DCD1AE;
  --bone-deep:#E3D8B8;
  --baby:#A9D9F2;
  --card:#FFFFFF;
  --ink-soft:#3A626B;
  --shadow: 0 14px 34px -18px rgba(12,46,54,.45);
  --r-lg:28px;
  --r-md:18px;
  --spring: cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
html:not(.anim){ scroll-behavior:auto; }
body{
  margin:0;
  font-family:'Schibsted Grotesk',system-ui,sans-serif;
  color:var(--teal-ink);
  background:linear-gradient(180deg,var(--sky-hi) 0%,var(--sky) 40%,var(--sky-mid) 100%);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
a{ color:var(--teal); text-decoration-thickness:2px; text-underline-offset:3px; }
a:hover{ color:var(--tang-deep); }
::selection{ background:var(--zap); color:var(--teal-ink-deep); }
:focus-visible{ outline:3px dashed var(--tang); outline-offset:3px; border-radius:6px; }

::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:var(--sky-mid); }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--tang-hi),var(--tang-deep)); border-radius:8px; border:2px solid var(--sky-mid); }

.mono{ font-family:'Martian Mono',monospace; font-size:.72rem; letter-spacing:.04em; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

h1,h2,h3,.btn,.brand span,.mq-track,.t-label,.sf-num{ font-family:'Bungee','Arial Black',sans-serif; font-weight:400; }
h2{ font-size:clamp(1.9rem,4.6vw,3.1rem); line-height:1.04; margin:.35em 0 .5em; letter-spacing:.01em; }
h3{ font-size:1.05rem; margin:.4em 0 .35em; letter-spacing:.02em; }
p{ line-height:1.6; }
.hl-tang{ color:var(--tang-ink); }
.hl-zap{ color:var(--zap); text-shadow:0 2px 0 rgba(12,46,54,.35); }

/* ---------- reveals (gated behind html.anim) ---------- */
html.anim .rv{ opacity:0; transform:translateY(26px) scale(.985); transition:opacity .7s ease var(--d,0s), transform .7s var(--spring) var(--d,0s); }
html.anim .rv.in{ opacity:1; transform:none; }

/* ---------- preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--sky-hi),var(--sky-mid));
  transition:opacity .45s ease, visibility .45s;
}
#preloader.done{ opacity:0; visibility:hidden; }
.pl-box{ width:min(320px,80vw); text-align:center; }
.pl-sling{ width:200px; margin:0 auto 6px; display:block; }
.pl-row{ display:flex; justify-content:space-between; font-family:'Martian Mono',monospace; font-size:.72rem; letter-spacing:.06em; margin-bottom:8px; color:var(--ink-soft); }
.pl-track{ height:10px; background:#fff; border-radius:6px; overflow:hidden; box-shadow:inset 0 2px 4px rgba(12,46,54,.18); }
#plBar{ height:100%; width:0%; background:linear-gradient(90deg,var(--tang-hi),var(--tang-deep)); border-radius:6px; }

/* ---------- tension scroll bar ---------- */
#tensionBar{ position:fixed; top:0; left:0; right:0; height:5px; z-index:120; background:rgba(18,63,73,.12); pointer-events:none; }
#tensionFill{ height:100%; width:0%; background:linear-gradient(90deg,var(--tang-hi),var(--tang),var(--tang-deep)); transform-origin:left; }
#tensionKnot{ position:absolute; top:50%; width:11px; height:11px; border-radius:50%; background:var(--teal-ink); border:2px solid #fff; transform:translate(-50%,-50%); left:0%; box-shadow:0 1px 4px rgba(12,46,54,.4); }

/* ---------- page-pull egg meter ---------- */
#pullMeter{
  position:fixed; top:14px; left:50%; transform:translate(-50%,-220%); z-index:150; pointer-events:none;
  background:var(--card); border:2px solid var(--teal-ink); border-radius:14px;
  padding:8px 14px; display:flex; gap:10px; align-items:center;
  font-family:'Martian Mono',monospace; font-size:.68rem; letter-spacing:.05em;
  box-shadow:var(--shadow); transition:transform .35s var(--spring);
}
#pullMeter.show{ transform:translate(-50%,0); }
.pm-track{ width:120px; height:8px; background:var(--sky-mid); border-radius:5px; overflow:hidden; }
#pullFill{ height:100%; width:0%; background:linear-gradient(90deg,var(--zap),var(--tang)); }

/* ---------- nav ---------- */
#nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:20px;
  padding:10px 22px;
  background:rgba(231,245,241,.88);
  border-bottom:2px solid rgba(18,63,73,.1);
}
@supports (backdrop-filter:blur(4px)){ #nav{ backdrop-filter:blur(10px); background:rgba(231,245,241,.72); } }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--teal-ink); }
.brand img{ width:40px; height:40px; border-radius:12px; }
.brand span{ font-size:1.05rem; letter-spacing:.02em; }
#nav .links{ display:flex; gap:4px; margin-left:auto; }
#nav .links a{
  text-decoration:none; color:var(--ink-soft); font-weight:700; font-size:.92rem;
  padding:8px 12px; border-radius:10px; position:relative;
}
#nav .links a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:4px; height:3px; border-radius:2px;
  background:var(--tang); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--spring);
}
#nav .links a:hover{ color:var(--teal-ink); }
#nav .links a:hover::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
#soundToggle{
  width:38px; height:38px; border-radius:12px; border:2px solid rgba(18,63,73,.18);
  background:var(--card); cursor:pointer; font-size:1rem; line-height:1;
  transition:transform .15s var(--spring);
}
#soundToggle:active{ transform:scale(.9); }

/* burger */
#burger{ display:none; width:42px; height:40px; border:2px solid rgba(18,63,73,.18); border-radius:12px; background:var(--card); cursor:pointer; padding:8px 9px; flex-direction:column; justify-content:space-between; }
#burger span{ display:block; height:3px; border-radius:2px; background:var(--teal-ink); transition:transform .25s ease, opacity .25s ease; }
#burger.open span:nth-child(1){ transform:translateY(8.5px) rotate(45deg); }
#burger.open span:nth-child(2){ opacity:0; }
#burger.open span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg); }
#mobilePanel{
  position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; gap:6px;
  background:var(--sky-hi); border-bottom:2px solid rgba(18,63,73,.12);
  padding:14px 22px 20px;
}
#mobilePanel.open{ display:flex; }
#mobilePanel a{ text-decoration:none; color:var(--teal-ink); font-weight:700; padding:10px 6px; border-bottom:1px solid rgba(18,63,73,.08); }
#mobilePanel a.btn{ border-bottom:none; text-align:center; margin-top:8px; }

/* ---------- buttons : soft vinyl ---------- */
.btn{
  display:inline-block; text-decoration:none; cursor:pointer; border:none;
  font-size:.92rem; letter-spacing:.02em; padding:14px 22px; border-radius:16px;
  color:#fff; position:relative;
  box-shadow:0 6px 0 rgba(12,46,54,.28), inset 0 2px 0 rgba(255,255,255,.35);
  transition:transform .16s var(--spring), box-shadow .16s ease, filter .16s ease;
}
.btn:hover{ filter:brightness(1.06); transform:translateY(-2px); }
.btn:active{ transform:translateY(3px) scale(.98); box-shadow:0 2px 0 rgba(12,46,54,.28), inset 0 2px 0 rgba(255,255,255,.35); }
.btn-tang{ background:linear-gradient(180deg,#E85F10,#A8430B); color:#fff; }
.btn-teal{ background:linear-gradient(180deg,#2E8091,#17596A); color:#fff; }
.btn-ghost{ background:var(--card); color:var(--teal-ink); box-shadow:0 6px 0 rgba(12,46,54,.15), inset 0 0 0 2px rgba(18,63,73,.18); }
.btn-nav{ padding:10px 16px; font-size:.8rem; }

/* ---------- hero ---------- */
.hero{ padding:56px 0 30px; }
.hero-inner{ max-width:1180px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:minmax(380px,1fr) minmax(380px,560px); gap:40px; align-items:center; }
.eyebrow{ display:inline-block; background:var(--card); border:2px solid rgba(18,63,73,.14); padding:7px 12px; border-radius:999px; margin:0 0 10px; color:var(--ink-soft); }
.eyebrow b{ color:var(--tang-ink); }
#heroTitle{
  font-size:clamp(3rem,7.4vw,5.6rem); line-height:.96; margin:0 0 10px; letter-spacing:.01em;
}
#heroTitle span{ display:inline-block; }
html.anim #heroTitle span{ animation:titleDrop .7s var(--spring) both; }
html.anim #heroTitle span:nth-child(2){ animation-delay:.12s; }
#heroTitle span:nth-child(2){ color:var(--tang-ink); }
@keyframes titleDrop{
  0%{ transform:translateY(-70px) scale(1.1); opacity:0; }
  60%{ transform:translateY(6px) scale(.98); opacity:1; }
  100%{ transform:none; opacity:1; }
}
.tagline{ font-size:clamp(1.15rem,2.4vw,1.5rem); font-weight:900; margin:.2em 0; }
.sub{ color:var(--ink-soft); font-size:1.02rem; max-width:46ch; }

.ca-pill{
  display:flex; align-items:center; gap:12px; margin:20px 0 18px; padding:12px 16px;
  background:var(--card); border:2px dashed var(--tang); border-radius:16px;
  cursor:pointer; max-width:480px;
  transition:transform .16s var(--spring), border-color .16s;
}
.ca-pill:hover{ transform:scale(1.015); }
.ca-pill:active{ transform:scale(.985); }
.ca-label{ background:var(--tang); color:#fff; padding:4px 9px; border-radius:8px; font-weight:700; }
#caValue{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--teal-ink); }
.ca-copy{ color:var(--teal); font-weight:700; }

.hero-btns{ display:flex; flex-wrap:wrap; gap:12px; margin:14px 0 20px; }
.eco-strip{ display:flex; gap:16px; align-items:center; opacity:.9; }
.eco-strip img{ height:26px; width:auto; filter:grayscale(.15); transition:transform .2s var(--spring), filter .2s; }
.eco-strip img:hover{ transform:translateY(-4px) rotate(-4deg); filter:none; }

/* hero scene */
.hero-scene{ position:relative; }
#heroScene{
  width:100%; height:auto; display:block; border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--sky-hi) 0%,var(--sky) 70%,var(--sky-mid) 100%);
  border:3px solid var(--card);
  box-shadow:var(--shadow);
}
#launchBtn{
  position:absolute; right:14px; bottom:46px;
  font-family:'Bungee',cursive; font-size:.72rem; letter-spacing:.03em;
  background:var(--card); color:var(--teal-ink); border:2px solid rgba(18,63,73,.2);
  border-radius:12px; padding:9px 12px; cursor:pointer;
  box-shadow:0 4px 0 rgba(12,46,54,.2);
  transition:transform .16s var(--spring);
}
#launchBtn:hover{ transform:translateY(-2px); }
#launchBtn:active{ transform:translateY(2px) scale(.96); }
.scene-note{ margin:8px 4px 0; color:var(--ink-soft); text-align:right; }
#wallStatus{ color:var(--tang-ink); font-weight:700; }

html.anim .idle-bob{ animation:idleBob 3.2s ease-in-out infinite; }
@keyframes idleBob{ 0%,100%{ transform:translate(var(--mx,150px),var(--my,392px)) rotate(var(--mr,0deg)); } 50%{ transform:translate(var(--mx,150px),calc(var(--my,392px) - 7px)) rotate(var(--mr,0deg)); } }
/* NOTE: no #heroMew transform rule here — the JS drives the SVG transform ATTRIBUTE,
   and any CSS transform would override it (SVG2 presentation-attribute specificity 0). */

html.anim #dogPeekInner{ animation:dogDuck 6s ease-in-out infinite; }
@keyframes dogDuck{ 0%,55%,100%{ transform:translateY(34px); } 65%,88%{ transform:translateY(0); } }
#dogPeek{ clip-path:inset(-40px 0 22px 0); }

/* squish egg */
@keyframes mewSquish{ 0%{transform:scale(1,1)} 30%{transform:scale(1.18,.78)} 55%{transform:scale(.88,1.14)} 75%{transform:scale(1.06,.94)} 100%{transform:scale(1,1)} }
html.anim .squish img, html.anim .squish svg{ animation:mewSquish .8s var(--spring); transform-origin:center bottom; }

/* ---------- marquee : elastic band ---------- */
.marquee{
  overflow:hidden; white-space:nowrap; cursor:pointer; user-select:none;
  background:linear-gradient(180deg,var(--tang-hi) 0%,var(--tang) 45%,var(--tang-deep) 100%);
  border-top:3px solid var(--tang-deep); border-bottom:3px solid var(--tang-deep);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(12,46,54,.18);
  padding:13px 0; position:relative; z-index:2;
}
.mq-track{ display:inline-block; font-size:1.05rem; color:#fff; text-shadow:0 2px 0 rgba(12,46,54,.25); }
html.anim .mq-track{ animation:mq 26s linear infinite; }
@keyframes mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.mq-track i{ font-style:normal; color:var(--zap); margin:0 10px; }
html.anim .marquee.twang{ animation:twang .5s var(--spring); }
@keyframes twang{ 0%{transform:scaleY(1)} 25%{transform:scaleY(1.35)} 50%{transform:scaleY(.82)} 72%{transform:scaleY(1.12)} 100%{transform:scaleY(1)} }

/* ---------- sections ---------- */
.section{ padding:84px 0; position:relative; scroll-margin-top:76px; }
.kicker{ color:var(--tang-ink); font-weight:700; margin:0; letter-spacing:.08em; }
.section-sub{ color:var(--ink-soft); max-width:56ch; margin-top:-6px; }

/* teal deep sections */
.section-teal{ background:linear-gradient(180deg,var(--teal-ink) 0%,var(--teal-ink-deep) 100%); color:#EAF6F3; }
.section-teal h2{ color:#fff; }
.section-teal .kicker{ color:var(--zap); }
.section-teal .section-sub{ color:#B9D8D3; }
.section-teal::before{
  content:""; position:absolute; left:0; right:0; top:-16px; height:17px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='17'%3E%3Cg fill='%23123F49'%3E%3Ccircle cx='17' cy='9' r='5'/%3E%3Ccircle cx='17' cy='16' r='5'/%3E%3Crect x='17' y='6' width='24' height='9'/%3E%3Ccircle cx='41' cy='9' r='5'/%3E%3Ccircle cx='41' cy='16' r='5'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom;
}

/* bone wall section */
.section-bone{
  background:
    repeating-linear-gradient(0deg, transparent 0 54px, rgba(120,100,50,.10) 54px 57px),
    repeating-linear-gradient(90deg, transparent 0 86px, rgba(120,100,50,.06) 86px 89px),
    linear-gradient(180deg,var(--bone) 0%,var(--bone-deep) 100%);
}
.section-bone::before{
  content:""; position:absolute; left:0; right:0; top:-16px; height:17px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='17'%3E%3Cg fill='%23F0E8CF'%3E%3Ccircle cx='17' cy='9' r='5'/%3E%3Ccircle cx='17' cy='16' r='5'/%3E%3Crect x='17' y='6' width='24' height='9'/%3E%3Ccircle cx='41' cy='9' r='5'/%3E%3Ccircle cx='41' cy='16' r='5'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom;
}

/* ---------- story ---------- */
.tminus-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:26px 0; }
.t-card{
  background:var(--card); border-radius:var(--r-lg); padding:22px 20px 18px;
  border:2px solid rgba(18,63,73,.1); box-shadow:var(--shadow); position:relative;
  transition:transform .25s var(--spring);
}
.t-card:hover{ transform:translateY(-6px) rotate(-.6deg); }
.t-label{
  display:inline-block; background:var(--teal-ink); color:var(--sky-hi);
  font-size:1rem; padding:6px 12px; border-radius:10px; margin-bottom:6px;
}
.t-zero{ border:3px solid var(--tang); background:linear-gradient(180deg,#fff 60%,#FFF3E8 100%); }
.t-zero .t-label{ background:var(--tang); }
.t-card p{ color:var(--ink-soft); font-size:.95rem; margin-bottom:0; }

.rule-banner{
  border-radius:var(--r-lg); overflow:hidden; border:3px solid var(--card);
  box-shadow:var(--shadow); background:var(--card);
}
.rule-banner img{ display:block; width:100%; }
.rule-line{ margin:0; padding:18px 22px; text-align:center; font-size:1.1rem; color:var(--ink-soft); }
.rule-line b{ color:var(--tang-ink); }

/* ---------- the range ---------- */
.range-shell{
  background:var(--card); border-radius:var(--r-lg); padding:16px;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.5);
}
.range-hud{
  display:flex; flex-wrap:wrap; gap:8px 18px; padding:6px 8px 12px; color:var(--ink-soft);
  font-size:.68rem; letter-spacing:.05em;
}
.range-hud b{ color:var(--teal-ink); font-size:.82rem; }
.hud-best{ margin-left:auto; }
.hud-best b{ color:var(--tang-ink); }
.range-stage{ border-radius:var(--r-md); overflow:hidden; background:linear-gradient(180deg,var(--sky-hi),var(--sky-mid)); }
#rangeCanvas{ display:block; width:100%; height:auto; touch-action:none; cursor:grab; }
#rangeCanvas.aiming{ cursor:grabbing; }
.range-verdict{ margin:12px 8px 4px; color:var(--teal); min-height:1.2em; }
.range-precision{ display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; padding:8px; }
.range-precision label{ display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:.68rem; }
.range-precision input[type=range]{ accent-color:var(--tang); width:150px; }

/* ---------- specs ---------- */
.specs-arc{ position:relative; margin-top:10px; }
#specsArcSvg{ width:100%; height:auto; display:block; }
.spec-flags{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:-40px; }
.spec-flag{
  background:var(--card); border-radius:var(--r-lg); padding:20px; text-align:center;
  border:2px solid rgba(18,63,73,.1); box-shadow:var(--shadow); position:relative;
  transition:transform .25s var(--spring);
}
.spec-flag:hover{ transform:translateY(-6px); }
.spec-flag::before{
  content:""; position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  width:4px; height:26px; background:var(--teal-ink); border-radius:2px;
}
.spec-flag::after{
  content:""; position:absolute; top:-24px; left:50%;
  border-left:16px solid var(--tang); border-top:8px solid transparent; border-bottom:8px solid transparent;
}
.sf-num{ display:block; font-size:clamp(1.15rem,2.4vw,1.6rem); color:var(--teal-ink); }
.sf-name{ display:block; font-weight:900; letter-spacing:.14em; font-size:.78rem; color:var(--tang-ink); margin:6px 0 8px; }
.sf-note{ color:var(--ink-soft); }

/* telemetry */
.telemetry{
  margin-top:34px; background:var(--card); border-radius:var(--r-lg);
  border:2px solid rgba(18,63,73,.1); box-shadow:var(--shadow); padding:22px;
}
.tel-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.tel-title{ font-family:'Bungee',cursive; font-size:1.05rem; }
.tel-status{ color:var(--ink-soft); display:flex; align-items:center; gap:8px; }
#telDot{ width:10px; height:10px; border-radius:50%; background:var(--sky-deep); display:inline-block; }
#telDot.warming{ background:var(--zap-deep); }
html.anim #telDot.warming{ animation:pulse 1.2s ease-in-out infinite; }
#telDot.live{ background:#2FB56A; }
html.anim #telDot.live{ animation:pulse 2s ease-in-out infinite; }
#telDot.error{ background:#D8432F; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(47,181,106,.5);} 50%{ box-shadow:0 0 0 7px rgba(47,181,106,0);} }
.tel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tel-tile{ background:var(--sky-hi); border-radius:var(--r-md); padding:14px 16px; }
.tt-label{ display:block; color:var(--ink-soft); font-size:.62rem; margin-bottom:6px; }
.tel-tile b{ font-size:1.25rem; color:var(--teal-ink); }
.tel-tile b.up{ color:#1F9457; }
.tel-tile b.down{ color:#C93A26; }
.tel-note{ color:var(--ink-soft); margin:14px 2px 0; }

/* ---------- how to buy ---------- */
.how-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:26px; }
.how-card{
  background:var(--card); border-radius:var(--r-lg); padding:22px 20px;
  border:2px solid rgba(18,63,73,.1); box-shadow:var(--shadow);
  transition:transform .25s var(--spring);
}
.how-card:hover{ transform:translateY(-6px) rotate(.5deg); }
.how-step{ display:inline-block; color:#fff; background:var(--teal); padding:5px 10px; border-radius:8px; font-weight:700; }
.how-card p{ color:var(--ink-soft); font-size:.95rem; margin-bottom:0; }

/* ---------- flight plan ---------- */
.plan-walls{ margin-top:20px; }
#planSvg{ width:100%; height:auto; display:block; }
.plan-wall{ cursor:pointer; }
.plan-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px; }
.plan-card{
  background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg); padding:20px;
  transition:transform .25s var(--spring), background .25s;
}
.plan-card:hover{ transform:translateY(-5px); background:rgba(255,255,255,.1); }
.plan-card h3{ color:var(--zap); }
.plan-card p{ color:#C9E2DD; font-size:.93rem; margin-bottom:0; }
.pc-tag{ color:#9CC5BF; font-size:.64rem; }

/* ---------- crew ---------- */
.crew-card{
  display:flex; gap:30px; align-items:center;
  background:var(--card); border-radius:var(--r-lg); padding:30px;
  border:3px solid var(--tang); box-shadow:var(--shadow);
}
.crew-card img{ width:200px; height:200px; border-radius:24% 30% 26% 32%; flex-shrink:0; }
.crew-card h2{ margin-top:0; }
.crew-card p{ color:var(--ink-soft); max-width:60ch; }

/* ---------- footer ---------- */
footer{ background:var(--teal-ink-deep); color:#B9D8D3; padding:50px 0 34px; margin-top:0; }
.foot-inner{ text-align:center; }
.foot-brand{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:20px; }
.foot-brand img{ border-radius:14px; }
.foot-brand span{ font-family:'Bungee',cursive; color:#fff; font-size:1.2rem; }
.foot-links{ display:flex; justify-content:center; gap:14px; margin-bottom:26px; }
.foot-links a{
  width:46px; height:46px; border-radius:14px; background:var(--sky-hi);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--spring), background .2s;
}
.foot-links a:hover{ transform:translateY(-4px); background:#fff; }
.foot-links img{ height:22px; width:auto; }
.foot-disc{ max-width:640px; margin:0 auto 14px; font-size:.62rem; line-height:1.7; color:#7FA8A2; }
.foot-copy{ font-size:.62rem; color:#8FB5AF; }

/* ---------- toasts ---------- */
#toastRail{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:160; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{
  font-family:'Martian Mono',monospace; font-size:.7rem; letter-spacing:.03em;
  background:var(--card); color:var(--teal-ink); border:2px solid var(--teal-ink);
  padding:10px 18px; border-radius:999px; box-shadow:var(--shadow);
  max-width:88vw; text-align:center;
}
html.anim .toast{ animation:toastIn .35s var(--spring) both; }
.toast.bye{ opacity:0; }
html.anim .toast.bye{ animation:toastOut .3s ease both; opacity:1; }
@keyframes toastIn{ from{ transform:translateY(30px) scale(.9); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes toastOut{ to{ transform:translateY(20px); opacity:0; } }

/* ---------- fx canvas ---------- */
#fxCanvas{ position:fixed; inset:0; z-index:90; pointer-events:none; }

/* flying mew egg sprite */
#eggMew{ position:fixed; z-index:170; width:110px; pointer-events:none; filter:drop-shadow(0 6px 10px rgba(12,46,54,.3)); }

/* ---------- shot mode ---------- */
html.shot .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
html.shot #preloader{ display:none; }

/* skip link */
.skip{
  position:fixed; top:-60px; left:14px; z-index:210;
  background:var(--card); color:var(--teal-ink); font-weight:700;
  padding:10px 16px; border-radius:12px; border:2px solid var(--teal-ink);
  transition:top .2s ease;
}
.skip:focus{ top:12px; }

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-scene{ max-width:640px; }
  .tminus-grid,.how-grid,.spec-flags,.plan-cards,.tel-grid{ grid-template-columns:repeat(2,1fr); }
  .spec-flags{ margin-top:0; }
  .spec-flag::before,.spec-flag::after{ display:none; }
}
@media (max-width:940px){
  /* the full nav needs ~920px on one line — hand over to the burger below that */
  #nav .links{ display:none; }
  #burger{ display:flex; }
  .btn-nav{ display:none; }
}
@media (max-width:760px){
  .section{ padding:60px 0; }
  .crew-card{ flex-direction:column; text-align:center; }
  .crew-card .hero-btns{ justify-content:center; }
  .hero{ padding-top:30px; }
}
@media (max-width:560px){
  .tminus-grid,.how-grid,.spec-flags,.plan-cards{ grid-template-columns:1fr; }
  .tel-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-btns .btn{ flex:1 1 100%; text-align:center; }
  .eco-strip{ flex-wrap:wrap; }
  .range-hud{ font-size:.6rem; gap:6px 12px; }
  #launchBtn{ bottom:40px; }
}