/* ============================================================
   Alfia landing — page layout.
   Every value resolves to an Alfia Design System token.
   DS components ship their own CSS; this file styles only the
   page scaffold, bespoke product mock, and section layouts.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

/* Typeface override — Geist for display + body, Geist Mono for data */
:root {
  --font-display: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Roboto Mono', monospace;
}

body {
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--surface-page);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.ic { flex: none; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }
.accent { color: var(--brand-bright); }

.wrap { max-width: var(--container-lg); margin: 0 auto; padding: 0 var(--space-7); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-deep);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.eyebrow::before {
  content: "";
  width: 24px; height: 2px;
  background: var(--brand-deep);
  opacity: .7;
}
.eyebrow--dark { color: var(--brand-sky); }
.eyebrow--dark::before { background: var(--brand-sky); opacity: .8; }

/* ---------- Section scaffold ---------- */
.section { padding: var(--space-24) 0; }
.section--sunken { background: var(--surface-sunken); }
.section-head { max-width: 680px; }
.section-head--narrow { max-width: 560px; }
.section-head h2 {
  font-size: clamp(2rem, 3.6vw, var(--text-5xl));
  margin-top: var(--space-4);
}
.section-head p {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  color: var(--text-muted);
}

.arrow-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: var(--weight-bold); color: var(--brand-bright);
}
.arrow-link .ic { transition: transform var(--duration-base) var(--ease-standard); }
.arrow-link:hover .ic { transform: translateX(3px); }

/* =========================================================
   NAV
========================================================= */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 251, 252, .82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-slow), box-shadow var(--duration-slow);
}
.nav.scrolled { border-color: var(--border-subtle); box-shadow: var(--shadow-xs); }
.nav-inner {
  height: 66px;
  display: flex; align-items: center; gap: var(--space-9, 36px);
  max-width: var(--container-lg); margin: 0 auto; padding: 0 var(--space-7);
}
.brand { display: flex; align-items: center; }
.brand img { mix-blend-mode: multiply; }
.nav-links { display: flex; gap: var(--space-7); margin-left: var(--space-2); }
.nav-links a {
  font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-muted);
  transition: color var(--duration-fast); white-space: nowrap;
}
.nav-links a:hover { color: var(--text-strong); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
.nav-cta .signin { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-muted); white-space: nowrap; }
.nav-cta .signin:hover { color: var(--text-strong); }
.menu-btn { display: none !important; }
.nav-demo-btn { opacity: 0; pointer-events: none; }

/* =========================================================
   HERO — two-column: copy + animated agent stage
========================================================= */
.hero { padding: var(--space-16) 0 var(--space-20); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(58% 60% at 80% -10%, var(--blue-50), transparent 64%);
  pointer-events: none;
}
.hero-inner { position: relative; display: grid; grid-template-columns: 1fr 1.08fr; gap: var(--space-16); align-items: center; max-width: var(--container-lg); }
.hero-inner > * { min-width: 0; }
.hero-copy { max-width: 560px; min-width: 0; }
.hero h1 {
  font-size: clamp(2.4rem, 4.4vw, var(--text-6xl));
  letter-spacing: var(--tracking-tighter);
}
.hero-sub {
  margin: var(--space-5) 0 0; max-width: 540px;
  font-size: clamp(1.05rem, 1.4vw, var(--text-xl));
  color: var(--text-muted);
}
.hero-sub b { color: var(--text-strong); font-weight: var(--weight-semibold); }
.hero-cta { margin-top: var(--space-8); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-meta {
  margin-top: var(--space-7); display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted);
}
.hero-meta .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--status-success); box-shadow: 0 0 0 3px var(--status-success-bg);
  animation: pulse 2s infinite;
}
.hero-meta .sep { color: var(--border-strong); }

