/* ==========================================================================
   data source — landing site
   Design language inherited from the app's v2 spec
   (C:\Users\sergi\Dev\people-search-ui\V2-DESIGN-SPEC.md): light glass,
   blue-tinted elevation, mono micro-labels, ambient atmosphere.
   ========================================================================== */

:root {
  /* ink */
  --ink: #0B1220;
  --ink-2: #33415C;
  --ink-3: #6B7A96;
  --ink-4: #93A1BB;

  /* lines */
  --line: rgba(11, 18, 32, .08);
  --line-soft: rgba(11, 18, 32, .05);

  /* accent */
  --accent: #2563EB;
  --accent-2: #4F8DFF;
  --accent-ink: #1D4ED8;
  --accent-wash: rgba(37, 99, 235, .07);

  /* status */
  --ok-fill: rgba(16, 185, 129, .12);
  --ok-ink: #047857;
  --warn-fill: rgba(245, 158, 11, .14);
  --warn-ink: #B45309;

  /* glass */
  --glass: rgba(255, 255, 255, .62);
  --glass-2: rgba(255, 255, 255, .44);
  --glass-hi: rgba(255, 255, 255, .85);
  --glass-border: rgba(255, 255, 255, .9);
  --glass-blur: blur(20px) saturate(160%);

  /* elevation — blue-tinted, never neutral gray */
  --shadow-sm: 0 2px 10px rgba(20, 40, 90, .07);
  --shadow-md: 0 10px 30px -12px rgba(20, 40, 90, .22), 0 2px 8px rgba(20, 40, 90, .05);
  --shadow-lg: 0 24px 60px -20px rgba(20, 40, 90, .28), 0 2px 8px rgba(20, 40, 90, .06);
  --shadow-xl: 0 50px 120px -40px rgba(20, 40, 90, .40), 0 4px 14px rgba(20, 40, 90, .07);
  --shadow-accent: 0 12px 26px -12px rgba(29, 78, 216, .95);

  /* radius */
  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;

  /* type */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* layout */
  --page: 1200px;
  --gutter: 28px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: #F4F7FC;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
   Atmosphere — the fixed background stack (spec §2)
   -------------------------------------------------------------------------- */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.atmo-base {
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 800px at 12% -8%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    radial-gradient(1000px 700px at 88% 4%, #EAF1FF 0%, rgba(234,241,255,0) 62%),
    linear-gradient(180deg, #F7FAFF 0%, #EEF3FC 42%, #F5F8FD 100%);
}
.atmo-sweep {
  position: absolute;
  top: -30%; left: -10%;
  width: 90vw; height: 90vw;
  background: conic-gradient(from 210deg at 50% 50%,
    rgba(79,141,255,.16), rgba(255,255,255,0) 28%,
    rgba(37,99,235,.10) 52%, rgba(255,255,255,0) 78%,
    rgba(120,170,255,.14));
  filter: blur(60px);
  animation: sweep 34s ease-in-out infinite alternate;
}
.atmo-arc {
  position: absolute;
  right: -12%; bottom: -22%;
  width: 70vw; height: 70vw;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,0) 62%);
  filter: blur(40px);
  animation: drift 26s ease-in-out infinite alternate;
}
.atmo-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(11,18,32,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,18,32,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 0%, transparent 78%);
}
.atmo-ghosts span {
  position: absolute;
  border-radius: 40px;
  background: linear-gradient(140deg, rgba(255,255,255,.7), rgba(255,255,255,.15));
  box-shadow: var(--shadow-lg);
  opacity: .5;
}
.atmo-ghosts span:nth-child(1) { width: 320px; height: 220px; top: 18%; left: 6%;  animation: float 22s ease-in-out infinite alternate; }
.atmo-ghosts span:nth-child(2) { width: 240px; height: 300px; top: 52%; right: 9%; animation: float 28s ease-in-out infinite alternate-reverse; }
.atmo-ghosts span:nth-child(3) { width: 200px; height: 160px; top: 78%; left: 22%; animation: float 18s ease-in-out infinite alternate; }

