/* ============ SPACE VOXEL — Frontier Terminal ============ */
:root{
  --bg:#080b14;
  --bg-2:#0c1020;
  --panel:#0f1424;
  --panel-2:#141b30;
  --ink:#e8eef7;
  --ink-dim:#9fb0c8;
  --ink-faint:#5b6b86;
  --cyan:#3fe0ff;
  --cyan-deep:#12a8cf;
  --amber:#ffb43f;
  --amber-deep:#e8901a;
  --rust:#e2563a;
  --green:#54e6a8;
  --line:rgba(120,160,210,.14);
  --line-bright:rgba(80,200,240,.35);
  --glow-cyan:0 0 22px rgba(63,224,255,.45);
  --glow-amber:0 0 22px rgba(255,180,63,.45);
  --maxw:1200px;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
img{max-width:100%}
body{
  background:
    radial-gradient(1200px 700px at 75% -10%, rgba(63,224,255,.10), transparent 60%),
    radial-gradient(900px 600px at 10% 20%, rgba(226,86,58,.07), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  color:var(--ink);
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-weight:400;
  line-height:1.55;
  overflow-x:hidden;
  letter-spacing:.2px;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
::selection{background:var(--cyan);color:var(--bg)}
h1,h2,h3{font-family:"Tektur",sans-serif;line-height:1.02;letter-spacing:1px}

/* ---- texture overlays ---- */
.grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.scanlines{position:fixed;inset:0;z-index:8999;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.18) 2px 3px);}
.starfield{position:fixed;inset:0;z-index:0;pointer-events:none}
/* chunky square "voxel" stars */
.star{position:absolute;width:2px;height:2px;background:#cfe8ff;opacity:.5;
  box-shadow:0 0 4px rgba(207,232,255,.7);animation:tw 4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.15}50%{opacity:.9}}
/* ambient voxel haze: faint isometric cube lattice over the whole page */
.voxel-haze{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    linear-gradient(60deg, rgba(63,224,255,.035) 1px, transparent 1px) 0 0/46px 80px,
    linear-gradient(-60deg, rgba(63,224,255,.035) 1px, transparent 1px) 0 0/46px 80px,
    linear-gradient(0deg, rgba(120,160,210,.03) 1px, transparent 1px) 0 0/46px 80px;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 0%,#000,transparent 75%);
          mask-image:radial-gradient(120% 120% at 50% 0%,#000,transparent 75%)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:"Tektur",sans-serif;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;font-size:13px;padding:11px 20px;border-radius:10px;
  border:1px solid transparent;cursor:pointer;transition:.25s transform,.25s box-shadow,.25s background;position:relative}
.btn-lg{font-size:15px;padding:15px 30px}
.btn-amber{background:linear-gradient(180deg,var(--amber),var(--amber-deep));color:#1a1205;
  box-shadow:var(--glow-amber),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-amber:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(255,180,63,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-ghost{background:rgba(63,224,255,.06);color:var(--cyan);border-color:var(--line-bright)}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(63,224,255,.14);box-shadow:var(--glow-cyan)}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(16px,4vw,40px);transition:.3s background,.3s border;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(8,11,20,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-family:"Tektur",sans-serif;font-weight:800;font-size:19px;letter-spacing:2px}
.brand-mark{color:var(--cyan);text-shadow:var(--glow-cyan);animation:spin 8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.brand .accent{color:var(--cyan)}
.brand-tag{font-family:"Press Start 2P",monospace;font-size:7px;color:var(--amber);border:1px solid var(--amber-deep);
  padding:3px 5px;border-radius:4px;letter-spacing:0;margin-left:4px}
.nav-links{display:flex;gap:28px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:1.5px}
.nav-links a{color:var(--ink-dim);position:relative;padding:4px 0;transition:.2s color}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--cyan);
  box-shadow:var(--glow-cyan);transition:.25s width}
.nav-links a:hover{color:var(--ink)}.nav-links a:hover::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:12px}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;
  color:var(--ink-dim);transition:.2s}
.icon-btn:hover{color:var(--cyan);border-color:var(--line-bright);box-shadow:var(--glow-cyan)}

