/* ============================================================
   00d-cyberpunk.css — site-wide dark + neon + glitch + terminal
   Big Bear Marketing — loaded on every page
   ============================================================
   Layered ON TOP of 00b-design-system.css + 00c-spectacular.css.
   Loaded on every marketing page so the entire site reads as
   "premium cyberpunk tech aesthetic" — BBM brand intact
   (yellow + navy stay), accented with electric-cyan + faint
   magenta-for-glitch. Body, sections, and cards re-tinted dark.

   New patterns:
     - Cyber grid background (.cyber-grid, .cyber-grid-overlay)
     - Periodic scanline sweep (.cyber-scanline)
     - CRT scanlines / vignette (.cyber-crt)
     - Glitch text effect (.cyber-glitch)
     - Neon glow text + boxes (.neon-yellow, .neon-cyan, .neon-text)
     - Terminal-style eyebrow (.cyber-term)
     - Holographic chrome (.holo-card)
     - Circuit-line animated border (.circuit-border)
     - Boot-up reveal on entrance (.cyber-boot)
     - Monospace stat (.cyber-stat)
     - All kinetic effects respect prefers-reduced-motion.

   New colour tokens:
     --c-cyan       neon cyan accent
     --c-cyan-glow  for box-shadow
     --c-magenta    glitch RGB-split colour
   ============================================================ */

:root {
  --c-cyan:       #00f0ff;
  --c-cyan-dim:   #00b8c8;
  --c-cyan-glow:  rgba(0, 240, 255, 0.55);
  --c-magenta:    #ff007a;
  --c-magenta-glow: rgba(255, 0, 122, 0.45);
  --c-deep:       #0a1428;   /* below navy-dark — full cyber depth */

  /* ===== Redefine base brand tokens to dark variants =====
     Every per-section CSS file uses var(--c-bg), var(--c-card),
     var(--c-line), var(--c-muted), var(--c-ink) for backgrounds and
     text. Changing these tokens here flips EVERY section to dark
     in one move — no need to touch each section file. Tokens that
     are used as text-on-dark (like --c-white) are kept at near-white
     so existing `color: var(--c-white)` rules still produce readable
     light text. */
  --c-bg:    #050b18 !important;   /* page background — deep dark */
  --c-card:  #0f1e36 !important;   /* surface for cards */
  --c-line:  rgba(0, 240, 255, 0.16) !important;
  --c-muted: #94a3b8 !important;   /* slate-400 — readable muted text */
  --c-ink:   #e2e8f0 !important;   /* slate-200 — default body text */
  --c-white: #f8fafc !important;   /* near-white for text on dark */
  /* navy-light was originally #1a5a8a (chalky on dark glass). Map to cyan
     so hover-border states across faq/crm-card/pricing-teaser flow naturally
     into the cyberpunk accent palette. */
  --c-navy-light: var(--c-cyan) !important;
}

/* ============================================================
   CYBER GRID — animated isometric grid background
   Drop .cyber-grid on a dark section. The grid lines pulse
   subtly and the perspective adds depth without using 3D.
   ============================================================ */

.cyber-grid {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cyber-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.12) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  /* Fade out at edges so the grid feels like it stretches into the void */
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 85%);
  pointer-events: none;
  z-index: 0;
  animation: cyber-grid-drift 18s linear infinite;
}
@keyframes cyber-grid-drift {
  0%   { transform: translateY(0); }
  100% { transform: translateY(48px); }
}
.cyber-grid > * { position: relative; z-index: 1; }

/* Smaller overlay variant for use INSIDE existing dark sections without
   wrapping them. Add .cyber-grid-overlay to any positioned element. */
.cyber-grid-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 215, 0, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 215, 0, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}

/* ============================================================
   PERIODIC SCANLINE SWEEP
   A horizontal cyan glow that sweeps top-to-bottom every 8s.
   Drop into a section as a sibling: <div class="cyber-scanline"></div>
   ============================================================ */

.cyber-scanline {
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--c-cyan) 50%, transparent 100%);
  box-shadow:
    0 0 12px var(--c-cyan-glow),
    0 0 32px rgba(0, 240, 255, 0.30);
  pointer-events: none;
  z-index: 2;
  animation: cyber-scanline-sweep 8s ease-in-out infinite;
  opacity: 0;
}
@keyframes cyber-scanline-sweep {
  0%   { top: -2px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ============================================================
   CRT EFFECT — subtle horizontal scanlines + vignette
   Tasteful, not gimmicky. Stays under 6% opacity.
   ============================================================ */

.cyber-crt {
  position: relative;
}
.cyber-crt::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.06) 0px,
    rgba(0, 0, 0, 0.06) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: multiply;
}
.cyber-crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
  z-index: 3;
}

/* ============================================================
   GLITCH TEXT
   Apply .cyber-glitch on a span and the underlying data-text
   attribute is duplicated in cyan + magenta layers that flicker.
   Usage:
     <span class="cyber-glitch" data-text="HEADLINE">HEADLINE</span>
   The element NEEDS data-text matching the visible text.
   ============================================================ */

.cyber-glitch {
  position: relative;
  display: inline-block;
  /* Make sure the visible text dominates */
  color: inherit;
}
.cyber-glitch::before,
.cyber-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  /* Hidden by default — animation reveals via clip + offset */
  opacity: 0.75;
  mix-blend-mode: screen;
}
.cyber-glitch::before {
  color: var(--c-cyan);
  text-shadow: 0 0 8px var(--c-cyan-glow);
  animation: cyber-glitch-1 4.6s steps(2, end) infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}
.cyber-glitch::after {
  color: var(--c-magenta);
  text-shadow: 0 0 8px var(--c-magenta-glow);
  animation: cyber-glitch-2 5.1s steps(2, end) infinite;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}
