/* ============ TOKENS ============ */
:root {
  --orange: #FF6B1A;
  --orange-light: #FF8C42;
  --orange-dark: #E55100;
  --orange-glow: rgba(255,107,26,.22);
  --orange-soft: rgba(255,107,26,.08);

  --bg: #0A0A0B;
  --bg-2: #111113;
  --bg-3: #17171A;
  --bg-card: #131316;
  --border: #25252A;
  --border-strong: #34343A;

  --text: #FFFFFF;
  --text-2: #A1A1AA;
  --text-3: #71717A;
  --text-4: #52525B;

  --green: #00D26A;
  --green-2: #4ADE80;
  --green-glow: rgba(0,210,106,.22);
  --green-soft: rgba(0,210,106,.08);
  --red: #FF3B3B;
  --red-2: #F87171;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body {
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }

/* ============ AMBIENT BG ============ */
.app {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}
.app::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,107,26,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 40%, rgba(255,107,26,.06), transparent 60%),
    linear-gradient(180deg, #0A0A0B, #060607 60%, #0A0A0B);
  z-index: -2;
}
.app::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(1400px 800px at 50% 30%, #000, transparent 75%);
  z-index: -1;
  opacity: .5;
}

/* ============ LAYOUT ============ */
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}
section { position: relative; }

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 16px;
  left: 0; right: 0;
  z-index: 100;
  display: flex; justify-content: center;
  pointer-events: none;
}
.nav-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 10px 14px 10px 22px;
  background: rgba(15,15,17,.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: 0 10px 40px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 18px;
}
.brand-logo {
  height: 28px;
  width: auto;
  display: block;
  object-fit: contain;
}
.brand-name {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1;
}
.brand-dot {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  position: relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 6px 14px -4px var(--orange-glow);
}
.brand-dot::after {
  content: "";
  position: absolute; inset: 4px;
  border-radius: 3px;
  background: #0A0A0B;
  mask: linear-gradient(135deg, #000 30%, transparent 70%);
}
.nav-links {
  display: flex; gap: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
}
.nav-links a {
  color: var(--text-2);
  padding: 9px 14px;
  border-radius: var(--r-pill);
  transition: color .2s, background .2s;
  text-transform: uppercase;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--orange); }
.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lang {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .06em;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--text-2);
}
.nav-login {
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em;
  padding: 8px 12px;
  color: var(--text);
  text-transform: uppercase;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  transition: transform .2s var(--ease), box-shadow .25s, background .2s, color .2s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--orange);
  color: #1a0700;
  box-shadow: 0 10px 32px -10px var(--orange-glow), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover {
  background: var(--orange-light);
  transform: translateY(-1px);
  box-shadow: 0 16px 40px -8px var(--orange-glow), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-ghost {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: #4a4a52; }
.btn-sm { padding: 9px 14px; font-size: 11px; }
.btn-arrow { transition: transform .2s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ============ HERO ============ */
.hero {
  position: relative;
  padding: 160px 0 100px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 60px;
  align-items: center;
  min-height: 620px;
  position: relative;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 8px;
  border-radius: var(--r-pill);
  background: rgba(255,107,26,.08);
  border: 1px solid rgba(255,107,26,.25);
  color: var(--orange-light);
  font-size: 12px; font-weight: 600;
  letter-spacing: .06em;
  margin-bottom: 28px;
}
.hero-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255,107,26,.15);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(255,107,26,.15); }
  50% { box-shadow: 0 0 0 8px rgba(255,107,26,.0); }
}
.hero h1 {
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: .98;
  letter-spacing: -0.035em;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 28px;
  text-wrap: balance;
}
.hero h1 .accent {
  background: linear-gradient(180deg, var(--orange-light) 0%, var(--orange) 60%, var(--orange-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 12px 60px rgba(255,107,26,.35);
  display: inline-block;
}
.hero p.lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 520px;
  margin: 0 0 38px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  max-width: 560px;
}
.hero-stat .num {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-feature-settings: 'tnum';
}
.hero-stat .lbl {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 4px;
}
.hero-stat .num.green { color: var(--green); }
.hero-stat .num .pre { color: var(--green); margin-right: 1px; }
.hero-stat .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.hero-stat:nth-child(1) .dot { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.hero-stat:nth-child(2) .dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.hero-stat:nth-child(3) .dot { background: #C77DFF; box-shadow: 0 0 8px #C77DFF; }

.hero-strap {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* Phone mockup */
.phone-wrap {
  position: relative;
  height: 660px;
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px;
}
.phone-wrap::before {
  content: "";
  position: absolute;
  width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(255,107,26,.10), transparent 60%);
  filter: blur(50px);
  z-index: -1;
}
.phone {
  position: relative;
  width: 300px; height: 600px;
  border-radius: 44px;
  background: linear-gradient(160deg, #2a2a2e, #0d0d0f 60%);
  padding: 8px;
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.8),
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 0 1.5px rgba(255,255,255,.06);
  transform-style: preserve-3d;
}
.phone-wrap-dual {
  position: relative;
  height: 660px;
  perspective: 1600px;
}
.phone-wrap-dual .phone {
  position: absolute;
  top: 50%; left: 50%;
}
.phone-front {
  z-index: 2;
  transform: translate(-26%, -50%) rotate(-9deg) rotateY(-10deg) rotateX(3deg);
  animation: phoneFront 9s ease-in-out infinite;
}
.phone-back {
  z-index: 1;
  transform: translate(-74%, -50%) rotate(8deg) rotateY(8deg) rotateX(-2deg);
  animation: phoneBack 9s ease-in-out infinite;
  opacity: .96;
}
.phone-back .phone-screen { display: flex; flex-direction: column; }
@keyframes phoneFront {
  0%   { transform: translate(-26%, -50%) rotate(-9deg) rotateY(-10deg) rotateX(3deg); }
  50%  { transform: translate(-14%, -54%) rotate(-7deg) rotateY(-8deg) rotateX(3deg); }
  100% { transform: translate(-26%, -50%) rotate(-9deg) rotateY(-10deg) rotateX(3deg); }
}
@keyframes phoneBack {
  0%   { transform: translate(-74%, -50%) rotate(8deg) rotateY(8deg) rotateX(-2deg); }
  50%  { transform: translate(-86%, -46%) rotate(6deg) rotateY(6deg) rotateX(-2deg); }
  100% { transform: translate(-74%, -50%) rotate(8deg) rotateY(8deg) rotateX(-2deg); }
}
@media (max-width: 980px) {
  .phone-back { display: none; }
  .phone-front { transform: translate(-50%, -50%) rotate(-4deg); animation: none; }
}

/* ============ HERO 3D CANVAS (WebGL via Three.js) ============ */
.hero-3d-canvas {
  position: relative;
  width: 138%;
  height: 800px;
  margin-right: -38%;
  pointer-events: none;
}
.hero-3d-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  outline: none;
}

/* ============ HERO 3D STAGE (phone + laptop orbiting) — CSS fallback, unused when WebGL is active ============ */
.hero-stage {
  position: relative;
  width: 100%;
  height: 660px;
  perspective: 1800px;
  perspective-origin: 50% 45%;
}
.hero-stage-glow {
  position: absolute;
  width: 560px; height: 560px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,107,26,.10), transparent 62%);
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}
.orbit {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: turntable 18s cubic-bezier(.45, .05, .55, .95) infinite;
  will-change: transform;
}
/* 360° turntable.
   At 25% : rotateY 90°  → phone reaches the front (closest Z). Slow keyframes around it.
   At 75% : rotateY 270° → laptop reaches the front. Slow keyframes around it. */
@keyframes turntable {
  0%   { transform: rotateY(0deg); }
  18%  { transform: rotateY(72deg); }
  25%  { transform: rotateY(90deg); }
  32%  { transform: rotateY(108deg); }
  50%  { transform: rotateY(180deg); }
  68%  { transform: rotateY(252deg); }
  75%  { transform: rotateY(270deg); }
  82%  { transform: rotateY(288deg); }
  100% { transform: rotateY(360deg); }
}

/* Each device sits in a slot translated to its side of the pivot.
   When the orbit rotates Y, the slot's world position traces a circle around center. */
.device-slot {
  position: absolute;
  top: 50%; left: 50%;
  transform-style: preserve-3d;
}
/* Slots start opposite each other on the X axis.
   With CSS rotateY(+90°), a point at -X rotates to +Z (toward camera).
   So phone at -X reaches the front at 25% of the orbit, laptop at +X reaches it at 75%. */
.phone-slot  { transform: translate(-50%, -50%) translate3d(-210px, 0, 0); }
.laptop-slot { transform: translate(-50%, -50%) translate3d( 210px, 0, 0); }

/* Counter-rotation cancels the parent rotation so the device's face always points at the camera.
   Same timing function and keyframes as .orbit, but mirrored Y. Devices never disappear. */
.counter-rot {
  transform-style: preserve-3d;
  animation: counterRot 18s cubic-bezier(.45, .05, .55, .95) infinite;
  will-change: transform;
}
@keyframes counterRot {
  0%   { transform: rotateY(0deg); }
  18%  { transform: rotateY(-72deg); }
  25%  { transform: rotateY(-90deg); }
  32%  { transform: rotateY(-108deg); }
  50%  { transform: rotateY(-180deg); }
  68%  { transform: rotateY(-252deg); }
  75%  { transform: rotateY(-270deg); }
  82%  { transform: rotateY(-288deg); }
  100% { transform: rotateY(-360deg); }
}

