/* ==========================================================================
   Corbit — Design tokens
   Follows the Facecode Design Guide (ElevenLabs-homepage-derived system):
   neutral-first color, Inter type scale, 1152px editorial grid, warm-gray
   showcase surfaces, pill controls, soft/slow functional motion.
   ========================================================================== */
:root {
  /* --- 12.1 Core colors --- */
  --color-canvas: #FDFDFD;
  --color-surface-soft: #F5F3F1;
  --color-surface-raised: #FFFFFF;
  --color-text-primary: #0F0F0F;
  --color-text-strong: #040404;
  --color-text-secondary: #5F5F5F;
  --color-text-tertiary: #8E8C89;
  --color-border-subtle: #E8E6E3;
  --color-border-soft: #F3F1EF;
  --color-disabled: #B9B7B4;

  /* --- Corbit platform color (single accent direction; 2-5% usage only) --- */
  --color-corbit-teal: #0E6B5C;
  --color-corbit-mint: #8FBBAE;
  --color-corbit-sky: #A9C6D6;
  --color-corbit-amber: #C99A4B;
  --color-corbit-deep: #0B4A40;
  --color-corbit-cream: #F3EFE6;

  /* semantic aliases used throughout this file */
  --bg: var(--color-canvas);
  --surface: var(--color-surface-soft);
  --surface-raised: var(--color-surface-raised);
  --ink: var(--color-text-primary);
  --ink-strong: var(--color-text-strong);
  --ink-soft: var(--color-text-secondary);
  --ink-faint: var(--color-text-tertiary);
  --line: var(--color-border-subtle);
  --line-soft: var(--color-border-soft);
  --disabled: var(--color-disabled);
  --accent: var(--color-corbit-teal);
  --accent-ink: var(--color-corbit-deep);
  --accent-soft: #E7EFEC;
  --focus: var(--color-corbit-teal);

  /* --- type --- */
  --font-body: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;

  /* --- 3.2 Desktop type scale --- */
  --text-display-xl: 400 clamp(2.4rem, 1.9rem + 2.2vw, 4rem)/1.02 var(--font-body);
  --text-display: 400 clamp(2rem, 1.6rem + 1.8vw, 3rem)/1.08 var(--font-body);
  --text-h2: 400 clamp(1.6rem, 1.35rem + 1.1vw, 2.5rem)/1.1 var(--font-body);
  --text-h3: 400 clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem)/1.21 var(--font-body);
  --text-h4: 500 clamp(1.1rem, 1.02rem + 0.35vw, 1.375rem)/1.27 var(--font-body);
  --tracking-display-xl: -0.035em;
  --tracking-display: -0.03em;
  --tracking-h2: -0.025em;
  --tracking-h3: -0.015em;
  --tracking-h4: -0.01em;

  /* --- 4.1/4.3 grid + spacing --- */
  --container-max: 1152px;
  --page-padding-desktop: 64px;
  --page-padding-tablet: 32px;
  --page-padding-mobile: 16px;
  --gutter: clamp(var(--page-padding-mobile), 5vw, var(--page-padding-desktop));
  --space-section: clamp(56px, 9vw, 128px);

  /* --- 12.3 shape / shadow / motion --- */
  --radius-control: 999px;
  --radius-tab: 14px;
  --radius-card: 16px;
  --radius-showcase: 18px;
  --shadow-control: 0 1px 2px rgba(15,15,15,.04);
  --shadow-active: 0 1px 3px rgba(15,15,15,.07);
  --shadow-overlay: 0 12px 30px rgba(15,15,15,.10), 0 2px 8px rgba(15,15,15,.05);

  --duration-fast: 180ms;
  --duration-standard: 280ms;
  --duration-reveal: 480ms;
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --ease-reveal: cubic-bezier(.22,1,.36,1);

  /* legacy aliases kept so existing component rules below don't all need renaming */
  --radius-sm: var(--radius-tab);
  --radius-md: var(--radius-card);
  --radius-lg: var(--radius-showcase);
  --radius-pill: var(--radius-control);
  --shadow-card: var(--shadow-control);
  --shadow-card-hover: var(--shadow-active);
  --ease: var(--ease-standard);
  --dur: var(--duration-fast);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -0.02em; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  background: var(--ink-strong); color: var(--bg);
  padding: 10px 16px; border-radius: var(--radius-tab);
  z-index: 1000;
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus { top: 12px; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto; margin-right: auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}
/* Sections only take top padding — the next section's top padding IS the
   gap between them. Applying padding on both edges of every section was
   doubling up at every boundary (e.g. Solutions -> Clinical), producing an
   oversized, inconsistent gap compared to the rest of the page's rhythm. */
