/* HeroFX v4 — v43-stay-in-loop */

/* === BULLETPROOF NAVY BG — covers all edge cases === */
body:has(.herofx-v4-loaded) { background: #03061A !important; }
.herofx-v4-loaded { background: #03061A !important; }
/* Pseudo overlay that extends 1000px beyond wrapper edges */
.herofx-v4-loaded::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1000px;
  right: -1000px;
  bottom: 0;
  background: #03061A;
  z-index: -1;
  pointer-events: none;
}


.herofx-v4 {
  font-family: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: #FFFFFF !important;
  background: #03061A;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  overflow: hidden;
}
/* === ASTRA / WP THEME RESET ===
   1) Astra applies max-width:900px + margin:auto to section inside
      .entry-content. We force every section back to 100%.
   2) astra-child/menu-v4.css applies text-align:center to .hero — that
      bleeds into showcase-card, hero-text, etc. We force left alignment
      back on the wrapper and let our local rules opt-in to centering.
   3) Pull the wrapper up to cover any padding/gap above (Elementor section
      padding-top, header bottom-margin, etc.).
   4) FOUC: theme stylesheets load before our inline style. We add
      !important to .btn-primary's gradient so the gray Elementor button
      style never wins on first paint. */
.herofx-v4 section,
.herofx-v4 .section,
.herofx-v4 .hero {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  clear: both !important;
  text-align: left !important;
}
.herofx-v4 .hero,
.herofx-v4 .hero-text,
.herofx-v4 .showcase-card {
  text-align: left;
}
/* Re-center the elements that legitimately need centered text */
.herofx-v4 .hero-ctas,
.herofx-v4 .stat,
.herofx-v4 .stat-num,
.herofx-v4 .showcase-bonus-text,
.herofx-v4 .showcase-nav,
.herofx-v4 .hero-scroll-cue {
  text-align: center !important;
}
.herofx-v4 .stat-num {
  justify-content: center !important;
}
/* Pull the whole component up to absorb the Elementor section padding-top
   AND kill the bottom gap before the footer (Astra/Elementor adds default
   bottom padding to .e-con-full / .entry-content that creates a black
   strip between our final CTA and the footer). */
.herofx-v4-loaded {
  margin-top: -60px !important;
  margin-bottom: -60px !important;
}
/* Belt-and-suspenders: kill bottom padding/margin on the Elementor
   container that wraps our widget. Targets typical Elementor classes. */
.elementor-widget-html:has(.herofx-v4-loaded){
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.e-con-full:has(.herofx-v4-loaded){
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* FOUC PREVENTION: theme/Elementor stylesheets can win on first paint
   before our inline rules apply. Force the brand-blue gradient + a solid
   fallback color so the button never renders gray/black momentarily. */
.herofx-v4 .btn-primary,
.herofx-v4 .btn-find-account {
  background-color: #0C3DEF !important;
  background-image: linear-gradient(135deg, #0C3DEF, #1F5BFF) !important;
  color: #FFFFFF !important;
}
.herofx-v4 *, .herofx-v4 *::before, .herofx-v4 *::after { box-sizing: border-box; font-family: inherit; }
.herofx-v4 a { text-decoration: none !important; color: inherit; }
.herofx-v4 a:hover { text-decoration: none !important; }
.herofx-v4 button { font-family: inherit; cursor: pointer; border: 0; background: transparent; padding: 0; color: inherit; }
.herofx-v4 ul, .herofx-v4 ol { list-style: none; margin: 0; padding: 0; }
.herofx-v4 h1, .herofx-v4 h2, .herofx-v4 h3, .herofx-v4 h4, .herofx-v4 h5, .herofx-v4 h6 {
  font-family: inherit; color: inherit; font-weight: inherit; margin: 0; line-height: 1.2; text-transform: none;
}
.herofx-v4 p { margin: 0; }
.herofx-v4 blockquote { margin: 0; padding: 0; border: 0; quotes: none; }
.herofx-v4 img { max-width: 100%; height: auto; display: block; }
.herofx-v4 svg { display: inline-block; }
.herofx-v4 figure { margin: 0; }

/* PAINT CONTAINMENT: tells the browser each section paints in isolation —
   changes inside don't trigger a repaint of siblings. Massive perf gain
   on the homepage where heavy sections (hero, accounts, deposits, blog)
   coexist with the sticky `backdrop-filter` header. */
.herofx-v4 .section,
.herofx-v4 .hero{
  contain: layout paint style;
}

/* RENDER SKIPPING — far-below-the-fold sections are not styled/laid-out/painted
   AT ALL until the user approaches them, so every style recalc that happens
   while scrolling (sticky-header class toggle, observers) costs a fraction.
   `contain-intrinsic-size` reserves a realistic height so the scrollbar stays
   stable. Excluded: values/accounts (near the fold; tabs JS measures widths)
   and deposits/start (mid-page). */
.herofx-v4 .section--testimonials,
.herofx-v4 .section--support,
.herofx-v4 .section--affiliate,
.herofx-v4 .section--blog,
.herofx-v4 .section--final-cta{
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
  position: relative;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(66, 229, 254, 0.14), transparent 60%),
    linear-gradient(180deg, #0A1240 0%, #0D1754 45%, #050A2A 100%);
  overflow: hidden;
}
.herofx-v4 .section--final-cta::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(66,229,254,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66,229,254,0.05) 1px, transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 35%, #000 30%, transparent 75%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 35%, #000 30%, transparent 75%);
  pointer-events:none;
}

.herofx-v4 .reveal-up,
.herofx-v4 .hero-eyebrow, .herofx-v4 .hero-eyebrow-icon,
.herofx-v4 .hero-headline, .herofx-v4 .hero-line, .herofx-v4 .hero-word,
.herofx-v4 .hero-sub, .herofx-v4 .hero-microproof,
.herofx-v4 .hero-ctas, .herofx-v4 .hero-ctas > *,
.herofx-v4 .hero-showcase, .herofx-v4 .hero-stack,
.herofx-v4 .stat, .herofx-v4 .stat-num, .herofx-v4 .stat-divider,
.herofx-v4 .scroll-cue,
.herofx-v4 .candle-group, .herofx-v4 .ma-line,
.herofx-v4 .accounts-app, .herofx-v4 .testimonial-card, .herofx-v4 .blog-card,
.herofx-v4 .social-card-pro,
.herofx-v4 .support-channel, .herofx-v4 .affiliate-inner, .herofx-v4 .final-inner {
  opacity: 1 !important;
  transform: none !important;
}

/* CRITICAL FUNCTIONAL ANIMATIONS — typewriter cursor + chat */
.herofx-v4 .hero-typed-cursor {
  animation: cursorBlink 1.1s step-end infinite !important;
}
/* Testimonials marquee removed — replaced with static grid further below. */


.herofx-v4{
  
  --brand-blue: #0C3DEF;
  --brand-blue-2: #1F5BFF;
  --brand-navy: #0D1754;
  --brand-cyan: #42E5FE;

  
  --bg-deep: #03061A;
  --bg-mid: #07103A;
  --bg-glass: rgba(13, 23, 84, 0.4);

  
  --white: #FFFFFF;
  --text-1: #FFFFFF;
  --text-2: rgba(255, 255, 255, 0.78);
  --text-3: rgba(255, 255, 255, 0.55);
  --text-4: rgba(255, 255, 255, 0.35);

  
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  
  --container: 1480px;
}

.herofx-v4 *{ box-sizing: border-box; }



.herofx-v4 a{ color: inherit; text-decoration: none; }
.herofx-v4 button{ font-family: inherit; cursor: pointer; }


.herofx-v4 .hero{
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 120px 0 0;
  overflow: hidden;
  /* Base background (4 baked-in radial gradients) — drawn ONCE, stays static.
     The motion comes from 2 small orbs that drift on top (see below).
     Result: feels alive but only 2 GPU layers (vs 6 in the original). */
  background:
    radial-gradient(ellipse 55% 60% at 18% 28%, rgba(12, 61, 239, 0.55), transparent 65%),
    radial-gradient(ellipse 45% 45% at 82% 18%, rgba(66, 229, 254, 0.20), transparent 65%),
    radial-gradient(ellipse 65% 55% at 75% 82%, rgba(31, 91, 255, 0.35), transparent 65%),
    radial-gradient(ellipse 40% 50% at 10% 95%, rgba(13, 23, 84, 0.55), transparent 65%),
    linear-gradient(180deg, #050A2A 0%, #07103A 60%, #050A2A 100%);
}

/* Hide the elements we never use (mesh, grid, noise, beams) but bring
   back .hero-orb so we have moving life on top of the static gradient. */
.herofx-v4 .hero-bg{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.herofx-v4 .hero-mesh,
.herofx-v4 .hero-grid,
.herofx-v4 .hero-noise,
.herofx-v4 .hero-beam{ display: none !important; }

/* Two slow-drifting orbs ONLY — small (320px) + light blur (40px) =
   tiny GPU cost vs the 6 original heavy layers. Use `transform` keyframes
   (compositor-only, no paint, no layout). */
.herofx-v4 .hero-orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
}
.herofx-v4 .hero-orb-1{
  width: 320px;
  height: 320px;
  top: -60px;
  left: -60px;
  background: radial-gradient(circle, rgba(12, 61, 239, 0.55), transparent 70%);
  /* STATIC on purpose: this orb sits directly UNDER the glass (backdrop-filter)
     header. If it drifts, the header must re-blur its backdrop every frame —
     keeping it still lets the browser cache the blur between frames. */
}
.herofx-v4 .hero-orb-2{
  width: 280px;
  height: 280px;
  bottom: -80px;
  right: -50px;
  background: radial-gradient(circle, rgba(66, 229, 254, 0.35), transparent 70%);
  animation: heroOrbDrift2 22s ease-in-out infinite alternate;
}
@keyframes heroOrbDrift1 {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(40px, 30px, 0); }
  100% { transform: translate3d(0, 60px, 0); }
}
@keyframes heroOrbDrift2 {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-30px, -40px, 0); }
  100% { transform: translate3d(20px, -20px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .herofx-v4 .hero-orb{ animation: none !important; }
}





.herofx-v4 .hero-stage{
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding-inline: 21px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  flex: 1;
  padding-bottom: 60px;
}
.herofx-v4 .hero-text{
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 1024px) {
  .herofx-v4 .hero-stage{
    grid-template-columns: 1fr;
    gap: 56px;
    text-align: center;
  }
  .herofx-v4 .hero-text{ align-items: center; text-align: center; }
  .herofx-v4 .hero-showcase{ align-items: center; }
}


.herofx-v4 .hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  margin: 0 0 36px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-10px);
}
.herofx-v4 .hero-eyebrow-icon{
  width: 13px;
  height: 13px;
  color: var(--brand-cyan);
  flex-shrink: 0;
}


.herofx-v4 .hero-headline{
  font-size: clamp(40px, 5.5vw, 80px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.012em;
  margin: 0 0 26px;
  color: var(--text-1);
}
.herofx-v4 .hero-line{
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  white-space: nowrap;
}
.herofx-v4 .hero-line span{
  display: inline-block;
}
@media (max-width: 1240px) {
  .herofx-v4 .hero-headline{ font-size: clamp(36px, 5vw, 60px); }
}
@media (max-width: 540px) {
  .herofx-v4 .hero-line{ white-space: normal; }
}


.herofx-v4 .hero-grad{
  background-image: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan)); background-size: 150% 100%; background-position: center; background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}



.herofx-v4 .hero-sub{
  font-size:clamp(19px, 1.6vw, 24px);
  line-height:1.35;
  color: var(--text-2);
  max-width:700px;
  margin: 0 0 36px;
  font-weight: 400;
}
/* Desktop (side-by-side hero): the sub column matches the H1's rendered
   width (~7.95em of the H1 clamp, hence 43.75vw capped at 636px) so the
   headline and the paragraph read as one aligned block */
@media (min-width: 1025px){
  .herofx-v4 .hero-sub{ max-width: min(43.75vw, 636px); }
}
/* Keeps a compound word on one line so it never splits at its own hyphen */
.herofx-v4 .keep-together{ white-space: nowrap; }


.herofx-v4 .hero-ctas{
  display: flex;
  gap: 14px;
  margin-bottom: 36px;
  flex-wrap: wrap;
  justify-content: center;
}

.herofx-v4 .btn-primary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 17px 30px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-2));
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.2) inset,
    0 12px 32px -10px rgba(12, 61, 239, 0.7),
    0 0 60px -10px rgba(66, 229, 254, 0.25);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}
.herofx-v4 .btn-primary::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.herofx-v4 .btn-primary:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.25) inset,
    0 18px 44px -10px rgba(12, 61, 239, 0.85),
    0 0 80px -10px rgba(66, 229, 254, 0.4);
}
.herofx-v4 .btn-primary:hover::before{ opacity: 1; }
.herofx-v4 .btn-primary svg{ transition: transform 0.3s var(--ease); }
.herofx-v4 .btn-primary:hover svg{ transform: translateX(3px); }

.herofx-v4 .btn-ghost{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 17px 26px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-1);
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: all 0.3s var(--ease);
}
.herofx-v4 .btn-ghost:hover{
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}


.herofx-v4 .hero-microproof{
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--text-3);
}
.herofx-v4 .hero-stack{
  display: inline-flex;
}
.herofx-v4 .hero-stack-avatar{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--bg-deep);
  margin-left: -10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  object-fit: cover;
  display: block;
}
.herofx-v4 .hero-stack-avatar:first-child{ margin-left: 0; }
.herofx-v4 .hero-microproof-text strong{ color: var(--text-1); font-weight: 600; }


.herofx-v4 .hero-typed-wrap{
  display: inline-flex;
  align-items: baseline;
}
.herofx-v4 .hero-typed{
  color: var(--text-1);
  font-weight: 600;
  white-space: nowrap;
}
.herofx-v4 .hero-cursor{
  display: inline-block;
  width: 2px;
  height: 0.95em;
  background: var(--brand-cyan);
  margin-left: 3px;
  margin-bottom: -2px;
  box-shadow: 0 0 6px rgba(66, 229, 254, 0.8);
  animation: cursorBlink 1s steps(2, start) infinite;
}
@keyframes cursorBlink {
  to { visibility: hidden; }
}


.herofx-v4 .stat-bar{
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 32px));
  max-width: 1240px;
  margin: 0 auto;
  padding: 36px 21px 36px;
}


.herofx-v4 .stat-track{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}
/* Hide duplicate stats by default (only shown in marquee mode below 1240px).
   !important needed because the new generic `.stat { display: flex }` rule
   would otherwise override this (same specificity, later in stylesheet). */
.herofx-v4 .stat--dupe,.herofx-v4 .stat-divider--dupe{ display: none !important; }

.herofx-v4 .stat-bar::before{
  content: "";
  position: absolute;
  inset: 0 -50vw;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 100% at 50% 50%, rgba(12, 61, 239, 0.18), transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(7, 16, 58, 0.45) 100%);
}

.herofx-v4 .stat-bar::after{
  content: "";
  position: absolute;
  top: 0; left: 5%; right: 5%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 20%,
    rgba(66, 229, 254, 0.22) 50%,
    rgba(255, 255, 255, 0.08) 80%,
    transparent 100%);
}

.herofx-v4 .stat{
  /* EXPLICIT flex column — guarantees stat-num and stat-label always stack
     vertically, regardless of how each child renders internally. Previously
     they relied on default block-stacking which occasionally collapsed
     during the marquee animation on certain viewport widths, causing
     "From -0.4 pips Raw Spread" to briefly render on a single line. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.herofx-v4 .stat:not(.stat--dupe){
  opacity: 0;
  transform: translateY(20px);
}

.herofx-v4 .stat-num{
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  margin-bottom: 10px;
  /* Inside .stat flex column: stat-num is its own row. Still inline-flex
     internally to keep spans aligned on baseline. */
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
  transform-origin: center bottom;
  /* Defensive: stop margins from breaking flex layout */
  flex-shrink: 0;
}
/* Defensive: stat-label is explicitly its own block on a new row */
.herofx-v4 .stat-label{
  display: block;
  flex-shrink: 0;
}
.herofx-v4 .stat-prefix,.herofx-v4 .stat-suffix{
  font-size: 0.5em;
  font-weight: 500;
  color: var(--text-3);
  margin-left: 4px;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.herofx-v4 .stat-prefix{
  margin-right: 6px;
  margin-left: 0;
}

.herofx-v4 .stat-sign{
  display: inline-block;
  margin-right: 1px;
}

.herofx-v4 .stat-label{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}


.herofx-v4 .stat-divider{
  width: 1px;
  height: 50px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--border-strong) 50%,
    transparent 100%);
  align-self: center;
  opacity: 0;
}


.herofx-v4 .hero-scroll-cue{
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-4);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 3;
  opacity: 0;
}
.herofx-v4 .hero-scroll-line{
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, var(--text-4), transparent);
  position: relative;
  overflow: hidden;
}
.herofx-v4 .hero-scroll-line::after{
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  width: 1px;
  height: 16px;
  background: linear-gradient(180deg, transparent, var(--brand-cyan));
}



.herofx-v4 .hero-showcase{
  position: relative;
  /* Content sits 21px inside the frame but the header bar only 4px:
     the extra 17px lets the card end flush with the bar's right edge.
     (A negative margin cannot move a grid item with an explicit width.) */
  width: calc(100% + 17px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.herofx-v4 .showcase{
  position: relative;
  width: 100%;
  height: 520px;
  max-width: 520px;
}


.herofx-v4 .showcase-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(40px) scale(0.96);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  pointer-events: none;
  text-decoration: none;
  display: block;
}
.herofx-v4 .showcase-slide.active-state{
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}
.herofx-v4 .showcase-slide.leaving-state{
  opacity: 0;
  transform: translateX(-40px) scale(0.96);
}

.herofx-v4 .showcase-card{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 30px 80px -20px rgba(0,0,0,0.6),
    0 0 100px -30px rgba(12, 61, 239, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  /* GPU-friendly: only transform/box-shadow/border-color/opacity transition.
     We DON'T transition background to avoid forcing a paint on every frame —
     instead we layer a blue tint via ::after which only animates opacity. */
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.herofx-v4 .showcase-card::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(31, 91, 255, 0.32) 0%, rgba(12, 61, 239, 0.18) 100%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.herofx-v4 .showcase-slide.active-state:hover .showcase-card{
  transform: translateY(-4px);
  border-color: rgba(120, 160, 255, 0.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.16) inset,
    0 40px 100px -20px rgba(0,0,0,0.7),
    0 0 140px -30px rgba(12, 61, 239, 0.85);
}
.herofx-v4 .showcase-slide.active-state:hover .showcase-card::after{ opacity: 1; }
.herofx-v4 .showcase-slide.active-state:hover .showcase-cta{
  background: rgba(31, 91, 255, 0.32);
  border-color: rgba(120, 160, 255, 0.6);
  color: #FFFFFF;
}
.herofx-v4 .showcase-slide.active-state:hover .showcase-cta svg{
  transform: translateX(3px);
}


.herofx-v4 .showcase-card-glow{
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
/* All glows use brand blue/cyan only — never gold/yellow */
.herofx-v4 .showcase-card-hero10x    .showcase-card-glow{ background: radial-gradient(ellipse at top right,    rgba(66, 229, 254, 0.35), transparent 65%), radial-gradient(ellipse at bottom left,  rgba(12, 61, 239, 0.45), transparent 65%); }
.herofx-v4 .showcase-card-bonus      .showcase-card-glow{ background: radial-gradient(ellipse at top left,     rgba(31, 91, 255, 0.45), transparent 65%), radial-gradient(ellipse at bottom right, rgba(66, 229, 254, 0.30), transparent 65%); }
.herofx-v4 .showcase-card-affiliates .showcase-card-glow{ background: radial-gradient(ellipse at bottom right, rgba(12, 61, 239, 0.45), transparent 65%), radial-gradient(ellipse at top left,     rgba(66, 229, 254, 0.28), transparent 65%); }
.herofx-v4 .showcase-card-demo       .showcase-card-glow{ background: radial-gradient(ellipse at top,          rgba(66, 229, 254, 0.30), transparent 60%), radial-gradient(ellipse at bottom right, rgba(12, 61, 239, 0.45), transparent 60%); }
.herofx-v4 .showcase-card-start      .showcase-card-glow{ background: radial-gradient(ellipse at top right,    rgba(66, 229, 254, 0.40), transparent 60%), radial-gradient(ellipse at bottom left,  rgba(12, 61, 239, 0.50), transparent 60%); }


.herofx-v4 .showcase-image{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate; 
}
.herofx-v4 .showcase-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  display: block;
}


.herofx-v4 .showcase-title{
  position: relative;
  z-index: 1;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-1);
  margin: 24px 0 10px;
  /* auto anchors the text block to the card bottom; the padding keeps a
     minimum gap to the photo even on the tightest slide */
  margin-top: auto;
  padding-top: 14px;
}

.herofx-v4 .showcase-desc{
  position: relative;
  z-index: 1;
  font-size:16px;
  line-height:1.5;
  color: var(--text-2);
  margin: 0 0 16px;
}
.herofx-v4 .showcase-desc strong{ color: var(--text-1); font-weight: 600; }


.herofx-v4 .showcase-cta{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  transition: all 0.3s var(--ease);
}
.herofx-v4 .showcase-cta svg{ transition: transform 0.3s var(--ease); }


.herofx-v4 .showcase-bonus-visual{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 290px;
  margin-bottom: 0;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at center, rgba(66, 229, 254, 0.22), transparent 70%),
    linear-gradient(135deg, rgba(12, 61, 239, 0.4), rgba(31, 91, 255, 0.2));
  border: 1px solid rgba(66, 229, 254, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  overflow: hidden;
}
.herofx-v4 .showcase-bonus-stack{
  position: relative;
  width: 96px;
  height: 64px;
}
.herofx-v4 .showcase-bonus-coin{
  position: absolute;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FFD86E, #E5A015 60%, #C68310 100%);
  border: 3px solid #FFE89A;
  box-shadow:
    0 0 20px rgba(255, 184, 30, 0.4),
    inset 0 -4px 12px rgba(0, 0, 0, 0.3),
    inset 0 4px 12px rgba(255, 255, 255, 0.5);
}
.herofx-v4 .showcase-bonus-coin:nth-child(1){ left: 0;   top: 14px; transform: rotate(-8deg); }
.herofx-v4 .showcase-bonus-coin:nth-child(2){ left: 28px; top: 0;  z-index: 2; }
.herofx-v4 .showcase-bonus-coin:nth-child(3){ left: 56px; top: 14px; transform: rotate(8deg); }
.herofx-v4 .showcase-bonus-text{ text-align: center; }
.herofx-v4 .showcase-bonus-percent{
  display: block;
  font-size: 50px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #42E5FE, #0C3DEF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.herofx-v4 .showcase-bonus-label{
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-3);
  margin-top: 6px;
}


.herofx-v4 .showcase-demo-visual{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 290px;
  margin-bottom: 0;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at center, rgba(255, 184, 30, 0.16), transparent 70%),
    linear-gradient(135deg, rgba(13, 23, 84, 0.6), rgba(7, 16, 58, 0.8));
  border: 1px solid rgba(255, 184, 30, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  overflow: hidden;
  padding: 0 28px;
}
.herofx-v4 .showcase-demo-trophy{
  width: 84px;
  height: 84px;
  color: #FFD86E;
  filter: drop-shadow(0 0 24px rgba(255, 184, 30, 0.5));
  flex-shrink: 0;
}
.herofx-v4 .showcase-demo-prize{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.herofx-v4 .showcase-demo-tag{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #FFD86E;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(255, 216, 110, 0.1);
  border: 1px solid rgba(255, 216, 110, 0.25);
  border-radius: 100px;
  margin-bottom: 4px;
}
.herofx-v4 .showcase-demo-amount{
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #FFE89A, #FFB81E);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.herofx-v4 .showcase-demo-sub{
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-3);
  text-transform: uppercase;
}


.herofx-v4 .showcase-start-visual{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 290px;
  margin-bottom: 0;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at top, rgba(66, 229, 254, 0.18), transparent 60%),
    linear-gradient(135deg, rgba(12, 61, 239, 0.35), rgba(31, 91, 255, 0.15));
  border: 1px solid rgba(66, 229, 254, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 28px;
  overflow: hidden;
}
.herofx-v4 .showcase-start-spark{
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-2));
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 0 0 6px rgba(66, 229, 254, 0.08),
    0 0 30px rgba(66, 229, 254, 0.4);
}
.herofx-v4 .showcase-start-spark svg{
  width: 28px;
  height: 28px;
  color: #FFFFFF;
}
.herofx-v4 .showcase-start-checks{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 320px;
}
.herofx-v4 .showcase-start-checks li{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: var(--text-2);
}
.herofx-v4 .showcase-start-checks li .check{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(66, 229, 254, 0.15);
  border: 1px solid rgba(66, 229, 254, 0.4);
  color: var(--brand-cyan);
}
.herofx-v4 .showcase-start-checks li .check svg{
  width: 12px;
  height: 12px;
}
.herofx-v4 .showcase-start-checks li .text strong{
  color: var(--text-1);
  font-weight: 600;
}


