/* =========================================================
   NestPrep — Image-forward, interview-themed, glassmorphic
   Type: Instrument Serif (display) + Geist (UI)
   ========================================================= */

:root {
  /* Neutrals */
  --bg:          oklch(0.985 0.004 90);
  --bg-2:        oklch(0.975 0.006 90);
  --ink:         oklch(0.18 0.012 280);
  --ink-2:       oklch(0.34 0.010 280);
  --ink-3:       oklch(0.54 0.010 280);
  --line:        oklch(0.88 0.008 280 / .6);
  --line-strong: oklch(0.78 0.010 280 / .8);

  /* Product hues */
  --learn:     #7C3AED;
  --practice:  #1E88E5;
  --ezapply:   #10B981;
  --screen:    #F59E0B;

  --learn-50:    color-mix(in oklab, var(--learn)    12%, white);
  --practice-50: color-mix(in oklab, var(--practice) 12%, white);
  --ezapply-50:  color-mix(in oklab, var(--ezapply)  12%, white);
  --screen-50:   color-mix(in oklab, var(--screen)   14%, white);

  /* Elevation */
  --e1: 0 1px 2px rgba(20,22,40,.04), 0 4px 16px rgba(20,22,40,.04);
  --e2: 0 2px 4px rgba(20,22,40,.05), 0 10px 40px rgba(20,22,40,.08);
  --e3: 0 4px 10px rgba(20,22,40,.08), 0 30px 80px rgba(20,22,40,.10);
  --e4: 0 8px 20px rgba(20,22,40,.10), 0 50px 120px rgba(20,22,40,.14);

  --container: 1320px;
  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  --f-display: "Instrument Serif", "Times New Roman", serif;
  --f-ui:      "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-ui);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Type */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.eyebrow.center { text-align: center; display:block; margin: 0 0 32px; }
.h-display {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.98;
  color: var(--ink);
  margin: 0;
}
.h-display em { font-style: italic; }
.italic-serif { font-family: var(--f-display); font-style: italic; font-weight: 400; }

.h1 { font-size: clamp(52px, 8.6vw, 124px); }
.h2 { font-size: clamp(40px, 6vw, 84px); }
.h3 { font-size: clamp(28px, 3.4vw, 44px); }

.lede {
  font-family: var(--f-ui);
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 58ch;
}

/* Layout */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 32px; position: relative; z-index: 3; }
@media (max-width: 640px) { .wrap { padding: 0 20px; } }
section { position: relative; }

/* Atmospheric orbs */
.atmos {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
  z-index: 0;
}
.orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(100px);
  opacity: .38;
  will-change: transform;
}
.orb--lg { width: 70vmin; height: 70vmin; filter: blur(120px); }
.orb--md { width: 48vmin; height: 48vmin; filter: blur(90px); }
.orb--sm { width: 28vmin; height: 28vmin; filter: blur(60px); }
.orb-learn    { background: radial-gradient(circle, var(--learn) 0%, transparent 65%); }
.orb-practice { background: radial-gradient(circle, var(--practice) 0%, transparent 65%); }
.orb-ezapply  { background: radial-gradient(circle, var(--ezapply) 0%, transparent 65%); }
.orb-screen   { background: radial-gradient(circle, var(--screen) 0%, transparent 65%); }
.orb-ink      { background: radial-gradient(circle, oklch(0.55 0.08 280) 0%, transparent 65%); opacity: .22; }

/* Buttons & chips */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 9999px;
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-ink    { background: var(--ink); color: white; box-shadow: var(--e2); }
.btn-ink:hover { box-shadow: var(--e3); }
.btn-glass  {
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: var(--e1);
  color: var(--ink);
}
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-radius: 9999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,.75);
  color: var(--ink-2);
  box-shadow: var(--e1);
}
.chip .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.chip-mini {
  display: inline-flex; align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}

.c-learn    { color: var(--learn); }
.c-practice { color: var(--practice); }
.c-ezapply  { color: var(--ezapply); }
.c-screen   { color: var(--screen); }

/* Glass */
.glass-1, .glass-2, .glass-3 {
  position: relative;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: var(--radius);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,.8);
}
.glass-2 { backdrop-filter: blur(36px) saturate(150%); box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,.7); background: rgba(255,255,255,.48); }
.glass-3 { backdrop-filter: blur(50px) saturate(150%); box-shadow: var(--e3), inset 0 1px 0 rgba(255,255,255,.6); background: rgba(255,255,255,.35); }

