/* Premium layer: aurora, glass, gold accents, motion. Loaded after style.css. */
:root {
  --gold: #e3c48a;
  --gold-dim: rgba(227, 196, 138, 0.14);
  --glass: rgba(255, 255, 255, 0.055);
  --glass-border: rgba(255, 255, 255, 0.13);
}
html { scroll-behavior: smooth; scroll-padding-top: 76px; }

/* Fixed drifting aurora behind everything */
body::before, body::after {
  content: ""; position: fixed; z-index: -1; border-radius: 50%; pointer-events: none;
  filter: blur(110px); will-change: transform;
}
body::before {
  width: 62vw; height: 62vw; left: -20vw; top: 10vh;
  background: radial-gradient(circle, rgba(91, 75, 255, 0.34), transparent 65%);
  animation: aurora-a 24s ease-in-out infinite;
}
body::after {
  width: 55vw; height: 55vw; right: -18vw; bottom: -10vh;
  background: radial-gradient(circle, rgba(227, 196, 138, 0.22), transparent 65%);
  animation: aurora-b 30s ease-in-out infinite;
}
@keyframes aurora-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(14vw, 12vh) scale(1.2); } }
@keyframes aurora-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-12vw, -14vh) scale(1.15); } }

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 50;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--gold));
}

/* Type */
h1, h2, h3 { letter-spacing: -0.02em; }
.hero h1 .accent, .grad-text {
  background: linear-gradient(100deg, var(--accent), var(--gold), #ff9d85, var(--accent));
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: grad-move 7s linear infinite;
}
@keyframes grad-move { to { background-position: 250% 0; } }
.eyebrow-sm { color: var(--gold); letter-spacing: 0.22em; }
.portal-section .eyebrow-sm { color: var(--gold); }

/* Nav */
.nav { background: rgba(7, 10, 23, 0.6); }
.brand .dot { position: relative; box-shadow: 0 0 14px rgba(255, 106, 77, 0.8); }
.brand .dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent);
  animation: ripple 2s ease-out infinite;
}
@keyframes ripple { from { transform: scale(1); opacity: 0.6; } to { transform: scale(3.4); opacity: 0; } }
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a:hover { color: var(--text); }

/* Buttons: light sweep + glow */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg); animation: sweep 4.5s ease-in-out infinite;
}
@keyframes sweep { 0% { left: -60%; } 35%, 100% { left: 140%; } }
.btn { transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease, background 0.2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary:hover { box-shadow: 0 18px 34px -10px rgba(255, 106, 77, 0.7); }

/* Glass surfaces with cursor spotlight */
.value-card, .audience-chip, .client-row, .faq details, .contact-card, .stat-card, .about-card {
  background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  position: relative; overflow: hidden;
}
.spot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(227, 196, 138, 0.16), transparent 60%);
}
.spot:hover::before { opacity: 1; }
.value-card .icon { background: var(--gold-dim); color: var(--gold); }
.value-card:hover { border-color: rgba(227, 196, 138, 0.5); }
.value-card::before { background: linear-gradient(90deg, var(--accent), var(--gold)); }
.step::before { background: linear-gradient(135deg, var(--accent), var(--gold)); color: #12162a; }
.audience-chip { transition: transform 0.25s ease, border-color 0.25s ease; }
.audience-chip:hover { transform: translateY(-4px); border-color: rgba(227, 196, 138, 0.5); }
#audience { background: transparent !important; }

/* Portal + CTA */
.portal-section { background: rgba(7, 10, 23, 0.55); }
.client-row .client-badge { background: var(--gold-dim); border: 1px solid rgba(227,196,138,0.5); color: var(--gold); }
.cta-section { position: relative; overflow: hidden; }
.cta-section::before {
  content: ""; position: absolute; width: 60%; aspect-ratio: 1; right: -10%; top: -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 65%);
  animation: aurora-a 14s ease-in-out infinite;
}
.cta-section > * { position: relative; }

