/* ═══════════════════════════════════════════════════════════════════
   Revio Insight — shared design system
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ─────────────────────────────────────────────── */
:root {
  --blue-bright:      #005da5;
  --blue-navy:        #132048;
  --blue-electric:    #1a7fe8;
  --blue-sky:         #60A5FA;
  --blue-midnight:    #090f1e;
  --blue-deep:        #0d1a38;
  --blue-mid:         #0f2455;
  --blue-soft:        rgba(0, 93, 165, 0.09);
  --blue-glow:        rgba(26, 127, 232, 0.17);

  --red:              #DC2626;
  --red-soft:         rgba(220, 38, 38, 0.08);
  --amber:            #D97706;
  --amber-soft:       rgba(217, 119, 6, 0.10);
  --green:            #16A34A;
  --green-soft:       rgba(22, 163, 74, 0.09);

  --canvas:           #FFFFFF;
  --canvas-dark:      #13161d;
  --surface:          #F7F8FC;
  --surface-soft:     #FAFBFE;
  --surface-code:     #0d1117;
  --hairline:         #E2E8F0;
  --hairline-soft:    #F1F5F9;

  --ink:              #0A0E1A;
  --charcoal:         #1E2B45;
  --slate:            #3D4E6B;
  --steel:            #64748B;
  --stone:            #94A3B8;
  --muted:            #CBD5E1;
  --on-dark:          #FFFFFF;
  --on-dark-muted:    rgba(255,255,255,0.54);

  --hero-from:        #13161f;
  --hero-mid:         #0f1c35;
  --hero-to:          #363d48;

  --font-sans: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Roboto Mono', Consolas, monospace;

  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px;
  --r-xl:16px; --r-xxl:24px; --r-full:9999px;

  --sp-xxs:4px; --sp-xs:8px; --sp-sm:12px; --sp-md:16px;
  --sp-lg:20px; --sp-xl:24px; --sp-xxl:32px; --sp-xxxl:40px;
  --sp-section-sm:48px; --sp-section:80px;
  --sp-section-lg:128px; --sp-hero:120px;

  --shadow-card:   0 4px 16px rgba(13,26,56,0.08);
  --shadow-mockup: 0 28px 56px -8px rgba(9,15,30,0.55);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-xxl); }
.tag {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--blue-electric); background: var(--blue-soft);
  padding: 4px 10px; border-radius: var(--r-full); margin-bottom: var(--sp-lg);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-xs); font-size: 14px; font-weight: 500; line-height: 1.3;
  padding: 10px 20px; border-radius: var(--r-full); transition: all .15s; white-space: nowrap;
}
.btn-primary  { background: var(--ink); color: var(--on-dark); }
.btn-accent   { background: var(--blue-bright); color: var(--on-dark); }
.btn-accent:hover { background: var(--blue-electric); }
.btn-electric { background: var(--blue-electric); color: var(--on-dark); }
.btn-electric:hover { background: var(--blue-bright); }
.btn-on-dark  { background: var(--on-dark); color: var(--ink); }
.btn-outline  { background: transparent; color: var(--on-dark); border: 1px solid rgba(255,255,255,0.22); }
.btn-outline:hover { background: rgba(255,255,255,0.07); }
.btn-outline-light { background: transparent; color: var(--ink); border: 1px solid var(--hairline); }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ─── Promo Banner ──────────────────────────────────────────────── */
.promo-banner {
  background: var(--blue-navy); color: var(--on-dark);
  text-align: center; padding: 10px var(--sp-md); font-size: 13px; font-weight: 500;
}
.promo-banner a { color: var(--blue-sky); text-decoration: underline; text-decoration-color: rgba(96,165,250,0.4); margin-left: 6px; }

