/* ============================================================
   VELD ANALYTICS — Design System
   Boutique analytics consultancy. Dark, premium, technical, calm.
   ============================================================ */

:root {
  /* Color: deep, near-black ground with a blue signal palette.
     Variable names below are historical (--gold/--sage from the original
     brand) but now hold blue values — kept as-is to avoid touching every
     usage site across this file. Role mapping, chosen for contrast:
       --gold        -> #82a7ff (blue-bright) — readable text/interactive accent (8.4:1 on bg)
       --gold-bright -> #dff7ff (ice)         — brightest hover/emphasis (17.7:1 on bg)
       --sage        -> #2457ff (blueberry)   — rich decorative fills/shapes only;
                         NOT used for text, it only clears 3.65:1 on this dark bg. */
  --bg: #0a0b09;
  --bg-soft: #0e100d;
  --surface: #131510;
  --surface-elevated: #181b15;
  --border: rgba(243, 241, 233, 0.09);
  --border-strong: rgba(243, 241, 233, 0.16);

  --text: #f3f1e9;
  --text-muted: #a7a59a;
  --text-faint: #857f72; /* WCAG AA: 4.96:1 against --bg */

  --gold: #82a7ff;
  --gold-soft: rgba(130, 167, 255, 0.14);
  --gold-bright: #dff7ff;
  --sage: #2457ff;
  --sage-soft: rgba(36, 87, 255, 0.14);

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --container: 1180px;
  --container-narrow: 760px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

/* ---------- Accessibility: visible keyboard focus ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 1000;
  background: var(--gold);
  color: #14130c;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  transition: top 0.25s var(--ease);
}
.skip-link:focus {
  top: 16px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 5.5vw, 4.6rem); font-weight: 450; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 500; }
h4 { font-size: 1.1rem; font-weight: 600; font-family: var(--font-body); }

p { color: var(--text-muted); }

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 56ch;
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

/* Hero-only override: the homepage eyebrow ("Clarity across the data
   landscape.") uses the brightest ice blue instead of the standard
   eyebrow blue-bright, scoped so it doesn't touch eyebrows elsewhere. */
.eyebrow-ice {
  color: var(--gold-bright);
}
.eyebrow-ice::before {
  background: var(--gold-bright);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.35s var(--ease);
  white-space: nowrap;
}

.btn-primary {
  background: var(--gold);
  color: #14130c;
}
.btn-primary:hover {
  background: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -8px rgba(223, 247, 255, 0.45);
}
.btn-primary:active { transform: translateY(0); box-shadow: none; }

.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  transform: translateY(-2px);
}
.btn-ghost:active { transform: translateY(0); }

.btn-arrow { transition: transform 0.35s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---------- Navigation (original) ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 40px 0;
  background: rgba(10, 11, 9, 0);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.4s var(--ease);
}

