/* ============================================================
   drin — home page styles
   ============================================================ */

/* custom cursor glow (no dot) */
.cursor-glow {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 540px; height: 540px; margin: -270px 0 0 -270px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(233,240,247,0.075) 0%, rgba(233,240,247,0.03) 28%, transparent 62%);
  opacity: 0; transition: opacity 0.6s var(--ease-out);
  mix-blend-mode: screen; will-change: transform;
}
body.cursor-ready .cursor-glow { opacity: 1; }
@media (hover: none) { .cursor-glow { display: none; } }

/* ---------- NAV ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  transition: padding var(--dur-3) var(--ease-out), background var(--dur-3), border-color var(--dur-3), backdrop-filter var(--dur-3);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  padding: 12px var(--gutter);
  background: rgba(8,9,11,0.6);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; letter-spacing: -0.02em; }
.brand .mark {
  width: 22px; height: 22px; position: relative; display: inline-block;
}
.brand .mark::before, .brand .mark::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0.35));
  border-radius: 2px;
}
.brand .mark::before { left: 3px; transform: skewX(0deg); }
.brand .mark::after  { right: 3px; }
.nav-links { display: flex; gap: 34px; align-items: center; }
.nav-links a { font-size: 0.9rem; color: var(--text-mid); transition: color var(--dur-1); position: relative; white-space: nowrap; }
.nav-links a:hover { color: var(--text-hi); }
.nav-cta-group { display: flex; align-items: center; gap: 18px; }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ---------- BUTTONS ---------- */
.btn {
  --bg: var(--text-hi); --fg: #0a0c0e;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-ui); font-weight: 500; font-size: 0.9rem;
  padding: 11px 20px; border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--bg); color: var(--fg); cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), background var(--dur-2), border-color var(--dur-2);
  will-change: transform; white-space: nowrap;
}
.btn:hover { box-shadow: 0 0 0 4px rgba(244,246,247,0.08), 0 10px 30px rgba(0,0,0,0.4); }
.btn .arr { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .arr { transform: translateX(3px); }
.btn-ghost {
  --bg: transparent; --fg: var(--text-hi);
  border-color: var(--glass-border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--glass-edge); background: var(--glass-fill); box-shadow: none; }
.btn-sm { padding: 8px 15px; font-size: 0.84rem; }
.link-quiet { font-size: 0.9rem; color: var(--text-mid); transition: color var(--dur-1); }
.link-quiet:hover { color: var(--text-hi); }

/* ---------- HERO / GATE (video) ---------- */
.hero { position: relative; height: 100svh; min-height: 660px; background: transparent; z-index: 1; pointer-events: none; }
.hero-content {
  position: fixed; top: 0; left: 0; z-index: 5; height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 48%; padding-inline: var(--gutter);
  pointer-events: auto; will-change: transform, opacity;
}
@media (max-width: 860px) { .hero-content { max-width: 92%; } }
.hero-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.hero-eyebrow .ln { width: 40px; height: 1px; background: rgba(255,255,255,0.4); }
.hero-eyebrow span { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255,255,255,0.82); }
.hero h1 {
  font-size: clamp(2.2rem, 4.0vw, 4.8rem); font-weight: 600; letter-spacing: -0.03em;
  max-width: 16ch; color: #fff; text-shadow: 0 2px 40px rgba(0,0,0,0.35);
}
.hero h1 .glow { color: #fff; }
.hero-sub { margin-top: 28px; max-width: 46ch; font-size: var(--t-lead); color: rgba(255,255,255,0.78); line-height: 1.5; }
.hero-actions { margin-top: 40px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero-symbol {
  position: fixed; left: 50%; bottom: 38px; transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.scroll-line { width: 1px; height: 46px; background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent); position: relative; overflow: hidden; }
.scroll-line::after { content: ''; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: rgba(255,255,255,0.9); animation: scrollPulse 2.4s var(--ease-in-out) infinite; }
@keyframes scrollPulse { 0% { transform: translateY(0); } 100% { transform: translateY(300%); } }

/* hero word reveal — visible by default, animation is an enhancement (.anim) */
.reveal-mask { display: inline-block; vertical-align: top; }
.reveal-mask > span { display: inline-block; vertical-align: top; }
/* shared transition */
.hero.anim .reveal-mask > span {
  transition: transform 1.05s var(--ease-out), opacity 0.85s var(--ease-out), filter 0.9s var(--ease-out);
}
/* line 1 — flies in from left */
.hero.anim .reveal-mask:nth-child(1) > span { transform: translateX(-180px); opacity: 0; filter: blur(6px); }
/* line 2 — flies in from right */
.hero.anim .reveal-mask:nth-child(3) > span { transform: translateX(180px);  opacity: 0; filter: blur(6px); }
/* line 3 — flies in from left, slightly less travel */
.hero.anim .reveal-mask:nth-child(5) > span { transform: translateX(-140px); opacity: 0; filter: blur(5px); }
/* all land — nth-child specificity beats the start-state rules */
.hero.anim.in .reveal-mask:nth-child(1) > span { transform: translateX(0); opacity: 1; filter: blur(0); }
.hero.anim.in .reveal-mask:nth-child(3) > span { transform: translateX(0); opacity: 1; filter: blur(0); transition-delay: 0.12s; }
.hero.anim.in .reveal-mask:nth-child(5) > span { transform: translateX(0); opacity: 1; filter: blur(0); transition-delay: 0.24s; }
.hero.anim .fade-up { opacity: 0; transform: translateY(20px); }
.hero.anim.in .fade-up { opacity: 1; transform: none; transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.hero.anim.in .d1 { transition-delay: 0.3s; }
.hero.anim.in .d2 { transition-delay: 0.42s; }
.hero.anim.in .d3 { transition-delay: 0.54s; }

/* ---------- SECTION SCAFFOLD ---------- */
.section { position: relative; padding: clamp(90px,12vh,160px) 0; }
.section-void { background: var(--base); }
.section-base { background: var(--base); }
.kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.kicker .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--light-cool); box-shadow: 0 0 10px var(--glow-white); }
.kicker span { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-lo); }
.sec-head { max-width: 60ch; }
.sec-head h2 { font-size: var(--t-h2); color: var(--text-hi); }
.sec-head p { margin-top: 18px; font-size: var(--t-lead); color: var(--text-mid); max-width: 52ch; }

