/* ============================================================
   PARREIRA AI — Design System
   B2B AI Lead Generation · Precision Outreach. Predictable Pipeline.

   One stylesheet on purpose: the previous site split rules across two
   files and five selectors were defined in both, so which one won came
   down to <link> order. Everything lives here instead.
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
  /* ---- Brand ------------------------------------------------
     Sampled from the logo: navy wordmark, electric-blue "AI" and
     arrow, lighter blue circuit traces. */
  --navy-950: #04091a;
  --navy-900: #070f24;
  --navy-850: #0a1730;
  --navy-800: #0a1f44;   /* logo wordmark navy */
  --navy-700: #122c5c;

  --blue-700: #1550cc;
  --blue-600: #1e6eff;   /* logo "AI" / arrow */
  --blue-500: #2b9cff;   /* trace highlight */
  --blue-400: #5cb8ff;
  --blue-300: #8fd2ff;

  --slate-500: #5a6b8c;
  --slate-400: #8fa3c4;
  --slate-300: #b6c4dc;

  --paper: #f7f9fc;

  /* ---- Semantic --------------------------------------------- */
  --bg:            var(--navy-950);
  --bg-raised:     var(--navy-900);
  --bg-card:       #0a1330;
  --surface:       rgba(255, 255, 255, 0.035);
  --surface-hover: rgba(255, 255, 255, 0.06);

  --text:          #eaf1ff;
  --text-muted:    var(--slate-300);
  --text-dim:      var(--slate-400);

  --accent:        var(--blue-600);
  --accent-bright: var(--blue-500);

  --border:        rgba(140, 180, 255, 0.14);
  --border-strong: rgba(140, 180, 255, 0.28);

  --glow: 0 0 40px rgba(30, 110, 255, 0.35);

  /* ---- Spacing ----------------------------------------------
     The old scale stopped at 2rem, so every real layout gap was
     hardcoded inline. This one goes all the way up. */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 12rem;

  /* ---- Type scale (1.25 ratio, fluid) ---------------------- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   clamp(1.075rem, 0.4vw + 1rem, 1.25rem);
  --text-xl:   clamp(1.25rem, 0.7vw + 1.05rem, 1.6rem);
  --text-2xl:  clamp(1.6rem, 1.4vw + 1.2rem, 2.4rem);
  --text-3xl:  clamp(1.9rem, 2.2vw + 1.1rem, 3rem);
  --text-4xl:  clamp(2.2rem, 3.2vw + 0.9rem, 4rem);
  --text-5xl:  clamp(2.5rem, 4.2vw + 0.8rem, 4.9rem);

  /* ---- Measure ---------------------------------------------- */
  --measure: 68ch;
  --content-max: 1240px;

  /* ---- Radius / motion -------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-pill: 9999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.16s var(--ease-out);
  --t-base: 0.28s var(--ease-out);
  --t-slow: 0.6s  var(--ease-out);
}

/* ============================================================
   2. RESET
   ============================================================ */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font: inherit; background: none; border: none; color: inherit; }

/* Note: no blanket `outline: none`. The old stylesheet cleared outlines
   on every form control, which left keyboard users with no focus cue at
   all. Focus styling is handled explicitly in §9. */
input, select, textarea { font: inherit; color: inherit; }

::selection { background: rgba(30, 110, 255, 0.35); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--navy-950); }
::-webkit-scrollbar-thumb {
  background: var(--navy-700);
  border-radius: var(--radius-pill);
  border: 2px solid var(--navy-950);
}
::-webkit-scrollbar-thumb:hover { background: var(--blue-700); }
* { scrollbar-width: thin; scrollbar-color: var(--navy-700) var(--navy-950); }

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4 {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.display   { font-size: var(--text-5xl); font-weight: 800; letter-spacing: -0.045em; }
.headline  { font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.04em; }
.title     { font-size: var(--text-3xl); font-weight: 700; }
.subtitle  { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; }

.lede {
  font-size: var(--text-xl);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}

.body-text {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-500);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-500));
  flex: none;
}

.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--blue-500), transparent);
  flex: none;
}

