/* =========================================================
   ChartFlow — liquid glass + liquid metal
   ========================================================= */

:root {
  /* Base palette — deep midnight, harmonizes with most fintech motion gradients */
  --bg-0: #05060c;
  --bg-1: #0a0d18;
  --bg-2: #10142a;

  /* Text */
  --t-0: #eef2fb;
  --t-1: #c9d1e1;
  --t-2: #8a93a8;
  --t-3: #5b6478;

  /* Accents — black + blue palette only. Variable names kept for compatibility;
     all values shifted into the cyan→electric-blue→navy spectrum. */
  --a-teal: #6ee7ff;     /* bright cyan-blue (was teal-green) */
  --a-cyan: #6ee7ff;     /* same — primary "live" accent */
  --a-violet: #5b9dff;   /* electric blue (was violet) */
  --a-magenta: #4f8bff;  /* deeper blue (was magenta) */
  --a-blue: #5b9dff;
  --a-navy: #1e3a8a;
  --a-warn: #fbbf6b;     /* warm-yellow accent for warnings only */
  --a-up:   #6ee7ff;     /* price-up indicator (was green) */
  --a-down: #f87171;     /* price-down indicator (red kept for clarity) */

  /* Liquid metal palette — platinum / chrome / pearl */
  --m-0: #f5f7ff;
  --m-1: #c8d0e2;
  --m-2: #7e8aa3;
  --m-3: #2a3148;

  /* Glass tokens */
  --g-clear-bg: rgba(255, 255, 255, 0.045);
  --g-clear-bd: rgba(255, 255, 255, 0.16);
  --g-frost-bg: rgba(255, 255, 255, 0.07);
  --g-frost-bd: rgba(255, 255, 255, 0.10);
  --g-blur-bg:  rgba(10, 14, 28, 0.42);
  --g-blur-bd:  rgba(255, 255, 255, 0.08);

  /* Geometry */
  --r-xl: 28px;
  --r-l: 22px;
  --r-m: 16px;
  --r-s: 10px;

  /* Cursor aura position (updated by JS) */
  --mx: 50%;
  --my: 30%;

  --max: 1240px;
  --pad: clamp(20px, 4vw, 48px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--t-0);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03', 'tnum', 'calt';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* Display family for headings — tighter, sharper, slightly compressed */
.section__title,
.hero__title,
.card__h,
.brand__name,
.band__num {
  font-family: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03', 'tnum', 'calt';
}

/* Mono for technical accents */
.card__chip,
.kbd,
.chip,
.adapter,
.dock__pane,
.logfile,
.ledger,
.stat__num,
.rule__n,
.stat__lbl {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-feature-settings: 'tnum', 'zero', 'ss01';
}

body {
  min-height: 100vh;
  isolation: isolate;
  position: relative;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(91, 157, 255, 0.12), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(110, 231, 255, 0.10), transparent 60%),
    linear-gradient(180deg, #05060c 0%, #07091a 40%, #06081a 100%);
}

/* --- Loading veil ------------------------------------------------------
   Brief black overlay covering the page on first paint. A tiny cyan dot
   pulses in the centre. After 500ms it fades out over 600ms while the
   hero's stagger animation rises in underneath. Total: ~1.1s, almost
   imperceptible but masks font-load and video-metadata flicker. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-0);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: loader-out 600ms cubic-bezier(0.4, 0, 0.2, 1) 500ms forwards;
  will-change: opacity;
}
.loader__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--a-cyan);
  box-shadow: 0 0 18px rgba(110, 231, 255, 0.65);
  animation: loader-pulse 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes loader-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.55; }
  50%      { transform: scale(1.45); opacity: 1; }
}
@keyframes loader-out {
  0%   { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .loader      { animation-delay: 0ms; animation-duration: 1ms; }
  .loader__dot { animation: none; }
}

/* --- Texture layers ---------------------------------------------------
   Two fixed full-viewport pseudos give the page atmosphere without chrome:
     body::before — engineering dot-grid (subliminal, masked to fade at edges)
     body::after  — soft cyan spotlight at the hero column
   Both sit above the video (z-index 0) and below content (z-index 2). */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: 0 0;
  -webkit-mask: radial-gradient(ellipse 60% 65% at 50% 50%, #000 35%, rgba(0,0,0,0.4) 70%, transparent 92%);
          mask: radial-gradient(ellipse 60% 65% at 50% 50%, #000 35%, rgba(0,0,0,0.4) 70%, transparent 92%);
  opacity: 0.55;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 50% 42%, rgba(110, 231, 255, 0.05), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(91, 157, 255, 0.04), transparent 70%);
  mix-blend-mode: screen;
}

/* Lift content above the texture pseudos */
main { z-index: 2; }
.cursor-aura { z-index: 1; }
.foot--minimal { z-index: 3; }

a { color: inherit; text-decoration: none; }
button { font: inherit; }

::selection { background: rgba(110, 231, 255, 0.28); color: var(--t-0); }

/* =========================================================
   Background video stack
   ========================================================= */

/* The bg-zone bounds the scroll range over which the video stays visible.
   .bg uses position: sticky inside it — sticks at top during the zone, then
   scrolls away naturally. After the zone, page content sits on the dark
   gradient base only. */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #05060c;
  filter: saturate(1.05) contrast(1.02) brightness(0.78);
  opacity: 0;
  transition: opacity 1100ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bg__video--active { opacity: 1; }

/* Soft tint over video — keeps type legible without crushing the video. */
.bg__tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(5, 6, 12, 0.55), transparent 70%),
    linear-gradient(180deg, rgba(5, 6, 12, 0.20) 0%, rgba(5, 6, 12, 0.40) 50%, rgba(5, 6, 12, 0.70) 100%);
}

/* Subtle film grain — slightly more present so the whole composition shares
   one fine surface texture. Cheap (single SVG turbulence, no blend mode). */
.bg__grain {
  position: absolute;
  inset: -10%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size: 200px;
  opacity: 0.07;
}

.bg__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 95% at 50% 100%, transparent 60%, rgba(0,0,0,0.35) 100%),
    radial-gradient(130% 95% at 50% 0%, transparent 70%, rgba(0,0,0,0.20) 100%);
  pointer-events: none;
}

/* =========================================================
   Cursor-tracking ambient highlight (page-wide, low key)
   ========================================================= */

.cursor-aura {
  position: fixed;
  top: 0; left: 0;
  width: 440px;
  height: 440px;
  margin: -220px 0 0 -220px;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(50vw, 30vh, 0);
  background: radial-gradient(
    220px circle at center,
    rgba(110, 231, 255, 0.04),
    rgba(91, 157, 255, 0.02) 40%,
    transparent 70%
  );
}