@keyframes cyber-glitch-1 {
  0%, 88%, 100% { transform: translate(0, 0); opacity: 0; }
  90% { transform: translate(-2px, -1px); opacity: 0.75; }
  92% { transform: translate(2px,  1px); opacity: 0.65; }
  94% { transform: translate(-1px, 0); opacity: 0.50; }
}
@keyframes cyber-glitch-2 {
  0%, 84%, 100% { transform: translate(0, 0); opacity: 0; }
  86% { transform: translate(2px, 1px); opacity: 0.75; }
  88% { transform: translate(-2px, -1px); opacity: 0.55; }
  90% { transform: translate(1px, 0); opacity: 0.40; }
}

/* ============================================================
   NEON TEXT + BOXES
   Apply on top of any text/element to add a neon glow.
   ============================================================ */

.neon-yellow {
  color: var(--c-yellow);
  text-shadow:
    0 0 6px rgba(255, 215, 0, 0.85),
    0 0 18px rgba(255, 215, 0, 0.55),
    0 0 36px rgba(255, 215, 0, 0.25);
}
.neon-cyan {
  color: var(--c-cyan);
  text-shadow:
    0 0 6px rgba(0, 240, 255, 0.85),
    0 0 18px rgba(0, 240, 255, 0.55),
    0 0 36px rgba(0, 240, 255, 0.25);
}
.neon-box-yellow {
  box-shadow:
    0 0 0 1px rgba(255, 215, 0, 0.55),
    0 0 18px rgba(255, 215, 0, 0.35),
    inset 0 0 8px rgba(255, 215, 0, 0.18);
}
.neon-box-cyan {
  box-shadow:
    0 0 0 1px rgba(0, 240, 255, 0.55),
    0 0 18px rgba(0, 240, 255, 0.35),
    inset 0 0 8px rgba(0, 240, 255, 0.18);
}

/* Flicker on hover for neon — like a stressed bulb */
.neon-flicker:hover { animation: neon-flicker 0.18s steps(2, end) 3; }
@keyframes neon-flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ============================================================
   TERMINAL-STYLE EYEBROW
   Replaces the regular .eyebrow on cyberpunk sections.
     <span class="cyber-term">SYSTEM_/ services</span>
   Adds a blinking cursor + monospace font + cyan glow.
   ============================================================ */

.cyber-term {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, "Courier New", monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-cyan);
  text-shadow: 0 0 8px var(--c-cyan-glow);
  margin-bottom: var(--s-3);
}
.cyber-term::before {
  content: ">";
  color: var(--c-cyan);
  font-weight: 700;
}
.cyber-term::after {
  content: "";
  width: 8px;
  height: 14px;
  background: var(--c-cyan);
  box-shadow: 0 0 8px var(--c-cyan-glow);
  animation: cyber-cursor-blink 1.1s steps(2, end) infinite;
  margin-left: 4px;
  vertical-align: middle;
}
@keyframes cyber-cursor-blink {
  50% { opacity: 0; }
}

/* ============================================================
   HOLOGRAPHIC CHROME CARD
   Compose with existing service-teaser-card / pricing-teaser-card.
   Adds a refracting iridescent border that shifts with hover.
   ============================================================ */

.holo-card {
  position: relative;
  background-clip: padding-box;
  border: 1px solid transparent !important;
  isolation: isolate;
}
.holo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(0, 240, 255, 0.55) 25%,
    rgba(255, 215, 0, 0.55) 50%,
    rgba(255, 0, 122, 0.45) 75%,
    transparent 100%
  );
  background-size: 220% 220%;
  background-position: 0% 50%;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  z-index: -1;
  transition: background-position 0.8s var(--ease-out);
  opacity: 0.55;
}
@media (hover: hover) {
  .holo-card:hover::before {
    background-position: 100% 50%;
    opacity: 1;
  }
}

/* ============================================================
   CIRCUIT-LINE ANIMATED BORDER
   Subtle inset line that travels along the perimeter of a card.
   Add .circuit-border. Use on featured CTA blocks or hero cards.
   ============================================================ */

.circuit-border {
  position: relative;
}
.circuit-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    linear-gradient(90deg, var(--c-cyan) 0%, transparent 30%, transparent 70%, var(--c-cyan) 100%);
  background-size: 300% 100%;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  z-index: 0;
  animation: circuit-trail 4s linear infinite;
}
@keyframes circuit-trail {
  0%   { background-position: 100% 50%; }
  100% { background-position: -200% 50%; }
}

/* ============================================================
   BOOT-UP REVEAL
   Applied to a parent, the children fade in like a system
   coming online. Each direct child gets a typewriter-y reveal.
   Combine with .cyber-boot-fast for tighter animation.
   ============================================================ */

.cyber-boot > * {
  opacity: 0;
  animation: cyber-boot-in 0.7s var(--ease-out) forwards;
}
.cyber-boot > *:nth-child(1) { animation-delay: 0.15s; }
.cyber-boot > *:nth-child(2) { animation-delay: 0.35s; }
.cyber-boot > *:nth-child(3) { animation-delay: 0.55s; }
.cyber-boot > *:nth-child(4) { animation-delay: 0.75s; }
.cyber-boot > *:nth-child(5) { animation-delay: 0.95s; }
.cyber-boot > *:nth-child(6) { animation-delay: 1.15s; }
@keyframes cyber-boot-in {
  0%   { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0);   filter: blur(0); }
}

/* ============================================================
   CYBER STAT — large monospace stat tile with neon glow
   Replaces .hero-stat for the cyberpunk hero. Tabular nums
   so the counter doesn't jitter. Yellow-on-black with cyan label.
   ============================================================ */