/* ---- hero ---- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:128px clamp(16px,4vw,40px) 56px;overflow:hidden;gap:10px}
.hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background:
    linear-gradient(60deg,rgba(63,224,255,.06) 1px,transparent 1px) 0 0/48px 84px,
    linear-gradient(-60deg,rgba(63,224,255,.06) 1px,transparent 1px) 0 0/48px 84px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 78%,#000,transparent 82%);
          mask-image:radial-gradient(120% 90% at 50% 78%,#000,transparent 82%)}
.hero-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(80% 60% at 50% 100%,rgba(8,11,20,.9),transparent 70%),
  linear-gradient(180deg,rgba(8,11,20,.4),transparent 30%,rgba(8,11,20,.92))}
.hero-inner{position:relative;z-index:5;width:100%;max-width:1160px;display:grid;
  grid-template-columns:1.04fr .96fr;gap:clamp(24px,4vw,56px);align-items:center;text-align:left}
.hero-copy{min-width:0}
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:"JetBrains Mono",monospace;font-size:clamp(10px,1.4vw,12px);
  letter-spacing:3px;color:var(--cyan);text-transform:uppercase;border:1px solid var(--line-bright);
  padding:7px 14px;border-radius:30px;background:rgba(63,224,255,.05)}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:tw 1.6s infinite}
.hero-title{font-family:"Tektur",sans-serif;font-weight:900;font-size:clamp(46px,8.2vw,108px);line-height:.92;
  letter-spacing:2px;margin:20px 0 14px;text-shadow:0 4px 40px rgba(0,0,0,.7)}
.title-line{display:block}
.title-glow{color:var(--cyan);text-shadow:0 0 40px rgba(63,224,255,.6),0 0 8px rgba(63,224,255,.9)}
.hero-sub{font-size:clamp(15px,1.5vw,18px);color:var(--ink-dim);max-width:520px;margin:0 0 28px}
.hero-sub strong{color:var(--ink)}
.hero-cta{display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap}
/* hero voxel stage */
.hero-stage{position:relative;z-index:4;min-width:0;display:grid;place-items:center;min-height:clamp(260px,34vw,440px)}
.stage-glow{position:absolute;width:78%;aspect-ratio:1/1;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(63,224,255,.28),transparent 62%);filter:blur(40px)}
.stage-ring{position:absolute;width:84%;max-width:440px;aspect-ratio:1/1;border:1px dashed var(--line-bright);
  border-radius:50%;opacity:.5;z-index:1;animation:spin 26s linear infinite}
.hero-planet{position:relative;z-index:3;width:min(100%,520px);height:auto;
  filter:drop-shadow(0 26px 36px rgba(0,0,0,.6));animation:bobA 7s ease-in-out infinite}
.float-cube{position:absolute;z-index:4;image-rendering:pixelated;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}
.cube-1{width:clamp(40px,6vw,78px);top:4%;left:0;animation:bobB 5s ease-in-out infinite}
.cube-2{width:clamp(34px,5vw,64px);bottom:6%;right:4%;animation:bobA 6s ease-in-out infinite}
.cube-3{width:clamp(28px,4vw,52px);top:16%;right:2%;animation:bobB 7s ease-in-out infinite}
.iso-deco{position:absolute;width:10px;height:10px;border:1px solid var(--line-bright);transform:rotate(45deg);opacity:.5;z-index:2}
.iso-deco.d-a{top:20%;left:8%}.iso-deco.d-b{bottom:22%;right:10%}

/* ticker */
.ticker{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;max-width:680px;margin:0 auto 22px;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.stat{background:rgba(12,16,32,.85);backdrop-filter:blur(8px);padding:16px 10px;display:flex;flex-direction:column;gap:4px}
.stat-num{font-family:"JetBrains Mono",monospace;font-size:clamp(16px,2.4vw,24px);font-weight:700;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:tw 1.4s infinite}
.stat-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-faint)}

.ca{display:inline-flex;align-items:center;gap:10px;font-family:"JetBrains Mono",monospace;font-size:12px;
  color:var(--ink-faint);background:rgba(12,16,32,.7);border:1px solid var(--line);border-radius:30px;padding:7px 8px 7px 16px}
.ca span{color:var(--amber)}
.ca code{color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;max-width:46vw;white-space:nowrap}
.copy{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--bg);background:var(--cyan);border:none;
  border-radius:20px;padding:5px 12px;cursor:pointer;transition:.2s}
.copy:hover{background:var(--ink)}

/* floating assets */
.float-asset{position:absolute;z-index:4;image-rendering:pixelated;filter:drop-shadow(0 14px 24px rgba(0,0,0,.55))}
.asset-ship{width:150px;top:20%;right:7%;animation:bobA 6s ease-in-out infinite}
.asset-pioneer{width:84px;bottom:14%;left:9%;animation:bobB 5s ease-in-out infinite}
.asset-drone{width:70px;top:30%;left:13%;animation:bobA 7s ease-in-out infinite}
@keyframes bobA{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-22px) rotate(2deg)}}
@keyframes bobB{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:3px;color:var(--ink-faint);animation:tw 2.4s infinite;z-index:5}

/* ---- marquee ---- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(63,224,255,.04);
  overflow:hidden;padding:14px 0}
.marquee-track{display:flex;gap:40px;white-space:nowrap;animation:scrollX 22s linear infinite;width:max-content}
.marquee-track span{font-family:"Tektur",sans-serif;font-weight:800;font-size:18px;letter-spacing:6px;
  color:transparent;-webkit-text-stroke:1px var(--cyan-deep)}
@keyframes scrollX{to{transform:translateX(-33.33%)}}

/* ---- sections ---- */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(70px,10vw,130px) clamp(16px,4vw,40px)}
.section-head{margin-bottom:54px;max-width:760px}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:4px;color:var(--cyan);text-transform:uppercase}
.section-head h2{font-size:clamp(30px,5vw,52px);font-weight:800;margin:14px 0 16px}
.lede{font-size:clamp(15px,1.8vw,18px);color:var(--ink-dim);max-width:620px}