/* =========================================================
   Layout primitives
   ========================================================= */

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

.section__header {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  text-align: center;
}

.section__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--a-teal);
  margin-bottom: 16px;
  font-weight: 500;
  position: relative;
  padding: 0 14px;
}
.section__eyebrow::before,
.section__eyebrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110, 231, 255, 0.5));
}
.section__eyebrow::before { right: 100%; }
.section__eyebrow::after  { left: 100%; transform: scaleX(-1); }

.section__title {
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0 0 16px 0;
  background: linear-gradient(180deg, #ffffff 0%, #c4cce0 75%, #9aa3b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}

.section__sub {
  color: var(--t-1);
  max-width: 640px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* =========================================================
   Glass system
   ---------------------------------------------------------
   .glass is the base shell. Variants tune blur/tint:
     .glass--clear    — iOS-style, very transparent + edge highlight
     .glass--frosted  — medium blur, slight noise, more opacity
     .glass--blur     — heavy blur, darker, used for bands/calls-to-attention

   All variants share the liquid-metal cursor-following border (::before)
   and the soft inner highlight (::after).
   ========================================================= */

.glass {
  position: relative;
  border-radius: var(--r-l);
  isolation: isolate;
  overflow: hidden;
  contain: paint;
  /* shared inner shadow to anchor the surface */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 -1px 0 rgba(0, 0, 0, 0.30) inset,
    0 30px 60px -30px rgba(0, 0, 0, 0.55),
    0 8px 24px -12px rgba(0, 0, 0, 0.45);
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 320ms ease;
}

/* Single subtle top-edge highlight — keeps the "glass" feel without busyness */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 18%);
  z-index: 1;
}

.glass:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.16); }

/* All three variants now share one calm, consistent surface — folded into a
   single look. Names kept so existing markup still works. */
.glass--clear,
.glass--frosted,
.glass--blur {
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.08);
}

/* The engine band gets a slightly darker fill to anchor the metric strip. */
.band__inner.glass--blur {
  background: linear-gradient(180deg, rgba(8,11,24,0.55), rgba(5,7,18,0.45));
}

/* No-op kept so old data-aura attributes don't error */
[data-aura] { --cx: 50%; --cy: 50%; }

/* =========================================================
   Navigation
   ========================================================= */

.nav {
  position: sticky;
  top: 14px;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0 var(--pad);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: var(--max);
  padding: 10px 14px 10px 18px;
  border-radius: 999px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  position: relative;
  z-index: 3;
}

.brand__name {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 15.5px;
}

.nav__links {
  display: flex;
  gap: 22px;
  font-size: 14px;
  color: var(--t-1);
  position: relative;
  z-index: 3;
}

.nav__links a {
  padding: 6px 2px;
  position: relative;
  transition: color 200ms ease;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--m-0), transparent);
  transform: scaleX(0);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: center;
}

.nav__links a:hover { color: var(--t-0); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta { position: relative; z-index: 3; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--t-1);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.pill-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--t-1);
  letter-spacing: 0.02em;
}