/* ===================== NAV ===================== */
.nav {
  position: fixed; top: 14px; left: 0; right: 0;
  z-index: 50;
  display: flex; justify-content: center;
  pointer-events: none;
}
.nav-inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: 24px;
  padding: 8px 8px 8px 18px;
  border-radius: 9999px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,.85);
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: -0.01em; font-size: 15px;
}
.nav-brand .mark {
  width: 24px; height: 24px; border-radius: 7px;
  background: conic-gradient(from 200deg, var(--learn), var(--practice), var(--ezapply), var(--screen), var(--learn));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 2px 6px rgba(20,22,40,.15);
}
.nav-brand img.mark-logo,
.nav-brand .mark-logo,
img.mark-logo {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  min-width: 0;
  flex: 0 0 28px;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain;
  display: inline-block;
}
.nav-links { display: flex; gap: 2px; }
.nav-links a {
  padding: 8px 14px; border-radius: 9999px;
  font-size: 13.5px; color: var(--ink-2);
  transition: background .2s, color .2s;
}
.nav-links a:hover { background: rgba(0,0,0,.04); color: var(--ink); }
.nav-cta {
  padding: 10px 18px; border-radius: 9999px;
  background: var(--ink); color: white;
  font-size: 13.5px; font-weight: 500;
}
@media (max-width: 860px) { .nav-links { display: none; } }

/* Reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }

/* ===================== HERO ===================== */
.hero {
  position: relative;
  padding: 160px 0 140px;
  overflow: hidden;
  min-height: 760px;
}
.hero-image-stage {
  position: absolute;
  top: 0; right: 0;
  width: 62%;
  height: 100%;
  z-index: 1;
  border-bottom-left-radius: var(--radius-xl);
  overflow: hidden;
}
.hero-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 35% center;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.03);
}
.hero-photo-grade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(249,248,246,.85) 22%, rgba(249,248,246,.15) 50%, transparent 80%),
    linear-gradient(180deg, rgba(249,248,246,.3) 0%, transparent 30%, transparent 70%, rgba(249,248,246,.6) 100%);
}

.hero-copy { position: relative; z-index: 3; max-width: 720px; }
.hero-chip { margin-bottom: 28px; }
.hero-sub  { margin-top: 28px; }
.hero-ctas { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }

.hero-stats {
  position: relative;
  z-index: 3;
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 32px 36px;
  border-radius: var(--radius-lg);
  max-width: 820px;
}
.stat-col { border-right: 1px solid rgba(20,22,40,.08); padding-right: 28px; }
.stat-col:last-child { border-right: 0; padding-right: 0; }
.stat-col + .stat-col { padding-left: 28px; }
.stat-b {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(42px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
  margin: 10px 0 8px;
}
.stat-label {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.45;
  display: block;
}
@media (max-width: 980px) {
  .hero-image-stage { width: 100%; opacity: .55; border-bottom-left-radius: 0; }
  .hero { padding: 140px 0 100px; }
}
@media (max-width: 640px) {
  .hero-stats { grid-template-columns: 1fr; padding: 24px; }
  .stat-col { border-right: 0; border-bottom: 1px solid rgba(20,22,40,.08); padding: 16px 0 !important; }
  .stat-col:last-child { border-bottom: 0; }
}

/* ===================== VALUE STRIP ===================== */
.marquee-section { padding: 80px 0 40px; position: relative; }
.value-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.value-cell {
  padding: 32px 28px;
  border-right: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px;
  font-size: 14.5px; color: var(--ink-2); line-height: 1.5;
}
.value-cell:last-child { border-right: 0; }
.value-cell b { color: var(--ink); font-weight: 600; }
.value-cell .dot {
  flex: 0 0 auto;
  width: 10px; height: 10px; border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in oklab, currentColor 18%, transparent);
}
@media (max-width: 860px) {
  .value-strip { grid-template-columns: 1fr; }
  .value-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .value-cell:last-child { border-bottom: 0; }
}