/* About */
.about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.about-copy p { color: var(--muted); font-size: 1.05rem; }
.about-copy p strong { color: var(--text); }
.about-card { border-radius: var(--radius-lg); padding: 28px; }
.about-card h3 { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 16px; }
.fact { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); }
.fact:first-of-type { border-top: 0; padding-top: 0; }
.fact .fact-k { min-width: 92px; color: var(--muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; padding-top: 2px; }
.fact .fact-v { font-weight: 600; }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 44px; }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.stat-card { border-radius: var(--radius-md); padding: 30px 26px; }
.stat-num { font-family: 'Inter', sans-serif; font-size: 3.2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.stat-card p { color: var(--muted); margin: 12px 0 0; font-size: 0.95rem; }
.sources { margin-top: 26px; color: var(--muted); font-size: 0.82rem; }
.sources a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* FAQ */
.faq { max-width: 780px; margin-inline: auto; display: grid; gap: 12px; }
.faq details { border-radius: var(--radius-md); padding: 0; }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; font-weight: 700; position: relative;
  font-family: 'Inter', sans-serif; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-size: 1.5rem; transition: transform 0.3s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 24px 22px; margin: 0; color: var(--muted); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 28px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { border-radius: var(--radius-lg); padding: 30px; }
.contact-card h3 { margin-bottom: 18px; }
.contact-line { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--border); }
.contact-line:first-of-type { border-top: 0; }
.contact-line .ci {
  width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--gold-dim); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
}
.contact-line .ci svg { width: 20px; height: 20px; }
.contact-line small { display: block; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.contact-line a, .contact-line span.v { color: var(--text); font-weight: 600; }
.contact-line a:hover { color: var(--gold); }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.field input, .field textarea, .field select {
  font: inherit; color: var(--text); background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border); border-radius: 12px; padding: 0.85em 1em; width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field select option { color: #12162a; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(227,196,138,0.15);
}
.form-note { color: var(--muted); font-size: 0.82rem; margin: 12px 0 0; }
.form-status { margin-top: 14px; font-weight: 600; color: var(--teal); min-height: 1.4em; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { background: rgba(7,10,23,0.5); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; width: 100%; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-grid a { color: var(--muted); }
.footer-grid a:hover { color: var(--text); }
.footer-bottom { width: 100%; border-top: 1px solid var(--border); margin-top: 28px; padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* Legal pages */
.legal { max-width: 760px; padding-block: 64px; }
.legal h1 { font-size: 2.4rem; }
.legal h2 { font-size: 1.25rem; margin-top: 2em; color: var(--gold); }
.legal p, .legal li { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .grad-text, .hero h1 .accent, .btn-primary::after, .brand .dot::after { animation: none !important; }
}

.about-grid.about-single { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }

/* Client logo badge: dark logo on a light disc so it reads on the dark theme */
.client-row .client-badge.has-logo { width: 52px; height: 52px; background: #f5f2ea; border: 2px solid rgba(227,196,138,0.6); padding: 6px; }
.client-row .client-badge.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.client-row .client-badge.logo-on-dark { background: #12162a; border-color: rgba(255,255,255,0.35); padding: 8px; }

/* ============================================================
   Design-system upgrade: Calistoga + Inter + JetBrains Mono
   (display serif for warmth, Inter for UI/body, mono for labels)
   ============================================================ */

/* Calistoga ships a single weight (400). Asking for 700 makes the
   browser synthesise fake bold, which smears the letterforms —
   so headings rely on size/colour for hierarchy, not weight. */
h1, h2, h3, h4,
.hero h1,
.section-heading h2,
.stat-num,
.faq summary {
  font-family: 'Calistoga', 'Inter', serif;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.hero h1 { line-height: 1.08; }

/* Small uppercase labels read better in mono — this is the
   "data label / section badge" role from the font pairing. */
.eyebrow-sm,
.hero .eyebrow,
.field label,
.contact-line small,
.footer-grid h4,
.stack-foot,
.hero-stat .label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 500;
  letter-spacing: 0.14em;
}

/* Numbers want tabular figures so stat rows don't jitter. */
.stat-num, .hero-stat .num { font-variant-numeric: tabular-nums; }

/* ============================================================
   Accessibility: visible focus for keyboard users
   Nothing in the original CSS defined a focus ring, and the
   client search input cleared its outline with no replacement.
   ============================================================ */
:where(a, button, .btn, input, textarea, select, details summary, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Restore a ring on the one control that removed it outright. */
.client-search input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-color: var(--gold);
}
/* Mouse users keep the clean look; only keyboard focus shows a ring. */
:where(a, button, .btn):focus:not(:focus-visible) { outline: none; }

/* Clickable things should say so. */
.btn, .audience-chip, .client-row, .faq summary, .nav-links a { cursor: pointer; }

/* Slightly truer frosted glass (was 0.055 — closer to flat-with-border
   than actual glass) while keeping body text well above 4.5:1. */
:root {
  --glass: rgba(255, 255, 255, 0.085);
  --glass-border: rgba(255, 255, 255, 0.16);
}

/* Inline SVG icons replacing the old emoji (emoji render differently on
   every OS and are announced as text by screen readers). */
.chip-ico {
  width: 18px; height: 18px; flex: none;
  color: var(--gold);
  vertical-align: -3px;
}
.audience-chip { display: inline-flex; align-items: center; gap: 10px; }
.hero .eyebrow .chip-ico { width: 16px; height: 16px; color: var(--accent); }
.float-badge .chip-ico { width: 16px; height: 16px; color: inherit; }
.float-badge.fb-c .chip-ico, .float-badge.fb-d .chip-ico { width: 18px; height: 18px; }

/* Mobile nav: at 375px the brand + two CTAs collide and the button
   labels wrap onto two lines. Drop the secondary CTA (the portal is
   still reachable from the page body and the footer) and tighten the
   primary one so the bar stays on one line. */
@media (max-width: 560px) {
  .nav .container { gap: 12px; }
  .nav-cta .btn-ghost { display: none; }
  .nav-cta .btn-primary {
    padding: 0.6em 1.1em;
    font-size: 0.85rem;
    min-height: 40px;
    white-space: nowrap;
  }
  .brand { font-size: 1.1rem; }
}

/* ============================================================
   Layered background
   Replaces the old two-blob aurora: four drifting colour orbs,
   a fine grid for structure, film grain to kill the banding you
   get across big dark gradients, and a vignette to focus the
   centre. All fixed, all behind content, none of it interactive.
   ============================================================ */

/* Retire the old pseudo-element aurora — superseded by .site-bg. */
body::before, body::after { content: none; }

.site-bg {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #141a3a 0%, transparent 60%),
    linear-gradient(180deg, #080b1b 0%, #070a17 55%, #05070f 100%);
}

/* Wrapper exists so scroll parallax (JS) can move the whole orb
   field without fighting each orb's own drift animation. */
.bg-drift { position: absolute; inset: -10%; will-change: transform; }

.orb {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(110px); will-change: transform;
}
.orb-coral {
  width: 58vw; height: 58vw; left: -16vw; top: -8vh;
  background: radial-gradient(circle, rgba(255, 106, 77, 0.30), transparent 68%);
  animation: drift-a 26s ease-in-out infinite;
}
.orb-violet {
  width: 62vw; height: 62vw; right: -20vw; top: 18vh;
  background: radial-gradient(circle, rgba(91, 75, 255, 0.32), transparent 66%);
  animation: drift-b 34s ease-in-out infinite;
}
.orb-gold {
  width: 46vw; height: 46vw; left: 12vw; bottom: -14vh;
  background: radial-gradient(circle, rgba(227, 196, 138, 0.22), transparent 68%);
  animation: drift-c 30s ease-in-out infinite;
}
.orb-teal {
  width: 38vw; height: 38vw; right: 6vw; bottom: 6vh;
  background: radial-gradient(circle, rgba(31, 174, 142, 0.16), transparent 70%);
  animation: drift-d 38s ease-in-out infinite;
}
@keyframes drift-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(10vw, 10vh, 0) scale(1.18); } }
@keyframes drift-b { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-12vw, -8vh, 0) scale(1.12); } }
@keyframes drift-c { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(8vw, -12vh, 0) scale(1.22); } }
@keyframes drift-d { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-9vw, 7vh, 0) scale(1.15); } }

