/* ==========================================================================
   MarketAds — corporate site styles
   Tokens mirror docs/brand-guidelines.md. Change values there first.
   ========================================================================== */

:root {
  /* Brand */
  --navy-950: #061224;
  --navy-900: #0B1F3A;
  --navy-800: #12294A;
  --navy-700: #1B3A63;
  --blue-600: #1F6FEB;
  --blue-700: #1858C4;
  --blue-400: #5AA9FF;
  --teal-500: #14B8A6;

  /* Neutrals */
  --ink: #0B1424;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #EEF2F7;
  --slate-50: #F7F9FC;
  --white: #FFFFFF;

  /* Semantic */
  --color-bg: var(--white);
  --color-surface: var(--slate-50);
  --color-text: var(--ink);
  --color-text-muted: var(--slate-600);
  --color-border: var(--slate-200);
  --color-accent: var(--blue-600);
  --color-accent-hover: var(--blue-700);
  --color-on-dark: #E6EDF7;
  --color-on-dark-muted: #9FB0C8;
  --color-ring: var(--blue-600);

  /* Type */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --container: 1200px;
  --gutter: 24px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(11, 20, 36, .06);
  --shadow: 0 8px 24px -8px rgba(11, 20, 36, .12), 0 2px 6px rgba(11, 20, 36, .05);
  --shadow-lg: 0 30px 60px -20px rgba(6, 18, 36, .45);

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.015em; font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--blue-400); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--white); color: var(--ink); padding: 10px 16px; border-radius: var(--radius-sm);
  font-weight: 600; box-shadow: var(--shadow);
}
.skip-link:focus { top: 16px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent);
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.on-dark .eyebrow { color: var(--blue-400); }

.section { padding: 112px 0; }
.section--surface { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.section--dark { background: var(--navy-900); color: var(--color-on-dark); }

.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); margin-top: 16px; }
.section-head p { margin-top: 18px; font-size: 1.125rem; color: var(--color-text-muted); }
.on-dark .section-head p { color: var(--color-on-dark-muted); }
.section-head--split { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.section-head--split p { margin-top: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius-sm);
  font: 600 .9375rem/1 var(--font-sans); letter-spacing: .005em;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--color-accent); color: var(--white); }
