/* ============================================================
   FX UNLOCKED — Hero (dark aurora)
   Pixel-perfect transplant of /tmp/fx-hero/FX Hero Dark.html.
   Scoped to body[data-page="home"] .hero so it can sit ON TOP of
   the existing video-hero rules in pages.css and override them
   without touching the rest of the site.
   ============================================================ */
body[data-page="home"] {
  --hero-cyan:    #2bc6e0;
  --hero-indigo:  #5566e6;
  --hero-magenta: #cf3fd6;
  --hero-pos:     #54e0a6;
  --hero-neg:     #ff7b8a;
  --hero-bg0:     #070a1c;
  --hero-bg1:     #0b1026;
  --hero-line:    rgba(255,255,255,0.10);
  --hero-line-2:  rgba(255,255,255,0.16);
  --hero-glass:   rgba(255,255,255,0.05);
  --hero-ink:     #eef0fb;
  --hero-mute:    #aab0d4;
  --hero-dim:     #6c719a;
}

/* hide the old video-hero internals so nothing fights the new layout */
body[data-page="home"] .hero .hero-canvas-wrap,
body[data-page="home"] .hero .hero-halo,
body[data-page="home"] .hero .hero-viz,
body[data-page="home"] .hero .hero-video,
body[data-page="home"] .hero .hero-tint,
body[data-page="home"] .hero .hero-vignette,
body[data-page="home"] .hero .ticker-bar { display: none !important; }

/* ============ HERO LAYOUT ============ */
body[data-page="home"] .hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
  background: var(--hero-bg0);
  color: var(--hero-ink);
  align-items: stretch;
}
body[data-page="home"] .hero .wrap.hero-grid,
body[data-page="home"] .hero > .wrap { padding: 0; max-width: none; }

/* === backdrop === */
body[data-page="home"] .hero .hero-bg {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(1100px 760px at 78% 42%, rgba(120, 60, 180, 0.42), transparent 62%),
    radial-gradient(900px 680px at 95% 18%, rgba(58, 92, 220, 0.36), transparent 60%),
    radial-gradient(800px 700px at 60% 100%, rgba(43, 198, 224, 0.14), transparent 60%),
    linear-gradient(160deg, #0a0f28 0%, #070a1c 55%, #0a0720 100%);
}
body[data-page="home"] .hero .aurora {
  position: absolute; inset: -20%; z-index: -3;
  pointer-events: none; filter: blur(60px); opacity: 0.6;
}
body[data-page="home"] .hero .aurora span {
  position: absolute; border-radius: 50%; mix-blend-mode: screen;
}
/* Aurora orbs bumped larger + shifted further right so the brand glow
   reaches the viewport edge on wide screens. Previously the right-side
   of the hero went black past the chart arrow — felt empty. The orbs
   now bleed off the right edge so the gradient halo fills that dead
   zone with magenta/indigo/cyan instead of void. */
body[data-page="home"] .hero .aurora .a1 {
  width: 880px; height: 880px; top: -6%; right: -6%;
  background: radial-gradient(circle, rgba(207,63,214,0.62), transparent 68%);
  animation: heroDrift1 22s ease-in-out infinite;
}
body[data-page="home"] .hero .aurora .a2 {
  width: 720px; height: 720px; top: 24%; right: 12%;
  background: radial-gradient(circle, rgba(58,92,220,0.55), transparent 65%);
  animation: heroDrift2 27s ease-in-out infinite;
}
body[data-page="home"] .hero .aurora .a3 {
  width: 620px; height: 620px; bottom: -6%; right: 2%;
  background: radial-gradient(circle, rgba(43,198,224,0.42), transparent 65%);
  animation: heroDrift1 31s ease-in-out infinite reverse;
}
@keyframes heroDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px, 40px) scale(1.12); } }
@keyframes heroDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px, -30px) scale(0.92); } }