@keyframes sweep { from { transform: rotate(0deg) translate3d(0,0,0); } to { transform: rotate(24deg) translate3d(3%, 4%, 0); } }
@keyframes drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-4%, -3%, 0); } }
@keyframes float { from { transform: translateY(0); } to { transform: translateY(-38px); } }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.page { position: relative; z-index: 1; }
.wrap { width: min(var(--page), 100% - (var(--gutter) * 2)); margin-inline: auto; }
.wrap-wide { width: min(1360px, 100% - (var(--gutter) * 2)); margin-inline: auto; }

section { position: relative; }
.section { padding: 104px 0; }
.section-tight { padding: 72px 0; }

/* mono micro-label — the signature of this system */
.micro {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.micro-accent { color: var(--accent-ink); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--glass-hi);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}

h1, h2, h3 { margin: 0; letter-spacing: -0.028em; line-height: 1.05; font-weight: 700; }
h1 { font-size: clamp(40px, 5.4vw, 68px); }
h2 { font-size: clamp(30px, 3.6vw, 46px); }
h3 { font-size: 18px; letter-spacing: -0.015em; }

.lede {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--ink-2);
  font-weight: 450;
  margin: 20px 0 0;
  max-width: 56ch;
}
.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head h2 { margin-top: 16px; }
.section-head .lede { margin-top: 16px; }
.center { text-align: center; margin-inline: auto; }
.center .lede { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Glass surface primitive — fill + ~90% white border + large soft shadow.
   Two of the three reads as a mistake (spec §1.2).
   -------------------------------------------------------------------------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
}
.glass-flat {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover { box-shadow: 0 18px 34px -14px rgba(29,78,216,1); }
.btn-ghost {
  color: var(--ink);
  background: var(--glass-hi);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { box-shadow: var(--shadow-md); }
.btn-subtle { color: var(--ink-2); background: transparent; }
.btn-subtle:hover { color: var(--ink); background: rgba(255,255,255,.6); }
.btn-sm { height: 38px; padding: 0 15px; font-size: 13px; border-radius: 11px; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 15px; }
.btn svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 0;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(247, 250, 255, .78);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.9), var(--shadow-sm);
}
.nav-inner { display: flex; align-items: center; gap: 28px; }
/* Two-part lockup: the glowing DS badge (same artwork on every background) plus
   the wordmark in the cut that suits the surface — ink on light, white on dark.
   The badge asset carries its own glow, so it is sized larger than its visible
   coin and pulled back with negative margins rather than inflating the nav. */
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
/* The coin is cut flush (no baked glow), so it needs no negative margins to
   claw back glow padding — plain box, no shadow, no filter.
   `max-width: none` still matters: the global `img { max-width: 100% }` can
   otherwise clamp it against a shrink-to-fit parent and squash it to an oval. */
.brand-badge {
  flex: none;
  width: 38px; height: 38px;
  max-width: none;
  margin: 0;
  box-shadow: none;
  filter: none;
}
/* Live text, not an image: the weight is tunable, it stays crisp at any size,
   and it recolours for dark surfaces without a second asset. Swap the face by
   changing --brand-face — candidates rendered side by side in wordmark-fonts.html */
:root { --brand-face: "Orbitron", "Michroma", "Chakra Petch", var(--sans); }
.brand-word {
  flex: none;
  font-family: var(--brand-face);
  font-weight: 400;              /* deliberately lighter than the supplied art */
  font-size: 17px;
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-links a {
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ink-2);
  padding: 9px 13px;
  border-radius: 10px;
  transition: color .15s ease, background .15s ease;
}
.nav-links a:hover { color: var(--ink); background: rgba(255,255,255,.7); }
.nav-cta { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding: 86px 0 40px; }
.hero-bg {
  position: absolute;
  inset: -80px 0 auto 0;
  height: 940px;
  z-index: -1;
  overflow: hidden;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .85;
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(247,250,255,.55) 0%, rgba(247,250,255,.15) 26%, rgba(244,247,252,.86) 78%, #F4F7FC 100%),
    linear-gradient(90deg, rgba(247,250,255,.92) 0%, rgba(247,250,255,.30) 46%, rgba(247,250,255,0) 74%);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 48px;
  align-items: center;
}
.hero h1 { margin-top: 26px; }
.hero h1 .grad {
  background: linear-gradient(120deg, var(--accent-ink) 0%, var(--accent-2) 52%, #7FB0FF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 34px; }
.hero-note { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; }
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.hero-note svg { width: 13px; height: 13px; color: var(--ok-ink); }

.hero-visual { position: relative; }
.hero-visual img { border-radius: var(--r-xl); }
.hero-visual .halo {
  position: absolute;
  /* right inset kept at 0: a negative one pushed the glow 6px past the viewport
     and put a phantom horizontal scroll on the document */
  inset: 6% 0 -6% 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(79,141,255,.28), rgba(79,141,255,0) 66%);
  filter: blur(50px);
  z-index: -1;
}

/* stat strip */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 64px;
  padding: 4px;
  overflow: hidden;
}
.stat { padding: 22px 24px; text-align: left; }
.stat b {
  display: block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 9px;
}
.stat .micro { display: block; }
.stat + .stat { border-left: 1px solid var(--line-soft); }