.herofx-v4 .showcase-nav{
  display: flex;
  gap: 10px;
  margin-top: 24px;
  justify-content: center;
  width: 100%;
  max-width: 520px;   /* matches .showcase width so the dots stay centered under the card despite flex-end */
}
.herofx-v4 .showcase-dot{
  width: 36px;
  height: 4px;
  border-radius: 100px;
  border: 0;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.4s var(--ease);
  padding: 0;
}
.herofx-v4 .showcase-dot.active-state{
  background: var(--brand-cyan);
  width: 56px;
  box-shadow: 0 0 12px rgba(66, 229, 254, 0.5);
}
.herofx-v4 .showcase-dot:hover{ background: rgba(255, 255, 255, 0.4); }
.herofx-v4 .showcase-dot.active-state:hover{ background: var(--brand-cyan); }


@media (max-width: 1024px) {
  .herofx-v4 .hero-showcase{ max-width: 520px; margin: 0 auto; width: 100%; }
  .herofx-v4 .showcase{ height: 540px; }

  
  .herofx-v4 .showcase-card{ text-align: center; }
  .herofx-v4 .showcase-desc{ text-align: center; }
  .herofx-v4 .showcase-cta{
    align-self: center;
    width: 100%;
    max-width: 280px;
    justify-content: center;
    padding: 14px 18px;
  }
}
@media (max-width: 540px) {
  
  .herofx-v4 .showcase{
    height: auto;
    min-height: auto;
  }
  .herofx-v4 .showcase-slide{
    position: relative;
    inset: auto;
    width: 100%;
    display: none;
  }
  .herofx-v4 .showcase-slide.active-state{
    display: block;
  }
  .herofx-v4 .showcase-card{
    padding: 20px;
    text-align: center;
    height: auto;
    min-height: 0;
  }
  .herofx-v4 .showcase-title{
    font-size: 22px;
    margin-top: 18px; 
    margin-bottom: 10px;
  }
  .herofx-v4 .showcase-desc{
    text-align: center;
    font-size: 13.5px;
    margin-bottom: 16px;
    flex: 0 0 auto;
  }
  .herofx-v4 .showcase-cta{
    align-self: center;
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    margin-bottom: 0;
  }

  .herofx-v4 .showcase-image,.herofx-v4 .showcase-bonus-visual,.herofx-v4 .showcase-demo-visual,.herofx-v4 .showcase-start-visual{
    height: 200px;
  }
  .herofx-v4 .showcase-bonus-percent{ font-size: 38px; }
  .herofx-v4 .showcase-demo-trophy{ width: 56px; height: 56px; }
  .herofx-v4 .showcase-demo-amount{ font-size: 20px; }
  .herofx-v4 .showcase-start-spark{ width: 44px; height: 44px; }
  .herofx-v4 .showcase-start-spark svg{ width: 22px; height: 22px; }
  .herofx-v4 .showcase-start-checks li{ font-size: 12px; gap: 8px; }
  .herofx-v4 .showcase-start-visual{ gap: 14px; padding: 18px; }
}


.herofx-v4 .section{
  position: relative;
  width: 100%;
  padding: 140px 24px;
  overflow: hidden;
}
.herofx-v4 .section-inner{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}


.herofx-v4 .section-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 20px;
}
.herofx-v4 .eyebrow-line{
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-blue));
}

.herofx-v4 .section-headline{
  font-size: clamp(36px, 5vw, 60px);
  font-weight:700;
  line-height:1.07;
  letter-spacing:-0.012em;
  margin: 0 0 24px;
  
  padding: 0.05em 0 0.15em;
}
.herofx-v4 .section-headline .word{
  display: inline-block;
  margin-right: 0.2em;
  
  padding-bottom: 0.08em;
}

.herofx-v4 .grad-light{
  background-image: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan)); background-size: 150% 100%; background-position: center; background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.herofx-v4 .section-lead{
  font-size:clamp(19px, 1.6vw, 24px);
  line-height:1.35;
  max-width:700px;
  margin: 0;
}

/* ===== COPY POLISH — no lonely words / no broken words =====
   `balance` evens out multi-line headings so the last line never has a
   single orphan word; `pretty` does the same for body/lead paragraphs.
   Progressive enhancement (ignored where unsupported). `hyphens:manual`
   stops the browser from chopping a word mid-line with a hyphen. */
.herofx-v4 .section-headline,
.herofx-v4 .affiliate-headline,
.herofx-v4 .final-headline,
.herofx-v4 .social-section-head h3,
.herofx-v4 .account-panel-title,
.herofx-v4 .value-title,
.herofx-v4 .start-step-title{ text-wrap: balance; }
.herofx-v4 .section-lead,
.herofx-v4 .hero-sub,
.herofx-v4 .social-section-head p,
.herofx-v4 .value-desc{ text-wrap: pretty; }
.herofx-v4 .section-headline,
.herofx-v4 .section-lead,
.herofx-v4 .hero-headline,
.herofx-v4 .hero-sub{ hyphens: manual; -webkit-hyphens: manual; }


.herofx-v4 .reveal-up{}


.herofx-v4 .section--values{
  background: #FFFFFF;
  color: #0D1754;
}
.herofx-v4 .section--values .section-headline{ color: #0D1754; }

.herofx-v4 .section--values .section-lead{
  color: #0D1754;
  font-weight: 500;
}
.herofx-v4 .section--values .section-lead strong{ font-weight: 700; }

.herofx-v4 .values-head{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 72px;
}
.herofx-v4 .values-head .section-lead{ text-align: center; margin: 0 auto; }


.herofx-v4 .values-wrap{
  position: relative;
  padding: 1.5px;
  border-radius: 28px;
  /* Cleaner subtle blue gradient frame — no white-mid stop, no busy
     multi-glass layering. Simpler reads more premium. */
  background: linear-gradient(135deg,
    rgba(12, 61, 239, 0.22),
    rgba(66, 229, 254, 0.18) 50%,
    rgba(12, 61, 239, 0.22));
  box-shadow:
    0 30px 70px -28px rgba(13, 23, 84, 0.16),
    0 0 60px -20px rgba(12, 61, 239, 0.18);
  margin-bottom: 56px;
}
.herofx-v4 .values-wrap::before{ content: none; }
.herofx-v4 .values-wrap-inner{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #FFFFFF;
  border-radius: 26.5px;
  overflow: hidden;
}

/* CHOREOGRAPHED HEADLINE REVEAL — each word arrives DRAMATICALLY from a
   different direction, with bigger contrast (huge ‚Üí small) and a slight
   spring overshoot. Sequence is clearly visible (no overlap) so the user
   actually sees each word land:
     0.10s — Innovation lands from above
     0.85s — Community lands from below (different direction = drama)
     1.55s — Integrity lands from the right
   Each animation lasts 0.7s with a back-out spring for the bouncy "land". */
.herofx-v4 .values-head .section-headline{
  perspective: 1400px;
}
.herofx-v4 .values-head .word{
  display: inline-block;
  opacity: 0;
}
/* GPU-only reveal (transform + opacity, no blur) — snappier & no repaint jank */
@keyframes wordLand1 {
  0%   { opacity: 0; transform: translateY(-54px) scale(1.35); }
  60%  { opacity: 1; transform: translateY(0) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wordLand2 {
  0%   { opacity: 0; transform: translateY(54px) scale(1.35); }
  60%  { opacity: 1; transform: translateY(0) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wordLand3 {
  0%   { opacity: 0; transform: translateX(80px) scale(1.3); }
  60%  { opacity: 1; transform: translateX(0) scale(1.05); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.herofx-v4 .values-head.revealed-state .word:nth-child(1){
  animation: wordLand1 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s forwards;
}
.herofx-v4 .values-head.revealed-state .word:nth-child(2){
  animation: wordLand2 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.28s forwards;
}
.herofx-v4 .values-head.revealed-state .word:nth-child(3){
  animation: wordLand3 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.50s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .herofx-v4 .values-head .word{ opacity: 1; animation: none !important; }
}


.herofx-v4 .value-card{
  position: relative;
  padding: 32px 28px 28px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: background 0.3s var(--ease);
}
.herofx-v4 .value-card + .value-card{
  border-left: 1px solid rgba(13, 23, 84, 0.08);
}
.herofx-v4 .value-card:hover{
  background: rgba(12, 61, 239, 0.02);
}

.herofx-v4 .value-card:hover .value-image img{
  transform: translateY(-3px);
}


.herofx-v4 .value-image{
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
}
.herofx-v4 .value-image img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.5s var(--ease);
}


.herofx-v4 .value-image--raw img{
  transform: scale(0.88);
}
.herofx-v4 .value-card:hover .value-image--raw img{
  transform: scale(0.88) translateY(-3px);
}


.herofx-v4 .value-image--withdraw img{
  transform: scale(1);
  padding: 12px;
}
.herofx-v4 .value-card:hover .value-image--withdraw img{
  transform: translateY(-3px);
}

.herofx-v4 .value-text{ flex: 1; }

.herofx-v4 .value-title{
  font-size: 19px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 12px !important;
  color: #0D1754;
}
.herofx-v4 .value-desc{
  font-size:16px;
  line-height:1.5;
  color: rgba(13, 23, 84, 0.6);
  margin: 0;
}


.herofx-v4 .powered-by{
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid rgba(13, 23, 84, 0.08);
}
.herofx-v4 .powered-by-label{
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(13, 23, 84, 0.5);
  margin-bottom: 18px;
}
.herofx-v4 .powered-by-pills{
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.herofx-v4 .platform-pill{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: #FFFFFF;
  border: 1px solid rgba(13, 23, 84, 0.1);
  border-radius: 100px;
  text-decoration: none;
  color: #0D1754;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  box-shadow: 0 4px 12px -4px rgba(13, 23, 84, 0.08);
}
.herofx-v4 .platform-pill:hover{
  transform: translateY(-2px);
  border-color: rgba(12, 61, 239, 0.3);
  box-shadow: 0 12px 28px -8px rgba(12, 61, 239, 0.2);
}
.herofx-v4 .platform-pill img{
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.herofx-v4 .powered-by-note{
  font-size: 13px;
  color: rgba(13, 23, 84, 0.5);
  margin: 16px 0 0;
}


@media (max-width: 720px) {
  .herofx-v4 .values-wrap-inner{ grid-template-columns: 1fr; }
  .herofx-v4 .value-card + .value-card{
    border-left: 0;
    border-top: 1px solid rgba(13, 23, 84, 0.08);
  }
  .herofx-v4 .value-image{ height: 200px; }
  .herofx-v4 .value-card{ padding: 24px 22px; }
}


.herofx-v4 .section--accounts{
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(12, 61, 239, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(66, 229, 254, 0.12), transparent 60%),
    linear-gradient(180deg, #07103A 0%, #050A2A 100%);
  color: var(--text-1);
  position: relative;
}

.herofx-v4 .section--accounts::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateZ(0);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 80%);
}
.herofx-v4 .section--accounts > .section-inner{ position: relative; z-index: 1; }


.herofx-v4 .accounts-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  
  mask-image: linear-gradient(180deg, transparent 0%, black 14%, black 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 14%, black 86%, transparent 100%);
}


.herofx-v4 .accounts-candles{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.6;
  transform: translateZ(0);
}


.herofx-v4 .accounts-candles .candle-grid line{
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
}


.herofx-v4 .accounts-candles .candle-group{
  transform-origin: center bottom;
  transform-box: fill-box;
  opacity: 0;
}



.herofx-v4 .accounts-candles .wick{
  stroke-width: 1.5;
  stroke-linecap: round;
}
.herofx-v4 .accounts-candles .candle-group.up   .wick{ stroke: rgba(74, 222, 128, 0.7); }
.herofx-v4 .accounts-candles .candle-group.down .wick{ stroke: rgba(248, 113, 113, 0.65); }
.herofx-v4 .accounts-candles .body{ stroke-width: 1; }
.herofx-v4 .accounts-candles .candle-group.up   .body{
  fill: rgba(74, 222, 128, 0.55);
  stroke: rgba(74, 222, 128, 0.85);
}
.herofx-v4 .accounts-candles .candle-group.down .body{
  fill: rgba(248, 113, 113, 0.5);
  stroke: rgba(248, 113, 113, 0.8);
}


.herofx-v4 .accounts-candles .ma-line{
  stroke: var(--brand-cyan);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1900;
  stroke-dashoffset: 1900;
  opacity: 0;
}




@media (max-width: 720px) {
  .herofx-v4 .accounts-candles{ opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .herofx-v4 .accounts-candles .candle-group,.herofx-v4 .accounts-candles .ma-line{ animation: none; }
  .herofx-v4 .accounts-candles .candle-group{ opacity: 1; transform: scaleY(1); }
  .herofx-v4 .accounts-candles .ma-line{ stroke-dashoffset: 0; opacity: 0.7; }
}

.herofx-v4 .section--accounts .section-eyebrow{ color: var(--brand-cyan); }
.herofx-v4 .section--accounts .section-eyebrow .eyebrow-line{
  background: linear-gradient(90deg, transparent, var(--brand-cyan));
}
.herofx-v4 .section--accounts .section-headline{ color: var(--text-1); }
.herofx-v4 .section--accounts .section-lead{ color: var(--text-2); }
.herofx-v4 .grad-dark{
  background-image: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan)); background-size: 150% 100%; background-position: center; background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-bottom: 0.08em;
}

.herofx-v4 .accounts-head{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 64px;
}
.herofx-v4 .accounts-head .section-lead{ text-align: center; margin: 0 auto; }


.herofx-v4 .accounts-app{
  position: relative;
  border-radius: 32px;
  padding: 1.5px;
  background: linear-gradient(135deg,
    rgba(12, 61, 239, 0.55) 0%,
    rgba(66, 229, 254, 0.45) 25%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(66, 229, 254, 0.4) 75%,
    rgba(12, 61, 239, 0.55) 100%);
  box-shadow:
    0 40px 100px -30px rgba(0, 0, 0, 0.65),
    0 16px 50px -16px rgba(12, 61, 239, 0.35),
    0 0 140px -30px rgba(66, 229, 254, 0.35);
}

.herofx-v4 .accounts-app::before{
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.85),
    transparent);
  pointer-events: none;
  border-radius: 32px 32px 0 0;
  z-index: 2;
}

.herofx-v4 .accounts-app-inner{
  display: grid;
  grid-template-columns: minmax(320px, 380px) 1fr;
  gap: 24px;
  background:
    linear-gradient(180deg, rgba(13, 23, 84, 0.55), rgba(5, 10, 42, 0.7));
  border-radius: 30.5px;
  padding: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 -1px 0 rgba(255, 255, 255, 0.04) inset;
}


.herofx-v4 .accounts-tabs{
  display: flex;
  flex-direction: column;
  gap: 6px;
  
  justify-content: center;
  padding: 12px 0;
}
.herofx-v4 .accounts-tabs-header{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 8px 20px 14px;
  margin: 0;
}

.herofx-v4 .account-tab{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 17px 20px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.3s var(--ease);
  position: relative;
}
.herofx-v4 .account-tab:hover{
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-1);
}
.herofx-v4 .account-tab:hover .account-tab-icon{
  background: rgba(66, 229, 254, 0.1);
  border-color: rgba(66, 229, 254, 0.25);
  color: var(--brand-cyan);
}
.herofx-v4 .account-tab.active-state{
  background:
    linear-gradient(135deg, rgba(12, 61, 239, 0.18), rgba(66, 229, 254, 0.08));
  border-color: rgba(66, 229, 254, 0.3);
  color: var(--text-1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 8px 24px -10px rgba(12, 61, 239, 0.4),
    0 0 60px -20px rgba(66, 229, 254, 0.5);
}
.herofx-v4 .account-tab.active-state .account-tab-icon{
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-2));
  border-color: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}


.herofx-v4 .account-tab-icon{
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--text-2);
  flex-shrink: 0;
  transition: all 0.3s var(--ease);
}
.herofx-v4 .account-tab-icon svg{ width: 20px; height: 20px; }

