/* ============================================================
   LANDING (public /) — "Farm" theme.

   Ported from mockup/landing-v3.html (Farm palette). Loaded by
   inc/mine_head.php on every public page: the tokens, header, footer
   and shared pieces live here; the inner pages add mine-pages.css.

   PERFORMANCE RULE — keep it: everything that moves is its own layer
   animated with transform/opacity only (compositor), and the SVG art
   under it is static. SMIL and box-shadow/background-position
   animations repaint every frame; measured, they dropped the hero
   from ~156 to ~38 fps on a 4x-throttled CPU. Never put a transform
   animation on an <svg> element itself — Chrome won't composite it;
   animate a wrapper <span> instead.
   ============================================================ */
:root{
  --bg:#070b14;--bg2:#0c1222;--ink:#eaf0fa;--mut:#8d9ab3;
  --a:#f7931a;--a2:#ffc56b;--b:#22d3ee;--on:#1f0f00;
  --line:rgba(140,170,220,.13);--line2:rgba(140,180,240,.26);
  --panel:rgba(14,21,36,.74);--grid:rgba(34,211,238,.22);--glow:rgba(247,147,26,.5);
  --grad:linear-gradient(135deg,var(--a2),var(--a) 60%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 'Inter',system-ui,sans-serif;overflow-x:hidden}
.anchor{position:relative;top:-84px;display:block;height:0}
a{color:inherit;text-decoration:none}
.w{max-width:1180px;margin:0 auto;padding:0 24px}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* svg colour hooks (palette-aware) */
.f-a{fill:var(--a)}.f-b{fill:var(--b)}.f-bg{fill:var(--bg)}.f-bg2{fill:var(--bg2)}.f-ink{fill:var(--ink)}.f-mut{fill:var(--mut)}.f-on{fill:var(--on)}
.s-a{stroke:var(--a)}.s-b{stroke:var(--b)}.s-line{stroke:var(--line2)}
.si{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sib{fill:none;stroke:var(--b);stroke-width:2;stroke-linecap:round}
.sia{fill:none;stroke:var(--a);stroke-width:2;stroke-linecap:round}

.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font:600 15px 'Inter',sans-serif;background:var(--grad);color:var(--on);box-shadow:0 14px 34px -12px var(--glow),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .2s;cursor:pointer;border:0}
.btn:hover{transform:translateY(-2px)}
.btn.g{background:rgba(255,255,255,.04);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.btn.sm{padding:10px 18px;font-size:14px}
@keyframes ping{from{transform:scale(1);opacity:.8}to{transform:scale(2.3);opacity:0}}
@keyframes bob{50%{transform:translateY(-10px)}}
@keyframes mq{to{transform:translateX(-50%)}}
/* the ripple is a scaled pseudo-element, not an animated box-shadow, so it stays on the compositor */
.dot{position:relative;width:8px;height:8px;border-radius:50%;background:#22c55e;flex:none;display:inline-block}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#22c55e;animation:ping 1.6s ease-out infinite}

/* ================= TOP BAR ================= */
.top{position:sticky;top:0;z-index:50;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 72%,transparent);border-bottom:1px solid var(--line)}
.top .w{display:flex;align-items:center;gap:36px;height:70px}
.logo{display:flex;align-items:center;gap:11px;font:700 18px 'Unbounded',sans-serif;letter-spacing:-.02em}
.mark{width:36px;height:40px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--grad);display:grid;place-items:center;color:var(--on)}
.mark .ic{width:19px;height:19px;stroke-width:2.3}
.nav{display:flex;gap:30px;font-size:14px;color:var(--mut)}
.nav a:hover{color:var(--ink)}
.top .sp{flex:1}
.top .acts{display:flex;gap:10px}
.burger{all:unset;cursor:pointer;width:42px;height:42px;border-radius:12px;place-content:center;gap:5px;box-shadow:inset 0 0 0 1px var(--line2);display:none}
.burger i{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .2s}
.top.open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.top.open .burger i:nth-child(2){opacity:0}
.top.open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--a);outline-offset:2px}
.m-only,.sm-l,.sti{display:none}

