/* ============================================================
   AFTERHOURS — TRON / MATRIX / 80s GRID LAYER
   Replaces the standard visual layer with:
   · Perspective receding grid floor
   · Matrix rain digital characters
   · CRT scanline + phosphor glow
   · Neon wireframe borders
   · Terminal text effects
   ============================================================ */

/* ── Base: deep black, no bleed ── */
html, body {
  background: #000005 !important;
}

/* ══════════════════════════════════════════════════════════
   CRT PHOSPHOR SCREEN EFFECT
   Full-viewport fixed overlay — scanlines + vignette
   ══════════════════════════════════════════════════════════ */
body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 9500 !important;
  background:
    /* Scanlines */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.18) 2px,
      rgba(0,0,0,0.18) 4px
    ),
    /* CRT vignette */
    radial-gradient(ellipse 100% 100% at 50% 50%,
      transparent 55%,
      rgba(0,0,10,0.7) 100%
    ) !important;
  mix-blend-mode: normal !important;
  animation: none !important;
}

/* Phosphor afterglow — static tint only (no animation = no repaints) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9400;
  background: rgba(255,102,0,0.012);
  animation: none;
}

/* ══════════════════════════════════════════════════════════
   MATRIX RAIN + TRON GRID CANVAS
   ══════════════════════════════════════════════════════════ */
#tron-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

/* ══════════════════════════════════════════════════════════
   NAV — Tron wireframe style
   ══════════════════════════════════════════════════════════ */
.nav {
  background: rgba(0,0,5,0.92) !important;
  border-bottom: 1px solid rgba(89,0,255,0.6) !important;
  box-shadow: 0 1px 0 rgba(89,0,255,0.15), 0 0 40px rgba(89,0,255,0.08) !important;
}
.nav.scrolled {
  background: rgba(0,0,5,0.97) !important;
  box-shadow: 0 1px 0 rgba(89,0,255,0.4), 0 0 60px rgba(89,0,255,0.12) !important;
}
.nav__wordmark {
  text-shadow: 0 0 12px rgba(89,0,255,0.8), 0 0 30px rgba(89,0,255,0.4) !important;
}
.nav__links a {
  color: rgba(100,120,255,0.8) !important;
}
.nav__links a:hover {
  color: #fff !important;
  text-shadow: 0 0 8px rgba(89,0,255,1), 0 0 20px rgba(89,0,255,0.6) !important;
}

/* ══════════════════════════════════════════════════════════
   HERO — Tron grid floor + neon glow
   ══════════════════════════════════════════════════════════ */
.hero {
  background: transparent !important;
  position: relative;
  overflow: hidden;
}

