/* === Reset & Base === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --radius: 8px;
  --transition: 0.3s ease;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* === Typography === */
h1, h2, h3 {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.1rem; font-weight: 500; letter-spacing: -0.01em; }

/* === Utilities === */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

.label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--badge-orange);
  margin-bottom: 18px;
  display: block;
}

.section-sub {
  color: var(--text-secondary);
  max-width: 620px;
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.75;
}

/* === Buttons === */
.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  font-family: inherit;
  letter-spacing: 0.01em;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.btn-primary:hover {
  background: var(--btn-primary-hover);
  transform: translateY(-1px);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-outline {
  border: 1px solid var(--border);
  color: var(--text);
  background: transparent;
}

.btn-outline:hover {
  border-color: var(--border-hover);
  background: var(--surface-tint-3);
}

.btn-ghost {
  color: var(--text-secondary);
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.btn-ghost:hover {
  color: var(--text);
}

/* === Spinning-border "Book a Demo" button === */
.btn-spin {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 1px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-spin:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.1);
}

.btn-spin__beam {
  position: absolute;
  inset: -100%;
  background: conic-gradient(from 90deg at 50% 50%, transparent 0%, transparent 75%, #ffffff 100%);
  animation: btn-spin-rotate 3s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-spin:hover .btn-spin__beam {
  opacity: 1;
}

.btn-spin__border {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: #27272a;
  transition: opacity 0.3s ease;
}

.btn-spin:hover .btn-spin__border {
  opacity: 0;
}

.btn-spin__surface {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 10px 24px;
  border-radius: var(--radius);
  background: linear-gradient(to bottom, #27272a, #09090b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #a1a1aa;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.btn-spin:hover .btn-spin__surface {
  color: #ffffff;
}

@keyframes btn-spin-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* === Fade-in Animation === */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* The universal animation/transition reset lives in shared theme.css
   (loaded on every page). This just adds the page-specific piece it
   can't know about: skipping the scroll-triggered reveal itself. */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
  }

  /* theme.css's universal 0.01ms override still loops these keyframes
     near-instantly; drop them entirely so the diagram sits still. */
  .sources-integration__flow,
  .sources-integration__pulse {
    animation: none;
  }
}

/* === Nav === */
nav#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 14px 0;
  transition: background 0.4s ease, border-bottom 0.4s ease, padding 0.3s ease;
}

nav#nav.scrolled {
  background: var(--nav-bg-scrolled);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}

.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 0;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo-img {
  height: 28px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 36px;
  margin-left: 48px;
  flex: 1;
}

.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color var(--transition);
}

.nav-links a:hover {
  color: var(--text);
}

nav#nav .nav-theme-toggle {
  margin-left: 16px;
  flex-shrink: 0;
}

nav#nav .btn-spin {
  margin-left: 16px;
}

nav#nav .btn-spin__surface {
  padding: 8px 20px;
  font-size: 0.7rem;
}

/* The hero behind the nav is always a black WebGL scene, regardless of the
   light/dark toggle, so the unscrolled nav is pinned to light-on-dark too.
   Once .scrolled lands (past the hero) it reverts to the theme-aware
   var-based colors, since whatever section is now behind it follows the
   page theme. */
nav#nav:not(.scrolled) .logo-img {
  filter: none;
}

nav#nav:not(.scrolled) .nav-links a {
  color: rgba(255, 255, 255, 0.7);
}

nav#nav:not(.scrolled) .nav-links a:hover {
  color: #fff;
}

nav#nav:not(.scrolled) .theme-toggle {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
}

nav#nav:not(.scrolled) .theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

nav#nav:not(.scrolled) .mobile-menu-btn span {
  background: rgba(255, 255, 255, 0.85);
}

/* === Mobile Menu Button === */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.mobile-menu-btn span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text-secondary);
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}

nav.menu-open .mobile-menu-btn span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
nav.menu-open .mobile-menu-btn span:nth-child(2) {
  opacity: 0;
}
nav.menu-open .mobile-menu-btn span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* === Mobile Nav Dropdown === */
.mobile-nav {
  display: none;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding: 200px 0 140px;
  min-height: 700px;
  display: flex;
  align-items: center;
  background: #000;
}