.cyber-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-3) var(--s-4);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(0, 240, 255, 0.30);
  border-radius: 4px;
  box-shadow: inset 0 0 18px rgba(0, 240, 255, 0.08);
  position: relative;
  isolation: isolate;
}
.cyber-stat::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 240, 255, 0.05) 50%,
    transparent 100%
  );
  z-index: -1;
}
.cyber-stat-num {
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, "Courier New", monospace;
  font-size: 2rem;
  font-weight: 800;
  color: var(--c-yellow);
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow:
    0 0 8px rgba(255, 215, 0, 0.65),
    0 0 24px rgba(255, 215, 0, 0.25);
  font-variant-numeric: tabular-nums;
}
.cyber-stat-label {
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, "Courier New", monospace;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--c-cyan);
  text-shadow: 0 0 6px var(--c-cyan-glow);
}

/* ============================================================
   HERO ENHANCEMENT
   #hero on the cyberpunk landing gets a grid overlay + crt +
   periodic scanline. Existing spotlight + orbs + noise keep working.
   ============================================================ */

#hero.cyber-grid::before { /* already defined above, plus this hero-only override */ }

#hero.cyber-grid .hero-eyebrow {
  background: rgba(0, 240, 255, 0.10);
  border-color: rgba(0, 240, 255, 0.45);
  color: var(--c-cyan);
  text-shadow: 0 0 8px var(--c-cyan-glow);
}
#hero.cyber-grid .hero-eyebrow-dot {
  background: var(--c-cyan);
  box-shadow: 0 0 8px var(--c-cyan-glow);
}

/* ============================================================
   BUTTON UPGRADE — neon push button
   Compose with existing .btn .btn-yellow as .cyber-push for the
   landing-page primary action. Yellow body + cyan underline glow.
   ============================================================ */

.cyber-push {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cyber-push::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--c-cyan);
  box-shadow: 0 0 14px var(--c-cyan-glow);
  transform: scaleX(0.4);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
  z-index: 0;
}
@media (hover: hover) {
  .cyber-push:hover::before { transform: scaleX(1); }
}

/* ============================================================
   SECTION TITLE — terminal-style large heading
   Replaces standard h2 on cyberpunk sections.
     <h2 class="cyber-title">Two products. One person.</h2>
   ============================================================ */

.cyber-title {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  display: inline-block;
  position: relative;
  padding-left: 1.1em;
}
.cyber-title::before {
  content: "//";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--c-cyan);
  text-shadow: 0 0 8px var(--c-cyan-glow);
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
  opacity: 0.85;
}

/* ============================================================
   FOOTER SCANLINE — yellow horizontal pulse below the hero stats
   ============================================================ */

.cyber-pulse-line {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--c-cyan) 50%,
    transparent 100%);
  box-shadow: 0 0 8px var(--c-cyan-glow);
  margin: var(--s-4) 0;
  animation: cyber-pulse-line 2.6s ease-in-out infinite;
  transform-origin: left center;
}
@keyframes cyber-pulse-line {
  0%, 100% { opacity: 0.45; transform: scaleX(0.85); }
  50%      { opacity: 1;    transform: scaleX(1);    }
}

/* ============================================================
   CTA BLOCK CYBERPUNK MODE
   Compose with .cta-block.
   ============================================================ */

.cyber-cta {
  background:
    radial-gradient(circle at 80% 30%, rgba(0, 240, 255, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.20) 0%, transparent 45%),
    linear-gradient(135deg, #0a1428 0%, var(--c-navy-dark) 60%, #0a1428 100%) !important;
}

/* ============================================================
   SITE-WIDE DARK THEME OVERHAUL
   ============================================================
   Flips every previously-light surface to a dark cyberpunk
   palette. Targets the universal patterns in 00-base.css and
   the section/card patterns established across the marketing
   site. Loaded after all other layers so these rules win the
   cascade.
   ============================================================ */

/* === Body + base text === */
body {
  background: #050b18 !important;
  color: #e2e8f0 !important;
}
html {
  background: #050b18;
}

/* Subtle global grid behind everything for cyber atmosphere.
   Lower opacity than the hero grid so it whispers, not shouts. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
  /* Fade-out toward edges for ambient feel */
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 90%);
}
body > * { position: relative; z-index: 1; }

/* === Headings + text === */
h1, h2, h3, h4 {
  color: #f8fafc !important;
}
p, li {
  color: #cbd5e1;
}
.eyebrow {
  color: var(--c-cyan) !important;
  text-shadow: 0 0 6px var(--c-cyan-glow);
}

/* === Module sections === */
section.module,
.module {
  background: transparent;
}
section.module + section.module {
  border-top: 1px solid rgba(0, 240, 255, 0.06);
}
.bg-card {
  background: linear-gradient(180deg, #0a1428 0%, #0d1a32 100%) !important;
  position: relative;
}
.bg-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  opacity: 0.6;
  mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%);
}
.bg-card > .container { position: relative; z-index: 2; }