/* Fine grid — gives the dark field some architecture, masked so it
   fades out toward the edges instead of ending abruptly. */
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 75% 60% at 50% 35%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 35%, #000 20%, transparent 78%);
}

/* Film grain. Big dark gradients band badly on cheap panels; a touch
   of noise hides it and reads as "expensive print" rather than "flat
   CSS". Animated by stepping the layer around, not by redrawing it. */
.bg-grain {
  position: absolute; inset: -150%;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
  will-change: transform;
}
@keyframes grain {
  0%   { transform: translate3d(0, 0, 0); }
  16%  { transform: translate3d(-6%, -3%, 0); }
  33%  { transform: translate3d(4%, -6%, 0); }
  50%  { transform: translate3d(-3%, 5%, 0); }
  66%  { transform: translate3d(6%, 3%, 0); }
  83%  { transform: translate3d(-5%, -5%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 40%, transparent 45%, rgba(0,0,0,0.55) 100%);
}

/* The hero had its own blob set layered on the old aurora — now
   redundant and muddies the new field. */
.hero-blob { display: none; }
.hero { background: transparent; }
.hero::before { opacity: 0.35; }

/* --- Background balance pass ---
   First attempt put all four orbs out near the edges, which is exactly
   where the vignette is darkest — they cancelled each other out and the
   page came back flatter than the aurora it replaced. Pull the orbs
   inward, lift their opacity, and soften the vignette. */
.orb-coral  { left: -6vw;  top: -12vh;  width: 54vw; height: 54vw;
  background: radial-gradient(circle, rgba(255, 106, 77, 0.42), transparent 66%); }
.orb-violet { right: -8vw; top: 6vh;    width: 56vw; height: 56vw;
  background: radial-gradient(circle, rgba(104, 86, 255, 0.40), transparent 66%); }
.orb-gold   { left: 18vw;  bottom: -8vh; width: 44vw; height: 44vw;
  background: radial-gradient(circle, rgba(227, 196, 138, 0.26), transparent 68%); }
.orb-teal   { right: 14vw; bottom: 2vh;  width: 36vw; height: 36vw;
  background: radial-gradient(circle, rgba(31, 174, 142, 0.20), transparent 70%); }

.bg-vignette {
  background: radial-gradient(ellipse 95% 80% at 50% 40%, transparent 58%, rgba(0,0,0,0.42) 100%);
}
.site-bg {
  background:
    radial-gradient(130% 95% at 50% -15%, #1a2148 0%, transparent 62%),
    linear-gradient(180deg, #0a0e22 0%, #080b1b 55%, #060812 100%);
}
.bg-grain { opacity: 0.13; }

/* ============================================================
   Motion pass
   ============================================================ */

/* Hero headline reveals word by word. The gradient-text span is
   treated as a single unit so its background-clip stays intact —
   splitting inside it would leave transparent text with no
   background to clip against, i.e. invisible words. */
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  animation: word-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes word-in { to { opacity: 1; transform: translateY(0); } }

/* Gold rule that draws itself under a section heading on reveal. */
.section-heading h2 { position: relative; }
.section-heading h2::after {
  content: ""; position: absolute; left: 0; bottom: -0.38em;
  width: 68px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
.section-heading.center h2::after { left: 50%; translate: -50% 0; transform-origin: center; }
.section-heading.is-visible h2::after { transform: scaleX(1); }

/* Light sweeps across a glass card on hover. */
.value-card, .stat-card, .contact-card, .about-card { position: relative; overflow: hidden; }
.value-card::after, .stat-card::after, .contact-card::after, .about-card::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.10), transparent);
  transform: skewX(-18deg); pointer-events: none;
  transition: left 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.value-card:hover::after, .stat-card:hover::after,
.contact-card:hover::after, .about-card:hover::after { left: 125%; }

/* Buttons lean toward the cursor (set by JS as --mx/--my). */
.btn-primary, .btn-dark { will-change: transform; }

/* The hero card's stamps fill in sequence, then reset — the product's
   core loop, running quietly in the background. */
.stack-card-1 .stack-dots span.on {
  animation: stamp-pop 7s ease-in-out infinite;
  transform-origin: center;
}
.stack-card-1 .stack-dots span.on:nth-of-type(1) { animation-delay: 0.0s; }
.stack-card-1 .stack-dots span.on:nth-of-type(2) { animation-delay: 0.18s; }
.stack-card-1 .stack-dots span.on:nth-of-type(3) { animation-delay: 0.36s; }
.stack-card-1 .stack-dots span.on:nth-of-type(4) { animation-delay: 0.54s; }
.stack-card-1 .stack-dots span.on:nth-of-type(5) { animation-delay: 0.72s; }
.stack-card-1 .stack-dots span.on:nth-of-type(6) { animation-delay: 0.90s; }
@keyframes stamp-pop {
  0%, 8%   { transform: scale(0.4); opacity: 0.25; }
  14%      { transform: scale(1.22); opacity: 1; }
  20%, 90% { transform: scale(1); opacity: 1; }
  100%     { transform: scale(0.4); opacity: 0.25; }
}

/* Nav condenses once you scroll past the hero. */
.nav { transition: padding 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; }
.nav.is-stuck {
  background: rgba(7, 10, 23, 0.88);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,0.9);
}
.nav.is-stuck .container { padding-block: 10px; }

@media (prefers-reduced-motion: reduce) {
  .orb, .bg-grain { animation: none !important; }
  .hero h1 .word { animation: none !important; opacity: 1; transform: none; }
  .section-heading h2::after { transition: none; transform: scaleX(1); }
  .value-card::after, .stat-card::after,
  .contact-card::after, .about-card::after { display: none; }
  .stack-card-1 .stack-dots span.on { animation: none !important; }
  .bg-drift { transform: none !important; }
}