/* ============ LOOP — alternating waypoint flight-path ============ */
.loop-sec{position:relative}
/* per-step accent — defaults cyan, overridden per waypoint colour class */
.flightpath{--ac:var(--cyan);--ac-deep:var(--cyan-deep);--ac-rgb:63,224,255}
.wp-green{--ac:var(--green);--ac-deep:#2bb47e;--ac-rgb:84,230,168}
.wp-amber{--ac:var(--amber);--ac-deep:var(--amber-deep);--ac-rgb:255,180,63}

.flightpath{list-style:none;position:relative;max-width:980px;margin:0 auto;padding:30px 0 10px;
  display:flex;flex-direction:column;gap:clamp(34px,5vw,64px)}

/* curved dashed trajectory drawn behind the waypoints */
.fp-trail{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.fp-line{fill:none;stroke:var(--line-bright);stroke-width:2;stroke-dasharray:7 11;stroke-linecap:round;
  opacity:.6;filter:drop-shadow(0 0 6px rgba(63,224,255,.3));
  animation:fpDash 60s linear infinite}
@keyframes fpDash{to{stroke-dashoffset:-360}}

/* each waypoint row: node rail on one side, card on the other */
.wp{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  column-gap:clamp(18px,3vw,40px)}
.wp-left .wp-card{grid-column:1;justify-self:end}
.wp-right .wp-card{grid-column:3}

/* the glowing waypoint node sits in the centre column, on the trail */
.wp-node{grid-column:2;width:clamp(46px,6vw,58px);aspect-ratio:1;display:grid;place-items:center;
  border-radius:50%;background:radial-gradient(circle at 50% 35%,rgba(var(--ac-rgb),.22),rgba(8,11,20,.95));
  border:1.5px solid var(--ac);box-shadow:0 0 0 6px rgba(8,11,20,.85),0 0 22px rgba(var(--ac-rgb),.5);
  position:relative}
.wp-node::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px dashed rgba(var(--ac-rgb),.4);
  animation:spin 22s linear infinite}
.wp-num{font-family:"Tektur",sans-serif;font-weight:900;font-size:clamp(15px,2vw,19px);letter-spacing:1px;
  color:var(--ac);text-shadow:0 0 12px rgba(var(--ac-rgb),.6)}

/* the card */
.wp-card{position:relative;width:100%;max-width:430px;display:grid;grid-template-columns:auto 1fr;
  align-items:center;gap:clamp(14px,2vw,22px);
  background:linear-gradient(150deg,rgba(15,20,36,.92),rgba(20,27,48,.72));
  border:1px solid var(--line);border-radius:18px;padding:18px 22px 18px 18px;overflow:hidden;
  backdrop-filter:blur(5px);transition:transform .3s,border-color .3s,box-shadow .3s}
.wp-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--ac),transparent);opacity:.9}
.wp-card:hover{transform:translateY(-5px);border-color:rgba(var(--ac-rgb),.45);
  box-shadow:0 24px 56px rgba(0,0,0,.55),0 0 30px rgba(var(--ac-rgb),.12)}

/* connector pointing from card toward the central node */
.wp-left .wp-card::after{content:"";position:absolute;top:50%;right:-1px;width:clamp(18px,3vw,40px);height:1px;
  background:linear-gradient(90deg,transparent,var(--ac));transform:translateX(100%);opacity:.5}
.wp-right .wp-card::after{content:"";position:absolute;top:50%;left:-1px;width:clamp(18px,3vw,40px);height:1px;
  background:linear-gradient(270deg,transparent,var(--ac));transform:translateX(-100%);opacity:.5}

/* voxel illustration */
.wp-art{position:relative;width:clamp(92px,13vw,124px);aspect-ratio:1;flex:0 0 auto;display:grid;place-items:center;
  border-radius:14px;overflow:hidden;
  background:radial-gradient(80% 80% at 50% 38%,rgba(var(--ac-rgb),.14),rgba(8,11,20,.55));
  border:1px solid var(--line)}
.wp-art-glow{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--ac-rgb),.4),transparent 65%);filter:blur(14px);opacity:.7}
.wp-art img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.5));transition:transform .4s ease}
.wp-card:hover .wp-art img{transform:scale(1.07)}

.wp-body{min-width:0}
.wp-kicker{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--ac);opacity:.85;display:block;margin-bottom:5px}
.wp-body h3{font-size:clamp(22px,2.6vw,27px);margin-bottom:7px}
.wp-body p{font-size:13.5px;color:var(--ink-dim);line-height:1.5}