/* === Cards (universal — light card pattern) === */
.service-card,
.service-teaser-card,
.feature-card,
.crm-card,
.pricing-card,
.pricing-teaser-card,
.callout-block,
.case-study,
.home-case-card,
.testimonial:not(.testimonial--placeholder),
.philosophy-quote-card,
.philosophy-proof-card,
.flat-pricing-block {
  background: rgba(15, 30, 54, 0.78) !important;
  border-color: rgba(0, 240, 255, 0.18) !important;
  color: #e2e8f0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Featured / navy variant cards (already dark) get a slight cyan border instead */
.pricing-teaser-card--navy,
.pricing-card--popular,
.philosophy-quote-card {
  background: linear-gradient(135deg, #0a1428 0%, #0f2547 100%) !important;
  border-color: rgba(255, 215, 0, 0.30) !important;
}

/* Card text + child elements adjust for new dark surface */
.service-card h3,
.service-teaser-card h3,
.feature-card h3,
.crm-card h3,
.pricing-card h3,
.pricing-teaser-card h3,
.callout-block h3,
.case-study h3,
.home-case-card h3,
.testimonial blockquote,
.philosophy-copy h4 {
  color: #f8fafc !important;
}
.service-card p,
.service-teaser-card p,
.feature-card p,
.crm-card p,
.pricing-card p,
.pricing-teaser-card p,
.callout-block p,
.case-study p,
.home-case-card p,
.testimonial blockquote p,
.philosophy-copy p,
.philosophy-proof-list li {
  color: #cbd5e1 !important;
}

/* Service teaser link arrow + price text on dark */
.service-teaser-link {
  color: var(--c-cyan) !important;
  text-shadow: 0 0 6px var(--c-cyan-glow);
}
.pricing-teaser-from,
.pricing-teaser-card .pricing-teaser-from {
  color: var(--c-yellow) !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.55);
}
.pricing-teaser-sub {
  color: var(--c-cyan) !important;
}

/* === Card icon containers — light-on-dark inversion === */
.service-teaser-icon,
.callout-block-icon {
  background: rgba(0, 240, 255, 0.12) !important;
  color: var(--c-cyan) !important;
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.10);
}
.service-teaser-icon svg,
.callout-block-icon svg {
  color: var(--c-cyan);
  filter: drop-shadow(0 0 4px var(--c-cyan-glow));
}

/* === Buttons that previously rode light backgrounds === */
.btn-ghost {
  color: var(--c-cyan);
  border-color: var(--c-cyan);
  text-shadow: 0 0 6px var(--c-cyan-glow);
}
.btn-ghost:hover {
  background: var(--c-cyan);
  color: #050b18;
  box-shadow: 0 0 18px var(--c-cyan-glow);
}
.btn-ghost:focus-visible {
  outline-color: var(--c-cyan);
}

/* Yellow primary now glows even harder on the dark theme */
.btn-yellow {
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.30), 0 0 16px rgba(255, 215, 0, 0.20);
}
.btn-yellow:hover {
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.55), 0 0 28px rgba(255, 215, 0, 0.40);
}

/* === Form fields (contact form on about, lead form anywhere) === */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="number"], input[type="url"], textarea, select {
  background: rgba(10, 20, 40, 0.78) !important;
  color: #e2e8f0 !important;
  border-color: rgba(0, 240, 255, 0.25) !important;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="search"]:focus, input[type="number"]:focus, input[type="url"]:focus,
textarea:focus, select:focus {
  border-color: var(--c-cyan) !important;
  box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.18), 0 0 18px var(--c-cyan-glow) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder {
  color: #64748b !important;
}
label {
  color: #cbd5e1;
}