/* ─── Nav ───────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline-soft);
  height: 64px; display: flex; align-items: center;
}
.nav .container { display: flex; align-items: center; gap: var(--sp-xxl); width: 100%; }
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img { height: 28px; width: auto; max-width: 140px; object-fit: contain; flex-shrink: 0; }
.nav-badge {
  font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: var(--r-full);
  background: var(--blue-soft); color: var(--blue-bright); margin-left: var(--sp-sm);
}
.nav-links { display: flex; align-items: center; gap: var(--sp-xs); flex: 1; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--steel); padding: 6px var(--sp-sm); border-radius: var(--r-sm); transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--blue-bright); }
.nav-actions { display: flex; align-items: center; gap: var(--sp-xs); margin-left: auto; }
.nav-item-dd { position: relative; }
.nav-dd-btn { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; color: var(--steel); padding: 6px var(--sp-sm); border-radius: var(--r-sm); transition: color .15s; }
.nav-dd-btn svg { width: 13px; height: 13px; transition: transform .15s; }
.nav-item-dd:hover .nav-dd-btn { color: var(--ink); }
.nav-item-dd:hover .nav-dd-btn svg { transform: rotate(180deg); }
.nav-dd { position: absolute; top: 100%; left: 0; padding-top: 8px; display: none; z-index: 120; }
.nav-item-dd:hover .nav-dd, .nav-item-dd:focus-within .nav-dd { display: block; }
.nav-dd-inner { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(13,26,56,.14); padding: 6px; min-width: 180px; }
.nav-dd a { display: block; padding: 9px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--slate); }
.nav-dd a:hover { background: var(--surface); color: var(--ink); }
.nav-dd a.active { color: var(--blue-bright); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-md); color: var(--ink); margin-left: auto; }
.nav-toggle svg { width: 20px; height: 20px; }
.mobile-menu {
  display: none; position: fixed; top: 72px; right: 12px; z-index: 99;
  width: min(304px, calc(100vw - 24px)); max-height: calc(100vh - 96px);
  background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  box-shadow: 0 24px 56px -12px rgba(9,15,30,.35), 0 0 0 1px rgba(9,15,30,.03);
  padding: var(--sp-xs) var(--sp-lg) var(--sp-lg);
  flex-direction: column; overflow-y: auto;
  transform-origin: top right;
}
.mobile-menu.open { animation: sheetIn .16s ease; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.nav-toggle .ico-close { display: none; }
.nav-toggle.open .ico-open { display: none; }
.nav-toggle.open .ico-close { display: block; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 15px; font-weight: 500; color: var(--ink); padding: 13px 0; border-bottom: 1px solid var(--hairline-soft); }
.mobile-menu a.btn { color: var(--on-dark); border-bottom: none; padding: 11px 20px; margin-top: var(--sp-sm); }

/* ─── Hero ──────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(160deg, var(--hero-from) 0%, var(--hero-mid) 55%, var(--hero-to) 100%);
  position: relative; overflow: hidden; padding: var(--sp-hero) 0;
}
.hero--page { padding: 88px 0; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 55% at 82% 35%, rgba(26,127,232,0.13) 0%, transparent 65%),
              radial-gradient(ellipse 45% 70% at 8% 85%,  rgba(0,93,165,0.09) 0%,  transparent 60%);
  pointer-events: none;
}
.hero .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-section); align-items: center; position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--blue-sky); margin-bottom: var(--sp-xl);
}
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-sky); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.35)} }
.hero h1 { font-size: 54px; font-weight: 600; line-height: 1.08; letter-spacing: -2px; color: var(--on-dark); margin-bottom: var(--sp-xl); }
.hero--page h1 { font-size: 48px; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--blue-sky), #BAD9FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-sub { font-size: 17px; line-height: 1.60; color: var(--on-dark-muted); max-width: 450px; margin-bottom: var(--sp-xxxl); }
.hero-actions { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; }
.hero-social-proof { margin-top: var(--sp-xxl); display: flex; align-items: center; gap: var(--sp-md); color: var(--on-dark-muted); font-size: 13px; flex-wrap: wrap; }
.hero-social-proof-logos { display: flex; gap: var(--sp-xs); flex-wrap: wrap; }
.hero-social-proof-logos span { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.34); background: rgba(255,255,255,0.08); padding: 3px 9px; border-radius: var(--r-full); border: 1px solid rgba(255,255,255,0.11); }
.hero-social-proof-logos a span { transition: color .15s, border-color .15s; }
.hero-social-proof-logos a:hover span { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.3); }

/* ─── Hero Chat ─────────────────────────────────────────────────── */
.hero-chat {
  background: #FFFFFF; border-radius: var(--r-xl);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 28px 56px -8px rgba(9,15,30,0.35), 0 0 0 1px rgba(0,93,165,0.06); overflow: hidden;
}
.chat-chrome {
  display: flex; align-items: center; gap: var(--sp-sm); padding: 12px var(--sp-md);
  background: #F7F8FC; border-bottom: 1px solid #E2E8F0;
}
.chrome-dot { width: 11px; height: 11px; border-radius: 50%; }
.chrome-dot.r{background:#FF5F56} .chrome-dot.y{background:#FFBD2E} .chrome-dot.g{background:#27C93F}
.chrome-title { margin: 0 auto; font-size: 12px; color: #94A3B8; font-family: var(--font-mono); }
.hchat-body { padding: var(--sp-md) var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-md); background: #FFFFFF; }
.hchat-row { display: flex; gap: var(--sp-sm); align-items: flex-start; }
.hchat-row.user { flex-direction: row-reverse; }
.hchat-av { width: 26px; height: 26px; border-radius: var(--r-full); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.hchat-av.user { background: var(--blue-bright); color: var(--on-dark); }
.hchat-av.ai   { background: var(--blue-navy);   color: var(--on-dark); }
.hchat-bubble { max-width: 80%; font-size: 12px; line-height: 1.55; padding: 9px 12px; border-radius: var(--r-lg); }
.hchat-row.user .hchat-bubble { background: var(--blue-bright); color: var(--on-dark); border-bottom-right-radius: var(--r-xs); }
.hchat-row.ai  .hchat-bubble { background: #F7F8FC; color: #1E2B45; border: 1px solid #E2E8F0; border-bottom-left-radius: var(--r-xs); }
.hchat-tool { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--blue-bright); background: var(--blue-soft); border: 1px solid rgba(0,93,165,0.18); padding: 3px 8px; border-radius: var(--r-full); margin-bottom: 7px; }
.hchat-tool svg { width: 10px; height: 10px; }
.hchat-table { width: 100%; border-collapse: collapse; margin-top: 7px; font-size: 11px; }
.hchat-table th { font-size: 10px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: #94A3B8; padding: 4px 5px; border-bottom: 1px solid #E2E8F0; text-align: left; }
.hchat-table td { padding: 5px 5px; border-bottom: 1px solid #F1F5F9; color: #1E2B45; }
.hchat-table .hi { color: var(--blue-bright); font-weight: 600; }
.hchat-table .neg { color: var(--red); font-weight: 600; }
.hchat-cursor { display: inline-block; width: 6px; height: 13px; background: var(--blue-bright); margin-left: 2px; vertical-align: middle; animation: blink 1.1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ─── Logos ─────────────────────────────────────────────────────── */
.logos-section { padding: var(--sp-section-sm) 0; border-bottom: 1px solid var(--hairline-soft); }
.logos-label { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--stone); margin-bottom: var(--sp-xl); }
.logos-grid { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.logo-item { display: flex; align-items: center; justify-content: center; gap: var(--sp-xs); padding: var(--sp-md) var(--sp-xl); color: var(--muted); font-size: 14px; font-weight: 600; transition: color .15s; border-right: 1px solid var(--hairline-soft); }
.logo-item:last-child { border-right: none; }
.logo-item svg { width: 19px; height: 19px; flex-shrink: 0; }
.logo-item:hover { color: var(--steel); }

/* ─── Section ───────────────────────────────────────────────────── */
.section { padding: var(--sp-section-lg) 0; }
.section-alt { background: var(--surface); }
.section-dark { background: linear-gradient(160deg, #0f1c35 0%, #0c0e11 100%); }
.section-header { text-align: center; max-width: 640px; margin: 0 auto var(--sp-section); }
.section-header h2 { font-size: 42px; font-weight: 600; line-height: 1.12; letter-spacing: -1.2px; color: var(--ink); margin-bottom: var(--sp-lg); }
.section-header.dark h2 { color: var(--on-dark); }
.section-header p { font-size: 17px; line-height: 1.60; color: var(--steel); }
.section-header.dark p { color: var(--on-dark-muted); }
.section-closer { text-align: center; margin-top: var(--sp-section-sm); font-size: 16px; font-weight: 600; color: var(--ink); }
.section-closer a { color: var(--blue-bright); }

/* ─── Features ──────────────────────────────────────────────────── */
.features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-lg); }
.features-grid.cols-4 { grid-template-columns: repeat(4,1fr); }
.feature-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--sp-xxl); transition: box-shadow .2s, transform .2s; }
.feature-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.feature-icon { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--blue-soft); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-xl); }
.feature-icon svg { width: 22px; height: 22px; color: var(--blue-bright); }
.feature-icon.risk { background: var(--red-soft); }
.feature-icon.risk svg { color: var(--red); }
.feature-card h3 { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: var(--sp-sm); letter-spacing: -0.2px; }
.feature-card p { font-size: 14px; line-height: 1.65; color: var(--steel); }
.feature-badge { display: inline-block; margin-top: var(--sp-md); font-size: 11px; font-weight: 600; letter-spacing: 0.3px; padding: 3px 9px; border-radius: var(--r-full); background: var(--blue-bright); color: var(--on-dark); }
.ic { font-family: var(--font-mono); font-size: 12px; background: var(--surface); padding: 1px 4px; border-radius: 4px; border: 1px solid var(--hairline); }

/* ─── Example Conversations / Carousel ──────────────────────────── */
.examples-section { padding: var(--sp-section-lg) 0; background: var(--surface); }
.examples-intro { max-width: 540px; margin: 0 auto var(--sp-section); text-align: center; }
.examples-intro h2 { font-size: 42px; font-weight: 600; letter-spacing: -1.2px; color: var(--ink); margin-bottom: var(--sp-lg); }
.examples-intro p { font-size: 17px; color: var(--steel); line-height: 1.6; }
.carousel-wrap { position: relative; }
.examples-carousel {
  display: flex; gap: var(--sp-xl); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  padding: 4px 4px 20px; cursor: grab;
}
.examples-carousel:active { cursor: grabbing; }
.examples-carousel::-webkit-scrollbar { height: 4px; }
.examples-carousel::-webkit-scrollbar-track { background: transparent; }
.examples-carousel::-webkit-scrollbar-thumb { background: rgba(0,93,165,0.2); border-radius: 2px; }
.examples-carousel .example-card { flex: 0 0 380px; scroll-snap-align: start; min-width: 0; }
.carousel-nav { display: flex; justify-content: center; align-items: center; gap: var(--sp-sm); margin-top: var(--sp-md); }
.carousel-btn {
  width: 36px; height: 36px; border-radius: var(--r-full);
  background: var(--canvas); border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  color: var(--slate); transition: all .15s; cursor: pointer;
}
.carousel-btn:hover { background: var(--blue-soft); border-color: var(--blue-bright); color: var(--blue-bright); }
.carousel-btn svg { width: 16px; height: 16px; }
.carousel-dots { display: flex; gap: 6px; align-items: center; }
.carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); transition: all .2s; cursor: pointer; }
.carousel-dot.active { background: var(--blue-bright); width: 20px; border-radius: 4px; }
.example-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-card); transition: transform .2s, box-shadow .2s; }
.example-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(13,26,56,0.12); }
.example-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-md) var(--sp-xl); border-bottom: 1px solid var(--hairline-soft); background: var(--surface); }
.example-label { display: flex; align-items: center; gap: var(--sp-sm); font-size: 12px; font-weight: 600; color: var(--slate); }
.example-label-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-bright); }
.example-tool { font-size: 11px; font-weight: 500; color: var(--stone); font-family: var(--font-mono); background: var(--surface); border: 1px solid var(--hairline); padding: 2px 8px; border-radius: var(--r-full); }
.example-convo { padding: var(--sp-xl); display: flex; flex-direction: column; gap: var(--sp-md); }
.ex-msg { display: flex; gap: var(--sp-sm); align-items: flex-start; }
.ex-msg.user { flex-direction: row-reverse; }
.ex-av { width: 26px; height: 26px; border-radius: var(--r-full); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.ex-av.user { background: var(--blue-bright); color: var(--on-dark); }
.ex-av.ai   { background: var(--blue-navy);   color: var(--on-dark); }
.ex-bubble { max-width: 82%; font-size: 13px; line-height: 1.55; padding: 9px 13px; border-radius: var(--r-lg); }
.ex-msg.user .ex-bubble { background: var(--blue-bright); color: var(--on-dark); border-bottom-right-radius: var(--r-xs); }
.ex-msg.ai  .ex-bubble  { background: var(--surface); color: var(--charcoal); border-bottom-left-radius: var(--r-xs); border: 1px solid var(--hairline-soft); }
.ex-tool { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--blue-bright); background: var(--blue-soft); border: 1px solid rgba(0,93,165,0.15); padding: 3px 8px; border-radius: var(--r-full); margin-bottom: 7px; }
.ex-tool svg { width: 10px; height: 10px; }
.ex-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12px; }
.ex-table th { font-size: 10px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: var(--stone); padding: 4px 6px; border-bottom: 1px solid var(--hairline); text-align: left; }
.ex-table td { padding: 6px 6px; border-bottom: 1px solid var(--hairline-soft); color: var(--charcoal); }
.ex-table .hi  { color: var(--blue-bright); font-weight: 600; }
.ex-table .pos { color: #DC2626; font-weight: 600; }
.ex-hl { margin-top: 8px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--blue-soft); border-left: 3px solid var(--blue-bright); font-size: 12px; color: var(--slate); line-height: 1.5; }
.ex-hl strong { color: var(--blue-bright); }
.ex-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--slate); background: var(--surface); border: 1px solid var(--hairline); padding: 4px 10px; border-radius: var(--r-full); margin: 4px 3px 0 0; }
.ex-chip svg { width: 11px; height: 11px; color: var(--blue-bright); }
.ex-btns { display: flex; gap: var(--sp-xs); margin-top: 9px; }
.ex-btn-yes { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--r-full); background: var(--blue-bright); color: var(--on-dark); display: inline-flex; align-items: center; gap: 4px; }
.ex-btn-no  { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--r-full); background: transparent; color: var(--steel); border: 1px solid var(--hairline); display: inline-flex; align-items: center; gap: 4px; }