/* ============ WORLDS — asymmetric featured + minis ============ */
.world-layout{display:grid;grid-template-columns:1.25fr .95fr;grid-template-rows:1fr 1fr;gap:20px}
.world-feature{grid-row:1 / span 2;position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:440px;border:1px solid var(--line-bright);border-radius:22px;overflow:hidden;
  background:radial-gradient(120% 80% at 70% 10%,rgba(63,224,255,.14),transparent 60%),linear-gradient(180deg,var(--panel),var(--panel-2));
  transition:.3s}
.world-feature:hover{transform:translateY(-4px);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.world-feature .world-glow{position:absolute;top:-30px;right:-30px;width:220px;height:220px;border-radius:50%;
  background:var(--cyan);filter:blur(60px);opacity:.35}
.wf-art{position:relative;flex:1;display:grid;place-items:center;min-height:240px;padding:24px 0 0}
.wf-orbit{position:absolute;width:min(74%,320px);aspect-ratio:1;border:1px dashed var(--line-bright);
  border-radius:50%;opacity:.4;animation:spin 30s linear infinite}
.wf-img{position:relative;z-index:2;width:min(80%,360px);border-radius:18px;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.6));animation:bobB 7s ease-in-out infinite}
.wf-body{position:relative;z-index:2;padding:24px clamp(22px,3vw,34px) 30px;
  background:linear-gradient(180deg,transparent,rgba(8,11,20,.65) 30%)}
.wf-body h3{font-size:clamp(26px,3vw,34px);margin:10px 0}
.wf-body>p{font-size:15px;color:var(--ink-dim);margin-bottom:18px;max-width:46ch}

.world-mini{position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;
  border:1px solid var(--line);border-radius:18px;padding:20px;overflow:hidden;transition:.3s;
  background:linear-gradient(110deg,var(--panel),var(--panel-2))}
.world-mini::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;opacity:.85}
.world-mini.ferros::before{background:linear-gradient(180deg,var(--rust),transparent)}
.world-mini.verdis::before{background:linear-gradient(180deg,var(--green),transparent)}
.world-mini:hover{transform:translateY(-4px);box-shadow:0 22px 56px rgba(0,0,0,.55)}
.world-mini.ferros:hover{border-color:rgba(226,86,58,.5)}
.world-mini.verdis:hover{border-color:rgba(84,230,168,.5)}
.wm-img{width:clamp(96px,13vw,150px);border-radius:14px;align-self:center;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.5));transition:.4s}
.world-mini:hover .wm-img{transform:scale(1.06) rotate(-1deg)}
.wm-body h3{font-size:clamp(20px,2.4vw,25px);margin:6px 0 8px}
.wm-body>p{font-size:13.5px;color:var(--ink-dim);margin-bottom:12px}

.world-tag{font-family:"Press Start 2P",monospace;font-size:9px;letter-spacing:1px;display:inline-block;
  padding:5px 8px;border-radius:5px;background:rgba(63,224,255,.1);color:var(--cyan);border:1px solid var(--line-bright)}
.ferros .world-tag{background:rgba(226,86,58,.12);color:var(--rust);border-color:rgba(226,86,58,.4)}
.verdis .world-tag{background:rgba(84,230,168,.12);color:var(--green);border-color:rgba(84,230,168,.4)}
.world-stats{list-style:none;display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line);padding-top:14px}
.world-stats li{font-size:13px;color:var(--ink-dim);display:flex;justify-content:space-between;gap:12px;font-family:"JetBrains Mono",monospace}
.world-stats span{color:var(--ink-faint);font-size:11px;letter-spacing:1px}
.worlds-foot{text-align:center;margin-top:30px;color:var(--ink-faint);font-family:"JetBrains Mono",monospace;font-size:13px}

/* ============ SHIP — iso blueprint stage ============ */
.ship-sec{padding-top:0}
.ship-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,60px);align-items:center;
  background:
    radial-gradient(90% 120% at 18% 50%,rgba(63,224,255,.08),transparent 55%),
    linear-gradient(120deg,var(--panel),rgba(15,20,36,.2));
  border:1px solid var(--line);border-radius:24px;padding:clamp(30px,5vw,60px);position:relative;overflow:hidden}
.ship-copy h2{font-size:clamp(28px,4vw,46px);font-weight:800;margin:14px 0 14px}
.ship-specs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.ship-specs>div{border:1px solid var(--line);border-radius:10px;padding:14px;background:rgba(8,11,20,.4);transition:.25s}
.ship-specs>div:hover{border-color:var(--line-bright);background:rgba(63,224,255,.06)}
.spec-k{display:block;font-family:"Press Start 2P",monospace;font-size:9px;color:var(--amber);margin-bottom:6px}
.spec-v{font-size:13px;color:var(--ink-dim)}
.ship-stage{position:relative;display:grid;place-items:center;min-height:340px}
.ship-blueprint{position:absolute;inset:-10% -6%;z-index:0;opacity:.5;
  background:
    linear-gradient(60deg,rgba(63,224,255,.07) 1px,transparent 1px) 0 0/40px 70px,
    linear-gradient(-60deg,rgba(63,224,255,.07) 1px,transparent 1px) 0 0/40px 70px;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 80%);
          mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 80%)}