.nav.scrolled {
  background: rgba(10, 11, 9, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
}

.nav .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

/* Simple single-line text wordmark (no icon) — mirrors the plain-text
   nav logo used on bradleenicholls.com, which sidesteps the mobile
   icon-sizing issues a small SVG mark kept running into. */
.nav-logo { display: flex; align-items: center; justify-self: start; }
.nav-logo-text {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.nav-logo-text span {
  color: var(--gold);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 50px;
}

.nav-links a {
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--text-muted);
  position: relative;
  padding: 4px 0;
  transition: color 0.3s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 1.5px;
  background: var(--gold-bright);
  transition: right 0.3s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { right: 0; }
.nav-links a.active {
  color: var(--gold-bright);
  font-weight: 600;
}
.nav-links a.active::after { right: 0; }

.nav-cta { display: flex; align-items: center; gap: 36px; justify-self: center; }

@media (max-width: 900px) {
  .nav-cta { justify-self: end; }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  min-width: 48px;
  min-height: 48px;
  padding: 13px;
}
.nav-toggle span { width: 22px; height: 1.5px; background: var(--text); transition: all 0.3s var(--ease); }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
  padding: 40px;
  transform: translateY(-100%);
  transition: transform 0.45s var(--ease);
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a { font-family: var(--font-display); font-size: 2rem; color: var(--text); }

/* ---------- Section rhythm ---------- */
section { position: relative; z-index: 1; padding: 140px 0; }
section.tight { padding: 90px 0; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}

hr.rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  min-height: 100svh; /* avoids mobile address-bar resize jank */
  display: flex;
  align-items: center;
  padding-top: 140px;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}

.hero-contour {
  position: absolute;
  bottom: -10%;
  left: 0;
  width: 100%;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

.hero-content { position: relative; z-index: 2; max-width: 880px; }

.hero h1 { margin-bottom: 28px; }
.hero h1 em {
  font-style: italic;
  color: var(--gold-bright);
}

.hero-actions { display: flex; gap: 18px; margin-top: 44px; flex-wrap: wrap; }

.hero-meta {
  display: flex;
  gap: 48px;
  margin-top: 100px;
  flex-wrap: wrap;
}
.hero-meta div { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); letter-spacing: 0.04em; }
.hero-meta strong { display: block; color: var(--text); font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin-bottom: 4px; }

/* ---------- Cards ---------- */
.grid {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--surface);
  padding: 44px 38px;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
  position: relative;
}
.card:hover {
  background: var(--surface-elevated);
  box-shadow: inset 0 0 0 1px rgba(130, 167, 255, 0.28), inset 0 1px 0 0 rgba(223, 247, 255, 0.12);
  transform: translateY(-3px);
  z-index: 2;
}

.card-index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  /* Organizational label, not itself clickable — muted sage by default.
     Turning gold specifically on hover ties the color change to the
     moment the card actually becomes interactive. */
  color: var(--sage);
  letter-spacing: 0.1em;
  margin-bottom: 24px;
  display: block;
  transition: color 0.4s var(--ease);
}
.card:hover .card-index { color: var(--gold-bright); }

.card h3 { margin-bottom: 14px; }
.card p { font-size: 0.95rem; }

/* CTA banner box used at the bottom of most pages ("Want to see this
   built on your own data?" etc.) — was inline-styled with a flat 72px
   padding, which reads as a huge dead-space band on narrow screens once
   the heading and button wrap onto separate lines. Scaled down below. */
.cta-banner {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 72px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  background: var(--surface);
}

.card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 5px 12px;
}

/* ---------- Stat strip ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat {
  padding: 36px 30px;
  border-right: 1px solid var(--border);
}
.stat:last-child { border-right: none; }
.stat .num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--gold-bright);
  display: block;
  margin-bottom: 6px;
}
.stat .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- Process / path steps ---------- */
.path-steps {
  position: relative;
  border-left: 1px solid var(--border-strong);
  margin-left: 12px;
}

.path-step {
  position: relative;
  padding: 0 0 64px 48px;
}
.path-step:last-child { padding-bottom: 0; }

.path-step::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--gold);
}

.path-step .step-num {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  display: block;
}

/* ---------- Quote / pull ---------- */
.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 450;
  line-height: 1.45;
  color: var(--text);
  max-width: 820px;
  text-wrap: balance;
}
.pull-quote span { color: var(--gold-bright); font-style: italic; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--border);
  padding: 80px 0 36px;
  position: relative;
  z-index: 1;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
  margin-bottom: 70px;
}

.footer-cols { display: flex; gap: 80px; flex-wrap: wrap; }
.footer-col h4 { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); font-family: var(--font-mono); font-weight: 500; margin-bottom: 18px; }
.footer-col a, .footer-col p { display: block; color: var(--text-muted); font-size: 0.92rem; margin-bottom: 12px; transition: color 0.3s var(--ease); }
.footer-col a:hover { color: var(--gold-bright); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom p { font-size: 0.78rem; color: var(--text-faint); }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  position: relative;
  z-index: 1;
  padding: 180px 0 90px;
  border-bottom: 1px solid var(--border);
}
.page-hero h1 { max-width: 760px; }
.page-hero-compact { padding-bottom: 70px; border-bottom: none; }
#demo { padding-top: 40px; }