/* === Page hero strip (interior pages) — auto cyber treatment === */
.page-hero {
  background:
    radial-gradient(ellipse at 110% 0%, rgba(0, 240, 255, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at -10% 100%, rgba(255, 215, 0, 0.08) 0%, transparent 50%),
    linear-gradient(160deg, #050b18 0%, #0a1428 60%, #0d1a32 100%) !important;
  border-bottom: 1px solid rgba(0, 240, 255, 0.18) !important;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
  animation: cyber-grid-drift 22s linear infinite;
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero .eyebrow { color: var(--c-cyan) !important; }

/* === Sub-nav (services + crm pages) on dark === */
.page-subnav {
  background: rgba(5, 11, 24, 0.92) !important;
  border-bottom-color: rgba(0, 240, 255, 0.18) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.page-subnav a {
  color: #94a3b8 !important;
}
.page-subnav a:hover {
  color: var(--c-cyan) !important;
}
.page-subnav a.is-spy-active {
  color: var(--c-cyan) !important;
  border-bottom-color: var(--c-yellow) !important;
}

/* === Sticky CTA bar on dark === */
.sticky-cta-bar {
  background: linear-gradient(135deg, #0a1428 0%, #0d1a32 100%) !important;
  box-shadow: 0 -4px 24px rgba(0, 240, 255, 0.18) !important;
  border-top: 1px solid rgba(0, 240, 255, 0.30);
}

/* === FAQs on dark === */
.faq summary, .faq details {
  color: #e2e8f0 !important;
}
.faq details {
  background: rgba(15, 30, 54, 0.72) !important;
  border-color: rgba(0, 240, 255, 0.18) !important;
}

/* === Tables, stats, lists === */
.stats-strip-num, .home-case-num, .num-display {
  color: var(--c-yellow) !important;
  text-shadow:
    0 0 8px rgba(255, 215, 0, 0.55),
    0 0 24px rgba(255, 215, 0, 0.25);
}

/* === Testimonial avatar gets cyan ring on dark === */
.testimonial-avatar {
  background: rgba(0, 240, 255, 0.12) !important;
  color: var(--c-cyan) !important;
  border: 1px solid rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 12px var(--c-cyan-glow);
}

/* === Section-head text === */
.section-head {
  position: relative;
  z-index: 2;
}
.section-head p {
  color: #94a3b8 !important;
}

/* === Status page service cards on dark === */
.status-card {
  background: rgba(15, 30, 54, 0.78) !important;
  border-color: rgba(0, 240, 255, 0.18) !important;
}
.status-card-name { color: var(--c-cyan) !important; text-shadow: 0 0 6px var(--c-cyan-glow); }
.status-card-url, .status-card-desc, .status-card-meta { color: #94a3b8 !important; }

/* === vs-hubspot.html comparison table on dark === */
.compare-table, .compare-row, .compare-header {
  background: rgba(15, 30, 54, 0.78) !important;
  color: #e2e8f0;
}

/* === Cyberpunk-aware focus ring overhaul ===
   Default global yellow focus ring stays but gets a glow halo on dark. */
*:focus-visible {
  outline: 2px solid var(--c-yellow) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.20), 0 0 18px rgba(255, 215, 0, 0.30) !important;
  border-radius: 4px;
}

/* === Reduced-motion guards for the new grid animations === */
@media (prefers-reduced-motion: reduce) {
  body::before, .page-hero::before { animation: none !important; }
}

/* === Print stylesheet — flip back to light for printable docs === */
@media print {
  body { background: white !important; color: black !important; }
  body::before, .page-hero::before, .bg-card::after { display: none !important; }
  * { box-shadow: none !important; text-shadow: none !important; }
}

/* ============================================================
   SECTION REPAINT — bulldoze every legacy light surface
   ============================================================
   Per-section CSS files load AFTER this one in some pages and
   set `background: var(--c-white)` etc. The token swap above
   handles --c-bg / --c-card / --c-line, but --c-white stays
   near-white because it's also used for text-on-dark. So we
   explicitly !important-override every section background that
   directly references --c-white.

   Pair this with text colour rules so anything that WAS dark
   text-on-light (designed for the old theme) flips to legible
   light-text-on-dark.
   ============================================================ */

/* Sections that were full-bleed white OR used gradients ending in white.
   Add new IDs here whenever a section is built that uses `--c-white` for
   background — otherwise it'll be a bright island on the dark theme. */
#services,
#about,
#testimonials,
#portfolio,
#features,
#crm-showcase,
#vs-comparison,
#what-is-crm,
#pricing,
#flat-pricing,
#faq,
#contact,
#process,
#crm-explainer,
.crm-explainer-block {
  background: linear-gradient(180deg, #050b18 0%, #0a1428 100%) !important;
  border-top-color: rgba(0, 240, 255, 0.10) !important;
  color: #e2e8f0 !important;
}
#services > .container,
#about > .container,
#testimonials > .container,
#portfolio > .container,
#features > .container,
#crm-showcase > .container { position: relative; z-index: 2; }

/* Card-shaped containers that were white */
.contact-form-wrap,
.faq-item,
.crm-card,
.crm-explainer-block,
.vs-mobile-card,
.vs-cell-pos,
.vs-cell-neg,
.about-fact,
.about-card,
.case-study-inner,
.portfolio-card {
  background: rgba(15, 30, 54, 0.78) !important;
  border-color: rgba(0, 240, 255, 0.18) !important;
  color: #e2e8f0 !important;
}

/* Text inside repainted sections — force light, override per-section
   navy/black text colours that assumed a white background underneath. */
#about *:not(.btn):not(.eyebrow):not(.cyber-term):not(.gradient-text):not(em):not([class*="gradient"]),
#services *:not(.btn):not(.eyebrow):not(.cyber-term):not(.gradient-text):not(em):not([class*="gradient"]),
#testimonials *:not(.btn):not(.eyebrow):not(.cyber-term):not(.gradient-text):not(em):not([class*="gradient"]),
#portfolio *:not(.btn):not(.eyebrow):not(.cyber-term):not(.gradient-text):not(em):not([class*="gradient"]),
#features *:not(.btn):not(.eyebrow):not(.cyber-term):not(.gradient-text):not(em):not([class*="gradient"]) {
  color: inherit;
}

/* Headings inside repainted sections — pure white with subtle separation shadow.
   This wins over the older 07-about.css `.about-copy h2 { color: var(--c-navy) }`. */
#about h1, #about h2, #about h3, #about h4,
#services h1, #services h2, #services h3, #services h4,
#testimonials h1, #testimonials h2, #testimonials h3, #testimonials h4,
#portfolio h1, #portfolio h2, #portfolio h3, #portfolio h4,
#features h1, #features h2, #features h3, #features h4,
#crm-showcase h1, #crm-showcase h2, #crm-showcase h3, #crm-showcase h4,
#vs-comparison h1, #vs-comparison h2, #vs-comparison h3, #vs-comparison h4,
#what-is-crm h1, #what-is-crm h2, #what-is-crm h3, #what-is-crm h4,
#pricing h1, #pricing h2, #pricing h3, #pricing h4,
#flat-pricing h1, #flat-pricing h2, #flat-pricing h3, #flat-pricing h4,
#faq h1, #faq h2, #faq h3, #faq h4,
#contact h1, #contact h2, #contact h3, #contact h4,
#process h1, #process h2, #process h3, #process h4,
.contact-form-wrap h1, .contact-form-wrap h2, .contact-form-wrap h3, .contact-form-wrap h4,
.faq-item h3, .faq-item h4,
.crm-card h3, .crm-card h4,
.crm-explainer-block h1, .crm-explainer-block h2, .crm-explainer-block h3, .crm-explainer-block h4 {
  color: #f8fafc !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* Paragraphs inside repainted sections — slate-300 with no shadow */
#about p, #about li,
#services p, #services li,
#testimonials p, #testimonials li,
#portfolio p, #portfolio li,
#features p, #features li,
#crm-showcase p, #crm-showcase li,
#vs-comparison p, #vs-comparison li,
#what-is-crm p, #what-is-crm li,
#pricing p, #pricing li,
#flat-pricing p, #flat-pricing li,
#faq p, #faq li,
#contact p, #contact li,
#process p, #process li,
.contact-form-wrap p, .contact-form-wrap li,
.faq-item p, .faq-item li,
.crm-card p, .crm-card li,
.crm-explainer-block p, .crm-explainer-block li,
.vs-mobile-card p, .vs-mobile-card li,
.vs-positioning,
.about-copy p, .about-copy li,
.about-fact p, .about-fact li {
  color: #cbd5e1 !important;
}

/* About page: navy/black heading colours from 07-about.css */
.about-copy .eyebrow,
.about-copy h2,
.about-fact-key,
.about-fact-value {
  color: #f8fafc !important;
}
.about-copy p strong {
  color: var(--c-yellow) !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
}

/* === Cyber-title // marker — tone down so it doesn't compete with the heading === */
.cyber-title::before {
  opacity: 0.55 !important;
  font-size: 0.85em !important;
}

/* === Glitch effect — tone down opacity + lengthen cycles so it's flavour not noise === */
.cyber-glitch::before,
.cyber-glitch::after {
  opacity: 0.45 !important;
}
@keyframes cyber-glitch-1 {
  0%, 94%, 100% { transform: translate(0, 0); opacity: 0; }
  96% { transform: translate(-2px, -1px); opacity: 0.55; }
  98% { transform: translate(1px,  1px); opacity: 0.40; }
}
@keyframes cyber-glitch-2 {
  0%, 92%, 100% { transform: translate(0, 0); opacity: 0; }
  94% { transform: translate(2px, 1px); opacity: 0.55; }
  96% { transform: translate(-1px, -1px); opacity: 0.35; }
}

/* === Gradient text fallback — if for any reason the gradient mask fails,
   the underlying text still shows in a high-contrast solid colour. === */
.gradient-text {
  /* explicit yellow fallback BEFORE the gradient kicks in */
  color: var(--c-yellow);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.30);
}

/* === Body grid overlay — drop opacity so it doesn't compete with content === */
body::before {
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.025) 1px, transparent 1px) !important;
}

/* === Page hero grid overlay also lighter === */
.page-hero::before {
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px) !important;
}

/* === Cyber-term eyebrow blinking cursor — make it smaller + less aggressive === */
.cyber-term::after {
  width: 6px !important;
  height: 11px !important;
}

/* ============================================================
   BLOG — override the per-page inline styles in blog/*.html
   ============================================================
   The blog pages have inline <style> blocks that hardcode:
     - .page-hero h1 { color: var(--c-navy) }  (invisible on dark)
     - .blog-card { background: var(--c-white) }  (white on white)
     - .blog-card h2 { color: var(--c-navy) }
     - .blog-card-link, .blog-card-meta colours
   All of these were designed for the original light theme.
   We force them dark + readable here.
   ============================================================ */

.page-hero h1,
.blog-card h2,
.blog-card h2 a {
  color: #f8fafc !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.page-hero h1 em.gradient-text,
.page-hero h1 .gradient-text {
  text-shadow: none !important; /* gradient text handles its own depth */
}
.page-hero p {
  color: #cbd5e1 !important;
}

.blog-card {
  background: rgba(15, 30, 54, 0.78) !important;
  border-color: rgba(0, 240, 255, 0.18) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out) !important;
}
@media (hover: hover) {
  .blog-card:hover {
    border-color: var(--c-cyan) !important;
    box-shadow:
      0 0 0 1px rgba(0, 240, 255, 0.25),
      0 0 24px rgba(0, 240, 255, 0.18),
      0 12px 32px rgba(0, 0, 0, 0.45) !important;
    transform: translateY(-3px) !important;
  }
}

.blog-card h2 a {
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.blog-card h2 a:hover {
  color: var(--c-yellow) !important;
  border-bottom-color: var(--c-yellow) !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
}

.blog-card-meta,
.blog-card-meta span {
  color: #94a3b8 !important;
}
.blog-card-meta span + span::before {
  color: rgba(0, 240, 255, 0.35) !important;
}

.blog-card-excerpt {
  color: #cbd5e1 !important;
}

.blog-card-link {
  color: var(--c-cyan) !important;
  border-bottom-color: var(--c-cyan) !important;
  text-shadow: 0 0 6px var(--c-cyan-glow);
}
.blog-card-link:hover {
  color: var(--c-yellow) !important;
  border-bottom-color: var(--c-yellow) !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
}

.home-link a,
.home-link {
  color: var(--c-cyan) !important;
}
.home-link a:hover {
  color: var(--c-yellow) !important;
}

/* ============================================================
   CONTRAST EXTENSIONS — round 2
   Audit caught these remaining dark-on-dark + bright-white-island
   bugs. Treated as the "single biggest win" — one block fixes ~15.
   ============================================================ */

/* === Form inputs: dark surface + light text + cyan focus glow === */
.form-field input,
.form-field select,
.form-field textarea,
input.input,
select.input,
textarea.input,
.contact-form-wrap input,
.contact-form-wrap select,
.contact-form-wrap textarea {
  background: rgba(15, 30, 54, 0.65) !important;
  color: #e2e8f0 !important;
  border-color: rgba(0, 240, 255, 0.25) !important;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  background: rgba(15, 30, 54, 0.85) !important;
  border-color: var(--c-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.18), 0 0 18px var(--c-cyan-glow) !important;
  outline: none !important;
  color: #f8fafc !important;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: #64748b !important; }
.form-field label { color: #cbd5e1 !important; }

/* === Extended card-repaint — covers everything the first pass missed === */
.pricing-card,
.pricing-teaser-card,
.service-teaser-card,
.philosophy-proof-card,
.workflow-step,
.feature-list li,
.status-card,
.incidents-empty,
.changelog-entry,
.compare-table,
.vs-table,
.comparison-box,
.trust-block,
.trust-stat,
.hero-stat-card,
.legal-page {
  background: rgba(15, 30, 54, 0.78) !important;
  border-color: rgba(0, 240, 255, 0.18) !important;
  color: #e2e8f0 !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* === Headings inside repainted cards — pure white + subtle shadow === */
.faq-item summary,
.faq-item h3,
.faq-item h4,
.trust-block-body h3,
.trust-block h3,
.trust-block h4,
.comparison-box strong,
.comparison-box h3,
.comparison-box h4,
.changelog-entry h3,
.changelog-entry h4,
.vs-table th,
.workflow-step h3,
.workflow-step h4,
.pricing-card h3,
.pricing-card h4,
.legal-page h1,
.legal-page h2,
.legal-page h3 {
  color: #f8fafc !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* === Body copy inside repainted cards === */
.comparison-box,
.comparison-box p,
.workflow-step p,
.pricing-card p,
.pricing-card li,
.faq-item p,
.faq-item li,
.legal-page p,
.legal-page li {
  color: #cbd5e1 !important;
}

/* === Strong/em accents inside legal + comparison blocks === */
.legal-page strong,
.comparison-box strong {
  color: var(--c-yellow) !important;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.30);
}

/* === Sub-nav (services + crm long pages) dark glass with cyan accent === */
.page-subnav {
  background: rgba(5, 11, 24, 0.85) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid rgba(0, 240, 255, 0.18) !important;
}
.page-subnav a {
  color: #94a3b8 !important;
}
.page-subnav a:hover {
  color: var(--c-cyan) !important;
  text-shadow: 0 0 6px var(--c-cyan-glow);
}
.page-subnav a.is-spy-active {
  color: var(--c-yellow) !important;
  border-bottom-color: var(--c-yellow) !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
}

/* === Status page footer links + read-our-SLO callout === */
.status-footer-block a,
.status-footer-section a {
  color: var(--c-cyan) !important;
  text-shadow: 0 0 6px var(--c-cyan-glow);
}
.status-footer-block a:hover,
.status-footer-section a:hover {
  color: var(--c-yellow) !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
}

/* === Blog comparison boxes (used in 8 article pages) === */
.comparison-box {
  background: rgba(15, 30, 54, 0.78) !important;
  border-left: 3px solid var(--c-cyan) !important;
  border-radius: 6px;
}

/* === "Back to blog" link === */
.back-to-blog,
.back-to-blog a {
  color: var(--c-cyan) !important;
  text-shadow: 0 0 6px var(--c-cyan-glow);
}
.back-to-blog a:hover {
  color: var(--c-yellow) !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
}

/* === Btn-ghost — was navy outline + navy text, invisible on dark.
   Flip to cyan outline + cyan text + yellow hover. === */
.btn-ghost {
  color: var(--c-cyan) !important;
  border-color: var(--c-cyan) !important;
  text-shadow: 0 0 6px var(--c-cyan-glow);
}
.btn-ghost:hover {
  background: var(--c-cyan) !important;
  color: #050b18 !important;
  border-color: var(--c-cyan) !important;
  box-shadow: 0 0 18px var(--c-cyan-glow);
  text-shadow: none;
}
.btn-ghost:focus-visible {
  outline-color: var(--c-yellow) !important;
}
/* btn-ghost-light:hover used to flip to white background + navy text.
   On the dark theme this kills the cyberpunk feel — switch hover to cyan. */
.btn-ghost-light:hover {
  background: var(--c-cyan) !important;
  color: #050b18 !important;
  border-color: var(--c-cyan) !important;
  box-shadow: 0 0 18px var(--c-cyan-glow);
}

/* === Process connector dashed line — was navy@0.3, invisible on dark === */
.process-steps::before {
  background-image:
    linear-gradient(90deg, rgba(0, 240, 255, 0.25) 0%, rgba(0, 240, 255, 0.25) 50%, transparent 50%, transparent 100%) !important;
  border-color: rgba(0, 240, 255, 0.25) !important;
}

/* === VS-table — bright-white table on services/crm comparison sections === */
.vs-table { background: transparent !important; }
.vs-table td,
.vs-table th {
  background: rgba(15, 30, 54, 0.62) !important;
  color: #e2e8f0 !important;
  border-color: rgba(0, 240, 255, 0.12) !important;
}
.vs-table thead th {
  color: var(--c-cyan) !important;
  text-shadow: 0 0 6px var(--c-cyan-glow);
  background: rgba(0, 240, 255, 0.06) !important;
}
.vs-cell-pos { color: #34d399 !important; }
.vs-cell-neg { color: #f87171 !important; }

/* Blog article pages — body content typography on dark */
article.blog-post,
.blog-post,
.blog-content {
  color: #e2e8f0;
}
.blog-post h1, .blog-post h2, .blog-post h3, .blog-post h4,
.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4 {
  color: #f8fafc !important;
}
.blog-post p, .blog-content p,
.blog-post li, .blog-content li {
  color: #cbd5e1 !important;
}
.blog-post a, .blog-content a {
  color: var(--c-cyan) !important;
  text-decoration: underline;
  text-decoration-color: rgba(0, 240, 255, 0.45);
  text-underline-offset: 3px;
}
.blog-post a:hover, .blog-content a:hover {
  color: var(--c-yellow) !important;
  text-decoration-color: var(--c-yellow);
}
.blog-post blockquote, .blog-content blockquote {
  border-left: 3px solid var(--c-cyan) !important;
  background: rgba(0, 240, 255, 0.04);
  color: #e2e8f0 !important;
  padding: 1rem 1.5rem;
  border-radius: 4px;
}
.blog-post code, .blog-content code,
.blog-post pre, .blog-content pre {
  background: rgba(0, 0, 0, 0.45) !important;
  color: var(--c-cyan) !important;
  border: 1px solid rgba(0, 240, 255, 0.22);
  font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
}

/* ============================================================
   HEADER + FOOTER — dark cyberpunk treatment
   Overrides 02-nav.css + 09-footer.css to flip the sticky
   header into a dark glass strip with neon-cyan active link
   state and a subtle pulse on the logo wordmark.
   ============================================================ */

#header {
  background: rgba(5, 11, 24, 0.85) !important;
  border-bottom: 1px solid rgba(0, 240, 255, 0.18) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(0, 240, 255, 0.10),
    0 12px 32px rgba(0, 0, 0, 0.50) !important;
  position: sticky;
  isolation: isolate;
}
/* Thin animated cyan beam under the header */
#header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 240, 255, 0.45) 20%,
    rgba(0, 240, 255, 0.85) 50%,
    rgba(0, 240, 255, 0.45) 80%,
    transparent 100%);
  background-size: 200% 100%;
  animation: header-beam 6s linear infinite;
  pointer-events: none;
}
@keyframes header-beam {
  0%   { background-position: -100% 50%; }
  100% { background-position: 200% 50%; }
}

#header .logo-name {
  color: #f8fafc !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.30);
}
#header .logo-tagline {
  color: var(--c-cyan) !important;
  text-shadow: 0 0 6px var(--c-cyan-glow);
}
#header .logo-mark {
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.50));
  animation: logo-pulse 4s ease-in-out infinite;
}
@keyframes logo-pulse {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.50)); }
  50%      { filter: drop-shadow(0 0 24px rgba(0, 240, 255, 0.65)); }
}