/* Reset previous absolute positioning on the device cards — slots now own placement. */
.orbit .laptop,
.orbit .phone {
  position: relative;
  top: auto; left: auto;
  transform: none;
  animation: none;
  backface-visibility: visible;
}
.orbit .laptop {
  width: 520px; height: 320px;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,.55));
  transform-style: preserve-3d;
}
.laptop-lid {
  position: relative;
  width: 100%; height: 100%;
  background: linear-gradient(160deg, #1A1B20 0%, #0C0D10 60%);
  border-radius: 16px 16px 8px 8px;
  border: 1px solid rgba(255,255,255,.07);
  padding: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 1px 0 rgba(255,255,255,.06);
  box-sizing: border-box;
}
.laptop-screen {
  width: 100%; height: 100%;
  background: #0A0A0B;
  border-radius: 8px 8px 4px 4px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.laptop-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.laptop-traffic { display: flex; gap: 5px; }
.laptop-traffic span {
  width: 9px; height: 9px; border-radius: 50%;
  background: #3a3a3e;
}
.laptop-traffic span:nth-child(1) { background: #FF6B5C; }
.laptop-traffic span:nth-child(2) { background: #FDBC2C; }
.laptop-traffic span:nth-child(3) { background: #28C840; }
.laptop-url {
  flex: 1;
  font-size: 10px;
  color: #71717A;
  font-family: 'Geist Mono', monospace;
  letter-spacing: .02em;
  text-align: center;
}
.laptop-tag {
  font-size: 8px;
  color: #00D26A;
  font-weight: 700;
  letter-spacing: .18em;
  padding: 3px 7px;
  background: rgba(0,210,106,.12);
  border-radius: 4px;
  border: 1px solid rgba(0,210,106,.25);
}
.laptop-body {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 16px;
  padding: 18px 20px 16px;
  flex: 1;
  min-height: 0;
}
.laptop-left, .laptop-right { display: flex; flex-direction: column; min-height: 0; }
.lp-eyebrow {
  font-size: 9px;
  color: #71717A;
  letter-spacing: .16em;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.lp-big {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: #fff;
  line-height: 1;
}
.lp-big small { font-size: 22px; color: #71717A; font-weight: 700; margin-left: 2px; }
.lp-sub {
  font-size: 11px;
  color: #00D26A;
  font-weight: 600;
  margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
}
.lp-sub .dot {
  width: 6px; height: 6px;
  background: #00D26A;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0,210,106,.6);
}
.lp-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: auto;
}
.lp-mini {
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
}
.lp-mini .k {
  font-size: 8px;
  letter-spacing: .12em;
  color: #71717A;
  font-weight: 600;
}
.lp-mini .v {
  font-size: 14px;
  font-weight: 700;
  margin-top: 3px;
  font-feature-settings: 'tnum';
}
.lp-mini .v.green { color: #00D26A; }
.lp-mini .v.red { color: #ff5252; }
.lp-chart {
  flex: 1;
  width: 100%;
  min-height: 0;
  margin-top: 4px;
}

/* Laptop hinge + base — gives the depth/3D laptop silhouette */
.laptop-hinge {
  position: absolute;
  bottom: -5px; left: -1%;
  width: 102%; height: 5px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.5));
  border-radius: 0 0 3px 3px;
}
.laptop-base {
  position: absolute;
  bottom: -14px; left: -4%;
  width: 108%; height: 12px;
  background: linear-gradient(180deg, #2A2B30 0%, #14151A 100%);
  border-radius: 0 0 14px 14px;
  transform: rotateX(74deg);
  transform-origin: top center;
  box-shadow: 0 18px 26px -8px rgba(0,0,0,.7);
}
.laptop-base-notch {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 22%; height: 3px;
  background: rgba(0,0,0,.4);
  border-radius: 0 0 6px 6px;
}

@media (max-width: 980px) {
  .laptop-slot { display: none; }
  .phone-slot { transform: translate(-50%, -50%); }
  .orbit, .counter-rot { animation: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit, .counter-rot { animation: none !important; }
}
.hero-particles {
  opacity: .55;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 38px;
  background: #0A0A0B;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
}
.notch {
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 28px;
  background: #000;
  border-radius: 16px;
  z-index: 3;
}
.phone-status {
  display: flex; justify-content: space-between;
  padding: 14px 22px 0;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.phone-header {
  padding: 26px 16px 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.phone-logo { font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.phone-controls { display: flex; gap: 4px; }
.phone-pill { padding: 5px 8px; background: rgba(255,255,255,.06); border-radius: 12px; font-size: 9px; color: var(--text-2); }
.phone-account {
  margin: 6px 16px;
  padding: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.phone-account .acc-id { font-weight: 600; font-size: 13px; }
.phone-account .acc-con {
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 99px;
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid rgba(0,210,106,.25);
  display: flex; align-items: center; gap: 4px;
}
.phone-account .acc-con::before {
  content: ""; width: 5px; height: 5px; background: var(--green); border-radius: 50%;
}
.phone-meta {
  padding: 0 16px;
  font-size: 9px;
  color: var(--text-3);
  letter-spacing: .08em;
  font-weight: 600;
  margin-top: 4px;
}
.phone-meta strong { color: var(--text); font-weight: 600; }
.phone-tabs {
  display: flex; gap: 16px;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 10px; color: var(--text-3);
  font-weight: 600;
}
.phone-tabs .active { color: var(--orange); position: relative; }
.phone-tabs .active::after {
  content: ""; position: absolute;
  bottom: -8px; left: 0; right: 0;
  height: 2px; background: var(--orange);
  border-radius: 2px;
}
.phone-cells {
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cell {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}
.cell .lbl { font-size: 8px; color: var(--text-3); letter-spacing: .12em; font-weight: 600; }
.cell .val { font-size: 16px; font-weight: 700; margin-top: 4px; letter-spacing: -.01em; }
.cell .val.green { color: var(--green); }
.phone-chart {
  margin: 6px 12px 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  height: 110px;
  position: relative;
}
.phone-chart-title {
  font-size: 9px; font-weight: 600; color: var(--text-2);
  margin-bottom: 4px;
}
.phone-chart svg { width: 100%; height: 70px; display: block; }

/* ============ MARQUEE ============ */
.marquee-section {
  padding: 30px 0 50px;
}
.marquee-label {
  text-align: center;
  font-size: 11px; font-weight: 600;
  letter-spacing: .26em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 28px;
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 4%, #000 32%, #000 68%, transparent 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 4%, #000 32%, #000 68%, transparent 96%, transparent 100%);
}
.marquee-track {
  display: flex;
  gap: 96px;
  animation: scroll 60s linear infinite;
  width: max-content;
  align-items: center;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.partner {
  display: flex; align-items: center;
  white-space: nowrap;
}
.partner-logo-img {
  height: 44px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  display: block;
  /* force any logo to a clean monochrome, dimmed grey on black like the ref */
  filter: brightness(0) invert(1);
  opacity: .42;
  transition: opacity .3s ease;
}
.partner:hover .partner-logo-img { opacity: .95; }

/* ============ SECTION HEADERS ============ */
.s-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}
.s-head .eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: .24em;
  color: var(--orange);
  /* override the global .eyebrow shimmer (it clips a faint bg into the text
     and makes the pill label invisible) — keep this a solid orange pill */
  -webkit-text-fill-color: var(--orange);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  animation: none;
  text-transform: uppercase;
  padding: 6px 12px;
  background: rgba(255,107,26,.08);
  border: 1px solid rgba(255,107,26,.2);
  border-radius: var(--r-pill);
  margin-bottom: 24px;
}
.s-head h2 {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 700;
  margin: 0 0 18px;
  text-wrap: balance;
}
.s-head p {
  font-size: 17px;
  color: var(--text-2);
  margin: 0;
  text-wrap: pretty;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.55;
}

.section-pad { padding: 110px 0; }

/* ============ STRATEGIES TABLE ============ */
.strategies-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.strategies-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255,107,26,.022) 40%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
/* === Strategies section — brand orange accent === */
.strategies-section { --lime: #FF6B1A; --lime-soft: rgba(255,107,26,.10); }
.strategies-section .s-head h2 {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1.05;
}
.strategies-section .s-head .eyebrow { display: none; }
.strategies-section .s-head p { color: rgba(255,255,255,.6); font-size: 16px; max-width: 720px; margin: 0 auto; }
.strategies-section .strat-table {
  background: transparent;
  border: none;
  border-radius: 0;
}
.strategies-section .strat-row {
  border-bottom: none;
  margin-bottom: 6px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.06);
}
.strategies-section .strat-row.head {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.4);
  font-size: 11px;
  letter-spacing: .22em;
}
.strategies-section .strat-row.body:hover {
  background: rgba(255,107,26,.05);
  border-color: rgba(255,107,26,.42);
  transform: translateY(-3px);
  box-shadow: 0 20px 46px -22px rgba(255,107,26,.40), 0 0 0 1px rgba(255,107,26,.10);
}
.strategies-section .strat-row.body:hover .strat-icon {
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 8px 22px -6px rgba(255,107,26,.5);
}
.strategies-section .strat-row.body::after {
  background: linear-gradient(90deg, rgba(255,107,26,0), rgba(255,107,26,.12), rgba(255,107,26,0));
}
/* Featured (live) strategy — elevated highlighted card like the reference */
.strategies-section .strat-row.featured {
  background: rgba(255,107,26,.06);
  border-color: rgba(255,107,26,.32);
  box-shadow: 0 0 0 1px rgba(255,107,26,.10), 0 22px 50px -32px rgba(255,107,26,.22);
}
.strategies-section .strat-row.featured:hover {
  border-color: rgba(255,107,26,.55);
  box-shadow: 0 0 0 1px rgba(255,107,26,.20), 0 26px 60px -26px rgba(255,107,26,.45);
}
.strategies-section .strat-num.green { color: var(--green); }
.strategies-section .strat-num { font-size: 16px; font-weight: 700; }
.strategies-section .strat-name { color: #fff; font-size: 16px; }
.strategies-section .badge.live {
  background: rgba(0,210,106,.10);
  border-color: rgba(0,210,106,.25);
  color: #38d68a;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 12px;
  padding: 6px 12px;
}
.strategies-section .badge.live::before { background: #38d68a; box-shadow: 0 0 6px #38d68a; width: 6px; height: 6px; }
.strategies-section .badge.soon {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.45);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 12px;
  padding: 6px 12px;
}
.strategies-section .badge.soon::before {
  content: "🔒";
  font-size: 10px;
  margin-right: 2px;
  filter: grayscale(1) brightness(.7);
}
.strategies-section .strat-cta { gap: 14px; }
.strategies-section .strat-cta .btn-primary {
  background: var(--lime);
  color: #0a0a0b;
  border-color: var(--lime);
  box-shadow: 0 8px 30px -8px rgba(255,107,26,.45);
}
.strategies-section .strat-cta .btn-primary:hover {
  background: #FF8C42;
  border-color: #FF8C42;
  transform: translateY(-1px);
}
.strategies-section .strat-table-fade {
  height: 230px;
  background: linear-gradient(180deg, transparent 0%, rgba(10,10,11,.55) 45%, rgba(10,10,11,.92) 78%, #0A0A0B 100%);
}
.strat-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.strat-bg-chart {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: .35;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 25%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 25%, transparent 88%);
}
.strat-bg-wash {
  position: absolute;
  left: 50%; top: 40%;
  width: 1100px; height: 500px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(255,107,26,.045) 0%, transparent 65%);
}
.particle-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  z-index: 0;
}
.bg-particles { pointer-events: none; }
.strat-table-wrap {
  position: relative;
  margin-top: 32px;
}
.strat-table-fade {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 140px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0,210,106,.05) 30%,
    rgba(10,10,11,.7) 65%,
    rgba(10,10,11,1) 100%);
  pointer-events: none;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.strat-row.strat-row-anim {
  opacity: 0;
  transform: translateY(30px) scale(.99);
  filter: blur(10px);
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform .85s cubic-bezier(.16,1,.3,1),
    filter .9s cubic-bezier(.16,1,.3,1),
    background .3s ease,
    border-color .3s ease,
    box-shadow .35s ease;
  transition-delay: calc(var(--idx) * 20ms);
}
.strat-row.strat-row-anim.in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition-delay: 0s;
}
.strat-row.body {
  position: relative;
}
.strat-row.body::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(255,107,26,0), rgba(255,107,26,.08), rgba(255,107,26,0));
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.strat-row.body:hover::after { opacity: 1; }
.strat-row.body:hover { transform: translateX(4px); }
.strat-row.body:hover .strat-icon { transform: scale(1.08) rotate(-3deg); box-shadow: 0 8px 24px -6px rgba(255,107,26,.4); }
.strat-icon { transition: transform .35s var(--ease), box-shadow .35s; }
.strat-table {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  max-width: 1100px;
  margin: 0 auto;
}
.strat-row {
  display: grid;
  grid-template-columns: 50px 1.7fr 1fr 1fr 1fr 1.25fr 1.1fr;
  align-items: center;
  padding: 18px 24px;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  transition: background .2s;
  position: relative;
}
.strat-row:last-child { border-bottom: none; }
.strat-row.head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--text-3);
  text-transform: uppercase;
  padding-top: 22px; padding-bottom: 22px;
  background: rgba(255,255,255,.015);
}
.strat-row.body { cursor: pointer; }
.strat-row.body:hover { background: rgba(255,107,26,.04); }
.strat-row.body:hover .strat-arrow { color: var(--orange); transform: translateX(3px); }
.strat-idx { color: var(--text-4); font-size: 13px; font-weight: 500; }
.strat-name { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 15.5px; }
.strat-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px;
  background: linear-gradient(135deg, #2a2a2e, #0a0a0b);
  border: 1px solid var(--border);
  font-weight: 800;
}
.strat-icon.gold { background: radial-gradient(circle at 30% 30%, #FFD580, #B8860B 60%, #5a3d00); color: #2a1500; }
.strat-icon.ruby { background: radial-gradient(circle at 30% 30%, #FF8888, #C81515 60%, #4a0a0a); color: #2a0000; }
.strat-icon.diamond { background: radial-gradient(circle at 30% 30%, #E8F0FF, #88AACC 60%, #2A3850); color: #0a1530; }
.strat-icon.ai { background: radial-gradient(circle at 30% 30%, #B8FFB8, #228822 60%, #062c06); color: #052206; }
.strat-num { font-weight: 600; font-size: 15px; font-feature-settings: 'tnum'; }
.strat-num.green { color: var(--green); }
.strat-num.red { color: var(--red); }
.strat-num.dim { color: var(--text-4); }
.spark { width: 100%; height: 36px; }
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-2);
}
.badge.live {
  background: var(--green-soft);
  border-color: rgba(0,210,106,.3);
  color: var(--green);
}
.badge.live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot { 50% { opacity: .5; } }
.badge.soon { color: var(--text-3); }
.strat-arrow { color: var(--text-4); font-size: 18px; transition: transform .2s, color .2s; }

.strat-cta {
  text-align: center;
  margin-top: 40px;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

/* ============ SIMULATOR ============ */
.sim-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}
.sim-card {
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 36px 36px 40px;
}
.sim-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.sim-select {
  width: 100%;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23A1A1AA' stroke-width='1.8'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 14px;
  cursor: pointer;
}
.sim-select:focus { outline: none; border-color: var(--orange); }
.sim-tags { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.sim-tag {
  padding: 6px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex; gap: 8px; align-items: center;
}
.sim-tag .k { color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; font-size: 10px; }
.sim-tag .v { color: var(--orange); font-weight: 700; }
.sim-tag .v.green { color: var(--green); }

.sim-input {
  width: 100%;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  font-feature-settings: 'tnum';
  transition: border-color .2s;
}
.sim-input:focus { outline: none; border-color: var(--orange); }

.sim-field { margin-top: 26px; }
.sim-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: .04em;
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.sim-field-label .val { color: var(--text); font-weight: 700; font-size: 14px; font-feature-settings: 'tnum'; }
.sim-field-label .pill {
  display: inline-block;
  padding: 3px 10px;
  background: var(--green-soft);
  border: 1px solid rgba(0,210,106,.25);
  border-radius: var(--r-pill);
  color: var(--green);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-left: 10px;
}

/* slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid #0a2a18;
  box-shadow: 0 0 0 3px rgba(0,210,106,.2), 0 4px 12px var(--green-glow);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid #0a2a18;
  box-shadow: 0 0 0 3px rgba(0,210,106,.2);
  cursor: pointer;
}
.sim-range-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-3);
  margin-top: 12px;
  font-weight: 500;
}

/* Result panel */
.sim-result-card {
  position: relative;
  background:
    radial-gradient(circle at 80% 0%, rgba(0,210,106,.05), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
}
.sim-result-card::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(0,210,106,.15), transparent 40%, rgba(255,107,26,.10));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.sim-roi-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.sim-roi-big {
  font-size: clamp(46px, 5.4vw, 64px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 800;
  color: var(--green);
  text-shadow: 0 0 60px var(--green-glow);
  font-feature-settings: 'tnum';
  margin: 0;
}
.sim-roi-big small { font-size: .42em; color: var(--text-2); font-weight: 600; letter-spacing: 0; }
.sim-roi-sub {
  font-size: 22px;
  font-weight: 700;
  color: var(--green);
  margin-top: 8px;
  font-feature-settings: 'tnum';
}
.sim-roi-sub small { color: var(--text-3); font-weight: 500; }

.sim-divider {
  height: 1px; background: var(--border); margin: 28px 0;
}

.sim-fee {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
}
.sim-fee-l {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
}
.sim-fee-l strong { color: var(--text); font-weight: 700; display: block; margin-bottom: 2px; font-size: 14px; }
.sim-fee-pill {
  padding: 8px 14px;
  background: var(--orange);
  color: #1a0700;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}
.sim-guarantee {
  background: var(--green-soft);
  border: 1px solid rgba(0,210,106,.25);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: 14px;
}
.sim-guarantee .icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(0,210,106,.15);
  display: grid; place-items: center;
  color: var(--green);
}
.sim-guarantee h4 { margin: 0 0 4px; color: var(--green); font-size: 14px; font-weight: 700; }
.sim-guarantee p { margin: 0; color: var(--text-2); font-size: 12.5px; line-height: 1.45; }

.sim-result-cta {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  margin-top: 28px;
}
.sim-result-cta a {
  font-size: 12.5px;
  color: var(--text-2);
  font-weight: 600;
  letter-spacing: .04em;
}
.sim-result-cta a:hover { color: var(--text); }

.sim-foot {
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 40px;
  max-width: 760px;
  margin-left: auto; margin-right: auto;
  line-height: 1.6;
}
.sim-foot strong { color: var(--text-2); }

/* ============ AFFILIATE / APPORTEURS ============ */
.aff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 60px;
}
.aff-tier {
  position: relative;
  padding: 28px 24px 32px;
  background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.004));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: transform .3s var(--ease), border-color .25s;
}
.aff-tier:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.aff-tier.elite {
  background:
    radial-gradient(circle at 80% 0%, rgba(255,107,26,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,107,26,.04), rgba(255,107,26,.01));
  border-color: rgba(255,107,26,.35);
  box-shadow: 0 24px 48px -20px var(--orange-glow);
}
.aff-tier .tier-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.aff-tier.elite .tier-name { color: var(--orange); }
.aff-tier .tier-volume {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 26px;
  font-weight: 500;
}
.aff-tier .tier-stat {
  font-size: 42px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--green);
  font-feature-settings: 'tnum';
  margin-bottom: 4px;
}
.aff-tier .tier-stat small { font-size: .42em; color: var(--text-2); font-weight: 600; }
.aff-tier .tier-stat-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.aff-tier .tier-row { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; }
.aff-tier .tier-row .k { color: var(--text-3); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.aff-tier .tier-row .v { color: var(--green); font-weight: 700; font-size: 17px; font-feature-settings: 'tnum'; }
.aff-tier.elite .tier-stat,
.aff-tier.elite .tier-row .v { color: var(--orange-light); }
.aff-tier .pin {
  position: absolute;
  top: -10px; right: 16px;
  padding: 4px 10px;
  background: var(--orange);
  color: #1a0700;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 6px 20px -4px var(--orange-glow);
}

/* Mini simulator */
.aff-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}
.aff-mini-progress {
  margin-top: 18px;
}
.aff-mini-progress .bar {
  height: 6px;
  background: rgba(255,255,255,.05);
  border-radius: 99px;
  overflow: hidden;
}
.aff-mini-progress .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  box-shadow: 0 0 12px var(--orange-glow);
  transition: width .4s var(--ease);
  border-radius: 99px;
}
.aff-mini-progress .meta {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 10px;
  display: flex; justify-content: space-between;
}
.aff-mini-progress .meta strong { color: var(--orange); font-weight: 700; }

/* Broker toggle */
.broker-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 8px;
}
.broker-toggle button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-2);
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 11px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: all .18s;
}
.broker-toggle button:hover { color: var(--text-1); }
.broker-toggle button.active {
  background: var(--orange);
  color: #1a0700;
  box-shadow: 0 4px 14px rgba(255,107,26,.25);
}

/* Add strat button */
.add-strat-btn {
  appearance: none;
  background: rgba(255,107,26,.1);
  border: 1px solid rgba(255,107,26,.3);
  color: var(--orange-light);
  font: inherit;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .05em;
  padding: 6px 12px;
  border-radius: 99px;
  cursor: pointer;
  transition: all .15s;
}
.add-strat-btn:hover:not(:disabled) { background: rgba(255,107,26,.18); }
.add-strat-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Strategy rows */
.strat-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.strat-input-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.sim-select-sm {
  width: 100%;
  padding: 9px 12px;
  background: rgba(0,0,0,.4);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sim-select-sm:focus { outline: none; border-color: var(--orange); }
.vol-input {
  display: flex;
  align-items: center;
  background: rgba(0,0,0,.4);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding-right: 10px;
}
.vol-input input {
  flex: 1;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--text-1);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  font-feature-settings: 'tnum';
  padding: 9px 12px;
}
.vol-input input:focus { outline: none; }
.vol-input span { color: var(--text-3); font-size: 11px; font-weight: 600; }
.strat-lot-out {
  font-size: 11.5px;
  color: var(--green);
  font-weight: 600;
  font-feature-settings: 'tnum';
  white-space: nowrap;
}
.rm-btn {
  appearance: none;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--text-3);
  width: 26px; height: 26px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: all .15s;
}
.rm-btn:hover { color: #ff6b6b; border-color: rgba(255,107,107,.4); }

/* Volume total */
.vol-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 16px;
  margin-top: 14px;
  background: rgba(255,107,26,.06);
  border: 1px solid rgba(255,107,26,.18);
  border-radius: 12px;
}
.vol-total span { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.vol-total strong { font-size: 20px; color: var(--orange-light); font-weight: 800; font-feature-settings: 'tnum'; }

/* Tier progress card */
.tier-progress-card {
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.tpc-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.tpc-tier-name { font-weight: 800; font-size: 13px; letter-spacing: .08em; color: var(--orange-light); }
.tpc-tier-ps { font-size: 11.5px; color: var(--text-3); font-feature-settings: 'tnum'; }
.tier-progress-card .bar {
  height: 6px;
  background: rgba(255,255,255,.05);
  border-radius: 99px;
  overflow: hidden;
}
.tier-progress-card .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  border-radius: 99px;
  transition: width .3s;
}
.tpc-meta {
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-2);
}
.tpc-meta strong { color: var(--orange); font-weight: 700; }

/* Active tier card */
.aff-tier.active {
  border-color: var(--orange);
  background: linear-gradient(180deg, rgba(255,107,26,.08), rgba(255,107,26,.02));
  box-shadow: 0 0 0 1px var(--orange), 0 12px 40px -10px rgba(255,107,26,.3);
}

@media (max-width: 720px) {
  .strat-input-row { grid-template-columns: 1fr 1fr; }
  .strat-lot-out { grid-column: 1 / -1; }
}

/* ============ WHY GRID ============ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.why-card {
  padding: 32px 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.004));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color .25s, transform .25s var(--ease);
}
.why-card:hover {
  border-color: rgba(255,107,26,.3);
  transform: translateY(-4px);
}
.why-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,107,26,.08);
  border: 1px solid rgba(255,107,26,.2);
  color: var(--orange);
  display: grid; place-items: center;
  margin-bottom: 22px;
}
.why-card h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 8px;
}
.why-card p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0;
}

/* ============ FAQ ============ */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.015);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .2s;
}
.faq-item.open { border-color: rgba(255,107,26,.35); background: rgba(255,107,26,.02); }
.faq-q {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 26px;
  text-align: left;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--text);
  gap: 20px;
}
.faq-q-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  transition: transform .3s var(--ease), background .2s;
}
.faq-item.open .faq-q-icon { transform: rotate(45deg); background: var(--orange); color: #1a0700; border-color: var(--orange); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner {
  overflow: hidden;
}
.faq-a-text {
  padding: 0 26px 24px;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 680px;
}