.herofx-v4 .account-tab-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.herofx-v4 .account-tab-title{
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.herofx-v4 .account-tab-tag{
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0;
}
.herofx-v4 .account-tab.active-state .account-tab-tag{ color: var(--brand-cyan); }

.herofx-v4 .account-tab-arrow{
  color: var(--text-3);
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.3s var(--ease);
  flex-shrink: 0;
}
.herofx-v4 .account-tab.active-state .account-tab-arrow{
  color: var(--brand-cyan);
  opacity: 1;
  transform: translateX(0);
}
.herofx-v4 .account-tab:hover .account-tab-arrow{
  opacity: 0.6;
  transform: translateX(0);
}


.herofx-v4 .accounts-panels{
  display: grid;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}

/* Smooth, snappy panel transitions — no blur (was causing rasterize lag),
   no spring overshoot (felt sluggish on click), no per-element stagger
   (cumulative delay = ~0.4s before button appeared, felt unresponsive).
   Now: simple opacity + small translate, fast 0.3s ease-out. Click feels
   instant, panel slides cleanly into place. */
.herofx-v4 .account-panel{
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}
.herofx-v4 .account-panel.active-state{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


.herofx-v4 .account-panel-image{
  width: 100%;
  height: 320px;
  flex-shrink: 0;
  background:
    radial-gradient(ellipse at center, rgba(66, 229, 254, 0.1), transparent 70%),
    linear-gradient(135deg, #0F1A50 0%, #1F2D6F 50%, #0F1A50 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.herofx-v4 .account-panel-image img{
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}

/* --- 2026-06-29 homepage polish --- */
/* bonus + hero10x se ven mas pequenos/altos por su ratio/aire interno -> agrandar + bajar para igualar al resto */
@media (min-width: 1025px){
  .herofx-v4 .account-panel[data-account="bonus"] .account-panel-image img,
  .herofx-v4 .account-panel[data-account="hero10x"] .account-panel-image img{
    max-width: 100%; max-height: 100%;
    /* The artwork inside these PNGs is top-heavy (transparent padding at the
       bottom of the file), so shift down to look visually centered */
    transform: translateY(8%);
  }
}
/* saltos de linea controlados en leads (solo desktop; en movil flujo natural) */
@media (max-width: 1024px){ .herofx-v4 .lead-br{ display: none; } }

.herofx-v4 .account-panel-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px 32px;
}
.herofx-v4 .account-panel-title{
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--text-1);
}
.herofx-v4 .account-panel-desc{
  font-size:16px;
  line-height:1.5;
  color: var(--text-2);
  margin: 0 0 20px;
}
.herofx-v4 .account-panel-desc strong{ color: var(--text-1); font-weight: 600; }

.herofx-v4 .account-features{
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.herofx-v4 .account-features li{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-2);
}
.herofx-v4 .account-features .check{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(66, 229, 254, 0.15);
  border: 1px solid rgba(66, 229, 254, 0.4);
  position: relative;
}
.herofx-v4 .account-features .check::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--brand-cyan);
  border-bottom: 2px solid var(--brand-cyan);
  transform: translate(-50%, -65%) rotate(-45deg);
}


.herofx-v4 .btn-account{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  color: var(--brand-cyan);
  font-size: 14px;
  font-weight: 600;
  border: 0;
  text-decoration: none;
  position: relative;
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}

.herofx-v4 .btn-account::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width 0.3s var(--ease);
}
.herofx-v4 .btn-account:hover{
  color: var(--text-1);
  gap: 12px;
}
.herofx-v4 .btn-account:hover::after{ width: calc(100% - 22px); }
.herofx-v4 .btn-account svg{ transition: transform 0.3s var(--ease); }


.herofx-v4 .accounts-cta{
  text-align: center;
  margin-top: 56px;
}
.herofx-v4 .btn-find-account{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 17px 30px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-2));
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.2) inset,
    0 12px 32px -10px rgba(12, 61, 239, 0.7),
    0 0 60px -10px rgba(66, 229, 254, 0.25);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}
.herofx-v4 .btn-find-account::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.herofx-v4 .btn-find-account:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.25) inset,
    0 18px 44px -10px rgba(12, 61, 239, 0.85),
    0 0 80px -10px rgba(66, 229, 254, 0.4);
}
.herofx-v4 .btn-find-account:hover::before{ opacity: 1; }
.herofx-v4 .btn-find-account svg{ transition: transform 0.3s var(--ease); }
.herofx-v4 .btn-find-account:hover svg{ transform: translateX(3px); }


@media (max-width: 980px) {
  .herofx-v4 .accounts-app-inner{
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
  }
  /* Prevent grid blowout: let the single column shrink to the box width so the
     scrolling tabs row and the panel image never spill past the card border. */
  .herofx-v4 .accounts-tabs-wrap,
  .herofx-v4 .accounts-panels{
    min-width: 0;
  }


  .herofx-v4 .accounts-tabs-wrap{
    position: relative;
  }

  /* Dark gradient overlay REMOVED — the pulsing chevron alone is enough
     to signal "swipe for more". The overlay looked too heavy. */
  .herofx-v4 .accounts-tabs-wrap::after{
    display: none;
  }
  /* Pulsing chevron on the right edge — tells user to swipe for more tabs */
  .herofx-v4 .accounts-tabs-wrap::before{
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-right: 2px solid rgba(66, 229, 254, 0.85);
    border-top: 2px solid rgba(66, 229, 254, 0.85);
    transform: rotate(45deg);
    z-index: 3;
    pointer-events: none;
    animation: tabSwipeHint 1.6s ease-in-out infinite;
  }
  @keyframes tabSwipeHint {
    0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.55; }
    50%      { transform: rotate(45deg) translate(4px, -4px); opacity: 1; }
  }
  .herofx-v4 .accounts-tabs-wrap[data-scrolled="end"]::after,
  .herofx-v4 .accounts-tabs-wrap[data-scrolled="end"]::before{ opacity: 0; }

  
  .herofx-v4 .accounts-tabs{
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    padding: 4px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    
  }
  .herofx-v4 .accounts-tabs::-webkit-scrollbar{ display: none; }
  .herofx-v4 .accounts-tabs-header{ display: none; }
  .herofx-v4 .accounts-tabs.scroll-hint{
    animation: scrollHint 1.4s ease-in-out 0.4s 1 both;
  }
  

  
  .herofx-v4 .account-tab{
    flex: 0 0 auto;
    grid-template-columns: auto auto;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 100px;
    /* Stronger contrast — was nearly invisible on mobile (0.03 opacity)
       Now solid panel-like pill with clear border. */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--text-1);
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .herofx-v4 .account-tab.active-state{
    background: linear-gradient(135deg, rgba(12, 61, 239, 0.55), rgba(66, 229, 254, 0.3));
    border-color: rgba(66, 229, 254, 0.7);
    /* No box-shadow on mobile — was rendering as a visible "ring" around
       the pill due to the scroll container clipping. Border + bg pop is enough. */
    box-shadow: none;
  }
  .herofx-v4 .account-tab-icon{
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
  .herofx-v4 .account-tab-icon svg{ width: 16px; height: 16px; }
  
  .herofx-v4 .account-tab-tag{ display: none; }
  .herofx-v4 .account-tab-arrow{ display: none; }
  .herofx-v4 .account-tab-text{
    flex-direction: row;
  }
  .herofx-v4 .account-tab-title{
    font-size: 14px;
    font-weight: 600;
  }

  
  .herofx-v4 .accounts-panels{
    border-radius: 16px;
  }
  .herofx-v4 .account-panel-image{ height: 240px; }
  /* Bigger image on mobile — was max-width 90% + 20px padding = ~70% effective.
     Now near-full bleed so the bonus / hero10x / raw artworks are readable. */
  .herofx-v4 .account-panel-image img{ padding: 12px; max-width: 96%; max-height: 96%; }
  .herofx-v4 .account-panel-body{ padding: 24px; }
}

@media (max-width: 540px) {
  .herofx-v4 .account-panel-title{ font-size: 22px; }
  .herofx-v4 .account-panel-image{ height: 220px; }
  .herofx-v4 .btn-account{ width: 100%; justify-content: center; }
  .herofx-v4 .btn-find-account{ width: 100%; justify-content: center; padding: 16px 24px; }
  
  .herofx-v4 .account-tab{ padding: 8px 12px; }
  .herofx-v4 .account-tab-title{ font-size: 13px; }
  .herofx-v4 .account-tab-icon{ width: 26px; height: 26px; }
  .herofx-v4 .account-tab-icon svg{ width: 14px; height: 14px; }
}


.herofx-v4 .section--deposits{
  position: relative;
  
  min-height: 100vh;
  padding: 80px 24px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #FFFFFF;
  color: #0D1754;
}
.herofx-v4 .section--deposits .section-inner{ width: 100%; }


.herofx-v4 .deposits-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.herofx-v4 .deposits-orb{
  
  display: none;
}


.herofx-v4 .section--deposits .section-eyebrow{ color: var(--brand-blue); }
.herofx-v4 .section--deposits .section-eyebrow .eyebrow-line{
  background: linear-gradient(90deg, transparent, var(--brand-blue));
}
.herofx-v4 .section--deposits .section-headline{ color: #0D1754; }


.herofx-v4 .deposits-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}


.herofx-v4 .deposits-frame{
  position: absolute;
  top: 56px;
  right: 56px;
  bottom: 56px;
  left: 56px;
  z-index: 0;
  pointer-events: none;
}

.herofx-v4 .frame-corner{
  position: absolute;
  width: 90px;
  height: 90px;
  border: 0 solid rgba(12, 61, 239, 0.5);
}
.herofx-v4 .frame-corner--tl{ top: 0;    left: 0;    border-top-width: 1.5px;  border-left-width: 1.5px; }
.herofx-v4 .frame-corner--tr{ top: 0;    right: 0;   border-top-width: 1.5px;  border-right-width: 1.5px; }
.herofx-v4 .frame-corner--bl{ bottom: 0; left: 0;    border-bottom-width: 1.5px; border-left-width: 1.5px; }
.herofx-v4 .frame-corner--br{ bottom: 0; right: 0;   border-bottom-width: 1.5px; border-right-width: 1.5px; }


.herofx-v4 .frame-side{
  position: absolute;
  background: rgba(12, 61, 239, 0.15);
  pointer-events: none;
}

.herofx-v4 .frame-side--top,.herofx-v4 .frame-side--bottom{
  height: 1px;
  left: 90px;
  right: 90px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
}
.herofx-v4 .frame-side--top{ top: 0; }
.herofx-v4 .frame-side--bottom{ bottom: 0; }

.herofx-v4 .frame-side--left,.herofx-v4 .frame-side--right{
  width: 1px;
  top: 90px;
  bottom: 90px;
  -webkit-mask-image: linear-gradient(180deg, transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, black 20%, black 80%, transparent);
}
.herofx-v4 .frame-side--left{ left: 0; }
.herofx-v4 .frame-side--right{ right: 0; }


@media (max-width: 980px) {
  .herofx-v4 .deposits-frame{ top: 32px; right: 32px; bottom: 32px; left: 32px; }
  .herofx-v4 .frame-corner{ width: 60px; height: 60px; }
  .herofx-v4 .frame-side--top,.herofx-v4 .frame-side--bottom{ left: 60px; right: 60px; }
  .herofx-v4 .frame-side--left,.herofx-v4 .frame-side--right{ top: 60px; bottom: 60px; }
}
@media (max-width: 720px) {
  .herofx-v4 .deposits-frame{ display: none; }
}


/* Parent forces a STABLE square aspect ratio — fixes the orbit "drifting
   out of place" bug at certain viewport widths. With a square parent, the
   orbit always centers correctly regardless of resize. */
.herofx-v4 .deposits-orbit{
  position: absolute;
  /* Use `inset` instead of top/left/width/translate juggling — fully
     stable across resize. The orbit fills the (now square) parent. */
  inset: -5%;
  width: auto;
  height: auto;
  /* Rotate only — no translate to lose. */
  transform: rotate(0deg);
  animation: deposits-orbit-spin 28s linear infinite;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
@keyframes deposits-orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.herofx-v4 .deposits-orbit svg{
  width: 100%;
  height: 100%;
  display: block;
}
/* Hide the inner solid circle (r="44") — keeps only the dashed outer
   ring spinning, cleaner / more premium look per design feedback. */
.herofx-v4 .deposits-orbit svg circle:nth-of-type(2){ display: none; }

.herofx-v4 .deposits-dot{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-blue);
  box-shadow: 0 0 12px rgba(12, 61, 239, 0.5);
  transform: translate(-50%, -50%);
}
.herofx-v4 .deposits-dot-n{ top: 2%;  left: 50%; }
.herofx-v4 .deposits-dot-e{ top: 50%; left: 98%; background: var(--brand-cyan); box-shadow: 0 0 12px rgba(66, 229, 254, 0.7); }
.herofx-v4 .deposits-dot-s{ top: 98%; left: 50%; }
.herofx-v4 .deposits-dot-w{ top: 50%; left: 2%; background: var(--brand-cyan); box-shadow: 0 0 12px rgba(66, 229, 254, 0.7); }

@media (prefers-reduced-motion: reduce) {
  .herofx-v4 .deposits-orbit{ animation: none; }
}

/* Dots removed globally — they were positioned relative to the parent box
   not the orbit circle, so they appeared "floating" outside the ring at
   certain viewport widths. The dashed orbit alone is cleaner. */
.herofx-v4 .deposits-dot{ display: none; }

@media (max-width: 720px) {
  /* On mobile the orbit stays visible but the parent's aspect-ratio:1/1
     guarantees it's always perfectly centered. Slightly smaller orbit
     (inset 0 instead of -5%) so it never overflows the section bounds. */
  .herofx-v4 .deposits-orbit{
    inset: 0;
  }
}


.herofx-v4 .deposits-visual{
  position: relative;
  /* STABLE square aspect ratio — keeps the orbit centered at any viewport
     width. Without this the parent had varying aspect (height grew with
     content), which made the spinning circle pop out of position when
     resizing the window. */
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.herofx-v4 .deposits-image-wrap{
  position: relative;
  /* Smaller max-width so the spinning orbit has visible margin around the
     image instead of touching its edges. The orbit width is 110% of the
     visual; capping the image at 78% of its container leaves clean breathing
     room around the dashed ring. */
  max-width: 78%;
  margin: 0 auto;
}

.herofx-v4 .deposits-image-inner{
  position: relative;
  z-index: 1;

  opacity: 0;
  transform: scale(0.85) rotate(-3deg);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease-spring);
}
.herofx-v4 .deposits-visual.revealed-state .deposits-image-inner{
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.herofx-v4 .deposits-image-inner img{
  width: 100%;
  height: auto;
  display: block;
  /* Drop-shadows removed — they were creating a fuzzy gray halo behind
     the image on the white section background that looked unclean.
     The deposits section is white, so no visual depth was being added. */
}





.herofx-v4 .deposits-content{
  max-width: 540px;
}
.herofx-v4 .section--deposits .section-headline{
  font-size: clamp(36px, 5vw, 60px);
  margin-bottom: 20px;
}

.herofx-v4 .grad-cyan{
  background-image: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan)); background-size: 150% 100%; background-position: center; background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-bottom: 0.08em;
}
.herofx-v4 .section--deposits .section-lead{
  color: rgba(13, 23, 84, 0.72);
  margin-bottom: 28px;
}


.herofx-v4 .deposits-features{
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.herofx-v4 .deposits-features li{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #0D1754;
}
.herofx-v4 .feature-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(12, 61, 239, 0.12), rgba(66, 229, 254, 0.08));
  color: var(--brand-blue);
  border: 1px solid rgba(12, 61, 239, 0.2);
  flex-shrink: 0;
}


.herofx-v4 .deposits-methods{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}
.herofx-v4 .method-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #0D1754;
  background: rgba(12, 61, 239, 0.04);
  border: 1px solid rgba(13, 23, 84, 0.12);
  border-radius: 100px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.herofx-v4 .method-pill:hover{
  background: rgba(12, 61, 239, 0.08);
  border-color: rgba(12, 61, 239, 0.3);
}
.herofx-v4 .method-pill svg{
  flex-shrink: 0;
  opacity: 0.85;
  color: var(--brand-blue);
}


.herofx-v4 .deposits-ctas{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}


.herofx-v4 .link-cyan{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-blue);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  transition: color 0.25s var(--ease);
}
.herofx-v4 .link-cyan::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s var(--ease);
}
.herofx-v4 .link-cyan:hover{ color: var(--brand-blue-2); }
.herofx-v4 .link-cyan:hover::after{ width: calc(100% - 20px); }
.herofx-v4 .link-cyan svg{ transition: transform 0.25s var(--ease); }
.herofx-v4 .link-cyan:hover svg{ transform: translateX(3px); }


@media (max-width: 980px) {
  .herofx-v4 .section--deposits{ padding: 80px 24px; }
  .herofx-v4 .deposits-grid{
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .herofx-v4 .deposits-content{ max-width: 100%; }
  /* Image (now first in stacking) needs breathing room above the orbit */
  .herofx-v4 .deposits-visual{
    padding-top: 24px;
  }
  .herofx-v4 .deposits-image-wrap{
    max-width: 70%;  /* a touch tighter on mobile so orbit shows around it */
  }
  .herofx-v4 .deposits-orb{
    width: 360px;
    height: 360px;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 540px) {
  .herofx-v4 .section--deposits{ padding: 140px 24px; }
  .herofx-v4 .deposits-features li{ font-size: 14px; }
  .herofx-v4 .method-pill{ font-size: 12px; padding: 7px 12px; }
  .herofx-v4 .deposits-ctas{ gap: 16px; }
  .herofx-v4 .deposits-ctas .btn-find-account{ width: 100%; justify-content: center; padding: 16px 24px; }
  .herofx-v4 .link-cyan{ width: 100%; justify-content: center; }
  
  .herofx-v4 .deposits-image-wrap{ animation-duration: 6s; }
}


@media (prefers-reduced-motion: reduce) {
  .herofx-v4 .deposits-image-wrap{ animation: none; }
}


.herofx-v4 .section--start{
  background: #FFFFFF;
  color: #0D1754;
  padding: 120px 24px;
  position: relative;
}
.herofx-v4 .section--start .section-eyebrow{ color: var(--brand-blue); }
.herofx-v4 .section--start .section-eyebrow .eyebrow-line{
  background: linear-gradient(90deg, transparent, var(--brand-blue));
}
.herofx-v4 .section--start .section-headline{ color: #0D1754; }
.herofx-v4 .section--start .section-lead{ color: rgba(13, 23, 84, 0.7); }
.herofx-v4 .section--start .grad-cyan{
  background-image: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan)); background-size: 150% 100%; background-position: center; background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.herofx-v4 .start-head{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 64px;
}
.herofx-v4 .start-head .section-lead{ text-align: center; margin: 0 auto; }

/* === START TRADING — 2-column layout: PHOTO LEFT + STEPS RIGHT ===
   Each step is a row (number badge + title + desc + loading bar) that
   reveals sequentially when the section enters viewport. Premium "installer"
   feel without losing the wow factor. */
.herofx-v4 .start-layout{
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 56px;
}

/* Hero photo — large rounded portrait with brand blue glow ring.
   Aspect 3/4 (taller than 4/5) so the full subject is visible without
   crop on desktop. */
.herofx-v4 .start-photo{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 3/4;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 30px 80px -20px rgba(13, 23, 84, 0.25),
    0 0 80px -20px rgba(12, 61, 239, 0.35);
}
.herofx-v4 .start-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Subtle gradient overlay at bottom for depth */
.herofx-v4 .start-photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(12, 61, 239, 0.15) 100%);
  pointer-events: none;
}

/* === KYC VERIFICATION CARD — floating over the trader photo ===
   Visually represents what step 2 ("Verify in 2 minutes") does. A
   premium glass card with a green check + "Identity verified" + a
   tiny shimmer pulse on the check ring. Subtle float keeps the eye
   engaged without being distracting. */
