/* ============================================================
   FINSURI — Marketing site
   Built on the canonical v6 design tokens (PRD §6.2–6.4)
   ============================================================ */

:root {
  /* Color tokens — canonical hex (PRD §6.2) */
  --canvas:        #FBFBF9;
  --surface:       #FFFFFF;
  --hairline:      #E8E6E0;
  --ink:           #14171F;
  --ink-body:      #4A5160;
  --ink-muted:     #8A8F9C;
  --warm-hover:    #F4F2EC;
  --navy:          #1B2B5C;   /* AI accent */
  --crit-fg:       #B33A2A;
  --crit-bg:       #FBE8E2;
  --adv-fg:        #A8741F;
  --adv-bg:        #FBF1DC;
  --succ-fg:       #2C7A4A;
  --succ-bg:       #E2F1E8;
  --ai-tint:       #E8ECF5;

  /* Derived */
  --ink-on-dark:   #F4F3EF;
  --hairline-dark: rgba(255,255,255,0.12);

  --maxw: 1280px;

  --r-card: 14px;
  --r-btn:  9px;
  --r-pill: 9999px;
  --r-bezel: 30px;

  --shadow-sm: 0 1px 2px rgba(20,23,31,.04), 0 1px 1px rgba(20,23,31,.03);
  --shadow-md: 0 14px 40px -18px rgba(20,23,31,.22), 0 4px 12px -8px rgba(20,23,31,.14);
  --shadow-lg: 0 40px 90px -40px rgba(20,23,31,.40), 0 12px 30px -16px rgba(20,23,31,.18);

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

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

::selection { background: rgba(27,43,92,.16); }

h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: normal; }
.serif { font-family: 'Fraunces', Georgia, serif; font-style: italic; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---- Shared structural primitives ---- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-body);
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--navy); }
.label-muted {
  font-size: 10.5px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 11px 18px; border-radius: var(--r-btn);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
  white-space: nowrap; line-height: 1;
}
.btn svg { width: 15px; height: 15px; }
.btn-dark   { background: var(--ink); color: #fff; }
.btn-dark:hover   { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-navy   { background: var(--navy); color: #fff; }
.btn-navy:hover   { transform: translateY(-1px); box-shadow: 0 12px 30px -14px rgba(27,43,92,.6); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--hairline); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-ghost  { background: transparent; color: var(--ink-body); padding-left: 4px; padding-right: 4px; }
.btn-ghost:hover { color: var(--ink); }
.btn-lg { font-size: 15px; padding: 14px 22px; }

/* ---- Pills ---- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px 4px 8px; border-radius: var(--r-pill); line-height: 1;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.pill.crit { background: var(--crit-bg); color: var(--crit-fg); }
.pill.crit .dot { background: var(--crit-fg); }
.pill.adv  { background: var(--adv-bg);  color: var(--adv-fg); }
.pill.adv .dot  { background: var(--adv-fg); }
.pill.succ { background: var(--succ-bg); color: var(--succ-fg); }
.pill.succ .dot { background: var(--succ-fg); }

/* CarrierTag (PRD §6.9) — text identity, not logo tile */
.carrier { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink); }
.carrier .bar { width: 3px; height: 13px; border-radius: 2px; background: var(--navy); }

/* "coming soon" badge */
.soon {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  color: var(--adv-fg); background: var(--adv-bg);
  padding: 2px 7px; border-radius: var(--r-pill); margin-left: 7px; vertical-align: middle;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(251,251,249,.82);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--hairline);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 16px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-family: 'Sora', 'Inter', system-ui, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.045em; text-transform: lowercase; color: var(--ink); }
.brand .brand-mark { height: 32px; width: auto; display: block; }
.brand .dot { color: var(--navy); }
.nav-center {
  display: flex; align-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--hairline);
  padding: 5px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
}
.nav-center a {
  font-size: 13.5px; font-weight: 500; color: var(--ink-body);
  padding: 8px 15px; border-radius: var(--r-pill);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.nav-center a:hover { background: var(--warm-hover); color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-login { color: var(--ink-body); font-size: 13.5px; font-weight: 600; padding: 9px 6px; transition: color .16s var(--ease); }
.nav-login:hover { color: var(--ink); }

/* ============================================================
   HERO  — framed bezel (Fynsec energy, Finsuri tokens)
   ============================================================ */
.hero { padding: 104px 20px 24px; }
.bezel {
  max-width: 1480px; margin: 0 auto;
  background: var(--ink);
  border-radius: var(--r-bezel);
  padding: 14px;
  box-shadow: var(--shadow-lg);
}
.bezel-inner {
  position: relative; overflow: hidden;
  background: var(--canvas);
  border-radius: calc(var(--r-bezel) - 12px);
  min-height: 560px;
  display: grid; grid-template-columns: 1.05fr .95fr;
}
.hero-copy { padding: 64px 24px 64px 64px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.hero-eyebrow { margin-bottom: 26px; }
.hero h1 {
  font-size: clamp(46px, 6.1vw, 88px);
  font-weight: 700; letter-spacing: -0.035em; line-height: 0.98;
  color: var(--ink); text-wrap: balance; max-width: 14ch;
}
.hero h1 .accent { color: var(--navy); }
.hero h1 .serif { letter-spacing: -0.01em; font-weight: 400; }
.hero-sub {
  margin-top: 26px; font-size: 17px; line-height: 1.55; color: var(--ink-body);
  max-width: 40ch;
}
.hero-cta { margin-top: 34px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-meta { margin-top: 28px; display: flex; align-items: center; gap: 18px; color: var(--ink-muted); font-size: 12.5px; }
.hero-meta .sep { width: 1px; height: 13px; background: var(--hairline); }

.hero-visual {
  position: relative; padding: 0 0 0 6px;
  display: flex; align-items: center; justify-content: flex-start;
  min-width: 0; align-self: center;
}

/* glow plate behind the mock */
.hero-visual::before {
  content: ""; position: absolute; inset: 8% 14% 8% 0;
  background: radial-gradient(120% 100% at 70% 30%, rgba(27,43,92,.10), transparent 60%);
  filter: blur(8px); z-index: 0;
}

/* ---- Hero variant: DARK ---- */
[data-hero="dark"] .bezel-inner { background: var(--navy); }
[data-hero="dark"] .hero h1 { color: var(--ink-on-dark); }
[data-hero="dark"] .hero h1 .accent { color: #9db2ef; }
[data-hero="dark"] .hero-sub { color: rgba(244,243,239,.74); }
[data-hero="dark"] .hero-eyebrow { color: rgba(244,243,239,.7); }
[data-hero="dark"] .hero-eyebrow .dot { background: #9db2ef; }
[data-hero="dark"] .hero-meta { color: rgba(244,243,239,.5); }
[data-hero="dark"] .hero-meta .sep { background: rgba(255,255,255,.16); }
[data-hero="dark"] .btn-navy { background: #fff; color: var(--navy); }
[data-hero="dark"] .hero-visual::before { background: radial-gradient(120% 100% at 70% 30%, rgba(157,178,239,.22), transparent 60%); }
[data-hero="dark"] .hero-copy .btn-ghost { color: rgba(244,243,239,.82); }
[data-hero="dark"] .hero-copy .btn-ghost:hover { color: #fff; }

/* ---- Hero variant: OPEN (no bezel, editorial) ---- */
[data-hero="open"] .hero { padding-top: 150px; }
[data-hero="open"] .bezel { background: transparent; padding: 0; box-shadow: none; max-width: var(--maxw); }
[data-hero="open"] .bezel-inner { background: transparent; overflow: visible; border-radius: 0; min-height: 480px; }
[data-hero="open"] .hero-copy { padding: 0 24px 0 0; }
[data-hero="open"] .hero h1 { font-size: clamp(48px, 6.6vw, 96px); }
[data-hero="open"] .hero-visual { padding: 0; }
[data-hero="open"] .hero-visual::before { inset: 4% 4% 4% 4%; }

/* ============================================================
   Abstracted product mock — Workspace fragment
   ============================================================ */
.mock {
  position: relative; z-index: 1; width: 100%; max-width: 460px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-card); box-shadow: var(--shadow-md);
  overflow: hidden;
}
.mock-head {
  padding: 13px 16px; border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface);
}
.mock-head .lhs { display: flex; align-items: center; gap: 9px; }
.mock-dotrow { display: flex; gap: 5px; }
.mock-dotrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline); display: block; }
.mock-title { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--ink); }
.mock-body { padding: 16px; display: flex; flex-direction: column; gap: 11px; background: var(--canvas); }

.queue-item {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 11px; padding: 13px 14px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.queue-item .stripe { position: absolute; left: 0; top: 14px; width: 3px; height: 16px; border-radius: 2px; }
.queue-item.crit .stripe { background: var(--crit-fg); }
.queue-item.adv  .stripe { background: var(--adv-fg); }
.queue-top { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; margin-left: 8px; }
.queue-top .pill { flex: none; }
.queue-top .carrier { flex: none; }
.queue-top .who { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-top .ago { margin-left: auto; font-size: 11px; color: var(--ink-muted); flex: none; white-space: nowrap; }
.queue-line { margin: 8px 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.queue-meta { margin: 5px 0 0 8px; font-size: 11.5px; color: var(--ink-body); }

/* ---- Full Workspace panel (hero snapshot) ---- */
.app-panel { width: 760px; max-width: none; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); position: relative; z-index: 1; }
.app-bar { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 13px 20px; border-bottom: 1px solid var(--hairline); }
.app-bar .lhs { display: flex; align-items: center; gap: 28px; }
.app-brand { font-size: 13px; font-weight: 800; letter-spacing: .2em; color: var(--ink); }
.app-nav { display: flex; gap: 18px; }
.app-nav span { font-size: 12.5px; color: var(--ink-muted); font-weight: 500; white-space: nowrap; }
.app-nav span.on { color: var(--ink); font-weight: 700; }
.app-bar .rhs { display: flex; align-items: center; gap: 14px; }
.app-bar .ico { width: 15px; height: 15px; color: var(--ink-muted); flex: none; }
.app-bar .av { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; flex: none; }
.app-body { padding: 22px 24px 24px; background: var(--canvas); }
.app-greet { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.app-greet .g1 { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 20px; color: var(--ink-body); white-space: nowrap; }
.app-greet .g2 { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; margin-top: 3px; }
.app-greet .meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.app-secline { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); display: flex; align-items: center; gap: 12px; margin-bottom: 12px; white-space: nowrap; }
.app-secline b { color: var(--ink-body); font-weight: 600; }
.app-secline .rule { flex: 1; height: 1px; background: var(--hairline); }
.app-body .queue-item { margin-bottom: 10px; box-shadow: none; }
.app-body .queue-item:last-of-type { margin-bottom: 0; }
.queue-top .lob { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-muted); flex: none; }
.glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 20px; border-top: 1px solid var(--hairline); padding-top: 16px; }
.glance .gc { padding-right: 18px; border-right: 1px solid var(--hairline); }
.glance .gc:last-child { border-right: none; }
.glance .gc .gl { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.glance .gc .gn { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-top: 7px; font-variant-numeric: tabular-nums; }
.glance .gc .gn .up { font-size: 11px; color: var(--succ-fg); font-weight: 600; margin-left: 5px; font-family: 'JetBrains Mono', monospace; }
.glance .gc .gs { font-size: 10.5px; color: var(--ink-muted); margin-top: 3px; }

/* extraction chip animation row */
.extract-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-body); min-width: 0; }
.extract-row .k { color: var(--ink-muted); min-width: 64px; flex: none; }
.extract-row .v { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.extract-row .carrier { flex: none; }

/* ============================================================
   SECTION scaffolding
   ============================================================ */
section { position: relative; }
.section-pad { padding: 100px 0; }
.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-title {
  font-size: clamp(30px, 3.6vw, 46px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.02; color: var(--ink); text-wrap: balance;
}
.section-title .serif { font-weight: 400; letter-spacing: -0.01em; }
.section-intro { margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--ink-body); max-width: 56ch; }
.section-head.center .section-intro { margin-left: auto; margin-right: auto; }

/* ---- Carrier strip ---- */
.carriers { padding: 44px 0 8px; }
.carriers .cap { text-align: center; color: var(--ink-muted); font-size: 12px; letter-spacing: .04em; margin-bottom: 24px; }
.carriers .cap b { color: var(--ink-body); font-weight: 600; }
.carrier-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 30px;
}
.carrier-row .carrier { opacity: .82; }

/* ---- Problem section (dark moment) ---- */
.problem {
  background: var(--ink); color: var(--ink-on-dark);
  border-radius: var(--r-bezel); margin: 0 20px;
  padding: 96px 0; overflow: hidden; position: relative;
}
.problem .wrap { position: relative; z-index: 1; }
.problem .eyebrow { color: rgba(244,243,239,.62); }
.problem .eyebrow .dot { background: #9db2ef; }
.problem .section-title { color: var(--ink-on-dark); }
.problem .section-intro { color: rgba(244,243,239,.66); }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 64px; border-top: 1px solid var(--hairline-dark); }
.problem-cell { padding: 32px 28px 4px 0; border-right: 1px solid var(--hairline-dark); }
.problem-cell:last-child { border-right: none; padding-right: 0; }
.problem-cell .pnum { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #9db2ef; letter-spacing: .1em; }
.problem-cell h3 { margin-top: 16px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-on-dark); }
.problem-cell p { margin-top: 11px; font-size: 14.5px; line-height: 1.6; color: rgba(244,243,239,.6); }

/* problem band — light variant (toggle off) */
.problem.light { background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); }
.problem.light .eyebrow { color: var(--ink-body); }
.problem.light .eyebrow .dot { background: var(--navy); }
.problem.light .section-title { color: var(--ink); }
.problem.light .section-intro { color: var(--ink-body); }
.problem.light .problem-grid { border-top-color: var(--hairline); }
.problem.light .problem-cell { border-right-color: var(--hairline); }
.problem.light .problem-cell .pnum { color: var(--navy); }
.problem.light .problem-cell h3 { color: var(--ink); }
.problem.light .problem-cell p { color: var(--ink-body); }
@media (max-width: 720px) {
  .problem.light .problem-cell { border-bottom-color: var(--hairline); }
}

/* ---- How it works (numbered flow — Style B presentation) ---- */
.flow { border-top: 1px solid var(--ink); margin-top: 8px; }
.flow-row { display: grid; grid-template-columns: 64px 1fr 1fr; gap: 36px; align-items: start; padding: 36px 0; border-bottom: 1px solid var(--hairline); }
.flow-row .fn { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--navy); padding-top: 6px; }
.flow-row .fmain h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.018em; line-height: 1.1; }
.flow-row .fmain p { margin-top: 11px; font-size: 14.5px; line-height: 1.6; color: var(--ink-body); max-width: 42ch; }
.flow-row .fart { display: flex; justify-content: flex-start; align-items: flex-start; }