/* ---------- Form ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form-field { display: flex; flex-direction: column; gap: 10px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.form-field input, .form-field select, .form-field textarea {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.3s var(--ease);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.form-field textarea { resize: vertical; min-height: 130px; }

/* ---------- Credibility strip ---------- */
.cred-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cred-item {
  padding: 28px 22px;
  border-right: 1px solid var(--border);
}
.cred-item:last-child { border-right: none; }
.cred-item h4 {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-weight: 500;
  margin-bottom: 10px;
}
.cred-item p { font-size: 0.84rem; line-height: 1.5; }

/* ---------- Output / bullet lists ---------- */
.output-list { margin: 22px 0 0; display: flex; flex-direction: column; gap: 10px; }
.output-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.output-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 1.5px;
  background: var(--gold);
}

.service-meta {
  font-size: 0.85rem;
  color: var(--text-faint);
  font-style: italic;
  margin-top: 10px;
}

.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gold-bright);
  transition: gap 0.35s var(--ease);
}
.card-cta:hover { gap: 12px; }

.price-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gold-bright);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  width: 100%;
}
.price-tag span {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 3px;
}

/* Pricing cards vary in description length (e.g. the "Live" retainer note),
   so pin price-tags to the bottom of each card rather than letting them
   float at different heights across the row. */
.pricing-grid .card {
  display: flex;
  flex-direction: column;
}
.pricing-grid .price-tag {
  margin-top: auto;
}

.card-cta .btn-arrow { transition: transform 0.35s var(--ease); }
.card-cta:hover .btn-arrow { transform: translateX(3px); }

/* ---------- Case study cards ---------- */
.case-card { padding: 40px 34px; }
.case-field { margin-top: 18px; }
.case-field:first-of-type { margin-top: 28px; }
.case-field h5 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.case-field p { font-size: 0.88rem; line-height: 1.55; }