.text-gradient {
  background: linear-gradient(105deg, var(--blue-400), var(--blue-600) 55%, var(--blue-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   4. LAYOUT
   ============================================================ */

.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section { padding-block: var(--space-10); position: relative; }
.section--tight { padding-block: var(--space-8); }
.section--raised { background: var(--bg-raised); }

.stack > * + * { margin-top: var(--space-5); }
.stack-lg > * + * { margin-top: var(--space-7); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }

.center { text-align: center; }
.center .lede, .center .body-text { margin-inline: auto; }
.center .eyebrow { justify-content: center; }

/* ============================================================
   5. BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.95em 1.9em;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform var(--t-fast), box-shadow var(--t-base),
              background var(--t-base), border-color var(--t-base);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
  color: #fff;
  box-shadow: 0 6px 24px rgba(30, 110, 255, 0.32);
}
.btn--primary:hover { box-shadow: 0 10px 34px rgba(30, 110, 255, 0.48); }

.btn--ghost {
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
}
.btn--ghost:hover { border-color: var(--blue-500); background: rgba(30, 110, 255, 0.1); }

.btn__arrow { transition: transform var(--t-base); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ============================================================
   6. NAV
   ============================================================ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  transition: background var(--t-base), backdrop-filter var(--t-base),
              border-color var(--t-base), padding var(--t-base);
  border-bottom: 1px solid transparent;
}

.nav--scrolled {
  background: rgba(4, 9, 26, 0.82);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--border);
  padding-block: var(--space-3);
}

.brand { display: flex; align-items: center; gap: var(--space-3); }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }

/* The lockup carries the full name on TWO lines rather than one.
   It was designed for "Parreira AI" (11 characters); the legal name is
   "Parreira Industry Solutions" (27), which set on a single line ran about
   three times the intended width and crowded the nav links at tablet sizes.
   Stacking uses the vertical space the lockup already had, so the widest
   line is now the small letterspaced one. */
.brand__name {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.brand__tag {
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-400);
  margin-top: 4px;
  white-space: nowrap;
}

.nav-links { display: flex; gap: var(--space-6); }

.nav-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-dim);
  position: relative;
  padding-block: var(--space-2);
  transition: color var(--t-base);
}
.nav-link:hover, .nav-link.is-active { color: var(--text); }

.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1.5px;
  background: var(--blue-500);
  transition: width var(--t-base);
}
.nav-link:hover::after, .nav-link.is-active::after { width: 100%; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
}
.nav-hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-fast);
}
.nav.is-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav-hamburger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   7. HERO — pinned circuit canvas
   ============================================================ */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--navy-950);
}

.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Scrim. The old site put white text straight onto a light product
   render and it was unreadable — the single worst thing on the page.
   Every hero beat here sits on a directional wash that darkens the
   text side while leaving the animation itself clean. */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(4, 9, 26, 0.94) 0%,
      rgba(4, 9, 26, 0.86) 26%,
      rgba(4, 9, 26, 0.45) 52%,
      rgba(4, 9, 26, 0.14) 74%,
      rgba(4, 9, 26, 0.36) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(4, 9, 26, 0.7), transparent 60%);
}

.hero__beats { position: absolute; inset: 0; z-index: 3; }

.hero-beat {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  /* Clears the fixed nav at the top and the scroll cue at the bottom, so
     a tall beat never collides with either. */
  padding: 6rem var(--space-6) 7rem;
  max-width: var(--content-max);
  margin-inline: auto;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.hero-beat > * { max-width: 54rem; }
.hero-beat .lede { max-width: 40rem; }
.hero-beat a { pointer-events: auto; }
.hero-beat__row { margin-top: var(--space-3); }

.hero-beat__row { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }

.hero__scroll-cue {
  position: absolute;
  left: 50%; bottom: var(--space-6);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: opacity var(--t-base);
}

.hero__scroll-cue span::after {
  content: '';
  display: block;
  width: 1px; height: 42px;
  margin: var(--space-3) auto 0;
  background: linear-gradient(var(--blue-500), transparent);
  animation: cueDrop 2s var(--ease-out) infinite;
}

@keyframes cueDrop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

/* Stat trio revealed in the final hero beat */
.hero-stats { display: flex; gap: var(--space-7); flex-wrap: wrap; }
.hero-stat__value {
  font-family: 'Sora', sans-serif;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--blue-400);
  line-height: 1;
}
.hero-stat__label {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: var(--space-2);
}

/* ============================================================
   8. SCROLLYTELLING — sticky graphic + flowing steps
   ============================================================ */

.scrolly {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.scrolly__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The padding keeps the sticky graphic engaged for the whole run of
   steps. Without it the grid ends while the last step is still centred,
   so the diagram unsticks and slides out of frame just as you reach the
   final stage. */
.scrolly__steps {
  display: flex;
  flex-direction: column;
  padding-block: 12vh 34vh;
}

.scrolly-step {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  opacity: 0.28;
  transition: opacity var(--t-slow), transform var(--t-slow);
  transform: translateY(12px);
}

.scrolly-step.is-active { opacity: 1; transform: translateY(0); }

.scrolly-step__num {
  font-family: 'Sora', sans-serif;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--blue-500);
}