section { padding-top: var(--space-section); }
section:last-of-type { padding-bottom: var(--space-section); }
/* Every anchor-jump target reserves space for the sticky header (72px) plus
   a little breathing room, so clicking a nav link never lands with the
   header overlapping — or hiding — the top of the section's content. */
#solutions, #deploy, #clinical, #faq, #company, #contact {
  scroll-margin-top: 88px;
}
/* Deployment centers its content within the viewport (minus header) so
   that jumping to it via the nav link shows the whole section balanced
   on screen, the same treatment as the hero. */
#deploy {
  min-height: calc(100vh - 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  box-sizing: border-box;
}
/* Same viewport-centered treatment for Clinical Approach. */
#clinical {
  min-height: calc(100vh - 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  box-sizing: border-box;
}
/* Same viewport-centered treatment for FAQ. */
#faq {
  min-height: calc(100vh - 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  box-sizing: border-box;
}
.section-head {
  max-width: 640px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: rgba(14,107,92,0.09);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(14,107,92,0.14);
  padding: 6px 14px;
  border-radius: var(--radius-control);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
h2.h-lg { font: var(--text-h2); letter-spacing: var(--tracking-h2); color: var(--ink-strong); }
p.lede { font-size: 18px; line-height: 26px; color: var(--ink-soft); margin-top: 14px; max-width: 55ch; }

/* ==========================================================================
   Buttons — 7.1 / 7.2 / 7.3
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding-left: 20px; padding-right: 20px;
  border-radius: var(--radius-control);
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.btn-primary {
  background: var(--ink-strong);
  border: 1px solid var(--ink-strong);
  color: #FFFFFF;
}
.btn-primary:hover { background: #1A1A1A; border-color: #1A1A1A; transform: translateY(-1px); }
.btn-primary:active { background: #000000; transform: translateY(0); }
.btn-outline {
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-control);
}
.btn-outline:hover { background: #FAFAF9; border-color: #D7D4D1; transform: translateY(-1px); }
.btn-outline:active { transform: translateY(0); }
.btn-sm { min-height: 38px; padding-left: 16px; padding-right: 16px; font-size: 0.9rem; }
.btn svg { width: 16px; height: 16px; }

/* ==========================================================================
   Header / Nav — 6.1 desktop header + sticky state
   ========================================================================== */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: background var(--duration-standard) var(--ease-standard),
              border-color var(--duration-standard) var(--ease-standard);
}
.site-header.is-scrolled {
  background: rgba(253, 253, 253, 0.78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: rgba(15, 15, 15, 0.06);
  box-shadow: 0 1px 24px rgba(15,15,15,.04);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.brand-mark { width: 26px; height: 26px; flex-shrink: 0; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-links a { margin-right: 30px; }
.nav-links a:last-child { margin-right: 0; }
.nav-links a {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-soft);
  transition: color var(--duration-fast) var(--ease-standard);
}
.nav-links a:hover { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lang-switch {
  display: flex; align-items: center; gap: 2px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.lang-switch a { padding: 4px 7px; border-radius: 6px; color: var(--ink-faint); }
.lang-switch a[aria-current="true"] { color: var(--ink); background: rgba(15,15,15,.05); font-weight: 500; }
.lang-switch span { color: var(--line); }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-tab);
}
.nav-toggle:hover { background: rgba(15,15,15,.05); }
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-actions .btn-outline { display: none; }
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 72px; right: 0; bottom: 0; left: 0;
  background: var(--bg);
  z-index: 99;
  overflow-y: auto;
  padding: 24px var(--gutter) 40px;
}
.mobile-menu.is-open { display: block; }
.mobile-menu a {
  display: block;
  padding: 16px 4px;
  font-size: 1.15rem;
  font-weight: 400;
  border-bottom: 1px solid var(--line);
}
.mobile-menu .btn { width: 100%; margin-top: 24px; }

/* ==========================================================================
   Hero — 5.1 / 5.2 asymmetric two-column intro + full-width showcase below
   ========================================================================== */
/* Hero + stat strip are centered as one block within the first viewport
   (minus the sticky header), so the page opens balanced instead of
   top-heavy with a large empty gap below. Solutions still starts on the
   next scroll, but through intentional centering rather than a padding
   hack living outside the visible content. */
.hero-viewport {
  position: relative;
  min-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hero-viewport::before {
  content: "";
  position: absolute;
  top: -180px; right: -120px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-corbit-mint), transparent 70%);
  filter: blur(80px);
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}
.hero { position: relative; padding-top: clamp(32px, 6vw, 64px); padding-bottom: 0; z-index: 1; }
.hero > .container { position: relative; z-index: 1; }
.hero-intro {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 6vw, 96px);
  align-items: flex-start;
}
.hero-intro > .hero-headline { flex: 5 1 380px; }
.hero-intro > .hero-support { flex: 6 1 340px; padding-top: 10px; }