.ship-ring{position:absolute;width:min(86%,320px);aspect-ratio:1;border:1px dashed var(--line-bright);border-radius:50%;animation:spin 24s linear infinite}
.ship-ring::after{content:"";position:absolute;inset:34px;border:1px solid var(--line);border-radius:50%}
.ship-hero{width:min(78%,300px);z-index:3;filter:drop-shadow(0 24px 34px rgba(0,0,0,.6));animation:bobA 6s ease-in-out infinite}
.ship-mini{position:absolute;z-index:4;filter:drop-shadow(0 10px 16px rgba(0,0,0,.55))}
.ship-mini.m1{width:clamp(70px,11vw,110px);bottom:2%;left:0;animation:bobB 5s ease-in-out infinite}
.ship-mini.m2{width:clamp(78px,12vw,120px);top:0;right:2%;animation:bobB 6s ease-in-out infinite}
.ship-readout{position:absolute;bottom:8px;right:4%;z-index:5;font-family:"JetBrains Mono",monospace;font-size:11px;
  letter-spacing:2px;color:var(--ink-faint);border:1px solid var(--line);border-radius:20px;padding:5px 12px;
  background:rgba(8,11,20,.7)}
.ship-readout b{color:var(--green)}

/* ============ ECONOMY — balanced bento (6-col, tiles with no gaps) ============ */
.econ-bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:18px}
.econ-bento>div{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.3s;
  background:linear-gradient(180deg,var(--panel),var(--panel-2))}
.econ-bento>div:hover{transform:translateY(-5px);border-color:var(--line-bright);box-shadow:0 22px 56px rgba(0,0,0,.55)}
/* big hero token cell — top-left 4×2 */
.econ-hero{grid-column:1 / span 4;grid-row:1 / span 2;display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  padding:clamp(24px,3vw,40px);
  background:radial-gradient(80% 100% at 80% 20%,rgba(255,180,63,.12),transparent 60%),linear-gradient(180deg,var(--panel),var(--panel-2))}
.econ-hero-img{width:clamp(120px,20vw,210px);flex:0 0 auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));
  animation:bobA 6s ease-in-out infinite}
.econ-badge{font-family:"Press Start 2P",monospace;font-size:9px;letter-spacing:1px;color:var(--amber);
  border:1px solid var(--amber-deep);border-radius:5px;padding:5px 8px;display:inline-block;margin-bottom:14px}
.econ-hero-copy h3{font-size:clamp(26px,3.4vw,40px);margin-bottom:12px}
.econ-hero-copy p{font-size:15px;color:var(--ink-dim);max-width:42ch}
/* burn stat cell — top-right 2×2, tall big number */
.econ-stat{grid-column:5 / span 2;grid-row:1 / span 2;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px 24px;text-align:left;
  background:radial-gradient(90% 60% at 50% 0%,rgba(255,120,40,.16),transparent 65%),linear-gradient(180deg,var(--panel),var(--panel-2))}
.econ-row-img{width:64px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.econ-stat .econ-row-img{position:absolute;top:18px;right:16px;width:84px;opacity:.95;animation:bobB 5s ease-in-out infinite}
.econ-bignum{font-family:"Tektur",sans-serif;font-weight:900;font-size:clamp(60px,8vw,92px);line-height:.85;
  color:var(--amber);text-shadow:0 0 30px rgba(255,140,40,.5)}
.econ-bignum span{font-size:.45em;color:var(--amber-deep);vertical-align:super}
.econ-stat h4{font-size:19px;margin:10px 0 8px}
.econ-stat p{font-size:13.5px;color:var(--ink-dim)}
/* bottom feature rows — two equal cells, 3 cols each, fill the row cleanly */
.econ-row{grid-column:span 3;grid-row:3;display:flex;align-items:center;gap:18px;padding:22px 24px}
.econ-row .econ-row-img{flex:0 0 auto;width:clamp(60px,8vw,84px);animation:bobB 6s ease-in-out infinite}
.econ-row h4{font-size:20px;margin-bottom:6px}
.econ-row p{font-size:14px;color:var(--ink-dim)}
.econ-row.highlight{border-color:rgba(255,180,63,.4);
  background:radial-gradient(70% 120% at 0% 50%,rgba(63,224,255,.12),transparent 55%),linear-gradient(180deg,rgba(255,180,63,.06),var(--panel-2))}
.economy strong{color:var(--amber)}.economy em{color:var(--cyan);font-style:normal}

/* ============ ROADMAP — alternating zigzag ============ */
.roadmap{position:relative}
.timeline{list-style:none;position:relative;max-width:920px;margin:0 auto;padding:10px 0}
.timeline::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,var(--green),var(--cyan) 30%,var(--cyan-deep) 70%,var(--line))}
.timeline li{position:relative;width:calc(50% - 36px);padding:4px 0 44px;}
.timeline li:nth-child(odd){left:0;text-align:right;padding-right:8px}
.timeline li:nth-child(even){left:calc(50% + 36px);text-align:left;padding-left:8px}
.tl-node{position:absolute;top:6px;width:16px;height:16px;border-radius:3px;transform:rotate(45deg);
  background:var(--bg);border:2px solid var(--cyan);box-shadow:var(--glow-cyan)}
