/* top accent bar */
.process-step::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.process-step:hover::after { transform: scaleX(1); }

.process-step:hover { border-color: rgba(255,140,0,0.3); background: rgba(255,140,0,0.03); }
.process-step:hover .ps-num { opacity: .35; }
.process-step:hover .ps-title { color: var(--amber); }
.process-step:hover .ps-dot {
  box-shadow: 0 0 20px 4px rgba(255,140,0,0.7);
  transform: translateX(-50%) scale(1.4);
}

.ps-num {
  font-family: var(--font-display); font-size: 4rem;
  color: var(--amber); opacity: .15; line-height: 1;
  margin-bottom: 1.5rem;
  transition: opacity .3s;
}
.ps-dot {
  position: absolute; top: 2.7rem; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px rgba(255,140,0,0.6);
  transition: box-shadow .3s, transform .3s;
}
.ps-title {
  font-family: var(--font-display); font-size: 1.6rem;
  letter-spacing: .02em; margin-bottom: .8rem;
  transition: color .3s;
}
.ps-body { font-size: .82rem; color: var(--muted); line-height: 1.75; }

/* ── MORE SERVICES ── */
#more { background: var(--bg2); }
.more-inner { max-width: 1400px; margin: 0 auto; }
.more-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
  margin-top: 4rem;
}
.more-item {
  background: var(--bg2);
  padding: 2rem;
  position: relative; overflow: hidden;
  transition: background .3s;
  opacity: 0; transform: translateY(20px);
  transition: background .3s, opacity .5s, transform .5s;
}
.more-item.reveal { opacity: 1; transform: translateY(0); }
.more-item:hover { background: rgba(255,140,0,0.04); }
.more-item::after {
  content: '';
  position: absolute; top: 0; left: 0; width: 2px; height: 100%;
  background: var(--amber); transform: scaleY(0); transform-origin: top;
  transition: transform .3s;
}
.more-item:hover::after { transform: scaleY(1); }
.more-item-title { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .02em; margin-bottom: .3rem; transition: color .3s; }
.more-item:hover .more-item-title { color: var(--amber); }
.more-item-price { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .15em; color: var(--amber); margin-bottom: .5rem; }
.more-item-desc { font-size: .8rem; color: var(--muted); line-height: 1.6; }

/* ── CTA ── */
#cta {
  background: var(--bg);
  text-align: center;
  padding: clamp(8rem, 11vw, 11rem) 4rem;
  position: relative; overflow: hidden;
}
.cta-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,140,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,140,0,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.cta-glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 800px; height: 600px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,140,0,0.1) 0%, transparent 65%);
  pointer-events: none;
}
.cta-inner { position: relative; max-width: 900px; margin: 0 auto; }
/* Previous clamp (up to 10rem) forced "Let's Build Your Next" to wrap on
   its own into 2 lines inside the 900px .cta-inner column, and the em's
   forced display:block then added a mandatory 3rd line for "Growth
   Story." regardless of width -- producing an unbalanced 3-line break
   with "Next" isolated alone. Reduced clamp + removed the forced block
   lets the whole phrase wrap naturally at real word boundaries, holding
   a clean 2-line break at every tested desktop width. .bdm-protect (see
   markup) keeps "Growth Story." itself from splitting across those 2
   lines. */
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6.2vw, 5.5rem);
  line-height: 1.02; letter-spacing: .01em;
  margin-bottom: 2rem;
}
.cta-title em { color: var(--amber); font-style: normal; }
.cta-sub { font-size: 1rem; color: var(--muted); line-height: 1.8; max-width: 500px; margin: 0 auto 3rem; }
.cta-btns { display: flex; gap: 1rem; justify-content: center; }

/* ── FOOTER ── */
footer {
  background: var(--bg2);
  padding: 3rem 4rem;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border);
  flex-wrap: wrap; gap: 1rem;
}
.footer-logo { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; }
.footer-logo em { color: var(--amber); font-style: normal; }
.footer-copy { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; color: var(--muted); }
.footer-links { display: flex; gap: 2rem; }
.footer-links a { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--amber); }