.scrolly-step ul { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.scrolly-step li {
  display: flex;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-lg);
  line-height: 1.5;
}
.scrolly-step li::before {
  content: '';
  width: 6px; height: 6px;
  margin-top: 0.65em;
  border-radius: 50%;
  background: var(--blue-500);
  flex: none;
  box-shadow: 0 0 10px rgba(43, 156, 255, 0.7);
}

/* The sticky pipeline diagram */
.pipeline { width: min(100%, 480px); }

.pipeline__rail {
  stroke: var(--border-strong);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.5;
}

.pipeline__node {
  transition: opacity var(--t-slow), transform var(--t-slow);
  opacity: 0.22;
}
.pipeline__node.is-lit { opacity: 1; }

.pipeline__ring { transform-box: fill-box; transform-origin: center; }
.pipeline__node.is-lit .pipeline__ring { animation: ringPulse 2.4s var(--ease-out) infinite; }

@keyframes ringPulse {
  0%   { transform: scale(1);   opacity: 0.9; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

.pipeline__trace {
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  transition: stroke-dashoffset 0.8s var(--ease-out);
}
.pipeline__trace.is-drawn { stroke-dashoffset: 0; }

.pipeline__label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  fill: var(--text-muted);
}
.pipeline__node.is-lit .pipeline__label { fill: var(--text); }

/* ============================================================
   9. CARDS / METRICS
   ============================================================ */

.card {
  background: linear-gradient(160deg, var(--surface), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  position: relative;
  overflow: hidden;
}

.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.card__icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: rgba(30, 110, 255, 0.12);
  border: 1px solid rgba(30, 110, 255, 0.28);
  margin-bottom: var(--space-5);
}
.card__icon svg { width: 22px; height: 22px; stroke: var(--blue-500); }

.card h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.card p { color: var(--text-muted); font-size: var(--text-base); }

.metric { text-align: center; }
.metric__value {
  font-family: 'Sora', sans-serif;
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.metric__label {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: var(--space-3);
}

/* ============================================================
   10. CTA + FORM
   ============================================================ */

.cta-panel {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  padding: var(--space-9) var(--space-6);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(30, 110, 255, 0.22), transparent 62%),
    var(--bg-card);
}

.field { display: flex; flex-direction: column; gap: var(--space-2); text-align: left; }

.field label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.85em 1.05em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-base), background var(--t-base);
}

.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--border-strong); }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--blue-500);
  background: rgba(30, 110, 255, 0.06);
}
.field textarea { resize: vertical; min-height: 130px; }
.field ::placeholder { color: var(--slate-500); }

.form-note { font-size: var(--text-sm); color: var(--text-dim); }
.form-status { font-size: var(--text-sm); min-height: 1.4em; }
.form-status[data-state="ok"]  { color: var(--blue-400); }
.form-status[data-state="err"] { color: #ff8f8f; }

/* ============================================================
   11. FOOTER
   ============================================================ */

.footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-8) var(--space-6);
  background: var(--navy-950);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--space-7);
}

.footer__heading {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-4);
}

.footer__links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__link { color: var(--text-muted); font-size: var(--text-sm); transition: color var(--t-base); }
.footer__link:hover { color: var(--blue-400); }

.footer__bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--text-dim);
}

/* ============================================================
   12. UTILITIES
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-revealed { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.09s; }
.reveal[data-delay="2"] { transition-delay: 0.18s; }
.reveal[data-delay="3"] { transition-delay: 0.27s; }

.glow-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-600), transparent);
  opacity: 0.5;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--blue-600);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--t-base);
}
.skip-link:focus { top: var(--space-4); }

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

/* ============================================================
   13. FOCUS — keyboard only, never removable
   ============================================================ */

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

a:focus-visible, button:focus-visible, .btn:focus-visible {
  box-shadow: 0 0 0 5px rgba(43, 156, 255, 0.22);
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline-offset: 1px;
}

/* ============================================================
   13b. DASHBOARD PREVIEW

   Status colours are a RESERVED palette, separate from the brand blues,
   and each pill always carries a text label — state is never signalled by
   colour alone. All four were checked for contrast against the card
   surface (#0a1330) rather than eyeballed; each clears 3:1. The grey
   "Researching" pill reads grey on purpose: it is the inert state.
   ============================================================ */

.dash {
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--bg-card);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.dash__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--border);
}
.dash__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--slate-500); flex: none; }
.dash__url {
  margin-left: var(--space-3);
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.dash__body { padding: var(--space-6); }

.dash__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.stat__label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-dim); }
.stat__value {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.1;
  margin-top: var(--space-2);
  /* The value wears a TEXT token, not a series colour — identity here comes
     from the label beside it, which is the rule for figures generally. */
  color: var(--text);
}
.stat__value--accent { color: var(--blue-400); }
.stat__note { font-size: 0.75rem; color: var(--text-dim); margin-top: 2px; }