/* --------------------------------------------------------------------------
   Homepage search mockup — a static demo of the real query surface, sitting
   directly under the hero. Not wired to anything; the controls toggle so it
   feels alive, and the CTA hands off to signup.
   -------------------------------------------------------------------------- */
.searchbox {
  margin-top: 56px;
  border-radius: var(--r-xl);
  background: var(--glass-hi);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.sb-top { padding: 22px 24px 18px; border-bottom: 1px solid var(--line-soft); }
.sb-query {
  margin: 0 0 16px;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.4;
  color: var(--ink);
  font-weight: 500;
}
.sb-query::after {
  content: "";
  display: inline-block;
  width: 2px; height: 1.05em;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--accent);
  animation: sbCaret 1.1s steps(1) infinite;
}
@keyframes sbCaret { 50% { opacity: 0; } }

.sb-controls { display: flex; align-items: center; gap: 12px; }
.sb-modes { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(11,18,32,.05); }
.sb-mode {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px;
  border-radius: 9px;
  font: inherit; font-size: 13.5px; font-weight: 550;
  color: var(--ink-3);
  background: transparent;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.sb-mode svg { width: 15px; height: 15px; }
.sb-mode:hover { color: var(--ink-2); }
.sb-mode.is-on { background: #fff; color: var(--accent-ink); box-shadow: var(--shadow-sm); }

.sb-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sb-icon {
  appearance: none; cursor: pointer;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-4);
  transition: background .15s ease, color .15s ease;
}
.sb-icon:hover { background: rgba(11,18,32,.05); color: var(--ink-2); }
.sb-icon svg { width: 16px; height: 16px; }
.sb-go {
  color: #fff;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: var(--shadow-accent);
}
.sb-go:hover { color: #fff; background: linear-gradient(135deg, var(--accent-2), var(--accent)); }

.sb-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sb-side { padding: 22px 24px; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 10px; }
.sb-side .micro { display: block; margin-top: 6px; }
.sb-side .micro:first-child { margin-top: 0; }
.sb-seg { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(11,18,32,.05); }
.sb-seg button {
  appearance: none; border: 0; cursor: pointer; flex: 1;
  height: 30px; padding: 0 8px;
  border-radius: 8px;
  font: inherit; font-size: 12.5px; font-weight: 550;
  color: var(--ink-3); background: transparent;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.sb-seg button.is-on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.sb-side-foot { margin-top: auto; padding-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.sb-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  font-size: 12.5px; font-weight: 550; color: var(--ink-2);
}
.sb-chip:hover { border-color: var(--accent-2); color: var(--accent-ink); }
.sb-chip svg { width: 13px; height: 13px; }
.sb-chip-mono { font-family: var(--mono); font-size: 11px; }

.sb-results { padding: 18px 22px 20px; min-width: 0; }
.sb-status {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ok-ink);
  margin-bottom: 14px;
}
.sb-status svg { width: 13px; height: 13px; }
.sb-table-wrap { overflow-x: auto; }
.sb-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.sb-table th, .sb-table td { text-align: left; padding: 9px 14px 9px 0; font-size: 13px; white-space: nowrap; }
.sb-table thead th {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.sb-table tbody tr { border-bottom: 1px solid var(--line-soft); }
.sb-table tbody tr:last-child { border-bottom: 0; }
.sb-table td { color: var(--ink-2); }
.sb-table td:first-child { font-weight: 600; color: var(--ink); }
.sb-table .num { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

@media (max-width: 900px) {
  .sb-body { grid-template-columns: 1fr; }
  .sb-side { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .sb-side-foot { margin-top: 16px; padding-top: 0; }
}

/* --------------------------------------------------------------------------
   Product shot
   -------------------------------------------------------------------------- */
.shot {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-xl);
  background: var(--glass-hi);
}
.shot img { width: 100%; }
.shot-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255,255,255,.7);
}
.shot-chrome i { width: 9px; height: 9px; border-radius: 999px; background: rgba(11,18,32,.12); }
.shot-chrome .url {
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-4);
  letter-spacing: .04em;
}
/* live product UI, scaled to fit its container (see site.js) */
.appframe {
  position: relative;
  width: 100%;
  padding-top: 58.9%;           /* 1120 / 1900 — matches the iframe box below */
  overflow: hidden;
  background: #F7FAFF;
}
.appframe iframe {
  position: absolute;
  top: 0; left: 0;
  width: 1900px;
  height: 1120px;
  border: 0;
  transform-origin: 0 0;
  transform: scale(var(--app-scale, .63));
  pointer-events: none;         /* decorative — never steals a scroll or a click */
}

.shot-callouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.shot-callout { padding: 18px 20px; border-radius: var(--r-md); background: rgba(255,255,255,.55); border: 1px solid var(--glass-border); }
.shot-callout h3 { font-size: 14.5px; margin-bottom: 7px; }
.shot-callout p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   Feature cards
   -------------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 13px;
  margin-bottom: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: var(--shadow-accent);
}
.card-icon svg { width: 19px; height: 19px; }
.card h3 { margin-bottom: 9px; }
.card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.card ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.card li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: var(--ink-2); line-height: 1.45;
}
.card li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px; margin-top: 6px;
  border-radius: 999px;
  background: var(--accent);
  opacity: .55;
}