/* ── PARALLAX DATA ATTRS ── */
[data-parallax] { will-change: transform; }

/* ── SCROLL REVEAL ── */
.reveal-target {
  opacity: 0; transform: translateY(50px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal-target.revealed { opacity: 1; transform: translateY(0); }

/* ── PARALLAX DEPTH ORBS (global, fixed to page flow) ── */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  filter: blur(60px);
}
.orb-a { width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,140,0,0.07) 0%, transparent 70%); }
.orb-b { width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,80,0,0.06) 0%, transparent 70%); }
.orb-c { width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,160,0,0.09) 0%, transparent 70%); }
.orb-d { width: 200px; height: 200px; background: radial-gradient(circle, rgba(255,100,0,0.1) 0%, transparent 70%); }

/* ── HERO MOUSE PARALLAX LAYERS ── */
#hero-mouse-deep  { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
#hero-mouse-mid   { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
#hero-mouse-near  { position: absolute; inset: 0; pointer-events: none; will-change: transform; }

/* floating amber lines in hero */
.hero-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,140,0,0.4), transparent);
  will-change: transform;
}
.hero-line-v {
  position: absolute;
  width: 1px;
  background: linear-gradient(0deg, transparent, rgba(255,140,0,0.3), transparent);
  will-change: transform;
}

/* ── PARTICLE CANVAS ── */
#particle-canvas {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
}

/* ── SECTION PARALLAX BACKGROUNDS ── */
.section-parallax-bg {
  position: absolute; inset: -20%; pointer-events: none;
  will-change: transform;
}

/* ── PARALLAX TEXT DRIFT ── */
[data-parallax-text] {
  will-change: transform;
  display: block;
}

/* ── TILT CARDS ── */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform .1s ease-out;
}

/* ── SCROLL VELOCITY SKEW ── */
.skew-on-scroll {
  will-change: transform;
  transition: transform .4s cubic-bezier(.17,.67,.83,.67);
}

/* ── FLYING MARKETING ICONS ── */
#icon-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.fly-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(255,140,0,0.18);
  background: rgba(9,9,16,0.82);
  backdrop-filter: blur(6px);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform;
  opacity: 0;
  cursor: none;
  box-shadow: 0 0 0 0 rgba(255,140,0,0);
  transition: box-shadow .3s, border-color .3s;
}
.fly-icon svg {
  display: block;
  flex-shrink: 0;
}
/* pulse ring that fires periodically */
.fly-icon.pulse-ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 16px;
  border: 1px solid rgba(255,140,0,0.5);
  animation: iconPulseRing .8s ease-out forwards;
}
@keyframes iconPulseRing {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.5); opacity: 0;  }
}
/* data burst line — short amber streak that shoots out */
.fly-icon .burst {
  position: absolute;
  width: 40px; height: 1px;
  background: linear-gradient(90deg, var(--amber), transparent);
  transform-origin: left center;
  opacity: 0;
  animation: burstLine .5s ease-out forwards;
}
@keyframes burstLine {
  0%   { opacity: .8; transform: scaleX(0) rotate(var(--a)); }
  60%  { opacity: .6; transform: scaleX(1) rotate(var(--a)); }
  100% { opacity: 0;  transform: scaleX(1.4) rotate(var(--a)) translateX(10px); }
}
/* stat badge that pops up from icon */
.fly-icon .stat-pop {
  position: absolute;
  top: -28px; left: 50%; transform: translateX(-50%);
  background: var(--amber);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  animation: statPop .6s cubic-bezier(.16,1,.3,1) forwards;
  pointer-events: none;
}
@keyframes statPop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.7); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.9); }
}
/* orbit path indicator — tiny dashed circle that appears briefly */
.fly-icon.show-orbit::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px dashed rgba(255,140,0,0.2);
  animation: orbitFade 1.5s ease-out forwards;
}
@keyframes orbitFade {
  0%   { opacity: 0; transform: scale(.6) rotate(0deg); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2) rotate(60deg); }
}