/* scroll reveal primitive (only hides when JS is present, so no-JS shows everything) */
.js .r { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); will-change: opacity, transform; }
.js .r.in { opacity: 1; transform: none; }
.r.d1 { transition-delay: 0.08s; } .r.d2 { transition-delay: 0.16s; } .r.d3 { transition-delay: 0.24s; } .r.d4 { transition-delay: 0.32s; }

/* ---------- STATEMENT ---------- */
.statement { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem,4.4vw,3.6rem); line-height: 1.12; letter-spacing: -0.025em; max-width: 20ch; }
.statement .muted { color: var(--text-dim); }
.statement .word { display: inline-block; }

/* ---------- GLASS PANEL (shared) ---------- */
.glass {
  position: relative; border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--glass-fill-2), var(--glass-fill));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: var(--shadow-3), inset 0 1px 0 var(--glass-edge);
}
.glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,0.07), transparent 60%);
  opacity: 0; transition: opacity var(--dur-2);
}
.glass:hover::before { opacity: 1; }

/* ---------- LIVE FEED DASHBOARD ---------- */
.feed-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px,5vw,72px); align-items: center; }
@media (max-width: 940px) { .feed-wrap { grid-template-columns: 1fr; } }
.feed-panel { padding: 0; overflow: hidden; }
.feed-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.feed-top .lhs { display: flex; align-items: center; gap: 10px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #e9f0f7; box-shadow: 0 0 0 0 rgba(233,240,247,0.5); animation: livePulse 2.2s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(233,240,247,0.45);} 70% { box-shadow: 0 0 0 9px rgba(233,240,247,0);} 100% { box-shadow: 0 0 0 0 rgba(233,240,247,0);} }
.feed-top .label { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mid); }
.feed-top .count { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-lo); }
.feed-list { position: relative; height: 392px; overflow: hidden; padding: 12px; }
.feed-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: var(--r-md); margin-bottom: 10px;
  background: rgba(255,255,255,0.02); border: 1px solid var(--line);
  opacity: 1; animation: feedIn 0.7s var(--ease-out);
}
@keyframes feedIn { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
.feed-item .ico { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line-strong); display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-mid); }
.feed-item .body .t { font-size: 0.92rem; color: var(--text-hi); font-weight: 500; line-height: 1.35; }
.feed-item .body .m { margin-top: 3px; font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.04em; color: var(--text-lo); text-transform: uppercase; }
.score { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 500; color: var(--text-hi); text-align: right; }
.score .pct { font-size: 0.66rem; color: var(--text-lo); display: block; letter-spacing: 0.1em; }
.feed-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(180deg, transparent, var(--surface-1)); pointer-events: none; }

.feed-copy .stat-row { display: flex; gap: 36px; margin-top: 34px; }
.feed-copy .stat .n { font-family: var(--font-display); font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 600; color: var(--text-hi); letter-spacing: -0.02em; }
.feed-copy .stat .l { font-size: var(--t-sm); color: var(--text-lo); margin-top: 4px; }

/* ---------- FEATURE GLASS CARDS (tilt) ---------- */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
@media (max-width: 940px) { .cards-grid { grid-template-columns: 1fr; } }
.tilt { perspective: 1100px; }
.tcard {
  position: relative; padding: 30px; border-radius: var(--r-xl); min-height: 290px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--glass-edge);
  transform-style: preserve-3d; transition: transform 0.3s var(--ease-out), box-shadow 0.4s;
  will-change: transform; display: flex; flex-direction: column;
  overflow: hidden;
}
.tcard:hover { box-shadow: var(--shadow-3), inset 0 1px 0 var(--glass-edge); }
.tcard .sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.10), transparent 55%); opacity: 0; transition: opacity 0.3s; }
.tcard:hover .sheen { opacity: 1; }
.tcard .glyph { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(255,255,255,0.03); display: grid; place-items: center; transform: translateZ(40px); }
.tcard .glyph svg { width: 22px; height: 22px; stroke: var(--text-hi); }
.tcard h3 { margin-top: 22px; font-size: var(--t-h3); color: var(--text-hi); transform: translateZ(28px); }
.tcard p { margin-top: 12px; font-size: 0.95rem; color: var(--text-mid); line-height: 1.55; transform: translateZ(18px); }
.tcard .num { margin-top: auto; font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.2em; color: var(--text-dim); transform: translateZ(14px); }