/* ---------- Technical capability columns ---------- */
.tech-card p.tech-list {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-top: 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat { border-bottom: 1px solid var(--border); }
  .form-grid { grid-template-columns: 1fr; }
  section { padding: 90px 0; }
  /* section.tight (90px) sitting directly above footer (80px top) stacks
     into 170px of dead vertical space — barely visible on a wide desktop
     screen, but a huge chunk of a phone viewport. Shrink both. */
  section.tight { padding: 56px 0; }
  footer { padding: 56px 0 32px; }
  .hero, .hero-3d { padding-top: 120px; }
  .page-hero { padding: 140px 0 70px; }
  .footer-top { gap: 40px; }
  .footer-cols { gap: 40px; }

  .cred-strip { grid-template-columns: repeat(3, 1fr); }
  .cred-item { border-bottom: 1px solid var(--border); }

  /* Tame the 3D depth effect on smaller screens: a large perspective/translateZ
     combination feels a lot more dramatic on a narrow viewport than on desktop. */
  .scene { perspective: 2400px; }

  /* Larger tap targets for text links on touch screens (44px+ per WCAG). */
  .card-cta { padding: 10px 0; margin-top: 20px; }
  .footer-col a { padding: 6px 0; }

  .cta-banner { padding: 40px 32px; }
  .cta-banner .btn { width: 100%; justify-content: center; }

  .card { padding: 34px 26px; }
  .case-card { padding: 32px 24px; }

  /* iOS Safari auto-zooms into any focused input whose computed font-size
     is below 16px — the form's 0.95rem (~15px) triggers that on every tap.
     Bump to 16px on touch-sized viewports only, so desktop keeps its
     original scale. */
  .form-field input, .form-field select, .form-field textarea {
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .container, .container-narrow { padding: 0 22px; }
  .hero-meta { gap: 28px; }
  .stat-strip { grid-template-columns: 1fr; }
  .cred-strip { grid-template-columns: repeat(2, 1fr); }
  .cta-banner { padding: 32px 24px; }
  .card { padding: 30px 22px; }
  .case-card { padding: 28px 20px; }
}

/* ============================================================
   3D SCROLL SYSTEM
   Layered CSS 3D depth, parallax, and scroll-driven motion.
   Everything here is additive to the base design system above.
   ============================================================ */

body { perspective: none; }

/* ---------- Perspective scene + depth layers ---------- */
.scene {
  position: relative;
  perspective: 1600px;
  perspective-origin: 50% 30%;
  overflow: hidden;
}

.scene-layers {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.scene-layer {
  position: absolute;
  inset: -15% -10%;
  width: 120%;
  transform-style: preserve-3d;
  will-change: transform;
}
.scene-layer svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- Hero 3D terrain ---------- */
.hero-3d {
  min-height: 100vh;
  min-height: 100svh; /* avoids mobile address-bar resize jank */
  display: flex;
  align-items: center;
  padding-top: 140px;
  padding-bottom: 80px;
}

.hero-3d .hero-content { position: relative; z-index: 5; max-width: 880px; }

/* Keep any scene's foreground content above its absolutely-positioned depth layers */
.scene > .container { position: relative; z-index: 5; }

/* ---------- Page-hero background: static starfield (SVG) ----------
   Simplest version yet, after contour lines, a data network, a WebGL
   aurora, and a circuit motif: a plain, frozen scattering of stars in
   the same ice tone as the homepage's Galaxy background, so the interior
   pages feel like part of the same family without any WebGL, JS, or
   animation at all — completely static. */
.star-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- 3D tilt-in reveal (for cards) ---------- */
.tilt-in {
  opacity: 0;
  transform: perspective(1200px) rotateX(22deg) translateY(56px) scale(0.95);
  transform-origin: 50% 100%;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.tilt-in.visible {
  opacity: 1;
  transform: perspective(1200px) rotateX(0deg) translateY(0) scale(1);
}

/* Slight stagger helper reused from .reveal-stagger pattern */
.tilt-stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------- Sticky pinned visual (scrollytelling) ---------- */
.pin-visual {
  position: sticky;
  top: 150px;
  align-self: start;
  height: fit-content;
}

/* ---------- Route progress rail (fixed, right edge) ---------- */
.route-rail {
  position: fixed;
  top: 0;
  right: 28px;
  height: 100vh;
  width: 40px;
  z-index: 90;
  pointer-events: none;
  display: flex;
  align-items: center;
}
.route-rail svg { width: 100%; height: 70vh; }
.route-rail .route-track {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.5;
}
.route-rail .route-fill {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 2;
  stroke-linecap: round;
}
.route-rail .route-dot {
  fill: var(--gold-bright);
  filter: drop-shadow(0 0 6px rgba(223,247,255,0.7));
}

@media (max-width: 1100px) {
  .route-rail { display: none; }
}

/* ---------- Card depth on hover (subtle 3D tilt) ---------- */
.tilt-card {
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
  transform-style: preserve-3d;
}

/* ============================================================
   AMBIENT PAGE BACKGROUND
   A fixed, full-viewport backdrop visible behind every page and
   section: a faint topographic grid (echoing the contour-line
   brand motif) plus a soft warm glow near the top. Lightweight,
   static, CSS-only — gives the site consistent ambient depth
   without a WebGL cost on every page.
   ============================================================ */

.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Decorative-only glow: led with sage rather than gold, so gold reads
     unambiguously as "interactive" everywhere it appears in the UI. */
  background: radial-gradient(ellipse 65% 42% at 50% 0%,
    rgba(36, 87, 255, 0.07) 0%,
    rgba(130, 167, 255, 0.025) 45%,
    rgba(10, 11, 9, 0) 75%);
}

.ambient-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(243, 241, 233, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 241, 233, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 0%, transparent 80%);
}

/* ---------- Reduced motion: neutralize all 3D/parallax motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .scene-layers, .scene-layer, .hero-3d .scene-layers {
    transform: none !important;
  }
  .tilt-in {
    transition: opacity 0.3s ease !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .route-rail .route-fill { transition: none !important; }
}

@media (max-width: 700px) {
  .ambient-bg::after { opacity: 0.3; }
}

/* ---------- WebGL hero canvas container (homepage only) ----------
   The interior pages moved to a static SVG (.star-bg above) — this
   one remains for the homepage's Galaxy starfield. */
.topo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}
.topo-bg canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ---------- Interactive demo dashboard (Approach page) ----------
   A working, hoverable sample of the kind of reporting we build —
   not a screenshot. Reuses the site's existing tokens (surface,
   border, mono labels, gold/gold-bright accents) so it reads as part
   of the product rather than a bolted-on widget. Vanilla JS, no
   charting library — the data/rendering logic lives in
   js/demo-dashboard.js. */