.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--t-2);
  display: inline-block;
}
.dot--live {
  background: #6ee7ff;
  box-shadow: 0 0 0 0 rgba(110, 231, 255, 0.6);
  animation: pulse 2.4s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(110, 231, 255, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(110, 231, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(110, 231, 255, 0); }
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px var(--pad) 80px;
}

.hero__inner {
  width: 100%;
  max-width: var(--max);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}

.hero__eyebrow {
  margin-top: 6px;
}

.hero__title {
  font-size: clamp(42px, 7.4vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  font-weight: 600;
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
  background: linear-gradient(180deg, #ffffff 0%, #d8dfee 60%, #a8b0c5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__title .grad {
  background: linear-gradient(110deg, #cfe2ff 0%, #6ee7ff 25%, #5b9dff 55%, #2563eb 80%, #1e3a8a 100%);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
  text-shadow: 0 0 40px rgba(91, 157, 255, 0.20);
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.hero__sub {
  max-width: 620px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--t-1);
  margin: 0;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2px;
}

/* Liquid-metal button */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  font-size: 14.5px;
  font-weight: 500;
  border-radius: 999px;
  isolation: isolate;
  cursor: pointer;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  --cx: 50%;
  --cy: 50%;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--metal {
  color: #0b0e1c;
  background: linear-gradient(180deg, #ffffff 0%, #e1e6f0 55%, #b8c0d0 100%);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 -1px 0 rgba(0,0,0,0.10) inset,
    0 8px 18px -8px rgba(0,0,0,0.40);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
              background 220ms ease;
}
.btn--metal:hover {
  background: linear-gradient(180deg, #ffffff 0%, #ebeff7 55%, #c5cdde 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.65) inset,
    0 -1px 0 rgba(0,0,0,0.10) inset,
    0 10px 22px -8px rgba(0,0,0,0.45);
}
/* Cleaner metal button — no rotating ring. A single shine band sweeps across
   every ~4.5s, sitting under the text so the type stays crisp. */
.btn--metal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    transparent 38%,
    rgba(255, 255, 255, 0.55) 48%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.55) 52%,
    transparent 62%
  );
  transform: translateX(-120%);
  animation: btn-shine 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform;
}
@keyframes btn-shine {
  0%, 28%   { transform: translateX(-120%); }
  62%, 100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--metal::before { animation: none; opacity: 0; }
}

.btn--ghost {
  color: var(--t-0);
  background: rgba(255,255,255,0.04);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}
.btn--ghost:hover { background: rgba(255,255,255,0.07); }

.btn__inner { position: relative; z-index: 1; }
.btn__arrow {
  position: relative;
  z-index: 1;
  transition: transform 240ms ease;
}
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Hero pillars */
.hero__pillars {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 920px;
}
.pillar {
  padding: 18px 20px;
  border-radius: var(--r-m);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pillar__k {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--a-teal);
  position: relative; z-index: 3;
}
.pillar__v {
  font-size: 14.5px;
  color: var(--t-1);
  line-height: 1.5;
  position: relative; z-index: 3;
}

/* =========================================================
   Coming-soon hero — single-screen, hype-driven
   ========================================================= */

.soon {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px var(--pad);
  z-index: 1;
}

/* Corner ticks and horizon hairline removed — keeping the hero cleaner. */

/* Tiny coordinate labels at the corners — engineering-feel anchors */
.soon__coord {
  position: absolute;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.soon__coord--tl { top: 30px; left: 64px; }
.soon__coord--br { bottom: 30px; right: 64px; }
.soon__coord::before {
  content: "+";
  display: inline-block;
  margin-right: 8px;
  color: var(--a-cyan);
  opacity: 0.55;
  font-weight: 600;
}
.soon__coord--br::before {
  margin-right: 0;
  margin-left: 8px;
  order: 2;
}
.soon__coord--br {
  display: inline-flex;
  align-items: center;
}
@media (max-width: 720px) {
  .soon__coord { display: none; }
}

/* Horizon hairline — a barely-there x-axis behind the hero column.
   Sits at the chip's vertical centre, fades out at viewport edges. */
.soon__horizon {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(110, 231, 255, 0.10) 30%,
    rgba(110, 231, 255, 0.18) 50%,
    rgba(110, 231, 255, 0.10) 70%,
    transparent 100%
  );
  transform: translateY(-180px);
  opacity: 0.7;
}
@media (max-width: 720px) {
  .soon__horizon { display: none; }
}

/* Soft resting glow on the form — present even without focus, so it never
   feels visually inert. Cyan focus halo from before is layered on top. */
.soon__form {
  box-shadow: 0 8px 28px -16px rgba(91, 157, 255, 0.30);
}

.soon__inner {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
/* Vertical rhythm — explicit per-element so the spacing reads composed */
.soon__inner > .soon__chip      { margin-bottom: 24px; }
.soon__inner > .soon__title     { margin-bottom: 18px; }
.soon__inner > .roll            { margin-bottom: 14px; }
.soon__inner > .soon__cats      { margin-bottom: 18px; }
.soon__inner > .soon__sub       { margin-bottom: 28px; }
.soon__inner > .soon__cta       { margin-bottom: 0; }
.soon__inner > .soon__reassure  { margin: 16px 0 26px; }
.soon__inner > .soon__tags      { margin-bottom: 0; }

/* =========================================================
   Access-request modal
   ========================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.modal[hidden] { display: none; }
.modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 12, 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
          backdrop-filter: blur(20px) saturate(1.2);
}

.modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  padding: 44px 36px 32px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
          backdrop-filter: blur(24px) saturate(1.3);
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 20px 60px -20px rgba(0,0,0,0.65),
    0 0 60px -20px rgba(91, 157, 255, 0.20);
  transform: scale(0.95) translateY(12px);
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.is-open .modal__card { transform: scale(1) translateY(0); }

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.04);
  color: var(--t-2);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.modal__close:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--t-0);
  transform: rotate(90deg);
}

.modal__eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--a-cyan);
  margin-bottom: 12px;
}

.modal__title {
  margin: 0 0 12px;
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--t-0);
  text-wrap: balance;
}

.modal__sub {
  margin: 0 0 24px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--t-1);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.modal__contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px 12px 18px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--t-0);
  text-decoration: none;
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  transition: background 220ms ease, transform 220ms ease, border-color 220ms ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 6px 16px -8px rgba(0,0,0,0.4);
}
.modal__contact svg { flex-shrink: 0; }
.modal__contact-arrow {
  color: var(--t-2);
  transition: transform 220ms ease, color 220ms ease;
}
.modal__contact:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.05) 100%);
  border-color: rgba(110, 231, 255, 0.30);
  transform: translateY(-1px);
}
.modal__contact:hover .modal__contact-arrow {
  color: var(--a-cyan);
  transform: translate(2px, -2px);
}

.modal__foot {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--t-3);
  letter-spacing: -0.005em;
}

.soon__inner > * {
  opacity: 0;
  transform: translateY(8px);
  animation: rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.soon__inner > *:nth-child(1) { animation-delay:  60ms; }
.soon__inner > *:nth-child(2) { animation-delay: 140ms; }
.soon__inner > *:nth-child(3) { animation-delay: 240ms; }
.soon__inner > *:nth-child(4) { animation-delay: 360ms; }
.soon__inner > *:nth-child(5) { animation-delay: 480ms; }
.soon__inner > *:nth-child(6) { animation-delay: 600ms; }
@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .soon__inner > * { opacity: 1; transform: none; animation: none; }
}

.soon__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--t-0);
  margin-bottom: 4px;
  opacity: 0.9;
}
.soon__brand svg { display: block; }

/* @property registration enables animating a gradient angle without a JS rAF.
   Falls back gracefully on older browsers — the ring just stays static. */
@property --chip-spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 140deg;
}

.soon__chip {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 13px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 247, 255, 0.92);
  transition: color 320ms ease, transform 320ms ease;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(110, 231, 255, 0.05) 45%,
      rgba(91, 157, 255, 0.06) 70%,
      rgba(0, 0, 0, 0.22) 100%);
  border: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 6px 18px -6px rgba(0, 0, 0, 0.50),
    0 0 28px -8px rgba(91, 157, 255, 0.25);
}

/* Liquid-metal ring — conic gradient with a slowly drifting angle.
   Masked to leave only the 1px ring around the pill. */
.soon__chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--chip-spin),
    rgba(245, 247, 255, 0.95),
    rgba(110, 231, 255, 0.30) 18%,
    rgba(91, 157, 255, 0.65) 36%,
    rgba(245, 247, 255, 0.45) 50%,
    rgba(91, 157, 255, 0.65) 64%,
    rgba(110, 231, 255, 0.30) 82%,
    rgba(245, 247, 255, 0.95)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
  animation: chip-spin 8s linear infinite;
}

/* Specular top highlight — the wet-glass gleam */
.soon__chip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(140% 80% at 50% -10%, rgba(255, 255, 255, 0.22), transparent 55%);
  pointer-events: none;
  z-index: -1;
}

@keyframes chip-spin {
  to { --chip-spin: 500deg; }
}

@media (prefers-reduced-motion: reduce) {
  .soon__chip::before { animation: none; }
}