/* ---------- BIG DASHBOARD SHOWCASE ---------- */
.dash { padding: clamp(22px,3vw,40px); }
.dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 16px; }
@media (max-width: 860px) { .dash-grid { grid-template-columns: 1fr; } }
.tile { border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(255,255,255,0.02); padding: 22px; }
.tile.span2 { grid-column: 1 / 2; }
.tile .th { display: flex; justify-content: space-between; align-items: baseline; }
.tile .th .h { font-size: 0.9rem; color: var(--text-mid); font-weight: 500; }
.tile .th .v { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-lo); }
.bigval { font-family: var(--font-display); font-size: clamp(2rem,3.2vw,2.8rem); font-weight: 600; color: var(--text-hi); margin-top: 14px; letter-spacing: -0.02em; }
.bigval small { font-size: 0.9rem; color: var(--text-lo); font-family: var(--font-ui); font-weight: 400; margin-left: 8px; }
/* sparkline / bars */
.bars { display: flex; align-items: flex-end; gap: 5px; height: 90px; margin-top: 18px; }
.bars i { flex: 1; background: linear-gradient(180deg, rgba(233,240,247,0.55), rgba(233,240,247,0.08)); border-radius: 3px 3px 0 0; transform-origin: bottom; transform: scaleY(0.05); transition: transform 1.1s var(--ease-out); }
.tile.in .bars i { transform: scaleY(var(--h, 0.5)); }
.spark { height: 64px; margin-top: 16px; }
.spark path.area { fill: url(#sparkfill); opacity: 0.5; }
.spark path.ln { fill: none; stroke: #e9f0f7; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.8s var(--ease-out); }
.tile.in .spark path.ln { stroke-dashoffset: 0; }
.radar-tile { display: flex; flex-direction: column; }
.gauge { margin: 14px auto 0; position: relative; width: 150px; height: 150px; }
.gauge svg { transform: rotate(-90deg); }
.gauge .track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 8; }
.gauge .val { fill: none; stroke: #e9f0f7; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 408; stroke-dashoffset: 408; transition: stroke-dashoffset 1.6s var(--ease-out); filter: drop-shadow(0 0 6px rgba(233,240,247,0.4)); }
.tile.in .gauge .val { stroke-dashoffset: var(--off, 120); }
.gauge .center { position: absolute; inset: 0; display: grid; place-items: center; flex-direction: column; }
.gauge .center b { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; color: var(--text-hi); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.06em; padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--text-mid); background: rgba(255,255,255,0.02); }

/* ---------- CTA / GATE ECHO ---------- */
.cta { position: relative; text-align: center; overflow: hidden; }
.cta-gate { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(760px, 90vw); height: 460px; pointer-events: none; opacity: 0.5; }
.cta-gate::before, .cta-gate::after { content: ''; position: absolute; bottom: 0; top: 14%; width: 38%; border-radius: 6px; background: linear-gradient(180deg, rgba(233,240,247,0.10), rgba(233,240,247,0.01)); border: 1px solid rgba(255,255,255,0.07); border-bottom: none; }
.cta-gate::before { left: 6%; clip-path: polygon(0 8%,70% 0,100% 4%,100% 100%,0 100%); }
.cta-gate::after { right: 6%; clip-path: polygon(0 4%,30% 0,100% 8%,100% 100%,0 100%); }
.cta-slit { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); width: 2px; height: 70%; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.85), rgba(255,255,255,0.2)); box-shadow: 0 0 40px 8px rgba(233,240,247,0.25); animation: slitGlow 5s ease-in-out infinite; }
@keyframes slitGlow { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
.cta-inner { position: relative; z-index: 3; }
.cta h2 { font-size: clamp(2.4rem,6vw,4.6rem); letter-spacing: -0.03em; color: var(--text-hi); }
.cta p { margin: 22px auto 0; max-width: 44ch; color: var(--text-mid); font-size: var(--t-lead); }
.cta .hero-actions { justify-content: center; margin-top: 40px; }

/* ---------- FOOTER ---------- */
.footer { border-top: 1px solid var(--line); padding: 64px 0 40px; background: var(--void); }
.foot-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-grid .col h5 { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-lo); margin: 0 0 16px; font-weight: 400; }
.foot-grid .col a { display: block; font-size: 0.9rem; color: var(--text-mid); margin-bottom: 10px; transition: color var(--dur-1); }
.foot-grid .col a:hover { color: var(--text-hi); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 12px; }
.foot-bottom .mono { font-size: var(--t-xs); color: var(--text-dim); }

/* ============================================================
   SCROLL JOURNEY
   ============================================================ */
.warp { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
.section, .footer, .scene { position: relative; z-index: 1; }

.scene { height: 190vh; }
.scene-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.beat { position: absolute; inset: 0; display: flex; align-items: center; will-change: transform, opacity; padding-inline: var(--gutter); }
.beat-inner { width: 100%; max-width: 520px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }

/* ---------- database stack (beat 0) ---------- */
.db-stack { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.db-row { display: grid; grid-template-columns: 10px 1fr 90px 80px; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-mid); }
.db-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(233,240,247,0.45); flex-shrink: 0; justify-self: center; }
.db-dot.pulse { animation: dbPulse 2.4s ease-in-out infinite; }
@keyframes dbPulse { 0%,100%{opacity:0.45;} 50%{opacity:1;box-shadow:0 0 6px rgba(233,240,247,0.7);} }
.db-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.db-bar span { display: block; height: 100%; background: linear-gradient(90deg, rgba(233,240,247,0.3), rgba(233,240,247,0.6)); border-radius: 2px; }
.db-count { font-size: 0.72rem; color: var(--text-hi); text-align: right; white-space: nowrap; }

/* ---------- scanner card (beat 1) ---------- */
.scanner-card { width: 100%; overflow: hidden; }
.scanner-header { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.scanner-status { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--text-hi); }
.scanner-refresh { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); }
.scanner-rows { display: flex; flex-direction: column; }
.scan-item { display: grid; grid-template-columns: 34px 1fr 38px 40px; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 0.86rem; transition: background 0.2s; }
.scan-item:last-child { border-bottom: none; }
.scan-item.is-new { background: rgba(233,240,247,0.03); }
.scan-item.dim { opacity: 0.45; }
.scan-type { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-lo); background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 5px; padding: 2px 5px; text-align: center; }
.scan-text { color: var(--text-hi); font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan-badge { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--text-hi); background: rgba(233,240,247,0.1); border: 1px solid rgba(233,240,247,0.2); border-radius: 3px; padding: 1px 5px; text-align: center; min-height: 18px; }
.scan-match { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500; color: var(--text-hi); text-align: right; }
.scan-match.low { color: var(--text-dim); }