/* nav CTA — always dark text, never unreadable */


/* ══════════════════════════════════
   ENHANCEMENTS — GLOWS, LIVE EFFECTS
══════════════════════════════════ */

/* ═══════════════════════════════════════
   CYBORG + FIXES + BIDIRECTIONAL PARALLAX
═══════════════════════════════════════ */

/* Scroll progress bar */
#scroll-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9997;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--amber3), var(--amber), var(--amber2));
  width: 100%;
  box-shadow: 0 0 8px rgba(255,140,0,0.6);
  pointer-events: none;
}

/* Ambient glow */
#ambient-glow {
  position: fixed; width: 600px; height: 600px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255,140,0,0.04) 0%, transparent 70%);
  filter: blur(60px);
  transform: translate(-50%, -50%);
  will-change: top, left;
  transition: top 1.2s ease, left 1.2s ease;
}

/* Technical scroll-progress rail — decorative only, desktop/fine-pointer
   only. Not a replacement for the native (or branded) scrollbar. */
.bdm-progress-rail {
  display: none;
  position: fixed;
  top: 96px;
  right: 20px;
  bottom: 48px;
  width: 34px;
  z-index: 40;
  pointer-events: none;
}
@media (min-width: 1201px) and (pointer: fine) {
  .bdm-progress-rail { display: block; }
}
.bdm-progress-track {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
  pointer-events: auto;
}
.bdm-progress-track::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(46,139,255,.15), rgba(255,140,0,.08));
}
.bdm-progress-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  transform-origin: top center;
  transform: scaleY(0);
  background: linear-gradient(180deg, var(--bdm-blue-bright), var(--bdm-blue) 45%, var(--bdm-orange) 100%);
  box-shadow: 0 0 8px rgba(46,139,255,.35);
  will-change: transform;
}
.bdm-progress-nodes { position: absolute; inset: 0; }
.bdm-progress-node {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: auto;
}
.bdm-progress-node i {
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(240,237,232,.28);
  border: 1px solid rgba(255,255,255,.2);
  transition: background .3s, box-shadow .3s, transform .3s;
}
.bdm-progress-node em {
  position: absolute;
  right: 16px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(240,237,232,.65);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .25s, transform .25s;
  background: rgba(5,6,11,.88);
  padding: .25rem .55rem;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.08);
}
.bdm-progress-rail:hover .bdm-progress-node em,
.bdm-progress-node.is-active em { opacity: 1; transform: translateX(0); }
.bdm-progress-node.is-active i {
  background: var(--bdm-orange);
  box-shadow: 0 0 10px rgba(255,140,0,.6), 0 0 16px rgba(46,139,255,.3);
  transform: scale(1.35);
}
@media (prefers-reduced-motion: reduce) {
  .bdm-progress-node i,
  .bdm-progress-node em,
  .bdm-progress-fill { transition: none; }
}

/* HUD corners */
.hud-corner {
  position: fixed; pointer-events: none; z-index: 50;
  font-family: var(--font-mono); font-size: .5rem;
  letter-spacing: .15em; color: rgba(255,140,0,0.22); line-height: 2;
}
#hud-tl { top: 1.2rem; left: 1.2rem; }
#hud-br { bottom: 1.2rem; right: 1.2rem; text-align: right; }
.hud-line { display: block; }
.hud-blink { animation: blink 2s infinite; }

/* Glitch scan bar */
#glitch-scan {
  position: fixed; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,140,0,.5), rgba(66,245,197,.4), rgba(255,140,0,.5), transparent);
  pointer-events: none; z-index: 997; top: 50%; opacity: 0;
  box-shadow: 0 0 6px rgba(255,140,0,0.4);
}

