/* ============================================================
   CRYO — programmable scarcity on Base
   Cryogenic / frozen-cave aesthetic
   ============================================================ */

:root{
  --bg:          #04070f;
  --bg-2:        #060b18;
  --bg-3:        #081327;
  --ink:         #eaf4ff;
  --ink-soft:    #a9c4de;
  --ink-dim:     #6f89a6;

  --ice:         #7fd4ff;   /* glacial accent */
  --ice-deep:    #3aa0ff;   /* deep blue */
  --ice-pale:    #b8ecff;   /* frost highlight */
  --ice-white:   #e6f7ff;

  --line:        rgba(150,210,255,.14);
  --line-strong: rgba(150,210,255,.30);
  --glass:       rgba(10,20,38,.42);
  --glass-2:     rgba(14,26,48,.55);

  --glow:        rgba(58,160,255,.45);
  --glow-soft:   rgba(127,212,255,.22);

  --display: "Unbounded", sans-serif;
  --tech:    "Chakra Petch", sans-serif;
  --body:    "Sora", sans-serif;

  --maxw: 1160px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  line-height:1.6;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(58,160,255,.35); color:#fff; }

/* subtle radial cold atmosphere behind everything */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(58,160,255,.16), transparent 60%),
    radial-gradient(900px 600px at 85% 110%, rgba(127,212,255,.08), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 55%, var(--bg) 100%);
}

/* ambient particle canvas */
#frost{
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  opacity:.9;
}

/* film grain / frost noise */
.grain{
  position:fixed; inset:0; z-index:2;
  pointer-events:none; opacity:.045; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%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");
}

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:3; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:16px clamp(18px,4vw,44px);
  transition:background .4s var(--ease), border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(4,7,15,.62);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ color:var(--ice); filter:drop-shadow(0 0 8px var(--glow-soft)); display:grid; place-items:center; }
.brand-word{
  font-family:var(--display); font-weight:800;
  letter-spacing:.28em; font-size:1.02rem;
  padding-left:.12em;
  background:linear-gradient(180deg,#fff,var(--ice-pale));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav-links{ display:flex; gap:28px; }
.nav-links a{
  font-family:var(--tech); font-size:.82rem; letter-spacing:.06em;
  color:var(--ink-soft); text-transform:uppercase; position:relative;
  transition:color .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:var(--ice); transition:width .3s var(--ease); box-shadow:0 0 8px var(--ice);
}
.nav-links a:hover{ color:var(--ice-pale); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:12px; }

.chip{
  font-family:var(--tech); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; padding:6px 11px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-dim);
}
.chip-soon{ background:rgba(10,20,38,.4); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  font-family:var(--tech); font-weight:600; letter-spacing:.04em;
  font-size:.92rem; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:12px; border:1px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), box-shadow .3s, background .3s, border-color .3s;
  position:relative;
}
.btn-sm{ padding:9px 16px; font-size:.78rem; border-radius:9px; }
.btn-primary{
  color:#03101f;
  background:linear-gradient(180deg,var(--ice-pale),var(--ice-deep));
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 12px 40px -12px var(--glow);
}
.btn-primary:not(:disabled):hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,255,255,.2) inset, 0 18px 50px -12px var(--glow); }
.btn-primary:disabled{ cursor:not-allowed; opacity:.9; filter:saturate(.85); }
.btn-soon{
  font-size:.62rem; letter-spacing:.12em; padding:3px 8px; border-radius:6px;
  background:rgba(3,16,31,.35); color:#03101f; border:1px solid rgba(3,16,31,.25);
}
.btn-ghost{
  color:var(--ink); background:rgba(12,24,44,.4);
  border:1px solid var(--line-strong); backdrop-filter:blur(6px);
}
.btn-ghost:hover{ border-color:var(--ice); color:var(--ice-pale); transform:translateY(-2px); box-shadow:0 10px 30px -14px var(--glow); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 20px 80px; overflow:hidden; z-index:3;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  animation:heroDrift 40s ease-in-out infinite alternate;
}
@keyframes heroDrift{ from{ transform:scale(1.06) translateY(0); } to{ transform:scale(1.14) translateY(-1.5%); } }
.hero-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 55% at 50% 46%, transparent 0%, rgba(4,7,15,.28) 55%, rgba(4,7,15,.78) 100%),
    linear-gradient(180deg, rgba(4,7,15,.72) 0%, rgba(4,7,15,.28) 30%, rgba(4,7,15,.5) 70%, var(--bg) 100%);
}
.hero-vignette{
  position:absolute; inset:0;
  box-shadow:inset 0 0 220px 60px rgba(4,7,15,.9);
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(4,7,15,.7) 100%);
}
.hero-inner{ position:relative; z-index:5; max-width:900px; width:100%; }