/* ---------- match breakdown (beat 2) ---------- */
.match-breakdown { width: 100%; padding: 20px; }
.mb-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.mb-title { font-size: 0.94rem; color: var(--text-hi); font-weight: 500; line-height: 1.35; }
.mb-sub { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-lo); margin-top: 4px; }
.mb-score { font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; color: var(--text-hi); letter-spacing: -0.03em; line-height: 1; flex-shrink: 0; }
.mb-criteria { display: flex; flex-direction: column; gap: 9px; }
.mb-bar-row { display: grid; grid-template-columns: 1fr 120px 38px; gap: 10px; align-items: center; font-size: 0.82rem; color: var(--text-mid); }
.prog-track { height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; }
.prog-fill { height: 100%; background: linear-gradient(90deg, rgba(233,240,247,0.4), rgba(233,240,247,0.75)); border-radius: 2px; }
.mb-pct { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-hi); text-align: right; }
.mb-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-mid); }

/* ---------- filter demo (beat 3) ---------- */
.filter-demo { display: grid; grid-template-columns: 1fr 48px 1fr; gap: 10px; align-items: center; width: 100%; }
.fd-before, .fd-after { background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; }
.fd-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; }
.fd-noise { display: flex; flex-direction: column; gap: 5px; }
.ns { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; }
.fd-count { font-family: var(--font-mono); font-size: 0.70rem; color: var(--text-dim); margin-top: 10px; }
.fd-count.bright { color: var(--text-hi); }
.fd-arrow { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fd-arrow-line { width: 1px; height: 32px; background: linear-gradient(180deg, transparent, rgba(233,240,247,0.4), transparent); }
.fd-matches { display: flex; flex-direction: column; gap: 6px; }
.fdm-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: rgba(233,240,247,0.04); border: 1px solid rgba(233,240,247,0.1); border-radius: var(--r-sm); }
.fdm-score { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--text-hi); min-width: 24px; }
.fdm-text { font-size: 0.78rem; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* text positioned on the side opposite the planet, pulled toward centre */
.beat[data-mesh-side="right"] { justify-content: flex-start; padding-left: clamp(40px, 6vw, 100px); padding-right: var(--gutter); }
.beat[data-mesh-side="left"]  { justify-content: flex-end;   padding-left: var(--gutter); padding-right: clamp(40px, 6vw, 100px); }
.beat-eyebrow { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-lo); }
.beat-lead { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; line-height: 1.08; font-size: clamp(2rem, 5.5vw, 4.4rem); color: var(--text-hi); max-width: 18ch; }
.beat-lead .muted { color: var(--text-dim); }

/* a single signal card drifting through the world */
.beat-card {
  position: relative; width: min(470px, 86vw);
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  padding: 20px 22px; border-radius: var(--r-lg); text-align: left;
  background: linear-gradient(180deg, var(--glass-fill-2), var(--glass-fill));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-3), inset 0 1px 0 var(--glass-edge);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.beat-card::before { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(360px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,0.08), transparent 60%); opacity:0; transition: opacity .3s; }
.beat-card:hover::before { opacity: 1; }
.beat-card .ic { width: 42px; height: 42px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line-strong); display:grid; place-items:center; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-mid); }
.beat-card .t { font-size: 1rem; color: var(--text-hi); font-weight: 500; line-height: 1.3; }
.beat-card .m { margin-top: 4px; font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-lo); }
.beat-card .sc { font-family: var(--font-mono); font-size: 1.15rem; color: var(--text-hi); text-align: right; }
.beat-card .sc span { display:block; font-size: 0.6rem; color: var(--text-lo); letter-spacing: 0.12em; }

/* stat chips (trio) */
.beat-chips { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-start; }
.chip {
  min-width: 184px; padding: 24px 28px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-2), inset 0 1px 0 var(--glass-edge);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.chip .n { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem,3vw,2.4rem); color: var(--text-hi); letter-spacing: -0.02em; }
.chip .l { margin-top: 6px; font-size: var(--t-sm); color: var(--text-lo); }
@media (max-width: 560px){ .beat-chips { flex-direction: column; } .chip { min-width: 0; } }

/* ============================================================
   STEPS SECTION — 3-act clean flow
   ============================================================ */
.steps-section { padding: clamp(80px,12vh,140px) 0; position: relative; z-index: 1; }
.steps-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.steps-heading {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3.6rem); letter-spacing: -0.03em;
  color: var(--text-hi); line-height: 1.06;
  max-width: 16ch; margin-bottom: clamp(56px, 8vh, 100px);
}

/* step row */
.step-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px);
  align-items: center; margin-bottom: clamp(20px, 4vh, 40px);
}
.step-row-flip .step-lhs { order: 1; }
.step-row-flip .step-rhs { order: -1; }

/* connector between steps */
.step-connector {
  display: flex; align-items: center; gap: 20px;
  margin: clamp(12px, 2.5vh, 28px) auto; width: 60%; max-width: 480px;
  padding: 10px 0;
}
.sc-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(233,240,247,0.15), transparent); }
.sc-arrow-label .mono {
  font-size: 0.66rem; letter-spacing: 0.22em; color: var(--text-dim);
  white-space: nowrap;
}