/* Nav links */
#header .nav a {
  color: #94a3b8 !important;
  font-family: var(--f-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 0.2s var(--ease-out), text-shadow 0.2s var(--ease-out);
  position: relative;
}
#header .nav a:hover {
  color: var(--c-cyan) !important;
  text-shadow: 0 0 8px var(--c-cyan-glow);
}
/* Active page link gets a neon underline */
#header .nav a[data-page-link][aria-current="page"],
body[data-page="home"]     #header a[data-page-link="home"],
body[data-page="services"] #header a[data-page-link="services"],
body[data-page="crm"]      #header a[data-page-link="crm"],
body[data-page="work"]     #header a[data-page-link="work"],
body[data-page="blog"]     #header a[data-page-link="blog"],
body[data-page="about"]    #header a[data-page-link="about"] {
  color: var(--c-yellow) !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.55);
}
body[data-page="home"]     #header a[data-page-link="home"]::after,
body[data-page="services"] #header a[data-page-link="services"]::after,
body[data-page="crm"]      #header a[data-page-link="crm"]::after,
body[data-page="work"]     #header a[data-page-link="work"]::after,
body[data-page="blog"]     #header a[data-page-link="blog"]::after,
body[data-page="about"]    #header a[data-page-link="about"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px;
  background: var(--c-yellow);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.65);
}