/* --------------------------------------------------------------------------
   Split feature rows
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.split + .split { margin-top: 104px; }
.split-flip .split-media { order: -1; }
.split h2 { font-size: clamp(26px, 2.6vw, 34px); margin-top: 16px; }
.split .lede { font-size: 16px; margin-top: 14px; }
.split-list { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.split-list li { display: flex; gap: 12px; align-items: flex-start; }
.split-list svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.split-list b { display: block; font-size: 14.5px; font-weight: 650; margin-bottom: 3px; }
.split-list span { font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
.split-media img { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--glass-border); }

/* mock panels used inside split media */
.mock { padding: 18px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg); }
.mock-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mock-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.mock-row:last-child { border-bottom: 0; }
.mock-ent { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mock-av {
  width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff;
  font-family: var(--mono);
}
.mock-name { font-weight: 600; font-size: 13px; line-height: 1.25; }
.mock-sub { font-size: 11.5px; color: var(--ink-4); }
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px;
}
.pill-ok { background: var(--ok-fill); color: var(--ok-ink); }
.pill-warn { background: var(--warn-fill); color: var(--warn-ink); }
.pill-neutral { background: rgba(11,18,32,.05); color: var(--ink-4); }
.reveal-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 11px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 12px; font-weight: 600;
}
.reveal-btn .cost { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--ink-4); }

/* sequence mock */
.seq { display: grid; gap: 10px; }
.seq-step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 13px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.6);
  border: 1px solid var(--glass-border);
}
.seq-num {
  width: 26px; height: 26px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
}
.seq-step b { font-size: 13.5px; font-weight: 600; display: block; }
.seq-step .micro { margin-top: 3px; display: block; }

/* --------------------------------------------------------------------------
   Band with imagery
   -------------------------------------------------------------------------- */