/* ============ CTA FINAL ============ */
.cta-final {
  position: relative;
  padding: 90px 60px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 30% 0%, rgba(255,107,26,.18), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(255,107,26,.12), transparent 60%),
    linear-gradient(180deg, #131316, #0d0d10);
  border: 1px solid var(--border-strong);
  overflow: hidden;
  text-align: center;
}
.cta-final::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,107,26,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,107,26,.05) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 70%);
  pointer-events: none;
}
.cta-final h2 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 700;
  margin: 0 0 16px;
  text-wrap: balance;
  position: relative;
}
.cta-final p {
  font-size: 17px;
  color: var(--text-2);
  margin: 0 0 36px;
  position: relative;
}
.cta-final .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }

/* ============ FOOTER ============ */
.foot {
  padding: 80px 0 32px;
  border-top: 1px solid var(--border);
  margin-top: 80px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 60px;
}
.foot-brand .brand { margin-bottom: 16px; font-size: 22px; }
.foot-brand p { font-size: 13.5px; color: var(--text-2); max-width: 320px; line-height: 1.55; margin: 0 0 22px; }
.foot-brand .badges { display: flex; gap: 8px; }
.foot-brand .badge { font-size: 10.5px; padding: 5px 10px; }
.foot h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--text-3);
  text-transform: uppercase;
  margin: 0 0 18px;
}
.foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.foot li a {
  color: var(--text-2);
  font-size: 13.5px;
  transition: color .2s;
}
.foot li a:hover { color: var(--text); }
.foot-bot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-3);
}
.risk {
  margin-top: 26px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-4);
  max-width: 100%;
}