/* ================= HERO: the core ================= */
.hero{position:relative;overflow:hidden;padding:76px 0 30px;text-align:center;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-3;
  background:radial-gradient(45% 38% at 50% 64%,color-mix(in srgb,var(--a) 24%,transparent),transparent 70%),
             radial-gradient(35% 30% at 12% 8%,color-mix(in srgb,var(--b) 14%,transparent),transparent 70%),
             radial-gradient(30% 30% at 92% 20%,color-mix(in srgb,var(--a) 10%,transparent),transparent 70%)}
.floor{position:absolute;left:-50%;right:-50%;bottom:0;height:460px;z-index:-2;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:64px 64px;
  transform:perspective(420px) rotateX(64deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(transparent,#000 65%);mask-image:linear-gradient(transparent,#000 65%);animation:floor 2.4s linear infinite}
/* move the plane, not its background: a transform is composited, background-position repaints every frame */
@keyframes floor{from{transform:perspective(420px) rotateX(64deg) translateY(0)}to{transform:perspective(420px) rotateX(64deg) translateY(64px)}}
.dust{position:absolute;inset:0;z-index:-2;opacity:.55;pointer-events:none;
  background-image:radial-gradient(1.6px 1.6px at 8% 18%,#fff,transparent),radial-gradient(1.2px 1.2px at 22% 64%,#fff,transparent),radial-gradient(1.4px 1.4px at 36% 12%,#fff,transparent),radial-gradient(1px 1px at 61% 30%,#fff,transparent),radial-gradient(1.6px 1.6px at 78% 9%,#fff,transparent),radial-gradient(1.2px 1.2px at 90% 52%,#fff,transparent),radial-gradient(1px 1px at 70% 72%,#fff,transparent),radial-gradient(1.3px 1.3px at 14% 86%,#fff,transparent)}
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:99px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line2);font-size:13px;color:var(--mut)}
.hero h1{font:800 clamp(40px,6.6vw,84px)/1.02 'Unbounded',sans-serif;letter-spacing:-.04em;margin:24px auto 22px;max-width:1040px}
.hero h1 em,.end h2 em,.sh h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 em{filter:drop-shadow(0 8px 30px var(--glow))}
.hero .sub{font-size:18px;color:var(--mut);max-width:640px;margin:0 auto 32px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.stage{position:relative;max-width:1040px;margin:6px auto 0;pointer-events:none} /* pure decoration; its glow bleeds over the CTA */
.core{position:relative;container-type:inline-size}
.huds{position:absolute;inset:0;pointer-events:none}.hud{pointer-events:auto}
.core>svg{width:100%;height:auto;display:block;overflow:visible}
/* reactor layers — geometry in cqw: the base viewBox is 900 wide, so 1 unit = 100cqw/900 */
.lyr{position:absolute;pointer-events:none}
.core>.lyr.full{left:0;top:0}
.core>.ring{left:26.667cqw;top:2.778cqw;width:46.667cqw;height:46.667cqw;animation:spin var(--t) linear infinite}
.core>.ring.rev{animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit{left:calc(50cqw - var(--rx));top:calc(26.111cqw - var(--rx));width:calc(var(--rx)*2);height:calc(var(--rx)*2);transform:rotate(var(--tilt)) scaleY(var(--s))}
/* split at the orbit's own axis; the polygon reaches past the box so coins at the far ends aren't cropped */
.orbit.back{clip-path:polygon(-30% -40%,130% -40%,130% 50%,-30% 50%)}.orbit.front{clip-path:polygon(-30% 50%,130% 50%,130% 140%,-30% 140%)}
.o1{--rx:37.778cqw;--s:.2794;--us:3.579;--tilt:-9deg;--t:18s}
.o2{--rx:30cqw;--s:.2444;--us:4.091;--tilt:8deg;--t:13s}
.spin{position:absolute;inset:0;animation:spin var(--t) linear infinite reverse}
.slot,.ctr,.un{position:absolute;width:0;height:0}
.slot{left:50%;top:50%;transform:rotate(var(--a0)) translateX(var(--rx)) rotate(calc(-1*var(--a0)))}
.ctr,.un{left:0;top:0;transform-origin:0 0}
.ctr{animation:spin var(--t) linear infinite}
.un{transform:scaleY(var(--us)) rotate(calc(-1*var(--tilt)))}
.un svg{position:absolute;left:-2.333cqw;top:-2.333cqw;width:4.667cqw;height:4.667cqw}
.pts{left:50cqw;top:26.111cqw;width:0;height:0}
.pts span{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(var(--ang))}
.pts i{position:absolute;left:-.25cqw;top:-.25cqw;width:.5cqw;height:.5cqw;border-radius:50%;background:var(--b);opacity:0;animation:fly 3s linear infinite;animation-delay:var(--d)}
@keyframes fly{0%{transform:translateX(0);opacity:0}50%{opacity:1}100%{transform:translateX(26.667cqw);opacity:0}}
.pulse{left:44cqw;top:20.111cqw;width:12cqw;height:12cqw;border:2px solid var(--a);border-radius:50%;animation:ping 2.4s ease-out infinite}
.core>.ring svg,.cube svg{display:block;width:100%;height:100%}
.cube{aspect-ratio:30/34;animation:bob2 var(--t) ease-in-out infinite}
@keyframes bob2{50%{transform:translateY(-1.2cqw)}}
.off *,.off *::before,.off *::after{animation-play-state:paused!important}
.hud{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:16px;background:var(--panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px var(--line2),0 22px 44px -22px #000;text-align:left;animation:bob 6s ease-in-out infinite}
.hud i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
.hud small{display:block;font:600 10px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--mut);text-transform:uppercase}
.hud b{font-size:14px;font-weight:600}
.hud.l{left:0;top:22%}.hud.r{right:0;top:12%;animation-delay:-3s}.hud.r2{right:3%;top:60%;animation-delay:-1.5s}
.meter{position:relative;z-index:2;margin:-64px auto 0;width:min(580px,94%);padding:18px 24px 16px;border-radius:22px;background:var(--panel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px var(--line2),inset 0 1px 0 rgba(255,255,255,.07),0 34px 70px -26px #000,0 0 70px -30px var(--glow);text-align:left}
.meter .lab{display:flex;align-items:center;gap:9px;font:600 11px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.meter .lab span:last-child{margin-left:auto;color:var(--ink)}
.meter .val{font:700 46px/1.1 'JetBrains Mono',monospace;letter-spacing:-.03em;margin:10px 0 12px}
.meter .val small{font-size:22px;color:var(--a);margin-right:2px}
.track{height:6px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.track i{display:block;height:100%;background:var(--grad);box-shadow:0 0 14px var(--glow)}
.meter .foot{display:flex;justify-content:space-between;margin-top:9px;font:12px 'JetBrains Mono',monospace;color:var(--mut)}

/* ================= CROSSING BANDS ================= */
.bands{position:relative;height:180px;overflow:hidden}
.band{position:absolute;left:-4%;right:-4%;top:50%;white-space:nowrap;overflow:hidden;padding:15px 0}
.band>div{display:inline-block;animation:mq 46s linear infinite}
.band.k1{transform:translateY(-50%) rotate(2.6deg);background:var(--bg2);border-block:1px solid var(--line);font:800 24px 'Unbounded',sans-serif;color:transparent;-webkit-text-stroke:1px var(--mut);letter-spacing:.02em}
.band.k1>div{animation-direction:reverse;animation-duration:60s}
.band.k1 span{margin:0 22px}.band.k1 i{font-style:normal;color:var(--a);-webkit-text-stroke:0}
.band.k2{transform:translateY(-50%) rotate(-2.6deg);background:var(--grad);color:var(--on);font:500 14px 'JetBrains Mono',monospace;z-index:1;box-shadow:0 24px 50px -22px var(--glow)}
.band.k2 span{margin:0 20px;display:inline-flex;align-items:center;gap:9px}
.band.k2 b{font-weight:700}
.cnm{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font:800 11px Arial,sans-serif;color:#fff;background:var(--c);box-shadow:0 0 0 2px rgba(0,0,0,.15);font-style:normal}

/* ================= SECTIONS ================= */
.sec{padding:110px 0 30px;position:relative}
.sh{text-align:center;max-width:780px;margin:0 auto 54px}
.kick{display:inline-flex;align-items:center;gap:14px;font:600 12px 'JetBrains Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--a)}
.kick::before,.kick::after{content:"";width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--a))}
.kick::after{transform:scaleX(-1)}
.sh h2{font:700 clamp(30px,4.2vw,52px)/1.08 'Unbounded',sans-serif;letter-spacing:-.035em;margin:18px 0 16px}
.sh p{color:var(--mut);font-size:17px;max-width:620px;margin:0 auto}

/* route */
/* route: static pipe + stations; the dashes, coins and station rings are compositor layers (1 unit = 100cqw/1100) */
.routeart{position:relative;container-type:inline-size}
.routeart>svg{display:block;width:100%;height:auto;overflow:visible}
.routeart>.full{left:0;top:0}
.flow{left:0;right:0;top:calc(9.0909cqw - 1px);height:2px;overflow:hidden;opacity:.55}
.flow i{position:absolute;left:-18px;top:0;bottom:0;width:calc(100% + 18px);background:repeating-linear-gradient(90deg,var(--a) 0 6px,transparent 6px 18px);animation:flow .5s linear infinite}
@keyframes flow{to{transform:translateX(18px)}}
.rc{left:-1.05cqw;top:8.041cqw;width:2.1cqw;height:2.1cqw;animation:run 10s linear infinite;animation-delay:var(--d)}
@keyframes run{from{transform:translateX(-2.727cqw)}to{transform:translateX(102.727cqw)}}
.st-ring{top:3.091cqw;width:12cqw;height:12cqw;animation:spin 24s linear infinite}
.st-ring.rev{animation-direction:reverse}
.rc svg,.st-ring svg{display:block;width:100%;height:100%}
.stops{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:10px;text-align:center}
.stops h3{font:700 18px 'Unbounded',sans-serif;letter-spacing:-.02em;margin-bottom:8px}
.stops p{font-size:14.5px;color:var(--mut);max-width:240px;margin:0 auto}

/* machine room */
/* --n is the plan count, set inline from db_tarif — an admin can run 3 plans or 6 */
.bays{display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:14px;align-items:end;position:relative}
.bays::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--line2),transparent)}
.bay{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:16px 10px 20px;border-radius:22px 22px 0 0;position:relative;transition:transform .35s,background .35s,box-shadow .35s}
/* machines: static body; fans, LEDs, strips, heat and rack lights are compositor layers (1 unit = 100cqw/160) */
.mach{position:relative;display:block;width:100%;max-width:200px;container-type:inline-size}
.mach>svg{display:block;width:100%;height:auto;overflow:visible}
.mach>.lyr svg{display:block;width:100%;height:100%}
.mach>.fan{aspect-ratio:1;animation:spin var(--t) linear infinite}
.mach>.led{aspect-ratio:1;border-radius:50%;background:var(--c,var(--a))}
.mach>.blink{animation:blink var(--t) ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes blink{50%{opacity:.2}}
.mach>.heat{top:17.5cqw;width:8.75cqw;height:17.5cqw;opacity:0;animation:heat 1.8s ease-in-out infinite;animation-delay:var(--d)}
@keyframes heat{0%{transform:translateY(3.75cqw);opacity:0}50%{opacity:.7}100%{transform:translateY(-5cqw);opacity:0}}
.mach>.rk{left:13.75cqw;width:47.5cqw;height:2.1875cqw;overflow:hidden}
.mach>.rk i{position:absolute;top:0;bottom:0;left:-6.25cqw;right:-6.25cqw;background:repeating-linear-gradient(90deg,var(--c) 0 3.75cqw,transparent 3.75cqw 6.25cqw);animation:rk var(--t) linear infinite}
.mach>.rk.rev i{animation-direction:reverse}
@keyframes rk{to{transform:translateX(-6.25cqw)}}
.bay .plat{opacity:.18;transition:opacity .35s}
.bt{display:flex;flex-direction:column;align-items:center}
.bt-tag{display:none}
.bay .bn{font:700 14px 'Unbounded',sans-serif;letter-spacing:-.01em;margin-top:6px}
.bay .br{font:700 28px/1.2 'JetBrains Mono',monospace;color:var(--a)}
.bay .br small{font-size:12px;color:var(--mut);font-weight:400}
.bay .bm{font-size:12px;color:var(--mut)}
.bay:hover{background:rgba(255,255,255,.02)}
.bay[aria-pressed=true]{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--a) 11%,transparent));box-shadow:inset 0 1px 0 0 color-mix(in srgb,var(--a) 50%,transparent),inset 1px 0 0 0 color-mix(in srgb,var(--a) 25%,transparent),inset -1px 0 0 0 color-mix(in srgb,var(--a) 25%,transparent);transform:translateY(-8px)}
.bay[aria-pressed=true] .plat{opacity:1}
.bay:focus-visible{outline:2px solid var(--a);outline-offset:4px}

.sheet{margin-top:36px;border-radius:26px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line2),0 44px 90px -44px #000;overflow:hidden;position:relative}
.sheet::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(40% 70% at 0% 100%,color-mix(in srgb,var(--a) 10%,transparent),transparent 70%)}
.sheet-h{display:flex;gap:18px;align-items:center;padding:14px 28px;border-bottom:1px dashed var(--line2);font:600 11px 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.sheet-h b{color:var(--ink);font-size:13px}.sheet-h .sp{flex:1}
.sheet-b{position:relative;display:grid;grid-template-columns:330px 1fr;gap:46px;padding:30px 36px 34px;align-items:center}
.gauge{text-align:center}
.gauge svg{width:100%;display:block;overflow:visible}
.gauge>b{display:block;font:700 44px/1 'JetBrains Mono',monospace;margin-top:6px}
.gauge>small{color:var(--mut);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.specs div{padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--line);text-align:left}
.specs small{display:block;font-size:11px;color:var(--mut)}.specs b{font:700 14.5px 'JetBrains Mono',monospace}
.fuel label{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--mut)}
.fuel label b{font:700 34px 'JetBrains Mono',monospace;color:var(--ink);letter-spacing:-.02em}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:9px;background:linear-gradient(90deg,var(--b),var(--a) var(--p,50%),rgba(255,255,255,.08) var(--p,50%));margin:18px 0 10px;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--ink);border:7px solid var(--a);box-shadow:0 0 0 7px color-mix(in srgb,var(--a) 22%,transparent),0 6px 18px #000}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ink);border:7px solid var(--a)}
.rl{display:flex;justify-content:space-between;font:12px 'JetBrains Mono',monospace;color:var(--mut)}
.outs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0 16px}
.outs div{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--line)}
.outs small{display:block;font-size:12px;color:var(--mut)}
.outs b{font:700 22px 'JetBrains Mono',monospace;letter-spacing:-.02em}
.outs .hl{background:color-mix(in srgb,var(--a) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 45%,transparent)}
.outs .hl b{color:var(--a)}
.fine{font-size:12.5px;color:var(--mut);margin-bottom:18px}.fine a{color:var(--ink);text-decoration:underline}

/* crew */
/* crew: static graph; the rotating ring, the pulses and the ping are compositor layers (1 unit = 100cqw/760) */
.crewart{position:relative;max-width:880px;margin:0 auto;container-type:inline-size}
.crewart>svg{display:block;width:100%;height:auto;overflow:visible}
.crewart>.full{left:0;top:0}
.cr-ring{left:28.289cqw;top:3.289cqw;width:43.421cqw;height:43.421cqw;animation:spin 70s linear infinite}
.cr-ring svg{display:block;width:100%;height:100%}
.cr-ping{left:43.158cqw;top:18.158cqw;width:13.684cqw;height:13.684cqw;border:2px solid var(--a);border-radius:50%;animation:ping2 2.2s ease-out infinite}
@keyframes ping2{from{transform:scale(1);opacity:.8}to{transform:scale(2);opacity:0}}
.pl{height:0;transform-origin:0 0;transform:rotate(var(--ang))}
.pl i{position:absolute;left:0;top:0;width:100%;height:0;animation:along var(--t) linear infinite;animation-delay:var(--d)}
.pl i::before{content:"";position:absolute;left:calc(var(--s)/-2);top:calc(var(--s)/-2);width:var(--s);height:var(--s);border-radius:50%;background:var(--c)}
.pl.l2{--t:2.2s;--s:.921cqw;--c:var(--b)}.pl.l1{--t:1.6s;--s:1.316cqw;--c:var(--a)}
@keyframes along{to{transform:translateX(100%)}}
.perks{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:26px 0 30px}
.perks span{padding:10px 18px;border-radius:99px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--mut)}
.perks b{color:var(--ink);font-family:'JetBrains Mono',monospace;margin-right:4px}
.center{text-align:center}