/* The live dot inside the chip becomes a polished cyan gem — no pulse */
.soon__chip .dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #6ee7ff 45%, #2563eb 100%);
  box-shadow:
    inset 0 0.5px 1px rgba(255, 255, 255, 0.7),
    0 0 8px rgba(110, 231, 255, 0.5);
  animation: none !important;
}
.soon__chip .dot--live::before { display: none; }
.soon__chip:hover { color: #ffffff; transform: translateY(-1px); }

/* Subtle hover on each technical tag — they brighten individually */
.soon__tags span:not(.soon__tags-sep) {
  transition: color 260ms ease;
}
.soon__tags span:not(.soon__tags-sep):hover { color: var(--t-1); }

/* Slight cyan-tinted border on the form's resting state — pulls the form
   into the accent family without a visible glow */
.soon__form { border-color: rgba(110, 231, 255, 0.08); }

/* Title gets a faint top-edge highlight that catches against the dark page */
.soon__title {
  -webkit-text-stroke: 0.4px rgba(255, 255, 255, 0.03);
}

.soon__title {
  margin: 0;
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: clamp(48px, 9vw, 108px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 500;
  text-wrap: balance;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f1f5fb 30%,
    #d8dfee 60%,
    #aab2c5 90%,
    #8a93a8 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-feature-settings: 'cv11', 'ss01', 'ss03', 'calt';
  filter: drop-shadow(0 2px 30px rgba(0, 0, 0, 0.45));
}
.soon__title .grad {
  background: linear-gradient(
    110deg,
    #e2edff 0%,
    #b6e0ff 18%,
    #6ee7ff 36%,
    #5b9dff 58%,
    #3b6dd9 80%,
    #1e3a8a 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: 0 0 90px rgba(91, 157, 255, 0.20);
  font-weight: 500;
}

.soon__sub {
  margin: 14px 0 0;
  font-size: clamp(17px, 1.9vw, 22px);
  line-height: 1.48;
  color: var(--t-1);
  letter-spacing: -0.012em;
  text-wrap: balance;
  max-width: 640px;
}
.soon__sub-pop {
  color: var(--t-0);
  font-weight: 500;
}

/* Vertical roll — cycles through feature words next to a static prefix.
   Single keyframe per word with hold + slide segments. The last keyframe
   slides to a duplicate of the first word so the loop is seamless. */
.roll {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 0;
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--t-1);
}
.roll__pre {
  color: var(--t-1);
  font-weight: 400;
  line-height: 1.2;
  opacity: 0.85;
}

.roll__box {
  position: relative;
  display: inline-block;
  height: 1.2em;
  /* JS sets an explicit width matching the currently-visible word.
     The min-width is just a fallback before JS runs. */
  min-width: 12em;
  text-align: center;
  overflow: hidden;
  transition: width 620ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Per-word crossfade. Each word runs an independent 15s timeline with a
   3s delay step. Fade-in and fade-out overlap with neighbours by 0.6s, so
   consecutive words always crossfade — no blank moment, no snap. */
.roll__word {
  position: absolute;
  inset: 0;
  height: 1.2em;
  line-height: 1.2em;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: -0.018em;
  opacity: 0;
  /* Match the title's blue gradient so the rotator reads as part of the
     same composition. background-clip:text needs color:transparent. */
  background: linear-gradient(
    110deg,
    #e2edff 0%,
    #b6e0ff 22%,
    #6ee7ff 48%,
    #5b9dff 72%,
    #3b6dd9 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* GPU layer + pixel-aligned 6px drift; never sub-pixel. */
  transform: translate3d(0, 6px, 0);
  animation: word-fade 15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  contain: paint;
}
.roll__word:nth-child(1) { animation-delay:  0s; }
.roll__word:nth-child(2) { animation-delay:  3s; }
.roll__word:nth-child(3) { animation-delay:  6s; }
.roll__word:nth-child(4) { animation-delay:  9s; }
.roll__word:nth-child(5) { animation-delay: 12s; }

@keyframes word-fade {
  /* 0–4% (600ms): rise + fade in */
  0%   { opacity: 0; transform: translate3d(0, 6px, 0); }
  4%   { opacity: 1; transform: translate3d(0, 0,    0); }
  /* 4–20% (2.4s): hold visible */
  20%  { opacity: 1; transform: translate3d(0, 0,    0); }
  /* 20–24% (600ms): rise + fade out */
  24%  { opacity: 0; transform: translate3d(0, -6px, 0); }
  /* 24–100% (11.4s): wait offscreen above */
  100% { opacity: 0; transform: translate3d(0, -6px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .roll__words { animation: none; }
}

/* Category line — top-of-fold positioning statement.
   More present than the technical tags strip below, so hierarchy reads:
     chip  →  title  →  CATEGORY  →  prose sub  →  form  →  scope */
.soon__cats {
  margin: 6px 0 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-1);
  position: relative;
  padding: 0 32px;
}
/* Short cyan-fading hairlines that bracket the category line */
.soon__cats::before,
.soon__cats::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110, 231, 255, 0.45), transparent);
}
.soon__cats::before { right: 100%; }
.soon__cats::after { left: 100%; transform: scaleX(-1); }
.soon__cats-sep {
  color: var(--a-cyan);
  opacity: 0.55;
  font-weight: 400;
}

.soon__form {
  margin-top: 28px;
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 480px;
  padding: 6px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  transition: border-color 260ms ease, box-shadow 260ms ease, background 260ms ease;
  position: relative;
  /* Inset top highlight — gives the pill a polished lip */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 28px -16px rgba(91, 157, 255, 0.30);
}
.soon__form:hover {
  border-color: rgba(255,255,255,0.16);
}
.soon__form:focus-within {
  border-color: rgba(110, 231, 255, 0.40);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 4px rgba(110, 231, 255, 0.10),
    0 10px 32px -16px rgba(91, 157, 255, 0.50);
}

/* Small descriptor strip under the form — quiet rhythm to match chip/footer */
.soon__tags {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-3);
}
.soon__tags-sep { color: rgba(255,255,255,0.14); }
.soon__email {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 10px 18px;
  font: inherit;
  font-size: 14.5px;
  color: var(--t-0);
  letter-spacing: -0.005em;
  caret-color: var(--a-cyan);
  transition: color 200ms ease;
}
.soon__email::placeholder {
  color: var(--t-3);
  transition: color 200ms ease;
}
.soon__email:focus { color: var(--t-0); }
.soon__email:focus::placeholder { color: var(--t-2); }

.soon__submit {
  flex: 0 0 auto;
  padding: 10px 18px;
  font-size: 13.5px;
}

.soon__micro {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--t-2);
  letter-spacing: -0.005em;
}

/* Intel grid — tiny stat row that builds FOMO */
.soon__intel {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 620px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.intel {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  text-align: left;
}
.intel--accent {
  background: rgba(91, 157, 255, 0.06);
  border-color: rgba(91, 157, 255, 0.22);
}
.intel__k {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-3);
}
.intel__v {
  font-size: 14.5px;
  color: var(--t-0);
  letter-spacing: -0.005em;
}
.intel--accent .intel__v { color: var(--a-cyan); }
.intel__v--live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.intel__pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--a-cyan);
  position: relative;
}
.intel__pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--a-cyan);
  animation: pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0;   transform: scale(2.2); }
}