/* text side */
.step-num-badge {
  font-family: var(--font-mono); font-size: 0.70rem; letter-spacing: 0.22em;
  color: var(--text-dim); margin-bottom: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  display: inline-block; padding: 4px 10px; border-radius: 4px;
}
.step-eye {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-lo);
  margin-bottom: 12px;
}
.step-head {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.45rem, 2.4vw, 2.1rem); letter-spacing: -0.02em;
  color: var(--text-hi); line-height: 1.12; margin-bottom: 14px;
}
.step-desc { font-size: var(--t-lead); color: var(--text-mid); line-height: 1.58; max-width: 38ch; margin-bottom: 22px; }
.step-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.ss-item { display: flex; flex-direction: column; gap: 3px; }
.ss-n { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-hi); }
.ss-l { font-size: 0.76rem; color: var(--text-lo); }

/* criteria rows */
.step-criteria { display: flex; flex-direction: column; }
.sc-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.86rem; color: var(--text-mid);
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sc-row:last-child { border-bottom: none; }
.sc-row span:last-child { font-family: var(--font-mono); color: var(--text-hi); }

/* visual cards */
.step-card { padding: 22px 24px; pointer-events: none; }
.sc-header {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-hi); padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px;
}
.sc-badge {
  margin-left: auto; font-size: 0.64rem; color: var(--text-lo);
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  border-radius: 4px; padding: 2px 8px; letter-spacing: 0.1em; text-transform: none;
}
.sc-title { font-size: 0.80rem; letter-spacing: 0.14em; }

/* source list (step 1) */
.sc-src-list { display: flex; flex-direction: column; gap: 0; }
.sc-src {
  display: grid; grid-template-columns: 8px 1fr 80px 56px; gap: 0 12px;
  align-items: center; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sc-src:last-child { border-bottom: none; }
.sc-src-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(233,240,247,0.5); animation: dbPulse 2.4s ease-in-out infinite; justify-self: center; }
.sc-src-name { font-size: 0.84rem; color: var(--text-hi); }
.sc-src-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.sc-src-bar span { display: block; height: 100%; background: linear-gradient(90deg, rgba(233,240,247,0.28), rgba(233,240,247,0.58)); }
.sc-src-n { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-mid); text-align: right; }
.sc-foot {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); text-align: center; letter-spacing: 0.08em;
}

/* table (step 2) */
.sc-table-head {
  display: grid; grid-template-columns: 2fr 0.7fr 0.45fr 0.6fr; gap: 0 8px;
  font-family: var(--font-mono); font-size: 0.60rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 4px;
}
.sc-table-rows { display: flex; flex-direction: column; }
.sc-tr {
  display: grid; grid-template-columns: 2fr 0.7fr 0.45fr 0.6fr; gap: 0 8px;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 0.80rem; color: var(--text-mid);
  animation: scTrIn 0.35s both;
}
.sc-tr:nth-child(1){animation-delay:0.05s} .sc-tr:nth-child(2){animation-delay:0.12s}
.sc-tr:nth-child(3){animation-delay:0.19s} .sc-tr:nth-child(4){animation-delay:0.26s}
.sc-tr:nth-child(5){animation-delay:0.33s} .sc-tr:nth-child(6){animation-delay:0.40s}
@keyframes scTrIn { from { opacity:0; transform: translateX(8px); } to { opacity:1; transform:none; } }
.sc-tr.sc-tr-dim { opacity: 0.38; }
.sc-tr span:first-child { color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-tr span:not(:first-child) { font-family: var(--font-mono); font-size: 0.70rem; }

/* match cards (step 3) */
.step-matches { display: flex; flex-direction: column; gap: 10px; }
.sm-card {
  display: grid; grid-template-columns: 48px 1fr 28px; gap: 0 14px;
  align-items: center; padding: 14px 18px; pointer-events: none;
}
.sm-score {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid rgba(233,240,247,0.3);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text-hi);
  flex-shrink: 0;
}
.sm-title { font-size: 0.88rem; font-weight: 500; color: var(--text-hi); margin-bottom: 4px; }
.sm-meta { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-lo); margin-bottom: 7px; }
.sm-bars { display: flex; flex-direction: column; gap: 3px; }
.sm-bars div { height: 2px; background: linear-gradient(90deg, rgba(233,240,247,0.28), rgba(233,240,247,0.58)); border-radius: 2px; }
.sm-arrow { font-size: 1rem; color: var(--text-dim); justify-self: center; }

/* slide-in animations */
.js .step-slide-left  { opacity: 0; transform: translateX(-48px); transition: opacity 0.68s var(--ease-out), transform 0.68s var(--ease-out); }
.js .step-slide-right { opacity: 0; transform: translateX(48px);  transition: opacity 0.68s var(--ease-out), transform 0.68s var(--ease-out); }
.js .step-slide-up    { opacity: 0; transform: translateY(18px);  transition: opacity 0.52s var(--ease-out), transform 0.52s var(--ease-out); }
.js .step-slide-left.in, .js .step-slide-right.in, .js .step-slide-up.in { opacity: 1; transform: none; }
.step-row:nth-child(4) .step-slide-left  { transition-delay: 0.10s; }
.step-row:nth-child(4) .step-slide-right { transition-delay: 0.10s; }
.step-row:nth-child(6) .step-slide-left  { transition-delay: 0.10s; }
.step-row:nth-child(6) .step-slide-right { transition-delay: 0.10s; }

@media (max-width: 860px) {
  .step-row, .step-row-flip { grid-template-columns: 1fr; }
  .step-row-flip .step-lhs, .step-row-flip .step-rhs { order: unset; }
  .steps-heading { font-size: 1.85rem; }
}

/* ============================================================
   REASONS SCATTER — floating fact pills + wandering CTA
   ============================================================ */
.reasons-host {
  height: 200vh; position: relative; z-index: 1;
}
.reasons-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  background: var(--base);
}

/* mesh canvas sits as bg */
.reasons-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

.reasons-field {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}