.herofx-v4 .start-kyc-card{
  position: absolute;
  bottom: 22px;
  right: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 20px 40px -15px rgba(13, 23, 84, 0.35),
    0 0 30px -10px rgba(16, 185, 129, 0.25);
  pointer-events: none;
  animation: kycFloat 4s ease-in-out infinite;
}
.herofx-v4 .start-kyc-check{
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
  display: grid;
  place-items: center;
  color: #FFFFFF;
  flex-shrink: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 6px 14px -2px rgba(16, 185, 129, 0.45);
}
/* Ring pulse for "freshly verified" feel */
.herofx-v4 .start-kyc-check::after{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(16, 185, 129, 0.6);
  animation: kycPulseRing 2.2s ease-out infinite;
}
.herofx-v4 .start-kyc-check svg{
  width: 18px;
  height: 18px;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: currentColor;
  fill: none;
}
.herofx-v4 .start-kyc-body{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.herofx-v4 .start-kyc-title{
  font-size: 13.5px;
  font-weight: 700;
  color: #0D1754;
  letter-spacing: -0.005em;
  line-height: 1.15;
  white-space: nowrap;
}
.herofx-v4 .start-kyc-meta{
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(13, 23, 84, 0.6);
  line-height: 1.15;
  white-space: nowrap;
}
@keyframes kycFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes kycPulseRing {
  0%   { transform: scale(1);    opacity: 0.6; }
  100% { transform: scale(1.45); opacity: 0; }
}
@media (max-width: 540px) {
  /* Smaller KYC card on phones so it doesn't dominate */
  .herofx-v4 .start-kyc-card{
    bottom: 14px;
    right: 14px;
    padding: 10px 13px 10px 10px;
    gap: 10px;
  }
  .herofx-v4 .start-kyc-check{ width: 30px; height: 30px; }
  .herofx-v4 .start-kyc-check svg{ width: 15px; height: 15px; }
  .herofx-v4 .start-kyc-title{ font-size: 12.5px; }
  .herofx-v4 .start-kyc-meta{ font-size: 11px; }
}

/* Vertical steps stack */
.herofx-v4 .start-steps{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Each step is a horizontal row: number circle + title/desc + loading line */
.herofx-v4 .start-step{
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 24px 24px 24px 0;
  border: 0;
  background: transparent;
  /* Sequenced reveal — staggered as section enters viewport.
     Animations (not transitions) play reliably even if revealed-state
     is added before the browser paints the initial state. Step 3 used
     to occasionally fail to render with transitions; animations fix it. */
  opacity: 0;
  transform: translateX(-20px);
}
.herofx-v4 .start-layout.revealed-state .start-step{
  animation: stepSlideIn 0.7s var(--ease) both;
}
/* IMPORTANT: use :nth-of-type, NOT :nth-child. The .start-progress div is
   the 1st child of .start-steps, which would shift :nth-child indices and
   cause step 3 to receive no delay (animating immediately, appearing
   static by the time the user sees it). :nth-of-type counts only
   article elements so the progress div doesn't affect the count. */
.herofx-v4 .start-layout.revealed-state .start-step:nth-of-type(1){ animation-delay: 0.10s; }
.herofx-v4 .start-layout.revealed-state .start-step:nth-of-type(2){ animation-delay: 0.55s; }
.herofx-v4 .start-layout.revealed-state .start-step:nth-of-type(3){ animation-delay: 1.00s; }
@keyframes stepSlideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Number badge — circle with brand blue gradient + cyan glow on reveal */
.herofx-v4 .start-step-num{
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-2));
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-family: inherit;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 24px -8px rgba(12, 61, 239, 0.5);
  position: relative;
  z-index: 1;
  /* Pulse glow when its step becomes active */
  transition: box-shadow 0.5s var(--ease);
}
.herofx-v4 .start-layout.revealed-state .start-step .start-step-num{
  animation: stepNumPulse 0.8s var(--ease) both;
}
.herofx-v4 .start-layout.revealed-state .start-step:nth-of-type(1) .start-step-num{ animation-delay: 0.20s; }
.herofx-v4 .start-layout.revealed-state .start-step:nth-of-type(2) .start-step-num{ animation-delay: 0.70s; }
.herofx-v4 .start-layout.revealed-state .start-step:nth-of-type(3) .start-step-num{ animation-delay: 1.20s; }
@keyframes stepNumPulse {
  0%   { transform: scale(0.8); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* OLD per-step connector — removed. Replaced by the single shared progress
   bar (.start-progress) that grows in 3 phases as each step reveals.
   Old per-step loaders hidden too. */
.herofx-v4 .start-step:not(:last-child) .start-step-num::after{ display: none; }
.herofx-v4 .start-step-loader{ display: none; }

/* === SINGLE SHARED PROGRESS BAR — vertical on the left of the step
   numbers, growing in 3 stepped phases (33% ‚Üí 66% ‚Üí 100%) timed to each
   step's reveal. Gives the "loading" feel the user wanted. === */
.herofx-v4 .start-steps{ position: relative; }
.herofx-v4 .start-progress{
  position: absolute;
  left: 27px;     /* center of 56px num circle */
  top: 28px;      /* center of first number */
  bottom: 28px;   /* center of last number */
  width: 2px;
  background: rgba(12, 61, 239, 0.12);
  border-radius: 100px;
  z-index: 0;
  pointer-events: none;
}
.herofx-v4 .start-progress::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0%;
  background: linear-gradient(180deg, var(--brand-blue), var(--brand-cyan));
  border-radius: inherit;
  box-shadow: 0 0 12px rgba(66, 229, 254, 0.6);
}
.herofx-v4 .start-layout.revealed-state .start-progress::after{
  animation: startBarProgress 2.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes startBarProgress {
  0%   { height: 0%; }
  18%  { height: 33%; }   /* step 1 just landed */
  38%  { height: 33%; }   /* hold */
  56%  { height: 66%; }   /* step 2 just landed */
  76%  { height: 66%; }   /* hold */
  92%  { height: 100%; }  /* step 3 just landed */
  100% { height: 100%; }
}
@media (max-width: 540px) {
  .herofx-v4 .start-progress{ left: 23px; top: 24px; bottom: 24px; }
}

.herofx-v4 .start-step-content{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}
.herofx-v4 .start-step-title{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  color: #0D1754;
  line-height: 1.2;
}
.herofx-v4 .start-step-desc{
  font-size:16px;
  line-height:1.5;
  color: rgba(13, 23, 84, 0.66);
  margin: 0;
}
/* Loading bar that fills under each step's content when it reveals */
.herofx-v4 .start-step-loader{
  margin-top: 10px;
  height: 3px;
  background: rgba(12, 61, 239, 0.10);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.herofx-v4 .start-step-loader::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan));
  width: 0;
  border-radius: inherit;
  transition: width 0.6s var(--ease);
}
.herofx-v4 .start-layout.revealed-state .start-step .start-step-loader::after{
  width: 100%;
}
.herofx-v4 .start-layout.revealed-state .start-step:nth-of-type(1) .start-step-loader::after{ transition-delay: 0.30s; }
.herofx-v4 .start-layout.revealed-state .start-step:nth-of-type(2) .start-step-loader::after{ transition-delay: 0.80s; }
.herofx-v4 .start-layout.revealed-state .start-step:nth-of-type(3) .start-step-loader::after{ transition-delay: 1.30s; }

.herofx-v4 .start-cta{
  text-align: center;
}

@media (max-width: 980px) {
  .herofx-v4 .start-layout{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .herofx-v4 .start-photo{ max-width: 380px; }
  .herofx-v4 .section--start{ padding: 140px 24px; }
}
@media (max-width: 540px) {
  /* Mobile: keep portrait aspect (no crop) and reduce max-width */
  .herofx-v4 .start-photo{ max-width: 320px; aspect-ratio: 3/4; }
  .herofx-v4 .start-step{ grid-template-columns: 48px 1fr; gap: 16px; padding: 16px 0; }
  .herofx-v4 .start-step-num{ width: 48px; height: 48px; font-size: 18px; }
  .herofx-v4 .start-step-title{ font-size: 19px; }
  .herofx-v4 .start-step-desc{ font-size: 14px; }
}


/* === AFFILIATE SECTION — connected visually to the next section (final CTA).
   IMPORTANT: both sections use the SAME flat base color (#06102E) so the
   boundary between them is invisible. No linear-gradient (which would
   restart per-section and create a hard color seam). Radials add subtle
   accents per-section but don't depend on a position-based gradient. */
.herofx-v4 .section--affiliate{
  position: relative;
  /* Padding-top OK, padding-bottom 0 so the partner photo sits flush at
     the BOTTOM of the section (no floating cut-body anymore). The image
     uses align-self: end on the visual column to lock its bottom to the
     section's bottom edge. */
  padding: 100px 24px 0;
  /* Clean monochrome navy — single soft top-down gradient, no
     radials creating visible "color seams". Stripe-style uniform tone. */
  background: linear-gradient(180deg, #07103A 0%, #050A2A 100%);
  overflow: hidden;
  margin-bottom: 0;
}

.herofx-v4 .section--affiliate::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

/* CENTERED HEADER — eyebrow, headline, tagline, desc all centered above
   the 2-col grid. Replaces the left-aligned header that was inside the
   left column. Gives the section a more balanced, premium feel. */
.herofx-v4 .affiliate-head{
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 820px;
  margin: 0 auto 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px;
}
.herofx-v4 .affiliate-head .section-eyebrow--centered{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.herofx-v4 .affiliate-head .section-eyebrow--centered .eyebrow-line{
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-cyan));
}
/* Right-side line fades out — mirror the gradient direction */
.herofx-v4 .affiliate-head .section-eyebrow--centered .eyebrow-line:last-child{
  background: linear-gradient(90deg, var(--brand-cyan), transparent);
}
.herofx-v4 .affiliate-head .affiliate-headline{
  margin: 14px 0 14px;
}
.herofx-v4 .affiliate-head .affiliate-tagline{
  margin: 0 0 10px;
}
.herofx-v4 .affiliate-head .affiliate-desc{
  margin: 0 auto;
  max-width:700px;
  color: var(--text-2);
  font-size:clamp(19px, 1.6vw, 24px);
  line-height:1.35;
}

.herofx-v4 .affiliate-grid{
  position: relative;
  z-index: 1;
  display: grid;
  /* Image column MUCH wider — partner photo is the visual hero of this
     section. Content (calculator + CTAs) : visual = 1 : 1.4. */
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  /* Image column ENDS at the section bottom (flush). Content column gets
     centered vertically, so it sits next to the image without floating. */
  align-items: end;
  padding: 20px 0 0;
}
.herofx-v4 .affiliate-content{
  padding-bottom: 80px;
  align-self: center;
}
.herofx-v4 .affiliate-ctas{ margin-bottom: 4px; }
.herofx-v4 .affiliate-content{ max-width: 560px; }
.herofx-v4 .section--affiliate .section-eyebrow{ color: var(--brand-cyan); }
.herofx-v4 .section--affiliate .section-eyebrow .eyebrow-line{
  background: linear-gradient(90deg, transparent, var(--brand-cyan));
}
.herofx-v4 .affiliate-headline{
  font-size: clamp(36px, 5vw, 60px);
  font-weight:700;
  letter-spacing:-0.012em;
  line-height:1.07;
  margin: 0 0 16px;
  color: #FFFFFF;
  padding: 0.05em 0 0.1em;
}
.herofx-v4 .affiliate-headline .grad-cyan{
  background-image: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan)); background-size: 150% 100%; background-position: center; background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-bottom: 0.08em;
}
.herofx-v4 .affiliate-tagline{
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 12px;
}
.herofx-v4 .affiliate-tagline strong{
  color: var(--brand-cyan);
  font-weight: 800;
}
.herofx-v4 .affiliate-desc{
  font-size: clamp(19px, 1.6vw, 24px);
  line-height:1.5;
  color: var(--text-2);
  margin: 0 0 24px;
}

/* 4 IB benefit pills using the production icons from herofx.co/partners */
.herofx-v4 .affiliate-benefits{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 0 28px;
  list-style: none;
  padding: 0;
}
.herofx-v4 .affiliate-benefit{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-1);
}
.herofx-v4 .affiliate-benefit img{
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(66, 229, 254, 0.25));
}

.herofx-v4 .affiliate-ctas{
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.herofx-v4 .link-cyan--white{ color: rgba(255, 255, 255, 0.85); }
.herofx-v4 .link-cyan--white:hover{ color: var(--brand-cyan); }

/* Right-side visual: the production partner photo (transparent PNG of a
   happy partner holding their phone). No frame/border — image already has
   proper composition; we just add a soft cyan glow halo for depth. */
.herofx-v4 .affiliate-visual{
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* Clean partner photo — VISUAL HERO of the section. Big, full-width image,
   sits FLUSH at the section bottom. Subtle drop shadow grounds it. */
.herofx-v4 .affiliate-partner-img{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 920px;
  height: auto;
  display: block;
  margin: 0 auto -1px;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.45));
}
/* Cyan glow halo behind the photo for depth */
.herofx-v4 .affiliate-visual::before{
  content: "";
  position: absolute;
  inset: 15%;
  background: radial-gradient(circle, rgba(66, 229, 254, 0.32), transparent 70%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

/* === Floating benefit chips arranged around the partner photo ===
   Each chip = circular glass button with the benefit icon, on hover a
   tooltip pill slides out with the benefit text. Replaces the previous
   text list on the left column — keeps left side cleaner, makes the
   right side feel rich and interactive. */
.herofx-v4 .affiliate-chips{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.herofx-v4 .affiliate-chip{
  position: absolute;
  pointer-events: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 16px 30px -8px rgba(0, 0, 0, 0.35),
    0 0 30px -8px rgba(66, 229, 254, 0.30);
  animation: chipFloat 5s ease-in-out infinite;
}
.herofx-v4 .affiliate-chip img{
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(66, 229, 254, 0.4));
}
.herofx-v4 .affiliate-chip:hover,
.herofx-v4 .affiliate-chip:focus-visible{
  transform: scale(1.08);
  border-color: rgba(66, 229, 254, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 20px 40px -8px rgba(0, 0, 0, 0.45),
    0 0 50px -8px rgba(66, 229, 254, 0.55);
  outline: none;
}
/* Chip positions around the partner photo */
.herofx-v4 .affiliate-chip-1{ top: 8%;   left: 4%; animation-delay: 0s; }
.herofx-v4 .affiliate-chip-2{ top: 30%;  right: 2%; animation-delay: 0.6s; }
.herofx-v4 .affiliate-chip-3{ bottom: 28%; left: 0%; animation-delay: 1.2s; }
.herofx-v4 .affiliate-chip-4{ bottom: 8%;  right: 8%; animation-delay: 1.8s; }

@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Tooltip — pill that slides out on hover/focus with the benefit text */
.herofx-v4 .affiliate-chip-tooltip{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 14px;
  background: rgba(13, 23, 84, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(66, 229, 254, 0.3);
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.5);
  z-index: 10;
}
/* Left-side chips: tooltip on the right */
.herofx-v4 .affiliate-chip-1 .affiliate-chip-tooltip,
.herofx-v4 .affiliate-chip-3 .affiliate-chip-tooltip{
  left: calc(100% + 12px);
}
.herofx-v4 .affiliate-chip-1:hover .affiliate-chip-tooltip,
.herofx-v4 .affiliate-chip-3:hover .affiliate-chip-tooltip,
.herofx-v4 .affiliate-chip-1:focus-visible .affiliate-chip-tooltip,
.herofx-v4 .affiliate-chip-3:focus-visible .affiliate-chip-tooltip{
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(4px);
}
/* Right-side chips: tooltip on the left */
.herofx-v4 .affiliate-chip-2 .affiliate-chip-tooltip,
.herofx-v4 .affiliate-chip-4 .affiliate-chip-tooltip{
  right: calc(100% + 12px);
}
.herofx-v4 .affiliate-chip-2:hover .affiliate-chip-tooltip,
.herofx-v4 .affiliate-chip-4:hover .affiliate-chip-tooltip,
.herofx-v4 .affiliate-chip-2:focus-visible .affiliate-chip-tooltip,
.herofx-v4 .affiliate-chip-4:focus-visible .affiliate-chip-tooltip{
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(-4px);
}

@media (max-width: 980px) {
  /* Chips smaller on mobile — image fully visible */
  .herofx-v4 .affiliate-visual{ min-height: auto; }
  .herofx-v4 .affiliate-chip{
    width: 48px;
    height: 48px;
  }
  .herofx-v4 .affiliate-chip img{ width: 24px; height: 24px; }
  .herofx-v4 .affiliate-chip-tooltip{
    font-size: 11.5px;
    padding: 8px 10px;
  }
}
.herofx-v4 .affiliate-visual img{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 920px;
  height: auto;
  display: block;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.55));
}

/* ============================================================
   AFFILIATE EARNINGS CALCULATOR — interactive slider widget
   Live updates monthly + yearly estimates as user drags slider.
   Formula: traders √ó 1 lot/day √ó 22 days/month √ó $5/lot
   ============================================================ */
.herofx-v4 .affiliate-calc{
  position: relative;
  z-index: 2;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(66, 229, 254, 0.18), transparent 60%),
    linear-gradient(160deg, #0D1754 0%, #050A2A 100%);
  border-radius: 20px;
  padding: 26px 24px 22px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 20px 50px -20px rgba(13, 23, 84, 0.45),
    0 0 60px -20px rgba(66, 229, 254, 0.20);
  width: 100%;
  margin: 0 0 28px;
}
.herofx-v4 .affiliate-calc-head{
  margin-bottom: 24px;
  text-align: left;
}
.herofx-v4 .affiliate-calc-eyebrow{
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-cyan);
  margin-bottom: 6px;
}
.herofx-v4 .affiliate-calc-title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: #FFFFFF;
  line-height: 1.2;
}

.herofx-v4 .affiliate-calc-control{
  margin-bottom: 22px;
}
.herofx-v4 .affiliate-calc-label{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 600;
}
.herofx-v4 .affiliate-calc-value{
  display: inline-grid;
  place-items: center;
  min-width: 56px;
  padding: 5px 12px;
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-blue-2));
  color: #FFFFFF;
  font-size: 19px;
  font-weight: 800;
  border-radius: 8px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Custom range slider — premium look with cyan→blue progress fill */
.herofx-v4 .affiliate-calc-slider{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 100px;
  background: linear-gradient(
    90deg,
    var(--brand-cyan) 0%,
    var(--brand-blue) var(--fill, 10%),
    rgba(255, 255, 255, 0.10) var(--fill, 10%),
    rgba(255, 255, 255, 0.10) 100%
  );
  outline: none;
  cursor: pointer;
  margin: 0;
}
.herofx-v4 .affiliate-calc-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--brand-blue);
  cursor: grab;
  box-shadow:
    0 4px 14px rgba(12, 61, 239, 0.5),
    0 0 0 6px rgba(66, 229, 254, 0.0);
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.herofx-v4 .affiliate-calc-slider:hover::-webkit-slider-thumb{
  box-shadow:
    0 4px 14px rgba(12, 61, 239, 0.5),
    0 0 0 6px rgba(66, 229, 254, 0.18);
}
.herofx-v4 .affiliate-calc-slider:active::-webkit-slider-thumb,
.herofx-v4 .affiliate-calc-slider:focus::-webkit-slider-thumb{
  transform: scale(1.12);
  cursor: grabbing;
}
.herofx-v4 .affiliate-calc-slider::-moz-range-thumb{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--brand-blue);
  cursor: grab;
  box-shadow: 0 4px 14px rgba(12, 61, 239, 0.5);
}

.herofx-v4 .affiliate-calc-scale{
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
}