/* ===================== PRINCIPLES ===================== */
.num-row.principles .num-cell {
  padding: 40px 28px 36px;
  display: flex; flex-direction: column; gap: 10px;
}
.p-num {
  font-size: 28px; line-height: 1; color: var(--ink-3);
  display: block; margin-bottom: 8px;
}
.num-row.principles h5 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 28px; line-height: 1.1; letter-spacing: -0.01em;
  margin: 0; color: var(--ink);
}
.num-row.principles small {
  font-size: 14px; color: var(--ink-2); line-height: 1.55;
  margin-top: 6px; max-width: 34ch;
}

/* ===================== PERSONA CARDS ===================== */
.quote.persona {
  gap: 14px;
  border-top: 4px solid var(--accent, var(--ink));
  padding-top: 32px;
}
.quote.persona .persona-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(24px, 2vw, 30px); line-height: 1.15; letter-spacing: -0.01em;
  margin: 8px 0 6px;
  color: var(--ink);
}
.quote.persona p {
  margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55;
}
.quote.persona .eco-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500;
  margin-top: auto;
}
.quote.persona .eco-cta span[aria-hidden] { transition: transform .3s; }
.quote.persona:hover .eco-cta span[aria-hidden] { transform: translateX(4px); }

/* ===================== SECTION HEAD ===================== */
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 80px;
}
.section-head .left { display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 860px) {
  .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
}

/* ===================== ECOSYSTEM (image cards) ===================== */
.eco { padding: 140px 0 120px; }
.eco-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 860px) { .eco-grid { grid-template-columns: 1fr; } }

.eco-card {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--e2);
  display: block;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
  isolation: isolate;
}
.eco-card:hover { transform: translateY(-6px); box-shadow: var(--e4); }
.eco-photo { position: absolute; inset: 0; }
.eco-photo img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 30%;
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.eco-card:hover .eco-photo img { transform: scale(1.05); }
.eco-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 30%, rgba(15,18,34,.72) 100%),
              linear-gradient(180deg, color-mix(in oklab, var(--accent) 22%, transparent) 0%, transparent 55%);
}
.eco-overlay {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  padding: 24px 26px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 30px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.25);
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.eco-overlay h3 { text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.eco-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.eco-meta .eyebrow { color: rgba(255,255,255,.78); }
.eco-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent);
}
.eco-overlay h3 {
  font-family: var(--f-display); font-weight: 400; font-size: 40px;
  line-height: 1.05; letter-spacing: -0.015em;
  margin: 0 0 10px; color: white;
}
.eco-overlay p {
  margin: 0 0 16px;
  font-size: 14.5px; line-height: 1.55;
  color: rgba(255,255,255,.86);
  max-width: 54ch;
}
.eco-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500;
  color: white;
}
.eco-cta span[aria-hidden] { transition: transform .3s; }
.eco-card:hover .eco-cta span[aria-hidden] { transform: translateX(4px); }

/* ===================== PRODUCT SECTIONS ===================== */
.product { padding: 160px 0; position: relative; overflow: hidden; }
.product-head { margin-bottom: 72px; }
.product-head .left { display: flex; flex-direction: column; gap: 18px; max-width: 860px; }

.split-image {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.split-image.reversed { grid-template-columns: 1fr 1.2fr; }
@media (max-width: 980px) {
  .split-image, .split-image.reversed { grid-template-columns: 1fr; gap: 40px; }
  .split-image.reversed .split-photo { order: -1; }
}

.split-photo {
  position: relative;
  min-height: 620px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--e3);
  isolation: isolate;
}
.split-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.03);
}
.split-photo-grade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,18,34,.1) 0%, rgba(15,18,34,.0) 30%, rgba(15,18,34,.25) 100%);
}

/* Floating glass cards over photos */
.float-card {
  position: absolute;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(20,22,40,.18), inset 0 1px 0 rgba(255,255,255,.7);
  padding: 18px 20px;
  z-index: 2;
}

/* Practice — coach card */
.float-coach {
  left: 24px; right: 24px;
  bottom: 24px;
  padding: 20px 22px;
}
.coach-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 14px;
}
.pulse-dot {
  width: 9px; height: 9px; border-radius: 999px;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--practice) 25%, transparent);
  animation: pdot 1.8s ease-in-out infinite;
}
@keyframes pdot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: .7; } }