/* Live agent activity strip */
.soon__live {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(91, 157, 255, 0.05);
  border: 1px solid rgba(91, 157, 255, 0.18);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--t-1);
  max-width: 100%;
}
.live__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--a-cyan);
  box-shadow: 0 0 10px rgba(110, 231, 255, 0.7);
  animation: pulse 1.6s ease-in-out infinite;
  flex: 0 0 auto;
}
.live__label {
  color: var(--a-cyan);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
}
.live__sep { color: var(--t-3); }
.live__text {
  color: var(--t-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60ch;
}

/* Leaked-string highlight (different from --ok and --redact) */
.leak__str { color: var(--a-cyan); }

/* =========================================================
   Features grid — honest list, clean, generous
   ========================================================= */

.feats {
  margin-top: 120px;
  width: 100%;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.feats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 64px;
}

.feat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}

.feat__h {
  margin: 0;
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--t-0);
  text-wrap: balance;
  position: relative;
  padding-left: 16px;
}
.feat__h::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--a-cyan);
  box-shadow: 0 0 10px rgba(110, 231, 255, 0.6);
}

.feat__p {
  margin: 0;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--t-1);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .feats__grid { grid-template-columns: 1fr; gap: 36px; }
  .feats { margin-top: 80px; }
}

/* =========================================================
   Recent agent wins — disabled (replaced by features list)
   ========================================================= */

.wins {
  margin: 32px 0 0;
  width: 100%;
  max-width: 640px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  text-align: left;
  overflow: hidden;
}

.wins__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(91, 157, 255, 0.04);
}
.wins__title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--a-cyan);
}
.wins__count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--t-2);
}
.wins__count b {
  color: var(--t-0);
  font-weight: 600;
  margin-right: 4px;
}

.wins__list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

.win {
  display: flex;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 200ms ease;
}
.win:last-child { border-bottom: none; }
.win:hover { background: rgba(255,255,255,0.02); }

.win__icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-top: 1px;
}
.win__icon--ship { background: rgba(110, 231, 255, 0.10); color: var(--a-cyan);  border: 1px solid rgba(110, 231, 255, 0.25); }
.win__icon--find { background: rgba(91, 157, 255, 0.10);  color: var(--a-blue);  border: 1px solid rgba(91, 157, 255, 0.25); }
.win__icon--read { background: rgba(255,255,255,0.05);    color: var(--t-1);     border: 1px solid rgba(255,255,255,0.10); }
.win__icon--fix  { background: rgba(91, 157, 255, 0.06);  color: var(--a-blue);  border: 1px solid rgba(91, 157, 255, 0.18); }

.win__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.win__line {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--t-0);
  letter-spacing: -0.005em;
}
.win__line em {
  font-style: normal;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.92em;
  color: var(--a-cyan);
  background: rgba(110, 231, 255, 0.06);
  padding: 1px 6px;
  border-radius: 5px;
}
.win__agent {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--a-blue);
  font-weight: 500;
}
.win__meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--t-2);
  letter-spacing: -0.005em;
}
.win__meta b {
  color: var(--t-0);
  font-weight: 600;
}

/* Leaked-code teaser — most of it redacted */
.soon__leak {
  margin: 32px 0 0;
  width: 100%;
  max-width: 620px;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255,255,255,0.06);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.8px;
  line-height: 1.85;
  color: var(--t-2);
  text-align: left;
  white-space: pre;
  overflow-x: auto;
  position: relative;
}
.soon__leak::before {
  content: "leaked · do not distribute";
  position: absolute;
  top: -10px; left: 16px;
  padding: 2px 9px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--a-down);
  background: var(--bg-0);
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 999px;
}
.leak__ln { display: block; }
.leak__hash { color: var(--a-cyan); margin-right: 8px; }
.leak__ok { color: var(--a-blue); }
.leak__redact {
  display: inline-block;
  padding: 0 4px;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.4);
  border-radius: 3px;
  letter-spacing: 0.05em;
  filter: blur(0.6px);
}