/* field notes */
.risk{position:relative;padding:28px 32px 28px 104px;border-radius:22px;background:var(--panel);margin-bottom:16px}
.risk::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:3px;background:repeating-linear-gradient(-45deg,#facc15 0 14px,#16120a 14px 28px);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.risk .rk{position:absolute;left:30px;top:28px;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:#facc15;color:#16120a}
.risk .rk .ic{width:26px;height:26px}
.risk h3{font:700 20px 'Unbounded',sans-serif;letter-spacing:-.02em;margin-bottom:6px}
.risk p{color:var(--mut);max-width:820px}.risk a{color:var(--ink);text-decoration:underline}
.qs{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.qs details{border-radius:18px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);padding:0 22px;transition:box-shadow .2s}
.qs details[open]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 45%,transparent)}
.qs summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:20px 0;font-weight:600}
.qs summary::-webkit-details-marker{display:none}
.qs summary s{text-decoration:none;font:600 12px 'JetBrains Mono',monospace;color:var(--a)}
.qs summary::after{content:"+";margin-left:auto;font:400 24px/1 'JetBrains Mono',monospace;color:var(--mut);transition:transform .25s}
.qs details[open] summary::after{transform:rotate(45deg);color:var(--a)}
.qs details p{padding:0 0 20px 32px;color:var(--mut);font-size:15px}