/* ─── How It Works ──────────────────────────────────────────────── */
.how-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-section); align-items: center; }
.steps { display: flex; flex-direction: column; gap: var(--sp-xxl); }
.step { display: flex; gap: var(--sp-xl); }
.step-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--r-full); background: var(--blue-soft); border: 1.5px solid var(--blue-bright); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--blue-bright); margin-top: 2px; }
.step-content h3 { font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: var(--sp-sm); letter-spacing: -0.2px; }
.step-content p  { font-size: 15px; line-height: 1.6; color: var(--steel); }
.steps-row { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-xxl); }
.steps-row .step { flex-direction: column; gap: var(--sp-md); }
.setup-card { background: var(--surface-code); border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,0.07); overflow: hidden; }
.setup-tabs { display: flex; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.07); }
.setup-tab { font-size: 12px; font-weight: 500; padding: 10px 15px; color: rgba(255,255,255,0.35); cursor: pointer; font-family: var(--font-mono); border-bottom: 2px solid transparent; transition: color .15s; }
.setup-tab.active { color: var(--blue-sky); border-bottom-color: var(--blue-sky); }
.setup-content { padding: var(--sp-xl); display: none; }
.setup-content.active { display: block; }
pre { font-family: var(--font-mono); font-size: 13px; line-height: 1.75; color: #E2E8F0; white-space: pre-wrap; word-break: break-word; }
.c-sky{color:#93C5FD} .c-blue{color:#60A5FA} .c-purple{color:#C084FC}
.c-red{color:#FCA5A5} .c-yellow{color:#FDE68A} .c-green{color:#86EFAC}
.c-dim{color:rgba(255,255,255,0.28)} .c-comment{color:rgba(255,255,255,0.24);font-style:italic}

/* ─── Capabilities ──────────────────────────────────────────────── */
.capabilities-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-section-sm) var(--sp-section); }
.capabilities-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-section-sm) var(--sp-xxxl); }
.capability-group h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--stone); margin-bottom: var(--sp-xl); }
.capability-list { display: flex; flex-direction: column; }
.capability-item { display: flex; gap: var(--sp-md); align-items: flex-start; padding: var(--sp-md) 0; border-bottom: 1px solid var(--hairline-soft); }
.capability-item:last-child { border-bottom: none; }
.capability-check { flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; border-radius: var(--r-full); background: var(--blue-soft); display: flex; align-items: center; justify-content: center; }
.capability-check svg { width: 10px; height: 10px; color: var(--blue-bright); }
.capability-item h4 { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.capability-item p  { font-size: 13px; color: var(--steel); line-height: 1.5; }

/* ─── Multi-turn Demo / App Mockup Card ─────────────────────────── */
.demo-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-section); align-items: center; }
.demo-content h2 { font-size: 38px; font-weight: 600; line-height: 1.15; letter-spacing: -1px; color: var(--ink); margin-bottom: var(--sp-lg); }
.demo-content > p { font-size: 16px; line-height: 1.6; color: var(--steel); margin-bottom: var(--sp-xl); }
.demo-points { display: flex; flex-direction: column; gap: var(--sp-md); }
.demo-point { display: flex; gap: var(--sp-sm); align-items: flex-start; }
.demo-point-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-bright); flex-shrink: 0; margin-top: 6px; }
.demo-point p { font-size: 14px; color: var(--slate); line-height: 1.55; }
.chat-mockup { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-card); }
.chat-header { background: var(--surface); border-bottom: 1px solid var(--hairline); padding: var(--sp-md) var(--sp-xl); display: flex; align-items: center; gap: var(--sp-sm); }
.chat-hdr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-bright); animation: pulse 2s ease-in-out infinite; }
.chat-hdr-text { font-size: 13px; font-weight: 600; color: var(--ink); }
.chat-hdr-sub  { font-size: 11px; color: var(--stone); margin-top: 1px; }
.chat-messages { padding: var(--sp-xl); display: flex; flex-direction: column; gap: var(--sp-lg); }
.chat-msg { display: flex; gap: var(--sp-sm); align-items: flex-start; }
.chat-msg.user { flex-direction: row-reverse; }
.chat-av { width: 28px; height: 28px; border-radius: var(--r-full); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.chat-av.user { background: var(--blue-bright); color: var(--on-dark); }
.chat-av.ai   { background: var(--blue-navy);   color: var(--on-dark); }
.chat-bubble { max-width: 78%; font-size: 13px; line-height: 1.55; padding: var(--sp-sm) var(--sp-md); border-radius: var(--r-lg); }
.chat-msg.user .chat-bubble { background: var(--blue-bright); color: var(--on-dark); border-bottom-right-radius: var(--r-xs); }
.chat-msg.ai  .chat-bubble  { background: var(--surface); color: var(--ink); border-bottom-left-radius: var(--r-xs); }
.chat-tool { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--blue-bright); background: var(--blue-soft); border: 1px solid rgba(0,93,165,0.15); padding: 3px 8px; border-radius: var(--r-full); margin-bottom: 7px; }
.chat-tool svg { width: 11px; height: 11px; }
.chat-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12px; }
.chat-table th { font-size: 10px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: var(--stone); padding: 4px 5px; border-bottom: 1px solid var(--hairline); text-align: left; }
.chat-table td { padding: 5px 5px; border-bottom: 1px solid var(--hairline-soft); color: var(--charcoal); }
.chat-table .amt { color: var(--blue-bright); font-weight: 600; }
.chat-table .neg { color: var(--red); font-weight: 600; }