.badge{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--tech); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ice-pale);
  padding:8px 16px; border-radius:999px;
  border:1px solid var(--line-strong);
  background:rgba(6,14,28,.5); backdrop-filter:blur(10px);
  box-shadow:0 0 30px -8px var(--glow-soft);
}
.badge-dot{ width:7px; height:7px; border-radius:50%; background:var(--ice); box-shadow:0 0 10px var(--ice); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.5; transform:scale(.8);} 50%{ opacity:1; transform:scale(1.15);} }

.wordmark{
  font-family:var(--display); font-weight:800;
  font-size:clamp(4.5rem, 20vw, 14rem);
  line-height:.9; margin:.24em 0 .12em;
  letter-spacing:.02em;
  background:linear-gradient(180deg, #ffffff 0%, var(--ice-pale) 42%, var(--ice-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 46px rgba(127,212,255,.35));
  text-shadow:0 0 80px rgba(58,160,255,.2);
}
.tagline{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem, 4vw, 2.6rem);
  letter-spacing:.01em; margin:0 0 .5em;
  color:var(--ice-white);
}
.subline{
  font-size:clamp(1rem, 2vw, 1.22rem); color:var(--ink-soft);
  max-width:620px; margin:0 auto .9em; font-weight:300;
}
.hl{ color:var(--ice-pale); font-weight:500; }
.freeze-line{
  font-family:var(--tech); font-weight:500;
  font-size:clamp(1.05rem,2.4vw,1.5rem);
  letter-spacing:.02em; color:var(--ink); margin:0 0 2em;
}
.freeze-em{
  color:var(--ice); position:relative;
  text-shadow:0 0 24px var(--glow);
}

.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:44px; }

.temp-readout{
  display:inline-flex; align-items:center; gap:22px;
  padding:14px 22px; border-radius:16px;
  border:1px solid var(--line); background:rgba(6,13,26,.55);
  backdrop-filter:blur(14px); box-shadow:0 20px 60px -30px var(--glow);
}
.temp-glyph{ color:var(--ice); filter:drop-shadow(0 0 10px var(--glow-soft)); animation:spin 26s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.temp-body{ display:flex; flex-direction:column; text-align:left; gap:2px; }
.temp-label{ font-family:var(--tech); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); }
.temp-value{ font-family:var(--display); font-weight:600; font-size:1.5rem; color:var(--ice-white); font-variant-numeric:tabular-nums; }
.temp-unit{ font-size:.9rem; color:var(--ice); margin-left:2px; }
.temp-epoch{ display:flex; flex-direction:column; text-align:left; gap:2px; padding-left:22px; border-left:1px solid var(--line); }
.temp-eno{ font-family:var(--display); font-weight:600; font-size:1.5rem; color:var(--ice-pale); font-variant-numeric:tabular-nums; }

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:1px solid var(--line-strong); border-radius:16px;
  display:grid; place-items:start center; padding-top:8px; z-index:6;
}
.scroll-cue span{ width:4px; height:8px; border-radius:2px; background:var(--ice); box-shadow:0 0 8px var(--ice); animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ 0%{opacity:0; transform:translateY(0);} 30%{opacity:1;} 80%{opacity:0; transform:translateY(14px);} 100%{opacity:0;} }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  position:relative; z-index:3; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(8,19,39,.6), rgba(4,7,15,.6));
  padding:16px 0;
}
.marquee-track{
  display:flex; align-items:center; gap:26px; white-space:nowrap;
  width:max-content; animation:marq 32s linear infinite;
}
.marquee-track span{
  font-family:var(--display); font-weight:600; font-size:1.05rem;
  letter-spacing:.14em; color:var(--ink-soft);
}
.marquee-track .dot{ color:var(--ice); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ============================================================
   SECTIONS  (shared)
   ============================================================ */
.section{ position:relative; z-index:3; padding:clamp(80px,12vw,150px) 0; }
.sec-head{ max-width:760px; margin-bottom:56px; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--tech); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ice); margin-bottom:22px;
}
.eyebrow.center{ justify-content:center; }
.eyebrow-no{
  font-size:.72rem; color:var(--ink-dim); padding:3px 8px; border-radius:6px;
  border:1px solid var(--line); background:rgba(10,20,38,.4);
}
.sec-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.9rem, 5vw, 3.5rem); line-height:1.06;
  letter-spacing:.005em; margin:0; color:var(--ice-white);
}
.sec-title.center{ text-align:center; }
.ice-text{
  background:linear-gradient(180deg,var(--ice-pale),var(--ice-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 20px rgba(58,160,255,.25));
}
.sec-sub{ font-size:clamp(1rem,1.8vw,1.16rem); color:var(--ink-soft); margin:22px auto 0; max-width:680px; }
.sec-head.center .sec-sub{ margin-left:auto; margin-right:auto; }
.body{ font-size:1.06rem; color:var(--ink-soft); margin:0 0 18px; }
.body strong{ color:var(--ink); font-weight:500; }
.lede{ font-size:clamp(1.05rem,1.9vw,1.24rem); color:var(--ink-soft); margin:0 0 20px; }
.lede strong{ color:var(--ice-white); font-weight:500; }
.lede em{ color:var(--ice-pale); font-style:italic; }
.cold{ color:var(--ice); }

/* glass card base */
.glass{
  background:linear-gradient(160deg, var(--glass-2), var(--glass));
  border:1px solid var(--line);
  border-radius:22px;
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(180,225,255,.08);
  position:relative;
}
.glass::after{ /* frost sheen on top edge */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(160deg, rgba(180,236,255,.06), transparent 40%);
}

/* ---- THESIS ---- */
.thesis-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px 48px; align-items:start; }
.thesis-stats{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; }
.mini-stat{
  padding:24px; border-radius:16px; border:1px solid var(--line);
  background:rgba(8,17,33,.5); backdrop-filter:blur(8px);
  transition:border-color .3s, transform .3s;
}
.mini-stat:hover{ border-color:var(--line-strong); transform:translateY(-4px); }
.mini-num{ display:block; font-family:var(--display); font-weight:600; font-size:1.5rem; color:var(--ice-pale); margin-bottom:8px; }
.mini-lab{ font-size:.9rem; color:var(--ink-dim); }