/* end */
.end{position:relative;padding:110px 0 0;text-align:center;overflow:hidden;isolation:isolate}
.end::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 50% at 50% 100%,color-mix(in srgb,var(--a) 22%,transparent),transparent 70%)}
.score{display:grid;grid-template-columns:repeat(4,1fr);max-width:1000px;margin:0 auto 90px;border-block:1px solid var(--line)}
.score div{padding:24px 10px}.score div+div{border-left:1px solid var(--line)}
.score b{display:block;font:700 30px 'Unbounded',sans-serif;letter-spacing:-.03em}
.score small{color:var(--mut);font-size:13px}
.end h2{font:800 clamp(36px,5.6vw,72px)/1.04 'Unbounded',sans-serif;letter-spacing:-.04em}
.end p{color:var(--mut);font-size:18px;margin:20px auto 32px;max-width:540px}
.cart{margin-top:40px}.cart svg{width:100%;height:auto;display:block}

footer{border-top:1px solid var(--line);padding:52px 0 30px;background:var(--bg2)}
.ft{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:30px}
.ft h4{font:600 11px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:14px}
.ft a{display:block;font-size:14px;margin-bottom:9px;opacity:.85}.ft a:hover{opacity:1;color:var(--a)}
/* the brand link is an <a> too — without this the rule above stacks its hex mark over the name */
.ft a.logo{display:flex;font-size:18px;margin:0;opacity:1}.ft a.logo:hover{color:inherit}
.ft p{color:var(--mut);font-size:14px;margin-top:14px;max-width:300px}
.legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mut)}
.risk-note{margin-top:34px;font-size:12.5px;line-height:1.6;color:var(--mut);max-width:880px}
.risk-note b{color:var(--ink)}.risk-note a{color:var(--ink);text-decoration:underline}