body[data-page="home"] .hero .hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 1.5px) 0 0/26px 26px;
  -webkit-mask-image: radial-gradient(1200px 800px at 30% 40%, #000 0%, transparent 75%);
          mask-image: radial-gradient(1200px 800px at 30% 40%, #000 0%, transparent 75%);
  opacity: 0.6;
}
body[data-page="home"] .hero .grain {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Top vignette only — kept for nav legibility against bright aurora.
   The bottom inset shadow was creating a "wall" against the next light
   section. It's gone now; the ::after fade-out below handles the
   transition instead. */
body[data-page="home"] .hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  box-shadow: inset 0 80px 160px -120px rgba(0,0,0,0.7);
}

/* Bottom fade-out zone — kept SHORT (110px) and concentrated in the
   last third so the dark purple hero extends much further down before
   blending into the IC partners strip. The earlier 220px fade crept
   up over the apply-button area on shorter viewports, making the
   colour look "shortened" with the CTA stranded at the edge of the
   fade. Now the button sits firmly on solid dark, and only the final
   ~40px softens into var(--bg). Sits between bg layers (z<0) and the
   hero content (z=2), so chips/chart line stay crisp. */
body[data-page="home"] .hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 110px; z-index: 1; pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(244, 243, 249, 0.0) 45%,
    rgba(244, 243, 249, 0.5) 80%,
    var(--bg) 100%
  );
}

/* === hero body grid === */
body[data-page="home"] .hero .hero-main {
  position: relative; z-index: 2;
  flex: 1; display: flex; align-items: center;
}
body[data-page="home"] .hero .hero-main .wrap {
  width: 100%; max-width: 1440px;
  margin: 0 auto; padding: 0 clamp(24px, 4vw, 64px);
}
body[data-page="home"] .hero .hero-grid {
  display: grid; grid-template-columns: 1.02fr 1fr; gap: 40px;
  align-items: center;
  padding: clamp(40px, 6vh, 90px) 0 clamp(40px, 6vh, 90px);
  padding-top: calc(var(--nav-h) + 24px);
}
/* Homepage flowing ribbons — full-bleed background layer (same engine
   as the Affiliates banner). Hidden on desktop where the side
   .hero-visual already carries the animation; shown ≤1024px where that
   side visual is removed, so mobile gets motion instead of a flat block.
   z-index 0 keeps it behind the hero copy (hero-main is z-index 2). */
body[data-page="home"] .hero .ph-flow--home { display: none; z-index: 0; }
@media (max-width: 1024px) {
  body[data-page="home"] .hero .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  body[data-page="home"] .hero .hero-visual { display: none; }
  body[data-page="home"] .hero .ph-flow--home { display: block; }
}