.herofx-v4 .affiliate-calc-results{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.herofx-v4 .affiliate-calc-result{
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  transition: border-color 0.3s var(--ease);
}
.herofx-v4 .affiliate-calc-result-label{
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
}
.herofx-v4 .affiliate-calc-result-amount{
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* Yearly is the hero — bigger + cyan gradient */
.herofx-v4 .affiliate-calc-result--big{
  border-color: rgba(66, 229, 254, 0.22);
  background:
    radial-gradient(ellipse 100% 100% at 100% 0%, rgba(66, 229, 254, 0.08), transparent 70%),
    rgba(255, 255, 255, 0.04);
}
.herofx-v4 .affiliate-calc-result--big .affiliate-calc-result-amount{
  font-size: 28px;
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-blue-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.herofx-v4 .affiliate-calc-disclaimer{
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  text-align: left;
}

@media (max-width: 540px) {
  .herofx-v4 .affiliate-calc{
    padding: 28px 22px 24px;
    border-radius: 22px;
  }
  .herofx-v4 .affiliate-calc-result-amount{ font-size: 21px; }
  .herofx-v4 .affiliate-calc-result--big .affiliate-calc-result-amount{ font-size: 24px; }
}

@media (max-width: 980px) {
  /* Mobile: content (text + calculator + CTAs) FIRST, partner photo at the
     END of the section, flush with the bottom edge — body of partner
     never floats with a cut at the bottom. */
  .herofx-v4 .affiliate-grid{
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-bottom: 0;
  }
  .herofx-v4 .affiliate-content{ max-width: 100%; order: 1; padding-bottom: 0; }
  .herofx-v4 .affiliate-visual{ order: 2; align-items: flex-end; }
  /* Mobile: image fills container width — partner is the visual hero */
  .herofx-v4 .affiliate-partner-img{
    max-width: 560px;
    margin: 0 auto -1px;
  }
}
@media (max-width: 540px) {
  .herofx-v4 .section--affiliate{ padding: 140px 24px 0; }
  .herofx-v4 .affiliate-benefits{ grid-template-columns: 1fr; }
  /* padding-bottom 0 so partner img sits flush with section bottom on mobile */
  .herofx-v4 .affiliate-grid{ padding: 10px 0 0; gap: 32px; }
  /* Calculator scales down on mobile so labels/numbers fit comfortably */
  .herofx-v4 .affiliate-calc{ padding: 22px 18px 18px; }
  .herofx-v4 .affiliate-calc-title{ font-size: 19px; }
  .herofx-v4 .affiliate-partner-img{ max-width: 100%; }
}


.herofx-v4 .section--testimonials{
  position: relative;
  padding: 80px 24px;
  /* Brand blue gradient — matches herofx.co production reviews section.
     Deep navy base + electric blue glow at top + subtle bottom warmth. */
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(66, 229, 254, 0.18), transparent 65%),
    radial-gradient(ellipse 100% 70% at 50% 100%, rgba(12, 61, 239, 0.55), transparent 70%),
    linear-gradient(180deg, #0D1754 0%, #0C3DEF 100%);
  overflow: hidden;
}
/* Card border slightly stronger so cards pop on blue bg */
.herofx-v4 .section--testimonials .testimonial-card{
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border-color: rgba(255, 255, 255, 0.12);
}
.herofx-v4 .section--testimonials .testimonial-card:hover{
  border-color: rgba(66, 229, 254, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 24px 40px -16px rgba(0, 0, 0, 0.45);
}
.herofx-v4 .testimonials-head{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px;
}
.herofx-v4 .testimonials-head .section-lead{ text-align: center; margin: 0 auto; }
.herofx-v4 .section--testimonials .section-eyebrow{ color: var(--brand-cyan); }
.herofx-v4 .section--testimonials .section-eyebrow .eyebrow-line{
  background: linear-gradient(90deg, transparent, var(--brand-cyan));
}
/* "Real Results" gradient override — the default cyan→blue gradient blends
   into the blue bg of this section. Force a high-contrast white‚Üícyan
   gradient so the highlight POPS on the navy/blue background. */
.herofx-v4 .section--testimonials .grad-cyan{
  background-image: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan)); background-size: 150% 100%; background-position: center; background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* === VERTICAL 3-COLUMN MARQUEE (ported from 21st.dev pattern) ===
   3 narrow columns, each scrolls vertically at a slightly different speed
   for a depth-of-field feel. Way better than the horizontal marquee:
   - Each column is ~340px wide (not 10000px) — Safari handles it fine
   - Fade mask is VERTICAL so cards appear/vanish smoothly top/bottom
   - Pause on hover
   - 6-9 cards visible at once (vs 6 in static grid, 0-2 in horizontal)
   - SEO-friendly (all cards in DOM, indexable by Google) */
.herofx-v4 .testimonials-cols{
  position: relative;
  display: flex;
  gap: 24px;
  justify-content: center;
  margin: 0 0 36px;
  height: 640px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.herofx-v4 .testimonials-col{
  flex: 0 0 340px;
  position: relative;
  overflow: visible;
}
.herofx-v4 .testimonials-col-track{
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
  /* GPU-promoted, transform-only animation = compositor-friendly */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  animation: testimonialsScrollUp var(--col-duration, 30s) linear infinite;
}
.herofx-v4 .testimonials-col-1 .testimonials-col-track{ --col-duration: 30s; }
.herofx-v4 .testimonials-col-2 .testimonials-col-track{ --col-duration: 38s; }
.herofx-v4 .testimonials-col-3 .testimonials-col-track{ --col-duration: 34s; }
@keyframes testimonialsScrollUp {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
/* Pause on hover anywhere in the cols container */
.herofx-v4 .testimonials-cols.paused-state .testimonials-col-track,
.herofx-v4 .testimonials-cols:hover .testimonials-col-track{
  animation-play-state: paused;
}
@media (max-width: 980px) {
  /* Hide the 3rd column on tablet — keep 2 visible */
  .herofx-v4 .testimonials-col-3{ display: none; }
}
@media (max-width: 600px) {
  /* Hide the 2nd column on mobile — single column */
  .herofx-v4 .testimonials-col-2{ display: none; }
  .herofx-v4 .testimonials-cols{ height: 540px; gap: 0; }
  .herofx-v4 .testimonials-col{ flex: 0 0 min(100%, 360px); }
}
@media (prefers-reduced-motion: reduce) {
  .herofx-v4 .testimonials-col-track{ animation: none !important; }
}


.herofx-v4 .testimonials-cta{
  text-align: center;
  margin-top: 8px;
}
/* Show more reviews button — override the global `.btn-find-account`
   gradient (which has `!important` for anti-flash safety) with a WHITE
   pill for contrast on the navy testimonials bg. !important needed
   to beat the early `!important` baseline. */
.herofx-v4 .testimonials-cta .btn-find-account,
.herofx-v4 .section--testimonials .btn-find-account{
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #0D1754 !important;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 12px 30px -10px rgba(13, 23, 84, 0.5),
    0 0 0 4px rgba(255, 255, 255, 0.06);
}
.herofx-v4 .testimonials-cta .btn-find-account:hover,
.herofx-v4 .section--testimonials .btn-find-account:hover{
  background-color: #42E5FE !important;
  background-image: none !important;
  color: #0D1754 !important;
  border-color: var(--brand-cyan);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 14px 36px -10px rgba(66, 229, 254, 0.6),
    0 0 0 4px rgba(66, 229, 254, 0.12);
}
.herofx-v4 .testimonials-cta .btn-find-account svg{
  stroke: #0D1754;
}

.herofx-v4 .testimonial-card{
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.herofx-v4 .testimonial-card:hover{
  transform: translateY(-4px);
  border-color: rgba(66, 229, 254, 0.25);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 24px 40px -16px rgba(12, 61, 239, 0.3);
}
.herofx-v4 .testimonial-stars{
  display: inline-flex;
  gap: 2px;
  color: #FFC107;
}
.herofx-v4 .testimonial-stars svg{ width: 16px; height: 16px; }
.herofx-v4 .testimonial-quote{
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-1);
  margin: 0;
  flex: 1;
  font-weight: 400;
}
.herofx-v4 .testimonial-meta{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.herofx-v4 .testimonial-author{
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.herofx-v4 .testimonial-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-cyan);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.herofx-v4 .testimonial-badge svg{
  background: rgba(66, 229, 254, 0.15);
  border-radius: 50%;
  padding: 2px;
}

@media (max-width: 600px) {
  .herofx-v4 .section--testimonials{ padding: 140px 24px; }
}


.herofx-v4 .section--support{
  position: relative;
  /* Generous bottom padding so the chat (which extends ~220px below the
     portrait + chat content ~280px tall) NEVER bleeds into the next
     section's content. 300px buffer guarantees no overlap. */
  padding: 140px 24px 300px;
  background:
    radial-gradient(ellipse 50% 40% at 80% 30%, rgba(66, 229, 254, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 70%, rgba(12, 61, 239, 0.12), transparent 60%),
    var(--bg-deep);
  overflow: hidden;
}
.herofx-v4 .section--support .section-eyebrow{ color: var(--brand-cyan); }
.herofx-v4 .section--support .section-eyebrow .eyebrow-line{
  background: linear-gradient(90deg, transparent, var(--brand-cyan));
}
.herofx-v4 .support-grid{
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 48px;
  align-items: center;
}
.herofx-v4 .support-content{ max-width: 600px; }
.herofx-v4 .section--support .section-headline{
  font-size: clamp(36px, 5vw, 60px);
}
/* "24/7" — vibrant cyan->blue gradient with a soft glow, pops on the dark bg */
.herofx-v4 .section--support .section-headline .grad-cyan{
  background-image: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan)); background-size: 150% 100%; background-position: center; background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(66, 229, 254, 0.35));
}
.herofx-v4 .section--support .section-lead{
  color: var(--text-2);
  margin-bottom: 32px;
}

.herofx-v4 .support-channels{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
.herofx-v4 .support-channel{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  transition: all 0.3s var(--ease);
}
.herofx-v4 .support-channel:hover{
  border-color: rgba(66, 229, 254, 0.3);
  background:
    linear-gradient(180deg, rgba(66, 229, 254, 0.06), rgba(12, 61, 239, 0.04));
  transform: translateY(-2px);
}
.herofx-v4 .support-channel-icon{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-2));
  border-radius: 12px;
  color: #FFFFFF;
  margin-bottom: 4px;
}
.herofx-v4 .support-channel h3{
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-1);
}
.herofx-v4 .support-channel p{
  font-size: 15px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.5;
  flex: 1;
}

.herofx-v4 .support-channel-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-2));
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.3s var(--ease);
  margin-top: 6px;
}
.herofx-v4 .support-channel-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -10px rgba(12, 61, 239, 0.6);
}
.herofx-v4 .support-channel-btn svg{ transition: transform 0.25s var(--ease); }
.herofx-v4 .support-channel-btn:hover svg{ transform: translateX(2px); }

.herofx-v4 .support-channel-btn--ghost{
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-strong);
}
.herofx-v4 .support-channel-btn--ghost:hover{
  background: rgba(66, 229, 254, 0.08);
  border-color: var(--brand-cyan);
  color: var(--brand-cyan);
}


.herofx-v4 .support-help-card{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s var(--ease);
}
.herofx-v4 .support-help-card:hover{
  background: rgba(66, 229, 254, 0.05);
  border-color: rgba(66, 229, 254, 0.25);
  transform: translateX(2px);
}
.herofx-v4 .support-help-icon{
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: rgba(66, 229, 254, 0.1);
  border-radius: 10px;
  color: var(--brand-cyan);
  flex-shrink: 0;
}
.herofx-v4 .support-help-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.herofx-v4 .support-help-text strong{
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
}
.herofx-v4 .support-help-text small{
  font-size:13px;
  color: var(--text-3);
}
.herofx-v4 .support-help-arrow{
  color: var(--text-3);
  transition: all 0.3s var(--ease);
  flex-shrink: 0;
}
.herofx-v4 .support-help-card:hover .support-help-arrow{
  color: var(--brand-cyan);
  transform: translateX(2px);
}


.herofx-v4 .support-visual{
  position: relative;
}


.herofx-v4 .support-portrait{
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  max-width: 460px;
  margin: 0 0 0 auto;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 30px 80px -30px rgba(12, 61, 239, 0.4),
    0 0 60px -20px rgba(66, 229, 254, 0.25);
}
.herofx-v4 .support-portrait img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.herofx-v4 .support-portrait::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(5, 10, 42, 0.65) 100%);
  pointer-events: none;
}


.herofx-v4 .support-mock{
  position: absolute;
  /* Chat sits in the BOTTOM-LEFT, raised further so the top edge of the
     chat clears the agent's lap/laptop area comfortably. Face fully visible. */
  bottom: -140px;
  left: -32px;
  right: auto;
  width: 380px;
  max-width: calc(100% - 20px);
  background:
    linear-gradient(180deg, rgba(7, 16, 58, 0.92), rgba(3, 6, 26, 0.96));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  padding: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 30px 80px -30px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.herofx-v4 .support-mock-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
  border-bottom: 1px solid var(--border);
}
.herofx-v4 .support-mock-status{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-1);
}
.herofx-v4 .dot-online{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ADE80;
  position: relative;
}
/* GPU-composited pulse ring (transform + opacity only — no box-shadow repaint) */
.herofx-v4 .dot-online::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(74, 222, 128, 0.45);
  animation: dotPulse 2s ease-out infinite;
}
@keyframes dotPulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.6); opacity: 0; }
}
.herofx-v4 .support-mock-tag{
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
}
.herofx-v4 .support-mock-body{
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 280px;
}
.herofx-v4 .support-msg{
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 85%;
  
  opacity: 0;
  transform: translateY(8px);
  animation: chatBubbleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.herofx-v4 .support-msg--in{ align-self: flex-start; transform: translateY(8px) translateX(-8px); }
.herofx-v4 .support-msg--out{ align-self: flex-end; align-items: flex-end; transform: translateY(8px) translateX(8px); }

.herofx-v4 .support-msg:nth-child(1){ animation-delay: 0.4s; }
.herofx-v4 .support-msg:nth-child(2){ animation-delay: 1.4s; }
.herofx-v4 .support-msg:nth-child(3){ animation-delay: 2.4s; }
.herofx-v4 .support-msg:nth-child(4){ animation-delay: 3.4s; }

@keyframes chatBubbleIn {
  to { opacity: 1; transform: translateY(0) translateX(0); }
}


.herofx-v4 .support-msg-label{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 4px;
}
.herofx-v4 .support-msg--in  .support-msg-label{ color: rgba(255, 255, 255, 0.5); }
.herofx-v4 .support-msg--out .support-msg-label{ color: rgba(66, 229, 254, 0.85); }

.herofx-v4 .support-msg-bubble{
  padding: 11px 15px;
  font-size: 13.5px;
  line-height: 1.45;
  border-radius: 14px;
  word-wrap: break-word;
}
.herofx-v4 .support-msg--in .support-msg-bubble{
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-1);
  border-bottom-left-radius: 4px;
}
.herofx-v4 .support-msg--out .support-msg-bubble{
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-2));
  color: #FFFFFF;
  border-bottom-right-radius: 4px;
}

.herofx-v4 .support-msg--typing .support-msg-bubble{
  display: inline-flex;
  gap: 4px;
  padding: 14px 18px;
}
.herofx-v4 .typing-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  animation: typingBounce 1.4s ease-in-out infinite;
}
.herofx-v4 .typing-dot:nth-child(2){ animation-delay: 0.2s; }
.herofx-v4 .typing-dot:nth-child(3){ animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-4px); opacity: 1; }
}