/* Header CTA button stays yellow, but neon-flicker on hover */
#header .header-cta .btn-yellow {
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.45), 0 0 16px rgba(255, 215, 0, 0.30);
}
#header .header-cta .btn-yellow:hover {
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.85), 0 0 28px rgba(255, 215, 0, 0.55);
}

/* Mobile hamburger gets cyan bars */
#header .nav-toggle span { background: var(--c-cyan) !important; box-shadow: 0 0 6px var(--c-cyan-glow); }

/* Mobile menu drawer — dark glass when open, but bullet-proof HIDDEN by default.
   The original 02-nav.css uses transform: translateY(-110%) to push it off-screen,
   but combining that with backdrop-filter creates a new stacking context that on
   some Chromium-Android versions leaks the dark glass into the area just above
   the header (visible as a dark strip + the last nav item "About" peeking through).
   Belt-and-braces: stronger translate + visibility:hidden + pointer-events:none
   when not open. is-open class restores everything. */
@media (max-width: 960px) {
  #header .nav {
    background: rgba(5, 11, 24, 0.95) !important;
    border-top: 1px solid rgba(0, 240, 255, 0.18);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transform: translateY(-200%) !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.25s var(--ease-out),
      opacity 0.20s var(--ease-out),
      visibility 0s linear 0.25s;
  }
  #header .nav.is-open {
    transform: translateY(0) !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition:
      transform 0.25s var(--ease-out),
      opacity 0.20s var(--ease-out),
      visibility 0s linear 0s;
  }
}