/* ─── PDF / Document Mockup ─────────────────────────────────────── */
.pdf-section { padding: var(--sp-section-lg) 0; background: linear-gradient(135deg, #f6f6f6 0%, #f7f9ff 100%); border-top: 1px solid rgba(0,93,165,0.11); border-bottom: 1px solid rgba(0,93,165,0.11); }
.pdf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-section); align-items: center; }
.pdf-content h2 { font-size: 42px; font-weight: 600; line-height: 1.12; letter-spacing: -1.2px; color: var(--ink); margin-bottom: var(--sp-lg); }
.pdf-content > p { font-size: 16px; line-height: 1.6; color: var(--slate); margin-bottom: var(--sp-xl); }
.pdf-features { display: flex; flex-direction: column; gap: var(--sp-sm); }
.pdf-feature { display: flex; align-items: center; gap: var(--sp-sm); font-size: 14px; color: var(--charcoal); font-weight: 500; }
.pdf-feature svg { width: 16px; height: 16px; color: var(--blue-bright); flex-shrink: 0; }
.pdf-mockup { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 20px 48px rgba(13,26,56,0.12), 0 0 0 1px rgba(0,93,165,0.09); }
.pdf-bar { background: var(--surface); border-bottom: 1px solid var(--hairline); padding: 10px var(--sp-md); display: flex; align-items: center; gap: var(--sp-sm); }
.pdf-bar span { font-size: 12px; font-weight: 600; color: var(--steel); font-family: var(--font-mono); }
.pdf-doc { padding: var(--sp-xl); }
.pdf-hdr { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-xl); padding-bottom: var(--sp-xl); border-bottom: 2px solid var(--blue-bright); }
.pdf-hdr-logo img { height: 22px; width: auto; }
.pdf-hdr-meta { text-align: right; }
.pdf-hdr-meta p { font-size: 11px; color: var(--stone); line-height: 1.7; }
.pdf-hdr-sub { font-size: 11px; color: var(--stone); margin-top: 3px; }
.pdf-sec-title { font-size: 12px; font-weight: 600; color: var(--ink); margin: var(--sp-md) 0 var(--sp-sm); }
.pdf-sec-title:first-of-type { margin-top: 0; }
.pdf-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--hairline-soft); font-size: 12px; gap: var(--sp-md); }
.pdf-row .n { color: var(--charcoal); }
.pdf-row .v { color: var(--ink); font-weight: 600; white-space: nowrap; }
.pdf-row .v.hi { color: var(--blue-bright); }
.pdf-row .v.neg { color: var(--red); }
.pdf-summary { margin-top: var(--sp-lg); background: var(--blue-soft); border-radius: var(--r-md); padding: var(--sp-md); font-size: 12px; color: var(--slate); line-height: 1.6; border-left: 3px solid var(--blue-bright); }
.pdf-summary strong { color: var(--blue-bright); }

/* ─── Security ──────────────────────────────────────────────────── */
.security-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-lg); margin-top: var(--sp-section); }
.security-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-lg); padding: var(--sp-xxl); }
.security-icon { width: 40px; height: 40px; border-radius: var(--r-md); background: rgba(26,127,232,0.13); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-xl); }
.security-icon svg { width: 20px; height: 20px; color: var(--blue-sky); }
.security-card h3 { font-size: 15px; font-weight: 600; color: var(--on-dark); margin-bottom: var(--sp-sm); }
.security-card p { font-size: 13px; line-height: 1.6; color: var(--on-dark-muted); }
.security-card code { font-family: var(--font-mono); font-size: 12px; background: rgba(255,255,255,0.08); color: var(--blue-sky); padding: 1px 5px; border-radius: var(--r-xs); }