.dash__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.dash__panel {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.dash__panel-title {
  font-family: 'Sora', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 var(--space-4);
  color: var(--text);
}

.dash__table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.dash__table th {
  text-align: left;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  font-weight: 600;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.dash__table td { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.dash__table tr:last-child td { border-bottom: 0; }

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.pill--good { color: #34d399; }
.pill--info { color: #2b9cff; }
.pill--warn { color: #fbbf24; }
.pill--idle { color: #8fa3c4; }

.trace { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.trace__item { display: grid; grid-template-columns: 84px 1fr; gap: var(--space-3); align-items: start; }
.trace__step {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue-400);
  padding-top: 3px;
  font-weight: 600;
}
.trace__body { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }

.dash__caption {
  padding: var(--space-3) var(--space-6) var(--space-5);
  font-size: 0.75rem;
  color: var(--text-dim);
  text-align: center;
}

/* ============================================================
   14. RESPONSIVE
     The old site had exactly two breakpoints, both max-width, with
     nothing between 768px and 1920px — the range most desktops sit in.
   ============================================================ */

@media (max-width: 1180px) {
  :root { --space-10: 6rem; --space-11: 8rem; }
  .scrolly { gap: var(--space-6); }
}

@media (max-width: 960px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }

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

  /* Scrollytelling on narrow screens is a different edit, not a
     squeeze: the graphic sits above the text and stops being sticky
     for the full viewport height. */
  .scrolly { grid-template-columns: 1fr; gap: var(--space-4); }
  .scrolly__sticky {
    height: auto;
    position: sticky;
    top: 64px;
    padding: var(--space-5) 0;
    background: linear-gradient(var(--bg) 78%, transparent);
    z-index: 2;
  }
  .scrolly-step { min-height: 62vh; }
}

@media (max-width: 760px) {
  :root { --space-9: 4rem; --space-10: 5rem; }

  .dash__body { padding: var(--space-4); }
  .dash__stats { gap: var(--space-3); }
  .stat { padding: var(--space-3); }
  .stat__value { font-size: 1.5rem; }
  /* The trace stops being a two-column grid: at this width an 84px label
     column leaves the sentence too narrow to read. */
  .trace__item { grid-template-columns: 1fr; gap: 2px; }

  .nav { padding-inline: var(--space-4); }
  .nav-hamburger { display: flex; }
  .nav .btn--primary { display: none; }

  .nav-links {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    gap: var(--space-5);
    padding: 6rem var(--space-6) var(--space-7);
    background: rgba(4, 9, 26, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-100%);
    transition: transform var(--t-base);
    z-index: -1;
  }
  .nav.is-open .nav-links { transform: translateY(0); }
  .nav-link { font-size: var(--text-xl); }

  .wrap { padding-inline: var(--space-5); }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }

  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(4, 9, 26, 0.9) 0%,
        rgba(4, 9, 26, 0.62) 40%,
        rgba(4, 9, 26, 0.82) 100%);
  }
  .hero-beat { padding-inline: var(--space-5); justify-content: flex-end; padding-bottom: 22vh; }
  .hero-stats { gap: var(--space-5); }
}

@media (max-width: 480px) {
  .btn { padding: 0.85em 1.5em; }
  .hero-stats { flex-direction: column; gap: var(--space-4); }
}

/* ============================================================
   15. REDUCED MOTION
     JS counterparts live in site.js and circuit-hero.js: the hero
     renders a single resolved still, scroll pinning is skipped, and
     all step states are set immediately.
   ============================================================ */

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

  html { scroll-behavior: auto !important; }

  .reveal { opacity: 1 !important; transform: none !important; }
  .scrolly-step { opacity: 1 !important; transform: none !important; }
  .pipeline__node { opacity: 1 !important; }
  .pipeline__trace { stroke-dashoffset: 0 !important; }
  .hero__scroll-cue { display: none !important; }
  .hero__scroll-cue span::after { animation: none !important; }

  /* Without pinning the hero is a normal-height section, so only the
     resolved beat should occupy it. */
  .hero { height: auto; min-height: 100svh; }
  .hero-beat { position: relative; min-height: 100svh; }
}

/* ============================================================
   16. PRINT
   ============================================================ */

@media print {
  .nav, .hero__canvas, .hero__scroll-cue, .footer { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .cta-panel { border: 1px solid #ccc; }
}