/* === FOOTER === */
#footer {
  background: linear-gradient(180deg, #050b18 0%, #02060f 100%) !important;
  color: #94a3b8 !important;
  border-top: 1px solid rgba(0, 240, 255, 0.18);
  position: relative;
  overflow: hidden;
}
/* Subtle grid behind the footer for matching atmosphere */
#footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 50% 100%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 100%, black 30%, transparent 90%);
  opacity: 0.6;
  z-index: 0;
}
#footer > .container { position: relative; z-index: 1; }

#footer h4 {
  color: var(--c-cyan) !important;
  text-shadow: 0 0 8px var(--c-cyan-glow);
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
#footer a {
  color: #cbd5e1 !important;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
#footer a:hover {
  color: var(--c-yellow) !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.55);
}
#footer .footer-wordmark {
  color: #f8fafc !important;
}
#footer .footer-tagline {
  color: #94a3b8 !important;
}
#footer .footer-bottom {
  border-top: 1px solid rgba(0, 240, 255, 0.10) !important;
  color: #64748b !important;
  position: relative;
}
/* Tiny "system online" pulse in the footer bottom */
#footer .footer-bottom::before {
  content: "● SYSTEM_ONLINE";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #34d399;
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.55);
  animation: footer-status-pulse 2.4s ease-in-out infinite;
}
@keyframes footer-status-pulse {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}
@media (max-width: 720px) {
  #footer .footer-bottom::before { position: static; transform: none; display: block; margin-bottom: 8px; }
}

/* === Skip link gets neon treatment === */
.skip-link {
  background: var(--c-cyan) !important;
  color: #050b18 !important;
  box-shadow: 0 0 24px var(--c-cyan-glow);
}

/* ============================================================
   REDUCED MOTION GUARD
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .cyber-grid::before,
  .cyber-scanline,
  .cyber-glitch::before,
  .cyber-glitch::after,
  .circuit-border::before,
  .cyber-boot > *,
  .cyber-pulse-line,
  .cyber-term::after {
    animation: none !important;
  }
  .cyber-boot > * { opacity: 1 !important; transform: none !important; filter: none !important; }
}