/* ---- TWO-COL ---- */
.two-col{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,70px); align-items:center; }
.two-col.reverse .col-text{ order:2; }
.two-col.reverse .col-visual{ order:1; }
.col-text .sec-title{ margin-bottom:22px; }
.feature-list{ list-style:none; padding:0; margin:24px 0 0; display:grid; gap:12px; }
.feature-list li{ display:flex; align-items:center; gap:12px; font-size:1rem; color:var(--ink-soft); }
.tick{ color:var(--ice); filter:drop-shadow(0 0 6px var(--glow-soft)); font-size:.9rem; }

/* glacier card */
.glacier-card{ padding:28px; }
.gc-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.gc-tag{ font-family:var(--tech); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); }
.gc-live{ font-family:var(--tech); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ice); display:inline-flex; align-items:center; gap:7px; }
.live-dot{ width:6px; height:6px; border-radius:50%; background:var(--ice); box-shadow:0 0 8px var(--ice); animation:pulse 2s infinite; }
.gc-big{ display:flex; flex-direction:column; gap:2px; margin-bottom:18px; }
.gc-num{ font-family:var(--display); font-weight:700; font-size:2.4rem; color:var(--ice-white); font-variant-numeric:tabular-nums; line-height:1; }
.gc-unit{ font-family:var(--tech); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); }
.gc-bar{ height:10px; border-radius:6px; background:rgba(8,17,33,.8); border:1px solid var(--line); overflow:hidden; margin-bottom:20px; }
.gc-fill{ height:100%; width:var(--fill); border-radius:6px; background:linear-gradient(90deg,var(--ice-deep),var(--ice-pale)); box-shadow:0 0 16px var(--glow); transform-origin:left; animation:fillIn 1.4s var(--ease) both; }
@keyframes fillIn{ from{ transform:scaleX(0); } }
.gc-rows{ display:grid; gap:12px; }
.gc-row{ display:flex; justify-content:space-between; align-items:center; font-size:.92rem; color:var(--ink-soft); padding-bottom:12px; border-bottom:1px solid var(--line); }
.gc-row:last-child{ border-bottom:0; padding-bottom:0; }
.gc-row b{ color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; }

/* ============================================================
   TEMPERATURE PANEL
   ============================================================ */