/* Tron perspective floor grid behind hero content */
.hero__tron-floor {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 65%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.hero__tron-floor canvas {
  width: 100%;
  height: 100%;
}

/* Hero headline — electric neon */
.hero__headline {
  color: #fff !important;
  text-shadow:
    0 0 10px rgba(89,0,255,0.9),
    0 0 30px rgba(89,0,255,0.6),
    0 0 80px rgba(89,0,255,0.25) !important;
  position: relative;
  z-index: 5;
}
.hero__headline .blue,
.hero__headline span[style*="color:var(--blue)"],
.hero__headline span[style*="color: var(--blue)"] {
  color: #4466ff !important;
  text-shadow:
    0 0 6px #4466ff,
    0 0 20px rgba(89,0,255,0.9),
    0 0 60px rgba(89,0,255,0.5),
    0 0 120px rgba(89,0,255,0.2) !important;
}

/* Subtext — terminal green or ice blue */
.hero__sub {
  color: rgba(140,160,255,0.85) !important;
  font-family: 'Space Mono', monospace !important;
  text-shadow: 0 0 6px rgba(89,0,255,0.4) !important;
  position: relative;
  z-index: 5;
}

/* CTA buttons — Tron wireframe */
.btn-primary {
  background: transparent !important;
  border: 1px solid #5900FF !important;
  color: #fff !important;
  box-shadow:
    0 0 12px rgba(89,0,255,0.7),
    inset 0 0 12px rgba(89,0,255,0.15) !important;
  text-shadow: 0 0 8px rgba(89,0,255,0.8) !important;
}
.btn-primary:hover {
  background: rgba(89,0,255,0.18) !important;
  box-shadow:
    0 0 24px rgba(89,0,255,1),
    0 0 60px rgba(89,0,255,0.4),
    inset 0 0 20px rgba(89,0,255,0.2) !important;
}
.btn-outline {
  border-color: rgba(89,0,255,0.5) !important;
  color: rgba(140,160,255,0.9) !important;
  box-shadow: 0 0 8px rgba(89,0,255,0.3) !important;
}
.btn-outline:hover {
  border-color: #5900FF !important;
  color: #fff !important;
  box-shadow: 0 0 20px rgba(89,0,255,0.7) !important;
}
.btn-red {
  background: transparent !important;
  border-color: #FF3115 !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(255,49,21,0.7), inset 0 0 12px rgba(255,49,21,0.1) !important;
}
.btn-red:hover {
  box-shadow: 0 0 32px rgba(255,49,21,0.9), 0 0 80px rgba(255,49,21,0.3) !important;
}

/* ══════════════════════════════════════════════════════════
   SECTION LABELS — Tron terminal style
   ══════════════════════════════════════════════════════════ */
.sec-label {
  color: #5900FF !important;
  text-shadow: 0 0 8px rgba(89,0,255,0.8), 0 0 20px rgba(89,0,255,0.4) !important;
  letter-spacing: 0.28em !important;
}
.sec-label::after {
  background: linear-gradient(90deg, rgba(89,0,255,0.8), transparent) !important;
  box-shadow: 0 0 4px rgba(89,0,255,0.5) !important;
  height: 1px !important;
}

/* ══════════════════════════════════════════════════════════
   CARDS — Tron wireframe with corner brackets
   ══════════════════════════════════════════════════════════ */
.service-card,
.pricing-tier,
.market-item {
  background: rgba(0,0,10,0.7) !important;
  border-color: rgba(89,0,255,0.35) !important;
  position: relative;
}

/* Corner bracket marks on cards */
.service-card::before,
.service-card::after {
  content: '' !important;
  position: absolute !important;
  width: 12px !important; height: 12px !important;
  border-color: #5900FF !important;
  border-style: solid !important;
  pointer-events: none !important;
  filter: drop-shadow(0 0 4px rgba(89,0,255,0.9)) !important;
  z-index: 2 !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: none !important;
}
.service-card::before {
  top: -1px; left: -1px;
  border-width: 2px 0 0 2px !important;
}
.service-card::after {
  top: -1px; right: -1px;
  border-width: 2px 2px 0 0 !important;
}
.service-card:hover {
  border-color: rgba(89,0,255,0.8) !important;
  box-shadow:
    0 0 0 1px rgba(89,0,255,0.4),
    0 0 30px rgba(89,0,255,0.2),
    inset 0 0 20px rgba(89,0,255,0.06) !important;
  background: rgba(0,5,30,0.85) !important;
}

/* Card number label — terminal */
.service-card__num {
  color: #5900FF !important;
  text-shadow: 0 0 6px rgba(89,0,255,0.8) !important;
}
.service-card__headline {
  color: #fff !important;
  text-shadow: 0 0 8px rgba(89,0,255,0.4) !important;
}

/* Pricing tier featured */
.pricing-tier--featured {
  background: rgba(0,5,35,0.85) !important;
  border-color: rgba(89,0,255,0.7) !important;
  box-shadow: 0 0 30px rgba(89,0,255,0.15), inset 0 0 30px rgba(89,0,255,0.05) !important;
}
.pricing-tier__name { color: #4466ff !important; text-shadow: 0 0 6px rgba(89,0,255,0.7) !important; }
.pricing-tier__amount {
  color: #fff !important;
  text-shadow: 0 0 12px rgba(89,0,255,0.6) !important;
}

/* Market items */
.market-item__rank { color: #5900FF !important; text-shadow: 0 0 5px rgba(89,0,255,0.7) !important; }
.market-item__city { text-shadow: 0 0 6px rgba(89,0,255,0.3) !important; }
.market-item__status--live {
  border-color: rgba(89,0,255,0.8) !important;
  color: #4466ff !important;
  box-shadow: 0 0 8px rgba(89,0,255,0.4) !important;
}

/* ══════════════════════════════════════════════════════════
   DIVIDER LINES — neon glow rules
   ══════════════════════════════════════════════════════════ */
hr.rule {
  border-color: rgba(89,0,255,0.35) !important;
  box-shadow: 0 0 4px rgba(89,0,255,0.3) !important;
}
.services-grid,
.pricing-grid,
.markets-grid {
  border-color: rgba(89,0,255,0.3) !important;
  box-shadow: 0 0 20px rgba(89,0,255,0.08) !important;
}
.service-card,
.pricing-tier,
.market-item {
  border-right-color: rgba(89,0,255,0.25) !important;
  border-bottom-color: rgba(89,0,255,0.25) !important;
}

/* ══════════════════════════════════════════════════════════
   TICKER — Matrix terminal style
   ══════════════════════════════════════════════════════════ */
.ticker-wrap {
  border-color: rgba(89,0,255,0.4) !important;
  background: rgba(0,0,8,0.95) !important;
  box-shadow: 0 0 20px rgba(89,0,255,0.1) !important;
}
.ticker-item { color: rgba(80,100,255,0.7) !important; }
.ticker-blue { color: #4466ff !important; text-shadow: 0 0 6px rgba(89,0,255,0.6) !important; }
.ticker-sep { color: rgba(89,0,255,0.6) !important; }

/* ══════════════════════════════════════════════════════════
   PROOF STATS — big neon numbers
   ══════════════════════════════════════════════════════════ */
.proof-stat__num {
  color: #fff !important;
  text-shadow:
    0 0 8px rgba(89,0,255,0.9),
    0 0 30px rgba(89,0,255,0.5),
    0 0 80px rgba(89,0,255,0.2) !important;
}
.proof-stat__prefix,
.proof-stat__label { color: rgba(89,0,255,0.8) !important; }
.proof-strip {
  border-color: rgba(89,0,255,0.4) !important;
  background: rgba(0,0,8,0.95) !important;
}
.proof-strip::before {
  background: radial-gradient(ellipse 80% 100% at 50% 50%, rgba(89,0,255,0.06) 0%, transparent 70%) !important;
}

/* ══════════════════════════════════════════════════════════
   NOTIF WINDOW — Tron OS window
   ══════════════════════════════════════════════════════════ */
.notif-window {
  background: rgba(0,2,20,0.95) !important;
  color: #4466ff !important;
  border-color: rgba(89,0,255,0.6) !important;
  box-shadow: 6px 6px 0 rgba(89,0,255,0.5), 0 0 30px rgba(89,0,255,0.2) !important;
}
.notif-window__bar {
  background: rgba(0,5,40,0.98) !important;
  color: #4466ff !important;
  border-bottom-color: rgba(89,0,255,0.4) !important;
  text-shadow: 0 0 6px rgba(89,0,255,0.7) !important;
}
.notif-msg { color: rgba(140,160,255,0.9) !important; }
.notif-new { color: #5900FF !important; text-shadow: 0 0 4px rgba(89,0,255,0.8) !important; }

/* ══════════════════════════════════════════════════════════
   Y2K MOCK SCREEN — terminal dark
   ══════════════════════════════════════════════════════════ */
[style*="background:#080810"],
[style*="background: #080810"] {
  background: rgba(0,2,15,0.95) !important;
  border-color: rgba(89,0,255,0.4) !important;
  box-shadow: 0 0 20px rgba(89,0,255,0.12) !important;
}

/* ══════════════════════════════════════════════════════════
   GLITCH — more aggressive RGB split
   ══════════════════════════════════════════════════════════ */
.glitch::before { color: #FF3115 !important; }
.glitch::after  { color: #00ffff !important; } /* cyan for Matrix feel */

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
.footer {
  background: rgba(0,0,5,0.98) !important;
  border-top-color: rgba(89,0,255,0.4) !important;
}
.footer::before {
  background: linear-gradient(90deg, transparent, rgba(89,0,255,0.7), rgba(140,80,255,0.2), rgba(89,0,255,0.7), transparent) !important;
}
.footer__colophon {
  color: rgba(89,0,255,0.3) !important;
  text-shadow: 0 0 4px rgba(89,0,255,0.3) !important;
}

/* ══════════════════════════════════════════════════════════
   STATUS DOT — active pulse neon
   ══════════════════════════════════════════════════════════ */
.status-dot {
  background: #5900FF !important;
  box-shadow: 0 0 6px #5900FF, 0 0 12px rgba(89,0,255,0.6) !important;
}

/* ══════════════════════════════════════════════════════════
   SCROLL PROGRESS — dual neon
   ══════════════════════════════════════════════════════════ */
#scroll-progress {
  background: linear-gradient(90deg, #5900FF, #00ffff, #FF3115) !important;
  box-shadow: 0 0 8px rgba(89,0,255,0.8) !important;
}

/* ══════════════════════════════════════════════════════════
   SECTION BACKGROUNDS — faint grid texture on all sections
   ══════════════════════════════════════════════════════════ */
.section, .proof-strip, .hero, .ticker-wrap, .footer {
  position: relative;
}
/* Section grid removed — canvas handles the grid for perf */
.section > * { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════
   HEADLINE GLOW — all section headings
   ══════════════════════════════════════════════════════════ */
.section h2, .section h3 {
  color: #fff !important;
}
.section h2 span[style*="color:var(--blue)"],
.section h2 span[style*="color: var(--blue)"],
h2 .blue {
  color: #4466ff !important;
  text-shadow: 0 0 10px rgba(89,0,255,0.8), 0 0 30px rgba(89,0,255,0.4) !important;
}
.section h2 span[style*="color:var(--red)"],
.section h2 span[style*="color: var(--red)"] {
  color: #FF3115 !important;
  text-shadow: 0 0 10px rgba(255,49,21,0.8), 0 0 30px rgba(255,49,21,0.4) !important;
}
.section p { color: rgba(140,160,220,0.85) !important; }

/* ══════════════════════════════════════════════════════════
   MARKETS BIG NUMBER — neon
   ══════════════════════════════════════════════════════════ */
.markets-section [style*="rgba(89,0,255,0.04)"] {
  color: rgba(89,0,255,0.06) !important;
  text-shadow: 0 0 60px rgba(89,0,255,0.15) !important;
}

/* ══════════════════════════════════════════════════════════
   CORNER MARKS — neon glow
   ══════════════════════════════════════════════════════════ */
.corner-marks::before, .corner-marks::after,
.corner-marks-bl, .corner-marks-br {
  border-color: rgba(89,0,255,0.6) !important;
  filter: drop-shadow(0 0 3px rgba(89,0,255,0.8)) !important;
}

/* ══════════════════════════════════════════════════════════
   PRICING BADGE
   ══════════════════════════════════════════════════════════ */
.pricing-tier__badge {
  background: #5900FF !important;
  box-shadow: 0 0 12px rgba(89,0,255,0.7) !important;
}

/* ══════════════════════════════════════════════════════════
   TERMINAL CURSOR BLINK — on spec bar
   ══════════════════════════════════════════════════════════ */
.hero__spec-bar::after {
  content: '_';
  font-family: 'Space Mono', monospace;
  color: #5900FF;
  text-shadow: 0 0 6px rgba(89,0,255,0.9);
  animation: cursor-blink 1s step-end infinite;
  margin-left: 4px;
}
@keyframes cursor-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ══════════════════════════════════════════════════════════
   BURNT ORANGE ACCENTS — #FF6600 throughout
   Layered on top of blue base: specific elements glow orange
   ══════════════════════════════════════════════════════════ */

/* Hero headline — orange-tinted glow on top of blue */
.hero__headline {
  text-shadow:
    0 0 10px rgba(255,102,0,0.5),
    0 0 30px rgba(89,0,255,0.5),
    0 0 80px rgba(255,102,0,0.15) !important;
}

/* Hero orange accent span — e.g. "WORK" word in orange */
.hero__headline .orange,
.hero__headline span[style*="color:var(--orange)"],
.hero__headline span[style*="color: var(--orange)"] {
  color: #FF6600 !important;
  text-shadow:
    0 0 8px #FF6600,
    0 0 24px rgba(255,102,0,0.9),
    0 0 60px rgba(255,102,0,0.5),
    0 0 120px rgba(255,102,0,0.2) !important;
}

/* Hero sub — orange tint */
.hero__sub {
  color: rgba(255,140,60,0.9) !important;
  text-shadow: 0 0 8px rgba(255,102,0,0.5), 0 0 20px rgba(255,102,0,0.2) !important;
}

/* Section labels — alternate between blue and orange */
.section:nth-child(even) .sec-label {
  color: #FF6600 !important;
  text-shadow: 0 0 8px rgba(255,102,0,0.8), 0 0 20px rgba(255,102,0,0.4) !important;
}
.section:nth-child(even) .sec-label::after {
  background: linear-gradient(90deg, rgba(255,102,0,0.8), transparent) !important;
  box-shadow: 0 0 4px rgba(255,102,0,0.5) !important;
}

/* Service card numbers — orange glow */
.service-card__num {
  color: #FF6600 !important;
  text-shadow: 0 0 8px rgba(255,102,0,0.9), 0 0 20px rgba(255,102,0,0.5) !important;
}

/* Service card hover — orange wireframe */
.service-card:hover {
  border-color: rgba(255,102,0,0.6) !important;
  box-shadow:
    0 0 0 1px rgba(255,102,0,0.35),
    0 0 30px rgba(255,102,0,0.15),
    inset 0 0 20px rgba(255,102,0,0.05) !important;
  background: rgba(20,5,0,0.85) !important;
}

/* Service card corner marks — orange on hover */
.service-card:hover::before,
.service-card:hover::after {
  border-color: #FF6600 !important;
  filter: drop-shadow(0 0 5px rgba(255,102,0,0.95)) !important;
}

/* Ticker — some items orange */
.ticker-blue:nth-child(3n+1) {
  color: #FF6600 !important;
  text-shadow: 0 0 6px rgba(255,102,0,0.7) !important;
}
.ticker-sep:nth-child(even) {
  color: rgba(255,102,0,0.5) !important;
}

/* Proof stat — first stat orange */
.proof-stat:first-child .proof-stat__num {
  text-shadow:
    0 0 8px rgba(255,102,0,0.9),
    0 0 30px rgba(255,102,0,0.5),
    0 0 80px rgba(255,102,0,0.2) !important;
  color: #FF6600 !important;
}
.proof-stat:first-child .proof-stat__prefix,
.proof-stat:first-child .proof-stat__label {
  color: rgba(255,102,0,0.8) !important;
}

/* CTA / btn-primary — orange variant */
.btn-primary {
  border-color: #FF6600 !important;
  box-shadow:
    0 0 14px rgba(255,102,0,0.7),
    inset 0 0 14px rgba(255,102,0,0.12) !important;
  text-shadow: 0 0 8px rgba(255,102,0,0.8) !important;
}
.btn-primary:hover {
  background: rgba(255,102,0,0.15) !important;
  box-shadow:
    0 0 28px rgba(255,102,0,1),
    0 0 70px rgba(255,102,0,0.4),
    inset 0 0 22px rgba(255,102,0,0.18) !important;
}

/* Notif window — orange accents */
.notif-window {
  border-color: rgba(255,102,0,0.45) !important;
  box-shadow: 6px 6px 0 rgba(255,102,0,0.35), 0 0 30px rgba(255,102,0,0.15) !important;
}
.notif-window__bar {
  background: rgba(20,4,0,0.98) !important;
  color: #FF6600 !important;
  border-bottom-color: rgba(255,102,0,0.35) !important;
  text-shadow: 0 0 6px rgba(255,102,0,0.7) !important;
}
.notif-new {
  color: #FF6600 !important;
  text-shadow: 0 0 5px rgba(255,102,0,0.9) !important;
}

/* Status dot — orange pulse */
.status-dot {
  background: #FF6600 !important;
  box-shadow: 0 0 6px #FF6600, 0 0 14px rgba(255,102,0,0.6) !important;
}

/* Scroll progress — now ends in orange */
#scroll-progress {
  background: linear-gradient(90deg, #5900FF, #FF6600, #FF3115) !important;
  box-shadow: 0 0 8px rgba(255,102,0,0.6) !important;
}

/* Pricing featured badge — orange */
.pricing-tier__badge {
  background: #FF6600 !important;
  box-shadow: 0 0 12px rgba(255,102,0,0.7) !important;
}

/* Market rank — orange accent on top 3 */
.market-item:nth-child(-n+3) .market-item__rank {
  color: #FF6600 !important;
  text-shadow: 0 0 6px rgba(255,102,0,0.8) !important;
}

/* Footer top rule — orange gradient */
.footer::before {
  background: linear-gradient(90deg, transparent, rgba(255,102,0,0.7), rgba(255,49,21,0.3), rgba(255,102,0,0.7), transparent) !important;
}

/* Terminal cursor blink — orange on spec bar */
.hero__spec-bar::after {
  color: #FF6600 !important;
  text-shadow: 0 0 6px rgba(255,102,0,0.9) !important;
}

/* CRT afterglow — warm tint instead of cold blue */
body::after {
  background: rgba(255,102,0,0.012) !important;
}

/* Section h2 orange spans */
.section h2 span[style*="color:var(--orange)"],
.section h2 span[style*="color: var(--orange)"],
h2 .orange {
  color: #FF6600 !important;
  text-shadow: 0 0 10px rgba(255,102,0,0.8), 0 0 30px rgba(255,102,0,0.4) !important;
}

/* ══════════════════════════════════════════════════════════
   NEON SIGN — hero headline
   Uniform font size, tube-glow look, flicker animation
   ══════════════════════════════════════════════════════════ */
.neon-sign {
  font-family: var(--font-display) !important;
  font-size: clamp(3.5rem, 9vw, 9rem) !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
  letter-spacing: 0.06em !important;
  color: #fff !important;
  text-shadow: none !important;
  margin-bottom: var(--s7) !important;
}

.neon-line {
  display: inline;
  color: #d0b0ff;
  text-shadow:
    0 0 4px #fff,
    0 0 10px rgba(140,80,255,0.9),
    0 0 28px rgba(89,0,255,0.8),
    0 0 60px rgba(89,0,255,0.45);
  animation: neon-flicker-blue 8s infinite;
}

.neon-line.neon-orange {
  color: #ff9944;
  text-shadow:
    0 0 4px #fff,
    0 0 10px rgba(255,130,50,0.95),
    0 0 28px rgba(255,102,0,0.85),
    0 0 60px rgba(255,102,0,0.5);
  animation: neon-flicker-orange 6s infinite;
}

/* Blue tube flicker */
@keyframes neon-flicker-blue {
  0%,100%  { opacity: 1; text-shadow: 0 0 4px #fff, 0 0 10px rgba(140,80,255,0.9), 0 0 28px rgba(89,0,255,0.8), 0 0 60px rgba(89,0,255,0.45); }
  3%       { opacity: 0.7; text-shadow: 0 0 2px #fff, 0 0 4px rgba(89,0,255,0.4); }
  5%       { opacity: 1; text-shadow: 0 0 4px #fff, 0 0 14px rgba(140,80,255,1),   0 0 36px rgba(89,0,255,0.9), 0 0 70px rgba(89,0,255,0.5); }
  32%      { opacity: 1; }
  33%      { opacity: 0.85; text-shadow: 0 0 3px #fff, 0 0 8px rgba(89,0,255,0.6); }
  34%      { opacity: 1; }
  60%      { opacity: 1; }
  61%      { opacity: 0.6; }
  62%      { opacity: 1; }
  80%      { opacity: 1; }
  81%      { opacity: 0.88; }
  82%      { opacity: 1; }
}

/* Orange tube flicker — slightly different rhythm */
@keyframes neon-flicker-orange {
  0%,100%  { opacity: 1; text-shadow: 0 0 4px #fff, 0 0 10px rgba(255,130,50,0.95), 0 0 28px rgba(255,102,0,0.85), 0 0 60px rgba(255,102,0,0.5); }
  8%       { opacity: 0.6; text-shadow: 0 0 2px #fff, 0 0 4px rgba(255,102,0,0.3); }
  9%       { opacity: 1; text-shadow: 0 0 4px #fff, 0 0 14px rgba(255,130,50,1),     0 0 38px rgba(255,102,0,0.9), 0 0 75px rgba(255,102,0,0.55); }
  45%      { opacity: 1; }
  46%      { opacity: 0.75; }
  47%      { opacity: 1; }
  70%      { opacity: 1; }
  71%      { opacity: 0.5; text-shadow: 0 0 2px #fff, 0 0 4px rgba(255,102,0,0.2); }
  72%      { opacity: 1; }
  73%      { opacity: 0.9; }
  74%      { opacity: 1; }
}

/* Override old hero__headline tron glow — neon-sign handles it now */
.neon-sign.hero__headline {
  text-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════
   NAV — alternating blue / orange link colors
   ══════════════════════════════════════════════════════════ */
.nav__links .nav-link-blue,
.nav__mobile .nav-link-blue {
  color: rgba(140,80,255,0.85) !important;
}
.nav__links .nav-link-blue:hover,
.nav__mobile .nav-link-blue:hover {
  color: #fff !important;
  text-shadow: 0 0 8px rgba(89,0,255,1), 0 0 20px rgba(89,0,255,0.6) !important;
}
.nav__links .nav-link-orange,
.nav__mobile .nav-link-orange {
  color: rgba(255,130,40,0.9) !important;
}
.nav__links .nav-link-orange:hover,
.nav__mobile .nav-link-orange:hover {
  color: #fff !important;
  text-shadow: 0 0 8px rgba(255,102,0,1), 0 0 20px rgba(255,102,0,0.6) !important;
}

/* ══════════════════════════════════════════════════════════
   NEON SIGN — centered in hero
   ══════════════════════════════════════════════════════════ */
.neon-sign {
  text-align: center !important;
  width: 100% !important;
}

/* ══════════════════════════════════════════════════════════
   MISSED CALL → PROFIT SIMULATOR
   ══════════════════════════════════════════════════════════ */

.simulator-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s7);
  align-items: start;
}
@media (max-width: 860px) {
  .simulator-wrap { grid-template-columns: 1fr; }
}

/* — Inputs panel — */
.sim-inputs {
  background: rgba(4,4,18,0.92);
  border: 1px solid rgba(89,0,255,0.3);
  padding: var(--s7);
}
.sim-inputs h3 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  text-shadow: 0 0 8px rgba(89,0,255,0.7);
  margin-bottom: var(--s6);
}

/* Preset scenario pills */
.sim-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s6);
}
.sim-preset-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid rgba(89,0,255,0.35);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
}
.sim-preset-btn:hover,
.sim-preset-btn.sim-preset--active {
  border-color: #FF6600;
  color: #FF6600;
  text-shadow: 0 0 6px rgba(255,102,0,0.7);
  box-shadow: 0 0 10px rgba(255,102,0,0.15);
}

/* Slider rows */
.sim-field {
  margin-bottom: var(--s6);
}
.sim-field-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s3);
}
.sim-field-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--body-muted);
}
.sim-field-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--paper);
  text-shadow: 0 0 8px rgba(255,255,255,0.3);
  min-width: 80px;
  text-align: right;
}
.sim-field-value.is-orange {
  color: #FF6600;
  text-shadow: 0 0 8px rgba(255,102,0,0.7);
}

/* Range input — custom neon track */
input[type="range"].sim-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: rgba(89,0,255,0.25);
  outline: none;
  cursor: pointer;
  position: relative;
}
input[type="range"].sim-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: #FF6600;
  box-shadow: 0 0 8px rgba(255,102,0,0.9), 0 0 20px rgba(255,102,0,0.4);
  cursor: pointer;
  transform: rotate(45deg);
}
input[type="range"].sim-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: #FF6600;
  box-shadow: 0 0 8px rgba(255,102,0,0.9);
  cursor: pointer;
  border: none;
  transform: rotate(45deg);
}
input[type="range"].sim-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 14px rgba(255,102,0,1), 0 0 30px rgba(255,102,0,0.5);
}
.sim-range-track {
  position: relative;
  padding: 8px 0;
}
.sim-range-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #5900FF, #FF6600);
  pointer-events: none;
  transform: translateY(-50%);
  box-shadow: 0 0 6px rgba(255,102,0,0.5);
}