/* individual floating pill */
.reason-pill {
  position: absolute;
  padding: 9px 18px; border-radius: var(--r-pill);
  background: rgba(233,240,247,0.05);
  border: 1px solid rgba(233,240,247,0.12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  pointer-events: none; white-space: nowrap;
  opacity: 0; transform: translate(-50%, -50%) scale(0.8) translateY(14px);
  transition: opacity 0.70s var(--ease-out), transform 0.70s var(--ease-out);
}
.reason-pill.reason-visible {
  opacity: 1; transform: translate(-50%, -50%);
}
/* stat pills: number on top, label below */
.reason-pill .rp-num {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  color: var(--text-hi); letter-spacing: -0.02em; display: block; line-height: 1.15;
}
.reason-pill .rp-sub {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-lo); display: block; margin-top: 1px;
}
/* text-only pill */
.reason-pill .rp-text {
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.10em;
  color: rgba(233,240,247,0.55);
}

/* wandering Free Trial button */
.btn-free-trial {
  position: absolute; z-index: 10;
  /* Anchored at centre; JS moves it via transform offset — immune to sticky coords */
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-weight: 500; font-size: 1.1rem;
  padding: 16px 38px; border-radius: var(--r-pill);
  border: 1px solid rgba(233,240,247,0.30);
  background: rgba(233,240,247,0.08); color: var(--text-hi);
  cursor: pointer; white-space: nowrap;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 0 0 0 rgba(233,240,247,0),
              0 8px 40px rgba(0,0,0,0.35),
              inset 0 1px 0 rgba(233,240,247,0.14);
  transition: background var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2);
  will-change: transform;
  opacity: 0; /* fades in via JS */
}
.btn-free-trial:hover {
  background: rgba(233,240,247,0.14); border-color: rgba(233,240,247,0.50);
  box-shadow: 0 0 0 6px rgba(233,240,247,0.07), 0 14px 50px rgba(0,0,0,0.40), inset 0 1px 0 rgba(233,240,247,0.20);
}
.btn-free-trial .arr { transition: transform var(--dur-2) var(--ease-out); }
.btn-free-trial:hover .arr { transform: translateX(4px); }

/* pulsing halo behind the button — stays centred, breathes via CSS animation */
.btn-ft-halo {
  position: absolute; border-radius: 50%;
  left: 50%; top: 50%;
  background: radial-gradient(circle, rgba(233,240,247,0.12) 0%, transparent 68%);
  pointer-events: none; z-index: 9;
  width: 260px; height: 260px;
  animation: haloBreath 4s var(--ease-in-out) infinite;
  will-change: transform;
}
@keyframes haloBreath {
  0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: 0.55; }
  50%       { transform: translate(-50%,-50%) scale(1.18); opacity: 0.85; }
}

/* center constraint ring — visual boundary for the Free Trial button */
.center-ring {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 2;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(233,240,247,0.09);
  box-shadow: 0 0 50px rgba(233,240,247,0.04), inset 0 0 50px rgba(233,240,247,0.025);
  opacity: 0; transition: opacity 1.6s var(--ease-out);
}
.center-ring.visible { opacity: 1; }

/* question / italic narrative pill */
.reason-pill.type-q {
  background: transparent;
  border-color: rgba(233,240,247,0.06);
}
.reason-pill.type-q .rp-text {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  color: rgba(233,240,247,0.38);
}

/* badge — slightly brighter wide pill */
.reason-pill.type-badge {
  background: rgba(233,240,247,0.07);
  border-color: rgba(233,240,247,0.16);
}
.reason-pill.type-badge .rp-text {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: rgba(233,240,247,0.72);
}

/* reduced-motion: show static */
body:not(.motion) .reasons-host { height: auto; }
body:not(.motion) .reasons-stage { position: static; height: auto; min-height: 50vh;
  display: flex; align-items: center; justify-content: center; }
body:not(.motion) .reasons-field { display: none; }
body:not(.motion) .btn-free-trial {
  position: static; transform: none; opacity: 1;
}

/* gate-slide-host no longer used but kept for no-motion fallback reference */
.gate-slide-host { display: none; }

body:not(.motion) .pipeline-host { height: auto; }
body:not(.motion) .pipeline-sticky { position: static; height: auto; display: block; padding: clamp(60px,8vh,110px) var(--gutter); }
body:not(.motion) .pp-text { position: static; transform: none; width: 100%; max-width: 580px; margin: 0 auto; }
body:not(.motion) .pp-panel { position: static; transform: none; opacity: 1 !important; margin-bottom: 48px; }

/* reduced-motion / no-JS fallbacks */
body:not(.motion) .warp { display: none; }
body:not(.motion) .scene { height: auto; }
body:not(.motion) .scene-stage { position: static; height: auto; display: block; padding: clamp(60px,9vh,120px) 0; }
body:not(.motion) .beat { position: relative; inset: auto; opacity: 1 !important; transform: none !important; visibility: visible !important; padding-block: clamp(36px,6vh,80px); }
body:not(.motion) .pipe-step { opacity: 1; transform: none; }
body:not(.motion) .pipe-arrow { opacity: 1; }
body:not(.motion) .gate-slide-host { display: none; }

/* ---------- tilt card slide-in reveal (overridden below) ---------- */
.js .tilt { opacity: 0; transform: translateX(50px); transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); }
.js .tilt.in { opacity: 1; transform: none; }
.js .cards-grid .tilt:nth-child(2) { transition-delay: 0.12s; }
.js .cards-grid .tilt:nth-child(3) { transition-delay: 0.24s; }

/* ============================================================
   PREMIUM PRESENTATION — all sections below hero + journey
   ============================================================ */