.demo-dashboard {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface) 45%);
  overflow: hidden;
  box-shadow:
    0 60px 140px -50px rgba(0, 0, 0, 0.8),
    0 0 160px -60px rgba(36, 87, 255, 0.4),
    inset 0 1px 0 0 rgba(223, 247, 255, 0.06);
}
.demo-dashboard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-bright) 50%, var(--gold) 80%, transparent);
  opacity: 0.75;
  z-index: 3;
}

.demo-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 30px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.demo-toolbar-left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.demo-toolbar-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.demo-toolbar-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 16px 4px rgba(223, 247, 255, 0.55);
  animation: demo-live-pulse 2.2s ease-in-out infinite;
}
@keyframes demo-live-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

.demo-range-toggle,
.demo-type-toggle {
  display: flex;
  gap: 2px;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 4px;
  /* The type toggle now carries 4 buttons (GA4/PPC/SEO/Social) — on a
     narrow phone that no longer fits. Scroll horizontally within the pill
     rather than wrapping buttons onto a second row, which would break the
     rounded-pill shape. Harmless on desktop since nothing overflows there. */
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.demo-range-toggle::-webkit-scrollbar,
.demo-type-toggle::-webkit-scrollbar { display: none; }
.demo-range-toggle button,
.demo-type-toggle button {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  padding: 7px 16px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
  flex-shrink: 0;
}
.demo-range-toggle button:hover,
.demo-type-toggle button:hover { color: var(--text-muted); }
.demo-range-toggle button.active,
.demo-type-toggle button.active {
  background: var(--gold-soft);
  color: var(--gold-bright);
  box-shadow: 0 0 0 1px rgba(130, 167, 255, 0.3), 0 4px 18px -4px rgba(130, 167, 255, 0.5);
}

.demo-platform-row {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 16px 30px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  flex-wrap: wrap;
}
.demo-platform-row.visible { display: flex; }
.demo-platform-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.demo-platform-toggle {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 4px;
}
.demo-platform-toggle button {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.demo-platform-toggle button:hover { color: var(--text-muted); }
.demo-platform-toggle button.active {
  background: var(--gold-soft);
  color: var(--gold-bright);
  box-shadow: 0 0 0 1px rgba(130, 167, 255, 0.3), 0 4px 18px -4px rgba(130, 167, 255, 0.5);
}

.demo-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
}
.demo-stats-6 { grid-template-columns: repeat(3, 1fr); }
.demo-stats-6 .demo-stat { border-right: 1px solid var(--border); }
.demo-stats-6 .demo-stat:nth-child(3n) { border-right: none; }
.demo-stats-6 .demo-stat:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
.demo-stat {
  position: relative;
  padding: 26px 30px;
  border-right: 1px solid var(--border);
  transition: background 0.35s var(--ease);
}
.demo-stat:last-child { border-right: none; }
.demo-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.demo-stat:hover { background: rgba(130, 167, 255, 0.035); }
.demo-stat:hover::before { opacity: 0.8; }
.demo-stat .label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: block;
  margin-bottom: 10px;
}
.demo-stat .num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--text);
  display: block;
  transition: opacity 0.25s var(--ease), text-shadow 0.35s var(--ease);
}
.demo-stat:hover .num { text-shadow: 0 0 22px rgba(130, 167, 255, 0.45); }
.demo-stat .delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  margin-top: 8px;
  transition: opacity 0.25s var(--ease);
}
.demo-stat .delta.up { color: var(--gold-bright); }
.demo-stat .delta.down { color: var(--text-faint); }