/* stage */
.stage {
  position: relative; background: var(--surface-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 20px; box-shadow: var(--shadow-lg); min-height: 500px;
  overflow: hidden;
}
.stage-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
  font-size: var(--text-2xs); color: var(--text-muted); font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.stage-head .live { display: inline-flex; align-items: center; gap: 6px; }
.stage-head .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--status-success); box-shadow: 0 0 0 3px var(--status-success-bg); animation: pulse 1.8s infinite;
}
.orbit { position: relative; height: 280px; margin: 8px 0; overflow: hidden; }
.hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 132px; height: 132px; border-radius: 50%; background: var(--brand-navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  z-index: 3; box-shadow: var(--shadow-xl);
}
.hub-mark { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.hub-word { width: 78px; height: auto; display: block; }
.orbit .ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px dashed var(--border-default); transform: translate(-50%, -50%); }
.ring.r1 { width: 240px; height: 240px; }
.ring.r2 { width: 360px; height: 360px; opacity: .6; }
.agent {
  position: absolute; background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full); padding: 5px 11px 5px 5px; display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; box-shadow: var(--shadow-sm); z-index: 4;
  transition: transform var(--duration-base) var(--ease-standard), border-color var(--duration-base), box-shadow var(--duration-base);
}
.agent .adot {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 9px; font-weight: var(--weight-bold); color: #fff; font-family: var(--font-mono); flex: none;
}
.agent .name { font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); white-space: nowrap; color: var(--text-strong); }
.agent.active { border-color: var(--brand-bright); box-shadow: var(--focus-ring), var(--shadow-md); transform: scale(1.05); }
.feed {
  background: var(--brand-navy); color: var(--brand-sky); border-radius: var(--radius-md);
  padding: 12px 14px; font-family: var(--font-mono); font-size: 12px; line-height: 1.65;
  height: 140px; overflow: hidden; position: relative; min-width: 0;
}
.feed::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: linear-gradient(to bottom, transparent, var(--brand-navy)); pointer-events: none; }
.feed .line { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
@media (prefers-reduced-motion: no-preference) { .feed .line { animation: lineIn .5s var(--ease-standard); } }
.feed .ftime { color: #5E78A8; width: 58px; flex: none; }
.feed .ftag { width: 78px; flex: none; font-weight: var(--weight-medium); }
.feed .fmsg { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--brand-sky); }
.feed .fmsg .hi { color: #7FB0F5; }
.feed .fmsg .ok { color: #5FD3A0; }
.feed .fmsg .warn { color: #E8B45E; }
@keyframes lineIn { from { transform: translateY(8px); } to { transform: none; } }

/* ---- Dark hero variant — makes the agent-orbit stage pop ---- */
.hero--dark { background: var(--brand-navy); }
.hero--dark::before {
  background:
    radial-gradient(54% 60% at 82% -8%, rgba(60,120,239,.30), transparent 62%),
    radial-gradient(50% 70% at 6% 110%, rgba(60,120,239,.16), transparent 60%);
}
.hero--dark h1 { color: #fff; }
.hero--dark .hero-sub { color: var(--brand-sky); }
.hero--dark .hero-sub b { color: #fff; }
.hero--dark .hero-cta .alf-btn--secondary {
  --_bg: rgba(255,255,255,.08); --_fg: #fff; --_bd: rgba(202,223,245,.55);
}
.hero--dark .hero-cta .alf-btn--secondary:hover:not([disabled]) {
  --_bg: rgba(255,255,255,.16); --_bd: #fff;
}
.hero--dark .stage {
  background: #112C54; border-color: rgba(202,223,245,.16);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.6);
}
.hero--dark .stage-head { color: var(--brand-sky); }
.hero--dark .orbit .ring { border-color: rgba(202,223,245,.18); }
.hero--dark .agent {
  background: #16335E; border-color: rgba(202,223,245,.18); box-shadow: 0 4px 14px -6px rgba(0,0,0,.5);
}
.hero--dark .agent .name { color: #Eaf1fb; }
.hero--dark .hub { box-shadow: 0 0 0 1px rgba(202,223,245,.18), var(--shadow-xl); }
.hero--dark .feed { background: #0A1F40; }

/* lifecycle pipeline */
.pipeline {
  margin: var(--space-10) auto 0; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--space-1) 0;
}
.pipeline .stg {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-subtle);
  padding: 8px 15px; border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle); background: var(--surface-card);
}
.pipeline .stg .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
.pipeline .stg.on {
  color: #fff; background: var(--brand-deep); border-color: var(--brand-deep);
  box-shadow: 0 6px 16px -6px rgba(26, 83, 160, .55);
}
.pipeline .stg.on .dot { opacity: 1; animation: pulse-w 2s infinite; }
@keyframes pulse-w {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
  70% { box-shadow: 0 0 0 5px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.pipeline .sep { width: 22px; height: 2px; background: var(--border-default); flex: none; }

.console-cap {
  margin: var(--space-10) auto 0; display: block;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-muted);
}

/* =========================================================
   HERO PRODUCT MOCK
========================================================= */
.console {
  margin: var(--space-4) auto 0;
  max-width: 1080px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  text-align: left;
}
.console-bar {
  height: 44px; display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-4); border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-card);
}
.dots { display: flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--concrete-200); }
.console-bar .addr {
  margin: 0 auto; font-size: var(--text-xs); color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-sunken); padding: 5px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); font-family: var(--font-mono);
}
.console-bar .addr .ic { color: var(--status-success); }
.console-bar .live {
  font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: .08em; text-transform: uppercase;
  color: var(--status-success); display: inline-flex; align-items: center; gap: 6px;
}
.console-bar .live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--status-success); animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(30,138,91,.45); }
  70% { box-shadow: 0 0 0 7px rgba(30,138,91,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,138,91,0); }
}