/* The renderer paints a full-bleed backdrop; the hole sits off to one side
   (via its `focus` option) so it never fights the copy for attention, and
   its own scrim pass darkens the edge the copy sits on. If WebGL is
   unavailable the canvas hides itself and this solid black remains. */
.hero-blackhole {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-blackhole canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.hero-content {
  max-width: 560px;
}

/* Hero copy always sits over the black hole regardless of the light/dark
   toggle, so its colors are fixed rather than pulled from the theme tokens. */
.hero .eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fa4902;
  margin-bottom: 24px;
  display: block;
}

.hero h1 {
  margin-bottom: 26px;
  color: #fff;
}

.hero-sub {
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.1rem;
  max-width: 480px;
  margin-bottom: 40px;
  line-height: 1.75;
}

.hero-ctas {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero .btn-primary {
  background: #fff;
  color: #000;
}

.hero .btn-primary:hover {
  background: #e8e8e8;
}

.hero .btn-ghost {
  color: rgba(255, 255, 255, 0.7);
}

.hero .btn-ghost:hover {
  color: #fff;
}

/* .proof-panel.hero-proof (not just .hero-proof) so this outranks the
   later, equal-specificity .proof-panel rule below — otherwise its
   var(--surface) background wins in light mode and leaves white text
   (from the more specific .hero-proof descendant rules) on a white box. */
.proof-panel.hero-proof {
  max-width: 480px;
  background: rgba(13, 13, 13, 0.72);
  border-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-proof .proof-context,
.hero-proof .proof-cite {
  color: rgba(255, 255, 255, 0.5);
}

.hero-proof .proof-q {
  color: #fff;
}

.hero-proof .proof-a {
  color: rgba(255, 255, 255, 0.75);
}

/* === Proof panel — used in the hero and feature mockups === */
.proof-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 28px 28px 24px;
}

.proof-context {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.proof-exchange {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.proof-q {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.6;
}

.proof-a {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.75;
}

.proof-cite {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.01em;
}

/* ============================================================
   STORY CHAPTERS (Problem / Philosophy / Solution / Demo / Growing)
   ============================================================ */
.chapter {
  padding: 150px 0;
  border-top: 1px solid var(--border);
}

.chapter-header {
  margin-bottom: 48px;
  max-width: 720px;
}

.chapter-header h2 {
  margin-top: 4px;
}

/* ============================================================
   COMPANY KNOWLEDGE SOURCES — radial hub, sources flowing into Relativity
   ============================================================
   A 100x100 SVG viewBox sits under absolutely-positioned HTML nodes. Both
   use the same 0-100 coordinate space (the container is locked to a 1:1
   aspect ratio via `aspect-ratio: 1`), so a node's `left/top` percentage
   and its connecting line's SVG coordinates are numerically identical —
   no JS needed to keep them in sync. Each spoke runs from its source node
   to the center (not the reverse) and the flowing dash animates toward
   the center, so the motion reads as knowledge flowing into Relativity. */
.sources-integration {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
  margin: 8px auto 0;
}

.sources-integration__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sources-integration__line {
  fill: none;
  stroke: var(--border);
  stroke-width: 0.35;
}

.sources-integration__flow {
  fill: none;
  stroke: url(#sourcesFlowGlow);
  stroke-width: 0.9;
  stroke-linecap: round;
  /* Short dash, long gap (was 3 9) — sparser, so fewer dashes are ever in
     flight on a given spoke at once. Each path's own animation-duration
     and animation-delay (set inline, per node) override the base speed
     and phase below to give every node an independent, non-uniform
     cadence rather than a synchronized rotation. */
  stroke-dasharray: 2 20;
  animation: sources-flow 6s linear infinite;
}

@keyframes sources-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -66; }
}

.sources-integration__center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.sources-integration__badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 11vw, 68px);
  height: clamp(52px, 11vw, 68px);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.sources-integration__logo {
  height: 68%;
  width: auto;
}

.sources-integration__pulse {
  position: absolute;
  inset: -8px;
  border: 2px solid #fa4902;
  border-radius: 20px;
  opacity: 0;
  animation: sources-pulse 3s ease-out infinite;
}

@keyframes sources-pulse {
  0%   { transform: scale(1); opacity: 0.45; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.sources-integration__node {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: clamp(56px, 11vw, 84px);
  transform: translate(-50%, -50%);
}

.sources-integration__node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 7vw, 48px);
  height: clamp(32px, 7vw, 48px);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-secondary);
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition), transform var(--transition);
}