.timeline li:nth-child(odd) .tl-node{right:-44px}
.timeline li:nth-child(even) .tl-node{left:-44px}
.timeline li:first-child .tl-node{border-color:var(--green);box-shadow:0 0 16px var(--green);background:var(--green)}
.tl-tag{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:2px;color:var(--ink-faint);display:block;margin-bottom:8px}
.tl-tag.now{color:var(--green)}
.timeline h3{font-size:22px;margin-bottom:8px}
.timeline p{font-size:13.5px;color:var(--ink-dim)}

/* ============ START — diagonal launch band ============ */
.start-inner{position:relative;max-width:1000px;margin:0 auto;overflow:hidden;
  background:
    radial-gradient(80% 130% at 50% 0%,rgba(63,224,255,.12),transparent 60%),
    linear-gradient(120deg,rgba(15,20,36,.9),rgba(20,27,48,.6));
  border:1px solid var(--line-bright);border-radius:24px;padding:clamp(40px,6vw,64px)}
.start-inner::before{content:"";position:absolute;inset:0;z-index:0;opacity:.4;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,180,63,.06) 0 2px,transparent 2px 26px)}
.start-inner>*{position:relative;z-index:1}
.start-inner h2{font-size:clamp(28px,5vw,46px);font-weight:800;margin:14px 0 34px}
.start-steps{display:flex;gap:0;justify-content:center;flex-wrap:wrap;margin-bottom:36px;
  counter-reset:st;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.start-step{flex:1;min-width:170px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:26px 22px;background:rgba(8,11,20,.4);position:relative;transition:.25s}
.start-step+.start-step{border-left:1px solid var(--line)}
.start-step:hover{background:rgba(63,224,255,.06)}
.start-step span{font-family:"Tektur",sans-serif;font-weight:900;font-size:40px;line-height:.8;color:transparent;
  -webkit-text-stroke:1.4px var(--cyan);text-shadow:0 0 20px rgba(63,224,255,.3)}
.start-step:last-child span{-webkit-text-stroke-color:var(--amber)}
.start-step p{font-size:14px;color:var(--ink-dim);text-align:left}

/* ============ $SPACE TOKEN — terminal panel ============ */
.token-sec{position:relative}
.amber-glow{color:var(--amber);text-shadow:0 0 30px rgba(255,180,63,.55)}
.token-shell{position:relative;border:1px solid var(--line-bright);border-radius:24px;overflow:hidden;
  background:
    radial-gradient(70% 110% at 88% 8%,rgba(255,180,63,.12),transparent 55%),
    radial-gradient(60% 90% at 6% 92%,rgba(63,224,255,.12),transparent 55%),
    linear-gradient(140deg,rgba(15,20,36,.95),rgba(20,27,48,.7))}
/* faint iso lattice texture so it reads distinct from the bento cards */
.token-shell::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background:
    linear-gradient(60deg,rgba(63,224,255,.05) 1px,transparent 1px) 0 0/44px 76px,
    linear-gradient(-60deg,rgba(63,224,255,.05) 1px,transparent 1px) 0 0/44px 76px;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 0%,#000,transparent 78%);
          mask-image:radial-gradient(120% 120% at 50% 0%,#000,transparent 78%)}
.token-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr .95fr;gap:clamp(26px,4vw,52px);
  align-items:center;padding:clamp(30px,5vw,56px)}
.token-main h2{font-size:clamp(34px,5.5vw,60px);font-weight:800;margin:14px 0 14px}
.token-main .lede{margin-bottom:26px}
/* CA bar — same family as hero .ca but full width */
.token-ca{display:flex;align-items:center;gap:12px;font-family:"JetBrains Mono",monospace;font-size:13px;
  background:rgba(8,11,20,.7);border:1px solid var(--line);border-radius:12px;padding:12px 12px 12px 16px;margin-bottom:24px}
.token-ca-label{color:var(--amber);font-size:11px;letter-spacing:2px;flex:0 0 auto}
.token-ca code{color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:0}
.token-ca .copy{flex:0 0 auto}
/* stat ticker — same look as hero ticker */
.token-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:26px;box-shadow:0 18px 50px rgba(0,0,0,.4)}
.t-stat{background:rgba(12,16,32,.85);padding:16px 12px;display:flex;flex-direction:column;gap:4px}
.t-num{font-family:"JetBrains Mono",monospace;font-size:clamp(16px,2.2vw,22px);font-weight:700;color:var(--ink)}
.t-lbl{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-faint)}
/* buy buttons */
.token-buys{display:flex;flex-wrap:wrap;gap:10px}
.token-buys .btn{font-size:12px;padding:10px 16px}
/* right column: token coin + how to buy */
.token-how{position:relative;border:1px solid var(--line);border-radius:18px;padding:26px 24px;
  background:rgba(8,11,20,.45)}