/* ============ ANIMATIONS ============ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .phone-wrap { height: 540px; }
  .sim-wrap, .aff-mini { grid-template-columns: 1fr; }
  .aff-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .strat-row { grid-template-columns: 40px 1.5fr 1fr 1fr 1.1fr; }
  .strat-row .hide-md { display: none; }
}
@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .nav { top: 10px; }
  .nav-inner { padding: 8px 8px 8px 16px; gap: 8px; }
  .brand span { display: none; }
  .lang { display: none; }
  .nav-login { display: none; }
  .hero { padding: 130px 0 60px; }
  .hero-stats { grid-template-columns: 1fr; gap: 14px; }
  .aff-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .strat-row { grid-template-columns: 30px 1.2fr 1fr 1fr; padding: 14px 14px; gap: 10px; }
  .strat-row .hide-sm { display: none; }
  .sim-card { padding: 24px 22px; }
  .cta-final { padding: 60px 24px; }
  .section-pad { padding: 70px 0; }
}


/* ============ STRATEGY DETAIL PAGE ============ */
.sd { padding-bottom: 60px; }
.sd-crumb {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text-3); margin-bottom: 24px;
}
.sd-crumb a { color: var(--text-2); text-decoration: none; transition: color .2s; }
.sd-crumb a:hover { color: var(--orange); }
.sd-crumb .sep { color: var(--text-4); }
.sd-crumb span:last-child { color: var(--text); font-weight: 600; }