/* === copy === */
body[data-page="home"] .hero .hero-copy { color: var(--hero-ink); }
body[data-page="home"] .hero .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--hero-mute); margin: 0;
}
body[data-page="home"] .hero .eyebrow .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(108deg, var(--hero-cyan) 0%, var(--hero-indigo) 50%, var(--hero-magenta) 100%);
  box-shadow:
    0 0 0 4px rgba(85,102,230,0.18),
    0 0 14px rgba(207,63,214,0.7);
}
body[data-page="home"] .hero h1.title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(48px, 6.6vw, 104px); line-height: 0.92;
  letter-spacing: -0.045em; margin-top: 28px;
  color: #fff; text-wrap: balance;
}
body[data-page="home"] .hero h1.title .grad {
  position: relative;
  background: linear-gradient(100deg, #6fe0ff, #9aa6ff 45%, #f08bff, #6fe0ff);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: heroGradShimmer 7s ease-in-out infinite;
}
@keyframes heroGradShimmer { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
body[data-page="home"] .hero .subtitle {
  font-size: clamp(16px, 1.25vw, 19px); line-height: 1.62;
  color: var(--hero-mute); margin-top: 30px; max-width: 54ch;
}
body[data-page="home"] .hero .hero-cta {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 42px;
}

/* primary + ghost on dark — re-tinted for the cyan→indigo→magenta hero
   variant defined here. (Doesn't touch the rest of the site.) */
body[data-page="home"] .hero .btn-primary {
  background: linear-gradient(108deg, var(--hero-cyan) 0%, var(--hero-indigo) 50%, var(--hero-magenta) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 2px 6px rgba(0,0,0,0.25),
    0 12px 30px -10px rgba(85,102,230,0.55);
}
body[data-page="home"] .hero .btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 2px 8px rgba(0,0,0,0.28),
    0 18px 40px -10px rgba(207,63,214,0.55);
}
body[data-page="home"] .hero .btn-ghost {
  color: var(--hero-ink);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body[data-page="home"] .hero .btn-ghost:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.28);
  color: var(--hero-ink);
}

/* === visual === */
body[data-page="home"] .hero .hero-visual {
  position: relative; height: clamp(440px, 56vh, 620px);
}
body[data-page="home"] .hero .hero-visual svg.flow {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block; overflow: visible;
  /* Fade-out mask on the right edge of the entire SVG visual.
     The ribbons (r1/r2/r3) + chart line + area fill all drew paths
     that ended at the right edge of the viewBox, creating a hard
     vertical "wall" where every stroke stopped at once. The mask
     dissolves the rightmost ~35% of the SVG so anything reaching
     that zone naturally fades to transparent — no shared endpoint,
     no wall. Also softens the top + bottom edges a touch for the
     same reason. */
  -webkit-mask-image: linear-gradient(to right,
    black 0%, black 55%, rgba(0,0,0,0.6) 80%, transparent 100%);
          mask-image: linear-gradient(to right,
    black 0%, black 55%, rgba(0,0,0,0.6) 80%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
body[data-page="home"] .hero .plx {
  transition: transform .35s cubic-bezier(.2,.85,.25,1);
  will-change: transform;
}

body[data-page="home"] .hero .line-main {
  filter: drop-shadow(0 0 10px rgba(122,160,255,0.55));
}
body[data-page="home"] .hero .line-draw {
  stroke-dasharray: 2600; stroke-dashoffset: 2600;
  animation: heroLineDraw 2.4s cubic-bezier(.45,.05,.2,1) .3s forwards;
}
@keyframes heroLineDraw { to { stroke-dashoffset: 0; } }

body[data-page="home"] .hero .ribbon { will-change: transform; }
body[data-page="home"] .hero .ribbon.r1 { opacity: 0.9; }
body[data-page="home"] .hero .ribbon.r2 { opacity: 0.7; }
body[data-page="home"] .hero .ribbon.r3 { opacity: 0.5; }

body[data-page="home"] .hero .lead-ring {
  transform-origin: center;
  animation: heroLeadPulse 2.2s ease-out infinite;
}
body[data-page="home"] .hero .lead-ring.b { animation-delay: 1.1s; }
@keyframes heroLeadPulse { 0% { r: 7; opacity: 0.85; } 100% { r: 30; opacity: 0; } }
body[data-page="home"] .hero .lead-core { animation: heroCoreGlow 2.2s ease-in-out infinite; }
@keyframes heroCoreGlow { 50% { opacity: 0.75; } }

/* Arrow glyph is locked to the chart-line tip (cx=690, cy=96) so it
   stays perfectly centered inside the pulsing .lead-ring halo at all
   times. Previously floated up 14px on a 6s loop, which drifted the
   arrow OUT of its own halo and looked like a misalignment bug.
   The lead-ring pulse + lead-core glow already provide motion at the
   tip, so the arrow itself doesn't need translation. */
body[data-page="home"] .hero .arrow-glyph {
  transform-origin: center;
}

/* particles */
body[data-page="home"] .hero .particle {
  position: absolute; border-radius: 50%; background: #fff;
  opacity: 0; animation: heroRise linear infinite;
}
@keyframes heroRise {
  0% { transform: translateY(20px); opacity: 0; }
  10% { opacity: var(--op, 0.6); }
  90% { opacity: var(--op, 0.6); }
  100% { transform: translateY(-140px); opacity: 0; }
}

/* floating currency chips (right side) */
body[data-page="home"] .hero .viz-chips {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
}
body[data-page="home"] .hero .vchip {
  pointer-events: auto;
  position: absolute;
  width: 188px;
  padding: 13px 15px 12px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(22,28,58,0.74), rgba(10,13,30,0.68));
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 26px 54px -20px rgba(0,0,0,0.72);
  overflow: hidden;
  animation: heroFloatT var(--fd, 7s) ease-in-out infinite var(--dly, 0s);
  transition: transform .4s cubic-bezier(.2,.85,.25,1), box-shadow .4s, border-color .4s;
}
@keyframes heroFloatT {
  0%,100% { translate: 0 0; } 50% { translate: 0 -12px; }
}
body[data-page="home"] .hero .vchip:nth-child(1) { top: 4%;  left: -9%; --fd: 7s;   --dly: 0s; }
body[data-page="home"] .hero .vchip:nth-child(2) { top: 33%; left: 16%; --fd: 8.6s; --dly: .7s; z-index: 5; }
body[data-page="home"] .hero .vchip:nth-child(3) { top: 63%; left: -3%; --fd: 7.8s; --dly: 1.2s; }
body[data-page="home"] .hero .vchip:hover {
  transform: scale(1.05);
  border-color: rgba(255,255,255,0.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 30px 60px -18px rgba(0,0,0,0.8);
  z-index: 6;
}
body[data-page="home"] .hero .vchip::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 2.5px; border-radius: 2px; background: var(--hero-pos);
}
body[data-page="home"] .hero .vchip[data-trend="down"]::before { background: var(--hero-neg); }
body[data-page="home"] .hero .vc-top { display: flex; align-items: center; justify-content: space-between; }
body[data-page="home"] .hero .vc-pair {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--hero-dim);
}
body[data-page="home"] .hero .vc-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hero-pos);
  box-shadow: 0 0 0 0 rgba(84,224,166,0.5);
  animation: heroLiveBlink 1.6s ease-in-out infinite;
}
body[data-page="home"] .hero .vchip[data-trend="down"] .vc-live {
  background: var(--hero-neg);
  animation: heroLiveBlinkN 1.6s ease-in-out infinite;
}
@keyframes heroLiveBlink  { 0%,100% { box-shadow: 0 0 0 0 rgba(84,224,166,0.5);}  60% { box-shadow: 0 0 0 5px rgba(84,224,166,0);} }
@keyframes heroLiveBlinkN { 0%,100% { box-shadow: 0 0 0 0 rgba(255,123,138,0.5);} 60% { box-shadow: 0 0 0 5px rgba(255,123,138,0);} }
body[data-page="home"] .hero .vc-mid {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  margin-top: 8px;
}
body[data-page="home"] .hero .vc-val {
  font-family: var(--display); font-weight: 500; font-size: 22px;
  letter-spacing: -0.02em; color: #fff;
  font-variant-numeric: tabular-nums; line-height: 1;
}
body[data-page="home"] .hero .vc-spark {
  width: 56px; height: 22px; flex: none; color: var(--hero-pos); opacity: 0.95;
}
body[data-page="home"] .hero .vchip[data-trend="down"] .vc-spark { color: var(--hero-neg); }
body[data-page="home"] .hero .vc-bot { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
body[data-page="home"] .hero .vc-d {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  padding: 2px 7px; border-radius: 6px;
}
body[data-page="home"] .hero .vc-d.pos { background: rgba(84,224,166,0.14); color: var(--hero-pos); }
body[data-page="home"] .hero .vc-d.neg { background: rgba(255,123,138,0.14); color: var(--hero-neg); }
body[data-page="home"] .hero .vc-lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--hero-dim);
}

/* reveal — transform-only entrance. Opacity stays 1 at all times so
   content is never hidden (robust against frozen/backgrounded frames).
   JS toggles .is-in; no-JS / reduced-motion = no transform. */
body[data-page="home"] .hero [data-reveal] { opacity: 1; transform: none; }
html.js body[data-page="home"] .hero [data-reveal] {
  transform: translateY(20px);
  transition: transform 1s cubic-bezier(.2,.85,.25,1);
}
html.js body[data-page="home"] .hero [data-reveal].is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js body[data-page="home"] .hero [data-reveal] { transform: none !important; transition: none; }
  body[data-page="home"] .hero .line-draw { animation: none; stroke-dashoffset: 0; }
  body[data-page="home"] .hero .ribbon,
  body[data-page="home"] .hero .arrow-glyph,
  body[data-page="home"] .hero .particle,
  body[data-page="home"] .hero .lead-ring,
  body[data-page="home"] .hero .lead-core,
  body[data-page="home"] .hero .vchip,
  body[data-page="home"] .hero .aurora .a1,
  body[data-page="home"] .hero .aurora .a2,
  body[data-page="home"] .hero .aurora .a3 { animation: none !important; }
}