.voice-wave {
  display: block; width: 100%; height: 56px;
  margin-bottom: 12px;
  overflow: visible;
}
.voice-wave .wave { transition: d .05s linear; }
.coach-transcript { display: flex; flex-direction: column; gap: 6px; }
.coach-transcript .me {
  font-family: var(--f-display); font-weight: 400;
  font-size: 18px; line-height: 1.25; color: var(--ink); margin: 0;
}
.coach-transcript .ai {
  font-size: 12.5px; color: var(--practice); font-weight: 500; margin: 0;
  line-height: 1.4;
}

/* Practice — language card */
.float-lang {
  top: 24px; right: 24px;
  padding: 16px 18px;
  min-width: 200px;
}
.float-lang .eyebrow { display: block; margin-bottom: 10px; }
.lang-row {
  display: grid; grid-template-columns: 32px 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid rgba(20,22,40,.06);
  font-size: 13px;
}
.lang-row:first-of-type { border-top: 0; }
.lang-row b { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-2); letter-spacing: .08em; }
.lang-row i { font-style: normal; color: var(--ink); }
.lang-row .dotdot { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; color: var(--practice); text-transform: uppercase; }
.lang-row.muted i { color: var(--ink-3); }

/* Feature rail */
.feature-rail {
  display: flex; flex-direction: column; gap: 40px;
  padding: 8px 0;
}
.feature-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
}
.fr-num {
  font-size: 38px; line-height: 1;
  color: var(--ink-3);
  font-weight: 400;
}
.feature-row h5 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 28px; line-height: 1.1; letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.feature-row p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 46ch; }

/* Learn — dashboard card */
.float-dash {
  left: 24px; right: 24px; bottom: 24px;
  padding: 20px 22px;
}
.dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dash-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(20,22,40,.06);
  margin-bottom: 14px;
}
.dash-cell small { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); display: block; }
.dash-cell b { font-family: var(--f-display); font-weight: 400; font-size: 28px; line-height: 1.1; display: block; margin: 4px 0 6px; }
.dash-cell .bar { height: 5px; border-radius: 999px; background: rgba(0,0,0,.06); overflow: hidden; }
.dash-cell .bar i { display: block; height: 100%; border-radius: 999px; }
.ring-card {
  display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center;
}
.ring-card svg { width: 72px; height: 72px; }
.ring-card .eyebrow { display: block; }
.ring-card b { font-family: var(--f-display); font-weight: 400; font-size: 28px; letter-spacing: -0.01em; display: block; margin: 2px 0 2px; }
.ring-card p { margin: 0; font-size: 12px; color: var(--ink-3); }

/* EzApply — feed */
.float-feed {
  top: 24px; right: 24px; bottom: 24px;
  width: min(360px, 48%);
  padding: 18px 18px 14px;
  display: flex; flex-direction: column;
}
.feed-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.feed-list { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow: hidden; }
.feed-item {
  display: grid; grid-template-columns: 34px 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(20,22,40,.06);
}
.flogo {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; color: white;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
}
.fmeta b { font-family: var(--f-ui); font-weight: 600; font-size: 13.5px; color: var(--ink); display: block; }
.fmeta em { font-style: normal; color: var(--ink-3); font-size: 11.5px; display: block; margin-top: 2px; }
.fscore {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 26px;
  color: var(--ezapply);
  line-height: 1;
}
.feed-foot {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(20,22,40,.06);
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--ink-2);
}
.feed-foot .pulse-dot {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ezapply) 25%, transparent);
}

/* Screen — scorecard */
.float-score {
  left: 24px; right: 24px; bottom: 24px;
  padding: 20px 22px;
}
.score-head {
  display: grid; grid-template-columns: 44px 1fr auto;
  gap: 12px; align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(20,22,40,.06);
  margin-bottom: 14px;
}
.avatar {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--f-mono); font-weight: 600; font-size: 13px;
  color: white;
}
.score-head b { display: block; font-size: 15px; font-weight: 600; }
.score-head em { font-style: normal; color: var(--ink-3); font-size: 12px; display: block; margin-top: 2px; }
.score-list { display: flex; flex-direction: column; gap: 8px; }
.sb {
  display: grid; grid-template-columns: 120px 1fr 36px;
  align-items: center; gap: 12px;
  font-size: 12.5px; color: var(--ink-2);
}
.sbar { height: 6px; border-radius: 999px; background: rgba(0,0,0,.06); overflow: hidden; }
.sbar i { display: block; height: 100%; border-radius: 999px; }
.sb b { font-family: var(--f-mono); font-size: 12px; color: var(--ink); text-align: right; }
.score-foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(20,22,40,.06);
  display: flex; flex-direction: column; gap: 4px;
}
.score-foot span:last-child { font-size: 12px; color: var(--ink-2); }