.temp-panel{ display:grid; grid-template-columns:.85fr 1.15fr; gap:0; overflow:hidden; }
.tp-left{ padding:clamp(28px,4vw,44px); border-right:1px solid var(--line); }
.tp-readout{ margin-bottom:30px; }
.tp-lab{ font-family:var(--tech); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); display:block; margin-bottom:8px; }
.tp-val{ font-family:var(--display); font-weight:700; font-size:clamp(2.4rem,6vw,3.6rem); color:var(--ice-white); line-height:1; font-variant-numeric:tabular-nums; display:block; text-shadow:0 0 40px rgba(58,160,255,.3); }
.tp-unit{ font-size:.42em; color:var(--ice); margin-left:4px; }
.tp-note{ font-size:.82rem; color:var(--ink-dim); margin-top:10px; display:block; }
.tp-meta{ display:grid; gap:14px; }
.tp-m{ display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--ink-soft); }
.tp-m:last-child{ border-bottom:0; padding-bottom:0; }
.tp-m b{ font-family:var(--display); font-weight:600; color:var(--ice-pale); font-variant-numeric:tabular-nums; }
.tp-right{ padding:clamp(24px,3vw,36px); display:flex; flex-direction:column; justify-content:center; }
.curve{ width:100%; height:240px; }
.curve-line{ stroke-dasharray:1200; stroke-dashoffset:1200; }
.curve.in .curve-line{ animation:draw 2s var(--ease) .2s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.curve-dot{ fill:var(--ice-pale); filter:drop-shadow(0 0 8px var(--ice)); opacity:0; }
.curve.in .curve-dot{ animation:fadeDot .5s ease 1.8s forwards, dotPulse 2.6s ease 2.3s infinite; }
@keyframes fadeDot{ to{ opacity:1; } }
@keyframes dotPulse{ 0%,100%{ r:4.5; } 50%{ r:6.5; } }
.curve-axis{ display:flex; justify-content:space-between; font-family:var(--tech); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); margin-top:10px; }

/* ============================================================
   DEPTH & MELTWATER
   ============================================================ */
.depth-stack{ display:grid; gap:12px; }
.depth-tier{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px 16px;
  padding:18px 22px; border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(90deg, rgba(8,17,33,calc(.4 + var(--t)*.14)), rgba(10,22,44,calc(.5 + var(--t)*.12)));
  margin-left:calc(var(--t) * 22px);
  transition:transform .3s, border-color .3s;
}
.depth-tier:hover{ transform:translateX(4px); border-color:var(--line-strong); }
.dt-name{ font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--ice-white); }
.dt-meta{ grid-column:1; font-size:.82rem; color:var(--ink-dim); }
.dt-w{ grid-row:1 / span 2; font-family:var(--display); font-weight:700; font-size:1.15rem; color:var(--ice-pale); }
.permafrost-tier{
  border-color:rgba(127,212,255,.4);
  background:linear-gradient(90deg, rgba(20,44,80,.65), rgba(30,70,120,.5));
  box-shadow:0 0 40px -18px var(--glow);
}
.permafrost-tier .dt-w{ color:var(--ice); }
.meltwater-note{
  margin-top:8px; padding:14px 18px; border-radius:12px;
  border:1px dashed var(--line-strong); color:var(--ink-soft); font-size:.86rem;
  display:flex; align-items:center; gap:10px; background:rgba(8,17,33,.35);
}
.meltwater-note span{ color:var(--ice); font-size:1.1rem; }

/* ============================================================
   PERMAFROST
   ============================================================ */
.permafrost .wrap{ display:flex; justify-content:center; }
.perma-card{ max-width:780px; text-align:center; padding:clamp(40px,6vw,64px); overflow:hidden; }
.perma-glow{
  position:absolute; top:-40%; left:50%; transform:translateX(-50%);
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(58,160,255,.22), transparent 60%);
  pointer-events:none; animation:breathe 8s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ opacity:.6; transform:translateX(-50%) scale(1); } 50%{ opacity:1; transform:translateX(-50%) scale(1.12); } }