/* ─── CTA ────────────────────────────────────────────────────────── */
.cta-section { padding: var(--sp-section-lg) 0; background: var(--canvas-dark); text-align: center; position: relative; overflow: hidden; }
.cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(26,127,232,0.10) 0%, transparent 70%); pointer-events: none; }
.cta-section .container { position: relative; z-index: 1; }
.cta-section h2 { font-size: 48px; font-weight: 600; line-height: 1.1; letter-spacing: -1.5px; color: var(--on-dark); margin-bottom: var(--sp-xl); }
.cta-section > .container > p { font-size: 18px; color: var(--on-dark-muted); max-width: 500px; margin: 0 auto var(--sp-xxxl); }
.cta-actions { display: flex; align-items: center; justify-content: center; gap: var(--sp-sm); flex-wrap: wrap; }

/* ─── FAQ ────────────────────────────────────────────────────────── */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border: 1px solid var(--hairline-soft); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--sp-sm); background: var(--canvas); }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-xl); cursor: pointer; width: 100%; text-align: left; background: var(--canvas); transition: background .15s; }
.faq-question:hover { background: var(--surface-soft); }
.faq-question span { font-size: 15px; font-weight: 600; color: var(--ink); padding-right: var(--sp-md); }
.faq-chevron { width: 20px; height: 20px; color: var(--steel); flex-shrink: 0; transition: transform .2s; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer { display: none; padding: 0 var(--sp-xl) var(--sp-xl); font-size: 14px; line-height: 1.75; color: var(--steel); }
.faq-item.open .faq-answer { display: block; }
.faq-answer code { font-family: var(--font-mono); font-size: 12px; background: var(--surface); color: var(--charcoal); padding: 1px 5px; border-radius: var(--r-xs); border: 1px solid var(--hairline); }

/* ─── Footer ─────────────────────────────────────────────────────── */
.footer { padding: var(--sp-section) 0 var(--sp-xxl); border-top: 1px solid var(--hairline); }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: var(--sp-section); margin-bottom: var(--sp-section); }
.footer-brand p { font-size: 14px; line-height: 1.6; color: var(--steel); margin-top: var(--sp-md); max-width: 240px; }
.footer-col h4 { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: var(--sp-lg); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-sm); }
.footer-col a { font-size: 14px; color: var(--steel); transition: color .15s; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: var(--sp-xl); border-top: 1px solid var(--hairline-soft); font-size: 13px; color: var(--stone); }
.footer-bottom a { color: var(--stone); }

/* ═══════════════════════════════════════════════════════════════════
   New components — multi-page site
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Stats Band ────────────────────────────────────────────────── */
.stats-band { border-bottom: 1px solid var(--hairline-soft); }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat-item { padding: var(--sp-xxl) var(--sp-xl); text-align: center; border-right: 1px solid var(--hairline-soft); }
.stat-item:last-child { border-right: none; }
.stat-item h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.5px; color: var(--ink); margin-bottom: 4px; }
.stat-item p { font-size: 13px; line-height: 1.5; color: var(--steel); }

/* ─── Signal Feed Mockup ────────────────────────────────────────── */
.signal-feed {
  background: #FFFFFF; border-radius: var(--r-xl);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 28px 56px -8px rgba(9,15,30,0.35), 0 0 0 1px rgba(0,93,165,0.06);
  overflow: hidden;
}
.signal-feed.flat { box-shadow: var(--shadow-card); border-color: var(--hairline); }
.sf-header { display: flex; align-items: center; gap: var(--sp-xs); padding: 12px var(--sp-md); background: #F7F8FC; border-bottom: 1px solid #E2E8F0; }
.sf-live { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-bright); animation: pulse 2s ease-in-out infinite; flex-shrink: 0; }
.sf-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.sf-sub { font-size: 11px; color: var(--stone); margin-left: 4px; }
.sf-count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--blue-bright); background: var(--blue-soft); padding: 2px 9px; border-radius: var(--r-full); }
.signal-row { display: flex; gap: var(--sp-sm); padding: 13px var(--sp-md); border-bottom: 1px solid var(--hairline-soft); background: #fff; }
.signal-row:last-of-type { border-bottom: none; }
.sig-ico { width: 32px; height: 32px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.sig-ico svg { width: 16px; height: 16px; }
.sig-ico.risk  { background: var(--red-soft);   color: var(--red); }
.sig-ico.opp   { background: var(--blue-soft);  color: var(--blue-bright); }
.sig-ico.event { background: var(--amber-soft); color: var(--amber); }
.sig-main { flex: 1; min-width: 0; }
.sig-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-sm); }
.sig-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.sig-amt { font-size: 13px; font-weight: 600; white-space: nowrap; }
.sig-amt.risk { color: var(--red); }
.sig-amt.opp  { color: var(--blue-bright); }
.sig-acct { font-size: 11.5px; color: var(--slate); margin-top: 1px; }
.sig-evidence { font-size: 12px; color: var(--steel); line-height: 1.5; margin-top: 3px; }
.sig-meta { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.sig-chip { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--hairline); color: var(--slate); }
.sig-chip.risk { background: var(--red-soft); border-color: rgba(220,38,38,0.2); color: var(--red); }
.sig-chip.opp  { background: var(--blue-soft); border-color: rgba(0,93,165,0.2); color: var(--blue-bright); }
.sig-chip.event{ background: var(--amber-soft); border-color: rgba(217,119,6,0.25); color: var(--amber); }
.sig-actions { display: flex; gap: var(--sp-xs); margin-top: 8px; }
.sig-action { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: var(--r-full); border: 1px solid var(--hairline); color: var(--slate); background: var(--canvas); }
.sig-action.primary { background: var(--blue-bright); border-color: var(--blue-bright); color: var(--on-dark); }
.sf-footer { padding: 11px var(--sp-md); text-align: center; font-size: 12px; font-weight: 600; color: var(--blue-bright); background: var(--surface-soft); border-top: 1px solid var(--hairline-soft); }

/* ─── Alternating Feature Blocks ────────────────────────────────── */
.fb-section { padding: 96px 0; }
.feature-blocks { display: flex; flex-direction: column; gap: var(--sp-section-lg); }
.feature-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-section); align-items: center; }
.feature-block.reverse .fb-copy  { grid-column: 2; grid-row: 1; }
.feature-block.reverse .fb-media { grid-column: 1; grid-row: 1; }
.fb-copy h3 { font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -0.8px; color: var(--ink); margin-bottom: var(--sp-md); }
.fb-copy > p { font-size: 16px; line-height: 1.65; color: var(--steel); margin-bottom: var(--sp-xl); }
.fb-list { display: flex; flex-direction: column; gap: var(--sp-sm); margin-bottom: var(--sp-xl); }
.fb-item { display: flex; align-items: flex-start; gap: var(--sp-sm); font-size: 14px; color: var(--charcoal); font-weight: 500; line-height: 1.5; }
.fb-item svg { width: 16px; height: 16px; color: var(--blue-bright); flex-shrink: 0; margin-top: 2px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--blue-bright); transition: gap .15s; }
.link-arrow svg { width: 15px; height: 15px; transition: transform .15s; }
.link-arrow:hover svg { transform: translateX(3px); }