/* ---- Step slides: blur + scale travel ---- */
.js .step-slide-left {
  opacity: 0;
  transform: translateX(-88px) scale(0.94);
  filter: blur(5px);
  transition: opacity 0.82s var(--ease-out), transform 0.94s var(--ease-out), filter 0.66s;
}
.js .step-slide-right {
  opacity: 0;
  transform: translateX(88px) scale(0.94);
  filter: blur(5px);
  transition: opacity 0.82s var(--ease-out), transform 0.94s var(--ease-out), filter 0.66s;
}
.js .step-slide-left.in,
.js .step-slide-right.in { opacity: 1; transform: none; filter: none; }

.js .step-slide-up {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.56s var(--ease-out), transform 0.62s var(--ease-out);
}
.js .step-slide-up.in { opacity: 1; transform: none; }

/* Step cards: extra perspective tilt that resolves when parent gets .in */
.js .step-card {
  transform: perspective(680px) rotateX(8deg) scale(0.965);
  filter: blur(2px);
  transition: transform 1.0s var(--ease-out) 0.14s, filter 0.72s 0.14s;
}
.js .step-slide-left.in .step-card,
.js .step-slide-right.in .step-card { transform: none; filter: none; }

/* ---- Connector lines draw in from left ---- */
.step-connector .sc-line {
  flex: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.58s var(--ease-out) 0.10s;
}
.step-connector.in .sc-line { transform: scaleX(1); }
/* right-hand line draws slightly after left */
.step-connector.in .sc-line:last-child { transition-delay: 0.30s; }
.step-connector .sc-arrow-label {
  transform: scale(0.5); opacity: 0;
  transition: transform 0.46s var(--ease-out) 0.24s, opacity 0.38s 0.24s;
}
.step-connector.in .sc-arrow-label { transform: none; opacity: 1; }

/* ---- Tilt cards: 3D deal from right ---- */
.js .tilt {
  opacity: 0;
  transform: perspective(1000px) rotateY(22deg) translateX(56px) scale(0.88);
  transition: opacity 0.78s var(--ease-out), transform 0.92s var(--ease-out);
}
.js .tilt.in { opacity: 1; transform: none; }
.js .cards-grid .tilt:nth-child(1) { transition-delay: 0.00s; }
.js .cards-grid .tilt:nth-child(2) { transition-delay: 0.18s; }
.js .cards-grid .tilt:nth-child(3) { transition-delay: 0.36s; }

/* ---- Feed panel: activation slide from left ---- */
.js .feed-panel.r {
  opacity: 0;
  transform: translateX(-56px) scale(0.97);
  filter: blur(3px);
  transition: opacity 0.85s var(--ease-out), transform 0.95s var(--ease-out), filter 0.68s;
}
.js .feed-panel.r.in { opacity: 1; transform: none; filter: none; }

/* Scan line injected by JS */
.feed-scan {
  position: absolute; left: 16px; right: 16px; height: 1px; top: 54px;
  z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(233,240,247,0.6), transparent);
  box-shadow: 0 0 8px rgba(233,240,247,0.3);
  opacity: 0;
}
@keyframes feedScan {
  0%   { transform: translateY(0)    scaleX(0.15); opacity: 0;   }
  10%  { transform: translateY(0)    scaleX(1);    opacity: 1;   }
  88%  {                                           opacity: 1;   }
  100% { transform: translateY(380px) scaleX(0.5); opacity: 0;   }
}
.js .feed-panel.r.in .feed-scan { animation: feedScan 1.9s var(--ease-out) 0.40s 1 both; }

/* ---- Feed copy: slide from right (asymmetric pair) ---- */
.js .feed-copy.r {
  opacity: 0;
  transform: translateX(56px) scale(0.97);
  filter: blur(3px);
  transition: opacity 0.85s var(--ease-out) 0.14s, transform 0.95s var(--ease-out) 0.14s, filter 0.68s 0.14s;
}
.js .feed-copy.r.in { opacity: 1; transform: none; filter: none; }

/* ---- Stat row: stagger pop ---- */
.js .stat-row .stat {
  opacity: 0;
  transform: translateY(22px) scale(0.86);
  transition: opacity 0.55s var(--ease-out), transform 0.62s var(--ease-out);
}
.js .stat-row.in .stat           { opacity: 1; transform: none; }
.js .stat-row.in .stat:nth-child(1) { transition-delay: 0.00s; }
.js .stat-row.in .stat:nth-child(2) { transition-delay: 0.14s; }
.js .stat-row.in .stat:nth-child(3) { transition-delay: 0.28s; }

/* ---- Steps kicker & heading ---- */
.js .steps-kicker {
  opacity: 0; transform: translateX(-22px);
  transition: opacity 0.44s, transform 0.50s var(--ease-out);
}
.js .steps-kicker.in { opacity: 1; transform: none; }

.js .steps-heading {
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.80s var(--ease-out) 0.08s, transform 0.86s var(--ease-out) 0.08s;
}
.js .steps-heading.in { opacity: 1; transform: none; }

/* ---- Section headings & kickers: blur lift ---- */
.js .sec-head.r {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(3px);
  transition: opacity 0.80s var(--ease-out), transform 0.88s var(--ease-out), filter 0.65s;
}
.js .sec-head.r.in { opacity: 1; transform: none; filter: none; }

.js .kicker.r {
  opacity: 0; transform: translateX(-22px);
  transition: opacity 0.44s, transform 0.50s var(--ease-out);
}
.js .kicker.r.in { opacity: 1; transform: none; }