/* Data stream */
#data-stream {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
}
.ds-col {
  position: absolute; top: -200px; width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,140,0,0.25) 50%, transparent 100%);
  animation: dsfall linear infinite;
}
@keyframes dsfall { to { top: 110vh; } }

/* Page loader */
#page-loader.done { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .4s, visibility .4s; }
#page-loader {
  position: fixed; inset: 0; background: var(--bg); z-index: 10000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
  transition: opacity .3s ease .7s, visibility .3s ease .7s;
}
.loader-logo { font-family: var(--font-display); font-size: 2.5rem; color: var(--white); }
.loader-logo em { color: var(--amber); font-style: normal; }
.loader-bar-wrap { width: 200px; height: 2px; background: rgba(255,255,255,0.08); }
.loader-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--amber3), var(--amber2)); box-shadow: 0 0 8px rgba(255,140,0,.6); transition: width .7s cubic-bezier(.16,1,.3,1); }
.loader-text { font-family: var(--font-mono); font-size: .55rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* ---- Hero-fingerprint intro (globally enabled -- see
   $bdm_intro_global_enabled in templates/render.php; ?introtest=1 still
   forces a replay). See templates/intro-test.php and
   templates/intro-test-bootstrap.php. Markup is server-rendered and
   present in the initial HTML, so the fingerprint and its ridge
   animation exist and animate from first paint with zero dependency on
   the deferred GSAP/ScrollTrigger/homepage.js chain, which is what
   caused the ~1.8s flash in the pre-approval version: init() only
   ran after DOMContentLoaded, which was itself blocked behind that whole
   external script chain. html.bdm-introtest is still added by the
   existing inline script in render.php for CSS scoping; the loader and
   real hero visual are hidden the same way as before, pre-paint. ---- */
html.bdm-introtest #page-loader { display: none; }
html.bdm-introtest.js-reveal .bdm-hero-visual-field { opacity: 0; }

:root {
  --bdm-intro-showcase-ms: 1700ms;
  --bdm-intro-travel-ms: 650ms;
  --bdm-intro-handoff-ms: 100ms;
}
@media (max-width: 900px) {
  :root {
    --bdm-intro-showcase-ms: 1050ms;
    --bdm-intro-travel-ms: 500ms;
    --bdm-intro-handoff-ms: 90ms;
  }
}

#bdm-intro-overlay {
  display: none;
}
html.bdm-introtest #bdm-intro-overlay {
  display: flex;
  position: fixed; inset: 0; z-index: 10060;
  align-items: center; justify-content: center;
  background: var(--bg);
  pointer-events: none;
}
.bdm-intro-stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(18px, 3.4vw, 30px);
}
.bdm-intro-fp {
  position: relative;
  width: min(34vw, 58vh, 420px);
  aspect-ratio: 1;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.bdm-intro-fp .bdm-cyber-mark {
  position: absolute; inset: 2%; width: 96%; height: 96%; object-fit: contain;
  filter: saturate(1.02) contrast(1.02) brightness(.92) drop-shadow(0 6px 8px rgba(0,0,0,.28));
}
.bdm-intro-fp .bdm-led-path-overlay {
  position: absolute; inset: 2%; width: 96%; height: 96%;
  overflow: visible;
  pointer-events: none;
}
/* .bdm-led-ridge / .bdm-led-paths--cyan/orange keyframes are defined once,
   earlier in this file, for the real hero artwork -- reused unchanged. */
@media (prefers-reduced-motion: reduce) {
  .bdm-intro-fp .bdm-led-ridge { animation: none; }
}
/* Phase B: pauses (not resets) the 146 paths' dash-offset animation for
   the travel+handoff window, preserving whatever cyan/orange state was
   already visible. Keeps the outer transform decoupled from continuous
   SVG repaint while .bdm-intro-fp is moving/scaling. */
.bdm-intro-fp--traveling .bdm-led-ridge { animation-play-state: paused !important; }

.bdm-intro-status {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: min(240px, 52vw);
  opacity: 0;
  animation: bdmIntroStatusFade var(--bdm-intro-showcase-ms) ease-in-out both;
}
@keyframes bdmIntroStatusFade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}
.bdm-intro-bar-track {
  position: relative;
  width: 100%; height: 2px;
  background: rgba(255,255,255,.09);
  overflow: hidden;
}
.bdm-intro-bar-fill {
  position: absolute; inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #58D5FF, #FFF0C9, #FF9A22);
  box-shadow: 0 0 6px rgba(88,213,255,.45), 0 0 6px rgba(255,154,34,.4);
  animation: bdmIntroBarFill var(--bdm-intro-showcase-ms) cubic-bezier(.22,1,.36,1) both;
}
@keyframes bdmIntroBarFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.bdm-intro-bar-label {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .bdm-intro-status,
  .bdm-intro-bar-fill { animation: none; opacity: 0; }
}