/* ---- How it works ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-card); padding: 26px; position: relative; overflow: hidden;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.step:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.step .step-no {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em;
  color: var(--navy); font-weight: 500;
}
.step h3 { margin-top: 14px; font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.step p { margin-top: 10px; font-size: 14.5px; line-height: 1.58; color: var(--ink-body); }
.step .step-art { margin-top: 22px; }

/* mini chat / extraction art inside steps */
.chat-bubble {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 10px 10px 10px 3px; padding: 9px 12px; font-size: 12.5px;
  color: var(--ink-body); display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-sm);
}
.chat-bubble .wa { width: 16px; height: 16px; border-radius: 4px; background: var(--succ-bg); color: var(--succ-fg);
  display: grid; place-items: center; font-size: 9px; }
.fieldset { background: var(--canvas); border: 1px solid var(--hairline); border-radius: 10px; padding: 11px 13px; display: flex; flex-direction: column; gap: 7px; }

/* ---- Features grid ---- */
.feat-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.feat {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-card); padding: 26px; overflow: hidden; position: relative;
  display: flex; flex-direction: column;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.feat:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: #dcd9d0; }
.feat .feat-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--ai-tint); color: var(--navy);
  display: grid; place-items: center; margin-bottom: 18px; }
.feat .feat-ico svg { width: 18px; height: 18px; }
.feat h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.feat p { margin-top: 9px; font-size: 14px; line-height: 1.55; color: var(--ink-body); }
.feat .feat-art { margin-top: auto; padding-top: 22px; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-8 { grid-column: span 8; }

/* ---- Gap spotlight ---- */
.spotlight { display: grid; grid-template-columns: .92fr 1.08fr; gap: 56px; align-items: center; }
.gap-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: 18px 18px 8px; box-shadow: var(--shadow-md);
}
.gap-card .gc-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.gap-card .gc-head .label-muted { white-space: nowrap; }
.gap-item { padding: 16px 0; border-bottom: 1px solid var(--hairline); position: relative; }
.gap-item:last-child { border-bottom: none; }
.gap-item .gi-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gap-item h4 { font-size: 15px; font-weight: 700; color: var(--ink); }
.gap-item .gi-desc { margin-top: 9px; font-size: 13.5px; line-height: 1.5; color: var(--ink-body); }
.gap-item .gi-cols { margin-top: 13px; display: grid; grid-template-columns: 1.1fr 1.3fr 1fr; gap: 16px; }
.gap-item .gi-cols .label-muted { display: block; margin-bottom: 5px; }
.gap-item .gi-cols .v { font-size: 12px; color: var(--ink-body); line-height: 1.45; }
.gap-item .gi-cols .v.mono { font-size: 11.5px; color: var(--ink); }