/* Slots counter pulse on update */
.intel-pulse {
  animation: intel-pulse 600ms ease-out;
}
@keyframes intel-pulse {
  0%   { color: var(--a-cyan); transform: scale(1); }
  40%  { color: #ffffff; transform: scale(1.04); text-shadow: 0 0 12px rgba(110, 231, 255, 0.7); }
  100% { color: var(--a-cyan); transform: scale(1); text-shadow: none; }
}

/* Email form interactions */
.soon__form.shake { animation: shake 380ms cubic-bezier(0.36,0.07,0.19,0.97); }
@keyframes shake {
  10%, 90%   { transform: translateX(-2px); }
  20%, 80%   { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60%   { transform: translateX(5px); }
}
/* Success state — replace input + button with a check-mark confirmation,
   keeping the pill itself. The form animates to fit its new content. */
.soon__success {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 22px;
  flex: 1 1 auto;
  font-size: 14px;
  color: var(--a-cyan);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.soon__success svg { color: var(--a-cyan); flex-shrink: 0; }
.soon__success svg circle {
  animation: ring-draw 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.soon__success svg path {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  animation: tick-draw 380ms cubic-bezier(0.4, 0, 0.2, 1) 320ms forwards;
}
.soon__success-text { color: var(--t-0); }

@keyframes ring-draw {
  from { stroke-dashoffset: 46; }
  to   { stroke-dashoffset: 0; }
}
@keyframes tick-draw {
  to { stroke-dashoffset: 0; }
}

.soon__form--done {
  border-color: rgba(110, 231, 255, 0.30);
  background:
    linear-gradient(180deg, rgba(110, 231, 255, 0.06) 0%, rgba(110, 231, 255, 0.02) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 4px rgba(110, 231, 255, 0.06),
    0 10px 32px -16px rgba(91, 157, 255, 0.40);
}
.soon__form--done .soon__email,
.soon__form--done .soon__submit { display: none; }
.soon__form--done .soon__success { display: inline-flex; }

/* Reassurance microcopy under the form — italic sans, lowercase. Reads as
   prose so it doesn't compete with the mono-caps technical tags below. */
.soon__reassure {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-style: italic;
  letter-spacing: -0.005em;
  color: var(--t-3);
  text-transform: none;
  opacity: 0.78;
}

/* Hide the legacy ASCII / teaser blocks — keeps cascade quiet */
.hero__ascii, .ticker, .hero__cli, .hero__pillars,
.soon__intel, .soon__live, .soon__leak, .soon__micro,
.wins { display: none !important; }

/* =========================================================
   Hero ASCII ambience (legacy — disabled)
   ========================================================= */

.hero { overflow: hidden; }

/* ASCII art floats in the corners — pure text, low opacity, no GPU cost */
.hero__ascii {
  position: absolute;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  line-height: 1.45;
  color: var(--a-teal);
  opacity: 0.14;
  white-space: pre;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px rgba(110, 231, 255, 0.25);
  z-index: 1;
  margin: 0;
}
.hero__ascii--left  { left: 24px; top: 17%; animation: ascii-drift 8s ease-in-out infinite; }
.hero__ascii--right { right: 24px; top: 19%; opacity: 0.12; animation: ascii-drift 9s ease-in-out infinite reverse; color: var(--a-violet); text-shadow: 0 0 12px rgba(91, 157, 255, 0.25); }

@keyframes ascii-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Live ticker tape */
.ticker {
  position: absolute;
  top: 78px;
  left: 0;
  right: 0;
  height: 38px;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(5, 6, 12, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
          backdrop-filter: blur(10px) saturate(1.2);
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent);
          mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent);
  z-index: 2;
}
.ticker__track {
  display: flex;
  gap: 38px;
  white-space: nowrap;
  animation: ticker-scroll 70s linear infinite;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 38px;
  color: var(--t-1);
  letter-spacing: 0.02em;
  will-change: transform;
  padding-left: 24px;
}
.ticker__item { white-space: nowrap; flex: 0 0 auto; }
.ticker__item em { font-style: normal; font-weight: 500; margin-left: 10px; }
.ticker__item .up   { color: #6ee7ff; }
.ticker__item .down { color: #f87171; }
@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Terminal-style CLI scroll cue */
.hero__cli {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 12px;
  border-radius: 10px;
  background: rgba(5, 6, 12, 0.6);
  border: 1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--t-1);
  z-index: 4;
  max-width: 92vw;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.6);
}
.cli__chrome { display: inline-flex; gap: 6px; margin-right: 4px; }
.cli__dot { width: 9px; height: 9px; border-radius: 50%; }
.cli__dot:nth-child(1) { background: #ff5f56; }
.cli__dot:nth-child(2) { background: #ffbd2e; }
.cli__dot:nth-child(3) { background: #27c93f; }
.cli__prompt { color: var(--a-teal); }
.cli__sigil  { color: var(--a-violet); }
.cli__cmd    { color: var(--t-0); }
.cli__cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--a-teal);
  margin-left: 1px;
  vertical-align: -2px;
  animation: cli-blink 1.05s steps(2) infinite;
  box-shadow: 0 0 6px rgba(110, 231, 255, 0.7);
}
@keyframes cli-blink { 50% { opacity: 0; } }

/* Decoder reveal: characters scramble into final form */
.grad[data-decode] {
  font-variant-ligatures: none;
}

/* Hide ASCII art on small screens — they crowd the title */
@media (max-width: 980px) {
  .hero__ascii { display: none; }
  .hero__cli { font-size: 11px; padding: 8px 12px; }
}

/* =========================================================
   Engine band — compact one-line metrics strip
   ========================================================= */

.strip {
  padding: 24px var(--pad) 8px;
  display: flex;
  justify-content: center;
}
.strip__inner {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--t-2);
}
.strip__inner b {
  color: var(--t-0);
  font-weight: 600;
  margin-right: 4px;
}
.strip__sep { color: var(--t-3); }

/* Legacy band styles retained but unused */
.band { padding: 40px var(--pad) 20px; display: flex; justify-content: center; }
.band__inner {
  width: 100%; max-width: var(--max); padding: 28px 32px; border-radius: var(--r-xl);
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 18px;
}

.band__metric { text-align: center; position: relative; z-index: 3; }
.band__num {
  font-size: clamp(36px, 4.8vw, 56px);
  font-weight: 600;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, #ffffff 0%, #d4dbed 60%, #8a93a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  font-feature-settings: 'tnum', 'ss01';
}
.band__lbl {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--t-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.band__sep {
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.18), transparent);
}

/* =========================================================
   Bento — features
   ========================================================= */

.features {
  padding: 80px var(--pad) 40px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
}

.bento {
  width: 100%;
  max-width: var(--max);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 18px;
}
.card.card--showcase {
  grid-column: 1 / -1;
}

.card {
  padding: 28px 26px 26px;
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  min-height: 200px;
}
.card.card--showcase {
  padding: 32px 30px;
  gap: 14px;
}

.card > * { position: relative; z-index: 3; }

.card__chip {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--a-teal);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(110, 231, 255, 0.06);
  border: 1px solid rgba(110, 231, 255, 0.14);
}
.card__chip::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--a-teal);
  box-shadow: 0 0 8px rgba(110, 231, 255, 0.6);
}

.card__h {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.028em;
  margin: 0;
  line-height: 1.12;
  background: linear-gradient(180deg, #ffffff 0%, #cfd5e7 80%, #aab2c5 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
}

.card--xl .card__h, .card--feature .card__h {
  font-size: 30px;
  letter-spacing: -0.032em;
}

.card__p {
  color: var(--t-1);
  font-size: 14.5px;
  line-height: 1.62;
  letter-spacing: -0.003em;
  margin: 0;
  text-wrap: pretty;
}

.card__p code,
.card__p em {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-style: normal;
  background: rgba(110, 231, 255, 0.08);
  border: 1px solid rgba(110, 231, 255, 0.18);
  color: var(--a-teal);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 0.88em;
}

/* Card sizes — base 6-col bento grid */
.card                { grid-column: span 2; }                       /* default: 2-col tile */
.card.card--xl       { grid-column: span 4; grid-row: span 2; }     /* hero */
.card.card--tall     { grid-column: span 2; grid-row: span 2; }     /* tall sidebar */
.card.card--feature  { grid-column: span 3; grid-row: span 2; }     /* showpiece */
.card.card--half     { grid-column: span 3; }                       /* half-width strip */

/* Card visualizations */
.card__viz {
  margin-top: auto;
  border-radius: var(--r-m);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
}
.card__viz svg { display: block; width: 100%; height: 100%; }
.card__viz--chart svg { height: 180px; }
.card__viz--mc svg { height: 130px; }

/* Monte Carlo live canvas */
.mc {
  margin-top: auto;
  border-radius: var(--r-m);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.05));
  border: 1px solid rgba(255,255,255,0.07);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mc__canvas {
  display: block;
  width: 100%;
  height: 140px;
  border-radius: 8px;
}
.mc__legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--t-2);
  letter-spacing: 0.06em;
}
.mc__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.mc__chip i {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
}
.mc__chip--p95 i { background: rgba(91, 157, 255, 0.4); }
.mc__chip--p50 i { background: #5b9dff; box-shadow: 0 0 6px rgba(91, 157, 255, 0.6); }
.mc__chip--p5 i  { background: rgba(91, 157, 255, 0.2); border: 1px dashed rgba(91, 157, 255, 0.5); }
.mc__run {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(110, 231, 255, 0.08);
  border: 1px solid rgba(110, 231, 255, 0.2);
  color: var(--a-teal);
  cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  transition: background 200ms ease, transform 200ms ease;
}
.mc__run:hover { background: rgba(110, 231, 255, 0.14); transform: translateY(-1px); }
.mc__run:active { transform: translateY(0); }
.mc__run-icon {
  display: inline-block;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mc__run.is-running .mc__run-icon {
  animation: mc-spin 700ms linear infinite;
}
@keyframes mc-spin { to { transform: rotate(360deg); } }

/* Card list */
.card__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--t-1);
}
.card__list li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kbd {
  display: inline-block;
  padding: 2px 8px;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11.5px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  color: var(--m-0);
}