.perma-card .eyebrow{ position:relative; }
.perma-body{ position:relative; font-size:1.1rem; color:var(--ink-soft); max-width:600px; margin:22px auto 30px; }
.perma-body strong{ color:var(--ice-white); font-weight:500; }
.perma-badges{ position:relative; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.pbadge{
  font-family:var(--tech); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  padding:10px 18px; border-radius:999px;
  border:1px solid var(--line-strong); color:var(--ice-pale);
  background:rgba(10,22,44,.5); box-shadow:0 0 24px -10px var(--glow);
}

/* ============================================================
   ICE RATIO
   ============================================================ */
.ratio-hero{
  display:flex; align-items:center; justify-content:center; gap:clamp(30px,6vw,80px);
  flex-wrap:wrap;
}
.ratio-ring{ width:min(260px,60vw); aspect-ratio:1; position:relative; filter:drop-shadow(0 0 40px rgba(58,160,255,.25)); }
.ratio-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-bg{ fill:none; stroke:rgba(150,210,255,.1); stroke-width:10; }
.ring-fg{
  fill:none; stroke:url(#curveStroke); stroke-width:10; stroke-linecap:round;
  stroke:var(--ice);
  stroke-dasharray:603; stroke-dashoffset:603;
  transition:stroke-dashoffset 2.2s var(--ease);
  filter:drop-shadow(0 0 8px var(--ice));
}
.ratio-num{ text-align:left; }
.ratio-value{ font-family:var(--display); font-weight:800; font-size:clamp(3.2rem,10vw,6rem); line-height:.9; color:var(--ice-white); font-variant-numeric:tabular-nums; text-shadow:0 0 50px rgba(58,160,255,.35); display:block; }
.ratio-pct{ font-size:.4em; color:var(--ice); margin-left:4px; }
.ratio-lab{ font-family:var(--tech); font-size:.9rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ice-pale); display:block; margin-top:14px; }
.ratio-sub{ font-size:.85rem; color:var(--ink-dim); display:block; margin-top:6px; }

/* ============================================================
   B20
   ============================================================ */
.b20{ display:grid; grid-template-columns:1.2fr .8fr; gap:0; overflow:hidden; }
.b20-left{ padding:clamp(30px,4vw,50px); border-right:1px solid var(--line); }
.b20-left .sec-title{ margin-bottom:22px; }
.b20-note{ margin-top:24px; padding:14px 18px; border-radius:12px; background:rgba(8,17,33,.5); border:1px solid var(--line); font-size:.92rem; color:var(--ink-soft); display:flex; align-items:center; gap:11px; }
.b20-note strong{ color:var(--ice-pale); }
.dotpulse{ width:8px; height:8px; border-radius:50%; background:var(--ice); box-shadow:0 0 10px var(--ice); animation:pulse 2s infinite; flex:0 0 auto; }
.b20-right{ padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; justify-content:center; }
.spec{ display:flex; justify-content:space-between; align-items:center; padding:15px 0; border-bottom:1px solid var(--line); }
.spec:last-child{ border-bottom:0; }
.spec-k{ font-family:var(--tech); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }
.spec-v{ font-family:var(--display); font-weight:600; font-size:1rem; color:var(--ice-white); }
.spec-v.cold{ color:var(--ice); }

/* final CTA */
.final-cta{ text-align:center; margin-top:clamp(60px,10vw,110px); }
.final-cta h3{ font-family:var(--display); font-weight:600; font-size:clamp(1.6rem,4vw,2.6rem); color:var(--ice-white); margin:0 0 12px; }
.final-cta p{ color:var(--ink-soft); margin:0 0 28px; font-size:1.05rem; }
.final-actions{ display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ position:relative; z-index:3; border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(6,11,24,.6), var(--bg)); padding:56px 0 40px; }
.footer-in{ display:grid; gap:20px; text-align:center; }
.footer-brand{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.footer-brand .brand-word{ font-size:1.4rem; letter-spacing:.34em; }
.footer-tag{ font-family:var(--tech); font-size:.82rem; letter-spacing:.06em; color:var(--ink-soft); }
.disclaimer{ font-size:.82rem; color:var(--ink-dim); max-width:640px; margin:0 auto; line-height:1.7; }
.footer-copy{ font-family:var(--tech); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
/* hero staggered on load */
.hero .reveal[data-d]{ transition-delay:calc(var(--d, 0) * 120ms); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav-links{ display:none; }
  .thesis-grid{ grid-template-columns:1fr; }
  .thesis-stats{ grid-template-columns:1fr; }
  .two-col, .two-col.reverse{ grid-template-columns:1fr; }
  .two-col.reverse .col-text{ order:1; }
  .two-col.reverse .col-visual{ order:2; }
  .temp-panel{ grid-template-columns:1fr; }
  .tp-left{ border-right:0; border-bottom:1px solid var(--line); }
  .b20{ grid-template-columns:1fr; }
  .b20-left{ border-right:0; border-bottom:1px solid var(--line); }
  .ratio-num{ text-align:center; }
}
@media (max-width:560px){
  .wrap{ padding:0 18px; }
  .hero{ padding:110px 16px 70px; }
  .temp-readout{ flex-direction:column; gap:14px; align-items:flex-start; width:100%; max-width:340px; }
  .temp-epoch{ padding-left:0; border-left:0; border-top:1px solid var(--line); padding-top:12px; width:100%; }
  .nav-cta .btn-ghost{ display:none; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ justify-content:center; }
  .depth-tier{ margin-left:calc(var(--t) * 12px); }
}

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