/* Pauses only the real artwork's ambient float for the intro's duration,
   so the destination rect measured immediately before travel can't have
   drifted since the showcase began. Mouse-parallax (a separate, JS-driven
   transform) is deliberately left untouched -- pausing it would mean
   reaching into the shared pointer-tracking code, which this test must
   not modify -- so the residual exposure is bounded to the travel
   animation's own ~500-650ms, not the multi-second showcase. */
.bdm-intro-freeze-bob .bdm-cyber-object { animation-play-state: paused !important; }

/* Glitch effect on hero title amber word */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; color: var(--amber);
}
.glitch::before {
  text-shadow: -2px 0 rgba(66,245,197,0.7);
  clip-path: polygon(0 15%, 100% 15%, 100% 35%, 0 35%);
  animation: glitchA 5s infinite; opacity: 0;
}
.glitch::after {
  text-shadow: 2px 0 rgba(255,107,0,0.7);
  clip-path: polygon(0 65%, 100% 65%, 100% 85%, 0 85%);
  animation: glitchB 5s infinite; opacity: 0;
}
@keyframes glitchA {
  0%,93%,100% { opacity:0; transform:translate(0); }
  94% { opacity:1; transform:translate(-3px,1px); }
  96% { opacity:1; transform:translate(2px,-1px); }
  98% { opacity:0; }
}
@keyframes glitchB {
  0%,90%,100% { opacity:0; transform:translate(0); }
  91% { opacity:1; transform:translate(3px,1px); }
  93% { opacity:1; transform:translate(-2px,-1px); }
  95% { opacity:0; }
}

/* Nav CTA — always readable */
.nav-cta, .nav-cta:visited, .nav-cta:hover, .nav-cta:focus { color: #080808 !important; }
.nav-cta:hover { background: var(--amber2) !important; }

/* Stat number glow when visible */
.stat-box.reveal .stat-number {
  animation: statGlow 3s ease-in-out infinite;
}
@keyframes statGlow {
  0%,100% { text-shadow: 0 0 15px rgba(255,140,0,.2); }
  50%     { text-shadow: 0 0 35px rgba(255,140,0,.5), 0 0 70px rgba(255,140,0,.12); }
}

/* Hero amber word shimmer */
.hero-title .line:nth-child(2) em { animation: amberShimmer 5s ease-in-out infinite; }
@keyframes amberShimmer {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.25) drop-shadow(0 0 10px rgba(255,140,0,.5)); }
}

/* CTA title glow */
.cta-title em { animation: ctaGlow 3s ease-in-out infinite; }
@keyframes ctaGlow {
  0%,100% { text-shadow: 0 0 25px rgba(255,140,0,.15); }
  50%     { text-shadow: 0 0 50px rgba(255,140,0,.45), 0 0 90px rgba(255,140,0,.1); }
}


/* Ticker amber words glow */
.ticker-item em { text-shadow: 0 0 8px rgba(255,140,0,.35); }

/* Btn primary shimmer sweep */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-20deg); animation: btnShimmer 3.5s ease-in-out infinite;
}
@keyframes btnShimmer { 0%,100%{left:-100%} 50%{left:120%} }