.sd-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 32px; padding-bottom: 28px; margin-bottom: 14px;
  flex-wrap: wrap;
}
.sd-title-wrap { display: flex; gap: 18px; align-items: center; }
.sd-title { margin: 0; font-size: 38px; font-weight: 800; letter-spacing: -.02em; }
.sd-tags { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sd-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; background: var(--green-soft);
  border: 1px solid rgba(0,210,106,.22);
  border-radius: 999px; font-size: 11px;
  font-weight: 700; letter-spacing: .08em; color: var(--green);
}
.sd-tag .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.sd-cta-block { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.sd-sync { font-size: 12px; color: var(--text-3); }

.sd-tabs {
  display: flex; gap: 4px; padding-bottom: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.sd-tab {
  padding: 14px 18px; background: none; border: none; cursor: pointer;
  color: var(--text-3); font-weight: 600; font-size: 14px;
  font-family: inherit;
  position: relative; transition: color .2s;
}
.sd-tab:hover { color: var(--text-2); }
.sd-tab.active { color: var(--text); }
.sd-tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--orange); border-radius: 2px;
}

.sd-top {
  display: grid; grid-template-columns: 320px 1fr; gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .sd-top { grid-template-columns: 1fr; } }

.sd-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 22px;
}
.sd-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(255,255,255,.05);
  font-size: 14px;
}
.sd-row:last-child { border-bottom: none; }
.sd-k { color: var(--text-3); font-weight: 500; }
.sd-v { font-weight: 700; font-feature-settings: 'tnum'; }
.sd-v.green { color: var(--green); }
.sd-v.red { color: var(--red); }
.sd-v.strong { color: var(--green); }
.sd-sub-label {
  font-size: 10px; letter-spacing: .2em; font-weight: 700;
  text-transform: uppercase; color: var(--text-4);
  margin: 22px 0 6px;
}