.band { position: relative; overflow: hidden; border-radius: var(--r-xl); }
.band-media { position: absolute; inset: 0; z-index: 0; }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(247,250,255,.94) 0%, rgba(247,250,255,.72) 42%, rgba(247,250,255,.36) 100%);
}
.band-inner { position: relative; z-index: 1; padding: 76px 60px; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.step { padding: 24px; border-radius: var(--r-lg); background: rgba(255,255,255,.66); border: 1px solid var(--glass-border); box-shadow: var(--shadow-md); }
.step-n {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; color: var(--accent-ink);
  display: block; margin-bottom: 14px;
}
.step h3 { margin-bottom: 8px; font-size: 16px; }
.step p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   Comparison table
   -------------------------------------------------------------------------- */
.compare { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg); background: var(--glass); }
.compare table { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: 15px 20px; text-align: left; font-size: 13.5px; border-bottom: 1px solid var(--line-soft); }
.compare thead th {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4);
  background: rgba(255,255,255,.7);
  border-bottom: 1px solid var(--line);
}
.compare tbody th { font-weight: 600; color: var(--ink); width: 30%; }
.compare td { color: var(--ink-3); }
.compare .col-us { background: var(--accent-wash); color: var(--ink-2); font-weight: 550; }
.compare thead .col-us { background: rgba(37,99,235,.12); color: var(--accent-ink); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Coverage
   -------------------------------------------------------------------------- */
.coverage { display: grid; gap: 14px; }
.cov-row { display: grid; grid-template-columns: 190px 1fr 56px; gap: 18px; align-items: center; }
.cov-row .label { font-size: 13.5px; font-weight: 550; }
.cov-bar { height: 8px; border-radius: 999px; background: rgba(11,18,32,.06); overflow: hidden; }
.cov-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.cov-row .val { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-3); text-align: right; }
.cov-note {
  margin-top: 26px; padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--warn-fill);
  color: var(--warn-ink);
  font-size: 13px; line-height: 1.6;
}
.cov-note b { display: block; margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.plan { padding: 30px 28px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-md); }
.plan-feature {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.66));
  box-shadow: var(--shadow-xl);
  position: relative;
}
.plan-feature::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: var(--r-lg);
  padding: 1px;
  background: linear-gradient(140deg, rgba(79,141,255,.9), rgba(37,99,235,.25) 45%, rgba(255,255,255,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.plan-tag { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.plan h3 { font-size: 17px; }
.plan .price { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 4px; }
.plan .price b { font-size: 38px; font-weight: 700; letter-spacing: -0.035em; }
.plan .price span { font-size: 13px; color: var(--ink-4); }
.plan .price-sub { font-size: 13px; color: var(--ink-3); margin: 0 0 22px; }
.plan .btn { width: 100%; }
.plan ul { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.plan li svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--accent); }

.credits {
  margin-top: 26px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  box-shadow: var(--shadow-md);
}
.credit { padding: 18px 20px; }
.credit + .credit { border-left: 1px solid var(--line-soft); }
.credit b { display: block; font-family: var(--mono); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }
.faq details {
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 19px 22px;
  font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink-4);
  border-bottom: 2px solid var(--ink-4);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq p { margin: 0; padding: 0 22px 21px; font-size: 14px; line-height: 1.65; color: var(--ink-3); max-width: 72ch; }

/* --------------------------------------------------------------------------
   CTA + footer
   -------------------------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band .btn-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.footer { padding: 72px 0 40px; border-top: 1px solid var(--line); margin-top: 96px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.footer-brand .brand { margin-bottom: 18px; }
.footer-brand p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); max-width: 34ch; }
.footer h4 { margin: 0 0 16px; font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.footer li a { font-size: 13.5px; color: var(--ink-2); }
.footer li a:hover { color: var(--accent-ink); }
.footer-bottom {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Reveal-on-scroll
   -------------------------------------------------------------------------- */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.rise.in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { max-width: 620px; }
  .cards, .steps, .shot-callouts { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; }
  .split, .split + .split { grid-template-columns: 1fr; gap: 36px; }
  .split-flip .split-media { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  :root { --gutter: 20px; }
  .section { padding: 72px 0; }
  .nav-links { display: none; }
  .stats, .credits { grid-template-columns: repeat(2, 1fr); }
  .stat + .stat { border-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line-soft); }
  .band-inner { padding: 48px 26px; }
  .cov-row { grid-template-columns: 130px 1fr 46px; gap: 12px; }
  .compare { overflow-x: auto; }
  .compare table { min-width: 620px; }
}
@media (max-width: 620px) {
  /* the full lockup pushes the CTA off-screen on a phone — mark only */
  .nav .brand-word { display: none; }
  .nav-inner { gap: 12px; }
  .cards, .steps, .shot-callouts { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero { padding-top: 52px; }
}

/* --------------------------------------------------------------------------
   Reduced motion — required, not optional (spec §1.6)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .atmo-sweep, .atmo-arc, .atmo-ghosts span { animation: none !important; }
  .rise { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}