/* Lang chips */
.lang-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
.chip {
  padding: 6px 12px;
  font-size: 12.5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--t-1);
}
.chip--rust {
  background: linear-gradient(180deg, rgba(243, 128, 86, 0.18), rgba(243, 128, 86, 0.05));
  border-color: rgba(243, 128, 86, 0.4);
  color: #ffd2c1;
}

/* Stats row (Monte Carlo) */
.card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 6px;
}
.card__stats > div {
  padding: 10px 12px;
  border-radius: var(--r-m);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat__num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 16px;
  color: var(--a-violet);
  letter-spacing: 0.04em;
}
.stat__lbl {
  font-size: 11.5px;
  color: var(--t-2);
  letter-spacing: 0.05em;
}

/* Risk ledger */
.ledger {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
}
.ledger .row {
  display: flex; justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--t-1);
}
.ok   { color: #6ee7ff; }
.warn { color: var(--a-warn); }

/* Audit log */
.logfile {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.8px;
  color: var(--t-1);
  padding: 12px;
  border-radius: var(--r-m);
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  line-height: 1.7;
}
.logfile .ts { color: var(--t-3); margin-right: 10px; }
.evt {
  display: inline-block;
  min-width: 50px;
  padding: 1px 7px;
  margin-right: 8px;
  border-radius: 5px;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.evt--order { color: var(--a-cyan); border-color: rgba(110, 231, 255, 0.3); background: rgba(110, 231, 255, 0.08); }
.evt--fill  { color: #6ee7ff; border-color: rgba(110, 231, 255, 0.3); background: rgba(110, 231, 255, 0.08); }
.evt--risk  { color: var(--a-warn); border-color: rgba(251, 191, 107, 0.3); background: rgba(251, 191, 107, 0.08); }
.evt--audit { color: var(--a-violet); border-color: rgba(91, 157, 255, 0.3); background: rgba(91, 157, 255, 0.08); }

/* Adapters */
.adapters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}
.adapter {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--t-0);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.adapter--soon {
  color: var(--t-2);
  border-style: dashed;
  background: transparent;
}

/* Studio dock */
.dock {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 6px;
  height: 90px;
}
.dock__pane {
  display: flex; align-items: flex-end;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 11.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--t-2);
  letter-spacing: 0.04em;
}
.dock__pane--active {
  background:
    linear-gradient(180deg, rgba(110, 231, 255, 0.18), rgba(110, 231, 255, 0.04));
  border-color: rgba(110, 231, 255, 0.35);
  color: var(--a-teal);
}

/* =========================================================
   Architecture rules
   ========================================================= */

.arch {
  padding: 80px var(--pad) 40px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
}

.rules {
  width: 100%;
  max-width: var(--max);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.rule {
  padding: 26px 24px;
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: 10px;
  --cx: 50%;
  --cy: 50%;
}
.rule > * { position: relative; z-index: 3; }
.rule__n {
  font-size: 11.5px;
  color: var(--a-teal);
  letter-spacing: 0.18em;
  font-weight: 500;
}
.rule h4 {
  margin: 0;
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.28;
  background: linear-gradient(180deg, #ffffff 0%, #c9d1e1 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
}
.rule p {
  margin: 0;
  font-size: 14px;
  color: var(--t-1);
  line-height: 1.6;
  letter-spacing: -0.003em;
}
.rule code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.88em;
  color: var(--a-teal);
  background: rgba(110, 231, 255, 0.07);
  border: 1px solid rgba(110, 231, 255, 0.16);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Roadmap variant — wider, taller cards with line-by-line ticks */
.rules--roadmap .rule {
  padding: 28px 26px 26px;
}
.rules--roadmap .rule__n {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(110, 231, 255, 0.08);
  border: 1px solid rgba(110, 231, 255, 0.20);
  letter-spacing: 0.10em;
}
.rules--roadmap .rule p {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 2;
  color: var(--t-1);
  letter-spacing: -0.005em;
}
.rmark {
  display: inline-block;
  width: 18px;
  text-align: center;
  margin-right: 2px;
  font-weight: 600;
}
.rmark.ok   { color: var(--a-cyan); }
.rmark.next { color: var(--a-blue); }
.rmark.soon { color: var(--t-3); }

/* =========================================================
   AI Copilot chatbot demo
   ========================================================= */

.copilot {
  padding: 80px var(--pad) 40px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
}

.bot {
  width: 100%;
  max-width: 880px;
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  --cx: 50%; --cy: 50%;
}

.bot__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0, 0, 0, 0.22);
  z-index: 3;
}
.bot__chrome { display: inline-flex; gap: 6px; }
.bot__title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--t-1);
  letter-spacing: 0.04em;
}
.bot__model {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--a-teal);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(110, 231, 255, 0.06);
  border: 1px solid rgba(110, 231, 255, 0.18);
}

.bot__transcript {
  position: relative;
  z-index: 3;
  padding: 22px 22px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 320px;
  max-height: 480px;
  overflow-y: auto;
  scroll-behavior: smooth;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.01) 100%);
}
.bot__transcript::-webkit-scrollbar { width: 8px; }
.bot__transcript::-webkit-scrollbar-track { background: transparent; }
.bot__transcript::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border-radius: 4px; }