/* — Results panel — */
.sim-results {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.sim-results-header {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FF6600;
  text-shadow: 0 0 8px rgba(255,102,0,0.7);
  margin-bottom: var(--s3);
}

.sim-result-card {
  background: rgba(4,4,18,0.92);
  border: 1px solid rgba(89,0,255,0.2);
  padding: var(--s5) var(--s6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.sim-result-card.sim-result--positive {
  border-color: rgba(255,102,0,0.5);
  box-shadow: 0 0 20px rgba(255,102,0,0.08);
}
.sim-result-card.sim-result--negative {
  border-color: rgba(255,49,21,0.4);
}
.sim-result-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.sim-result-num {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--paper);
  text-shadow: 0 0 8px rgba(255,255,255,0.25);
}
.sim-result-card.sim-result--positive .sim-result-num {
  color: #FF6600;
  text-shadow: 0 0 10px rgba(255,102,0,0.8), 0 0 30px rgba(255,102,0,0.3);
}
.sim-result-card--featured {
  border-color: rgba(255,102,0,0.6) !important;
  background: rgba(15,5,0,0.95);
  box-shadow: 0 0 30px rgba(255,102,0,0.12);
}
.sim-result-card--featured .sim-result-num {
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  color: #FF6600 !important;
  text-shadow: 0 0 12px rgba(255,102,0,0.9), 0 0 40px rgba(255,102,0,0.4) !important;
}

/* Verdict box */
.sim-verdict {
  padding: var(--s6);
  border: 1px solid rgba(89,0,255,0.2);
  background: rgba(4,4,18,0.95);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--body-muted);
  margin-top: var(--s4);
}
.sim-verdict--neutral { border-color: rgba(138,143,168,0.3); }
.sim-verdict--good    { border-color: rgba(89,0,255,0.5); color: rgba(200,216,255,0.85); }
.sim-verdict--great   { border-color: rgba(255,102,0,0.45); color: rgba(255,150,80,0.85); }
.sim-verdict--fire    {
  border-color: rgba(255,102,0,0.7);
  color: rgba(255,150,80,0.9);
  box-shadow: 0 0 24px rgba(255,102,0,0.1);
}
.sim-verdict strong { color: #FF6600; font-weight: 700; }

/* Section label override */
.sim-sec-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  text-shadow: 0 0 6px rgba(89,0,255,0.6);
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.sim-sec-tag::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(89,0,255,0.4), transparent);
}