.demo-dashboard-lg .demo-stat { padding: 30px 30px; }
.demo-dashboard-lg .demo-stat .num { font-size: 2rem; }

.demo-chart-wrap {
  position: relative;
  padding: 30px 30px 6px;
  border-bottom: 1px solid var(--border);
}
.demo-chart-wrap-lg { padding: 34px 30px 10px; }
.demo-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.demo-chart-head .demo-chart-label { margin-bottom: 0; }
.demo-chart-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
  transition: opacity 0.2s var(--ease);
}
.demo-metric-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  /* Same overflow risk as the type toggle above — up to 4 buttons,
     including longer labels like "Avg. position" on the SEO tab. */
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.demo-metric-toggle::-webkit-scrollbar { display: none; }
.demo-metric-toggle button {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--text-faint);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
  flex-shrink: 0;
  white-space: nowrap;
}
.demo-metric-toggle button:hover { color: var(--text-muted); }
.demo-metric-toggle button.active {
  background: var(--gold-soft);
  color: var(--gold-bright);
  box-shadow: 0 0 0 1px rgba(130, 167, 255, 0.3), 0 4px 18px -4px rgba(130, 167, 255, 0.5);
}
.demo-breakdown-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 22px 30px 4px;
  transition: opacity 0.2s var(--ease);
}
.demo-chart-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.demo-chart-grid line { stroke: var(--border); stroke-width: 1; }
.demo-chart-area { opacity: 0.6; transition: d 0.5s var(--ease); }
.demo-chart-line {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: d 0.5s var(--ease);
  filter: drop-shadow(0 0 8px rgba(130, 167, 255, 0.55));
}
.demo-chart-dot { fill: var(--bg); stroke: var(--gold); stroke-width: 2; }
.demo-hover-line { stroke: var(--border-strong); stroke-width: 1; opacity: 0; transition: opacity 0.15s var(--ease); }
.demo-hover-dot {
  fill: var(--gold-bright);
  opacity: 0;
  transition: opacity 0.15s var(--ease);
  filter: drop-shadow(0 0 10px rgba(223, 247, 255, 0.8));
}
.demo-chart-overlay { fill: transparent; cursor: crosshair; }

.demo-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--surface-elevated);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-top: 1px solid rgba(130, 167, 255, 0.4);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
  white-space: nowrap;
  transform: translate(-50%, -120%);
  opacity: 0;
  transition: opacity 0.15s var(--ease);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 24px -8px rgba(130, 167, 255, 0.4);
  z-index: 5;
}
.demo-tooltip.visible { opacity: 1; }
.demo-tooltip .val { color: var(--gold-bright); font-weight: 500; }

.demo-channels { display: flex; flex-wrap: wrap; }
.demo-channel {
  flex: 1 1 0;
  min-width: 150px;
  padding: 22px 30px;
  border-right: 1px solid var(--border);
}
.demo-channel:last-child { border-right: none; }
.demo-channel-top {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.demo-channel-top .pct { color: var(--text); transition: opacity 0.25s var(--ease); }
.demo-channel-bar { height: 4px; border-radius: 2px; background: var(--bg-soft); overflow: hidden; }
.demo-channel-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sage), var(--gold) 60%, var(--gold-bright));
  border-radius: 2px;
  transition: width 0.6s var(--ease);
  box-shadow: 0 0 10px rgba(130, 167, 255, 0.5);
}

.demo-extra-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  border-top: 1px solid var(--border);
}
.demo-extra-col { padding-bottom: 8px; }
.demo-pie-col { border-right: 1px solid var(--border); }