.bot__bubble {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 88%;
  animation: bot-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes bot-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bot__bubble--user { align-self: flex-end; align-items: flex-end; }
.bot__bubble--assistant { align-self: flex-start; align-items: flex-start; }

.bot__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-3);
}
.bot__bubble--user .bot__label { color: var(--a-teal); }
.bot__bubble--assistant .bot__label { color: var(--a-violet); }

.bot__body {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--t-0);
  white-space: pre-wrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: -0.005em;
  word-wrap: break-word;
}
.bot__bubble--user .bot__body {
  background: linear-gradient(180deg, rgba(110, 231, 255, 0.10), rgba(110, 231, 255, 0.04));
  border: 1px solid rgba(110, 231, 255, 0.20);
  border-bottom-right-radius: 6px;
}
.bot__bubble--assistant .bot__body {
  background: linear-gradient(180deg, rgba(91, 157, 255, 0.07), rgba(91, 157, 255, 0.02));
  border: 1px solid rgba(91, 157, 255, 0.16);
  border-bottom-left-radius: 6px;
}

.bot__think {
  display: inline-flex;
  gap: 4px;
  padding: 2px 0;
}
.bot__think span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--a-violet);
  opacity: 0.5;
  animation: bot-think 1.1s ease-in-out infinite;
}
.bot__think span:nth-child(2) { animation-delay: 0.18s; }
.bot__think span:nth-child(3) { animation-delay: 0.36s; }
@keyframes bot-think {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%      { transform: translateY(-3px); opacity: 1; }
}

.bot__foot {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.18);
  font-size: 12px;
  color: var(--t-2);
}
.bot__hint { letter-spacing: 0.02em; }
.bot__restart {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--t-1);
  cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  transition: background 200ms ease;
}
.bot__restart:hover { background: rgba(255,255,255,0.08); color: var(--t-0); }

/* --- Extended thinking block --- */
.bot__thinking {
  align-self: stretch;
  margin: 6px 0;
  padding: 12px 14px 14px;
  border-left: 2px solid rgba(91, 157, 255, 0.45);
  background: rgba(91, 157, 255, 0.04);
  border-radius: 0 10px 10px 0;
  animation: bot-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bot__thinking-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a-blue);
  margin-bottom: 8px;
}
.bot__thinking-caret { font-size: 9px; opacity: 0.8; }
.bot__thinking-body {
  font-family: 'Inter', system-ui, sans-serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  color: var(--t-2);
  white-space: pre-wrap;
  letter-spacing: -0.005em;
}

/* --- Tool call / tool result rows --- */
.bot__tool {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.55;
  padding: 4px 0;
  animation: bot-in 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bot__tool-arrow {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  font-weight: 600;
}
.bot__tool--call {
  color: var(--t-1);
  padding: 6px 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}
.bot__tool--call .bot__tool-arrow { color: var(--a-blue); }
.bot__tool--call .bot__tool-name {
  color: var(--a-cyan);
  font-weight: 500;
}
.bot__tool--call .bot__tool-args {
  color: var(--t-2);
}

.bot__tool--result {
  background: rgba(0,0,0,0.30);
  border-left: 2px solid rgba(110, 231, 255, 0.35);
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
}
.bot__tool--result .bot__tool-arrow { color: var(--a-cyan); }
.bot__tool-output {
  margin: 0;
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--t-1);
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- Code blocks inside assistant bubbles --- */
.bot__code {
  margin: 8px 0 2px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  animation: bot-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bot__code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a-blue);
  background: rgba(0, 0, 0, 0.30);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bot__code-head span:last-child {
  color: var(--t-3);
  cursor: pointer;
  font-size: 10px;
}
.bot__code pre {
  margin: 0;
  padding: 12px 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.2px;
  line-height: 1.62;
  color: var(--t-0);
  white-space: pre;
  overflow-x: auto;
}
.bot__code pre::-webkit-scrollbar { height: 6px; }
.bot__code pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

.bot__seg-text {
  display: inline;
  white-space: pre-wrap;
}

/* =========================================================
   Trust
   ========================================================= */

.trust {
  padding: 60px var(--pad) 80px;
  display: flex;
  justify-content: center;
}

.trust__inner {
  width: 100%;
  max-width: 960px;
  padding: 48px;
  border-radius: var(--r-xl);
  text-align: center;
  --cx: 50%;
  --cy: 50%;
}
.trust__inner > * { position: relative; z-index: 3; }
.trust__p {
  max-width: 640px;
  margin: 12px auto 0;
  color: var(--t-1);
  font-size: 16px;
  line-height: 1.6;
}
.trust__grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.trust__grid > div {
  padding: 14px 12px;
  border-radius: var(--r-m);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.trust__k {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-2);
}
.trust__v {
  font-size: 14px;
  color: var(--t-0);
}

/* Final CTA */
.cta {
  padding: 80px var(--pad) 100px;
  display: flex;
  justify-content: center;
}
.cta__inner {
  width: 100%;
  max-width: 760px;
  padding: 56px 40px;
  border-radius: var(--r-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cta__inner > * { position: relative; z-index: 3; }
.cta__title {
  margin: 0;
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.035em;
  font-weight: 600;
  line-height: 1.05;
  background: linear-gradient(180deg, #ffffff 0%, #c4cce0 75%, #9aa3b8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
}
.cta__sub {
  margin: 0;
  color: var(--t-1);
  font-size: 16px;
  line-height: 1.55;
}
.cta__row {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: 18px;
}

/* =========================================================
   Footer
   ========================================================= */

.foot {
  padding: 40px var(--pad) 60px;
  display: flex; justify-content: center;
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 40px;
}
.foot--minimal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px var(--pad) 18px;
  margin-top: 0;
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--t-3);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(5,6,12,0.6) 70%);
}
.foot--minimal > * { pointer-events: auto; }
.foot__inner {
  width: 100%;
  max-width: var(--max);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--t-2);
}
.foot__brand .brand__name { color: var(--t-0); }
.foot__tag { margin-left: 6px; }
.foot__legal { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dot-sep { color: var(--t-3); }

/* =========================================================
   Reveal animation
   ========================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__inner { padding: 8px 12px; }

  .band__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
  }
  .band__sep { display: none; }

  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  .card,
  .card.card--xl,
  .card.card--tall,
  .card.card--feature,
  .card.card--half { grid-column: span 2; grid-row: auto; }

  .rules { grid-template-columns: 1fr; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .hero__pillars { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hero__title { font-size: clamp(36px, 9vw, 56px); }
  .trust__inner { padding: 32px 22px; }
  .band__inner { grid-template-columns: 1fr; padding: 20px; }
}