/* =========================================================
   PIPE ACCELERATIONISM — $PIPE/ACC
   Palette sampled from the source photo.
   Motif: everything travels along the photo's flight vector (−33°).
   ========================================================= */
:root{
  --void:#00010e;
  --navy:#03062c;
  --indigo:#080d57;
  --deep:#081090;
  --royal:#1322d8;
  --electric:#1564f7;
  --cyan:#26c9fc;
  --ice:#b9dbef;
  --white:#f4f8ff;
  --plaid:#806360;
  --fur:#e0914a;
  --pipe:#a8552a;
  --violet:#8b5cff;
  --peri:#6e8af2;

  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --flight:-33deg;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.77,0,.18,1);
  --radius:18px;
  --gutter:clamp(16px,4vw,56px);
  --header-h:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;overflow-x:clip}
body{
  margin:0;background:var(--void);color:var(--white);
  font-family:var(--f-body);font-size:16px;line-height:1.55;
  overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;
}
body.is-loading{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
::selection{background:var(--cyan);color:var(--void)}

/* scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--cyan),var(--royal));border-radius:10px;border:2px solid var(--void)}

/* ================= PRELOADER ================= */
.preloader{
  position:fixed;inset:0;z-index:1000;background:var(--void);overflow:hidden;
  display:grid;place-items:center;
  transition:opacity .7s ease .15s, visibility 0s linear .9s;
}
.pl-img{position:absolute;inset:0;overflow:hidden}
.pl-img img{width:100%;height:100%;object-fit:cover;object-position:68% 40%;
  transform:scale(1.18);
  animation:plZoom 6s var(--ease-out) forwards}
@keyframes plZoom{to{transform:scale(1.02)}}
.pl-streaks{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen}
.pl-shade{position:absolute;inset:0;background:
  radial-gradient(140% 120% at 60% 40%,rgba(0,1,14,0) 55%,rgba(0,1,14,.6) 100%),
  linear-gradient(0deg,rgba(0,1,14,.85) 0%,rgba(0,1,14,0) 38%)}
.pl-ui{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(28px,7vh,72px);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.pl-ticker{font-family:var(--f-display);font-weight:900;font-style:italic;
  font-size:clamp(44px,9vw,140px);line-height:.9;letter-spacing:-.02em;
  text-shadow:0 0 30px rgba(38,201,252,.6);
  animation:plIn 1s var(--ease-out) both .15s}
.pl-meter{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  width:min(420px,100%);font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;
  animation:plIn 1s var(--ease-out) both .35s}
.pl-bar{height:6px;background:rgba(185,219,239,.15);border-radius:6px;overflow:hidden;transform:skewX(-20deg)}
.pl-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--royal),var(--cyan),#fff);
  box-shadow:0 0 16px var(--cyan);transition:width .25s linear}