.btn--primary:hover { background: var(--color-accent-hover); color: var(--white); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--slate-300); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.on-dark .btn--ghost { color: var(--white); border-color: rgba(255,255,255,.28); }
.on-dark .btn--ghost:hover { border-color: var(--white); color: var(--white); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .875rem; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9375rem; }
.link-arrow svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy-950);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background-color .25s var(--ease);
}
.site-header.is-scrolled { background: rgba(6, 18, 36, .92); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--white); font-weight: 600; font-size: 1.125rem; letter-spacing: -.01em; }
.brand:hover { color: var(--white); }
.brand img { width: 30px; height: 30px; }
.brand span b { font-weight: 600; color: var(--blue-400); }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  color: var(--color-on-dark); font-size: .9375rem; font-weight: 500; border-radius: var(--radius-sm);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav-links a:hover { color: var(--white); background: rgba(255,255,255,.06); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-actions .signin { color: var(--color-on-dark); font-size: .9375rem; font-weight: 500; padding: 10px 6px; }
.nav-actions .signin:hover { color: var(--white); }
.nav-toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-sm);
  color: var(--white); cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 500px at 85% 10%, rgba(31,111,235,.22), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(20,184,166,.10), transparent 60%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
  color: var(--color-on-dark);
  padding: 96px 0 0;
}
.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%);
}
.hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; padding-bottom: 96px; }
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); font-weight: 600; color: var(--white); margin-top: 22px; letter-spacing: -.025em; line-height: 1.06; }
.hero h1 em { font-style: normal; color: var(--blue-400); }
.hero-lede { margin-top: 24px; font-size: 1.1875rem; line-height: 1.6; color: var(--color-on-dark-muted); max-width: 560px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 40px; font-size: .875rem; color: var(--color-on-dark-muted); }
.hero-meta li { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta svg { width: 16px; height: 16px; color: var(--teal-500); flex: none; }

/* Hero console visual */
.console {
  position: relative;
  background: linear-gradient(180deg, rgba(18,41,74,.92), rgba(11,31,58,.96));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.console-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--font-mono); font-size: .75rem; color: var(--color-on-dark-muted);
}
.console-bar .dots { display: flex; gap: 6px; }
.console-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.status { display: inline-flex; align-items: center; gap: 8px; color: #7EE2D3; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 4px rgba(20,184,166,.18); }
.console-body { padding: 22px; display: grid; gap: 18px; }
.segment {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center;
  padding: 16px; border-radius: var(--radius); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
}
.segment-name { font-weight: 500; color: var(--white); font-size: .9375rem; }
.segment-id { font-family: var(--font-mono); font-size: .6875rem; color: var(--color-on-dark-muted); letter-spacing: .04em; }
.segment-size { font-family: var(--font-mono); font-size: .9375rem; color: var(--white); text-align: right; }
.segment-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 6px; }
.segment-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue-600), var(--blue-400)); transform-origin: left; }
.destinations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dest {
  padding: 12px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.08); background: rgba(6,18,36,.5);
  font-size: .8125rem; color: var(--color-on-dark);
}
.dest b { display: block; font-weight: 500; color: var(--white); margin-bottom: 4px; }
.dest small { font-family: var(--font-mono); font-size: .6875rem; color: #7EE2D3; }
.console-foot { display: flex; justify-content: space-between; padding: 14px 22px; border-top: 1px solid rgba(255,255,255,.08); font-family: var(--font-mono); font-size: .75rem; color: var(--color-on-dark-muted); }
.console-foot strong { color: var(--white); font-weight: 500; }

/* Partner band */
.partners { position: relative; border-top: 1px solid rgba(255,255,255,.08); background: rgba(6,18,36,.55); }
.partners-inner { display: flex; align-items: center; gap: 40px; padding: 28px var(--gutter); }
.partners p { flex: none; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-on-dark-muted); }
.partners ul { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 44px; }
.partners li { color: #C9D5E6; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; white-space: nowrap; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.stat { padding: 36px 32px; }
.stat + .stat { border-left: 1px solid var(--color-border); }
.stat-value { font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 600; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-value span { color: var(--color-accent); }
.stat-label { margin-top: 8px; color: var(--color-text-muted); font-size: .9375rem; line-height: 1.5; }

/* ---------- Cards / pillars ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card {
  position: relative; padding: 32px; background: var(--white);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.card:hover { border-color: var(--slate-300); box-shadow: var(--shadow); transform: translateY(-2px); }
.card-icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius);
  background: #EAF2FF; color: var(--color-accent); margin-bottom: 22px;
}
.card-icon svg { width: 22px; height: 22px; }
.card h3 { font-size: 1.25rem; }
.card p { margin-top: 12px; color: var(--color-text-muted); }
.card ul { margin-top: 20px; display: grid; gap: 10px; font-size: .9375rem; color: var(--slate-700); }
.card li { display: flex; gap: 10px; align-items: flex-start; }
.card li svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--color-accent); }
.card .link-arrow { margin-top: 24px; }

.tag { display: inline-block; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; background: var(--slate-100); color: var(--slate-600); }

/* ---------- Taxonomy ---------- */
.taxonomy { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); margin-top: 56px; }
.taxon { padding: 24px; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--white); }
.taxon h4 { font-size: 1rem; }
.taxon p { margin-top: 6px; font-size: .875rem; color: var(--color-text-muted); }
.taxon .count { display: block; margin-top: 14px; font-family: var(--font-mono); font-size: .75rem; color: var(--color-accent); }