.sd-chart-card { padding: 22px 14px 14px 22px; }
.sd-chart-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; flex-wrap: wrap; gap: 12px;
}
.sd-chart-tabs { display: flex; gap: 4px; }
.sd-chart-tab {
  padding: 7px 13px; background: transparent; border: 1px solid transparent;
  border-radius: 99px; color: var(--text-3); font-weight: 600; font-size: 12px;
  cursor: pointer; font-family: inherit; transition: all .2s;
}
.sd-chart-tab:hover { color: var(--text-2); }
.sd-chart-tab.active {
  background: var(--green-soft); border-color: rgba(0,210,106,.3);
  color: var(--green);
}
.sd-range { display: flex; gap: 2px; background: rgba(255,255,255,.03); padding: 3px; border-radius: 99px; border: 1px solid var(--border); }
.sd-range-btn {
  padding: 6px 12px; background: transparent; border: none;
  border-radius: 99px; color: var(--text-3); font-weight: 600; font-size: 11px;
  cursor: pointer; font-family: inherit;
}
.sd-range-btn.active { background: var(--orange); color: #1a0700; }
.sd-chart { width: 100%; height: auto; display: block; }

/* Stats grid */
.sd-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 18px 0 0;
}
@media (max-width: 1000px) { .sd-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .sd-stats { grid-template-columns: repeat(2, 1fr); } }
.sd-stat {
  position: relative;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex; gap: 12px; align-items: center;
  cursor: help;
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.sd-stat:hover {
  border-color: rgba(255,107,26,.45);
  background: rgba(255,107,26,.06);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255,107,26,.15), 0 16px 38px -22px rgba(255,107,26,.45);
}
.sd-stat:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* Profit factor — highlighted */
.sd-stat.featured {
  background: rgba(255,107,26,.07);
  border-color: rgba(255,107,26,.40);
  box-shadow: 0 0 0 1px rgba(255,107,26,.12), 0 14px 36px -22px rgba(255,107,26,.40);
}
.sd-stat.featured .sd-stat-icon {
  background: rgba(255,107,26,.16); border-color: rgba(255,107,26,.40);
}
.sd-stat.featured .sd-stat-icon svg { stroke: var(--orange); }
.sd-stat.featured .sd-stat-v { font-size: 22px; color: #fff; }
.sd-stat-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--green-soft); border: 1px solid rgba(0,210,106,.2);
  display: grid; place-items: center; flex-shrink: 0;
}
.sd-stat-k { font-size: 10px; color: var(--text-3); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.sd-stat-v { font-size: 18px; font-weight: 800; margin-top: 2px; font-feature-settings: 'tnum'; }
/* Hover/focus tooltip explaining the metric */
/* Encadré qui se pose PAR-DESSUS la carte (recouvre la valeur) et affiche
   l'explication de la métrique — apparition douce mais rapide. */
.sd-stat-tip {
  position: absolute;
  left: 0; right: 0; top: 0;
  min-height: 100%;
  display: flex; align-items: center;
  background: linear-gradient(180deg, #1b1b21, #141417);
  border: 1px solid rgba(255,107,26,.45);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.45;
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  box-shadow: 0 0 0 1px rgba(255,107,26,.15), 0 18px 40px -16px rgba(0,0,0,.7);
  opacity: 0;
  transform: scale(.96);
  transform-origin: center;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s cubic-bezier(.2,.7,.3,1);
  z-index: 30;
}
.sd-stat:hover .sd-stat-tip,
.sd-stat:focus .sd-stat-tip,
.sd-stat:focus-within .sd-stat-tip {
  opacity: 1; transform: scale(1);
}

/* Heatmap */
.sd-heatmap-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; margin-bottom: 18px;
  color: var(--text); 
}
.sd-heatmap-title svg { color: var(--green); }
.heatmap { display: flex; flex-direction: column; gap: 6px; }
.hm-row { display: grid; grid-template-columns: 60px repeat(12, 1fr) 80px; gap: 6px; }
.hm-row.hm-head .hm-cell { background: transparent; color: var(--text-3); font-weight: 700; }
.hm-mon { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.hm-y { font-size: 13px; color: var(--text-3); font-weight: 600; display: flex; align-items: center; }
.hm-cell {
  text-align: center; padding: 8px 4px;
  border-radius: 8px;
  font-size: 11.5px; font-weight: 600;
  font-feature-settings: 'tnum';
  color: var(--green);
  min-height: 30px;
  display: flex; align-items: center; justify-content: center;
}
.hm-year { background: var(--green-soft); color: var(--green); font-weight: 800; }

/* Trades table */
.sd-hist-head {
  display: flex; gap: 16px; align-items: center;
  padding: 18px 24px; border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.sd-hist-title { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 15px; flex: 1; }
.sd-search {
  width: 100%; padding: 9px 14px 9px 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--text); font-family: inherit; font-size: 13px;
}
.sd-search:focus { outline: none; border-color: var(--orange); }

.sd-trades-row {
  display: grid;
  grid-template-columns: 50px 170px 120px 100px 1fr 120px;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  font-size: 13px; align-items: center;
}
.sd-trades-row:last-child { border-bottom: none; }
.sd-trades-row:hover { background: rgba(255,255,255,.015); }
.sd-trades-head {
  font-size: 10px; letter-spacing: .14em; font-weight: 700; text-transform: uppercase;
  color: var(--text-3); padding-top: 16px; padding-bottom: 16px;
  background: rgba(255,255,255,.015);
}
.sd-idx { color: var(--text-4); font-feature-settings: 'tnum'; }
.sd-date, .sd-sym, .sd-vol, .sd-price { color: var(--text-2); font-feature-settings: 'tnum'; }
.sd-price { color: var(--text); }
.sd-profit { text-align: right; color: var(--green); font-weight: 700; font-feature-settings: 'tnum'; }

.sd-typetag {
  display: inline-block; padding: 3px 10px;
  border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
}
.sd-typetag.sell { background: rgba(255,59,59,.12); color: var(--red); border: 1px solid rgba(255,59,59,.25); }
.sd-typetag.buy { background: var(--green-soft); color: var(--green); border: 1px solid rgba(0,210,106,.25); }

.sd-feed { display: flex; flex-direction: column; gap: 0; }
.sd-feed-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(255,255,255,.05);
}
.sd-feed-row:last-child { border-bottom: none; }
.sd-feed-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.sd-feed-dot.sell { background: var(--red); box-shadow: 0 0 8px var(--red); }
.sd-feed-dot.buy { background: var(--green); box-shadow: 0 0 8px var(--green); }

@media (max-width: 700px) {
  .sd-trades-row { grid-template-columns: 32px 110px 80px 1fr 90px; font-size: 12px; padding: 12px 14px; gap: 8px; }
  .sd-trades-row > div:nth-child(5) { display: none; }
  .hm-row { grid-template-columns: 40px repeat(12, 1fr) 60px; gap: 3px; }
  .hm-cell { font-size: 9px; padding: 6px 2px; }
  .sd-title { font-size: 28px; }
}


/* ============ PREMIUM MOTION SYSTEM ============ */

/* Smooth-scroll behaviour fallback (Lenis handles wheel) */
html { scroll-behavior: auto; }

/* Reveal: refined easing + slight blur for premium feel */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  filter: blur(8px);
  transition:
    opacity 1.05s cubic-bezier(.22,1,.36,1) var(--d, 0ms),
    transform 1.05s cubic-bezier(.22,1,.36,1) var(--d, 0ms),
    filter .9s cubic-bezier(.22,1,.36,1) var(--d, 0ms);
  will-change: opacity, transform, filter;
}
.reveal.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* Mask Reveal — clip mask + Y translate, premium text reveal */
.mask-reveal {
  display: block;
  overflow: hidden;
  line-height: 1.05;
}
.mask-reveal-inner {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  transition:
    transform 1.1s cubic-bezier(.22,1,.36,1) var(--d, 0ms),
    opacity .9s cubic-bezier(.22,1,.36,1) var(--d, 0ms);
  will-change: transform, opacity;
}
.mask-reveal.in .mask-reveal-inner {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* Ambient background — global mesh + grain that follows cursor subtly */
.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  --mx: 50%;
  --my: 40%;
}
.ambient-mesh {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(18vmax 18vmax at var(--mx) var(--my), rgba(255,107,26,.035), transparent 65%),
    radial-gradient(40vmax 40vmax at 20% 80%, rgba(0,210,106,.02), transparent 70%);
  filter: blur(20px);
}
.ambient-grain {
  position: absolute;
  inset: 0;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  animation: grainShift 8s steps(8) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -2%); }
  60%  { transform: translate(-2%, 3%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* Magnetic button wrapper */
.magnetic {
  display: inline-block;
  will-change: transform;
}
.magnetic-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.magnetic:hover .magnetic-inner { transform: scale(1.02); }

/* Buttons: refined hover with shine sweep */
.btn {
  position: relative;
  overflow: hidden;
  transition:
    background .4s cubic-bezier(.22,1,.36,1),
    color .4s cubic-bezier(.22,1,.36,1),
    border-color .4s cubic-bezier(.22,1,.36,1),
    box-shadow .55s cubic-bezier(.22,1,.36,1),
    transform .35s cubic-bezier(.22,1,.36,1);
}
.btn::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  transform: skewX(-18deg);
  transition: left .9s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.btn:hover::before { left: 140%; }
.btn:hover { transform: translate3d(0,-1px,0); }
.btn-primary:hover { box-shadow: 0 14px 40px -12px rgba(255,107,26,.55); }
.btn .btn-arrow { display: inline-block; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* Card hover refinement — lift + soft outline glow + content shift */
.strat-row, .why-card, .aff-tier, .sim-card, .faq-item {
  transition:
    transform .55s cubic-bezier(.22,1,.36,1),
    border-color .55s cubic-bezier(.22,1,.36,1),
    box-shadow .55s cubic-bezier(.22,1,.36,1),
    background .55s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.why-card:hover {
  transform: translate3d(0,-4px,0);
  border-color: rgba(255,107,26,.25);
  box-shadow: 0 18px 50px -20px rgba(255,107,26,.18);
}
.aff-tier:hover:not(.active) {
  transform: translate3d(0,-4px,0);
  border-color: rgba(255,107,26,.2);
}
.why-icon, .tier-name { transition: transform .55s cubic-bezier(.22,1,.36,1), color .4s ease; }
.why-card:hover .why-icon { transform: scale(1.08) rotate(-3deg); }

/* Nav links underline grow */
.nav-links a {
  position: relative;
  transition: color .35s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px;
  bottom: 4px;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

/* Eyebrow shimmer */
.eyebrow {
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange-light) 30%, var(--orange) 60%, var(--orange-light) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: eyebrowShift 6s linear infinite;
}
@keyframes eyebrowShift {
  to { background-position: 200% 0%; }
}

/* Hero phone — subtle float (already exists) + parallax handles Y */
/* Section padding default — ensure z-index above ambient */
.section-pad, .nav, footer, .hero, main, .app { position: relative; z-index: 1; }

/* Body bg slightly lighter so the ambient is visible */
body { background: var(--bg); }

/* Sparkline draw-in */
.spark path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawSpark 1.4s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes drawSpark {
  to { stroke-dashoffset: 0; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .mask-reveal-inner, .ambient-grain, .eyebrow {
    transition: none !important;
    animation: none !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  .mask-reveal-inner { transform: none; opacity: 1; }
}

/* ============ NEW PAGES — SHARED ============ */
.page { min-height: 60vh; }

/* Reusable section block on detail pages */
.bd-section {
  margin: 80px 0;
  position: relative;
}
.bd-section > h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  letter-spacing: -.025em;
  font-weight: 800;
  margin: 0 0 28px;
  text-wrap: balance;
}
.bd-summary {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 760px;
  margin: 0 0 24px;
}

/* ============ BROKERS OVERVIEW ============ */
.brokers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin: 40px 0 80px;
}
.broker-card {
  --accent: var(--orange);
  display: block;
  padding: 36px 32px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  transition: transform .55s var(--ease), border-color .3s, background .3s, box-shadow .55s var(--ease);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.broker-card::before {
  content: "";
  position: absolute;
  inset: -40% -40% auto auto;
  width: 70%;
  height: 60%;
  background: radial-gradient(closest-side, var(--accent), transparent 70%);
  opacity: 0;
  transition: opacity .55s var(--ease);
  z-index: -1;
  filter: blur(40px);
}
.broker-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 24px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
}
.broker-card:hover::before { opacity: .32; }
.broker-card-head {
  display: flex; align-items: center; gap: 20px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.broker-card-logo {
  width: 76px; height: 76px;
  object-fit: contain;
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 14px;
  border: 1px solid var(--border);
}
.broker-card-titles h3 {
  font-size: 28px;
  margin: 0 0 4px;
  letter-spacing: -.02em;
  font-weight: 800;
}
.broker-card-titles p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
}
.broker-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  margin-bottom: 24px;
}
.bcs { display: flex; flex-direction: column; gap: 2px; }
.bcs .k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.bcs .v {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  font-feature-settings: 'tnum';
}
.broker-card-cta {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .04em;
}
.broker-card-cta .arrow {
  transition: transform .35s var(--ease);
  display: inline-block;
}
.broker-card:hover .arrow { transform: translateX(6px); }

/* Comparison table */
.brokers-compare {
  margin: 60px 0 0;
  padding: 36px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.bc-head { margin-bottom: 24px; }
.bc-head h3 {
  font-size: 22px; font-weight: 800; margin: 0 0 6px;
  letter-spacing: -.02em;
}
.bc-head p { margin: 0; color: var(--text-2); font-size: 14px; }
.bc-table {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.bc-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}
.bc-row.head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.bc-row.head > div:nth-child(2) { color: var(--orange); }
.bc-row.head > div:nth-child(3) { color: var(--green); }
.bc-row.body { font-size: 14.5px; }
.bc-row.body .bc-label {
  font-weight: 600;
  color: var(--text-2);
}
.bc-row.body > div:not(.bc-label) {
  font-weight: 600;
  color: #fff;
  font-feature-settings: 'tnum';
}

/* ============ BROKER DETAIL ============ */
.broker-detail { --accent: var(--orange); }
.bd-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin: 32px 0 24px;
  flex-wrap: wrap;
}
.bd-hero-left {
  display: flex; align-items: center; gap: 22px;
}
.bd-hero-logo {
  width: 88px; height: 88px;
  object-fit: contain;
  background: rgba(255,255,255,.04);
  border-radius: 20px;
  padding: 14px;
  border: 1px solid var(--border);
}
.bd-title {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin: 0 0 8px;
}
.bd-tagline {
  margin: 0;
  color: var(--text-2);
  font-size: 16px;
  max-width: 480px;
}
.bd-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.bd-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 30px 0;
}
.bd-stat {
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.bd-stat-k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.bd-stat-v {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  margin-top: 8px;
  font-feature-settings: 'tnum';
}
.bd-stat-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-3);
}

/* Why grid */
.bd-why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.bd-why-card {
  padding: 28px 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color .3s, transform .35s var(--ease);
}
.bd-why-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.bd-why-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--accent);
  margin-bottom: 8px;
}
.bd-why-card h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.015em;
}
.bd-why-card p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}