.spot-list { margin-top: 30px; display: flex; flex-direction: column; gap: 18px; }
.spot-list .sl-item { display: flex; gap: 14px; }
.spot-list .sl-mark { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--ai-tint); color: var(--navy); display: grid; place-items: center; margin-top: 2px; }
.spot-list .sl-mark svg { width: 14px; height: 14px; }
.spot-list h4 { font-size: 15.5px; font-weight: 600; }
.spot-list p { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--ink-body); }

/* ---- Testimonials ---- */
.tcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tcard {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: 26px; display: flex; flex-direction: column;
}
.tcard.feature { grid-column: span 2; background: var(--ink); color: var(--ink-on-dark); }
.tcard .quote { font-size: 16.5px; line-height: 1.55; letter-spacing: -0.01em; color: var(--ink); }
.tcard.feature .quote { font-size: clamp(20px,2vw,26px); font-weight: 500; color: var(--ink-on-dark); letter-spacing: -0.02em; }
.tcard .quote .serif { color: var(--navy); }
.tcard.feature .quote .serif { color: #9db2ef; }
.tcard .who { margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 12px; }
.tcard .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.tcard .who .nm { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.tcard.feature .who .nm { color: #fff; }
.tcard .who .rl { font-size: 12px; color: var(--ink-muted); }
.tcard.feature .who .rl { color: rgba(244,243,239,.55); }
.tcard.feature .who .avatar { background: #fff; color: var(--navy); }

/* ---- Closing CTA ---- */
.cta-final { text-align: center; padding: 120px 0 60px; }
.cta-final h2 { font-size: clamp(38px, 5.2vw, 74px); font-weight: 700; letter-spacing: -0.035em; line-height: .98; text-wrap: balance; }
.cta-final h2 .serif { font-weight: 400; color: var(--navy); }
.cta-final h2 .rotator { display: inline-block; transition: opacity .36s var(--ease), transform .36s var(--ease); will-change: opacity, transform; }
.cta-final h2 .rotator.swap { opacity: 0; transform: translateY(-0.16em); }
.cta-final p { margin: 22px auto 0; max-width: 46ch; font-size: 17px; color: var(--ink-body); }
.cta-final .hero-cta { justify-content: center; margin-top: 36px; }

/* ---- Footer ---- */
.footer { border-top: 1px solid var(--hairline); padding: 56px 0 40px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.footer .brand { margin-bottom: 16px; display: inline-flex; align-items: center; gap: 10px; font-size: 28px; }
.footer .brand .brand-mark { height: 44px; }
.footer .fdesc { font-size: 13.5px; color: var(--ink-body); max-width: 34ch; line-height: 1.55; }
.footer h5 { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer ul a { font-size: 13.5px; color: var(--ink-body); transition: color .15s var(--ease); }
.footer ul a:hover { color: var(--ink); }
.footer-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-muted); }
.footer-bottom .disc { max-width: 62ch; line-height: 1.5; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; }
.reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .nav-center { display: none; }
  .bezel-inner { grid-template-columns: 1fr; }
  .hero-copy { padding: 48px 36px 8px; }
  .hero-visual { padding: 4px 36px 40px; justify-content: stretch; align-items: stretch; }
  .app-panel { width: 100%; }
  .app-nav { display: none; }
  .spotlight { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  .section-pad { padding: 72px 0; }
  .problem { margin: 0 12px; padding: 64px 0; }
  .problem-grid, .steps, .feat-grid, .tcols { grid-template-columns: 1fr; }
  .flow-row { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
  .flow-row .fn { padding-top: 0; }
  .col-6, .col-4, .col-8, .tcard.feature { grid-column: span 1; }
  .problem-cell { border-right: none; border-bottom: 1px solid var(--hairline-dark); padding: 26px 0; }
  .problem-cell:last-child { border-bottom: none; }
  .hero { padding-top: 88px; }
  .hero-visual { padding: 4px 20px 36px; }
  .glance { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .glance .gc:nth-child(2) { border-right: none; }
  .app-greet .meta { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .nav-right .nav-login { display: none; }
}