.console-grid { display: grid; grid-template-columns: 1fr 1.08fr 0.96fr; }
.pane { padding: var(--space-5); border-right: 1px solid var(--border-subtle); min-height: 432px; }
.pane:last-child { border-right: none; }
.pane-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.pane-ico {
  width: 26px; height: 26px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--blue-50); color: var(--brand-deep);
}
.pane-head h4 { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.pane-head .alf-badge { margin-left: auto; }

/* Inbox */
.mail {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 11px 12px;
  margin-bottom: var(--space-2); background: var(--surface-card);
  transition: border-color var(--duration-base), box-shadow var(--duration-base);
}
.mail.sel { border-color: var(--blue-200); box-shadow: 0 0 0 3px var(--blue-50); }
.mail-top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 5px; }
.mail-top .alf-avatar { font-size: 9px !important; }
.mail .from { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
.mail .time { margin-left: auto; font-size: var(--text-xs); color: var(--text-subtle); }
.mail .subj { font-size: var(--text-sm); color: var(--text-body); line-height: var(--leading-snug); }
.mail .subj b { color: var(--text-strong); font-weight: var(--weight-semibold); }
.mail .attach {
  margin-top: 7px; display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); color: var(--text-muted); background: var(--surface-sunken);
  padding: 3px 8px; border-radius: var(--radius-xs);
}

/* Extraction */
.extract { background: var(--surface-sunken); border-radius: var(--radius-md); padding: 14px; border: 1px solid var(--border-subtle); }
.extract .doc-title {
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); margin-bottom: 12px;
  display: flex; align-items: center; gap: var(--space-2);
}
.extract .doc-title .ic { color: var(--brand-deep); }
.extract .doc-title .pct { margin-left: auto; }
.field {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 9px 0; border-bottom: 1px dashed var(--border-default);
}
.field:last-child { border-bottom: none; }
.field .k { font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--weight-medium); }
.field .v { font-size: var(--text-sm); color: var(--text-strong); font-weight: var(--weight-semibold); text-align: right; }
.field .v.ok { display: inline-flex; align-items: center; gap: 6px; }
.field .v.ok .ic { color: var(--status-success); }
.lines-tag {
  margin-top: 12px; font-size: var(--text-xs); color: var(--text-muted);
  display: flex; align-items: center; gap: 7px;
}
.lines-tag .bar { flex: 1; height: 5px; border-radius: var(--radius-full); background: var(--concrete-200); overflow: hidden; }
.lines-tag .bar i { display: block; height: 100%; background: var(--brand-deep); border-radius: var(--radius-full); }