/* Regulation list */
.bd-reg-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bd-reg-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 22px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.bd-reg-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--green-soft);
  color: var(--green);
  flex-shrink: 0;
}
.bd-reg-row > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bd-reg-row strong {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.bd-reg-row span {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.5;
}

/* Accounts table */
.bd-acc-table {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.bd-acc-head, .bd-acc-row {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1fr .9fr 1.6fr;
  padding: 14px 22px;
  align-items: center;
}
.bd-acc-head {
  background: rgba(255,255,255,.025);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.bd-acc-row {
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-2);
}
.bd-acc-row:last-child { border-bottom: none; }
.bd-acc-row:hover { background: rgba(255,255,255,.02); }
.bd-acc-name {
  font-weight: 700; color: #fff;
}
.bd-acc-best { color: var(--text-3); font-size: 13px; }

/* Funding grid */
.bd-fund-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.bd-fund-card {
  padding: 18px 20px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 4px;
}
.bd-fund-method {
  font-size: 15px; font-weight: 700; color: #fff;
}
.bd-fund-time {
  font-size: 13px; color: var(--text-2);
}
.bd-fund-fee {
  font-size: 12px; color: var(--green); font-weight: 600;
}

/* ============ FEATURES PAGE ============ */
.features-detail {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 30px;
}
.fd-card {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  padding: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
  transition: border-color .35s, transform .55s var(--ease);
}
.fd-card:hover {
  border-color: rgba(255,107,26,.4);
  transform: translateY(-3px);
}
.fd-num {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .15em;
  color: var(--orange);
  padding: 6px 10px;
  background: var(--orange-soft);
  border-radius: 8px;
  margin-bottom: 16px;
}
.fd-card-left h3 {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.fd-short {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}
.fd-long {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0 0 18px;
}
.fd-proofs {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 22px;
}
.fd-proofs li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px;
  color: var(--text-2);
}
.fd-proofs li svg {
  color: var(--green);
  flex-shrink: 0;
}

/* ============ PRICING PAGE ============ */
.pricing-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 30px 0 60px;
}
.pricing-card {
  padding: 40px 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
}
.pricing-card-1 {
  background: linear-gradient(180deg, rgba(0,210,106,.07), rgba(0,210,106,.01));
  border-color: rgba(0,210,106,.25);
}
.pricing-card-2 {
  background: linear-gradient(180deg, rgba(255,107,26,.07), rgba(255,107,26,.01));
  border-color: rgba(255,107,26,.25);
}
.pc-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--text-3);
}
.pc-big {
  font-size: clamp(60px, 8vw, 100px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  margin: 16px 0 8px;
  font-feature-settings: 'tnum';
}
.pricing-card-1 .pc-big { color: var(--green); }
.pricing-card-2 .pc-big {
  background: linear-gradient(180deg, var(--orange-light), var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pc-sub {
  font-size: 14px;
  color: var(--text-2);
}
.pc-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pc-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  color: var(--text-2);
}
.pc-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 700;
}

/* Pricing simulator */
.pricing-sim {
  padding: 36px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  margin: 60px 0;
}
.pricing-sim h3 {
  font-size: 22px;
  margin: 0 0 24px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.ps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.ps-input { display: flex; flex-direction: column; gap: 20px; }
.ps-field {
  display: flex; flex-direction: column; gap: 8px;
}
.ps-field-label {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ps-field-label .ps-val {
  color: #fff;
  font-feature-settings: 'tnum';
}
.ps-field input[type="range"] {
  width: 100%;
  accent-color: var(--orange);
}
.ps-result {
  padding: 24px;
  background: rgba(255,107,26,.05);
  border: 1px solid rgba(255,107,26,.18);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: 12px;
}
.ps-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: var(--text-2);
}
.ps-row strong {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  font-feature-settings: 'tnum';
}
.ps-row.big {
  font-size: 16px;
}
.ps-row.big strong {
  font-size: 28px;
  font-weight: 800;
}
.ps-row .green { color: var(--green); }
.ps-row .red { color: var(--red); }
.ps-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.ps-note {
  font-size: 12.5px;
  color: var(--text-2);
  background: rgba(255,255,255,.025);
  padding: 10px 12px;
  border-radius: 8px;
}

/* HWM example */
.hwm-example {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 8px;
}
.hwm-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr 1.2fr;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-2);
  align-items: center;
}
.hwm-row:last-child { border-bottom: none; }
.hwm-row > span:first-child {
  font-weight: 700; color: #fff;
}
.hwm-row .green { color: var(--green); font-weight: 700; }
.hwm-row .red { color: var(--red); font-weight: 700; }
.hwm-row strong {
  color: #fff;
  font-weight: 700;
  text-align: right;
}

/* ============ AFFILIATE PAGE ============ */
.aff-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.aff-step {
  padding: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color .3s, transform .35s var(--ease);
}
.aff-step:hover {
  border-color: var(--orange);
  transform: translateY(-3px);
}
.aff-step-num {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15em;
  color: var(--orange);
  margin-bottom: 12px;
}
.aff-step h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
}
.aff-step p {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}
.aff-tools {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
}
.aff-tool {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--text-2);
}
.aff-tool svg { color: var(--green); flex-shrink: 0; }

/* ============ ABOUT PAGE ============ */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.abs-stat {
  padding: 28px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: center;
}
.abs-v {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--orange);
  font-feature-settings: 'tnum';
}
.abs-k {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ============ FAQ PAGE ============ */
.faq-page {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.faq-cat-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* ============ WHY — BENTO LAYOUT ============ */
.why-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 18px;
  margin-top: 40px;
}
.wb-card {
  position: relative;
  padding: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.008));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: border-color .35s, transform .55s var(--ease), box-shadow .55s var(--ease);
}
.wb-card:hover {
  border-color: rgba(255,107,26,.4);
  transform: translateY(-3px);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.7);
}
.wb-card h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.015em;
}
.wb-card p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}
.wb-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--orange-soft);
  color: var(--orange);
  display: grid; place-items: center;
  border: 1px solid rgba(255,107,26,.2);
}
.wb-icon-lg {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,107,26,.25), rgba(255,107,26,.06));
  color: #fff;
  display: grid; place-items: center;
  border: 1px solid rgba(255,107,26,.35);
  box-shadow: 0 12px 40px -10px rgba(255,107,26,.4);
}
.wb-icon-lg svg { width: 28px; height: 28px; }