.pl-num{font-size:20px;letter-spacing:0;color:var(--cyan)}
.pl-num b{font-weight:700;color:#fff}
@keyframes plIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.preloader.done{opacity:0;visibility:hidden}
.preloader.done .pl-img img{transform:scale(1.6);filter:blur(8px) brightness(1.6);transition:transform .9s var(--ease-io),filter .9s}
.preloader.done .pl-ui{transform:translateX(12vw);opacity:0;transition:transform .8s var(--ease-io),opacity .5s}

/* ================= BACKGROUND WARP + GRAIN ================= */
.warp{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}

main{position:relative;z-index:2}

/* ================= SPEEDOMETER HUD ================= */
.speedo{position:fixed;right:18px;top:50%;z-index:40;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;
  font-family:var(--f-mono)}
.speedo-track{width:4px;height:180px;background:rgba(185,219,239,.12);border-radius:4px;overflow:hidden;position:relative}
.speedo-track i{position:absolute;left:0;bottom:0;width:100%;height:0%;
  background:linear-gradient(0deg,var(--royal),var(--cyan),#fff);box-shadow:0 0 12px var(--cyan)}
.speedo-read{font-size:11px;color:var(--ice);writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.1em}
.speedo-read b{color:#fff;font-weight:700}

/* ================= HEADER ================= */
.header{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 var(--gutter);transition:background .4s,height .4s,box-shadow .4s}
.header.scrolled{background:rgba(0,1,14,.88);height:64px;box-shadow:0 1px 0 rgba(38,201,252,.18)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:18px;letter-spacing:.02em}
.brand img{width:40px;height:40px;filter:drop-shadow(0 0 8px rgba(38,201,252,.6))}
.brand em{font-style:normal;color:var(--cyan)}
.nav{display:flex;gap:6px}
.nav a{position:relative;padding:10px 14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ice);transition:color .3s}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--cyan);
  transform:scaleX(0) skewX(-30deg);transform-origin:left;transition:transform .4s var(--ease-out);box-shadow:0 0 10px var(--cyan)}
.nav a:hover{color:#fff}
.nav a:hover::after{transform:scaleX(1) skewX(-30deg)}
.socials{display:flex;align-items:center;gap:8px}

/* social buttons: parallelogram "fins" */
.soc{position:relative;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;
  font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.1em;color:#fff;isolation:isolate;
  transition:transform .3s var(--ease-out),color .3s}
.soc::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(-18deg);border-radius:8px;
  background:linear-gradient(135deg,rgba(21,100,247,.35),rgba(8,16,144,.5));
  border:1px solid rgba(38,201,252,.45);box-shadow:inset 0 0 16px rgba(38,201,252,.15);transition:all .3s}
.soc svg{width:17px;height:17px;fill:currentColor}
.soc-dex svg{fill:none}
.soc:hover{transform:translateY(-2px)}
.soc:hover::before{background:linear-gradient(135deg,var(--cyan),var(--electric));box-shadow:0 0 24px rgba(38,201,252,.7);border-color:#fff}
.soc:hover{color:var(--void)}
.burger{display:none;width:44px;height:42px;position:relative}
.burger i{position:absolute;left:10px;right:10px;height:2px;background:#fff;transition:transform .35s var(--ease-out),top .35s}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:25px;left:18px}
.burger[aria-expanded="true"] i:nth-child(1){top:20px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){top:20px;left:10px;transform:rotate(-45deg)}

/* ================= HERO ================= */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;align-items:center;
  padding:calc(var(--header-h) + 24px) var(--gutter) 90px;perspective:1400px}
.hero-stage{position:absolute;inset:0;transform-style:preserve-3d}
.hero-layer{position:absolute;inset:-4%;will-change:transform}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero-rings{display:grid;place-items:center}
.hero-rings i{position:absolute;left:66%;top:44%;width:34vmax;height:34vmax;margin:-17vmax 0 0 -17vmax;border-radius:50%;
  border:1px solid rgba(38,201,252,.22);transform:rotateX(68deg) rotateZ(var(--flight));
  animation:ring 6s linear infinite}
.hero-rings i:nth-child(2){width:48vmax;height:48vmax;margin:-24vmax 0 0 -24vmax;animation-delay:-2s;border-color:rgba(139,92,255,.22)}
.hero-rings i:nth-child(3){width:62vmax;height:62vmax;margin:-31vmax 0 0 -31vmax;animation-delay:-4s}
@keyframes ring{0%{opacity:0;transform:rotateX(68deg) rotateZ(var(--flight)) scale(.6)}30%{opacity:1}100%{opacity:0;transform:rotateX(68deg) rotateZ(var(--flight)) scale(1.25)}}
.hero-dog{display:flex;align-items:center;justify-content:flex-end}
.dog-float{position:absolute;right:1%;top:53%;width:min(54vw,96vh);transform:translateY(-50%);
  animation:hover 5.5s ease-in-out infinite}
.dog-float img{width:100%;filter:drop-shadow(0 0 40px rgba(38,201,252,.25))}
@keyframes hover{0%,100%{translate:0 0}50%{translate:14px -18px}}
.hero-vector{position:absolute;inset:0;pointer-events:none;
  background:
   linear-gradient(90deg,rgba(0,1,14,.92) 0%,rgba(0,1,14,.65) 32%,rgba(0,1,14,0) 60%),
   linear-gradient(0deg,rgba(0,1,14,1) 0%,rgba(0,1,14,0) 22%)}

.hero-copy{position:relative;z-index:3;max-width:min(720px,58vw)}
.kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font-family:var(--f-mono);font-size:12px;letter-spacing:.24em;color:var(--ice)}
.kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(38,201,252,.7);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(38,201,252,.7)}100%{box-shadow:0 0 0 14px rgba(38,201,252,0)}}
.title{margin:0;font-family:var(--f-display);font-weight:900;line-height:.86;letter-spacing:-.02em;font-style:normal}
.t-line{display:block}
.t1{font-size:clamp(84px,14vw,240px);
  background:linear-gradient(100deg,#fff 20%,var(--ice) 45%,var(--cyan) 70%,var(--electric));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(-10px 6px 0 rgba(38,201,252,.35)) drop-shadow(-22px 13px 0 rgba(21,100,247,.22)) drop-shadow(-36px 22px 0 rgba(19,34,216,.14));
  transform:skewX(-10deg);transform-origin:left bottom}
.t2{margin-top:10px;font-size:clamp(22px,3.9vw,66px);font-weight:800;letter-spacing:.01em;color:#fff;
  transform:skewX(-10deg);transform-origin:left;text-shadow:0 0 24px rgba(38,201,252,.45)}

/* ticker badge — used on visuals */
.ticker-badge{display:inline-block;margin:22px 0 28px;padding:10px 22px 10px 18px;position:relative;
  font-family:var(--f-display);font-weight:900;font-style:italic;font-size:clamp(20px,2.4vw,34px);letter-spacing:.02em;color:var(--void);
  isolation:isolate}
.ticker-badge::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(-18deg);
  background:linear-gradient(95deg,#fff,var(--cyan) 55%,var(--electric));box-shadow:0 0 34px rgba(38,201,252,.55),-14px 8px 0 rgba(38,201,252,.25),-26px 15px 0 rgba(21,100,247,.15);border-radius:6px}

/* ================= THRUST BUTTONS ================= */
.cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:22px}
.btn-thrust{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:62px;padding:0 34px;
  font-family:var(--f-display);font-weight:800;font-size:clamp(14px,1.25vw,17px);letter-spacing:.04em;
  isolation:isolate;overflow:hidden;clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%);
  transition:transform .35s var(--ease-out),box-shadow .35s}