/* WMS */
.wms-card {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px; background: var(--surface-card);
  box-shadow: var(--shadow-xs);
}
.wms-row1 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 11px; }
.wms-card .po { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-strong); }
.wms-row1 .alf-badge { margin-left: auto; }
.wms-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); }
.wms-meta .lbl { font-size: var(--text-2xs); color: var(--text-subtle); text-transform: uppercase; letter-spacing: .04em; }
.wms-meta .val { font-size: var(--text-sm); color: var(--text-strong); font-weight: var(--weight-semibold); margin-top: 2px; }
.wms-steps { margin-top: 14px; display: flex; flex-direction: column; }
.wstep { display: flex; align-items: center; gap: 10px; font-size: var(--text-xs); color: var(--text-body); padding: 5px 0; }
.wstep .tick {
  width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--status-success-bg); color: var(--status-success);
}
.wstep b { color: var(--text-strong); font-weight: var(--weight-semibold); }

.flow-note { font-size: var(--text-xs); color: var(--text-muted); margin-top: 14px; display: flex; align-items: center; gap: 7px; }
.flow-note .ic { color: var(--brand-deep); }

/* =========================================================
   CAPABILITIES
========================================================= */
.cap-grid {
  margin-top: var(--space-12);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
}
.cap { display: flex; flex-direction: column; }
.cap-num { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--brand-bright); letter-spacing: .04em; }
.cap-ico {
  width: 44px; height: 44px; border-radius: var(--radius-md); margin: var(--space-4) 0;
  background: var(--blue-50); color: var(--brand-deep); display: grid; place-items: center;
}
.cap h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.cap p { font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-normal); }

/* =========================================================
   METRICS BAND
========================================================= */
.band { background: var(--surface-inverse); position: relative; overflow: hidden; }
.band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 70% at 12% 0%, rgba(60,120,239,.20), transparent 60%),
    radial-gradient(45% 60% at 92% 100%, rgba(60,120,239,.14), transparent 60%);
}
.band .wrap { position: relative; }
.band .section-head h2 { color: #fff; }
.metric-grid { margin-top: var(--space-12); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

/* =========================================================
   USE CASES
========================================================= */
.uc-grid { margin-top: var(--space-12); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.uc { display: flex; }
.uc .alf-card__pad--lg { display: flex; gap: var(--space-4); }
.uc-ico {
  width: 46px; height: 46px; flex: none; border-radius: var(--radius-md);
  background: var(--brand-deep); color: #fff; display: grid; place-items: center;
}
.uc-body h3 { font-size: var(--text-xl); margin-bottom: 6px; }
.uc-body p { font-size: var(--text-base); color: var(--text-muted); }
.uc .tags { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: 7px; }

/* =========================================================
   EXCEPTIONS SPLIT
========================================================= */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-16); align-items: center; }
.split .copy h2 { font-size: clamp(1.8rem, 3.2vw, var(--text-4xl)); margin-top: var(--space-4); }
.split .copy p.lead { margin-top: var(--space-4); font-size: var(--text-lg); color: var(--text-muted); }
.feat-list { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); }
.feat { display: flex; gap: var(--space-3); }
.feat .fi {
  width: 28px; height: 28px; border-radius: var(--radius-sm); flex: none; margin-top: 1px;
  background: var(--status-success-bg); color: var(--status-success); display: grid; place-items: center;
}
.feat h4 { font-size: var(--text-md); margin-bottom: 3px; }
.feat p { font-size: var(--text-base); color: var(--text-muted); }

.panel { width: 100%; }
.panel-top {
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: var(--space-3); background: var(--surface-card);
}
.panel-top h4 { font-size: var(--text-sm); }
.panel-top .count { margin-left: auto; font-size: var(--text-xs); color: var(--text-muted); }
.panel-top .seg { display: flex; gap: 4px; background: var(--surface-sunken); padding: 3px; border-radius: var(--radius-sm); }
.panel-top .seg b {
  font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-muted);
  padding: 4px 11px; border-radius: var(--radius-xs);
}
.panel-top .seg b.on { background: var(--surface-card); color: var(--text-strong); box-shadow: var(--shadow-xs); }
.exc { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: var(--space-3); }
.exc:last-child { border-bottom: none; }
.exc .flag { width: 34px; height: 34px; border-radius: var(--radius-sm); flex: none; display: grid; place-items: center; }
.exc .flag--warning { background: var(--status-warning-bg); color: var(--status-warning); }
.exc .flag--success { background: var(--status-success-bg); color: var(--status-success); }
.exc .info { flex: 1; min-width: 0; }
.exc .info .l1 { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
.exc .info .l2 { font-size: var(--text-xs); color: var(--text-muted); margin-top: 1px; }
.exc .alf-badge { white-space: nowrap; }

/* =========================================================
   INTEGRATIONS
========================================================= */
.int-grid { margin-top: var(--space-12); display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); }
.int { aspect-ratio: 1.6 / 1; display: grid !important; place-items: center; }
.int-name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--text-muted); text-align: center; }
.int:hover .int-name { color: var(--brand-deep); }
.int-note { margin-top: var(--space-7); text-align: center; font-size: var(--text-base); color: var(--text-muted); }