.token-coin{position:relative;display:grid;place-items:center;height:clamp(120px,16vw,170px);margin-bottom:8px}
.token-coin img{position:relative;z-index:2;width:clamp(96px,13vw,140px);
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.6));animation:bobA 6s ease-in-out infinite}
.token-coin-ring{position:absolute;width:min(78%,170px);aspect-ratio:1;border:1px dashed var(--amber-deep);
  border-radius:50%;opacity:.45;animation:spin 26s linear infinite}
.token-how-title{font-family:"Press Start 2P",monospace;font-size:10px;letter-spacing:1px;color:var(--cyan);
  display:block;margin-bottom:16px}
.buy-steps{list-style:none;display:flex;flex-direction:column;gap:14px;counter-reset:bs}
.buy-steps li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.bs-n{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;border-radius:8px;
  font-family:"Tektur",sans-serif;font-weight:900;font-size:15px;color:var(--bg);
  background:linear-gradient(180deg,var(--cyan),var(--cyan-deep));box-shadow:0 0 14px rgba(63,224,255,.4)}
.buy-steps li:last-child .bs-n{background:linear-gradient(180deg,var(--amber),var(--amber-deep));box-shadow:0 0 14px rgba(255,180,63,.4)}
.buy-steps b{font-family:"Tektur",sans-serif;font-size:15px;letter-spacing:.5px;display:block;margin-bottom:2px}
.buy-steps p{font-size:13px;color:var(--ink-dim);line-height:1.4}
.token-sec strong{color:var(--cyan)}
.buy-steps li:last-child strong{color:var(--amber)}

/* footer */
.footer{border-top:1px solid var(--line);padding:50px clamp(16px,4vw,40px) 40px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:20px;background:rgba(8,11,20,.6)}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:"Tektur",sans-serif;font-weight:800;font-size:20px;letter-spacing:2px}
.foot-brand .accent{color:var(--cyan)}
.foot-links{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--ink-dim)}
.foot-links a:hover{color:var(--cyan)}
.foot-fine{font-size:12px;color:var(--ink-faint);max-width:520px;font-family:"JetBrains Mono",monospace}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);animation:reveal .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--d,0)*.12s + .15s)}
.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0)*.09s)}
.js [data-reveal].in{opacity:1;transform:none}
@keyframes reveal{to{opacity:1;transform:none}}