/* AfterHours blue — brand name neon */
.neon-line--blue {
  color: #c0a0ff;
  text-shadow:
    0 0 4px #fff,
    0 0 12px rgba(140,80,255,0.95),
    0 0 32px rgba(89,0,255,0.9),
    0 0 70px rgba(89,0,255,0.5);
  animation: neon-flicker-blue 8s infinite;
}

/* ══════════════════════════════════════════════════════════
   HERO WORDMARK — "After Hours" solid blue (no flicker)
   Mixed case: A and H capital, rest lowercase
   ══════════════════════════════════════════════════════════ */
.hero-wordmark-blue {
  /* Override text-transform:uppercase from .neon-sign */
  text-transform: none !important;
  font-family: var(--font-display) !important;

  /* Deep electric blue — solid, textured, no animation */
  color: #5900FF;
  background: linear-gradient(
    160deg,
    #8855ff 0%,
    #5900FF 30%,
    #3a00bb 60%,
    #5900FF 80%,
    #8855ff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* Subtle depth — like metal or glass, not neon */
  filter: drop-shadow(0 0 12px rgba(89,0,255,0.7)) drop-shadow(0 2px 4px rgba(0,0,10,0.8));
  animation: none !important;
}

/* ══════════════════════════════════════════════════════════
   HERO TAGLINE — "Automate your After Hours"
   Refined: rules on each side, spaced mono, muted orange
   ══════════════════════════════════════════════════════════ */
.hero-sub-tagline {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 1.2em;
  font-family: var(--font-mono) !important;
  font-size: clamp(0.6rem, 1.1vw, 0.85rem) !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgba(180, 140, 100, 0.75) !important;
  text-shadow: none !important;
  animation: none !important;
  margin-top: 0.65em;
  white-space: nowrap;

  /* Slight fade-in only — no flicker */
  opacity: 0;
  animation: tagline-fade 1.2s ease 0.6s forwards !important;
}

.hero-sub-rule {
  display: block;
  width: clamp(30px, 4vw, 60px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,102,0,0.45), transparent);
  flex-shrink: 0;
}

@keyframes tagline-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}