.demo-pie-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 6px 30px 26px;
  flex-wrap: wrap;
}
.demo-pie-wrap svg { width: 150px; height: 150px; flex: 0 0 auto; filter: drop-shadow(0 0 18px rgba(36, 87, 255, 0.35)); }
.demo-pie-wrap svg circle { transition: stroke-dasharray 0.5s var(--ease), stroke-dashoffset 0.5s var(--ease); }
.demo-pie-legend {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-muted);
}
.demo-pie-legend .row { display: flex; align-items: center; gap: 9px; }
.demo-pie-legend .swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.demo-pie-legend .pct { color: var(--text); margin-left: auto; padding-left: 14px; }

.demo-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.demo-table thead th {
  text-align: left;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 400;
  padding: 6px 30px 10px;
}
.demo-table thead th:last-child { text-align: right; padding-right: 30px; }
.demo-table tbody tr { transition: background 0.25s var(--ease); }
.demo-table tbody tr:hover { background: rgba(130, 167, 255, 0.045); }
.demo-table tbody td {
  padding: 9px 30px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}
.demo-table tbody tr:first-child td { border-top: none; }
.demo-table tbody td:first-child { color: var(--text); }
.demo-table tbody td:last-child { text-align: right; padding-right: 30px; color: var(--gold-bright); }

.demo-stackbar-wrap { padding: 6px 30px 28px; border-top: 1px solid var(--border); }
.demo-stackbar-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.demo-stackbar-wrap rect { transition: height 0.5s var(--ease), y 0.5s var(--ease), opacity 0.25s var(--ease); }
.demo-stackbar-wrap rect:hover { opacity: 0.8; }
#demo-stackbar-labels text {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text);
}
.demo-stackbar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.demo-stackbar-legend .row { display: flex; align-items: center; gap: 7px; }
.demo-stackbar-legend .swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }

@media (max-width: 760px) {
  .demo-stats { grid-template-columns: repeat(2, 1fr); }
  .demo-stat:nth-child(2) { border-right: none; }
  .demo-stat:nth-child(1), .demo-stat:nth-child(2) { border-bottom: 1px solid var(--border); }
  .demo-stats-6 { grid-template-columns: repeat(2, 1fr); }
  .demo-stats-6 .demo-stat { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .demo-stats-6 .demo-stat:nth-child(2n) { border-right: none; }
  .demo-stats-6 .demo-stat:nth-child(5), .demo-stats-6 .demo-stat:nth-child(6) { border-bottom: none; }
  .demo-channel { min-width: 50%; }
  .demo-channel:nth-child(odd) { border-right: 1px solid var(--border); }
  .demo-channel:nth-child(1), .demo-channel:nth-child(2) { border-bottom: 1px solid var(--border); }
  .demo-extra-row { grid-template-columns: 1fr; }
  .demo-pie-col { border-right: none; border-bottom: 1px solid var(--border); }
  .demo-chart-head { flex-direction: column; align-items: flex-start; }

  /* Every sub-section of the dashboard uses a flat 30px side padding,
     tuned for the desktop-width card. On a phone that eats a big chunk of
     the already-narrow viewport, so tighten it uniformly. */
  .demo-toolbar { padding: 18px 18px; }
  .demo-platform-row { padding: 14px 18px; }
  .demo-stat, .demo-dashboard-lg .demo-stat { padding: 20px 18px; }
  .demo-chart-wrap, .demo-chart-wrap-lg { padding: 22px 18px 6px; }
  .demo-breakdown-label { padding: 18px 18px 4px; }
  .demo-channel { padding: 18px 18px; }
  .demo-pie-wrap { padding: 6px 18px 22px; }
  .demo-table thead th { padding: 6px 18px 10px; }
  .demo-table thead th:last-child { padding-right: 18px; }
  .demo-table tbody td { padding: 9px 18px; }
  .demo-table tbody td:last-child { padding-right: 18px; }
  .demo-stackbar-wrap { padding: 6px 18px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-toolbar-label::before { animation: none !important; opacity: 1; }
  .demo-chart-line, .demo-chart-area, .demo-channel-fill, .demo-stat .num, .demo-stat .delta,
  .demo-pie-wrap svg circle, .demo-stackbar-wrap rect {
    transition: none !important;
  }
}