/* ─── Audience Builder Mockup ───────────────────────────────────── */
.ab-body { padding: var(--sp-xl); }
.ab-input { display: flex; align-items: center; gap: var(--sp-sm); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 11px 14px; font-size: 13px; color: var(--charcoal); line-height: 1.45; }
.ab-input svg { width: 15px; height: 15px; color: var(--blue-bright); flex-shrink: 0; }
.ab-parsed-label { font-size: 10px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--stone); margin: var(--sp-md) 0 2px; }
.ab-count { display: flex; align-items: baseline; gap: var(--sp-sm); margin: var(--sp-md) 0 var(--sp-xs); flex-wrap: wrap; }
.ab-count strong { font-size: 30px; font-weight: 600; letter-spacing: -1px; color: var(--ink); }
.ab-count span { font-size: 13px; color: var(--steel); }

/* ─── Recommendations Panel ─────────────────────────────────────── */
.reco-list { display: flex; flex-direction: column; }
.reco-item { display: flex; gap: var(--sp-md); align-items: flex-start; padding: var(--sp-md) var(--sp-xl); border-bottom: 1px solid var(--hairline-soft); }
.reco-item:last-child { border-bottom: none; }
.reco-rank { flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--r-full); background: var(--blue-soft); color: var(--blue-bright); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px; }
.reco-body h4 { font-size: 13px; font-weight: 600; color: var(--ink); }
.reco-body p { font-size: 12px; color: var(--steel); line-height: 1.55; margin-top: 2px; }
.reco-val { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--blue-bright); white-space: nowrap; }
.reco-val.risk { color: var(--red); }

/* ─── Demo / Lead Form ──────────────────────────────────────────── */
.demo-section { padding: var(--sp-section-lg) 0; background: var(--surface); border-top: 1px solid var(--hairline-soft); }
.demo-section .demo-grid2 { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-section); align-items: start; }
.demo-pitch h2 { font-size: 38px; font-weight: 600; line-height: 1.15; letter-spacing: -1px; color: var(--ink); margin-bottom: var(--sp-lg); }
.demo-pitch > p { font-size: 16px; line-height: 1.65; color: var(--steel); margin-bottom: var(--sp-xl); }
.demo-form-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: var(--sp-xxl); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 500; color: var(--charcoal); }
.form-field .req { color: var(--blue-electric); }
.form-field input, .form-field select, .form-field textarea {
  font-family: inherit; font-size: 14px; color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--canvas); width: 100%; transition: border-color .15s, box-shadow .15s;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--stone); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--blue-electric); box-shadow: 0 0 0 3px var(--blue-glow);
}
.form-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.form-field textarea { min-height: 84px; resize: vertical; }
.form-actions { grid-column: 1 / -1; margin-top: var(--sp-xs); }
.form-actions .btn { width: 100%; padding: 12px 20px; font-size: 15px; }
.form-note { grid-column: 1 / -1; font-size: 12px; color: var(--stone); text-align: center; line-height: 1.5; }
.form-error { margin-top: 12px; font-size: 13px; color: var(--red); text-align: center; line-height: 1.5; }
.form-success { display: none; text-align: center; padding: var(--sp-xxl) var(--sp-md); }
.demo-form-card.submitted form { display: none; }
.demo-form-card.submitted .form-success { display: block; }
.success-icon { width: 52px; height: 52px; border-radius: var(--r-full); background: var(--blue-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-lg); }
.success-icon svg { width: 24px; height: 24px; color: var(--blue-bright); }
.form-success h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.5px; color: var(--ink); margin-bottom: var(--sp-sm); }
.form-success p { font-size: 14px; line-height: 1.65; color: var(--steel); max-width: 340px; margin: 0 auto; }
.form-success p strong { color: var(--charcoal); }

/* ─── Chat sender names (outside the bubble) ────────────────────── */
.hchat-bubble, .ex-bubble, .chat-bubble { position: relative; }
.hchat-row .hchat-bubble, .ex-msg .ex-bubble, .chat-msg .chat-bubble { margin-top: 15px; }
.hchat-row .hchat-bubble::before, .ex-msg .ex-bubble::before, .chat-msg .chat-bubble::before {
  position: absolute; top: -15px; font-size: 10px; font-weight: 600; letter-spacing: .2px;
  color: var(--stone); white-space: nowrap; pointer-events: none;
}
.hchat-row.ai .hchat-bubble::before, .ex-msg.ai .ex-bubble::before, .chat-msg.ai .chat-bubble::before { content: 'Revio Insight Agent'; left: 4px; }
.hchat-row.user .hchat-bubble::before, .ex-msg.user .ex-bubble::before, .chat-msg.user .chat-bubble::before { content: 'You'; right: 4px; }
.fx-scene .hchat-bubble { margin-top: 0; }
.fx-scene .hchat-bubble::before { content: none !important; }

/* ─── Mini kanban (Engagement Manager) ──────────────────────────── */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: var(--sp-md); }
.kb-col { background: var(--surface); border: 1px solid var(--hairline-soft); border-radius: var(--r-md); padding: 8px; min-width: 0; }
.kb-head { display: flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--stone); margin-bottom: 7px; }
.kb-head b { margin-left: auto; font-weight: 600; color: var(--steel); }
.kb-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.kb-col:nth-child(1) .kb-dot { background: var(--blue-electric); }
.kb-col:nth-child(2) .kb-dot { background: var(--amber); }
.kb-col:nth-child(3) .kb-dot { background: var(--green); }
.kb-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 6px 8px; font-size: 10.5px; line-height: 1.4; color: var(--charcoal); box-shadow: 0 1px 2px rgba(13,26,56,.05); margin-bottom: 6px; }
.kb-card:last-child { margin-bottom: 0; }
.kb-who { display: inline-block; margin-top: 4px; font-size: 8.5px; font-weight: 700; color: var(--blue-bright); background: var(--blue-soft); border-radius: var(--r-full); padding: 1px 6px; }
.kb-card.done { color: var(--stone); }
.kb-tick { color: var(--green); font-weight: 700; margin-right: 3px; }

/* ─── Board of Directors ────────────────────────────────────────── */
.board-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-lg); }
.board-card { text-align: center; }
.board-card img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; margin: 0 auto var(--sp-sm); border: 3px solid #fff; box-shadow: var(--shadow-card); }
.board-card h3 { font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); }

/* ─── Persona cards ─────────────────────────────────────────────── */
.persona-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }
.persona-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: var(--sp-xl); display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.persona-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.persona-ava { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-md); }
.persona-ava svg { width: 24px; height: 24px; }
.persona-ava.p-blue   { background: var(--blue-soft);           color: var(--blue-bright); }
.persona-ava.p-green  { background: var(--green-soft);          color: var(--green); }
.persona-ava.p-violet { background: rgba(139,92,246,.12);       color: #7C3AED; }
.persona-ava.p-amber  { background: var(--amber-soft);          color: var(--amber); }
.persona-card h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); margin-bottom: var(--sp-xs); }
.persona-quote { font-size: 13.5px; line-height: 1.65; color: var(--charcoal); font-style: italic; flex: 1; margin-bottom: var(--sp-md); }
.persona-points { display: flex; flex-direction: column; gap: 8px; }
.persona-points li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--steel); }
.persona-points li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-electric); flex-shrink: 0; margin-top: 6px; }