/* =========================================================
   TESTIMONIALS
========================================================= */
.quote-wrap { max-width: 900px; margin: 0 auto; text-align: center; }
.quote-wrap .mk { font-size: 56px; line-height: .4; color: var(--brand-deep); opacity: .25; font-family: var(--font-display); }
.quote-wrap blockquote {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: clamp(1.4rem, 2.6vw, var(--text-4xl)); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: var(--space-4) 0 var(--space-7); text-wrap: balance;
}
.quote-wrap blockquote em { color: var(--brand-bright); font-style: normal; }
.byline { display: inline-flex; align-items: center; gap: var(--space-3); }
.byline .who { text-align: left; white-space: nowrap; }
.byline .who .n { font-weight: var(--weight-semibold); color: var(--text-strong); font-size: var(--text-base); }
.byline .who .r { font-size: var(--text-sm); color: var(--text-muted); }

.tcards { margin-top: var(--space-16); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.tcard { display: flex; }
.tcard .alf-card__pad--lg { display: flex; flex-direction: column; }
.tcard .stat {
  font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--brand-deep);
  font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); line-height: 1;
}
.tcard .stat span { font-size: var(--text-base); color: var(--text-muted); font-weight: var(--weight-medium); }
.tcard p { font-size: var(--text-base); color: var(--text-body); margin: var(--space-4) 0 var(--space-5); flex: 1; }
.tcard .by { display: flex; align-items: center; gap: var(--space-3); }
.tcard .by .n { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
.tcard .by .r { font-size: var(--text-xs); color: var(--text-muted); }

/* =========================================================
   FAQ
========================================================= */
.faq-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-16); }
.faq-intro h2 { font-size: clamp(1.8rem, 3.2vw, var(--text-4xl)); margin-top: var(--space-4); }
.faq-intro p { margin-top: var(--space-4); color: var(--text-muted); }
.faq-list { border-top: 1px solid var(--border-default); }
.faq-item { border-bottom: 1px solid var(--border-default); }
.faq-q {
  width: 100%; background: none; border: none; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) 4px;
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-lg);
  color: var(--text-strong);
}
.faq-q .pm {
  margin-left: auto; flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border-default); display: grid; place-items: center;
  transition: all var(--duration-base) var(--ease-standard); color: var(--brand-deep);
}
.faq-q .pm .ic { transition: transform var(--duration-slow) var(--ease-standard); }
.faq-item.open .pm { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.faq-item.open .pm .ic { transform: rotate(135deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--duration-slow) var(--ease-standard); }
.faq-a p { padding: 0 4px var(--space-5); font-size: var(--text-base); color: var(--text-muted); max-width: 580px; }

/* =========================================================
   CTA
========================================================= */
.cta-section { background: var(--surface-inverse); position: relative; overflow: hidden; }
.cta-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(48% 75% at 50% 118%, rgba(60,120,239,.30), transparent 60%),
    radial-gradient(36% 60% at 88% -16%, rgba(60,120,239,.20), transparent 60%);
}
.cta-section .wrap { position: relative; }
.cta {
  color: #fff; text-align: center;
  padding: var(--space-12) var(--space-8); position: relative;
}
.cta > * { position: relative; }
.cta h2 { color: #fff; font-size: clamp(1.9rem, 4vw, var(--text-5xl)); }
.cta p { color: var(--blue-100); max-width: 520px; margin: var(--space-4) auto 0; font-size: var(--text-lg); }
.cta-form { margin: var(--space-8) auto 0; display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; max-width: 540px; }
.cta-field { flex: 1; min-width: 240px; text-align: left; }
.cta-field .alf-input { height: 48px; }
.cta-fine { display: block; margin-top: var(--space-4); font-size: var(--text-sm); color: var(--brand-sky); }

/* =========================================================
   FOOTER
========================================================= */
.footer { padding: var(--space-20) 0 var(--space-10); border-top: 1px solid var(--border-subtle); background: var(--surface-card); }
.foot-lean { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-10); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-10); }
.foot-brand .brand { margin-bottom: var(--space-4); }
.foot-brand p { font-size: var(--text-base); color: var(--text-muted); max-width: 290px; }
.foot-brand .yc { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-subtle); display: inline-flex; }
.foot-col h5 {
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-subtle); margin-bottom: var(--space-4);
}
.foot-col a { display: block; font-size: var(--text-base); color: var(--text-muted); margin-bottom: 11px; transition: color var(--duration-fast); }
.foot-col a:hover { color: var(--brand-deep); }
.foot-bottom {
  margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  font-size: var(--text-sm); color: var(--text-muted);
}
.foot-bottom .soc { margin-left: auto; display: flex; gap: var(--space-2); }
.foot-bottom .soc a {
  width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border-default);
  display: grid; place-items: center; color: var(--text-muted); transition: all var(--duration-base);
}
.foot-bottom .soc a:hover { color: var(--brand-deep); border-color: var(--brand-deep); }