/* Proof card hover left bar */
.proof-card { position: relative; }
.proof-card::after {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--amber), var(--accent2, #42f5c5));
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.proof-card:hover::after { transform: scaleY(1); }
.proof-card:hover .proof-metric { text-shadow: 0 0 20px rgba(66,245,197,.35); }

/* Mouse spotlight on interactive cards */
.more-item, .stat-box, .proof-card, .process-step {
  transition: background .15s;
}

/* Section title underline sweep on reveal */
.s-title { position: relative; }
.s-title::after {
  content: ''; position: absolute; bottom: -8px; left: 0;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--amber), transparent);
  box-shadow: 0 0 6px rgba(255,140,0,.4);
  transition: width 1s cubic-bezier(.16,1,.3,1);
}
.s-title.revealed::after { width: 35%; }

/* Process step hover */
.process-step:hover .ps-title { color: var(--amber); text-shadow: 0 0 18px rgba(255,140,0,.3); }
.process-step:hover .ps-dot { box-shadow: 0 0 20px rgba(255,140,0,1), 0 0 40px rgba(255,140,0,.4); }
.process-step::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.process-step:hover::after { transform: scaleX(1); }

/* Why pt hover */
.why-pt:hover .why-pt-title { color: var(--amber); }
.why-pt:hover .why-pt-num { text-shadow: 0 0 18px rgba(255,140,0,.5); }

/* More item title hover */
.more-item-title { transition: color .3s; }
.more-item:hover .more-item-title { color: var(--amber); }

/* Hex grid on why section */
#why { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cpath d='M14 0L28 8v16L14 32 0 24V8Z' fill='none' stroke='rgba(255,140,0,0.025)' stroke-width='1'/%3E%3C/svg%3E"); background-size: 28px 49px; }

/* Hero pills */
.hero-pills {
  display: flex; flex-wrap: wrap; gap: .65rem;
  align-items: center;
}
.hero-pill {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(240,237,232,.7); border: 1px solid rgba(255,255,255,.14);
  padding: .45rem .9rem; white-space: nowrap;
}
.hero-pill--amber {
  color: var(--amber);
  border-color: rgba(255,140,0,.35);
}
.word-reveal span { display: inline-block; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.word-reveal.wrev-visible span { opacity: 1; transform: translateY(0); }

/* Scramble text */
.s-label { transition: opacity .4s, transform .4s; }

/* Depth strips between sections */
.depth-strip { position: relative; height: 2px; overflow: hidden; background: linear-gradient(90deg, transparent, rgba(255,140,0,.2), rgba(255,140,0,.5), rgba(255,140,0,.2), transparent); }
.depth-strip::after {
  content: ''; position: absolute; top: -1px; width: 80px; height: 4px;
  background: var(--amber); box-shadow: 0 0 18px 4px rgba(255,140,0,.6);
  animation: stripScan 4s linear infinite;
}
@keyframes stripScan { 0%{left:-80px;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{left:100%;opacity:0} }

/* ── PLATFORMS SECTION: channel distribution matrix ── */
.platforms-section {
  padding: 5rem 4rem 5.5rem;
  background: var(--bg2);
  position: relative;
  overflow: hidden;
}
/* Restrained backdrop: central darkening, one warm edge, one cool edge, a
   faint signal-grid texture. Static -- no drift, no cloud, no blur. The
   wheel already carries the page's atmosphere; this section stays systematic. */
.platforms-section::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(16,23,40,.5), transparent 72%),
    radial-gradient(ellipse 40% 55% at 4% 65%, rgba(255,140,0,.045), transparent 68%),
    radial-gradient(ellipse 40% 55% at 96% 30%, rgba(88,201,255,.045), transparent 68%),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(180deg, #070a11 0%, #050710 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 58px 58px, 58px 58px, 100% 100%;
}
.platforms-inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; }
.platforms-head { text-align: center; margin-bottom: 1.75rem; }
/* .s-label carries a shared transition:opacity/transform used elsewhere;
   here opacity/transform are owned entirely by the GSAP scrub reveal below,
   so the CSS transition is switched off to stop the two from fighting over
   the same frame. */