.sources-integration__node-icon svg {
  /* max- (not fixed) width/height: each icon keeps its own hardcoded,
     already aspect-correct pixel size (they range from 16x20 to 24x17)
     and only shrinks — without stretching — if that's too big for the
     clamped icon box on a small viewport. */
  width: auto;
  height: auto;
  max-width: 60%;
  max-height: 60%;
}

.sources-integration__node:hover .sources-integration__node-icon {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.sources-integration__node-label {
  font-size: clamp(0.6rem, 1.6vw, 0.7rem);
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.2;
}

.sources-connector {
  display: flex;
  justify-content: center;
  padding: 28px 0;
  color: var(--text-muted);
}

.sources-target {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 36px 32px;
}

.sources-target__label {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 12px;
}

.sources-target__desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.sources-target__status {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.sources-target__status strong {
  color: var(--text-secondary);
  font-weight: 600;
}

/* ============================================================
   BUSINESS OUTCOMES — short icon/text value grid
   ============================================================ */
.outcomes-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 36px 28px;
}

.outcomes-grid li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--badge-orange);
}

.outcomes-grid h3 {
  color: var(--text);
}

.outcomes-grid p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ============================================================
   FEATURE CHAPTER ("The Product" — product experience)
   Large editorial rows, alternating text/visual — no card grids.
   ============================================================ */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 100px 0;
}

.feature-row:not(:first-child) {
  border-top: 1px solid var(--border);
}

.feature-row--reverse .feature-text {
  order: 2;
}

.feature-row--reverse .feature-visual {
  order: 1;
}

.feature-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 18px;
}

.feature-text p {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text-secondary);
  max-width: 460px;
}

.feature-visual {
  min-width: 0;
}

/* Feature mockups reuse .proof-panel for visual consistency with the hero */
.mock-caption {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Slack mockup */
.mock-slack__channel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.mock-slack__logo {
  flex-shrink: 0;
}

.mock-slack__msg {
  margin-bottom: 18px;
}

.mock-slack__msg:last-child {
  margin-bottom: 0;
}

.mock-slack__author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
}

.mock-slack__app-tag {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

.mock-slack__msg p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.mock-slack__msg--user p {
  color: var(--text);
  font-weight: 500;
}

.mock-slack__msg--bot {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.mock-slack__msg--bot .proof-cite {
  display: block;
  margin-top: 10px;
}

/* Collections mockup */
.mock-collections__list {
  list-style: none;
  border-top: 1px solid var(--border);
}

.mock-collections__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.mock-collections__name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}

.mock-collections__count {
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Knowledge gap mockup — mirrors the live portal's .kb-gap-card component */
.mock-gap__card {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, 0.25);
  background: rgba(245, 158, 11, 0.06);
}

.mock-gap__card .kb-gap-card__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--warn);
  margin-bottom: 5px;
}

.mock-gap__card .kb-gap-card__text {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 10px;
}

.mock-gap__card .kb-gap-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mock-gap__card .kb-gap-card__btn {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 500;
  border: 1px solid transparent;
  background: transparent;
}

.mock-gap__card .kb-gap-card__btn--save {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.25);
  color: var(--warn);
}

.mock-gap__card .kb-gap-card__btn--dismiss {
  color: var(--text-muted);
}

/* ============================================================
   WORKFLOW ("How Relativity Works") — connected step row
   ============================================================ */