.hero h1 {
  font: var(--text-display);
  letter-spacing: var(--tracking-display);
  color: var(--ink-strong);
}
.hero-support p {
  font-size: 18px;
  line-height: 26px;
  color: var(--ink-soft);
  max-width: 52ch;
}
.hero-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-cta > * { margin-right: 12px; margin-bottom: 12px; }
.hero-cta > *:last-child { margin-right: 0; }
/* Equal-width button pair — sized to comfortably fit the longer label so
   both buttons in the row match regardless of text length. */
.cta-equal > .btn { width: 210px; }
.hero-note {
  margin-top: 20px;
  font-size: 13px;
  color: var(--ink-faint);
}

.hero-visual {
  position: relative;
  max-width: 460px;
  margin-left: auto; margin-right: auto;
}

@media (max-width: 900px) {
  .hero-intro { flex-direction: column; }
  .hero-intro > .hero-headline,
  .hero-intro > .hero-support { flex-basis: auto; }
}

/* ==========================================================================
   Stat / capability strip
   ========================================================================== */
.strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-top: 28px; padding-bottom: 28px;
  margin-top: clamp(32px, 5vw, 64px);
}
.strip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}
.strip-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1 1 200px;
  max-width: 260px;
  min-width: 0;
}
.strip-item strong {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  line-height: 1.2;
  white-space: nowrap;
}
.strip-item strong.accent-teal { color: var(--accent-ink); }
.strip-item strong.accent-sky { color: #3B6B82; }
.strip-item strong.accent-mint { color: #3C6152; }
.strip-item strong.accent-amber { color: #93711F; }
.strip-item span {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.tech-card {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(24px, 4vw, 48px);
}
.tech-card > div:first-child { flex: 1 1 320px; min-width: 260px; }
.tech-card h3 { font: var(--text-h3); letter-spacing: var(--tracking-h3); color: var(--ink-strong); margin-bottom: 12px; }
.tech-card p { color: var(--ink-soft); font-size: 16px; line-height: 24px; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: var(--radius-control);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
/* per-modality accent tint — small, deliberate color points per the guide's
   "one accent per section, used only in identity/product moments" rule */
.chip-voice { background: #F5EEE1; color: #7A5A1F; }
.tech-visual { flex: 1 1 280px; height: auto; min-width: 220px; }

@media (max-width: 730px) {
  .tech-visual { order: -1; }
}

.phone-visual { display: flex; justify-content: center; }
.product-screenshot.phone-screenshot {
  max-width: 230px;
  width: 100%;
  margin-left: auto; margin-right: auto;
  border: none;
  box-shadow: none;
}

/* ==========================================================================
   Product blocks — HeartBit / VoiceBit dedicated showcases
   ========================================================================== */
/* ---------- Product tabs — "flip between pages" switcher ----------
   Two pill-style tabs above the product content; only one product panel
   is visible at a time. Switching plays a short fade + rise, so it reads
   as turning to a new page rather than a hard cut. */
.product-tabs {
  display: flex;
  margin-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
}
.product-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 4px;
  margin-right: 32px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-faint);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--duration-standard) var(--ease-standard),
              border-color var(--duration-standard) var(--ease-standard);
}
.product-tab img { opacity: 0.5; transition: opacity var(--duration-standard) var(--ease-standard); }
.product-tab:hover { color: var(--ink-strong); }
.product-tab.is-active {
  color: var(--ink-strong);
  border-bottom-color: var(--accent-ink);
}
.product-tab.is-active img { opacity: 1; }

.product-panel { animation: page-in 380ms var(--ease-reveal); }
.product-panel[hidden] { display: none; }
@keyframes page-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.product-block { margin-bottom: 40px; }
.product-block:last-child { margin-bottom: 0; }
.product-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.product-icon { flex-shrink: 0; }
.product-name {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  margin: 0;
}
.product-tagline {
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.subsection-title {
  font: var(--text-h4);
  font-size: 1.05rem;
  letter-spacing: var(--tracking-h4);
  color: var(--ink-strong);
  margin-top: 32px;
  margin-bottom: 14px;
}
.body-copy {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 25px;
  max-width: 68ch;
}
.product-screenshot {
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-overlay);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  display: block;
}

/* ==========================================================================
   Feature list w/ visual
   ========================================================================== */
.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.split > div { flex: 1 1 380px; margin-right: clamp(32px, 5vw, 72px); }
.split > div:last-child { margin-right: 0; }
.split-visual { width: 100%; overflow: visible; }

/* ---------- Clinical dashboard: real glassmorphism ----------
   Matches the hero's glow treatment exactly: a single mint radial blob
   with filter:blur(80px), sitting behind genuinely translucent white
   glass cards (backdrop-filter), not a gradient painted flat across
   the card. Centering lives on this element directly (max-width +
   margin-left/right:auto), the same pattern used on the product
   screenshots elsewhere, rather than on the wrapping .split-visual —
   so it centers the same way regardless of the flex column layout on
   mobile. */
.dash-glow {
  position: relative;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 28px;
  padding: 24px;
  background: var(--bg);
  box-shadow: 0 30px 60px rgba(60,70,80,0.14), 0 4px 14px rgba(60,70,80,0.08);
  overflow: hidden;
}
.dash-glow::before {
  content: "";
  position: absolute;
  top: -100px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-corbit-mint), transparent 70%);
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.dash-row { position: relative; display: flex; z-index: 1; }
.dash-glow > * + * { margin-top: 18px; }
.dash-row > .dash-card { margin-right: 18px; }
.dash-row > .dash-card:last-child { margin-right: 0; }
.dash-card {
  flex: 1;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 4px 14px rgba(60,70,80,0.05), inset 0 1px 0 rgba(255,255,255,0.9);
}
.dash-ecg {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.dash-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #5F5C52;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
.dash-label .dot { width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; }
.dot-teal { background: #0E6B5C; }
.dot-sky { background: #2E6C86; }
.dot-mint { background: #3C6152; }
.dot-amber { background: #93711F; }
.dash-value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  margin-top: 4px;
  letter-spacing: -0.02em;
}
.dash-value .unit { font-size: 13px; font-weight: 400; color: #6B685D; margin-left: 3px; }
.dash-value.teal { color: #0E6B5C; }
.dash-value.sky { color: #2E6C86; }
.dash-value.mint { color: #3C6152; }
.dash-value.amber { color: #93711F; }

.feature-item { display: flex; gap: 16px; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid var(--line); }
.feature-item:last-child { border-bottom: 1px solid var(--line); }
.feature-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-tab);
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
}
.feature-icon svg { width: 20px; height: 20px; color: var(--accent-ink); }
/* Small, deliberate color variety across the deployment grid icons — still
   drawn from the corbit palette, never a random hue (guide 2.5 / 13.2). */
.feature-icon.icon-teal { background: var(--accent-soft); }
.feature-icon.icon-teal svg { color: var(--accent-ink); }
.feature-icon.icon-sky { background: #E8EFF3; }
.feature-icon.icon-sky svg { color: #3B6B82; }
.feature-icon.icon-mint { background: #EAF3EE; }
.feature-icon.icon-mint svg { color: #3C6152; }
.feature-item h4 { font: var(--text-h4); letter-spacing: var(--tracking-h4); color: var(--ink-strong); margin-bottom: 6px; }
.feature-item p { color: var(--ink-soft); font-size: 15px; line-height: 22px; }

@media (max-width: 760px) {
  .split { flex-direction: column; }
  .split > div { flex-basis: auto; margin-right: 0; }
  .split .split-visual { order: -1; margin-bottom: 40px; }
}

/* ==========================================================================
   Capability / integration grid
   ========================================================================== */
.grid-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.grid-cards .cap-card { flex: 1 1 300px; }
@media (max-width: 760px) { .grid-cards .cap-card { flex-basis: 45%; } }
@media (max-width: 480px) { .grid-cards .cap-card { flex-basis: 100%; } }

.cap-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: none;
  transition: box-shadow var(--duration-standard) var(--ease-standard),
              border-color var(--duration-standard) var(--ease-standard);
}
.cap-card:hover { box-shadow: var(--shadow-active); border-color: var(--line); }
.cap-card .feature-icon { margin-bottom: 16px; }
.cap-card h4 { font: var(--text-h4); font-size: 1rem; letter-spacing: var(--tracking-h4); color: var(--ink-strong); margin-bottom: 6px; }
.cap-card p { font-size: 14px; line-height: 21px; color: var(--ink-soft); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  position: relative;
  background: var(--ink-strong);
  color: var(--bg);
  border-radius: var(--radius-showcase);
  padding: clamp(36px, 6vw, 64px);
  overflow: hidden;
}
.cta-band::before, .cta-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
}
.cta-band::before {
  width: 340px; height: 340px;
  top: -120px; right: -80px;
  background: radial-gradient(circle, var(--color-corbit-teal), transparent 70%);
}
.cta-band::after {
  width: 300px; height: 300px;
  bottom: -140px; left: -60px;
  background: radial-gradient(circle, var(--color-corbit-amber), transparent 70%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band .section-head h2 { color: var(--bg); }
.cta-band .section-head p { color: rgba(253,253,253,.68); }
.cta-band .eyebrow { background: rgba(253,253,253,.12); border-color: rgba(253,253,253,.18); color: var(--bg); }
.cta-band .eyebrow::before { background: var(--color-corbit-mint); }
.cta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}
.cta-grid .cta-item { flex: 1 1 220px; }
.cta-item {
  background: rgba(253,253,253,.08);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(253,253,253,.16);
  border-radius: var(--radius-card);
  padding: 22px;
  box-shadow: inset 0 1px 0 rgba(253,253,253,.10), 0 8px 24px rgba(0,0,0,.18);
  transition: background var(--duration-standard) var(--ease-standard),
              border-color var(--duration-standard) var(--ease-standard);
}
.cta-item:hover {
  background: rgba(253,253,253,.13);
  border-color: rgba(253,253,253,.24);
}
.cta-item h4 { font: var(--text-h4); font-size: 1rem; letter-spacing: var(--tracking-h4); margin-bottom: 8px; }
.cta-item p { font-size: 14px; line-height: 21px; color: rgba(253,253,253,.68); }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-list { max-width: 780px; margin-left: auto; margin-right: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px; padding-bottom: 22px;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-strong);
}
.faq-q .plus {
  width: 22px; height: 22px;
  flex-shrink: 0;
  position: relative;
}
.faq-q .plus::before, .faq-q .plus::after {
  content: "";
  position: absolute;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.faq-q .plus::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.faq-q .plus::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.faq-item[data-open="true"] .plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-item[data-open="true"] .plus::before { background: var(--accent-ink); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-standard) var(--ease-standard);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 23px;
}
.faq-a-inner { padding-bottom: 22px; max-width: 62ch; }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final-cta {
  text-align: center;
  min-height: calc(100vh - 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  box-sizing: border-box;
}
.final-cta h2 { font: var(--text-display); letter-spacing: var(--tracking-display); max-width: 18ch; margin-left: auto; margin-right: auto; color: var(--ink-strong); }
.final-cta .hero-cta { justify-content: center; margin-top: 28px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--line);
  padding-top: clamp(40px, 6vw, 72px); padding-bottom: 32px;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding-bottom: 40px;
}
.footer-brand { flex: 1.6 1 260px; }
.footer-brand p { color: var(--ink-soft); font-size: 14px; line-height: 21px; margin-top: 12px; max-width: 30ch; }
.footer-col { flex: 1 1 140px; }
.footer-col h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 14px;
  font-weight: 500;
}
.footer-col a {
  display: block;
  padding-top: 7px; padding-bottom: 7px;
  font-size: 14px;
  color: var(--ink-soft);
}
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.footer-bottom p { font-size: 13px; color: var(--ink-faint); }
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.social-row a:hover { border-color: #D7D4D1; color: var(--ink); }
.social-row svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .footer-brand { flex-basis: 100%; }
}
@media (max-width: 520px) {
  .footer-col { flex-basis: 40%; }
}

/* ==========================================================================
   Signal visuals (pure CSS/SVG)
   ========================================================================== */
.pulse-line {
  stroke: var(--accent);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pulse-line-alt { stroke: var(--color-corbit-amber); }
.dash-anim {
  stroke-dasharray: 6 6;
  animation: dash-move 1.4s linear infinite;
}
@keyframes dash-move { to { stroke-dashoffset: -24; } }

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(38px);
  opacity: 0.55;
  pointer-events: none;
  animation: orb-drift 11s ease-in-out infinite;
}
@keyframes orb-drift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(8px,-6px,0) scale(1.02); }
}

.readout-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-overlay);
  padding: 16px 18px;
}
.readout-card .label { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.readout-card .value { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500; margin-top: 2px; color: var(--ink-strong); }
.readout-card .value span { font-size: 0.85rem; color: var(--ink-faint); font-weight: 400; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}