/* =========================================================
   $SUNK — styles
   Palette pulled from the source photo:
   deep royal blue #0148b0, sky blue #2b8df1 / #59b3fc,
   alert red #f53b22, ink/navy #0b1020, cream skin #edc4a4, white #f9f9fb
   ========================================================= */

:root{
  --navy-deep:#04070f;
  --navy:#0a1226;
  --navy-2:#0d1b3d;
  --blue-main:#0148b0;
  --blue-bright:#2b8df1;
  --blue-light:#59b3fc;
  --red:#f53b22;
  --red-dark:#b8210f;
  --red-glow:rgba(245,59,34,.45);
  --cream:#edc4a4;
  --white:#f9f9fb;
  --ink:#12141c;
  --line: rgba(89,179,252,.18);

  --font-display:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;
  --font-body:'Work Sans', -apple-system, Segoe UI, Roboto, sans-serif;

  --header-h: 76px;
  --wrap: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--navy-deep);
  color:var(--white);
  font-family:var(--font-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; position:relative; z-index:2; }
::selection{ background:var(--red); color:var(--white); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------- utility ---------------- */
.eyebrow{
  font-family:var(--font-mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue-light);
  font-size:.72rem;
  margin:0 0 10px;
  display:flex; align-items:center; gap:.5em;
}
.eyebrow::before{ content:"◆"; color:var(--red); font-size:.6em; }
.text-red{ color:var(--red); }
.section{ position:relative; padding:120px 0; overflow:hidden; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  line-height:1;
  margin:0 0 14px;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.section-desc{ color:#b9c6e6; font-size:1.05rem; line-height:1.6; max-width:56ch; }

/* ---------------- reveal-on-scroll ---------------- */
.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1);
  will-change:opacity, transform;
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---------------- 3D tilt card ---------------- */
.card-tilt{ transform-style:preserve-3d; transition:transform .25s ease, box-shadow .25s ease; }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy-deep);
  transition:opacity .7s ease, visibility .7s ease;
}
.preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader__bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center 20%;
  filter:saturate(.9) brightness(.55);
  transform:scale(1.08);
  animation:preloaderDrift 6s ease-in-out infinite alternate;
}
@keyframes preloaderDrift{ from{ transform:scale(1.08) translateY(0);} to{ transform:scale(1.14) translateY(-1%);} }
.preloader__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(4,7,15,.35) 0%, rgba(4,7,15,.86) 68%, rgba(4,7,15,.97) 100%),
    linear-gradient(180deg, rgba(1,72,176,.25), rgba(4,7,15,.9));
}
.preloader__ring{ position:absolute; width:min(60vw,420px); height:min(60vw,420px); }
.preloader__sonar{ width:100%; height:100%; }
.sonar-ring{ fill:none; stroke:var(--blue-light); stroke-width:1; opacity:0; transform-origin:100px 100px; }
.sonar-ring.r1{ animation:sonarPulse 2.6s ease-out infinite; }
.sonar-ring.r2{ animation:sonarPulse 2.6s ease-out infinite; animation-delay:.9s; }
.sonar-ring.r3{ animation:sonarPulse 2.6s ease-out infinite; animation-delay:1.8s; }
@keyframes sonarPulse{
  0%{ transform:scale(.3); opacity:0; }
  15%{ opacity:.7; }
  100%{ transform:scale(1.5); opacity:0; }
}
.preloader__content{ position:relative; z-index:2; text-align:center; }
.preloader__wordmark{
  font-family:var(--font-display); font-weight:900; font-size:clamp(2.6rem,9vw,5rem);
  letter-spacing:.02em; color:var(--white);
  text-shadow:0 0 40px var(--red-glow);
  margin-bottom:22px;
}
.preloader__bar{
  width:min(70vw,320px); height:6px; margin:0 auto 14px;
  background:rgba(255,255,255,.12); border-radius:99px; overflow:hidden;
  border:1px solid rgba(89,179,252,.3);
}
.preloader__bar-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--blue-bright), var(--red));
  border-radius:99px; transition:width .2s ease;
}
.preloader__status{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.12em; color:var(--blue-light); text-transform:uppercase; }
.blink{ animation:blink 1.4s step-start infinite; }
@keyframes blink{ 50%{ opacity:.25; } }