/* Hero (large) card — spans 2 cols & 2 rows */
.wb-hero {
  grid-column: span 2;
  grid-row: span 2;
  padding: 36px;
  background:
    radial-gradient(900px 400px at 100% 0%, rgba(255,107,26,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border-color: rgba(255,107,26,.25);
}
.wb-hero h3 {
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -.025em;
  margin-top: 8px;
}
.wb-hero p {
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 460px;
}
.wb-hero-content { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.wb-hero-pill {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  width: max-content;
  padding: 8px 14px;
  background: rgba(0,210,106,.08);
  border: 1px solid rgba(0,210,106,.3);
  border-radius: var(--r-pill);
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wb-hero-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}
.wb-hero-shape {
  position: absolute;
  inset: auto -10% -20% auto;
  width: 50%;
  aspect-ratio: 1;
  background:
    radial-gradient(closest-side, rgba(255,107,26,.18), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

/* Accent card — 0$ d'abonnement */
.wb-accent {
  grid-column: span 2;
  background:
    radial-gradient(700px 280px at 0% 100%, rgba(255,107,26,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,107,26,.06), rgba(255,107,26,.01));
  border-color: rgba(255,107,26,.25);
}
.wb-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--text-3);
}
.wb-mega {
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  background: linear-gradient(180deg, var(--orange-light), var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-feature-settings: 'tnum';
}
.wb-mega-sub {
  font-size: 13px;
  color: var(--text-2);
  margin-top: -2px;
}

/* Stats mini row */
.wb-stats-mini {
  display: flex;
  gap: 14px;
  margin-top: auto;
  padding-top: 14px;
  flex-wrap: wrap;
  border-top: 1px dashed var(--border);
}
.wb-stats-mini span {
  font-size: 12px;
  color: var(--text-3);
}
.wb-stats-mini strong {
  color: var(--green);
  font-weight: 700;
  font-feature-settings: 'tnum';
  margin-right: 2px;
}

/* Green card — aligned with gains */
.wb-green .wb-icon {
  background: var(--green-soft);
  color: var(--green);
  border-color: rgba(0,210,106,.25);
}
.wb-green .wb-mega {
  background: linear-gradient(180deg, var(--green-2), var(--green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wb-green {
  background:
    radial-gradient(600px 240px at 100% 100%, rgba(0,210,106,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,210,106,.04), rgba(0,210,106,.005));
  border-color: rgba(0,210,106,.22);
}

/* Brokers card */
.wb-brokers {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.wb-brokers-main { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 280px; }
.wb-free {
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin-top: 4px;
  background: linear-gradient(180deg, #fff, #b8b8bd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wb-broker-logos {
  display: flex;
  gap: 14px;
  margin-top: auto;
  padding-top: 14px;
  align-items: center;
  border-top: 1px dashed var(--border);
}
.wb-brokers .wb-broker-logos { margin-top: 0; align-self: center; }
.wb-broker-logos img {
  height: 24px;
  width: auto;
  object-fit: contain;
  opacity: .85;
  filter: grayscale(.15);
}

/* ============ CTA FINAL V2 ============ */
.cta-final-section { position: relative; }
.cta-final-v2 {
  position: relative;
  padding: 80px 60px;
  background:
    linear-gradient(180deg, rgba(255,107,26,.06), rgba(20,20,22,.6)),
    var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
}
.cta-final-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.cfg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(800px 400px at 50% 30%, #000, transparent 80%);
  opacity: .6;
}
.cfg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .6;
}
.cfg-glow-1 {
  width: 480px; height: 480px;
  background: radial-gradient(closest-side, rgba(255,107,26,.5), transparent 70%);
  top: -180px;
  left: -120px;
}
.cfg-glow-2 {
  width: 400px; height: 400px;
  background: radial-gradient(closest-side, rgba(0,210,106,.35), transparent 70%);
  bottom: -160px;
  right: -100px;
}
.cfg-rings {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.cfg-rings span {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,107,26,.25);
  animation: cfg-ring 8s linear infinite;
}
.cfg-rings span:nth-child(1) { width: 200px; height: 200px; animation-delay: -0s; }
.cfg-rings span:nth-child(2) { width: 380px; height: 380px; animation-delay: -2.5s; opacity: .6; }
.cfg-rings span:nth-child(3) { width: 580px; height: 580px; animation-delay: -5s; opacity: .35; }
@keyframes cfg-ring {
  0% { transform: scale(0.94); opacity: 0.0; }
  20% { opacity: 0.7; }
  100% { transform: scale(1.15); opacity: 0; }
}
.cta-final-inner {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.cta-final-v2 .cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(0,210,106,.08);
  border: 1px solid rgba(0,210,106,.3);
  border-radius: var(--r-pill);
  color: var(--green);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  margin-bottom: 28px;
}
.cta-final-v2 .cta-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: cta-pulse 1.8s ease-in-out infinite;
}
@keyframes cta-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--green); }
  50% { opacity: .45; box-shadow: 0 0 12px var(--green); }
}
.cta-final-v2 h2 {
  font-size: clamp(40px, 5.6vw, 80px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
  margin: 0 0 22px;
  text-wrap: balance;
}
.cta-final-v2 h2 .accent {
  background: linear-gradient(180deg, var(--orange-light) 0%, var(--orange) 60%, var(--orange-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 12px 60px rgba(255,107,26,.35);
}
.cta-final-v2 p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 32px;
  max-width: 560px;
}
.cta-final-v2 p strong {
  color: #fff;
  font-weight: 600;
}
.cta-final-v2 .ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px;
}
.cta-final-trust {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  width: 100%;
}
.cft {
  font-size: 13px;
  color: var(--text-2);
}
.cft strong {
  color: #fff;
  font-weight: 700;
  margin-right: 4px;
  font-feature-settings: 'tnum';
}
.cft-sep {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--border-strong);
}

/* ============ RESPONSIVE — NEW PAGES ============ */
@media (max-width: 960px) {
  .brokers-grid { grid-template-columns: 1fr; }
  .pricing-hero-grid { grid-template-columns: 1fr; }
  .ps-grid { grid-template-columns: 1fr; }
  .aff-steps { grid-template-columns: 1fr 1fr; }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .bd-stats { grid-template-columns: 1fr 1fr; }
  .bd-why-grid { grid-template-columns: 1fr; }
  .fd-card { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
  .fd-proofs { grid-template-columns: 1fr; }
  .bd-hero { align-items: flex-start; }
  .bd-acc-head, .bd-acc-row { grid-template-columns: 1.1fr 1fr 1fr .9fr; }
  .hide-md.bd-acc-best { display: none; }
  .why-bento { grid-template-columns: repeat(2, 1fr); }
  .wb-hero, .wb-accent, .wb-brokers { grid-column: span 2; }
  .wb-hero { grid-row: span 1; }
  .cta-final-v2 { padding: 56px 24px; }
}
@media (max-width: 640px) {
  .bd-stats { grid-template-columns: 1fr; }
  .aff-steps { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr; }
  .aff-tools { grid-template-columns: 1fr; }
  .bc-row, .bc-row.head { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .bc-row.head > div:first-child, .bc-row.body .bc-label { grid-column: 1 / -1; padding-top: 8px; }
  .hwm-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .hwm-row strong { grid-column: 1 / -1; text-align: left; }
  .why-bento { grid-template-columns: 1fr; }
  .wb-hero, .wb-accent, .wb-brokers { grid-column: span 1; }
}

/* ============ STRATEGIES PRESENTATION EMBEDDED IN THE HERO ============ */
/* Replaces the old 3D phone+laptop in the hero's right column. Keeps the
   premium .strategies-section scoped styling but compacts it for the hero. */
.hero-strats {
  position: relative;
  isolation: isolate;
  width: 100%;
}
.hero-strats .strat-presentation { width: 100%; }
.hero-strats .s-head {
  text-align: left;
  max-width: none;
  margin: 0 0 18px;
}
.hero-strats .s-head .eyebrow { display: none; }
.hero-strats .s-head h2 {
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.12;
  margin: 0;
}
.hero-strats .s-head p { display: none; }
.hero-strats .strat-table { max-width: 100%; margin: 0; }
.hero-strats .strat-table-wrap { margin-top: 14px; }
.hero-strats .strat-row {
  padding: 12px 16px; gap: 12px;
  /* less transparent than the section variant so it stays readable over the
     busy hero background */
  background: rgba(13, 13, 16, 0.86);
  border-color: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-strats .strat-row.featured {
  background: rgba(32, 21, 12, 0.92);
  border-color: rgba(255, 107, 26, 0.42);
}
.hero-strats .strat-name { font-size: 14px; }
.hero-strats .strat-num { font-size: 14px; }
.hero-strats .strat-cta {
  margin-top: 20px;
  justify-content: flex-start;
}
.hero-strats .strat-table-fade { height: 90px; }

/* ============ /strategies PAGE — premium card grid (brand colours) ============ */
.strat-page { overflow: visible; background: transparent; }
/* kill the faint orange gradient overlay so the page stays pure black */
.strat-page::before { content: none; display: none; }
.strat-page .strat-table { position: relative; z-index: 1; }
.strat-page .strat-row {
  grid-template-columns: 54px 1.7fr 1fr 1fr 1.05fr 1.2fr 1fr 1.15fr 34px;
  padding: 18px 22px;
}
.strat-page .strat-row.head { padding-top: 14px; padding-bottom: 14px; }
.strat-page .strat-chevron {
  text-align: center;
  font-size: 22px;
  color: var(--text-4);
  transition: transform .2s ease, color .2s ease;
}
.strat-page .strat-row.body:hover .strat-chevron { color: var(--orange); transform: translateX(4px); }
@media (max-width: 1024px) {
  .strat-page .strat-row { grid-template-columns: 44px 1.6fr 1fr 1fr 1.05fr; }
}
@media (max-width: 640px) {
  .strat-page .strat-row { grid-template-columns: 30px 1.4fr 1fr 1fr; }
}

/* Strategies page — orange fade across the first rows.
   --fade is set inline per row (idx 0 = 1 → idx 3+ = 0). The neutral hairline
   border from .strategies-section stays; hover orange is preserved (higher
   specificity). Row 1 ≈ the old "featured" look, fading to neutral by row 4. */
.strat-page .strat-row.body {
  background: rgba(255,107,26, calc(.07 * var(--fade, 0)));
  box-shadow:
    0 0 0 1px rgba(255,107,26, calc(.16 * var(--fade, 0))),
    0 18px 44px -26px rgba(255,107,26, calc(.34 * var(--fade, 0)));
}

/* Growth chart (strategy detail) — line draws left→right, decelerating at the
   end; the gradient fill eases in just after. */
.sd-chart-line {
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  /* slow for the first ~3/4, then accelerates hard at the very end (easeInQuart) */
  animation: drawGrowth 4s cubic-bezier(.7, 0, .84, 0) forwards;
}
@keyframes drawGrowth { to { stroke-dashoffset: 0; } }
.sd-chart-area {
  opacity: 0;
  animation: fadeChartArea 2.4s ease 2.2s forwards;
}
@keyframes fadeChartArea { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sd-chart-line { animation: none; stroke-dashoffset: 0; }
  .sd-chart-area { animation: none; opacity: 1; }
}

/* Strategy score badge — note FINBASE /10 (ranking) */
.strat-score {
  display: inline-flex;
  align-items: baseline;
  margin-left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,107,26,.12);
  border: 1px solid rgba(255,107,26,.30);
  color: var(--orange, #FF6B1A);
  font-size: 12px;
  font-weight: 800;
  font-feature-settings: 'tnum';
  line-height: 1;
  white-space: nowrap;
}
.strat-score small { font-size: .72em; font-weight: 600; opacity: .7; margin-left: 1px; }

/* Hero strategies — same orange fade as /strategies, layered over an opaque
   dark base so the rows stay readable on the busy hero background. */
.hero-strats .strat-row.body {
  background:
    linear-gradient(rgba(255,107,26, calc(.11 * var(--fade, 0))), rgba(255,107,26, calc(.11 * var(--fade, 0)))),
    rgba(13,13,16,.88);
  box-shadow:
    0 0 0 1px rgba(255,107,26, calc(.20 * var(--fade, 0))),
    0 18px 44px -26px rgba(255,107,26, calc(.34 * var(--fade, 0)));
}