/* ---------- Process ---------- */
.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: step; position: relative; }
.process::before { content: ""; position: absolute; top: 22px; left: 22px; right: 22px; height: 1px; background: linear-gradient(90deg, rgba(90,169,255,.5), rgba(90,169,255,.1)); }
.step { position: relative; padding-right: 24px; }
.step-num {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--navy-800); border: 1px solid rgba(90,169,255,.45); color: var(--blue-400);
  font-family: var(--font-mono); font-size: .8125rem; font-weight: 500;
}
.step h3 { margin-top: 24px; font-size: 1.125rem; color: var(--white); }
.step p { margin-top: 10px; font-size: .9375rem; color: var(--color-on-dark-muted); }

/* ---------- Activation table ---------- */
.integrations { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; }
.integrations-copy .section-title { font-size: clamp(2rem, 3.4vw, 2.75rem); margin-top: 16px; }
.integrations-copy p { margin-top: 18px; color: var(--color-text-muted); font-size: 1.0625rem; }
.integrations-copy .checks { margin-top: 28px; display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--slate-700); }
.checks svg { width: 20px; height: 20px; flex: none; color: var(--teal-500); margin-top: 2px; }
.table-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
thead th { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--slate-500); background: var(--slate-50); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color .15s var(--ease); }
tbody tr:hover { background: #FAFCFF; }
td.platform { font-weight: 600; color: var(--ink); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: #0F766E; font-weight: 500; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-500); }
.table-note { padding: 14px 20px; font-size: .8125rem; color: var(--slate-500); background: var(--slate-50); border-top: 1px solid var(--color-border); }

/* ---------- Media buying ---------- */
.media { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.media-card { padding: 40px; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.media-card--feature { background: linear-gradient(160deg, rgba(31,111,235,.22), rgba(18,41,74,.6) 55%); border-color: rgba(90,169,255,.35); }
.media-card .tag { background: rgba(255,255,255,.08); color: var(--color-on-dark); }
.media-card h3 { margin-top: 20px; font-size: 1.625rem; color: var(--white); }
.media-card > p { margin-top: 14px; color: var(--color-on-dark-muted); font-size: 1.0625rem; }
.media-card ul { margin-top: 28px; display: grid; gap: 14px; }
.media-card li { display: flex; gap: 12px; color: var(--color-on-dark); }
.media-card li svg { width: 18px; height: 18px; flex: none; color: var(--blue-400); margin-top: 3px; }
.media-card .btn { margin-top: 32px; }
.powered {
  display: flex; align-items: center; gap: 14px; margin-top: 28px; padding: 14px 16px;
  border-radius: var(--radius); background: rgba(6,18,36,.5); border: 1px solid rgba(255,255,255,.08);
  font-size: .875rem; color: var(--color-on-dark-muted);
}
.powered svg { width: 20px; height: 20px; flex: none; color: var(--blue-400); }
.powered strong { color: var(--white); font-weight: 600; }

/* ---------- Comparison ---------- */
.compare { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); }
.compare table th, .compare table td { white-space: normal; vertical-align: top; }
.compare thead th { font-size: .75rem; }
.compare thead th.us { color: var(--color-accent); background: #EEF5FF; }
.compare td.us { background: #F7FAFF; font-weight: 500; color: var(--ink); }
.compare td:first-child { font-weight: 600; color: var(--ink); width: 26%; }
.compare td { color: var(--slate-600); }
.yes, .no { display: inline-flex; align-items: center; gap: 8px; }
.yes svg, .no svg { width: 16px; height: 16px; flex: none; }
.yes svg { color: var(--color-accent); }
.no svg { color: var(--slate-300); }

/* ---------- Trust ---------- */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.trust-item { padding-top: 24px; border-top: 2px solid var(--ink); }
.trust-item h3 { font-size: 1.0625rem; }
.trust-item p { margin-top: 10px; font-size: .9375rem; color: var(--color-text-muted); }

/* ---------- Industries ---------- */
.industries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.industry { background: var(--white); padding: 28px; transition: background-color .2s var(--ease); }
.industry:hover { background: var(--slate-50); }
.industry h3 { font-size: 1.0625rem; display: flex; align-items: center; gap: 10px; }
.industry h3 svg { width: 20px; height: 20px; color: var(--color-accent); }
.industry p { margin-top: 10px; font-size: .9375rem; color: var(--color-text-muted); }

/* ---------- CTA + form ---------- */
.cta {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 360px at 100% 0%, rgba(31,111,235,.28), transparent 60%),
    var(--navy-900);
  color: var(--color-on-dark);
}
.cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.cta h2 { font-size: clamp(2rem, 3.6vw, 2.875rem); color: var(--white); margin-top: 16px; }
.cta-copy > p { margin-top: 18px; color: var(--color-on-dark-muted); font-size: 1.125rem; }
.contact-points { margin-top: 36px; display: grid; gap: 18px; }
.contact-points li { display: flex; gap: 14px; }
.contact-points svg { width: 20px; height: 20px; color: var(--blue-400); flex: none; margin-top: 3px; }
.contact-points b { display: block; color: var(--white); font-weight: 600; }
.contact-points span { font-size: .9375rem; color: var(--color-on-dark-muted); }

.form { padding: 36px; background: var(--white); color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.form h3 { font-size: 1.25rem; }
.form > p { margin-top: 6px; font-size: .9375rem; color: var(--color-text-muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.field { display: grid; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .875rem; font-weight: 500; color: var(--slate-700); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: 10px 14px;
  font: 400 1rem/1.4 var(--font-sans); color: var(--ink);
  background: var(--white); border: 1px solid var(--slate-300); border-radius: var(--radius-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(31,111,235,.18); }
.field input[aria-invalid="true"] { border-color: #DC2626; }
.field .error { font-size: .8125rem; color: #B91C1C; min-height: 0; }
.form .btn { width: 100%; margin-top: 22px; }
.form-legal { margin-top: 14px; font-size: .75rem; color: var(--slate-500); line-height: 1.5; }
.form-success { display: none; margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm); background: #ECFDF5; color: #065F46; font-size: .9375rem; }
.form-success.is-visible { display: block; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: var(--color-on-dark-muted); padding: 72px 0 32px; font-size: .9375rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; }
.footer-brand p { margin-top: 16px; max-width: 300px; font-size: .9375rem; }
.footer-col h4 { font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 4px; }
.footer-col a { display: inline-block; padding: 6px 0; color: var(--color-on-dark-muted); }
.footer-col a:hover { color: var(--white); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); font-size: .8125rem; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-bottom a { color: var(--color-on-dark-muted); }
.footer-bottom a:hover { color: var(--white); }

/* ---------- Reveal motion ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero-inner, .integrations, .cta-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { max-width: 620px; }
  .process { grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
  .process::before { display: none; }
  .taxonomy { grid-template-columns: repeat(2, 1fr); }
  .trust { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  .nav-links, .nav-actions .signin { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-links.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 72px; left: 0; right: 0; padding: 12px var(--gutter) 20px;
    background: var(--navy-950); border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav-links.is-open a { min-height: 48px; padding: 0 4px; border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 0; }
  .grid-3, .media, .industries { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--color-border); }
  .section-head--split { grid-template-columns: 1fr; gap: 18px; }
  .partners-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .section { padding: 80px 0; }
  .hero { padding-top: 64px; }
  .hero-inner { padding-bottom: 64px; }
  .nav-actions .btn { display: none; }
  .process { grid-template-columns: 1fr; }
  .taxonomy, .trust { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--color-border); }
  .destinations { grid-template-columns: 1fr; }
  .form { padding: 24px; }
  .form-grid { grid-template-columns: 1fr; }
  .media-card { padding: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .partners ul { gap: 10px 28px; }
  .compare td:first-child { width: auto; }
}