/* ─── Testimonials ──────────────────────────────────────────────── */
.tst-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }
.tst-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: var(--sp-xl); display: flex; flex-direction: column; }
.tst-logo { align-self: flex-start; height: 42px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; margin-bottom: var(--sp-lg); }
.tst-quote { font-size: 14.5px; line-height: 1.7; color: var(--charcoal); flex: 1; }
.tst-person { display: flex; align-items: center; gap: var(--sp-sm); margin-top: var(--sp-lg); padding-top: var(--sp-md); border-top: 1px solid var(--hairline-soft); }
.tst-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tst-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.tst-role { font-size: 12px; color: var(--steel); margin-top: 1px; }

/* ─── Trust band (SOC 2 + security) ─────────────────────────────── */
.trust-band { background: linear-gradient(160deg, #0f1c35 0%, #0c0e11 100%); padding: 56px 0; }
.trust-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-xxl); flex-wrap: wrap; }
.trust-badge { display: flex; align-items: center; gap: var(--sp-lg); }
.trust-badge img { width: 76px; height: 76px; flex-shrink: 0; }
.trust-badge h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; color: var(--on-dark); }
.trust-badge p { font-size: 13.5px; line-height: 1.55; color: var(--on-dark-muted); margin-top: 3px; max-width: 340px; }
.trust-points { display: flex; flex-direction: column; gap: var(--sp-sm); }
.trust-points li { display: flex; align-items: center; gap: var(--sp-sm); font-size: 14px; font-weight: 500; color: rgba(255,255,255,.82); }
.trust-points svg { width: 16px; height: 16px; color: var(--blue-sky); flex-shrink: 0; }

/* ─── Cross-links ("Works with the rest of the platform") ───────── */
.xlink-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-lg); }
.xlink-card { display: block; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--sp-xl); transition: box-shadow .2s, transform .2s, border-color .2s; }
.xlink-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); border-color: rgba(0,93,165,0.3); }
.xlink-card h3 { display: flex; align-items: center; gap: var(--sp-xs); font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: var(--sp-xs); }
.xlink-card h3 svg { width: 16px; height: 16px; color: var(--blue-bright); }
.xlink-card p { font-size: 13px; line-height: 1.6; color: var(--steel); }
.xlink-card .link-arrow { margin-top: var(--sp-md); font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════
   Page identity — per-module accent themes
   ═══════════════════════════════════════════════════════════════════ */
body { --accent: #1a7fe8; --accent-ink: #005da5; --accent-soft: rgba(0,93,165,0.09); }
body.theme-signals  { --accent: #DC2626; --accent-ink: #B91C1C; --accent-soft: rgba(220,38,38,0.08); }
body.theme-prep     { --accent: #6366F1; --accent-ink: #4F46E5; --accent-soft: rgba(99,102,241,0.10); }
body.theme-audience { --accent: #10B981; --accent-ink: #047857; --accent-soft: rgba(16,185,129,0.10); }
body.theme-mcp      { --accent: #8B5CF6; --accent-ink: #7C3AED; --accent-soft: rgba(139,92,246,0.12); }

.tag { color: var(--accent-ink); background: var(--accent-soft); }
.feature-icon { background: var(--accent-soft); }
.feature-icon svg { color: var(--accent-ink); }
.feature-icon.risk { background: var(--red-soft); }
.feature-icon.risk svg { color: var(--red); }
.step-num { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.demo-point-dot { background: var(--accent); }
.fb-item svg { color: var(--accent-ink); }
.pdf-feature svg { color: var(--accent-ink); }

/* MCP: violet-washed dark hero */
.theme-mcp .hero::before {
  background: radial-gradient(ellipse 65% 55% at 82% 35%, rgba(139,92,246,0.18) 0%, transparent 65%),
              radial-gradient(ellipse 45% 70% at 8% 85%,  rgba(76,29,149,0.14) 0%,  transparent 60%);
}
.theme-mcp .hero-eyebrow { color: #C4B5FD; }
.theme-mcp .eyebrow-dot { background: #C4B5FD; }
.theme-mcp .hero h1 em { background: linear-gradient(90deg, #C4B5FD, #E9D5FF); -webkit-background-clip: text; background-clip: text; }

/* ─── Hero variant: light ───────────────────────────────────────── */
.hero--light {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--hairline-soft);
}
.hero--light::before {
  background: radial-gradient(ellipse 55% 65% at 80% 12%, var(--accent-soft) 0%, transparent 65%);
}
.hero--light::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(13,26,56,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, black, transparent 75%);
  mask-image: linear-gradient(180deg, black, transparent 75%);
  pointer-events: none;
}
.hero--light .container { position: relative; z-index: 1; }
.hero--light h1 { color: var(--ink); }
.hero--light h1 em { background: linear-gradient(90deg, var(--accent-ink), var(--accent)); -webkit-background-clip: text; background-clip: text; }
.hero--light .hero-sub { color: var(--steel); }
.hero--light .hero-eyebrow { color: var(--accent-ink); }
.hero--light .eyebrow-dot { background: var(--accent); }
.hero--light .btn-outline { color: var(--ink); border-color: var(--muted); }
.hero--light .btn-outline:hover { background: rgba(13,26,56,0.04); }
.hero--light .hero-social-proof { color: var(--steel); }
.hero--light .hero-social-proof-logos span { color: var(--slate); background: var(--canvas); border-color: var(--hairline); }
.hero--light .hero-chat, .hero--light .signal-feed, .hero--light .pdf-mockup {
  box-shadow: 0 24px 48px -12px rgba(13,26,56,0.18), 0 0 0 1px rgba(13,26,56,0.04);
}

/* ─── Hero variant: stacked / centered ──────────────────────────── */
.hero--stack .container { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-xxl); }
.hero--stack h1 { max-width: 820px; }
.hero--stack .hero-sub { max-width: 640px; margin-left: auto; margin-right: auto; }
.hero--stack .hero-actions { justify-content: center; }
.hero--stack .hero-social-proof { justify-content: center; }
.hero--stack .hero-media { width: min(780px, 100%); text-align: left; }
.theme-agent .hero::before {
  background: radial-gradient(ellipse 50% 55% at 50% 0%, rgba(26,127,232,0.22) 0%, transparent 65%),
              radial-gradient(ellipse 70% 40% at 50% 110%, rgba(0,93,165,0.14) 0%, transparent 60%);
}

/* ─── Hero variant: media on the left ───────────────────────────── */
.hero--media-left .hero-media { order: -1; }

/* ─── Hero product screenshot ───────────────────────────────────── */
.hero-shot { position: relative; }
.hero-shot img { width: 100%; height: auto; filter: drop-shadow(0 32px 56px rgba(9,15,30,0.45)); }
@media (min-width: 1280px) {
  .hero .hero-shot { margin-right: -72px; }
}

/* ─── Bento proof grid ──────────────────────────────────────────── */
.bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-lg); }
.bento-tile {
  grid-column: span 4; background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-xl); padding: var(--sp-xl); position: relative; overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.bento-tile:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.bento-tile.span-5 { grid-column: span 5; }
.bento-tile.span-7 { grid-column: span 7; }
.bento-tile.span-8 { grid-column: span 8; }
.bento-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--stone); margin-bottom: var(--sp-xs); }
.bento-big { font-size: 40px; font-weight: 600; letter-spacing: -1.5px; line-height: 1.05; color: var(--ink); margin: 2px 0 4px; }
.bento-big em { font-style: normal; background: linear-gradient(90deg, var(--blue-bright), var(--blue-electric)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bento-tile h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); margin-bottom: 4px; }
.bento-tile > p { font-size: 13.5px; line-height: 1.6; color: var(--steel); }
.bento-visual { margin-top: var(--sp-md); }
.enr-row { display: flex; align-items: center; gap: var(--sp-xs); padding: 9px 0; border-top: 1px dashed var(--hairline); flex-wrap: wrap; }
.enr-raw { font-family: var(--font-mono); font-size: 11px; color: var(--slate); background: var(--surface); border: 1px solid var(--hairline); padding: 4px 8px; border-radius: var(--r-sm); white-space: nowrap; }
.enr-arrow { color: var(--stone); font-size: 13px; }
.bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--charcoal); padding: 6px 0; }
.bar-row .bar { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--blue-bright), var(--blue-electric)); flex-shrink: 0; }
.bar-row .amt { margin-left: auto; font-weight: 600; color: var(--blue-bright); }
.bento-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-sig { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px dashed var(--hairline); font-size: 12.5px; color: var(--charcoal); font-weight: 500; }
.mini-sig .sig-chip { margin-left: auto; }
.window-bar { position: relative; height: 8px; border-radius: 4px; background: var(--surface); border: 1px solid var(--hairline); overflow: hidden; }
.window-bar i { position: absolute; inset: 0; width: 78%; background: linear-gradient(90deg, rgba(0,93,165,.25), var(--blue-electric)); border-radius: 4px; }
.window-caption { display: flex; justify-content: space-between; font-size: 11px; color: var(--stone); margin-top: 6px; }