/* responsive */
@media(max-width:900px){
  .nav-links{display:none}
  /* hero stacks: copy on top, voxel stage below, centered */
  .hero{padding-top:110px}
  .hero-inner{grid-template-columns:1fr;gap:20px;text-align:center}
  .hero-copy{order:1}
  .hero-stage{order:2;min-height:clamp(220px,52vw,360px)}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  /* loop flight-path: single left rail, all cards on the right */
  .flightpath{max-width:560px;gap:clamp(22px,5vw,34px);padding-left:8px}
  .fp-trail{display:none}
  .wp,.wp-left,.wp-right{grid-template-columns:auto 1fr;column-gap:18px}
  .wp-node{grid-column:1}
  .wp-left .wp-card,.wp-right .wp-card{grid-column:2;justify-self:stretch;max-width:none}
  .wp-left .wp-card::after,.wp-right .wp-card::after{left:-1px;right:auto;
    background:linear-gradient(270deg,transparent,var(--ac));transform:translateX(-100%)}
  /* vertical connecting rail between nodes */
  .flightpath::before{content:"";position:absolute;top:46px;bottom:46px;
    left:calc(8px + clamp(46px,6vw,58px)/2);width:2px;transform:translateX(-1px);z-index:0;
    background:linear-gradient(180deg,var(--cyan),var(--green) 36%,var(--cyan) 64%,var(--amber));
    opacity:.4}
  /* worlds: stack feature + minis */
  .world-layout{grid-template-columns:1fr;grid-template-rows:none}
  .world-feature{grid-row:auto;min-height:auto}
  /* economy: collapse bento to single column */
  .econ-bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .econ-hero,.econ-stat,.econ-row{grid-column:auto;grid-row:auto}
  .econ-stat .econ-row-img{position:static;width:64px;margin-bottom:8px;align-self:flex-start}
  /* roadmap: single rail on left */
  .timeline{max-width:560px}
  .timeline::before{left:8px}
  .timeline li,.timeline li:nth-child(odd),.timeline li:nth-child(even){width:100%;left:0;text-align:left;
    padding:4px 0 36px 36px}
  .timeline li:nth-child(odd) .tl-node,.timeline li:nth-child(even) .tl-node{left:1px;right:auto}
  .ship-grid{grid-template-columns:1fr;gap:30px}
  .ship-stage{order:2}
  .float-asset{display:none}
  .ca code{max-width:60vw}
  /* token: stack columns */
  .token-grid{grid-template-columns:1fr;gap:30px}
}
@media(max-width:560px){
  .nav{padding:11px 14px;gap:8px;flex-wrap:nowrap}
  .brand{font-size:15px;gap:6px;min-width:0;flex:1 1 auto;overflow:hidden}
  .brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand-mark{font-size:14px}
  .brand-tag{display:none}
  .nav-actions{gap:8px;flex:0 0 auto}
  .nav-actions .icon-btn{display:none}
  .btn{font-size:12px;padding:9px 15px}
  .nav .btn-amber{font-size:11px;padding:8px 13px;letter-spacing:.5px;white-space:nowrap}
  .sm-hide{display:none}
  /* hard overflow guards */
  .hero-inner,.hero-copy,.hero-stage,.section,.ticker,.ca,.marquee{max-width:100%}
  .hero-sub{overflow-wrap:break-word}
  .hero{padding:96px 16px 44px}
  .kicker{font-size:9px;letter-spacing:1.4px;padding:6px 11px}
  .hero-title{font-size:clamp(40px,13.5vw,62px);letter-spacing:1px}
  .hero-sub{font-size:15px;padding:0 4px}
  .hero-cta .btn-lg{flex:1 1 100%}
  .cube-3{display:none}
  .ticker{grid-template-columns:1fr 1fr;max-width:100%}
  .ca{max-width:100%}
  .ca code{max-width:46vw}
  /* flight-path: tighten node + card on phones */
  .flightpath{padding-left:2px}
  .wp,.wp-left,.wp-right{column-gap:12px}
  .flightpath::before{left:calc(2px + clamp(46px,6vw,58px)/2)}
  .wp-card{padding:16px;gap:14px}
  .wp-art{width:clamp(72px,22vw,96px)}
  .ship-specs{grid-template-columns:1fr}
  .start-steps{flex-direction:column}
  .start-step+.start-step{border-left:none;border-top:1px solid var(--line)}
  .econ-hero{flex-direction:column;text-align:center}
  .econ-hero-copy p{margin-left:auto;margin-right:auto}
  .world-mini{grid-template-columns:1fr;text-align:center;justify-items:center}
  .world-mini .wm-img{margin:0 auto}
  /* token: 2-col stats, full-width buy buttons */
  .token-stats{grid-template-columns:1fr 1fr}
  .token-buys .btn{flex:1 1 100%;justify-content:center}
  .token-ca{flex-wrap:wrap}
  .token-ca code{flex:1 1 100%;order:3;max-width:100%}
  .marquee-track span{font-size:14px;letter-spacing:4px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal,[data-reveal]{opacity:1;transform:none}.hero-video{display:none}}

/* capture mode (screenshots only) */
.capture .hero{min-height:720px}
.capture [data-reveal],.capture .reveal{opacity:1!important;transform:none!important;animation:none!important}

/* ============ HERO VERSION B — cinematic full-map ============ */
.hero-cine{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:120px 20px 64px;overflow:hidden}
.cine-bg{position:absolute;inset:-5%;z-index:0;background-size:cover;background-position:center;
  animation:cinePan 40s ease-in-out infinite alternate}
.cine-video{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;z-index:1;opacity:0;
  transition:opacity 1.4s ease;animation:cinePan 40s ease-in-out infinite alternate}
.cine-video.ready{opacity:1}
@keyframes cinePan{from{transform:scale(1.06) translate3d(-1.6%,-1%,0)}to{transform:scale(1.16) translate3d(2.2%,1.6%,0)}}
.cine-overlay{position:absolute;inset:0;z-index:2;background:
  radial-gradient(78% 62% at 50% 44%, rgba(8,11,20,.66), transparent 72%),
  linear-gradient(180deg, rgba(8,11,20,.74), rgba(8,11,20,.26) 30%, rgba(8,11,20,.5) 60%, rgba(8,11,20,.96)),
  linear-gradient(0deg, rgba(12,16,34,.28), rgba(12,16,34,.28))}
.hero-center{position:relative;z-index:5;max-width:780px;display:flex;flex-direction:column;align-items:center}
.hero-cine .hero-title{font-family:"Tektur",sans-serif;font-weight:900;font-size:clamp(48px,9vw,118px);line-height:.95;
  letter-spacing:2px;margin:18px 0 16px;text-shadow:0 6px 44px rgba(0,0,0,.85)}
.hero-cine .hero-sub{font-size:clamp(15px,1.7vw,19px);color:var(--ink);max-width:560px;margin:0 auto 30px;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.hero-cine .hero-cta{justify-content:center;margin-bottom:30px}
.hero-cine .ticker{margin:0 auto 18px}
.hero-cine .ca{margin:0 auto}
@media(prefers-reduced-motion:reduce){.cine-bg,.cine-video{animation:none}}