@media (max-width: 980px) {
  .herofx-v4 .support-grid{ grid-template-columns: 1fr; gap: 48px; }
  .herofx-v4 .support-content{ max-width: 100%; }
}
@media (max-width: 600px) {
  /* Stack the two channel cards vertically — wider tap targets, easier read */
  .herofx-v4 .support-channels{ grid-template-columns: 1fr; gap: 12px; }
  /* Stack channel content as a horizontal-feeling row: button stretches full width */
  .herofx-v4 .support-channel-btn{ width: 100%; }
}
@media (max-width: 540px) {
  /* MOBILE — TOTALLY DIFFERENT LAYOUT than desktop. The chat is NOT
     overlaid on the portrait on mobile — it lives as a normal flow
     element BELOW the portrait, full width. Zero overlap with the face,
     zero bleed into the next section. */
  .herofx-v4 .section--support{ padding: 80px 20px 60px; }
  .herofx-v4 .support-mock-body{ min-height: 180px; padding: 18px; }

  /* MOBILE REORDER: portrait + chat go FIRST (visual context for the
     section), THEN the action buttons (talk + email) below. */
  .herofx-v4 .support-grid{
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .herofx-v4 .support-visual{ order: 1; }
  .herofx-v4 .support-content{ order: 2; }

  /* Portrait stands alone, full size, agent fully visible — NO chat on top */
  .herofx-v4 .support-visual{
    position: static;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .herofx-v4 .support-portrait{
    max-width: 320px;
    aspect-ratio: 4/5;
    margin: 0 auto;
  }
  /* Chat is a NORMAL flow element BELOW the portrait — never overlaps */
  .herofx-v4 .support-mock{
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
}


.herofx-v4 .section--blog{
  background: #FFFFFF;
  color: #0D1754;
  padding: 120px 24px;
}
.herofx-v4 .section--blog .section-eyebrow{ color: var(--brand-blue); }
.herofx-v4 .section--blog .section-eyebrow .eyebrow-line{
  background: linear-gradient(90deg, transparent, var(--brand-blue));
}
.herofx-v4 .section--blog .section-headline{ color: #0D1754; }
.herofx-v4 .section--blog .section-lead{ color: rgba(13, 23, 84, 0.7); }
.herofx-v4 .section--blog .grad-cyan{
  background-image: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan)); background-size: 150% 100%; background-position: center; background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.herofx-v4 .blog-head{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 56px;
}
.herofx-v4 .blog-head .section-lead{ text-align: center; margin: 0 auto; width: 100%; }

.herofx-v4 .blog-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
.herofx-v4 .blog-card{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 20px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(13, 23, 84, 0.08);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.herofx-v4 .blog-card:hover{
  transform: translateY(-4px);
  border-color: rgba(12, 61, 239, 0.2);
  box-shadow:
    0 20px 40px -16px rgba(13, 23, 84, 0.18),
    0 0 0 1px rgba(12, 61, 239, 0.08);
}
.herofx-v4 .blog-card-image{
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #F4F7FF;
}
.herofx-v4 .blog-card-image img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.herofx-v4 .blog-card:hover .blog-card-image img{ transform: scale(1.05); }
.herofx-v4 .blog-card-tag{
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-block;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--brand-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 100px;
}
.herofx-v4 .blog-card-body{
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
}
.herofx-v4 .blog-card-title{
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
  color: #0D1754;
  flex: 1;
}
.herofx-v4 .blog-card-meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: rgba(13, 23, 84, 0.55);
}
.herofx-v4 .blog-card-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(12, 61, 239, 0.08);
  color: var(--brand-blue);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.herofx-v4 .blog-card:hover .blog-card-arrow{
  background: var(--brand-blue);
  color: #FFFFFF;
  transform: translateX(2px);
}

.herofx-v4 .blog-cta-row{
  text-align: center;
  margin-bottom: 56px;
}
.herofx-v4 .blog-cta-row .link-cyan{
  color: var(--brand-blue);
}
.herofx-v4 .blog-cta-row .link-cyan:hover{ color: var(--brand-blue-2); }


/* ============================================================
   SOCIAL SECTION — FTMO-STYLE WHITE BG REDESIGN (v44)
   - WHITE section background (was dark navy)
   - Cards are visual-only (brand-colored frame + mockup)
   - Title + description + CTA button sit OUTSIDE the card
   - Top row: Instagram + X (2 cols)
   - Bottom row: YouTube full width (featured, bigger phone)
   - Mobile: stack 3 vertically
   ============================================================ */
.herofx-v4 .social-section{
  position: relative;
  margin: 80px -24px 0;
  padding: 80px 48px;
  background: #FFFFFF;
  border-radius: 32px;
  overflow: hidden;
  color: #0D1754;
}
.herofx-v4 .social-section-bg{
  display: none; /* No dark orbs on white bg */
}
.herofx-v4 .social-orb,
.herofx-v4 .social-orb-1,
.herofx-v4 .social-orb-2,
.herofx-v4 .social-orb-3{
  display: none !important;
}

.herofx-v4 .social-section-head{
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.herofx-v4 .social-section .section-eyebrow{
  color: var(--brand-blue);
}
.herofx-v4 .social-section .section-eyebrow .eyebrow-line{
  background: linear-gradient(90deg, transparent, var(--brand-blue));
}
.herofx-v4 .social-section-head h3{
  font-size: clamp(36px, 5vw, 60px);
  font-weight:700;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  color: #0D1754;
  padding: 0.05em 0 0.1em;
}
.herofx-v4 .social-section-head .grad-cyan{
  background-image: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan)); background-size: 150% 100%; background-position: center; background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.herofx-v4 .social-section-head p{
  font-size: clamp(16px, 1.25vw, 19px);
  color: rgba(13, 23, 84, 0.65);
  max-width: 620px;
  line-height: 1.55;
  margin: 0;
  width: 100%;
}


.herofx-v4 .social-cards{
  position: relative;
  z-index: 1;
  display: grid;
  /* FTMO-style layout: 2 small cards top (IG + X), 1 big card below (YT).
     grid-template-areas keeps the DOM order flexible. */
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "instagram x"
    "youtube   youtube";
  /* Larger row-gap so YT section breathes from the IG/X CTAs above */
  column-gap: 32px;
  row-gap: 80px;
}
.herofx-v4 .social-item{
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* INSTAGRAM + X — uniform gap so both meta blocks (titles) sit at the
   SAME vertical position. Only the CENTER tile overflows the IG card
   bottom (the side tiles stay inside) — preserves the rounded corners
   visually while still giving the "premium sticking out" feel. */
.herofx-v4 .social-item[data-platform="instagram"]{
  gap: 50px;
  grid-area: instagram;
}
.herofx-v4 .social-item[data-platform="x"]{
  gap: 50px;
  grid-area: x;
}
/* IG card lets the center tile poke through the bottom — overflow visible
   on both card-pro and frame (and ig-mockup) lets the tile extend past
   the rounded edges without being clipped. */
.herofx-v4 .social-item[data-platform="instagram"] .social-card-pro{
  overflow: visible;
}
.herofx-v4 .social-item[data-platform="instagram"] .social-card-pro-frame{
  overflow: visible;
}
.herofx-v4 .social-item[data-platform="instagram"] .ig-mockup{
  overflow: visible;
}
.herofx-v4 .social-item[data-platform="youtube"]{ grid-area: youtube; }

/* YouTube — featured card. CENTERED, narrower (max-width 880px) so the
   16:9 video fits the box perfectly without empty horizontal space.
   Card + meta are both centered to match. Phone overflows bottom-right
   for a premium "sticking out" feel. */
.herofx-v4 .social-item[data-platform="youtube"]{
  gap: 32px;
  align-items: center;
}
.herofx-v4 .social-item[data-platform="youtube"] .social-card-pro{
  overflow: visible;
  padding-bottom: 0;
  max-width: none;
  width: 100%;
  margin: 0 auto;
}
.herofx-v4 .social-item[data-platform="youtube"] .social-card-pro-frame{
  /* Aspect-ratio matches the 16:9 video so it fills the box edge-to-edge.
     Height is now derived from width, not a fixed pixel value. */
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  /* Border-radius on the frame itself (the card-pro link has overflow:
     visible for the phone to stick out, so the rounded corners must live
     on the frame to clip the video bg cleanly). */
  border-radius: 22px;
  background: linear-gradient(160deg, #0D1754, #050A2A);
}
.herofx-v4 .social-item[data-platform="youtube"] .yt-phone{
  width: 230px;
}
.herofx-v4 .social-item[data-platform="youtube"] .social-item-meta{
  text-align: center;
  align-items: center;
  max-width: 760px;
  margin: 0 auto;
}
.herofx-v4 .social-item[data-platform="youtube"] .social-item-meta h4{
  font-size: clamp(26px, 2.6vw, 36px);
}
.herofx-v4 .social-item[data-platform="youtube"] .social-item-meta p{ max-width: 760px; }

/* === YT FEATURED CARD — VIDEO FILLS THE 16:9 BOX EDGE-TO-EDGE ===
   Card aspect-ratio now matches the video (16:9), so object-fit: cover
   fills the card perfectly without cropping or letterboxing. */
.herofx-v4 .yt-bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  opacity: 0.95;
  border-radius: 22px;
  transition: opacity 0.5s var(--ease);
}
.herofx-v4 .social-item[data-platform="youtube"] .social-card-pro:hover .yt-bg-video{
  opacity: 1;
}
/* Subtle vignette — soft dark on the bottom-right where the phone sits,
   for contrast and depth. The video shows clean on most of the card. */
.herofx-v4 .yt-bg-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 22px;
  /* Even, subtle darkening so the centered play button reads clearly */
  background:
    radial-gradient(ellipse at center, rgba(5,10,42,0.12) 0%, rgba(5,10,42,0.34) 100%),
    linear-gradient(180deg, transparent 70%, rgba(5,10,42,0.22) 100%);
}
/* Centered red YouTube play button — replaces the phone mockup */
.herofx-v4 .social-item[data-platform="youtube"] .yt-play-btn{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 4; width: 80px; height: 80px; border-radius: 50%;
  background: #FF0000; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  pointer-events: none;
}
.herofx-v4 .social-item[data-platform="youtube"] .yt-play-btn svg{ width: 32px; height: 32px; margin-left: 3px; }
.herofx-v4 .social-item[data-platform="youtube"] .social-card-pro:hover .yt-play-btn{
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
}
/* Phone mockup — sibling of frame, anchored to bottom-right with overflow
   on both axes for premium "sticking out" feel. Smaller phone (230px)
   matches the narrower card proportions. */
.herofx-v4 .social-item[data-platform="youtube"] .yt-mockup{
  position: absolute;
  top: auto;
  bottom: -50px;
  right: -20px;
  left: auto;
  width: auto;
  height: auto;
  display: block;
  z-index: 5;
  pointer-events: none;
}
.herofx-v4 .social-item[data-platform="youtube"] .yt-phone{
  transform: rotate(-5deg);
  /* Drop shadow gives the phone visual lift outside the card */
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
}
.herofx-v4 .social-item[data-platform="youtube"] .social-card-pro:hover .yt-phone{
  transform: rotate(-2deg) translateY(-6px);
}
/* YT icon chip — keep visible in top-left over the video */
.herofx-v4 .social-item[data-platform="youtube"] .social-card-pro-icon{
  z-index: 4;
}
/* Card link needs position: relative so the absolute phone is anchored to it */
.herofx-v4 .social-item[data-platform="youtube"] .social-card-pro{
  position: relative;
}
/* === FTMO-STYLE CARD: visual-only frame, meta lives outside ===
   The card is now JUST the brand-colored frame with the mockup.
   Title/desc/button are siblings below (.social-item-meta). */
.herofx-v4 .social-card-pro{
  position: relative;
  display: block;
  text-decoration: none;
  color: #0D1754;
  overflow: hidden;
  isolation: isolate;
  border-radius: 22px;
  border: 1px solid rgba(13, 23, 84, 0.08);
  background: transparent;
  transition: transform 0.4s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.herofx-v4 .social-card-pro:hover{
  transform: translateY(-6px);
  border-color: rgba(12, 61, 239, 0.25);
  box-shadow:
    0 24px 50px -16px rgba(13, 23, 84, 0.22),
    0 0 0 1px rgba(12, 61, 239, 0.12);
}

/* TOP ZONE — brand-colored visual frame (where the mockup lives) */
.herofx-v4 .social-card-pro-frame{
  position: relative;
  height: 280px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Rounded corners on the frame itself — needed so the gradient bg
     paints in a rounded shape even when card-pro has overflow: visible
     (which IG needs so its center tile can stick out). */
  border-radius: 22px;
  /* Brand-tinted gradient bg — fills behind the mockup */
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, var(--card-color, var(--brand-blue)), transparent 70%),
    linear-gradient(160deg, #0D1754, #050A2A);
  isolation: isolate;
}
/* Platform icon chip — sits in top-left of the frame */
.herofx-v4 .social-card-pro-icon{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  transition: all 0.3s var(--ease);
}
.herofx-v4 .social-card-pro-icon svg{ width: 22px; height: 22px; }
.herofx-v4 .social-card-pro:hover .social-card-pro-icon{
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.05);
}

/* OLD internal body — hidden, meta now sibling .social-item-meta */
.herofx-v4 .social-card-pro-body{ display: none; }

/* ====== META BLOCK BELOW THE CARD (FTMO-style) ======
   Title is now BIGGER (more visual weight) — the cards are large, so the
   title needs to match in scale. Desc slightly bigger too. */
.herofx-v4 .social-item-meta{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 4px 4px 0;
}
.herofx-v4 .social-item-meta h4{
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: #0D1754;
}
.herofx-v4 .social-item-meta p{
  font-size: 16px;
  line-height: 1.55;
  color: rgba(13, 23, 84, 0.65);
  margin: 0 auto;
  max-width: 560px;
}
.herofx-v4 .social-item-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 13px 24px;
  background: var(--brand-blue);
  color: #FFFFFF;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  box-shadow: 0 6px 18px -6px rgba(12, 61, 239, 0.45);
}
.herofx-v4 .social-item-btn svg{
  width: 14px;
  height: 14px;
  transition: transform 0.25s var(--ease);
}
.herofx-v4 .social-item-btn:hover{
  background: var(--brand-navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -6px rgba(13, 23, 84, 0.45);
}
.herofx-v4 .social-item-btn:hover svg{ transform: translateX(3px); }

/* Per-platform button accent — subtle brand-color matching on hover */
.herofx-v4 .social-item[data-platform="youtube"] .social-item-btn{
  background: #FF0000;
  box-shadow: 0 6px 18px -6px rgba(255, 0, 0, 0.45);
}
.herofx-v4 .social-item[data-platform="youtube"] .social-item-btn:hover{
  background: #C70000;
}
.herofx-v4 .social-item[data-platform="instagram"] .social-item-btn{
  background: linear-gradient(135deg, #833AB4, #E1306C 60%, #F77737);
  box-shadow: 0 6px 18px -6px rgba(225, 48, 108, 0.45);
}
.herofx-v4 .social-item[data-platform="instagram"] .social-item-btn:hover{
  filter: brightness(0.92);
}
.herofx-v4 .social-item[data-platform="x"] .social-item-btn{
  background: #0F0F0F;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45);
}
.herofx-v4 .social-item[data-platform="x"] .social-item-btn:hover{
  background: #1D1D1D;
}


.herofx-v4 .social-card-pro-bg{
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.25;
  background: var(--card-gradient);
  transition: opacity 0.4s var(--ease);
}
.herofx-v4 .social-card-pro:hover .social-card-pro-bg{ opacity: 0.55; }


.herofx-v4 .social-card-pro-glow{
  position: absolute;
  top: -40%; right: -20%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, var(--card-color), transparent 70%);
  opacity: 0.4;
  filter: blur(40px);
  z-index: -1;
  transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
}
.herofx-v4 .social-card-pro:hover .social-card-pro-glow{
  opacity: 0.7;
  transform: scale(1.15);
}


.herofx-v4 .social-card-pro[data-platform="youtube"]{
  --card-color: #FF0000;
  --card-gradient: linear-gradient(135deg, #FF0000, #B91C1C);
}
.herofx-v4 .social-card-pro[data-platform="instagram"]{
  --card-color: #E1306C;
  --card-gradient: linear-gradient(135deg, #833AB4, #E1306C, #F77737);
}
.herofx-v4 .social-card-pro[data-platform="x"]{
  --card-color: #1D9BF0;
  --card-gradient: linear-gradient(135deg, #0F0F0F 0%, #1D1D1D 50%, #2A2A2A 100%);
}
.herofx-v4 .social-card-pro[data-platform="facebook"]{
  --card-color: #1877F2;
  --card-gradient: linear-gradient(135deg, #1877F2, #4595FF);
}


/* Icon now floats top-left as a small platform chip — does NOT take vertical
   space in the content area, sits over the mockup zone */
.herofx-v4 .social-card-pro-icon{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  transition: all 0.3s var(--ease);
}
.herofx-v4 .social-card-pro-icon svg{ width: 22px; height: 22px; }
.herofx-v4 .social-card-pro:hover .social-card-pro-icon{
  background: rgba(0, 0, 0, 0.6);
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.35);
}

.herofx-v4 .social-card-pro-content{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.herofx-v4 .social-card-pro-tag{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.herofx-v4 .social-card-pro-title{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  color: var(--text-1);
}
.herofx-v4 .social-card-pro--featured .social-card-pro-title{
  font-size: 28px;
}
.herofx-v4 .social-card-pro-desc{
  font-size:16px;
  line-height:1.5;
  color: rgba(255, 255, 255, 0.72);
  margin: 6px 0 4px;
  /* Full width now — mockup is above, not overlapping */
  max-width: 100%;
  position: relative;
  z-index: 2;
}
.herofx-v4 .social-card-pro-handle{
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  margin: 4px 0 0;
}


.herofx-v4 .social-card-pro-cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  transition: all 0.3s var(--ease);
}
.herofx-v4 .social-card-pro:hover .social-card-pro-cta{
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
}
.herofx-v4 .social-card-pro:hover .social-card-pro-cta svg{ transform: translateX(2px); }
.herofx-v4 .social-card-pro-cta svg{ transition: transform 0.25s var(--ease); }


.herofx-v4 .social-card-pro-mockup{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.85;
}


/* === INSTAGRAM MOCKUP — fills the 280px frame zone === */
.herofx-v4 .ig-mockup{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.herofx-v4 .ig-tile{
  position: absolute;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
  transition: transform 0.6s var(--ease);
}
.herofx-v4 .ig-tile-play{
  width: 32px; height: 32px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.herofx-v4 .ig-tile-play svg{ margin-left: 2px; }
.herofx-v4 .ig-tile-1,
.herofx-v4 .ig-tile-2,
.herofx-v4 .ig-tile-3{
  background-size: cover !important;
  /* Anchor to top so the SUBJECT of each photo (face/text headline) is
     visible — center cropping was hiding the man's face in tile-1. */
  background-position: center top !important;
  background-repeat: no-repeat !important;
}
/* 3 IG tiles — BIG (170x265), fanned out and centered, STAYING INSIDE
   the frame so the card's rounded bottom corners are visible. Tiles
   overlap each other for the "polaroid stack" look without dropping
   below the card edge (cleaner, no white slivers below corners). */
/* IG tile dimensions: 200x250 — MATCHES the 4:5 aspect ratio of the IG
   post images (1080x1350). This prevents the 21px horizontal cropping
   that was eating letters off the left of tile-1. The 9:16 reel image
   in tile-2 gets cropped vertically instead (less noticeable for reels).
   Side tiles stay INSIDE the frame; the CENTER tile overflows ~30px
   below for the premium "polaroid sticking out" feel. */
.herofx-v4 .ig-tile-1{
  left: 50%;
  margin-left: -240px;
  bottom: 8px;
  top: auto;
  width: 200px;
  height: 250px;
  transform: rotate(-8deg);
  z-index: 1;
}
.herofx-v4 .ig-tile-2{
  left: 50%;
  margin-left: -100px;
  bottom: -30px;
  top: auto;
  width: 200px;
  height: 250px;
  transform: rotate(0deg);
  z-index: 2;
}
.herofx-v4 .ig-tile-3{
  left: 50%;
  margin-left: 40px;
  bottom: 8px;
  top: auto;
  width: 200px;
  height: 250px;
  transform: rotate(8deg);
  z-index: 1;
}
.herofx-v4 .social-card-pro:hover .ig-tile-1{ transform: rotate(-11deg) translateY(-6px); }
.herofx-v4 .social-card-pro:hover .ig-tile-2{ transform: rotate(0deg) translateY(-8px); }
.herofx-v4 .social-card-pro:hover .ig-tile-3{ transform: rotate(11deg) translateY(-6px); }

/* === YOUTUBE MOCKUP — phone centered in the frame === */
.herofx-v4 .yt-mockup{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.herofx-v4 .yt-phone{
  width: 150px;
  aspect-ratio: 9/16;
  background: #0a0a0a;
  border-radius: 28px;
  padding: 6px;
  position: relative;
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 22px 50px -12px rgba(0, 0, 0, 0.7),
    0 0 80px -15px rgba(255, 0, 0, 0.55);
  transform: rotate(-6deg);
  transition: transform 0.5s var(--ease);
}
.herofx-v4 .social-card-pro:hover .yt-phone{
  transform: rotate(-2deg) translateY(-4px);
}
.herofx-v4 .yt-phone-notch{
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 12px;
  background: #000;
  border-radius: 100px;
  z-index: 2;
}
.herofx-v4 .yt-phone-screen{
  width: 100%;
  height: 100%;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #1a1a1a 0%, #2a0a0a 100%);
}
/* Real video inside the phone — fills entire screen rounded to phone shape */
.herofx-v4 .yt-phone-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
  display: block;
  z-index: 0;
}
/* === X MOCKUP — tweet card centered in the frame === */
.herofx-v4 .x-mockup{
  position: relative;
  width: 90%;
  max-width: 280px;
  transform: rotate(-4deg);
  pointer-events: none;
  transition: transform 0.5s var(--ease);
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.5));
}
.herofx-v4 .social-card-pro:hover .x-mockup{
  transform: rotate(-2deg) translateY(-4px);
}
.herofx-v4 .x-tweet{
  background: #16181C;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 60px -20px rgba(29, 155, 240, 0.4);
}
.herofx-v4 .x-tweet-header{
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.herofx-v4 .x-tweet-avatar{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /* Brand gradient as a fallback while the logo loads, also fills any
     transparent area of the PNG. */
  background: linear-gradient(135deg, #0C3DEF, #42E5FE);
  flex-shrink: 0;
  overflow: hidden;
  display: block;
}
.herofx-v4 .x-tweet-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.herofx-v4 .x-tweet-meta{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.herofx-v4 .x-tweet-name{
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.herofx-v4 .x-verified{
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  background: #1D9BF0;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 900;
}
.herofx-v4 .x-tweet-handle{
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1;
}
.herofx-v4 .x-tweet-body{
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 10px;
}
.herofx-v4 .x-tweet-stats{
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}
.herofx-v4 .x-tweet-stats span{
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

@media (max-width: 980px) {
  .herofx-v4 .blog-grid{ grid-template-columns: 1fr 1fr; }
  .herofx-v4 .blog-grid .blog-card:nth-child(3){ grid-column: span 2; }

  /* MOBILE — 3 cards stack vertically (FTMO-style remains: card on top,
     meta with title+desc+button right under it). */
  .herofx-v4 .social-cards{
    grid-template-columns: 1fr;
    grid-template-areas: none;
    gap: 28px;
  }
  .herofx-v4 .social-item[data-platform="instagram"],
  .herofx-v4 .social-item[data-platform="x"],
  .herofx-v4 .social-item[data-platform="youtube"]{
    grid-area: auto;
    grid-column: auto;
  }
  .herofx-v4 .social-item[data-platform="youtube"] .social-card-pro-frame{
    /* Mobile keeps the 16:9 aspect — auto height based on width */
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .herofx-v4 .social-item[data-platform="youtube"] .yt-phone{
    width: 140px;
  }
  /* Mobile: phone overflows bottom-right corner so the bg video stays visible */
  .herofx-v4 .social-item[data-platform="youtube"] .yt-mockup{
    position: absolute;
    top: auto;
    bottom: -32px;
    right: -8px;
    left: auto;
    width: auto;
    height: auto;
    display: block;
    transform: none;
  }
  .herofx-v4 .social-item[data-platform="youtube"]{
    gap: 56px;
    align-items: center;
  }
  .herofx-v4 .social-item[data-platform="youtube"] .social-card-pro{
    overflow: visible;
    padding-bottom: 0;
    max-width: 100%;
  }
  .herofx-v4 .social-item[data-platform="youtube"] .social-item-meta h4{
    font-size: 22px;
  }
  /* Center the meta (title, text + button) on mobile for ALL three cards so
     Instagram and X match the YouTube card's centered treatment. */
  .herofx-v4 .social-item[data-platform="youtube"] .social-item-meta,
  .herofx-v4 .social-item[data-platform="instagram"] .social-item-meta,
  .herofx-v4 .social-item[data-platform="x"] .social-item-meta{
    text-align: center;
    align-items: center;
  }
  .herofx-v4 .social-section{ margin: 56px -16px 0; padding: 60px 24px; }

  /* Card frame uniform 240px on mobile */
  .herofx-v4 .social-card-pro-frame{ height: 240px; }

  /* IG tiles on mobile — 4:5 aspect (140x175) matches the IG post images.
     Side tiles inside frame, center tile overflows ~22px for premium feel. */
  .herofx-v4 .ig-tile-1,
  .herofx-v4 .ig-tile-2,
  .herofx-v4 .ig-tile-3{
    width: 140px;
    height: 175px;
  }
  .herofx-v4 .ig-tile-1{ margin-left: -160px; bottom: 30px; }
  .herofx-v4 .ig-tile-2{ margin-left: -70px; bottom: -22px; }
  .herofx-v4 .ig-tile-3{ margin-left: 20px; bottom: 30px; }

  .herofx-v4 .yt-phone{ width: 130px; }
  .herofx-v4 .x-mockup{ width: 240px; }

  .herofx-v4 .social-item-meta h4{ font-size: 22px; }
  .herofx-v4 .social-item-meta p{ font-size: 15px; }
}
@media (max-width: 600px) {
  .herofx-v4 .section--blog{ padding: 140px 24px; }
  .herofx-v4 .blog-grid{ grid-template-columns: 1fr; }
  .herofx-v4 .blog-grid .blog-card:nth-child(3){ grid-column: auto; }
  .herofx-v4 .social-section{ padding: 48px 18px; border-radius: 24px; }
  .herofx-v4 .social-item-btn{ padding: 11px 20px; font-size: 13.5px; }
}


/* === FINAL CTA — REDESIGNED AS A "FLOATING ORB" RESTING ON THE FOOTER ===
   Visual concept: the section background continues the dark gradient from
   the affiliate section above (single uninterrupted dark scene). At the
   bottom of the section, a glassmorphism navy orb floats and overlaps
   into the light footer below — like a glass ball placed on a shelf.
   The orb has:
     - Top inner highlight (light catches the curve)
     - Bottom inner darken (sphere illusion)
     - Cyan glow halo (premium signature)
     - Floor cushion shadow (grounds it on the footer)
     - Very rounded corners (orb-like, not rectangular pill) */
.herofx-v4 .section--final-cta{
  position: relative;
  /* Padding-bottom 0 — the orb's flat bottom sits flush with the section
     bottom, "embedding" directly into the footer below (no gap, no
     rounded bottom corners — looks like a half-sphere pressed into the
     footer surface). */
  /* Full-width dark stage — the pill wrapper provides the vertical rhythm */
  padding: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(66, 229, 254, 0.14), transparent 60%),
    linear-gradient(180deg, #0A1240 0%, #0D1754 45%, #050A2A 100%);
  overflow: hidden;
  text-align: center;
  margin-bottom: 0 !important;
}
.herofx-v4 .section--final-cta .final-inner{
  padding: 0;
}
/* Decorative floating particles disabled — orb is the visual hero */
.herofx-v4 .section--final-cta::after{
  display: none;
}

/* Hide the legacy orb layers — replaced by the new design below */
.herofx-v4 .final-bg,
.herofx-v4 .final-orb{ display: none !important; }

.herofx-v4 .final-inner{
  position: relative;
  z-index: 2;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* THE ORB — glassmorphism navy sphere with cyan halo, resting on footer */
.herofx-v4 .final-pill{
  /* Former dome pill - now an invisible wrapper: the section itself is the
     full-width dark stage with the grid. text-align lives here because the
     defensive .section override forces left !important at section level. */
  position: relative;
  z-index: 5;
  color: #FFFFFF;
  padding: 104px 24px 96px;
  width: 100%;
  max-width: none;
  text-align: center;
}
.herofx-v4 .final-pill::before{ content:none; }
/* (Candlestick wick experiment removed — didn't convince) */
.herofx-v4 .final-pill .section-eyebrow{
  color: var(--brand-cyan);
  margin-bottom: 16px;
}
.herofx-v4 .final-pill .section-eyebrow .eyebrow-line{
  background: linear-gradient(90deg, transparent, var(--brand-cyan));
}
.herofx-v4 .final-pill .final-headline{
  color: #FFFFFF;
  /* Elongated proportions — keep headline reasonable */
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  margin: 0 0 14px;
  letter-spacing: -0.025em;
}
.herofx-v4 .final-pill .final-sub{
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.55;
  max-width: 620px;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, 0.78);
}

/* Inside the dark pill: ghost button uses light translucent colors */
.herofx-v4 .final-pill .btn-ghost{
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.18);
}
.herofx-v4 .final-pill .btn-ghost:hover{
  background: rgba(66, 229, 254, 0.12);
  border-color: var(--brand-cyan);
  color: var(--brand-cyan);
}

/* Trust pills sit on the dark stage now -> light text */
.herofx-v4 .section--final-cta .final-trust{
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.6);
}
.herofx-v4 .section--final-cta .final-trust > *{
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 600px) {
  .herofx-v4 .section--final-cta{ padding: 0; }
  .herofx-v4 .final-pill{ padding: 72px 20px 64px; }
}
.herofx-v4 .section--final-cta .section-eyebrow{ color: var(--brand-cyan); }
.herofx-v4 .section--final-cta .section-eyebrow .eyebrow-line{
  background: linear-gradient(90deg, transparent, var(--brand-cyan));
}
.herofx-v4 .final-headline{
  font-size: clamp(48px, 7.5vw, 92px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 24px;
  padding: 0.05em 0 0.15em;
}
.herofx-v4 .final-headline .grad-cyan{
  /* Static gradient (removed the infinite background-position shimmer for smoothness) */
  background-image: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan)); background-size: 150% 100%; background-position: center; background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding-bottom: 0.08em;
}
.herofx-v4 .final-sub{
  font-size:clamp(19px, 1.6vw, 24px);
  color: var(--text-2);
  max-width:700px;
  line-height:1.35;
  margin: 0 0 40px;
}
.herofx-v4 .final-ctas{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 36px;
}
/* Make the primary CTA in the final section larger + add a permanent
   pulsing halo so it draws the eye. */
.herofx-v4 .section--final-cta .btn-primary{
  padding: 20px 38px;
  font-size: 16px;
  position: relative;
}
.herofx-v4 .section--final-cta .btn-primary::after{
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(66, 229, 254, 0.35), rgba(12, 61, 239, 0.35));
  filter: blur(14px);
  z-index: -1;
  animation: ctaHalo 2.4s ease-in-out infinite alternate;
}
@keyframes ctaHalo {
  from { opacity: 0.5; transform: scale(0.97); }
  to   { opacity: 1;   transform: scale(1.04); }
}
.herofx-v4 .btn-ghost{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 17px 28px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-1);
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  text-decoration: none;
  transition: all 0.3s var(--ease);
}
.herofx-v4 .btn-ghost:hover{
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--brand-cyan);
  color: var(--brand-cyan);
}
.herofx-v4 .final-trust{
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.herofx-v4 .final-trust li{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.herofx-v4 .final-trust li:hover{
  border-color: rgba(66, 229, 254, 0.45);
  background: rgba(66, 229, 254, 0.06);
}
.herofx-v4 .final-trust svg{
  color: var(--brand-cyan);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  /* IMPORTANT: padding-bottom 0 — orb's flat bottom must sit FLUSH with
     the footer. Adding bottom padding here creates a visible gap. */
  .herofx-v4 .section--final-cta{ padding: 0; }
  .herofx-v4 .final-ctas{ flex-direction: column; width: 100%; }
  .herofx-v4 .final-ctas a{ width: 100%; justify-content: center; }
  .herofx-v4 .final-trust{ gap: 12px 16px; }
}


.herofx-v4 .placeholder{
  padding: 200px 24px;
  text-align: center;
  color: var(--text-3);
  border-top: 1px solid var(--border);
  background:
    radial-gradient(ellipse at top, rgba(12, 61, 239, 0.1), transparent 50%),
    var(--bg-deep);
}



@media (max-width: 1240px) {
  .herofx-v4 .stat-bar{
    overflow: hidden;
    width: 100%;
    max-width: none;
    padding: 32px 0;
    mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
  }
  .herofx-v4 .stat-track{
    display: flex;
    width: max-content;
    grid-template-columns: none;
    gap: 0;
    align-items: center;
    animation: statsMarquee 38s linear infinite;
  }
  
  /* Marquee mode: dupes visible for infinite scroll effect.
     !important to override the new generic .stat display rule. */
  .herofx-v4 .stat--dupe{ display: flex !important; }
  .herofx-v4 .stat-divider--dupe{ display: flex !important; }
  .herofx-v4 .stat-divider,.herofx-v4 .stat-divider--dupe{ display: none; }

  
  .herofx-v4 .stat-track .stat{
    flex: 0 0 220px;
    padding: 0 24px;
    text-align: center;
  }

  
  .herofx-v4 .stat-bar:hover .stat-track,.herofx-v4 .stat-bar:active .stat-track,.herofx-v4 .stat-bar:focus-within .stat-track{
    animation-play-state: paused;
  }
}
@media (max-width: 720px) {
  .herofx-v4 .stat-track .stat{ flex: 0 0 200px; padding: 0 20px; }
}
@media (max-width: 540px) {
  .herofx-v4 .stat-track .stat{ flex: 0 0 180px; padding: 0 16px; }
}


@keyframes statsMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


@media (prefers-reduced-motion: reduce) {
  .herofx-v4 .stat-track{ animation: none; }
}

@media (max-width: 540px) {
  /* Extra top padding so the sticky menu (~78–86px tall on mobile) doesn't
     touch the "Trusted Forex Broker · Since 2021" eyebrow pill below it. */
  .herofx-v4 .hero{ padding: 140px 0 0; }
  /* On phones the 21px frame inset (desktop logo-alignment) isn't needed and
     would narrow the content; use the full width with a normal 20px gutter. */
  .herofx-v4 .hero-stage{ width: 100%; padding-inline: 20px; }
  .herofx-v4 .hero-text, .herofx-v4 .hero-showcase{ min-width: 0; }
  .herofx-v4 .hero-eyebrow{ font-size: 11px; padding: 6px 12px; }
  .herofx-v4 .stat-num{ font-size: clamp(24px, 7vw, 32px); }
  /* Hero CTAs on mobile: HORIZONTAL row (side by side). Each button
     splits the available width 50/50 — keeps the visual balance and
     reads cleaner than stacked buttons on small screens. */
  .herofx-v4 .hero-ctas{
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    gap: 8px;
    margin-bottom: 28px;
    justify-content: center;
  }
  .herofx-v4 .hero-ctas .btn-primary,
  .herofx-v4 .hero-ctas .btn-ghost{
    flex: 1 1 50%;
    min-width: 0;
    padding: 14px 16px;
    font-size: 13.5px;
    justify-content: center;
    white-space: nowrap;
  }
  /* TYPEWRITER STABILITY ON MOBILE — "Trusted by" stays FIXED on its own line.
     Only the typewriter text changes. Reserved min-height so phrase length
     changes never bump the showcase below.
     Layout:
       [ avatars (centered) ]
       [ "Trusted by"        ] ‚Üê fixed text, never moves
       [ typed phrase + caret ] ‚Üê changes, lives inside reserved-height row
  */
  .herofx-v4 .hero-microproof{
    font-size: 13px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .herofx-v4 .hero-microproof-text{
    /* Override the inline-flex from desktop — go to plain block so we get
       two lines: "Trusted by" then the typed text below it. */
    display: block;
    text-align: center;
    line-height: 1.4;
  }
  /* Force the typed wrap onto its own line BELOW "Trusted by" with reserved
     height. This is what makes the showcase below NOT shift. */
  .herofx-v4 .hero-typed-wrap{
    display: block;
    margin-top: 4px;
    min-height: 22px;
  }
  .herofx-v4 .hero-typed{
    white-space: normal;
    color: var(--text-1);
  }
  .herofx-v4 .stat{ flex: 0 0 65%; }
}


@media (max-width: 414px) {
  
  .herofx-v4 .account-tab{ padding: 12px 14px; min-height: 44px; }
  .herofx-v4 .account-tab-title{ font-size: 14px; }
  .herofx-v4 .blog-card-tag{ font-size: 12px; padding: 7px 12px; }
  .herofx-v4 .support-channel-btn{ padding: 14px 20px; font-size: 14px; }
  .herofx-v4 .support-help-card{ padding: 16px 18px; }

  
  .herofx-v4 .section-eyebrow{ font-size: 11px; }
  .herofx-v4 .testimonial-quote{ font-size: 14px; }
  .herofx-v4 .testimonial-author{ font-size: 13px; }
  .herofx-v4 .blog-card-title{ font-size: 17px; }
  .herofx-v4 .social-card-pro-tag{ font-size: 11px; }
  .herofx-v4 .social-card-pro-handle{ font-size: 13px; }

  
  .herofx-v4 .section{ padding-left: 16px; padding-right: 16px; }
  .herofx-v4 .section--testimonials,.herofx-v4 .section--support,.herofx-v4 .section--blog,.herofx-v4 .section--accounts{ padding-top: 64px; padding-bottom: 64px; }

  
  .herofx-v4 .accounts-candles,.herofx-v4 .ma-line,.herofx-v4 .deposits-orbit,.herofx-v4 .hero-mesh,.herofx-v4 .hero-orb,.herofx-v4 .hero-beam,.herofx-v4 .candle-group{
    animation: none !important;
  }
  
  .herofx-v4 .candle-group{ opacity: 1 !important; transform: scaleY(1) !important; }
  .herofx-v4 .ma-line{ opacity: 0.7 !important; stroke-dashoffset: 0 !important; }
}

@media (max-width: 375px) {
  .herofx-v4 .blog-card-title{ font-size: 16px; }
  .herofx-v4 .final-headline{ font-size: clamp(36px, 11vw, 56px); }
}

/* MOBILE MENU LANGUAGE SWITCHER STYLES — REMOVED.
   Previously this widget inlined ~110 lines of `.mobile-lang-btn` overrides
   forcing Inter + smaller flags + font-size:13px etc. Those rules COLLIDED
   with `astra-child/menu-v4.css` which is now the single source of truth
   for the menu (including the bulletproof ñ fix via Unicode escape \00f1
   in ::after). Two `!important` rules at the same specificity = inline
   wins, so this block was overriding the menu file and producing
   "English English" / "Espa√±ol Español" duplicates on mobile.
   The whole block was deleted. menu-v4.css handles everything cleanly. */

/* === MOBILE PERFORMANCE — disable decorative infinite animations on
   small screens. Reason: heavy GPU work runs 24/7 (hero orbs blur 40px
   320√ó320 px drifting + final-headline gradient shift + CTA halo pulse)
   which makes the mobile menu open/close and panel scroll feel laggy
   on the homepage compared to other pages. The decorations add little
   on small screens (orbs barely visible behind the hero text) and cost
   a lot. We pause them under 980px. Desktop keeps the premium feel. */
@media (max-width: 980px) {
  .herofx-v4 .hero-orb-1,
  .herofx-v4 .hero-orb-2 {
    animation: none !important;
  }
  .herofx-v4 .final-headline .grad-cyan {
    animation: none !important;
  }
  .herofx-v4 .section--final-cta .btn-primary::after {
    animation: none !important;
  }
}

/* Respect prefers-reduced-motion: kill ALL infinite animations for
   users who set "reduce motion" in their OS. Accessibility + perf. */
@media (prefers-reduced-motion: reduce) {
  .herofx-v4 .hero-orb-1,
  .herofx-v4 .hero-orb-2,
  .herofx-v4 .final-headline .grad-cyan,
  .herofx-v4 .section--final-cta .btn-primary::after,
  .herofx-v4 .testimonials-col-track,
  .herofx-v4 .deposits-orbit {
    animation: none !important;
  }
}

/* ===== SAFARI SCROLL-JANK FIX (measured via safaridriver, 2026-06) =====
   Root cause of the sticky-menu stutter on THIS page in Safari only:
   the accounts SVG candle chart. Its mask-image + the ma-line's
   drop-shadow filter force WebKit to re-rasterize the whole vector
   every scroll tile (~300ms main-thread spikes). Chrome composites it
   fine, so this block is scoped to Safari via @supports.
   Fix: drop mask+filter, promote chart (and the masked grid pattern)
   to cached compositor layers, and recreate the vertical fade with a
   cheap gradient overlay. Measured: 7-9 frames >50ms (max ~500ms) ‚Üí
   1-2 (max ~240ms, one-time first-raster). */
@supports (-webkit-hyphens: none) {
  .herofx-v4 .section--accounts::before {
    transform: translateZ(0);
    will-change: transform;
  }
  .herofx-v4 .accounts-candles {
    mask-image: none !important;
    -webkit-mask-image: none !important;
    transform: translateZ(0);
    will-change: transform;
  }
  .herofx-v4 .accounts-candles .ma-line {
    filter: none !important;
    stroke-width: 2.8 !important;
  }
  /* gradient overlay replaces the removed vertical fade mask */
  .herofx-v4 .accounts-candles::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
      #07103A 0%, rgba(7, 16, 58, 0) 14%,
      rgba(5, 10, 42, 0) 86%, #050A2A 100%);
  }
}

/* Chip icons: the generic .affiliate-visual img rule (width:100%,
   max-width:920px) is later in source order and was collapsing the
   icons inside the chip grid - re-assert their fixed size */
.herofx-v4 .affiliate-visual .affiliate-chip img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  max-width: none;
  border-radius: 50%;
}

/* Hero card spans exactly the text column (chip top to trusted-by bottom).
   The dots' negative bottom margin cancels their layout space (24px gap +
   4px height) so the centered stack stays 488px and the card top still
   lines up with the eyebrow chip; the dots simply hang below the card. */
@media (min-width: 1272px){
  .herofx-v4 .showcase{ height: 512px; }
  .herofx-v4 .showcase-nav{ margin-bottom: -28px; }
}

/* Hero order on mobile: eyebrow, H1, sub, CTAs, slide, trusted-by.
   The text column becomes display:contents so its children join the
   stage grid and the trusted-by row can sit below the slide. Spacing
   moves from the grid gap to per-item margins. */
@media (max-width: 1024px){
  .herofx-v4 .hero-text{ display: contents; }
  .herofx-v4 .hero-stage{ gap: 0; justify-items: center; }
  .herofx-v4 .hero-eyebrow{ order: 1; }
  .herofx-v4 .hero-headline{ order: 2; }
  .herofx-v4 .hero-sub{ order: 3; }
  .herofx-v4 .hero-ctas{ order: 4; }
  .herofx-v4 .hero-showcase{ order: 5; margin-top: 12px; }
  .herofx-v4 .hero-microproof{ order: 6; margin-top: 36px; }
}

/* ============================================================
   SISTEMA DE RITMO — DS 3.2 (referencia apple.com)
   ============================================================ */

/* --- Gap titulo -> lead --- */
.herofx-v4 .hero-headline,
.herofx-v4 .section-headline,
.herofx-v4 .affiliate-headline,
.herofx-v4 .final-headline{ margin-bottom:10px !important; }

/* --- Viudas ---
   `balance` solo en titulos y en leads de 1-2 lineas. En textos de 3+ lineas
   deja las lineas demasiado cortas respecto a la caja: ahi se usa el flujo normal. */
.herofx-v4 .hero-headline,
.herofx-v4 .section-headline,
.herofx-v4 .affiliate-headline,
.herofx-v4 .final-headline,
.herofx-v4 .hero-sub,
.herofx-v4 .section-lead,
.herofx-v4 .final-sub{ text-wrap:balance; }
.herofx-v4 .affiliate-head .affiliate-desc{
  text-wrap:balance;
  max-width:680px;   /* cabe en 2 lineas al quitar el salto de linea forzado del HTML */
}

/* --- Escala de texto --- */
.herofx-v4 .showcase-title,
.herofx-v4 .start-step-title{ font-size:clamp(22px, 2.4vw, 30px) !important; }
.herofx-v4 .account-tab-title{ font-size:19px !important; }
/* El chat de soporte NO entra aqui: es la maqueta de una interfaz, no texto
   de lectura. Subirlo a 16px inflaba el mock de 486 a 598px y lo obligaba a
   bajar mucho mas sobre la foto. Se queda en sus 13.5, como en el Help
   Center. */
.herofx-v4 .testimonial-author{ font-size:16px !important; line-height:1.5 !important; }
.herofx-v4 .blog-card-tag,
.herofx-v4 .stat-label{ font-size:13px !important; line-height:1.45 !important; }
/* --- Eyebrow: un solo patron en toda la pagina (DS: 12px / 700 / 0.18em) ---
   Habia 4 configuraciones distintas: 10.5/700/1.47 · 11/600/1.54 ·
   12/600/1.54 · 12/700/2.16. El icono va 2px por encima del texto o se
   ve hundido. */
.herofx-v4 [class*="eyebrow"]{
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:0.18em !important;
  line-height:1.4 !important;
}
.herofx-v4 .hero-eyebrow-text{ font-size:12px !important; }
.herofx-v4 .hero-eyebrow svg{ width:14px !important; height:14px !important; flex:none; }
.herofx-v4 .final-pill .final-sub{
  font-size:clamp(19px, 1.6vw, 24px) !important;
  line-height:1.35 !important; max-width:700px !important;
}
.herofx-v4 .support-list p,
.herofx-v4 .support-copy p{ font-size:16px !important; line-height:1.5 !important; }
.herofx-v4 .support-card h3{ font-size:clamp(22px, 2.4vw, 30px) !important; }

/* --- Medida de linea --- */
.herofx-v4 .disclaimer p,
.herofx-v4 .legal p,
.herofx-v4 .footer-disclaimer p,
.herofx-v4 .risk-text p{ max-width:80ch; }

/* --- Radios --- */
.herofx-v4 .value-card,
.herofx-v4 .account-panel,
.herofx-v4 .start-step,
.herofx-v4 .social-card,
.herofx-v4 .blog-card{ border-radius:20px; }

/* --- FLECHAS: solo en enlaces de texto, nunca en botones con caja ---
   Un boton con fondo ya se lee como accion; la flecha es ruido.
   En un enlace suelto si aporta, porque no hay caja que lo indique. */
.herofx-v4 .btn-primary > svg,
.herofx-v4 .btn-ghost > svg,
.herofx-v4 .btn-find-account > svg,
.herofx-v4 .support-channel-btn > svg,
.herofx-v4 .social-item-btn > svg,
.herofx-v4 .btn-primary > .arrow,
.herofx-v4 .btn-find-account > .arrow{ display:none !important; }

/* --- Ritmo vertical: UN valor por breakpoint --- */
.herofx-v4 .section,
.herofx-v4 .section--values,
.herofx-v4 .section--accounts,
.herofx-v4 .section--deposits,
.herofx-v4 .section--start,
.herofx-v4 .section--testimonials,
.herofx-v4 .section--blog{
  padding-top:120px !important;
  padding-bottom:120px !important;
}
/* La imagen del partner va a ras del borde inferior: sin padding abajo. */
.herofx-v4 .section--affiliate{ padding-top:120px !important; padding-bottom:0 !important; }
.herofx-v4 .section--support{ padding-top:120px !important; }

@media (max-width:1024px){
  .herofx-v4 .section,
  .herofx-v4 .section--values,
  .herofx-v4 .section--accounts,
  .herofx-v4 .section--deposits,
  .herofx-v4 .section--start,
  .herofx-v4 .section--testimonials,
  .herofx-v4 .section--blog{ padding-top:96px !important; padding-bottom:96px !important; }
  .herofx-v4 .section--affiliate{ padding-top:96px !important; padding-bottom:0 !important; }
  .herofx-v4 .section--support{ padding-top:96px !important; }
  .herofx-v4 .final-sub,
  .herofx-v4 .final-pill .final-sub,
  .herofx-v4 .section-lead,
  .herofx-v4 .hero-sub{ max-width:52ch !important; }
}

@media (max-width:767px){
  .herofx-v4 .section,
  .herofx-v4 .section--values,
  .herofx-v4 .section--accounts,
  .herofx-v4 .section--deposits,
  .herofx-v4 .section--start,
  .herofx-v4 .section--testimonials,
  .herofx-v4 .section--blog{
    padding-top:80px !important; padding-bottom:80px !important;
    padding-left:24px !important; padding-right:24px !important;
  }
  .herofx-v4 .section--affiliate{ padding-top:80px !important; padding-bottom:0 !important; }
  .herofx-v4 .section--support{ padding-top:80px !important; }
  .herofx-v4 .hero-sub,
  .herofx-v4 .section-lead,
  .herofx-v4 .final-sub{ max-width:100% !important; }
}

/* --- Jerarquia de CTAs ---
   El primario tenia menos ancho que el secundario solo porque su texto es
   mas corto, y el principal parecia el menos importante. `min-width` iguala
   la caja sin tocar el padding del sistema. */
.herofx-v4 .hero-ctas .btn-primary,
.herofx-v4 .hero-ctas .btn-ghost{ min-width:192px; justify-content:center; }
@media (max-width:767px){
  .herofx-v4 .hero-ctas .btn-primary,
  .herofx-v4 .hero-ctas .btn-ghost{ min-width:0; }
}

/* --- Cierre de pagina ---
   OJO: el espacio real era el DOBLE del que marcaba la seccion, porque la
   .final-pill de dentro anadia su propio padding (104px arriba / 96 abajo).
   Sumaban 200px y el titulo quedaba a 241px del borde.
   Se reparte: 72 de la seccion + 48 de la pill = 120px, igual que el resto. */
.herofx-v4 .section--final-cta{ padding-top:72px !important; padding-bottom:72px !important; }
.herofx-v4 .final-pill{ padding-top:48px !important; padding-bottom:48px !important; }
@media (max-width:1024px){
  .herofx-v4 .section--final-cta{ padding-top:56px !important; padding-bottom:56px !important; }
  .herofx-v4 .final-pill{ padding-top:40px !important; padding-bottom:40px !important; }
}
@media (max-width:767px){
  .herofx-v4 .section--final-cta{ padding-top:40px !important; padding-bottom:40px !important; }
  .herofx-v4 .final-pill{ padding-top:40px !important; padding-bottom:40px !important; }
}

/* --- El ultimo elemento de una seccion no arrastra margen ---
   deposits y blog sumaban 220 y 240px de hueco abajo (120 de padding +
   el margen del ultimo bloque) mientras el resto quedaba en 120. */
.herofx-v4 .section > *:last-child,
.herofx-v4 .section-inner > *:last-child,
.herofx-v4 .social-section > *:last-child{ margin-bottom:0 !important; }

/* Los tabs de cuenta salian con line-height:normal (sin definir), que varia
   segun la fuente y descuadra la altura de las pestanas. */
.herofx-v4 .account-tab-title{ line-height:1.3 !important; }
.herofx-v4 .account-tab-tag{ line-height:1.45 !important; }

/* --- Bloque social: es una tarjeta DENTRO de .section--blog, no una seccion ---
   Las dos son blancas, asi que la tarjeta no se ve y sus paddings solo se
   sumaban a los de la seccion: 240px de vacio bajo el boton de YouTube.
   Arriba lleva ritmo de sub-bloque (96px, menos que los 120 de seccion) y
   abajo cierra la propia .section--blog. */
.herofx-v4 .social-section{
  margin-top:0 !important;
  padding-top:96px !important;
  padding-bottom:0 !important;
}
@media (max-width:1024px){
  .herofx-v4 .social-section{ padding-top:72px !important; padding-bottom:0 !important; }
}
@media (max-width:767px){
  .herofx-v4 .social-section{ padding-top:56px !important; padding-bottom:0 !important; }
}


/* ===== Leads de seccion que se habian quedado fuera del sistema =====
   El DS pide lead = clamp(19px, 1.6vw, 24px) con line-height 1.35. Estos
   estaban por debajo y se veian pequenos al lado del resto:
     .social-section-head p  clamp(16,1.25vw,19)  -  18px en desktop
     .showcase-desc          13.5px
     .start-step-desc        14px
   Ademas el lead de la seccion social llevaba un salto de linea forzado que partia la
   frase por un sitio fijo e impedia que `balance` repartiera las lineas. */
.herofx-v4 .social-section-head p{
  font-size:clamp(19px, 1.6vw, 24px) !important;
  line-height:1.35 !important;
  max-width:min(700px, 50ch) !important;
  text-wrap:balance !important;
}
.herofx-v4 .social-section-head p .lead-br,
.herofx-v4 .social-section-head p br.lead-br{ display:none !important; }

.herofx-v4 .showcase-desc,
.herofx-v4 .start-step-desc{
  font-size:16px !important;
  line-height:1.5 !important;
  text-wrap:balance;
}

/* Texto de card: reparto sin viudas (DS 9.10). Faltaba en la homepage igual
   que faltaba en TradeLocker. */
.herofx-v4 .value-desc,
.herofx-v4 .account-panel-desc,
.herofx-v4 .affiliate-desc,
.herofx-v4 .social-card-pro-desc,
.herofx-v4 .final-pill .final-sub,
.herofx-v4 .showcase-desc,
.herofx-v4 .start-step-desc,
.herofx-v4 .faq-a,
.herofx-v4 .faq-a p{ text-wrap:balance; }


/* =====================================================================
   SISTEMA DE TEXTO — revision completa 2026-08-04
   Lo que la primera pasada no medía: viudas, salto de linea forzados y texto de
   contenido por debajo de 16px.
   ===================================================================== */
.herofx-v4 p,
.herofx-v4 li{ text-wrap:balance; }

.herofx-v4 [class*="-desc"],
.herofx-v4 [class*="-body"],
.herofx-v4 [class*="-text"]:not([class*="eyebrow"]),
.herofx-v4 .social-item p,
.herofx-v4 .support-channel p{
  font-size:16px !important;
  line-height:1.5 !important;
}

/* Los salto de linea a mano fijan el corte e impiden que el parrafo se reparta. */
.herofx-v4 p br.lead-br,
.herofx-v4 p br[class*="lead"]{ display:none !important; }


/* 2a pasada: el lead de afiliados seguia a 16px */
.herofx-v4 .affiliate-desc,
.herofx-v4 [class*="-head"] > p:not([class]){
  font-size:clamp(19px, 1.6vw, 24px) !important;
  line-height:1.35 !important;
}


/* 3a pasada */
.herofx-v4 [class*="final-sub"],
.herofx-v4 [class*="start-desc"]{
  font-size:clamp(19px, 1.6vw, 24px) !important; line-height:1.35 !important;
}


/* ===== FAQ: el texto llena la caja ===== */
.herofx-v4 [class*="faq-a"],
.herofx-v4 [class*="faq-a"] p,
.herofx-v4 details p{ max-width:none !important; text-wrap:wrap !important; }

/* ===== Chat de soporte: bajado para no tapar a la agente =====
   El chat se colocaba con `bottom:-140px`, lo que lo dejaba montado sobre 458
   de los 575px de la foto: se veia la cara y poco mas. Se baja para que solo
   monte ~120px sobre el borde inferior, y el bloque visual crece para que el
   chat entre entero -antes se apoyaba en que la seccion lo dejara asomar-. */
@media (min-width:901px){
  .herofx-v4 .support-mock{ bottom:auto !important; top:370px !important; }
  /* Con el chat en su tamano (486 en vez de 598) el bloque necesita menos. */
  .herofx-v4 .support-visual{ min-height:875px !important; }
  /* Mas peso a la columna de texto: el lead se quedaba en 51 caracteres por
     linea y se leia encajonado. */
  .herofx-v4 .support-grid{ grid-template-columns:1.42fr 1fr !important; }
  .herofx-v4 .support-content{ max-width:none !important; }
  /* 640 y no el ancho entero de la columna: a 700 el texto llenaba dos
     lineas y dejaba la tercera al 30%. Con 640 son 59 caracteres por linea
     y cierra al 57%, los mismos numeros que en el Help Center. */
  .herofx-v4 .support-content > p{ max-width:640px !important; }
  /* Sin `balance`: igualando lineas se quedaban en 51 caracteres aunque la
     caja creciera. Sueltas llenan el ancho (59, el tope del sistema). */
  .herofx-v4 .support-content > p{ text-wrap:wrap !important; }
  /* El bloque de texto arranca a la altura del borde superior de la foto. */
  .herofx-v4 .support-grid{ align-items:start !important; }
  /* Al ensanchar la columna el titular pasaba a una sola linea. Topado a 580
     vuelve a partir donde toca: "We've got your / back 24/7". */
  .herofx-v4 .section--support .section-headline{ max-width:580px !important; }
  /* Y las dos cards arrancaban 109px antes que el chat de la derecha. */
  .herofx-v4 .support-channels{ margin-top:77px !important; }
}

/* ===== Card "Raw institutional-grade spreads" =====
   La imagen nueva (bidask) ya viene centrada y con su propio margen, asi que
   no necesita ni el 88% que traia la anterior ni compensacion horizontal:
   solo se le quita el `scale` heredado para que ocupe lo mismo que sus dos
   hermanas. */
.herofx-v4 .value-image--raw img{ transform:none !important; }
.herofx-v4 .value-card:hover .value-image--raw img{
  transform:translateY(-3px) !important; }

/* ===== Slider del hero =====
   1. El texto de las cards iba con `text-wrap:balance`, que iguala las lineas
      y deja el resto en blanco: sobraban entre 96 y 134px a la derecha de la
      linea mas larga. Con `pretty` llenan la caja (sobra 8-28) y sigue
      cuidando el final del parrafo. */
.herofx-v4 .showcase-card p{ text-wrap:pretty !important; }

/* 2. La imagen de Hero10X se veia mas grande que las otras cuatro, y no era
      cosa del archivo: la card es un flex column de altura fija y, cuando el
      texto ocupa tres lineas, la imagen se encoge para dejarle sitio (290 ->
      266). El texto de Hero10X son dos lineas, asi que la suya se quedaba en
      los 290 completos. Se le fija la altura para que ninguna dependa de
      cuanto texto tenga debajo. */
.herofx-v4 .showcase-image{ height:266px; flex:0 0 266px; }
@media (max-width:540px){
  .herofx-v4 .showcase-image{ height:200px; flex:0 0 200px; }
}

/* 3. El titulo de la card de Hero10X arrancaba 23px mas abajo que el de las
      otras cuatro: es la unica con `margin-top` propio. */
.herofx-v4 .showcase-card-hero10x .showcase-title{ margin-top:0; }

/* ===== Seccion "Deposit your way" =====
   Fuera el circulo punteado: media 699px en una columna de 560, asi que
   sobresalia por los lados y obligaba a tener la imagen al 78% para dejarle
   sitio. Sin el, la imagen sube de 440 a 531px de ancho -el archivo tiene
   1200 de origen, asi que le sobra resolucion- y se ve mucho mejor. */
.herofx-v4 .deposits-orbit{ display:none !important; }
.herofx-v4 .deposits-image-wrap{ max-width:94% !important; }
@media (max-width:980px){
  .herofx-v4 .deposits-image-wrap{ max-width:88% !important; }
}


/* ============================================================================
   REPASO DE MOVIL — homepage
   Cuatro arreglos que solo aplican por debajo de 540px. Desktop no se toca.
   ========================================================================= */

/* 1. HERO: la jerarquia estaba invertida.
   El H1 heredaba el clamp de tablet -clamp(36px,5vw,60px) en <=1240- y se
   quedaba en su minimo, 36px, mientras el lead seguia en 19px. Medido a
   390px: el titular ocupaba 80px de alto y el subtexto 128px, o sea que el
   texto de apoyo pesaba mas que el titular.

   El reparto feo del lead -260/211/328/272/266px, con 117px de salto entre
   dos lineas seguidas- venia de ahi y no de `text-wrap: balance`, que es lo
   primero que parece. `balance` se descontrola cuando hay muchas lineas; en
   cuanto el lead baja a 17px y cabe en cuatro, hace bien su trabajo y deja
   la ultima linea al 86%. Medido contra `pretty`, que la dejaba al 24%.
   O sea: se arregla con el cuerpo, no con el modo de reparto.

   El tamano del titular va en clamp y no en un valor fijo porque 40px
   clavados lo hacian caer a cuatro lineas en pantallas de 320px, donde antes
   entraba en tres. Con este clamp: 34px a 320, 37px a 360 y 40px de 390 en
   adelante, que es donde esta la practica totalidad del trafico movil. */
@media (max-width: 540px){
  .herofx-v4 .hero-headline{
    font-size: clamp(34px, 10.3vw, 40px);
    line-height: 1.06;
  }
  .herofx-v4 .hero-sub{
    font-size: 17px;
    line-height: 1.45;
  }
}

/* 2. ULTIMA SECCION: la misma historia que el hero.
   Un parrafo de 155 caracteres a 19px caia en 6 lineas centradas de
   226/204/224/254/241/224px dentro de una caja de 302px: ninguna llegaba al
   borde, y esa silueta escalonada es la forma de piramide. Bajandolo a 17px
   caben 5 y el reparto se arregla solo -la ultima linea pasa del 42% al
   100%-, otra vez sin tocar el `balance`.

   Ojo con la munición que hace falta aqui: el tamano lo clava un
   `[class*="final-sub"]` con !important, y el `.final-pill .final-sub` de
   tres clases gana a cualquier regla de dos. Una regla normal entra en la
   hoja pero no computa. */
@media (max-width: 540px){
  .herofx-v4 .final-sub,
  .herofx-v4 .final-pill .final-sub{
    font-size: 17px !important;
    line-height: 1.5 !important;
  }
}


/* 3. SOPORTE: orden y solape del chat en una sola columna.
   Aplica a toda la franja en la que la seccion deja de ir en dos columnas,
   o sea de 979px para abajo. Antes cada mitad de esa franja fallaba de una
   manera distinta:

     - por debajo de 540 se veia foto, chat, titular, subtexto y cajas -el
       bloque visual llevaba order:1 y el de texto order:2-, cuando lo
       natural es leer primero de que va la seccion y despues verla;
     - entre 541 y 979 el orden era titular, subtexto, cajas, foto y chat
       -las cajas por delante de la imagen que las explica- y ademas el chat
       seguia en `position:absolute` heredado del layout de escritorio, con
       lo que caia encima de la foto tapandole 385 de sus 575px.

   El problema para reordenar es que el titular y las cajas viven los dos
   dentro de `.support-content`, asi que con `order` sobre los dos hermanos
   no se puede intercalar la foto entre ellos. `display: contents` disuelve
   esa caja intermedia y sube sus hijos al flex de `.support-grid`, donde ya
   se pueden ordenar uno a uno. No se pierde ninguna animacion: `.reveal-up`
   esta anulado mas arriba con `opacity:1 !important`.

   El gap pasa a 0 porque antes separaba dos bloques y ahora habria seis. */
@media (max-width: 979px){
  /* `align-items` tiene que ser stretch y no el center que trae la seccion.
     En una columna, center encoge cada bloque a su ancho de contenido y lo
     centra: a 768px el eyebrow media 130px, el titular 445, el subtexto 622
     y la foto 380, cada uno arrancando en un sitio distinto -295, 138, 49 y
     170-. Con el texto alineado a la izquierda, eso es un escalon por linea.
     En movil no se veia porque ahi todos los bloques miden lo mismo que la
     columna. Con stretch, todos comparten el borde izquierdo. */
  .herofx-v4 .support-grid{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .herofx-v4 .support-content{ display: contents; }

  .herofx-v4 .section--support .section-eyebrow { order: 1; }
  .herofx-v4 .section--support .section-headline{ order: 2; }
  .herofx-v4 .section--support .section-lead    { order: 3; margin-bottom: 0; }
  .herofx-v4 .support-visual                    { order: 4; margin: 34px 0 36px; }
  .herofx-v4 .support-channels                  { order: 5; }
  .herofx-v4 .support-help-card                 { order: 6; margin-top: 12px; }

  /* El subtexto llevaba un tope de 640px puesto para el layout de dos
     columnas, y en una sola columna ese ancho cae justo donde peor reparte:
     a 978px dejaba una ultima linea del 8%, una palabra suelta. Topandolo
     por medida de lectura en vez de por pixeles, la ultima linea se queda
     entre el 98 y el 99% en toda la franja, y de 768 para arriba ademas
     baja de tres lineas a dos. */
  .herofx-v4 .support-content > p,
  .herofx-v4 .section--support .section-lead{ max-width: 56ch !important; }

  /* La foto y el chat pasan a ser dos piezas apiladas y centradas. En la
     franja de tablet el chat venia posicionado en absoluto por el layout de
     escritorio; aqui vuelve al flujo. */
  .herofx-v4 .support-visual{
    position: static;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .herofx-v4 .support-portrait{
    width: 100%;
    max-width: 440px;
    aspect-ratio: 4/5;
    margin: 0;
  }

  /* El chat monta un poco sobre el pie de la foto -suelto, con aire en
     medio, los dos elementos parecian no tener nada que ver-. Son 44px
     sobre 550px de foto: entra por el borde inferior y no llega ni de
     lejos a la cara. Va al mismo ancho que la foto: con el chat 20px mas
     ancho asomaba por los dos lados y parecia descuadrado, no deliberado.

     Los 440px salen de comparar con el texto, que en tablet mide 622: a los
     380 de antes el bloque visual se veia flaco al lado del parrafo. Mas
     ancho tampoco vale, porque con el aspect-ratio 4/5 cada pixel de ancho
     son 1,25 de alto y a 480 la foto ya pedia 600px de pantalla. */
  .herofx-v4 .support-mock{
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    margin: -44px 0 0;
  }
}


/* 4. CHOOSE YOUR TRADING ACCOUNT: de pestañas a tarjetas deslizables.
   En movil esto era una fila de pestañas con scroll dentro de una caja con
   borde, y debajo el panel de la cuenta activa dentro de OTRA caja con
   borde. Dos problemas: la segunda pestaña quedaba cortada a media palabra
   contra el borde -se leia "He" de Hero10X- y no habia forma de saber que
   detras hay cinco cuentas. Ademas la caja dentro de la caja restaba
   protagonismo a la tarjeta, que es lo unico que importa aqui.

   Ahora las cinco cuentas son tarjetas de verdad, se pasan de una a otra
   deslizando, y unos puntos debajo dicen cuantas hay y en cual estas. Los
   puntos los pinta el JS y usan el mismo lenguaje que los del slider del
   hero (.showcase-dot), asi que la pagina no estrena un patron nuevo. */
@media (max-width: 980px){

  /* Fuera la caja exterior: en movil la tarjeta ES el contenedor. */
  .herofx-v4 .accounts-app{
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  .herofx-v4 .accounts-app::before{ display: none; }
  .herofx-v4 .accounts-app-inner{
    display: block;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* Las pestañas ya no hacen falta: navegar es deslizar. */
  .herofx-v4 .accounts-tabs-wrap{ display: none; }

  /* El carril. El margen negativo lo saca hasta el borde de la pantalla para
     que las tarjetas entren y salgan por el filo, como en iOS; el padding
     equivalente devuelve el aire por dentro. */
  .herofx-v4 .accounts-panels{
    display: flex;
    gap: 14px;
    overflow: auto hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: none;
    border: 0;
    border-radius: 0;
    margin: 0 -20px;
    padding: 4px 20px 6px;
    scroll-padding: 0 20px;
    overscroll-behavior-x: contain;
  }
  .herofx-v4 .accounts-panels::-webkit-scrollbar{ display: none; }

  /* Cada panel deja de estar apilado en la misma celda de grid y pasa a ser
     una tarjeta con su propio borde y su propio fondo. */
  .herofx-v4 .accounts-panels .account-panel{
    grid-area: auto;
    flex: 0 0 86%;
    scroll-snap-align: center;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
  }

  /* Los puntos. Mismo tamaño y mismo cian que los del hero. */
  .herofx-v4 .accounts-dots{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 22px 0 0;
  }
  .herofx-v4 .accounts-dot{
    width: 28px;
    height: 4px;
    border: 0;
    padding: 0;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: background 0.35s var(--ease), width 0.35s var(--ease);
  }
  .herofx-v4 .accounts-dot.active-state{
    width: 44px;
    background: var(--brand-cyan);
    box-shadow: 0 0 12px rgba(66, 229, 254, 0.5);
  }
}

/* En pantallas estrechas la tarjeta se ensancha: con 86% de 360px el trozo
   que asoma es mas ruido que pista. */
@media (max-width: 420px){
  .herofx-v4 .accounts-panels .account-panel{ flex: 0 0 89%; }
}

/* Fuera de movil los puntos no existen. */
@media (min-width: 981px){
  .herofx-v4 .accounts-dots{ display: none; }
}


/* 5. SEPARACIONES en movil y tablet.

   El chat quedaba pegado a la caja de "Talk with a live agent" -0px entre
   los dos- porque el bloque de foto+chat perdia su margen inferior por una
   regla de reset, `.section > :last-child{ margin-bottom:0 }`. La trampa:
   `order` cambia el orden que se ve, no el del DOM. La foto y el chat
   siguen siendo el ultimo hijo aunque se muestren en el medio, asi que el
   reset los pillaba igual. Y no basta con !important: el reset tambien lo
   lleva, asi que empatan en importancia y decide la especificidad, donde el
   `:last-child` le da tres a dos. Por eso el selector va por el padre,
   `.support-grid > .support-visual`: empata a tres y gana por ir despues.

   De paso, el ritmo de esa columna era 0 / 12 / 40px. Ahora es 36 / 12 / 24:
   el bloque visual se separa claramente, las dos cajas de contacto van
   juntas porque son la misma familia, y el Help Center queda algo aparte
   porque es de otro nivel. El solape del chat con la foto no se toca: ahi
   estar pegados es el efecto buscado. */
@media (max-width: 979px){
  .herofx-v4 .support-grid > .support-visual{ margin: 34px 0 36px !important; }
  /* El margen va a 0 por los dos lados. El de arriba son los 77px que
     alinean las cajas con el pie del chat cuando la seccion va en dos
     columnas; de 901 a 979 seguia aplicando y sumaba 113px de hueco donde
     tocaban 36. */
  .herofx-v4 .support-channels{ margin: 0 !important; }
  .herofx-v4 .support-help-card{ margin-top: 24px; }

  /* Y la ultima seccion respiraba distinto por arriba que por abajo -88px
     contra 116-. Sobraban 36px de margen inferior en los botones, que son
     el ultimo elemento de la caja y no separan de nada. */
  .herofx-v4 .final-ctas{ margin-bottom: 0; }
}


/* 6. Las imagenes de las tarjetas, encajadas sin recorte.

   Al pasar el bono y Hero10X a imagenes casi cuadradas se vio un fallo que
   con las apaisadas no salia: el `max-height: 96%` que traia el CSS no las
   limitaba y, como el marco lleva `overflow: hidden`, la tarjeta blanca de
   dentro quedaba cortada por arriba, por abajo y por la derecha. Medido en
   un marco de 220px: la de Hero10X se salia 55px y la del bono 31.

   El tope va en pixeles y no en porcentaje porque aqui el porcentaje no se
   resuelve: la imagen es un item flex de un contenedor en fila, y en ese
   caso el navegador trata la altura de referencia como indefinida y se
   salta el `max-height`. Comprobado midiendo: con 96%, 100% o incluso
   `height:100%` la imagen seguia saliendose 67px; con el mismo valor en
   pixeles se queda clavada en el marco.

   Los dos valores son las alturas del marco definidas mas arriba -240px a
   partir de 980 y 220 por debajo de 540-. Si esas cambian, estas van
   detras. Como la imagen lleva `padding:12px` y `border-box`, igualar el
   tope al marco deja justo esos 12px de aire por dentro. */
@media (max-width: 979px){
  .herofx-v4 .accounts-panels .account-panel-image img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
  }
}
@media (max-width: 540px){
  .herofx-v4 .accounts-panels .account-panel-image img{ max-height: 220px; }
}