/* ─── Act cards (Engagement Manager / CRM / Export) ─────────────── */
.act-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.act-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: var(--sp-xxl); display: flex; flex-direction: column; }
.act-head { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-md); }
.act-head .feature-icon { margin-bottom: 0; width: 40px; height: 40px; flex-shrink: 0; }
.act-head h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); }
.act-badge { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--green); background: var(--green-soft); padding: 3px 9px; border-radius: var(--r-full); margin-left: auto; white-space: nowrap; }
.act-card > p { font-size: 14px; line-height: 1.65; color: var(--steel); margin-bottom: var(--sp-md); }
.act-card .fb-list { margin-bottom: 0; margin-top: auto; }

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-chat { display: none; }
  .hero .hero-media { display: none; }
  .how-grid { grid-template-columns: 1fr; }
  .features-grid, .features-grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .examples-carousel .example-card { flex: 0 0 320px; }
  .demo-grid { grid-template-columns: 1fr; }
  .chat-mockup { display: none; }
  .chat-mockup.keep-mobile { display: block; }
  .hero-chat.keep-mobile { display: block; }
  .pdf-grid { grid-template-columns: 1fr; }
  .pdf-mockup { display: none; }
  .pdf-mockup.keep-mobile { display: block; }
  .security-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-actions { display: none; }
  .nav-toggle { display: flex; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(-n+2) { border-bottom: 1px solid var(--hairline-soft); }
  .feature-block { grid-template-columns: 1fr; gap: var(--sp-xxl); }
  .feature-block.reverse .fb-copy  { grid-column: 1; grid-row: auto; }
  .feature-block.reverse .fb-media { grid-column: 1; grid-row: auto; }
  .feature-block .fb-copy { order: 1; }
  .feature-block .fb-media { order: 2; }
  .steps-row { grid-template-columns: 1fr; }
  .demo-section .demo-grid2 { grid-template-columns: 1fr; }
  .capabilities-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .xlink-grid { grid-template-columns: 1fr; }
  .bento-tile, .bento-tile.span-5, .bento-tile.span-7, .bento-tile.span-8 { grid-column: span 6; }
  .act-grid { grid-template-columns: 1fr; }
  .persona-grid { grid-template-columns: 1fr 1fr; }
  .tst-grid { grid-template-columns: 1fr 1fr; }
  .hero--stack .hero-media { display: block; }
  .hero--media-left .hero-media { order: 0; }
}
@media (max-width: 767px) {
  .hero { padding: 56px 0 40px; }
  .hero--page { padding: 48px 0 40px; }
  .hero .container { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .hero-chat { display: block; }
  .hero .hero-media { display: block; }
  .hero h1, .hero--page h1 { font-size: 34px; letter-spacing: -1.2px; }
  .hero-sub { font-size: 15px; margin-bottom: var(--sp-xl); }
  .features-grid, .features-grid.cols-4 { grid-template-columns: 1fr 1fr; gap: var(--sp-sm); }
  .feature-card { padding: var(--sp-md); }
  .feature-card h3 { font-size: 14px; }
  .feature-card p  { font-size: 12px; }
  .feature-icon { width: 36px; height: 36px; margin-bottom: var(--sp-md); }
  .feature-icon svg { width: 18px; height: 18px; }
  .capabilities-grid, .security-grid, .capabilities-grid.cols-3 { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .fb-section { padding: 56px 0; }
  .section-header { margin-bottom: var(--sp-xxl); }
  .section-header h2, .examples-intro h2 { font-size: 28px; }
  .examples-intro { margin-bottom: var(--sp-xl); }
  .cta-section h2 { font-size: 30px; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-xxl); }
  .footer-bottom { flex-direction: column; gap: var(--sp-sm); text-align: center; }
  .container { padding: 0 var(--sp-md); }
  .examples-carousel .example-card { flex: 0 0 calc(100vw - 48px); }
  .nav-logo img { height: 24px; max-width: 120px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-item { padding: var(--sp-lg) var(--sp-md); }
  .stat-item h3 { font-size: 17px; }
  .stat-item p { font-size: 12px; }
  .fb-copy h3 { font-size: 24px; letter-spacing: -0.6px; }
  .demo-pitch h2, .demo-content h2, .pdf-content h2 { font-size: 28px; letter-spacing: -0.8px; }
  .form-grid { grid-template-columns: 1fr; }
  .demo-section { padding: var(--sp-section) 0; }
  .bento-tile, .bento-tile.span-5, .bento-tile.span-7, .bento-tile.span-8 { grid-column: span 12; }
  .bento-big { font-size: 32px; }
  .enr-raw { white-space: normal; }
  .tst-grid { grid-template-columns: 1fr; }
  .trust-inner { justify-content: flex-start; }
  .persona-grid { grid-template-columns: 1fr; }
  .board-grid { grid-template-columns: 1fr 1fr; }
}