/* GTranslate float widget, repainted for the dark theme. The widget injects its own
   stylesheet after this one (20px type on phones), hence the !important — 14px keeps
   it a small chip rather than a second header. */
.gt_float_switcher{font-family:'Inter',Arial,sans-serif!important;font-size:14px!important;border-radius:14px;color:var(--ink)!important;display:inline-block;line-height:20px;overflow:hidden;background:var(--bg2)!important;box-shadow:inset 0 0 0 1px var(--line2),0 12px 28px -10px #000!important}
.gt_float_switcher .gt-selected{background:none!important;color:var(--ink)!important}
.gt_float_switcher .gt-selected .gt-current-lang{padding:8px 12px;color:var(--ink)!important;font-weight:600}
.gt_float_switcher .gt_options a{color:var(--mut)!important;padding:8px 12px}
.gt_float_switcher .gt_options a:hover{background:rgba(255,255,255,.05)!important;color:var(--a)!important}


/* ================= TABLET (≤960) ================= */
@media (max-width:960px){
  .hud{display:none}
  .top .w{position:relative}
  .burger{display:grid}
  .nav{display:none}
  .top.open .nav{display:flex;flex-direction:column;position:absolute;left:12px;right:12px;top:calc(100% + 8px);padding:8px;gap:2px;border-radius:18px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2),0 24px 50px -10px #000}
  .top.open .nav a{padding:13px 14px;border-radius:12px;font-size:15px;color:var(--ink)}
  .top.open .nav a:active{background:rgba(255,255,255,.05)}
  .nav .m-only{display:block}
  .stops,.qs{grid-template-columns:1fr 1fr}
  .bays{gap:8px}
  .bay{padding:14px 4px 18px}
  .bay .bn{font-size:12.5px}.bay .br{font-size:24px}.bay .bm{font-size:11px}
  .sheet-b{grid-template-columns:1fr}
  .gauge svg{max-width:300px;margin:0 auto}
  .specs{grid-template-columns:repeat(4,1fr)}
  .score{grid-template-columns:1fr 1fr}.score div:nth-child(3){border-left:0}.score div:nth-child(n+3){border-top:1px solid var(--line)}
  .ft{grid-template-columns:1fr 1fr}
}

/* ================= PHONE (≤760) ================= */
@media (max-width:760px){
  .w{padding:0 20px}
  /* header: logo · short CTA · menu */
  .top .w{height:62px;gap:10px}
  .logo{font-size:16px;gap:9px}.mark{width:32px;height:36px}.mark .ic{width:17px;height:17px}
  .top .acts .g,.lg{display:none}.sm-l{display:inline}

  /* hero: the reactor bleeds past the edges, meter under it, HUDs become a 3-up row */
  .hero{padding:38px 0 26px}
  .hero .w{display:flex;flex-direction:column;align-items:center}
  .hero h1{margin:20px auto 16px}
  .hero .sub{font-size:16px;margin-bottom:24px}
  .cta{width:100%;max-width:380px;flex-direction:column;align-items:stretch;margin:0 auto}
  .cta .btn{justify-content:center}
  .stage{display:contents}
  .core{order:1;flex:none;width:150vw;margin-top:2px}
  .meter{order:2;width:100%;margin:-28px auto 0;padding:15px 16px 13px;border-radius:18px}
  .meter .lab{font-size:9.5px;letter-spacing:.08em}
  .meter .val{font-size:34px;margin:8px 0 10px}.meter .val small{font-size:18px}
  .meter .foot{font-size:11px}
  .huds{order:3;position:static;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;width:100%;margin-top:10px}
  .hud{display:flex;position:static;flex-direction:column;gap:8px;padding:12px 8px 13px;text-align:center;border-radius:15px;animation:none}
  .hud i{width:34px;height:34px;border-radius:10px}
  .hud small{font-size:8.5px;letter-spacing:.1em;margin-bottom:3px}
  .hud b{display:block;font-size:12px;line-height:1.35}

  /* bands + section rhythm */
  .bands{height:118px}
  .band{padding:11px 0}
  .band.k1{font-size:17px}.band.k2{font-size:12px}
  .cnm{width:18px;height:18px;font-size:9px}
  .sec{padding:72px 0 14px}
  .sh{margin-bottom:34px}
  .sh h2{font-size:clamp(26px,7.6vw,34px);margin:14px 0 12px}
  .sh p{font-size:15.5px}
  .kick{font-size:11px;letter-spacing:.18em;gap:10px}.kick::before,.kick::after{width:24px}

  /* route: the horizontal pipe becomes a vertical timeline with coins dripping down it */
  .routeart{display:none}
  .stops{grid-template-columns:1fr;gap:0;text-align:left;max-width:440px;margin:0 auto}
  .stops>div{position:relative;padding:4px 0 30px 78px;min-height:92px}
  .stops>div:last-child{padding-bottom:0;min-height:0}
  .stops>div::before{content:"";position:absolute;left:28px;top:66px;bottom:4px;width:2px;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--a) 70%,transparent) 0 6px,transparent 6px 13px)}
  .stops>div::after{content:"";position:absolute;left:24px;top:66px;width:10px;height:10px;border-radius:50%;background:var(--a);box-shadow:0 0 12px var(--a);opacity:0;animation:drip 2.1s linear infinite;animation-delay:var(--d,0s)}
  .stops>div:last-child::before,.stops>div:last-child::after{display:none}
  .sti{display:grid;position:absolute;left:0;top:0;width:58px;height:58px;border-radius:50%;place-items:center;color:var(--ink);background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--a) 38%,var(--bg2)),var(--bg2));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--a) 55%,transparent),0 0 0 6px var(--bg),0 0 0 7.5px var(--line2)}
  .sti .ic{width:24px;height:24px;stroke-width:1.7}
  .sti s{position:absolute;top:-5px;right:-8px;padding:2px 6px;border-radius:99px;background:var(--a);color:var(--on);font:700 10px 'JetBrains Mono',monospace;text-decoration:none}
  .stops h3{font-size:17px;margin:7px 0 4px}
  .stops p{max-width:none;margin:0;font-size:14.5px}

  /* machine room: all five plans stay together as one block — 2-up cards with Apex as a
     wide closing card — kept compact so the datasheet header shows just below it */
  .bays{grid-template-columns:1fr 1fr;gap:10px}
  .bays::after{display:none}
  .bay{padding:8px 8px 14px;border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);transform:none!important}
  .bay[aria-pressed=true]{background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--a) 13%,var(--panel)));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--a) 70%,transparent),0 16px 34px -18px var(--glow)}
  .bay .mach{max-width:118px}
  .bay .bn{font-size:12.5px;margin-top:2px}.bay .br{font-size:22px}.bay .bm{font-size:11.5px}
  .bay.wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:8px;padding:6px 18px 6px 8px}
  .bay.wide .mach{width:44%;max-width:160px;flex:none}
  .bay.wide .bt{flex:1;align-items:flex-start;text-align:left}
  .bay.wide .bn{font-size:14px}.bay.wide .br{font-size:26px}
  .bt-tag{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:99px;font:700 9.5px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--on);background:var(--a)}
  .sheet{margin-top:14px;border-radius:22px}
  .sheet-h{padding:12px 18px;gap:10px;font-size:10px}.sheet-h .rev{display:none}
  .sheet-b{gap:26px;padding:22px 18px}
  .gauge svg{max-width:250px;margin:0 auto}
  .gauge>b{font-size:34px}
  .specs{grid-template-columns:1fr 1fr}
  .specs div{padding:9px 12px}
  .fuel label b{font-size:26px}
  .outs{grid-template-columns:1fr;gap:8px;margin:20px 0 14px}
  .outs div{display:flex;justify-content:space-between;align-items:center;padding:12px 14px}
  .outs b{font-size:18px}
  .fuel .btn{width:100%;justify-content:center}

  /* crew: bigger graph (clipped by the section), readable labels, 2×2 perks */
  .crew{overflow-x:clip}
  .crewart{width:118%;margin-left:-9%}
  .crewart .lbl{font-size:19px}.crewart .lbl2{font-size:18px}.crewart .you{font-size:24px}
  .perks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 24px}
  .perks span{display:flex;flex-direction:column;align-items:flex-start;padding:14px 16px;border-radius:16px;font-size:13px;text-align:left}
  .perks b{font-size:20px;margin:0 0 2px}
  .center .btn{width:100%;max-width:380px;justify-content:center}

  /* field notes */
  .risk{padding:84px 20px 22px}
  .risk .rk{left:20px;top:22px;width:46px;height:46px}
  .risk h3{font-size:18px}.risk p{font-size:15px}
  .qs{grid-template-columns:1fr;gap:10px}
  .qs details{padding:0 18px}
  .qs summary{padding:17px 0;font-size:15px}
  .qs details p{padding:0 0 18px;font-size:14.5px}

  /* end + footer */
  .end{padding-top:72px}
  .score{margin-bottom:60px}
  .score div{padding:18px 6px}
  .score b{font-size:22px}.score small{font-size:12px}
  .end p{font-size:16px}
  .cart{overflow:hidden;margin-top:30px}
  .cart svg{width:210%;margin-left:-55%}
  footer{padding:40px 0 34px}
  .ft{gap:26px 20px}.ft>div:first-child{grid-column:1/-1}
  .legal{flex-direction:column;gap:6px;margin-top:30px}

}
@keyframes drip{0%{transform:translateY(0);opacity:0}15%,80%{opacity:1}100%{transform:translateY(40px);opacity:0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}