.platforms-label { justify-content: center; transition: none; }
.platforms-sub {
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); margin-top: .5rem;
  transition: none;
}
/* Real grid: 4 columns x 2 rows, identical gaps, both rows centered as one
   block -- no orphaned eighth tile, no per-tile margins. */
.platforms-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
  width: min(100%, 1040px);
  margin-inline: auto;
}

/* ── PLATFORM TILES ── */
.platform-pill {
  display: flex; align-items: center; justify-content: flex-start; gap: .75rem;
  min-height: 68px;
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(240,237,232,.62);
  padding: 1rem 1.15rem;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(18,24,39,.8), rgba(8,11,18,.9));
  border: 1px solid rgba(255,140,0,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    inset 6px 0 16px -12px rgba(88,201,255,.14),
    inset -6px 0 16px -12px rgba(255,140,0,.14),
    0 12px 26px -10px rgba(0,0,0,.45);
  /* --bdm-lift-y (hover) and --bdm-tilt-x/--bdm-tilt-y (pointermove, see
     initPlatformTilt() in homepage.js) compose into one transform instead
     of the two fighting over the property directly. */
  --bdm-lift-y: 0px;
  --bdm-tilt-x: 0deg;
  --bdm-tilt-y: 0deg;
  transform: translateY(var(--bdm-lift-y)) perspective(700px) rotateX(var(--bdm-tilt-x)) rotateY(var(--bdm-tilt-y));
  transition: border-color .3s, color .3s, box-shadow .3s, transform .3s;
}
.platform-pill svg { flex-shrink: 0; transition: filter .3s; }
.platform-pill span { line-height: 1.3; }
.platform-pill:hover {
  border-color: rgba(255,140,0,.4); color: var(--white);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 6px 0 18px -10px rgba(88,201,255,.2),
    inset -6px 0 18px -10px rgba(255,140,0,.26),
    0 16px 32px -10px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,140,0,.14);
  --bdm-lift-y: -3px;
}
.platform-pill:hover svg { filter: brightness(1.25); }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .platform-pill { will-change: transform; transition: border-color .3s, color .3s, box-shadow .3s, transform .25s cubic-bezier(.22,1,.36,1); }
}
@media (prefers-reduced-motion: reduce) {
  .platform-pill { transition: border-color .3s, color .3s, box-shadow .3s; }
  .platform-pill:hover { --bdm-lift-y: 0px; }
}

/* ── MILESTONES ── */
.milestones-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 1px solid var(--border); max-width: 1400px; margin: 3rem auto 0; }
.milestone-item { padding: 2.5rem 2rem; border-right: 1px solid var(--border); text-align: center; opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .6s, background .3s; }
.milestone-item:last-child { border-right: none; }
.milestone-item.reveal { opacity: 1; transform: translateY(0); }
.milestone-item:hover { background: var(--amberDim); }
.milestone-num { font-family: var(--font-display); font-size: 3.5rem; color: var(--amber); line-height: 1; text-shadow: 0 0 30px rgba(255,140,0,.3); animation: statGlow 3s ease-in-out infinite; }
.milestone-label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-top: .6rem; line-height: 1.6; }

/* ── SCREENSHOTS ── */
.screenshots-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; max-width: 1400px; margin: 3rem auto 0; }
.screenshot-card { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .6s, border-color .3s; }
.screenshot-card.reveal { opacity: 1; transform: translateY(0); }
.screenshot-card:hover { border-color: rgba(255,140,0,.35); }
.sc-placeholder { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg,var(--dim) 0%,rgba(255,140,0,.06) 100%); display: flex; align-items: center; justify-content: center; }
.sc-caption { padding: .8rem 1rem; font-family: var(--font-mono); font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.sc-caption em { color: var(--amber); font-style: normal; }