/* ---- Step progress dots (injected by JS) ---- */
.step-progress {
  position: fixed; left: clamp(14px, 2.8vw, 38px); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 11px;
  z-index: 60; pointer-events: none;
  opacity: 0; transition: opacity 0.5s;
}
.step-progress.visible { opacity: 1; }
.step-progress-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(233,240,247,0.18);
  transition: background 0.35s, transform 0.38s var(--ease-out), box-shadow 0.38s;
}
.step-progress-dot.active {
  background: var(--light-cool);
  transform: scale(1.6);
  box-shadow: 0 0 12px rgba(233,240,247,0.55);
}
@media (max-width: 860px) { .step-progress { display: none; } }


/* ============================================================
   STORY — continuous space-journey beats
   ============================================================ */

.story { height: 360vh; position: relative; z-index: 1; }
.story-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
}

/* ---- Story beats (same flow as journey beats) ---- */
.stb {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: 0 var(--gutter);
  will-change: transform, opacity;
  visibility: hidden; /* JS toggles this */
}
.stb-c {
  flex-direction: column; justify-content: center; text-align: center;
}

/* ---- Beat 0: split layout ---- */
.stb-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
  max-width: var(--maxw); width: 100%; margin: 0 auto;
}
.stb-lhs { display: flex; flex-direction: column; }
.stb-rhs { display: flex; flex-direction: column; gap: 0; }

/* ---- Typography ---- */
.stb-eye {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: 0.30em; text-transform: uppercase; color: var(--text-lo);
  margin-bottom: 20px;
}
/* Beat 0: big counter */
.stb-bignum {
  font-family: var(--font-display);
  font-size: clamp(6rem, 14vw, 11rem);
  font-weight: 700; color: var(--text-hi);
  letter-spacing: -0.04em; line-height: 0.88;
  margin-bottom: 22px;
  text-shadow: 0 0 60px rgba(233,240,247,0.12);
  animation: numGlow 4s ease-in-out infinite;
}
@keyframes numGlow {
  0%,100% { text-shadow: 0 0 40px rgba(233,240,247,0.08); }
  50%      { text-shadow: 0 0 90px rgba(233,240,247,0.22), 0 0 160px rgba(233,240,247,0.06); }
}
/* Beat 1: massive scale number */
.stb-massive {
  font-family: var(--font-display);
  font-size: clamp(7rem, 20vw, 18rem);
  font-weight: 700; color: var(--text-hi);
  letter-spacing: -0.045em; line-height: 0.84;
  margin-bottom: 26px;
  text-shadow: 0 0 80px rgba(233,240,247,0.10);
}
/* Shared supporting text */
.stb-sub {
  font-size: clamp(1.05rem, 2vw, 1.55rem);
  color: var(--text-mid); line-height: 1.46;
}
.stb-sub-c { text-align: center; max-width: 36ch; margin: 0 auto; }

/* Beat 2: process chain */
.stb-chain {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 14px 20px;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 5rem);
  font-weight: 600; color: var(--text-hi);
  letter-spacing: -0.03em; line-height: 1.06;
  margin-bottom: 28px;
}
.stb-arr { color: var(--text-dim); font-weight: 300; font-size: 0.6em; }

/* Beat 3: roster lines */
.stb-roster {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.8vw, 5.2rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.12;
  margin-top: 20px; display: flex; flex-direction: column; gap: 2px;
}
.stb-roster div:nth-child(1) { color: var(--text-hi); }
.stb-roster div:nth-child(2) { color: var(--text-mid); }
.stb-roster div:nth-child(3) { color: var(--text-lo); }
/* Stagger in when beat enters */
.stb-roster div {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.65s var(--ease-out), transform 0.70s var(--ease-out);
}
.stb.stb-entered .stb-roster div             { opacity: 1; transform: none; }
.stb.stb-entered .stb-roster div:nth-child(2) { transition-delay: 0.12s; }
.stb.stb-entered .stb-roster div:nth-child(3) { transition-delay: 0.24s; }

/* ---- Drifting source names (beat 1 parallax layer) ---- */
.drift-field {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity 0.5s;
}
.drift-field span {
  position: absolute; left: 0;
  font-family: var(--font-mono); font-size: clamp(0.7rem, 1.1vw, 0.95rem);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(233,240,247,0.15); white-space: nowrap;
  will-change: transform;
}
.drift-field span:nth-child(1) { top: 16%; }
.drift-field span:nth-child(2) { top: 30%; }
.drift-field span:nth-child(3) { top: 48%; }
.drift-field span:nth-child(4) { top: 64%; }
.drift-field span:nth-child(5) { top: 78%; }

/* ---- Nav dots ---- */
.story-dots {
  position: absolute; right: clamp(18px, 3vw, 46px); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 11px; z-index: 20;
}
.story-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(233,240,247,0.18);
  transition: background 0.35s, transform 0.38s var(--ease-out), box-shadow 0.38s;
}
.story-dot.active {
  background: var(--light-cool); transform: scale(1.6);
  box-shadow: 0 0 12px rgba(233,240,247,0.55);
}

/* ---- Beat counter (bottom-left) ---- */
.story-counter {
  position: absolute; left: clamp(18px, 3vw, 46px); bottom: clamp(22px, 4vh, 44px);
  font-family: var(--font-mono); font-size: 0.70rem; letter-spacing: 0.18em;
  color: var(--text-dim); display: flex; align-items: center; gap: 4px; z-index: 20;
}
.sc-cur { color: var(--text-lo); }

/* ---- Mobile ---- */
@media (max-width: 860px) {
  .stb-split { grid-template-columns: 1fr; }
  .stb-rhs { display: none; }
  .stb-massive { font-size: clamp(5rem, 22vw, 10rem); }
  .stb-chain { font-size: clamp(1.8rem, 7vw, 3rem); }
  .stb-roster { font-size: clamp(1.9rem, 7.5vw, 3.5rem); }
  .story-dots { display: none; }
  .story-counter { display: none; }
}