/* ============================================================
   DEPTH CRACK OVERLAY
   ============================================================ */
.crack-overlay{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:40; opacity:0;
  transition:opacity .4s ease;
}
.crack-path{ fill:none; stroke:rgba(255,255,255,.5); stroke-width:.35; vector-effect:non-scaling-stroke; }

/* ============================================================
   BUBBLES
   ============================================================ */
.bubble-canvas{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.55; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(4,7,15,0);
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.site-header.is-scrolled{
  background:rgba(6,10,22,.78);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand__ring{ border-radius:50%; filter:drop-shadow(0 0 8px rgba(245,59,34,.5)); }
.brand__word{ font-family:var(--font-display); font-weight:900; font-size:1.5rem; letter-spacing:.02em; }

.nav{ display:flex; align-items:center; gap:30px; }
.nav__link{
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase;
  color:#cfe0ff; position:relative; padding:6px 0;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--red);
  transition:width .25s ease;
}
.nav__link:hover::after{ width:100%; }
.nav__socials{ display:flex; align-items:center; gap:10px; }

.icon-btn{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(89,179,252,.12); border:1px solid var(--line);
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.icon-btn svg{ width:18px; height:18px; fill:var(--white); }
.icon-btn:hover{ transform:translateY(-3px); background:var(--blue-bright); box-shadow:0 8px 22px rgba(43,141,241,.4); }

.nav-toggle{
  display:none; width:40px; height:34px; background:none; border:none;
  flex-direction:column; justify-content:space-between; padding:4px 2px;
}
.nav-toggle span{ display:block; height:2px; width:100%; background:var(--white); border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:99; background:rgba(5,9,20,.98);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transform:translateY(-100%); transition:transform .4s cubic-bezier(.16,.8,.3,1);
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu__link{ font-family:var(--font-display); font-size:2rem; font-weight:800; text-transform:uppercase; }
.mobile-menu__socials{ display:flex; gap:14px; margin-top:10px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font-family:var(--font-mono); font-weight:600; font-size:.88rem; letter-spacing:.03em; text-transform:uppercase;
  padding:15px 26px; border-radius:10px; border:1px solid transparent;
  white-space:nowrap; position:relative; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn__icon{ width:18px; height:18px; fill:currentColor; flex-shrink:0; }
.btn--primary{
  background:linear-gradient(135deg, var(--red), var(--red-dark));
  color:var(--white); box-shadow:0 10px 30px rgba(245,59,34,.35);
}
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(245,59,34,.5); }
.btn--outline{
  background:rgba(89,179,252,.08); color:var(--white); border-color:var(--line);
}
.btn--outline:hover{ background:rgba(89,179,252,.18); transform:translateY(-3px); }
.btn--ghost{ color:var(--blue-light); padding:15px 10px; }
.btn--ghost:hover{ color:var(--white); }
.btn--cta{ background:var(--blue-bright); color:var(--white); padding:11px 20px; box-shadow:0 6px 18px rgba(43,141,241,.4); }
.btn--cta:hover{ transform:translateY(-2px); }
.btn--small{ padding:10px 16px; font-size:.76rem; }

.js-copy-ca{ position:relative; overflow:hidden; max-width:100%; }
.js-copy-ca .ca-text{ max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem; opacity:.85; }
.js-copy-ca .copy-flag{ color:var(--blue-light); }
.js-copy-ca.is-copied{ border-color:var(--red); }
.js-copy-ca.is-copied .copy-flag{ color:var(--red); }

.copy-toast{
  position:fixed; left:50%; bottom:30px; transform:translate(-50%,20px);
  background:var(--red); color:var(--white); font-family:var(--font-mono); font-size:.8rem;
  padding:12px 20px; border-radius:10px; z-index:9998; opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease; box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.copy-toast.is-visible{ opacity:1; transform:translate(-50%,0); }

.scroll-top{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:48px; height:48px; border-radius:50%;
  background:rgba(10,18,38,.8); border:1px solid var(--line); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(10px) scale(.9); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background .3s ease;
}
.scroll-top svg{ width:20px; height:20px; fill:var(--white); }
.scroll-top.is-visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.scroll-top:hover{ background:var(--blue-bright); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh; padding-top:calc(var(--header-h) + 24px);
  display:flex; align-items:center; overflow:hidden;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(1,72,176,.55), transparent 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, #071229 55%, var(--navy-deep) 100%);
}
.hero__ambient{
  position:absolute; inset:-10%; background-size:cover; background-position:center;
  opacity:.55; filter:blur(2px); z-index:0;
}
.hero__grid{
  position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    linear-gradient(rgba(89,179,252,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89,179,252,.09) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 75%);
}
.hero__caustics{
  position:absolute; inset:0; z-index:0;
  background-image:url('../img/tex-caustics.png');
  background-size:480px 480px; opacity:.16; mix-blend-mode:screen;
  animation:causticDrift 22s linear infinite;
}
.hero__caustics--soft{ opacity:.08; }
@keyframes causticDrift{
  0%{ background-position:0 0; }
  100%{ background-position:480px 260px; }
}
.hero__inner{ position:relative; z-index:2; width:100%; }

.hero__ticker-top{
  overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:9px 0; margin-bottom:52px; background:rgba(8,14,30,.4);
}
.ticker-track{
  display:flex; gap:2.2rem; white-space:nowrap; width:max-content;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; color:var(--red);
  animation:tickerScroll 24s linear infinite;
}
.ticker-track span:nth-child(4n+2), .ticker-track span:nth-child(4n+4){ color:var(--blue-light); }
@keyframes tickerScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.hero__stage{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }

.hero__porthole{ position:relative; perspective:1200px; justify-self:center; width:min(92vw,460px); }
.porthole__glow{
  position:absolute; inset:-14%; border-radius:50%;
  background:radial-gradient(circle, rgba(43,141,241,.45), transparent 65%);
  filter:blur(30px); z-index:0; animation:glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse{ 0%,100%{ opacity:.6; transform:scale(1);} 50%{ opacity:1; transform:scale(1.06);} }
.porthole__rim{
  position:relative; z-index:1; aspect-ratio:1/1; border-radius:50%;
  background:
    conic-gradient(from 210deg, #0c1730, #223862 15%, #0c1730 30%, #2c4a80 45%, #0c1730 60%, #223862 75%, #0c1730 90%, #223862 100%);
  padding:5.5%;
  box-shadow:
    0 30px 70px rgba(0,0,0,.6),
    inset 0 0 0 2px rgba(255,255,255,.06);
  transform:rotateX(0deg) rotateY(0deg);
  transition:transform .15s ease-out;
}
.porthole__bolts{ position:absolute; inset:0; }
.porthole__bolts span{
  position:absolute; width:5.5%; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #cddcf5, #7c93bd 45%, #23324f 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.5);
}
.porthole__bolts span:nth-child(1){ top:2%; left:50%; transform:translateX(-50%); }
.porthole__bolts span:nth-child(2){ top:14.6%; left:85.3%; }
.porthole__bolts span:nth-child(3){ top:50%; left:95%; transform:translateY(-50%); }
.porthole__bolts span:nth-child(4){ top:85.3%; left:85.3%; }
.porthole__bolts span:nth-child(5){ top:95%; left:50%; transform:translateX(-50%); }
.porthole__bolts span:nth-child(6){ top:85.3%; left:14.6%; }
.porthole__bolts span:nth-child(7){ top:50%; left:2%; transform:translateY(-50%); }
.porthole__bolts span:nth-child(8){ top:14.6%; left:14.6%; }
.porthole__glass{
  position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden;
  box-shadow:inset 0 0 40px rgba(0,0,0,.75), inset 0 0 0 6px rgba(4,8,18,.9);
  background:var(--navy);
}
.porthole__photo{ width:100%; height:100%; object-fit:cover; object-position:center 18%; transform:scale(1.02); }
.porthole__reflection{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 35%),
    linear-gradient(200deg, rgba(255,255,255,.12), transparent 40%);
}
.sonar-ping{
  position:absolute; inset:0; border-radius:50%; z-index:-1;
  box-shadow:0 0 0 0 rgba(89,179,252,.5);
  animation:pingOut 3.2s ease-out infinite;
}
@keyframes pingOut{
  0%{ box-shadow:0 0 0 0 rgba(89,179,252,.45); }
  100%{ box-shadow:0 0 0 60px rgba(89,179,252,0); }
}

.hero__copy{ position:relative; z-index:2; }
.hero__title{
  font-family:var(--font-display); font-weight:900; letter-spacing:.01em;
  font-size:clamp(3.6rem, 10vw, 7.5rem); line-height:.88; margin:0 0 18px;
  background:linear-gradient(180deg, #fff 0%, #cfe0ff 45%, var(--blue-light) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 10px 40px rgba(1,72,176,.55));
}
.hero__tag{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem,3vw,2rem); text-transform:uppercase; line-height:1.15; margin:0 0 18px; }
.hero__sub{ color:#b9c6e6; font-size:1.02rem; line-height:1.65; max-width:46ch; margin:0 0 34px; }
.hero__cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:14px; }
.hero__cta-row--secondary{ margin-bottom:0; }

.hero__waves{ position:absolute; left:0; right:0; bottom:-2px; z-index:1; line-height:0; opacity:.9; }
.hero__waves svg{ width:100%; height:90px; display:block; }
.hero__waves path{ fill:var(--navy-2); }

/* ============================================================
   MARQUEE STRIP
   ============================================================ */
.marquee-strip{
  background:linear-gradient(90deg, var(--red-dark), var(--red));
  padding:14px 0; overflow:hidden; position:relative; z-index:2;
  border-top:2px solid rgba(255,255,255,.15); border-bottom:2px solid rgba(255,255,255,.15);
}
.marquee-track{
  display:flex; gap:1.4rem; width:max-content; white-space:nowrap;
  font-family:var(--font-display); font-weight:800; font-size:1.15rem; text-transform:uppercase; letter-spacing:.03em;
  animation:marqueeScroll 20s linear infinite;
  color:var(--white);
}
.marquee-track .dot{ color:rgba(255,255,255,.55); font-size:.6rem; align-self:center; }
@keyframes marqueeScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============================================================
   LORE
   ============================================================ */
.lore{ background:var(--navy-2); }
.lore::before{
  content:""; position:absolute; inset:0; opacity:.06; background-image:url('../img/tex-grid.png'); background-size:256px 256px; pointer-events:none;
}
.lore__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-bottom:52px; }
.lore__card{
  background:linear-gradient(180deg, rgba(89,179,252,.08), rgba(89,179,252,.02));
  border:1px solid var(--line); border-radius:16px; padding:28px 22px;
  position:relative; overflow:hidden;
}
.lore__card:hover{ transform:translateY(-6px) rotateX(2deg); box-shadow:0 20px 40px rgba(1,72,176,.35); border-color:rgba(89,179,252,.4); }
.lore__mark{ font-family:var(--font-mono); color:var(--red); font-size:.8rem; letter-spacing:.1em; }
.lore__card h3{ font-family:var(--font-display); font-size:1.4rem; text-transform:uppercase; margin:10px 0 10px; }
.lore__card p{ color:#c3d0ec; font-size:.94rem; line-height:1.6; margin:0; }
.lore__quote{
  text-align:center; max-width:700px; margin:0 auto; padding-top:20px; border-top:1px solid var(--line);
}
.lore__quote p{ font-family:var(--font-display); font-size:clamp(1.3rem,2.6vw,1.8rem); font-weight:700; font-style:italic; margin:0 0 10px; }
.lore__quote span{ font-family:var(--font-mono); font-size:.78rem; color:var(--blue-light); letter-spacing:.05em; }

/* ============================================================
   HOW TO BUY
   ============================================================ */
.buy{ background:var(--navy-deep); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-bottom:50px; }
.step{
  position:relative; border:1px solid var(--line); border-radius:16px; padding:30px 22px 26px;
  background:rgba(10,18,38,.55);
}
.step:hover{ border-color:var(--red); box-shadow:0 18px 40px rgba(245,59,34,.18); transform:translateY(-6px); }
.step__num{ position:absolute; top:16px; right:20px; font-family:var(--font-mono); color:rgba(255,255,255,.25); font-size:1.6rem; font-weight:700; }
.step__icon{ width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,var(--blue-bright),var(--blue-main)); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.step__icon svg{ width:24px; height:24px; fill:var(--white); }
.step h3{ font-family:var(--font-display); font-size:1.25rem; text-transform:uppercase; margin:0 0 10px; }
.step p{ color:#c3d0ec; font-size:.92rem; line-height:1.55; margin:0; }

.buy__ca{ text-align:center; }
.buy__ca-label{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--blue-light); display:block; margin-bottom:14px; }
.buy__ca-box{
  display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
  background:rgba(89,179,252,.08); border:1px solid var(--line); border-radius:14px; padding:16px 22px;
}
.buy__ca-box .ca-text{ font-family:var(--font-mono); font-size:.85rem; max-width:min(60vw,420px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ============================================================
   CHART
   ============================================================ */
.chart-section{ background:linear-gradient(180deg, var(--navy-deep), var(--navy-2)); }
.chart-frame{ max-width:900px; margin:0 auto; }
.chart-frame__bezel{
  background:linear-gradient(160deg,#1a2c50,#0a1226);
  border-radius:22px; padding:16px; box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(89,179,252,.15);
}
.chart-frame__lights{ display:flex; gap:8px; margin-bottom:12px; padding-left:6px; }
.chart-frame__lights span{ width:11px; height:11px; border-radius:50%; background:var(--red); opacity:.7; }
.chart-frame__lights span:nth-child(2){ background:var(--blue-light); }
.chart-frame__lights span:nth-child(3){ background:#5cf29a; }
.chart-frame__screen{
  background:radial-gradient(ellipse at 50% 0%, #0d1c3c, #050a16 80%);
  border-radius:14px; min-height:420px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(89,179,252,.15); overflow:hidden; position:relative;
}
.chart-frame__screen iframe{ width:100%; height:520px; border:0; display:block; }
.chart-placeholder{ text-align:center; padding:50px 20px; color:#7f93bf; max-width:380px; }
.chart-placeholder__icon{ width:52px; height:52px; fill:var(--blue-light); margin:0 auto 18px; opacity:.7; }
.chart-placeholder p{ margin:0 0 8px; font-size:.95rem; line-height:1.5; }
.chart-placeholder__sub{ font-family:var(--font-mono); font-size:.76rem; color:#5c6f96; }
.chart-placeholder__sub code{ color:var(--blue-light); }
.chart-cta{ text-align:center; margin-top:34px; }

/* ============================================================
   ROADMAP / DEPTH TRACK
   ============================================================ */
.roadmap{ background:var(--navy-2); position:relative; }
.roadmap::before{ content:""; position:absolute; inset:0; background-image:url('../img/tex-grain.png'); opacity:.05; pointer-events:none; }
.depth-track{ position:relative; padding-left:64px; }
.depth-track__line{
  position:absolute; left:20px; top:6px; bottom:6px; width:3px;
  background:linear-gradient(180deg, var(--blue-light), var(--blue-main) 40%, var(--navy) 100%);
  border-radius:3px;
}
.depth-track__fill{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(180deg, var(--red), var(--red-dark));
  border-radius:3px; transition:height .1s linear;
}
.depth-track__marker{
  position:absolute; left:50%; top:0%; width:34px; height:34px; transform:translate(-50%,-50%);
  background:var(--red); border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 6px rgba(245,59,34,.2), 0 8px 20px rgba(245,59,34,.5);
  transition:top .1s linear; z-index:3;
}
.depth-track__marker svg{ width:18px; height:18px; fill:var(--white); }
.depth-stage{ position:relative; padding:0 0 64px 26px; display:flex; gap:20px; align-items:flex-start; }
.depth-stage:last-child{ padding-bottom:6px; }
.depth-stage__meter{
  font-family:var(--font-mono); font-weight:700; color:var(--blue-light); font-size:.85rem;
  background:rgba(5,10,22,.7); border:1px solid var(--line); border-radius:8px; padding:6px 10px;
  position:absolute; left:-64px; top:-2px; white-space:nowrap;
}
.depth-stage__body{
  background:rgba(89,179,252,.06); border:1px solid var(--line); border-radius:14px; padding:22px 26px;
  flex:1;
}
.depth-stage__body h3{ font-family:var(--font-display); font-size:1.35rem; text-transform:uppercase; margin:0 0 8px; }
.depth-stage__body p{ color:#c3d0ec; font-size:.95rem; line-height:1.6; margin:0; }
.depth-stage.is-active .depth-stage__body{ border-color:var(--red); box-shadow:0 14px 30px rgba(245,59,34,.15); }

/* ============================================================
   EXITS / FOOTER CTA
   ============================================================ */
.exits{ position:relative; background:var(--navy-deep); }
.hero__ambient--footer{ opacity:.35; }
.exit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.exit-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding:30px 14px; border-radius:16px; border:1px solid var(--line); background:rgba(89,179,252,.06);
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; text-align:center;
}
.exit-btn svg{ width:26px; height:26px; fill:var(--blue-light); }
.exit-btn:hover{ transform:translateY(-6px) rotateX(4deg); border-color:var(--blue-bright); box-shadow:0 16px 34px rgba(43,141,241,.3); }
.exit-btn--red{ background:linear-gradient(160deg, rgba(245,59,34,.18), rgba(245,59,34,.04)); }
.exit-btn--red svg{ fill:var(--red); }
.exit-btn--red:hover{ border-color:var(--red); box-shadow:0 16px 34px rgba(245,59,34,.3); }
.exit-btn--blue svg{ fill:var(--blue-bright); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--navy-deep); border-top:1px solid var(--line); padding:44px 0 34px; }
.footer__inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }
.footer__brand{ justify-content:center; }
.footer__disclaimer{ max-width:640px; color:#6d7fa3; font-size:.78rem; line-height:1.6; }
.footer__copy{ font-family:var(--font-mono); font-size:.75rem; color:#4f6088; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .hero__stage{ grid-template-columns:1fr; text-align:center; }
  .hero__copy{ order:2; }
  .hero__porthole{ order:1; }
  .hero__cta-row{ justify-content:center; }
  .hero__sub{ margin-left:auto; margin-right:auto; }
  .lore__grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .exit-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px){
  .nav{ display:none; }
  .nav-toggle{ display:flex; }
  .depth-track{ padding-left:0; }
  .depth-track__line{ left:14px; }
  .depth-stage{ padding-left:44px; }
  .depth-stage__meter{ left:-2px; top:-30px; position:static; display:inline-block; margin-bottom:8px; }
  .depth-stage{ flex-direction:column; }
  .depth-track__marker{ left:14px; }
}
@media (max-width: 560px){
  .lore__grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .exit-grid{ grid-template-columns:1fr 1fr; }
  .section{ padding:80px 0; }
  .hero{ padding-top:calc(var(--header-h) + 10px); }
}