.btn-thrust .bt-inner{position:relative;z-index:2;display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.btn-thrust svg{width:22px;height:22px}
.btn-thrust .pill{width:28px;height:28px;filter:drop-shadow(0 0 4px rgba(0,0,0,.4))}
.btn-pump{color:var(--void);
  background:linear-gradient(100deg,#ffffff 0%,#bfefff 22%,var(--cyan) 50%,var(--electric) 85%,var(--royal) 100%);
  background-size:200% 100%;animation:plasma 4s ease-in-out infinite}
@keyframes plasma{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.btn-pump::after{content:"";position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(-57deg,rgba(255,255,255,0) 0 14px,rgba(255,255,255,.18) 14px 16px);
  animation:stripes 1s linear infinite;mix-blend-mode:overlay}
@keyframes stripes{to{background-position:38px 0}}
.btn-ghost{color:#fff;background:rgba(3,6,44,.55)}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:0;
  clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%,0 0,2px 2px,2px calc(100% - 2px),calc(100% - 17px) calc(100% - 2px),calc(100% - 2px) 2px,17px 2px,2px 2px,0 0);
  background:linear-gradient(90deg,var(--cyan),var(--violet))}
.bt-streak{position:absolute;top:0;bottom:0;left:-40%;width:30%;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-25deg);
  transition:left .7s var(--ease-out)}
.btn-thrust:hover{transform:translate(4px,-3px)}
.btn-thrust:hover .bt-streak{left:120%}
.btn-thrust:active{transform:translate(1px,0) scale(.98)}
.btn-pump:hover{box-shadow:0 0 50px rgba(38,201,252,.6)}

/* ================= CA CAPSULE ================= */
.ca-capsule{display:inline-flex;align-items:stretch;max-width:100%;border-radius:14px;overflow:hidden;text-align:left;
  background:rgba(3,6,44,.72);border:1px solid rgba(38,201,252,.4);
  box-shadow:0 10px 40px rgba(0,0,0,.4),inset 0 0 22px rgba(38,201,252,.08);transition:border-color .3s,box-shadow .3s,transform .3s var(--ease-out)}
.ca-capsule:hover{border-color:var(--cyan);box-shadow:0 0 34px rgba(38,201,252,.35);transform:translateY(-2px)}
.ca-tag{display:grid;place-items:center;padding:0 16px;font-family:var(--f-display);font-weight:900;font-size:14px;color:var(--void);
  background:linear-gradient(135deg,var(--fur),#ffb46b)}
.ca-val{padding:16px 16px;font-family:var(--f-mono);font-size:clamp(12px,1vw,14px);color:var(--ice);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.ca-btn{display:inline-flex;align-items:center;gap:8px;padding:0 18px;font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.12em;
  color:#fff;background:linear-gradient(135deg,var(--electric),var(--royal));transition:background .3s}
.ca-btn svg{width:16px;height:16px}
.ca-capsule:hover .ca-btn{background:linear-gradient(135deg,var(--cyan),var(--electric));color:var(--void)}
.ca-capsule.copied .ca-btn{background:#fff;color:var(--void)}

.scroll-cue{position:absolute;left:50%;bottom:24px;z-index:3;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;color:var(--ice)}
.scroll-cue i{width:1px;height:44px;background:linear-gradient(var(--cyan),transparent);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:#fff;animation:drop 1.6s var(--ease-io) infinite}
@keyframes drop{to{top:110%}}

/* ================= MARQUEE ================= */
.marquee{position:relative;z-index:3;overflow:hidden;padding:18px 0;transform:rotate(-2.2deg);margin:-26px -2vw 0;
  background:linear-gradient(90deg,var(--royal),var(--electric),var(--cyan),var(--electric),var(--royal));
  box-shadow:0 0 50px rgba(21,100,247,.5)}
.mq-track{display:flex;width:max-content;gap:28px;animation:mq 22s linear infinite}
.mq-track span{font-family:var(--f-display);font-weight:900;font-style:italic;font-size:clamp(22px,3vw,40px);color:var(--void);letter-spacing:.01em}
.mq-track b{font-size:clamp(22px,3vw,40px);color:#fff;font-weight:400}
@keyframes mq{to{transform:translateX(-50%)}}

/* ================= SECTIONS ================= */
.sec{position:relative;padding:clamp(90px,14vw,170px) 0;overflow:hidden}
.sec-bg{position:absolute;inset:0;z-index:-1;filter:hue-rotate(10deg) saturate(1.15);background-position:center;background-size:cover;background-repeat:no-repeat;opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%)}
.sec-bg-art{opacity:.42;background-position:30% 40%}
.sec-bg-foot{opacity:.7;background-position:center 70%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 35%);mask-image:linear-gradient(180deg,transparent 0%,#000 35%)}
.wrap{width:min(1240px,100% - var(--gutter)*2);margin:0 auto;position:relative}

.sec-head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
.sec-idx{font-family:var(--f-mono);font-size:14px;color:var(--cyan);padding:6px 10px;border:1px solid rgba(38,201,252,.5);transform:skewX(-18deg);border-radius:4px}
.sec-title{margin:0;font-family:var(--f-display);font-weight:900;font-size:clamp(40px,7vw,104px);line-height:.9;letter-spacing:-.02em;
  transform:skewX(-8deg);transform-origin:left bottom;
  background:linear-gradient(100deg,#fff 30%,var(--ice) 55%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(-8px 5px 0 rgba(38,201,252,.25)) drop-shadow(-16px 10px 0 rgba(21,100,247,.14))}
.mini-link{margin-left:auto;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--cyan);border-bottom:1px solid currentColor;padding-bottom:3px}
.mini-link:hover{color:#fff}

/* reveal */
.reveal{opacity:0;transform:translate3d(-60px,40px,0) skewX(-6deg);filter:blur(6px);
  transition:opacity .9s var(--ease-out),transform 1s var(--ease-out),filter .9s var(--ease-out);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none;filter:none}

/* tilt */
[data-tilt]{transform-style:preserve-3d;will-change:transform}
.glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.25),transparent 45%);opacity:0;transition:opacity .3s}
[data-tilt]:hover .glare{opacity:1}

/* ================= LORE ================= */
.lore-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.lore-art{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(38,201,252,.3),0 0 60px rgba(21,100,247,.35)}
.lore-art img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.stamp{position:absolute;right:18px;bottom:16px;padding:8px 16px;font-family:var(--f-display);font-weight:900;font-style:italic;font-size:clamp(16px,1.8vw,24px);color:var(--void);
  background:linear-gradient(95deg,#fff,var(--cyan));transform:skewX(-18deg) translateZ(40px);border-radius:5px;box-shadow:0 0 24px rgba(38,201,252,.6)}
.stamp-v{right:auto;left:18px}
.theses{display:grid;gap:16px}
.thesis{position:relative;padding:24px 26px 24px 86px;border-radius:var(--radius);
  background:linear-gradient(120deg,rgba(8,13,87,.7),rgba(3,6,44,.55));border:1px solid rgba(110,138,242,.25);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:hidden}
.thesis::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--cyan),var(--violet))}
.th-n{position:absolute;left:24px;top:50%;transform:translateY(-50%) skewX(-12deg);font-family:var(--f-display);font-weight:900;font-size:40px;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--cyan)}
.thesis h3{margin:0 0 4px;font-family:var(--f-display);font-weight:800;font-size:clamp(20px,2vw,28px);letter-spacing:-.01em}
.thesis p{margin:0;color:var(--ice);font-size:15px}

/* ================= HOW TO BUY ================= */
.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stage{position:relative;padding:28px 22px 26px;border-radius:var(--radius);min-height:200px;
  background:linear-gradient(160deg,rgba(21,100,247,.22),rgba(3,6,44,.8) 55%);border:1px solid rgba(38,201,252,.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.stage:nth-child(2){margin-top:34px}.stage:nth-child(3){margin-top:68px}.stage:nth-child(4){margin-top:102px}
.stage:hover{border-color:var(--cyan);box-shadow:0 0 40px rgba(38,201,252,.3)}
.stage::before{content:"";position:absolute;right:-30%;top:-40%;width:80%;height:80%;background:radial-gradient(circle,rgba(38,201,252,.25),transparent 70%)}
.st-n{position:absolute;right:16px;top:12px;font-family:var(--f-display);font-weight:900;font-size:54px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(185,219,239,.35)}
.st-ico{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;margin-bottom:34px;color:var(--void);
  background:linear-gradient(135deg,#fff,var(--cyan));box-shadow:0 0 24px rgba(38,201,252,.5);transform:translateZ(30px)}
.st-ico svg{width:26px;height:26px}
.stage h3{margin:0 0 6px;font-family:var(--f-display);font-weight:800;font-size:20px;transform:translateZ(20px)}
.stage p{margin:0;color:var(--ice);font-size:15px}
.launchpad{position:relative;margin-top:clamp(70px,9vw,150px);min-height:clamp(340px,34vw,460px);border-radius:24px;
  display:flex;align-items:center;padding:clamp(28px,4vw,56px);isolation:isolate;
  box-shadow:0 0 0 1px rgba(38,201,252,.4),0 30px 90px rgba(0,0,0,.55),0 0 80px rgba(21,100,247,.3)}
.lp-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 40%;z-index:-2;border-radius:24px}
.launchpad::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:24px;
  background:linear-gradient(90deg,rgba(0,1,14,.92) 0%,rgba(0,1,14,.7) 38%,rgba(0,1,14,0) 70%)}
.lp-copy{max-width:560px}
.lp-ticker{font-family:var(--f-display);font-weight:900;font-style:italic;font-size:clamp(44px,6.4vw,92px);line-height:.95;letter-spacing:-.02em;margin-bottom:26px;
  background:linear-gradient(100deg,#fff 30%,var(--cyan) 75%,var(--electric));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(-10px 6px 0 rgba(38,201,252,.28)) drop-shadow(-20px 12px 0 rgba(21,100,247,.16))}
.lp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.ca-small .ca-val{max-width:260px}

/* ================= CHART ================= */
.chart-frame{position:relative;border-radius:22px;padding:2px;
  background:linear-gradient(130deg,var(--cyan),var(--royal) 40%,var(--violet) 70%,var(--cyan));
  box-shadow:0 0 70px rgba(21,100,247,.35)}
.cf-bar{display:flex;align-items:center;gap:18px;padding:14px 20px;border-radius:20px 20px 0 0;background:rgba(0,1,14,.92);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--ice)}
.cf-live{display:inline-flex;align-items:center;gap:8px;color:var(--cyan);font-weight:700}
.cf-live i{width:8px;height:8px;border-radius:50%;background:var(--cyan);animation:pulse 1.8s infinite}
.cf-v{margin-left:auto;opacity:.6}
.cf-body{position:relative;height:clamp(420px,62vh,640px);border-radius:0 0 20px 20px;overflow:hidden;background:var(--void)}
.cf-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.chart-soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;
  background:
   radial-gradient(60% 60% at 50% 45%,rgba(21,100,247,.35),transparent 70%),
   repeating-linear-gradient(0deg,rgba(38,201,252,.07) 0 1px,transparent 1px 48px),
   repeating-linear-gradient(90deg,rgba(38,201,252,.07) 0 1px,transparent 1px 48px),var(--void)}
.chart-soon img{width:120px;height:120px;animation:hover 4s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(38,201,252,.6))}
.chart-soon strong{font-family:var(--f-display);font-size:clamp(20px,2.6vw,32px);font-weight:800;margin-top:10px}
.chart-soon span{font-family:var(--f-mono);font-size:13px;color:var(--ice);letter-spacing:.1em}
.cf-corner{position:absolute;width:26px;height:26px;border:2px solid #fff;pointer-events:none}
.c1{left:-10px;top:-10px;border-right:0;border-bottom:0}.c2{right:-10px;top:-10px;border-left:0;border-bottom:0}
.c3{left:-10px;bottom:-10px;border-right:0;border-top:0}.c4{right:-10px;bottom:-10px;border-left:0;border-top:0}

/* ================= ROADMAP ================= */
.traj-wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,80px);align-items:start}
.traj-sticky{position:sticky;top:110px}
.traj-art{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(38,201,252,.3),0 0 70px rgba(21,100,247,.35)}
.traj-art img{width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.traj-list{position:relative;padding-left:44px}
.traj-list .sec-head{margin-left:-44px}
.traj-line{position:absolute;left:10px;top:170px;bottom:30px;width:3px;background:rgba(185,219,239,.12);border-radius:3px}
.traj-line i{position:absolute;left:0;bottom:0;width:100%;height:0;background:linear-gradient(0deg,var(--royal),var(--cyan),#fff);box-shadow:0 0 14px var(--cyan);border-radius:3px}
.phase{position:relative;margin-bottom:22px;padding:26px 28px;border-radius:var(--radius);
  background:linear-gradient(120deg,rgba(8,13,87,.75),rgba(3,6,44,.6));border:1px solid rgba(110,138,242,.25);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .4s,box-shadow .4s}
.phase::before{content:"";position:absolute;left:-41px;top:32px;width:15px;height:15px;border-radius:50%;background:var(--void);border:2px solid var(--peri);transition:all .4s}
.phase.lit{border-color:rgba(38,201,252,.6);box-shadow:0 0 34px rgba(38,201,252,.2)}
.phase.lit::before{background:var(--cyan);border-color:#fff;box-shadow:0 0 16px var(--cyan)}
.ph-speed{display:inline-block;margin-bottom:10px;padding:4px 12px;font-family:var(--f-mono);font-weight:700;font-size:13px;color:var(--void);
  background:linear-gradient(95deg,#fff,var(--cyan));transform:skewX(-16deg);border-radius:4px}
.phase h3{margin:0 0 6px;font-family:var(--f-display);font-weight:800;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.01em}
.phase p{margin:0;color:var(--ice)}

/* ================= GATES / FOOTER ================= */
.gates{padding-bottom:60px}
.gates-head{text-align:center;margin-bottom:clamp(36px,5vw,60px)}
.big-ticker{display:inline-block;font-family:var(--f-display);font-weight:900;font-style:italic;font-size:clamp(56px,13vw,210px);line-height:.9;letter-spacing:-.03em;
  background:linear-gradient(100deg,#fff 25%,var(--ice) 45%,var(--cyan) 70%,var(--electric));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(-12px 7px 0 rgba(38,201,252,.3)) drop-shadow(-26px 15px 0 rgba(21,100,247,.18)) drop-shadow(-42px 24px 0 rgba(19,34,216,.1))}
.gate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gate{position:relative;display:flex;align-items:center;gap:18px;min-height:104px;padding:0 30px;isolation:isolate;overflow:hidden;
  clip-path:polygon(22px 0,100% 0,calc(100% - 22px) 100%,0 100%);
  background:linear-gradient(120deg,rgba(21,100,247,.35),rgba(3,6,44,.85) 60%);
  transition:transform .35s var(--ease-out)}
.gate::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,#fff,var(--cyan) 40%,var(--electric) 80%);transform:translateX(-101%);transition:transform .55s var(--ease-io)}
.gate::after{content:"";position:absolute;inset:0;pointer-events:none;
  clip-path:polygon(22px 0,100% 0,calc(100% - 22px) 100%,0 100%,0 0,2px 1px,1px calc(100% - 1px),calc(100% - 23px) calc(100% - 1px),calc(100% - 2px) 1px,23px 1px,2px 1px,0 0);
  background:linear-gradient(90deg,var(--cyan),var(--violet))}
.g-n{font-family:var(--f-mono);font-size:14px;color:var(--cyan);transition:color .3s}
.g-t{font-family:var(--f-display);font-weight:900;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.01em;transform:skewX(-8deg);transition:color .3s}
.g-arrow{margin-left:auto;font-style:normal;font-size:28px;color:var(--cyan);transition:transform .45s var(--ease-out),color .3s}
.gate:hover{transform:translate(6px,-4px)}
.gate:hover::before{transform:none}
.gate:hover .g-n,.gate:hover .g-t,.gate:hover .g-arrow{color:var(--void)}
.gate:hover .g-arrow{transform:translate(6px,-6px) scale(1.2)}
.gate-hot{background:linear-gradient(100deg,#fff,var(--cyan) 45%,var(--electric))}
.gate-hot .g-n,.gate-hot .g-t,.gate-hot .g-arrow{color:var(--void)}
.gate-hot::before{background:linear-gradient(100deg,var(--fur),#ffcf8a)}

.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:40px}
.foot-soc{display:flex;flex-wrap:wrap;gap:12px}
.soc-lg{height:54px;padding:0 22px;font-size:13px}
.soc-lg svg{width:20px;height:20px}
.legal{margin:46px 0 0;text-align:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:rgba(185,219,239,.55)}

/* ================= TOAST ================= */
.toast{position:fixed;left:50%;bottom:28px;z-index:200;transform:translate(-50%,40px);opacity:0;pointer-events:none;
  padding:14px 22px;border-radius:12px;font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;color:var(--void);
  background:linear-gradient(95deg,#fff,var(--cyan));box-shadow:0 0 40px rgba(38,201,252,.6);transition:all .45s var(--ease-out)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ================= RESPONSIVE ================= */
@media (max-width:1080px){
  .stages{grid-template-columns:repeat(2,1fr)}
  .stage:nth-child(n){margin-top:0}
  .stage:nth-child(even){margin-top:34px}
}
@media (max-width:900px){
  :root{--header-h:66px}
  .nav{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:-1;flex-direction:column;justify-content:center;align-items:center;gap:6px;
    background:#00010e;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s linear .4s}
  .nav.open{opacity:1;visibility:visible;transition:opacity .4s}
  .nav a{font-family:var(--f-display);font-weight:900;font-size:34px;letter-spacing:-.01em;text-transform:none;color:#fff;transform:skewX(-8deg)}
  .burger{display:block}
  .header .socials .soc span{display:none}
  .header .soc{padding:0 12px}
  .speedo{display:none}

  .hero{flex-direction:column;align-items:flex-start;justify-content:flex-end;padding-top:calc(var(--header-h) + 10px);padding-bottom:84px}
  .dog-float{right:4vw;top:max(5%,58px);width:min(104vw,640px);transform:none}
  .hero-bg img{object-position:66% 30%}
  .hero-vector{background:linear-gradient(0deg,rgba(0,1,14,1) 0%,rgba(0,1,14,.85) 38%,rgba(0,1,14,0) 70%)}
  .hero-copy{width:100%;max-width:100%;padding-top:56vw}
  .hero-rings i{left:62%;top:30%}
  .lore-grid,.traj-wrap{grid-template-columns:1fr}
  .traj-sticky{position:relative;top:0}
  .traj-art{aspect-ratio:1/1}
  .traj-art img{object-position:50% 0%}
  .cf-v{display:none}
  .gate-grid{grid-template-columns:1fr 1fr}
  .scroll-cue{display:none}
  .launchpad{align-items:flex-end;min-height:520px}
  .lp-art{object-position:74% 20%}
  .launchpad::before{background:linear-gradient(0deg,rgba(0,1,14,.95) 0%,rgba(0,1,14,.75) 42%,rgba(0,1,14,0) 75%)}
}
@media (max-width:560px){
  .header .soc{height:38px;padding:0 10px}
  .brand span{display:none}
  .cta-row{flex-direction:column;align-items:stretch}
  .btn-thrust{width:100%}
  .ca-capsule{width:100%}
  .ca-tag{padding:0 12px}
  .ca-btn{padding:0 14px}
  .ca-btn em{display:none}
  .stages{grid-template-columns:1fr}
  .stage:nth-child(n){margin-top:0}
  .stage{min-height:0}
  .gate-grid{grid-template-columns:1fr}
  .gate{min-height:84px}
  .thesis{padding-left:74px}
  .foot-soc{width:100%}
  .foot-soc .soc-lg{flex:1;justify-content:center;padding:0 10px}
  .foot-soc .soc-lg span{font-size:11px}
  .traj-list{padding-left:34px}
  .traj-list .sec-head{margin-left:-34px}
  .phase::before{left:-31px}
  .traj-line{left:6px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none;filter:none}
}