/* ===================== CAPABILITIES ===================== */
.capabilities { padding: 140px 0; position: relative; }
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .cap-grid { grid-template-columns: 1fr; } }
.cap {
  position: relative;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,.7);
  overflow: hidden;
  min-height: 280px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.cap .pulse {
  position: absolute; top: -20%; right: -20%;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, currentColor 0%, transparent 60%);
  opacity: .20;
  pointer-events: none;
}
.cap h4 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 34px; line-height: 1.05; letter-spacing: -0.01em;
  color: var(--ink);
  margin: 16px 0 10px;
}
.cap p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }

/* ===================== OUTCOMES ===================== */
.outcomes { padding: 120px 0; position: relative; }
.num-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.num-cell {
  padding: 56px 28px;
  border-right: 1px solid var(--line);
}
.num-cell:last-child { border-right: 0; }
.num-cell b {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(56px, 6vw, 104px); line-height: 1;
  letter-spacing: -0.02em; display: block;
}
.num-cell b .unit { font-size: 0.42em; letter-spacing: 0; color: var(--ink-2); margin-left: 4px; }
.num-cell small {
  display: block; margin-top: 18px;
  font-size: 13.5px; color: var(--ink-2);
  line-height: 1.5; max-width: 28ch;
}
@media (max-width: 860px) {
  .num-row { grid-template-columns: repeat(2, 1fr); }
  .num-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .num-cell:nth-child(odd) { border-right: 1px solid var(--line); }
  .num-cell:last-child { border-bottom: 0; }
  .num-cell:nth-last-child(2) { border-bottom: 0; }
}

/* ===================== SOCIAL PROOF ===================== */
.proof { padding: 140px 0; }
.quote-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
@media (max-width: 980px) { .quote-grid { grid-template-columns: 1fr; } }

.quote {
  position: relative;
  padding: 36px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,.7);
  display: flex; flex-direction: column; gap: 24px;
  overflow: hidden;
}
.quote-photo {
  margin: -36px -36px 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.quote-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.quote blockquote {
  margin: 0; font-family: var(--f-display); font-weight: 400;
  font-size: clamp(20px, 1.7vw, 26px); line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.quote blockquote em { font-style: italic; }
.quote .who { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.quote .who .av {
  width: 40px; height: 40px; border-radius: 999px;
  display: grid; place-items: center; color: white; font-weight: 600;
  font-family: var(--f-mono); font-size: 13px;
}
.quote .who b { display: block; font-weight: 600; font-size: 14px; }
.quote .who span { font-size: 12px; color: var(--ink-3); }

/* ===================== FINAL CTA ===================== */
.cta-final { padding: 140px 0; position: relative; overflow: hidden; }
.cta-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 560px;
  display: flex; align-items: center; justify-content: center;
  padding: 96px 32px;
  text-align: center;
  isolation: isolate;
}
.cta-image { position: absolute; inset: 0; z-index: 1; }
.cta-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05); }
.cta-image-grade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(249,248,246,.55) 0%, rgba(249,248,246,.25) 45%, rgba(249,248,246,.55) 100%),
    radial-gradient(ellipse at center, rgba(255,255,255,.45) 0%, transparent 70%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cta-content {
  position: relative; z-index: 3;
  max-width: 760px;
  padding: 48px 40px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(34px) saturate(160%);
  -webkit-backdrop-filter: blur(34px) saturate(160%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: var(--e3), inset 0 1px 0 rgba(255,255,255,.8);
}
.cta-content .eyebrow { display: block; margin-bottom: 16px; }
.cta-content .ctas { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ===================== FOOTER ===================== */
footer {
  padding: 72px 0 48px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-3);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px; margin-bottom: 40px;
}
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
.footer-col h6 {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 16px;
  font-weight: 500;
}
.footer-col a { display: block; padding: 6px 0; color: var(--ink-2); font-size: 13.5px; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  border-top: 1px solid var(--line); padding-top: 28px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}