/* =========================================================
   SCROLL REVEAL — visible by default; only the `anim` class
   (added before paint when motion is allowed) hides + animates.
   A failsafe drops `anim` so content is never left invisible.
========================================================= */
.reveal { opacity: 1; transform: none; }
html.anim .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
html.anim .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .hero-copy { max-width: 640px; }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: var(--space-10); }
  .int-grid { grid-template-columns: repeat(4, 1fr); }
  .tcards { grid-template-columns: 1fr; }
  .faq-wrap { grid-template-columns: 1fr; gap: var(--space-6); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
@media (max-width: 760px) {
  .nav-links, .nav-cta .signin { display: none; }
  .hero-cta-secondary { display: none !important; }
  /* H2: proper 44px touch target on nav CTA */
  .nav-cta .alf-btn { font-size: var(--text-sm); min-height: 44px; padding: 10px 16px; }
  .section { padding: var(--space-16) 0; }
  .stage { min-height: 0; }
  .orbit { height: 160px; }
  .feed { height: 58px; }
  .hero { padding: var(--space-10) 0 var(--space-12); }
  /* M2: looser line-height for multi-line h1 */
  .hero h1 { line-height: 1.2; }
  .hero-meta { flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-xs); }
  .console-grid { grid-template-columns: 1fr; }
  .pane { border-right: none; border-bottom: 1px solid var(--border-subtle); min-height: 0; }
  .pane:last-child { border-bottom: none; }
  .uc-grid { grid-template-columns: 1fr; }
  .int-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-lean { flex-direction: column; gap: var(--space-6); }
  /* L4: footer social touch targets */
  .foot-bottom .soc a { width: 44px; height: 44px; }
  .pipeline { justify-content: flex-start; }
  /* M3: left-align testimonial quote for readability */
  .quote-wrap { text-align: left; }
  .byline { justify-content: flex-start; }
  .byline .who { white-space: normal; }
  /* M4: lighter section descriptor text */
  .section-head p { font-size: var(--text-md); }
  /* H3: remove double horizontal padding in CTA section */
  .cta { padding: var(--space-10) var(--space-4); }
}
/* M5 + L1: gutters and CTA form stack earlier than 460px */
@media (max-width: 640px) {
  .wrap { padding: 0 var(--space-5); }
  .cta-form { flex-direction: column; }
  .cta-field { min-width: 0; }
}
@media (max-width: 460px) {
  /* M1: tighter section padding on phones */
  .section { padding: var(--space-12) 0; }
  .cap-grid { grid-template-columns: 1fr; }
  .int-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr; }
  /* L3: hide feed timestamps to recover space */
  .feed .ftime { display: none; }
}