.workflow-steps {
  display: flex;
  list-style: none;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.workflow-step {
  flex: 1;
  padding: 28px 28px 0;
}

.workflow-step:not(:last-child) {
  border-right: 1px solid var(--border);
}

.workflow-step__num {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--badge-orange);
  margin-bottom: 14px;
}

.workflow-step h3 {
  margin-bottom: 8px;
}

.workflow-step p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-secondary);
  padding-bottom: 28px;
}

/* === Contact === */
.contact {
  padding: 150px 0;
  border-top: 1px solid var(--border);
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}

.contact-text h2 {
  margin-bottom: 16px;
}

.contact-text > p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 340px;
}

.contact-details {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.contact-detail svg {
  flex: 0 0 auto;
  color: var(--text-muted);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.field-optional {
  font-weight: 400;
  color: var(--text-muted);
}

.contact-form input,
.contact-form textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  transition: border-color var(--transition), outline-color var(--transition);
  width: 100%;
  resize: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--border-hover);
  outline: 2px solid var(--badge-orange);
  outline-offset: 2px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-muted);
}

.contact-form .btn-primary {
  align-self: flex-start;
  cursor: pointer;
}

.form-status {
  font-size: 0.825rem;
  color: var(--text-muted);
  min-height: 20px;
}

.form-status.success {
  color: var(--text-secondary);
}

.form-status.error {
  color: var(--error);
}

/* === Footer === */
footer {
  padding: 64px 0 40px;
  border-top: 1px solid var(--border);
}

.footer-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer-logo .logo-img {
  height: 32px;
}

.footer-sub {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.footer-nav {
  display: flex;
  gap: 28px;
  margin-top: 4px;
}

.footer-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.8rem;
  transition: color var(--transition);
}

.footer-nav a:hover {
  color: var(--text-secondary);
}

.footer-copy {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-top: 12px;
}

/* === Responsive === */
@media (max-width: 960px) {
  .hero {
    padding: 140px 0 64px;
    min-height: 100svh;
    align-items: flex-start;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-proof {
    max-width: 100%;
  }

  .feature-row {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 72px 0;
  }

  .feature-row--reverse .feature-text,
  .feature-row--reverse .feature-visual {
    order: initial;
  }

  .feature-text p {
    max-width: 100%;
  }

  .workflow-steps {
    flex-direction: column;
    border-bottom: none;
  }

  .workflow-step {
    padding: 24px 0 0;
  }

  .workflow-step:not(:last-child) {
    border-right: none;
  }

  .workflow-step p {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
  }

  .workflow-step:last-child p {
    border-bottom: none;
  }

  .contact-inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}

@media (max-width: 700px) {
  .container {
    padding: 0 20px;
  }

  .nav-links {
    display: none;
  }

  nav#nav > .nav-inner > .btn-spin {
    display: none;
  }

  .nav-theme-toggle {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .mobile-nav {
    display: block;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease;
    background: var(--mobile-nav-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid transparent;
  }

  nav.menu-open .mobile-nav {
    max-height: 520px;
    border-top-color: var(--border);
  }

  .mobile-nav ul {
    list-style: none;
    padding: 8px 20px 4px;
  }

  .mobile-nav ul li {
    border-bottom: 1px solid var(--border);
  }

  .mobile-nav ul li:last-child {
    border-bottom: none;
  }

  .mobile-nav ul li a {
    display: block;
    padding: 14px 0;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--transition);
  }

  .mobile-nav ul li a:hover {
    color: var(--text);
  }

  .mobile-nav-cta {
    display: inline-block;
    margin: 10px 20px 16px;
  }

  .mobile-theme-toggle {
    display: flex;
    margin: 0 20px 20px;
  }

  .nav-inner {
    padding: 0 20px;
  }

  .chapter,
  .philosophy,
  .contact {
    padding: 88px 0;
  }

  .chapter-header {
    margin-bottom: 36px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: flex-start;
  }

  .proof-panel {
    padding: 22px 20px 20px;
  }

  .sources-target {
    padding: 28px 20px;
  }
}