/* Styles from webinar--main/index.html, unchanged except site-absolute url()s.
   Generated by tools/convert-page. */

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    :root {
      --bg-main: #ffffff;
      --teal-900: #0D2E4E;
      --teal-800: #1a4a7a;
      --emerald-500: #10b981;
      --emerald-600: #059669;
      --orange: #c8420a;
      --orange-bright: #e04d10;
      --text-main: #111;
      --text-dim: #64748b;
      --border-light: rgba(0, 0, 0, 0.08);
      --glass-bg: rgba(255, 255, 255, 0.7);
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: 'DM Sans', sans-serif;
      background: #0D2E4E;
      color: var(--text-main);
      overflow-x: hidden;
      line-height: 1.6;
      font-size: 16px;
    }

    /* ── NAVBAR ── */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 24px 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .navbar.scrolled {
      background: rgba(13, 46, 78, 0.98);
      backdrop-filter: blur(20px);
      padding: 14px 60px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
    }

    .nav-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
    }

    .nav-logo img {
      height: 40px;
      width: auto;
      transform: scale(5);
      transform-origin: left center;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 32px;
      list-style: none;
    }

    .nav-mobile-only {
      display: none;
    }

    @media (min-width: 769px) {
      .navbar > .nav-logo { flex: 1 1 0; }
      .navbar > .nav-links { flex: 0 0 auto; }
      .navbar > .nav-auth-group { flex: 1 1 0; display: flex; justify-content: flex-end; align-items: center; }
    }

    .nav-links a {
      color: rgba(255, 255, 255, 0.9);
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      transition: color 0.2s;
    }

    .nav-links a:hover {
      color: var(--orange) !important;
    }
    .nav-links a.active {
      color: var(--orange) !important;
      font-weight: 700;
    }

    .nav-toggle {
      display: none;
      background: none;
      border: none;
      color: #fff;
      font-size: 26px;
      line-height: 1;
      cursor: pointer;
      padding: 4px 6px;
    }
    .nav-close { display: none; }

    /* ── NAV DROPDOWN ── */
    .nav-item-dropdown { position: relative; }
    .nav-item-dropdown > a { display: flex; align-items: center; gap: 4px; cursor: pointer; }
    .nav-chevron { font-size: 9px; transition: transform 0.25s; line-height: 1; opacity: 0.7; }
    .nav-item-dropdown:hover .nav-chevron { transform: rotate(180deg); }
    .dropdown-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(-6px);
      background: rgba(7,24,44,0.97);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.1);
      border-top: 2px solid var(--orange);
      border-radius: 12px;
      min-width: 215px;
      padding: 6px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.22s ease;
      z-index: 200;
      box-shadow: 0 20px 50px rgba(0,0,0,0.45);
      pointer-events: none;
    }
    .dropdown-menu::before {
      content: ''; position: absolute;
      top: -20px; left: 0; right: 0; height: 20px;
    }
    .nav-item-dropdown:hover .dropdown-menu,
    .nav-item-dropdown.is-open .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
      pointer-events: all;
    }
    .dropdown-menu a {
      display: block;
      padding: 10px 14px;
      color: rgba(255,255,255,0.8) !important;
      font-size: 13.5px;
      font-weight: 500;
      border-radius: 8px;
      transition: background 0.18s, color 0.18s;
      white-space: nowrap;
      text-decoration: none;
    }
    .dropdown-menu a:hover {
      background: rgba(200,66,10,0.18) !important;
      color: #e86428 !important;
    }

    .nav-cta {
      background: var(--orange);
      color: #fff;
      padding: 10px 24px;
      font-size: 13px;
      font-weight: 700;
      border: none;
      border-radius: 8px;
      text-decoration: none;
      transition: all 0.3s;
    }

    .nav-cta:hover {
      background: var(--orange-bright);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(200, 66, 10, 0.3);
    }

    /* ══ HERO ══ */
    .hero {
      background: #061a12;
      position: relative;
      overflow: hidden;
      padding: 0;
      min-height: 1050px;
      display: flex;
      flex-direction: column;
    }

    /* WhatsApp chart image as full hero background */
    .hero-bg-texture {
      position: absolute;
      inset: 0;
      background: url("/WhatsApp Image 2026-03-10 at 5.35.08 PM (1).jpeg") center center / cover no-repeat;
      opacity: 0.55;
      z-index: 1;
      pointer-events: none;
    }

    /* Dark overlay so text stays readable */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(6,26,18,0.55) 0%, rgba(6,26,18,0.35) 50%, rgba(6,26,18,0.75) 100%);
      pointer-events: none;
      z-index: 2;
    }
    /* Ambient warm fog at the floor junction — connects hero and floor as one space */
    .hero::after {
      content: '';
      position: absolute;
      top: 280px;
      left: 20%;
      right: 0;
      height: 200px;
      background: radial-gradient(ellipse at 60% 100%, rgba(200,66,10,0.09) 0%, transparent 70%);
      pointer-events: none;
      z-index: 2;
    }

    /* Stars / particle dots */
    .hero-stars { display: none; }

    /* TOP orange accent line */
    .hero-line-accent {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--orange) 30%, #d4a040 50%, var(--orange) 70%, transparent);
      z-index: 10;
    }

    /* Wrapper — full width, flex column */
    .hero-inner {
      position: relative;
      z-index: 5;
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 0; /* NO padding here — hero-content has its own */
    }

    /* TEXT BLOCK — left-aligned, padded */
    .hero-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      padding: 150px 60px 60px 80px; /* top for navbar, left for alignment */
      max-width: 1100px;
      width: 100%;
    }

    .hero-content > * {
      opacity: 0;
      animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .hero-badge   { animation-delay: 0.05s; }
    .hero h1      { animation-delay: 0.2s; }
    .hero-sub     { animation-delay: 0.35s; }
    .hero-cta-row { animation-delay: 0.5s; }
    .hero-trust   { animation-delay: 0.65s; }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Live badge */
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 6px 16px 6px 10px;
      background: rgba(200,66,10,0.1);
      border: 1px solid rgba(200,66,10,0.3);
      border-radius: 50px;
      color: #ff9060;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 28px;
    }
    .hero-badge-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--orange);
      box-shadow: 0 0 0 3px rgba(200,66,10,0.28);
      animation: live-pulse 2s ease-in-out infinite;
    }
    @keyframes live-pulse {
      0%,100% { box-shadow: 0 0 0 3px rgba(200,66,10,0.28); }
      50%      { box-shadow: 0 0 0 7px rgba(200,66,10,0.08); }
    }

    /* Headline — 2 lines exactly */
    .hero h1 {
      font-size: clamp(28px, 3.2vw, 46px);
      font-weight: 800;
      color: #fff;
      line-height: 1.1;
      letter-spacing: -1.5px;
      margin-bottom: 22px;
      white-space: normal;
    }
    .hero h1 em {
      font-style: normal;
      background: linear-gradient(135deg, var(--orange) 0%, #d4a040 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline;
    }

    /* Sub */
    .hero-sub {
      font-size: 18px;
      color: rgba(255,255,255,0.55);
      margin-bottom: 38px;
      line-height: 1.65;
      max-width: 800px;
    }

    /* CTAs */
    .hero-cta-row {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      justify-content: flex-start;
      margin-bottom: 38px;
    }
    .btn-main {
      background: linear-gradient(135deg, var(--orange) 0%, var(--orange-bright) 100%);
      color: #fff;
      height: 58px;
      padding: 0 32px;
      font-size: 15px;
      font-weight: 700;
      border-radius: 14px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 16px 40px rgba(200,66,10,0.35);
      letter-spacing: 0.3px;
    }
    .btn-main:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 16px 38px rgba(200,66,10,0.45);
    }
    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: rgba(255,255,255,0.82);
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      height: 58px;
      padding: 0 26px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 14px;
      transition: all 0.3s;
      background: rgba(255,255,255,0.04);
      backdrop-filter: blur(14px);
    }
    .btn-ghost:hover {
      color: #fff;
      border-color: rgba(255,255,255,0.3);
      background: rgba(255,255,255,0.08);
    }

    .hero-trust {
      display: flex;
      align-items: center;
      gap: 28px;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    .hero-trust-item {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 600;
      color: rgba(255,255,255,0.42);
    }
    .hero-trust-item svg { color: var(--orange); flex-shrink: 0; }

    /* ─── PREMIUM DASHBOARD IMAGE — Xentro style ─── */
    .hero-dashboard-wrapper {
      position: absolute;
      top: 150px;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: visible;
      z-index: 3;   /* behind hero-inner z-index:5 — text stays on top */
      pointer-events: none;
    }

    .hero-dashboard-img {
      width: 100%;
      height: auto;
      display: block;
      animation: heroDashFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-delay: 0.4s;
    }

    @keyframes heroDashFade {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Bottom gradient cover — fades image into hero background */
    .hero-dashboard-cover {
      pointer-events: none;
      background-image: linear-gradient(transparent, #0D2E4E);
      height: 320px;
      position: absolute;
      inset: auto 0% 0%;
      z-index: 2;
    }

    /* Dashboard top bar */
    .dash-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 28px;
      background: #081220;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .dash-topbar-tabs { display: flex; gap: 4px; }
    .dash-tab {
      padding: 5px 16px;
      border-radius: 6px;
      font-size: 11.5px;
      font-weight: 600;
      color: rgba(255,255,255,0.35);
    }
    .dash-tab.active {
      background: rgba(200,66,10,0.14);
      color: var(--orange);
      border: 1px solid rgba(200,66,10,0.22);
    }
    .dash-top-stats { display: flex; gap: 24px; }
    .dash-ts {
      font-size: 10.5px;
      color: rgba(255,255,255,0.3);
      font-weight: 600;
      letter-spacing: 0.3px;
    }
    .dash-ts span { color: #10b981; font-weight: 700; }
    .dash-ts span.red { color: #ef4444; }

    /* Options chain table */
    .dash-chain {
      display: grid;
      grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr;
      padding: 6px 28px 2px;
      margin-left: 40%;
      border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .dash-chain-hdr {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: rgba(255,255,255,0.2);
      padding: 4px 0;
    }
    .dash-chain-row { display: contents; }
    .dash-chain-cell {
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,0.55);
      padding: 5px 0;
      border-top: 1px solid rgba(255,255,255,0.03);
    }
    .dash-chain-cell.strike { color: #fff; font-weight: 800; }
    .dash-chain-cell.call { color: #10b981; }
    .dash-chain-cell.put  { color: #ef4444; }
    .dash-chain-row.hl .dash-chain-cell { background: rgba(200,66,10,0.05); }

    /* Chart */
    .dash-chart-area { padding: 12px 28px 0; position: relative; }
    .dash-chart-label {
      font-size: 9.5px;
      font-weight: 700;
      color: rgba(255,255,255,0.25);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .dash-chart-label::before {
      content: '';
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--orange);
      box-shadow: 0 0 5px var(--orange);
    }
    .dash-chart-svg { width: 100%; display: block; }

    /* Alerts */
    .dash-alerts {
      padding: 10px 28px 16px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .dash-alert-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border-radius: 7px;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.04);
    }
    .dash-alert-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .dash-alert-dot.g { background: #10b981; box-shadow: 0 0 4px #10b981; }
    .dash-alert-dot.r { background: #ef4444; box-shadow: 0 0 4px #ef4444; }
    .dash-alert-dot.o { background: var(--orange); box-shadow: 0 0 4px var(--orange); }
    .dash-alert-text { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,0.6); flex: 1; }
    .dash-alert-val  { font-size: 10.5px; font-weight: 800; }
    .dash-alert-val.g { color: #10b981; }
    .dash-alert-val.r { color: #ef4444; }
    .dash-alert-val.o { color: var(--orange); }

    /* ── STATS BAR — Tradient style ── */
    .stats-bar {
      background: #020b18;
      border-top: 1px solid rgba(255,255,255,0.06);
      padding: 22px 0;
      position: relative;
      z-index: 20;
      box-shadow: 0 -20px 40px rgba(0,0,0,0.4);
      margin-top: -40px;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      max-width: 1000px;
      margin: 0 auto;
      gap: 40px;
    }

    .stat-item {
      text-align: center;
      padding: 0 20px;
      position: relative;
      transition: transform 0.3s ease;
    }
    .stat-item:hover { transform: translateY(-5px); }

    .stat-item:not(:last-child)::after {
      content: '';
      position: absolute;
      right: -20px;
      top: 20%;
      height: 60%;
      width: 1px;
      background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.1), transparent);
    }

    .stat-num {
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(24px, 2.6vw, 32px);
      font-weight: 800;
      color: #fff;
      line-height: 1;
      margin-bottom: 6px;
      text-shadow: 0 0 20px rgba(200,66,10,0.3);
      background: linear-gradient(135deg, #fff 40%, var(--orange) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .stat-label {
      color: rgba(255,255,255,0.4);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    /* Legacy — keep for other sections */
    .stat-card-dark {
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.24);
      padding: 16px 32px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      gap: 16px;
      color: #fff;
      text-align: left;
      transition: all 0.3s ease;
    }

    .stat-card-dark:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.2);
      transform: translateY(-3px);
    }

    .stat-icon-wrap {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(200, 66, 10, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--orange-bright);
    }

    .stat-icon-wrap svg { width: 20px; height: 20px; }

    .stat-text h4 {
      font-size: 22px;
      font-weight: 700;
      line-height: 1;
      margin-bottom: 4px;
      font-family: 'DM Mono', monospace;
    }

    .stat-text span {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: rgba(255, 255, 255, 0.6);
      font-weight: 600;
    }

    /* ── CORE LAYOUT ── */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
      width: 100%;
      box-sizing: border-box;
    }

    /* ── APPROACH SECTION ── */
    .approach-new {
      padding: 56px 0 64px;
      background-color: #f4f7fb;
      position: relative;
      z-index: 1;
    }
    .approach-new::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url("/trading_chart_bg.png") center/cover no-repeat;
      filter: grayscale(1) opacity(0.02) contrast(1.5);
      pointer-events: none;
      z-index: -1;
    }

    .approach-header {
      text-align: center;
      max-width: 800px;
      margin: 0 auto 32px auto;
    }

    .approach-header h2 {
      font-size: clamp(36px, 4.5vw, 58px);
      color: #0d2e4e;
      font-weight: 800;
      letter-spacing: -2px;
      line-height: 1.1;
      margin-bottom: 14px;
    }

    .approach-header h2 em {
      font-style: normal;
      color: var(--orange);
      background: linear-gradient(135deg, var(--orange), #f97316);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .approach-header p {
      font-size: 18px;
      color: #64748b;
      line-height: 1.6;
    }

    /* Single-column, centered layout */
    .approach-single {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 40px;
      max-width: 980px;
      margin: 0 auto;
    }

    .approach-single h3 {
      font-size: clamp(22px, 2.6vw, 32px);
      font-weight: 800;
      color: #0d2e4e;
      line-height: 1.3;
      letter-spacing: -0.5px;
      margin: 0;
      text-align: center;
    }

    .bento-pillars {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .bento-pillars-row {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 40px;
    }

    .bento-pillars-row .bento-pillar {
      flex: 1 1 260px;
      max-width: 300px;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .bento-pillars-row .bento-pillar-text {
      align-items: center;
    }

    .bento-pillar {
      display: flex;
      align-items: flex-start;
      gap: 18px;
    }

    .bento-pillar-icon {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      background: linear-gradient(135deg, #e8f0fb 0%, #dbe8f8 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #1e4d8c;
    }

    .bento-pillar-text {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .bento-pillar-text strong {
      font-size: 19px;
      font-weight: 700;
      color: #0d2e4e;
      line-height: 1.3;
    }

    .bento-pillar-text span {
      font-size: 15.5px;
      color: #64748b;
      line-height: 1.4;
    }

    .approach-cta-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .approach-pointer {
      width: 70px;
      mix-blend-mode: multiply;
      opacity: 0.9;
      animation: pointSlide 1.5s ease-in-out infinite;
    }

    .approach-cta-spacer {
      width: 70px;
      visibility: hidden;
    }

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

    .approach-cta-btn {
      display: inline-flex;
      align-items: center;
      background: linear-gradient(180deg, #ff7b00 0%, #cc4400 100%);
      color: #fff;
      font-size: 15px;
      font-weight: 800;
      padding: 12px 28px;
      border-radius: 50px;
      text-decoration: none;
      box-shadow: 0 4px 15px rgba(204, 68, 0, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.2);
      border: 1px solid #b33c00;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    
    .approach-cta-btn::after {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 50%; height: 100%;
      background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
      transform: skewX(-20deg);
      animation: shine 3s infinite;
    }

    @keyframes shine {
      0% { left: -100%; }
      20% { left: 200%; }
      100% { left: 200%; }
    }

    .approach-cta-btn:hover { 
      box-shadow: 0 6px 20px rgba(204, 68, 0, 0.6), inset 0 2px 2px rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.2);
      background: linear-gradient(180deg, #ff8c1a 0%, #e64d00 100%);
      transform: translateY(-2px); 
    }

    @media (max-width: 640px) {
      .approach-single { gap: 28px; }
      .bento-pillars { gap: 16px; }
      .bento-pillars.bento-pillars-row { flex-direction: column; align-items: center; gap: 8px; }
      .bento-pillars-row .bento-pillar { flex: 0 0 auto; max-width: 100%; padding: 0; }
      .approach-header { margin-bottom: 16px; }
    }

    .approach-feature {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 16px;
      font-weight: 500;
      color: var(--teal-900);
    }

    .approach-feature svg {
      color: var(--orange);
      flex-shrink: 0;
      margin-top: 4px;
    }

    .approach-feature span { line-height: 1.5; }

    .video-wrapper {
      position: relative;
      width: 100%;
      padding-top: 56.25%;
      border-radius: 32px;
      overflow: hidden;
      box-shadow: 0 50px 100px -30px rgba(13, 46, 78, 0.25);
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      background: #000;
      border: 1px solid rgba(255,255,255,0.1);
    }

    .video-wrapper:hover {
      transform: translateY(-12px) scale(1.01);
      box-shadow: 0 60px 120px -30px rgba(13, 46, 78, 0.3);
    }

    .video-wrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    /* ── PREMIUM BENTO FEATURES SECTION ── */
    .bento-section {
      padding: 50px 0;
      background: #0D2E4E; /* Matched to hero */
      position: relative;
      overflow: hidden;
    }

    .bento-section::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(13,32,64,.96) 0%, rgba(13,32,64,.82) 55%, rgba(13,32,64,.92) 100%);
      z-index: 2; /* Layer 2: Overlay */
      pointer-events: none;
    }

    .bento-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("/WhatsApp Image 2026-03-10 at 5.35.08 PM (1).jpeg") top center / cover no-repeat;
      opacity: 0.8; /* Increased opacity */
      z-index: 1; /* Layer 1: Image */
      pointer-events: none;
    }

    .bento-section .container {
      position: relative;
      z-index: 10; /* Layer 10: Content (Always on top) */
    }

    .bento-header {
      text-align: center;
      margin-bottom: 36px;
      position: relative;
      z-index: 2;
    }

    .bento-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 16px;
      background: rgba(200, 66, 10, 0.15);
      border: 1px solid rgba(200, 66, 10, 0.32);
      border-radius: 50px;
      color: var(--orange);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 24px;
    }

    .bento-header h2 {
      font-size: clamp(36px, 4.5vw, 54px);
      color: #fff;
      line-height: 1.1;
      letter-spacing: -1.5px;
      font-weight: 800;
    }

    .bento-header h2 span {
      background: linear-gradient(135deg, #fff 0%, var(--orange) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .bento-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 240px);
      gap: 14px;
      position: relative;
      z-index: 2;
    }

    .bento-grid .bento-card {
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.24);
      border-radius: 24px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      text-decoration: none;
      position: relative;
      height: 240px;
    }

    .bento-grid .bento-card.wide {
      grid-column: span 2;
      flex-direction: row;
      align-items: stretch;
      height: 240px;
    }

    .bento-grid .bento-card:hover {
      transform: translateY(-6px);
      background: rgba(0, 0, 0, 0.55);
      border-color: rgba(200, 66, 10, 0.4);
      box-shadow: 0 30px 60px -15px rgba(0,0,0,0.4), inset 0 0 30px rgba(200,66,10,0.1);
    }

    .bento-image-wrapper {
      width: 100%;
      height: 130px;
      flex-shrink: 0;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .bento-grid .bento-card.wide .bento-image-wrapper {
      width: 50%;
      height: 100%;
      min-height: unset;
      order: 2;
    }

    .bento-image-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .bento-grid .bento-card:hover .bento-image-wrapper img {
      transform: scale(1.08) !important;
    }

    .bento-image-wrapper::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    }

    .bento-grid .bento-card.wide .bento-image-wrapper::after {
      background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, transparent 100%);
    }

    .bento-grid .bento-card.wide.reverse .bento-image-wrapper {
      order: 1;
    }

    .bento-grid .bento-card.wide.reverse .bento-image-wrapper::after {
      background: linear-gradient(to left, rgba(0,0,0,0.8) 0%, transparent 100%);
    }

    .bento-content {
      padding: 0 24px 20px 24px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      position: relative;
      z-index: 2;
      margin-top: -24px;
      overflow: hidden;
    }

    .bento-grid .bento-card.wide .bento-content {
      width: 50%;
      padding: 24px;
      margin-top: 0;
      justify-content: center;
      order: 1;
    }

    .bento-grid .bento-card.wide.reverse .bento-content {
      order: 2;
    }

    .bento-content h3 {
      font-size: clamp(17px, 2vw, 21px);
      font-weight: 700;
      color: #fff;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .bento-content h3 svg {
      opacity: 0;
      transform: translateX(-10px);
      transition: all 0.3s ease;
      color: var(--orange);
      flex-shrink: 0;
      margin-left: 12px;
    }

    .bento-card:hover .bento-content h3 svg {
      opacity: 1;
      transform: translateX(0);
    }

    .bento-content p {
      font-size: 14.5px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.5;
    }

    @media (max-width: 992px) {
      .bento-grid { grid-template-columns: 1fr; }
      .bento-grid .bento-card.wide { grid-column: span 1; flex-direction: column; }
      .bento-grid .bento-card.wide .bento-image-wrapper, .bento-grid .bento-card.wide .bento-content { width: 100%; order: unset; }
      .bento-grid .bento-card.wide .bento-image-wrapper { height: 220px; min-height: auto; }
      .bento-content { margin-top: -30px; padding: 0 30px 30px 30px; }
      .bento-grid .bento-card.wide .bento-content { padding: 0 30px 30px 30px; margin-top: -30px; }
      .bento-grid .bento-card.wide .bento-image-wrapper::after, .bento-grid .bento-card.wide.reverse .bento-image-wrapper::after { background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%); }
    }

    /* ── PREMIUM WHAT YOU'LL LEARN (XENTRO STYLE) ── */
    /* ══════════════════════════════════════════════════════
       LEARNING PATH — Cinematic dark, 4-card grid (V3)
       ══════════════════════════════════════════════════════ */
    .learn-section-premium {
      padding: 60px 0 80px;
      background: #0D2E4E;
      position: relative;
      overflow: visible;
    }
    .learn-section-premium::before {
      content: '';
      position: absolute;
      inset: 0;
      background: 
        /* Concentric lines and radial fade with increased visibility */
        radial-gradient(circle at 10% 20%, rgba(255,255,255,0.03) 0%, transparent 60%),
        radial-gradient(circle at 90% 80%, rgba(255,255,255,0.03) 0%, transparent 60%),
        /* Abstract geometric diagonal lines with 200px spacing at high opacity (0.02) */
        repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1.5px, transparent 1.5px, transparent 200px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1.5px, transparent 1.5px, transparent 200px),
        /* Distinct cyan and orange ambient glows */
        radial-gradient(circle at 80% 20%, rgba(0, 188, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(200, 66, 10, 0.12) 0%, transparent 50%),
        /* Solid dark blue base */
        #0D2E4E;
      pointer-events: none;
      z-index: 1;
    }
    .learn-section-premium .container { position: relative; z-index: 10; }

    /* Header */
    .learn-header-centered {
      text-align: center;
      max-width: 800px;
      margin: 0 auto 40px;
      position: relative;
      z-index: 20;
    }
    .learn-header-centered .bento-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      color: #ff6b2c;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 5px;
      text-transform: uppercase;
      margin-bottom: 14px;
      background: none;
      border: none;
      padding: 0;
      text-shadow: 0 0 12px rgba(255,107,44,0.6);
    }
    .learn-header-centered .bento-eyebrow::before,
    .learn-header-centered .bento-eyebrow::after {
      content: '';
      width: 28px; height: 1px;
      background: linear-gradient(90deg, transparent, var(--orange) 50%, transparent);
    }
    .learn-header-centered h2 {
      font-size: clamp(36px, 4.5vw, 56px);
      color: #fff;
      font-weight: 800;
      letter-spacing: -2px;
      line-height: 1.1;
      margin-bottom: 14px;
    }
    .learn-header-centered h2 span {
      color: #ff6b2c;
      background: none;
      -webkit-text-fill-color: #ff6b2c;
      text-shadow: none;
    }
    .learn-header-centered p {
      font-size: 16px;
      color: rgba(255,255,255,0.55);
      line-height: 1.6;
      max-width: 540px;
      margin: 0 auto;
    }

    /* Card grid — Sticky stacking */
    .learn-premium-grid {
      display: flex;
      flex-direction: column;
      gap: 40px;
      max-width: 1240px;
      margin: 0 auto;
      position: relative;
      z-index: 10;
    }

    .learn-premium-card {
      background: linear-gradient(135deg, rgba(14, 38, 65, 0.8) 0%, rgba(8, 24, 42, 0.9) 100%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 40px 48px;
      position: sticky;
      top: 140px;
      height: 400px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 48px;
      align-items: center;
      transition: all .4s cubic-bezier(0.16,1,0.3,1);
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    /* Right-edge orange line */
    .learn-premium-card::before {
      content: '';
      position: absolute;
      top: 12%; right: 0;
      width: 2px;
      height: 76%;
      background: linear-gradient(180deg, transparent 0%, #ff6b2c 40%, #ff6b2c 60%, transparent 100%);
      pointer-events: none;
      z-index: 2;
    }
    .learn-premium-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 8px;
      pointer-events: none;
      background: linear-gradient(90deg, transparent 55%, rgba(200,66,10,0.08) 100%);
    }
    .learn-premium-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255,107,44,0.4);
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255,107,44,0.08);
      background: linear-gradient(135deg, rgba(14, 38, 65, 0.8) 0%, rgba(8, 24, 42, 0.9) 100%);
    }

    /* Content (left side of each card) */
    .lpc-content {
      position: relative;
      z-index: 5;
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 32px;
    }
    .lpc-header-row {
      display: flex;
      align-items: center;
      gap: 16px;
      position: relative;
      z-index: 5;
    }
    .lpc-icon-box {
      width: 44px;
      height: 44px;
      border: 1px solid rgba(255, 107, 44, 0.25);
      background: rgba(255, 107, 44, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      color: #ff6b2c;
      transition: all 0.3s ease;
      flex-shrink: 0;
    }
    .learn-premium-card:hover .lpc-icon-box {
      border-color: rgba(255, 107, 44, 0.6);
      background: rgba(255, 107, 44, 0.15);
      box-shadow: 0 0 15px rgba(255, 107, 44, 0.2);
      transform: scale(1.05);
    }
    .lpc-icon-box svg {
      width: 20px;
      height: 20px;
    }
    .lpc-title-area {
      display: flex;
      flex-direction: column;
    }
    .lpc-num {
      position: absolute;
      top: 10px;
      left: 24px;
      font-size: 140px;
      font-weight: 800;
      color: rgba(255, 107, 44, 0.12);
      line-height: 0.8;
      pointer-events: none;
      z-index: 1;
      font-family: 'DM Sans', sans-serif;
      user-select: none;
      letter-spacing: -3px;
    }
    .lpc-content h3 {
      font-size: 26px !important;
      color: #fff;
      font-weight: 700 !important;
      margin: 0;
      letter-spacing: -0.5px !important;
      line-height: 1.2 !important;
    }
    .lpc-content p {
      font-size: 15px !important;
      color: rgba(255,255,255,0.6) !important;
      line-height: 1.6 !important;
      margin: 0;
      max-width: 480px;
    }
    .lpc-btn {
      align-self: flex-start;
      width: fit-content;
      margin-top: 8px;
      padding: 10px 24px;
      background: transparent;
      border: 1px solid rgba(255,107,44,0.55);
      border-radius: 50px;
      color: #ff6b2c;
      text-decoration: none;
      font-weight: 600;
      font-size: 13px;
      letter-spacing: 0.3px;
      transition: all .3s;
      text-shadow: 0 0 10px rgba(255,107,44,0.4);
    }
    .lpc-btn:hover {
      background: rgba(200,66,10,0.12);
      border-color: var(--orange);
      color: #ff8d4d;
      transform: translateX(4px);
    }

    /* Visual (right side of each card) */
    .lpc-visual {
      position: relative;
      width: 100%;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: -40px -48px -40px 0;
      overflow: hidden;
      border-radius: 0 8px 8px 0;
      padding: 24px;
    }
    .lpc-visual-glow-green,
    .lpc-visual-glow-blue,
    .lpc-visual-glow-indigo,
    .lpc-visual-glow-orange {
      background: none;
    }

    .lpc-visual img {
      width: 90%;
      height: 90%;
      object-fit: contain;
      display: block;
      border-radius: 8px;
      border: none;
      box-shadow: none;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .learn-premium-card:hover .lpc-visual img {
      transform: scale(1.03) translateY(-2px);
    }

    /* Card 1: 100% FREE badge */
    .lpc-free-badge {
      position: absolute;
      top: 15px; right: 15px;
      width: 58px; height: 58px;
      border-radius: 50%;
      background: linear-gradient(135deg, #1f8b4c, #16a34a);
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 10.5px;
      font-weight: 800;
      line-height: 1.1;
      text-align: center;
      letter-spacing: 0.5px;
      box-shadow: 0 6px 20px rgba(22,163,74,0.35);
      z-index: 3;
    }

    /* Card 2: Live trading widget */
    .lpc-visual-widget, .lpc-visual-map { padding: 0; }
    .lpc-visual-mic img {
      width: 90%;
      height: 85%;
      object-fit: cover;
      border-radius: 0;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
      filter: brightness(0.76) contrast(1.05);
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
    }
    .learn-premium-card:hover .lpc-visual-mic img {
      filter: brightness(0.86) contrast(1.05);
    }
    .lpc-live-widget-inline {
      width: 100%;
      max-width: 280px;
      background: #0e1828;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 14px 16px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(200,66,10,0.06);
    }
    .lpc-live-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      color: var(--orange);
      letter-spacing: 1px;
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .lpc-live-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--orange);
      box-shadow: 0 0 0 3px rgba(200,66,10,0.25);
      animation: live-pulse 2s ease-in-out infinite;
    }
    .lpc-alert-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 0;
      font-size: 11.5px;
      color: rgba(255,255,255,0.8);
    }
    .lpc-alert-row + .lpc-alert-row { border-top: 1px solid rgba(255,255,255,0.04); }
    .lpc-alert-left {
      display: flex; align-items: center; gap: 8px;
      font-weight: 600;
    }
    .lpc-alert-tag {
      width: 14px; height: 14px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      font-weight: 800;
      color: #fff;
    }
    .lpc-alert-tag.up { background: #16a34a; }
    .lpc-alert-tag.down { background: #ef4444; }
    .lpc-alert-time {
      color: rgba(255,255,255,0.45);
      font-size: 10.5px;
      font-weight: 500;
    }

    /* Trust strip */
    .learn-trust-strip {
      max-width: 1280px;
      margin: 36px auto 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      padding: 24px 36px;
      background: #0a1322;
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 18px;
      position: relative;
      z-index: 10;
    }
    .learn-trust-item {
      display: flex;
      align-items: center;
      gap: 14px;
      color: rgba(255,255,255,0.7);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.3;
    }
    .learn-trust-icon {
      width: 42px; height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(255,107,44,0.5);
      background: rgba(255,107,44,0.06);
      color: #ff6b2c;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .learn-trust-icon svg { width: 18px; height: 18px; }

    @media (max-width: 980px) {
      .learn-premium-grid { gap: 24px; }
      .learn-premium-card { 
        position: relative; 
        top: auto; 
        height: auto; 
        grid-template-columns: 1.1fr 1fr; 
        padding: 24px 30px; 
        gap: 24px; 
        box-shadow: none;
      }
      .learn-trust-strip { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .learn-premium-card { grid-template-columns: 1fr; padding: 28px; min-height: auto; height: auto; }
      .lpc-visual { 
        min-height: 180px; 
        margin: 10px -28px -28px -28px;
        align-self: stretch;
        border-radius: 0 0 6px 6px;
      }
      .lpc-visual img {
        mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.15) 12%, black 60%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.15) 12%, black 60%);
      }
      .learn-trust-strip { grid-template-columns: 1fr; padding: 20px 24px; }
      .lpc-content h3 { font-size: 22px !important; }
    }

    /* ── THE TRADEHACKER MINDSET SECTION ── */
    .tradehacker-section {
      padding: 60px 0;
      background: #f8f9fa;
      position: relative;
      overflow: hidden;
    }

    .tradehacker-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .tradehacker-content h2 {
      font-size: clamp(32px, 4vw, 50px);
      color: var(--teal-900);
      margin-bottom: 20px;
      letter-spacing: -1.5px;
      font-weight: 800;
      line-height: 1.1;
    }

    .tradehacker-content h2 em { font-style: normal; color: var(--orange); }

    .th-body {
      font-size: 16px;
      color: var(--text-dim);
      line-height: 1.75;
      margin-bottom: 32px;
    }

    .th-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 32px;
    }

    .th-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: #fff;
      border: 1px solid rgba(13,46,78,0.1);
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 600;
      color: var(--teal-900);
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .th-pill-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--orange);
      flex-shrink: 0;
    }

    .th-buttons {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .th-btn-spotify {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 22px;
      background: rgba(13,46,78,0.88);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.12);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      border-radius: 12px;
      text-decoration: none;
      transition: all 0.25s;
    }
    .th-btn-spotify:hover { background: #1DB954; border-color: #1DB954; transform: translateY(-2px); }

    .th-btn-apple {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 22px;
      background: rgba(13,46,78,0.88);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.12);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      border-radius: 12px;
      text-decoration: none;
      transition: all 0.25s;
    }
    .th-btn-apple:hover { background: #555; border-color: #555; transform: translateY(-2px); }

    .tradehacker-content p {
      font-size: 17px;
      color: var(--text-dim);
      line-height: 1.8;
      margin-bottom: 32px;
    }

    .tradehacker-player {
      box-shadow: 0 40px 80px -20px rgba(13, 46, 78, 0.15);
      border-radius: 20px;
      overflow: hidden;
      background: #000;
    }

    /* ── INFINITE MARQUEE TESTIMONIALS (TRENOX STYLE) ── */
    .testimonials-marquee {
      padding: 100px 0;
      background: #0D2E4E; /* Matched to hero */
      position: relative;
      overflow: hidden;
    }

    .testimonials-marquee::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("/WhatsApp Image 2026-03-10 at 5.35.08 PM (1).jpeg") top center / cover no-repeat;
      opacity: 0.8; /* Increased opacity */
      z-index: 1;
      pointer-events: none;
    }

    .testimonials-marquee::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(13,32,64,.96) 0%, rgba(13,32,64,.82) 55%, rgba(13,32,64,.92) 100%);
      z-index: 2;
      pointer-events: none;
    }

    .testimonials-marquee .container, .testimonials-marquee .marquee-container {
      position: relative;
      z-index: 10;
    }

    .test-header {
      text-align: center;
      margin-bottom: 40px;
      position: relative;
      z-index: 2;
    }

    .test-header h2 {
      font-size: clamp(32px, 4vw, 48px);
      color: #fff;
      letter-spacing: -1.5px;
      margin: 0 auto;
      font-weight: 800;
      line-height: 1.1;
    }
    
    .test-header h2 span {
      background: linear-gradient(135deg, #fff 0%, var(--orange) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .marquee-container {
      position: relative;
      width: 100%;
      overflow: hidden;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      margin-top: 20px;
      -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
      mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    }

    .marquee-track {
      display: flex;
      gap: 20px;
      width: max-content;
    }

    .marquee-track.left {
      animation: marquee-scroll-left 50s linear infinite;
    }

    .marquee-track:hover {
      animation-play-state: paused;
    }

    @keyframes marquee-scroll-left {
      0% { transform: translateX(0); }
      100% { transform: translateX(calc(-50% - 10px)); }
    }

    .test-card {
      width: 420px;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.24);
      border-radius: 20px;
      padding: 30px;
      display: flex;
      flex-direction: column;
      transition: all 0.3s ease;
    }

    .test-card:hover {
      background: rgba(0, 0, 0, 0.6);
      border-color: rgba(255, 255, 255, 0.25);
      transform: translateY(-5px);
    }

    .test-stars {
      display: flex;
      gap: 3px;
      color: var(--orange);
      margin-bottom: 20px;
    }
    
    .test-stars svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
    }

    .test-card p {
      font-size: 15px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 24px;
      flex-grow: 1;
    }

    .test-author {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .test-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #fff;
      font-size: 16px;
    }

    .test-author-info {
      display: flex;
      flex-direction: column;
    }

    .test-author-info h4 {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      margin: 0 0 2px 0;
    }

    .test-author-info span {
      font-size: 11px;
      color: var(--orange);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    @media (max-width: 768px) {
      .test-card { width: 320px; padding: 24px; }
      .test-card p { font-size: 14px; }
    }

    /* ── PREMIUM INSTITUTIONAL CTA (SPLIT-DECK FADE) ── */
    .premium-cta-section {
      padding: 100px 0;
      background: #f1f5f9; /* Slightly darker than pure white to make the card pop */
      position: relative;
      overflow: hidden;
    }

    .saas-cta-card {
      max-width: 1050px; /* Reduced width */
      margin: 0 auto;
      display: flex;
      background: #ffffff;
      border-radius: 32px; /* Slightly tighter border radius */
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(13,32,64,0.06), 0 30px 80px rgba(13,32,64,0.1);
      border: 1px solid rgba(0,0,0,0.04);
      position: relative;
    }

    .saas-cta-content {
      flex: 0.8; /* Reduced from 1.1 to give more space to the image */
      padding: 80px 60px; /* Slightly reduced padding */
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .saas-eyebrow {
      display: inline-block;
      color: var(--orange);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .saas-cta-content h2 {
      font-size: clamp(28px, 3.5vw, 40px); /* Slightly smaller heading to fit reduced space */
      font-weight: 900;
      color: #0D2040;
      line-height: 1.05;
      margin-bottom: 24px;
      letter-spacing: -1px;
    }

    .saas-cta-content h2 span {
      color: var(--orange);
    }

    .saas-cta-content p {
      font-size: 16px;
      color: #64748b;
      line-height: 1.6;
      margin-bottom: 36px;
      max-width: 420px; /* Adjusted max-width */
    }

    .saas-actions {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .saas-btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--orange);
      color: #fff;
      padding: 12px 22px; /* Reduced button size */
      border-radius: 10px;
      text-decoration: none;
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 8px 24px rgba(200, 66, 10, 0.2);
      white-space: nowrap; /* Prevent text wrapping */
    }

    .saas-btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(200, 66, 10, 0.3);
      filter: brightness(1.05);
    }

    .saas-btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #f8fafc;
      color: #0D2040;
      padding: 12px 22px; /* Reduced button size */
      border-radius: 10px;
      text-decoration: none;
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid rgba(0,0,0,0.06);
      white-space: nowrap; /* Prevent text wrapping */
    }

    .saas-btn-secondary:hover {
      background: #f1f5f9;
      transform: translateY(-2px);
    }

    .saas-cta-visual {
      flex: 1.2; /* Increased from 0.9 to extend the image to the left */
      position: relative;
      min-height: 480px;
      background: #000;
    }

    .saas-visual-inner {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .saas-visual-inner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.95;
      /* Removed the scale hover transition here to prevent the fade line clipping */
    }

    /* THE FADE BETWEEN LEFT TEXT AND RIGHT IMAGE */
    .saas-cta-visual::after {
      content: '';
      position: absolute;
      top: -2px; left: -2px; bottom: -2px; width: 350px; /* Increased fade width for a smoother blend */
      background: linear-gradient(90deg, #ffffff 0%, #ffffff 15%, transparent 100%);
      z-index: 1;
      pointer-events: none;
    }

    @media (max-width: 1024px) {
      .saas-cta-card { flex-direction: column; margin: 0 20px; }
      .saas-cta-content { padding: 60px 40px; }
      .saas-cta-visual { min-height: 350px; order: -1; flex: auto; }
      .saas-cta-visual::after { 
        width: 100%; height: 200px; top: auto; bottom: -2px; left: 0;
        background: linear-gradient(0deg, #ffffff 0%, #ffffff 15%, transparent 100%);
      }
    }

    /* ── FOOTER & SPOTIFY WIDGET ── */
    footer {
      background: var(--teal-900);
      padding: 80px 60px 40px;
      color: #fff;
      position: relative;
    }

    footer::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("/WhatsApp Image 2026-03-10 at 5.35.08 PM (1).jpeg") center/cover no-repeat;
      opacity: 0.05;
      pointer-events: none;
    }

    .footer-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding-bottom: 60px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      gap: 40px;
      flex-wrap: wrap;
      position: relative;
      z-index: 2;
    }

    .footer-brand img {
      height: 40px;
      width: auto;
      transform: scale(5);
      transform-origin: left center;
    }

    .footer-tagline {
      color: rgba(255, 255, 255, 0.35);
      font-size: 13px;
      margin-top: 100px;
    }

    .footer-link {
      color: rgba(255, 255, 255, 0.6);
      font-size: 13px;
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-link:hover { color: var(--emerald-500); }

    /* ── HOME PRICING SECTION ── INNOVATIVE ECOSYSTEM ── */
    .pricing-section-home {
      padding: 60px 0;
      background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 50%, #ffffff 100%);
      position: relative;
      overflow: hidden;
    }

    /* Animated gradient mesh background */
    .pricing-section-home::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 20% 50%, rgba(200,66,10,0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(16,185,129,0.05) 0%, transparent 50%),
        radial-gradient(circle at 40% 0%, rgba(200,66,10,0.03) 0%, transparent 50%);
      animation: gradient-shift 15s ease-in-out infinite;
      pointer-events: none;
      z-index: 1;
    }

    @keyframes gradient-shift {
      0%, 100% {
        background:
          radial-gradient(circle at 20% 50%, rgba(200,66,10,0.06) 0%, transparent 50%),
          radial-gradient(circle at 80% 80%, rgba(16,185,129,0.05) 0%, transparent 50%),
          radial-gradient(circle at 40% 0%, rgba(200,66,10,0.03) 0%, transparent 50%);
      }
      50% {
        background:
          radial-gradient(circle at 80% 50%, rgba(200,66,10,0.08) 0%, transparent 50%),
          radial-gradient(circle at 20% 20%, rgba(16,185,129,0.06) 0%, transparent 50%),
          radial-gradient(circle at 60% 100%, rgba(200,66,10,0.04) 0%, transparent 50%);
      }
    }

    .pricing-section-home .container {
      position: relative;
      z-index: 10;
    }

    .pricing-home-header {
      text-align: center;
      margin-bottom: 50px;
      position: relative;
      z-index: 2;
    }

    .pricing-home-header .bento-eyebrow {
      background: rgba(200, 66, 10, 0.12);
      border: 1px solid rgba(200, 66, 10, 0.25);
      margin-bottom: 24px;
      animation: fadeInDown 0.8s ease-out;
      color: var(--orange);
    }

    .pricing-home-header h2 {
      font-size: clamp(40px, 5vw, 64px);
      color: #0D2E4E;
      font-weight: 900;
      letter-spacing: -2px;
      line-height: 1.1;
      margin: 0 auto;
      max-width: 900px;
      animation: fadeInUp 0.9s ease-out 0.1s both;
    }

    .pricing-home-header h2 span {
      color: #c8420a;
    }

    .pricing-home-header p {
      margin-top: 24px;
      font-size: 18px;
      color: var(--text-dim);
      max-width: 650px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.7;
      animation: fadeInUp 0.9s ease-out 0.2s both;
    }

    @keyframes fadeInDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .pricing-home-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin-bottom: 60px;
      max-width: 1080px;
      margin: 14px auto 28px;
      padding: 14px 20px 0;
      align-items: stretch;
    }

    .pricing-card-home {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1.5px solid rgba(255, 255, 255, 0.15);
      border-radius: 24px;
      padding: 40px 32px;
      display: flex;
      flex-direction: column;
      transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }

    .pricing-card-home::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
      pointer-events: none;
      border-radius: 24px;
    }

    .pricing-card-home > * {
      position: relative;
      z-index: 1;
    }

    .pricing-card-home:hover {
      transform: translateY(-12px) scale(1.02);
      border-color: rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.12);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(200, 66, 10, 0.15);
    }

    /* CARD 1: FREE — Teal glow */
    .pricing-card-home:nth-child(1) {
      border-color: rgba(16, 185, 129, 0.3);
    }
    .pricing-card-home:nth-child(1):hover {
      border-color: rgba(16, 185, 129, 0.6);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(16, 185, 129, 0.2);
    }
    .pricing-card-home:nth-child(1) .p-icon-circle {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
    }
    .pricing-card-home:nth-child(1) .p-card-btn {
      border-color: rgba(16, 185, 129, 0.4);
      color: #10b981;
      background: rgba(16, 185, 129, 0.08);
    }
    .pricing-card-home:nth-child(1) .p-card-btn:hover {
      background: rgba(16, 185, 129, 0.2);
      border-color: #10b981;
      transform: translateX(6px);
    }

    /* CARD 2: POPULAR — Orange glow */
    .pricing-card-home.popular {
      border-color: rgba(200, 66, 10, 0.4);
      box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 0 30px rgba(200, 66, 10, 0.15);
      z-index: 5;
      overflow: visible;
    }

    .pricing-card-home.popular::after {
      content: '';
      position: absolute;
      inset: -2px;
      background: conic-gradient(from 0deg, rgba(200,66,10,0.2), rgba(200,66,10,0.1), rgba(200,66,10,0.2));
      border-radius: 24px;
      z-index: 0;
      animation: spin-slow 8s linear infinite;
    }

    @keyframes spin-slow {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .pricing-card-home.popular:hover {
      transform: translateY(-12px) scale(1.02);
      border-color: rgba(200, 66, 10, 0.6);
      box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 50px rgba(200, 66, 10, 0.35);
    }

    .pricing-card-home.popular .p-card-price {
      background: linear-gradient(135deg, var(--orange) 0%, #e04d10 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* CARD 3: PRO — Gold glow */
    .pricing-card-home:nth-child(3) {
      border-color: rgba(212, 160, 64, 0.35);
    }
    .pricing-card-home:nth-child(3):hover {
      border-color: rgba(212, 160, 64, 0.6);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(212, 160, 64, 0.25);
    }
    .pricing-card-home:nth-child(3) .p-icon-circle {
      background: linear-gradient(135deg, #d4a040 0%, #b8841f 100%);
      box-shadow: 0 3px 10px rgba(212, 160, 64, 0.32);
    }
    .pricing-card-home:nth-child(3) .p-card-btn {
      border-color: #d4a040;
      color: #b8841f;
    }
    .pricing-card-home:nth-child(3) .p-card-btn:hover {
      background: linear-gradient(135deg, #d4a040 0%, #b8841f 100%);
      color: #fff;
      box-shadow: 0 8px 22px rgba(212, 160, 64, 0.35);
    }
    .pricing-card-home:nth-child(3) .p-card-price {
      background: linear-gradient(135deg, #d4a040 0%, #b8841f 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .pricing-card-home:nth-child(3) .p-price-row::after {
      background: linear-gradient(90deg, transparent, #d4a040, transparent);
    }

    .p-plan-row {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 14px;
      background: linear-gradient(135deg, rgba(13,46,78,0.05) 0%, rgba(13,46,78,0.02) 100%);
      padding: 4px 16px 4px 4px;
      border-radius: 50px;
      border: 1px solid rgba(13, 46, 78, 0.08);
      box-shadow: 0 3px 10px rgba(13, 46, 78, 0.04);
    }

    .p-icon-circle {
      width: 26px;
      height: 26px;
      background: linear-gradient(135deg, var(--orange) 0%, #e04d10 100%);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 3px 8px rgba(200, 66, 10, 0.3);
    }

    .p-icon-circle svg {
      width: 13px;
      height: 13px;
    }

    .p-card-header h3 {
      font-size: 16px;
      color: #ffffff;
      margin: 0;
      font-weight: 800;
      letter-spacing: 0.4px;
    }

    .p-price-row {
      position: relative;
      padding-bottom: 16px;
      margin-bottom: 18px;
    }

    .p-price-row::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, var(--orange) 50%, transparent 100%);
      opacity: 0.4;
    }

    .popular-tag {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, var(--orange) 0%, #e04d10 100%);
      color: #fff;
      padding: 5px 16px;
      border-radius: 50px;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.6px;
      box-shadow: 0 6px 18px rgba(200, 66, 10, 0.45), 0 0 0 3px #fbfcfd;
      white-space: nowrap;
      z-index: 10;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .popular-tag::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 8px rgba(255,255,255,0.8);
      animation: pulseDot 1.6s ease-in-out infinite;
    }

    @keyframes pulseDot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.7); }
    }

    .p-card-header {
      text-align: center;
      margin-bottom: 14px;
    }

    .p-card-price {
      font-size: 32px;
      font-weight: 800;
      color: #ffffff;
      margin-bottom: 2px;
      letter-spacing: -1px;
      display: block;
      line-height: 1;
    }

    .p-card-price span {
      font-size: 12px;
      font-weight: 500;
      color: rgba(255,255,255,0.6);
      letter-spacing: 0.3px;
    }

    .p-card-features {
      list-style: none;
      margin-bottom: 22px;
    }

    .p-card-features li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: rgba(255,255,255,0.8);
      margin-bottom: 12px;
      line-height: 1.5;
      animation: slideInLeft 0.6s ease-out backwards;
    }

    .p-card-features li:nth-child(1) { animation-delay: 0s; }
    .p-card-features li:nth-child(2) { animation-delay: 0.1s; }
    .p-card-features li:nth-child(3) { animation-delay: 0.2s; }
    .p-card-features li:nth-child(4) { animation-delay: 0.3s; }

    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .p-card-features li svg {
      width: 15px;
      height: 15px;
      color: var(--orange);
      flex-shrink: 0;
      padding: 2px;
      background: rgba(200,66,10,0.1);
      border-radius: 50%;
    }

    .p-card-btn {
      display: block;
      width: 100%;
      padding: 14px 20px;
      border-radius: 12px;
      text-align: center;
      text-decoration: none;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.3px;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      border: 1.5px solid rgba(255,255,255,0.2);
      color: #ffffff;
      background: rgba(255,255,255,0.08);
      position: relative;
      overflow: hidden;
    }

    .p-card-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
      opacity: 0;
      transition: opacity 0.4s;
    }

    .p-card-btn:hover {
      background: rgba(200, 66, 10, 0.25);
      border-color: rgba(200, 66, 10, 0.6);
      color: var(--orange);
      box-shadow: 0 10px 30px rgba(200, 66, 10, 0.2);
      transform: translateY(-2px);
    }

    .p-card-btn:hover::before {
      opacity: 1;
    }

    .popular .p-card-btn {
      background: linear-gradient(135deg, rgba(200, 66, 10, 0.3) 0%, rgba(200, 66, 10, 0.1) 100%);
      color: #fff;
      border-color: rgba(200, 66, 10, 0.5);
      box-shadow: 0 10px 25px rgba(200, 66, 10, 0.2);
    }

    .popular .p-card-btn:hover {
      background: linear-gradient(135deg, var(--orange) 0%, #e04d10 100%);
      border-color: var(--orange);
      box-shadow: 0 15px 40px rgba(200, 66, 10, 0.35);
      transform: translateY(-3px);
    }

    @media (max-width: 992px) {
      .pricing-home-grid { grid-template-columns: 1fr; max-width: 500px; }
      .pricing-card-home.popular { transform: none; }
      .pricing-card-home.popular:hover { transform: translateY(-12px); }
    }

    /* ── 2-COLUMN LAYOUT ── */
    .ecosystem-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: center;
      margin-bottom: 40px;
    }

    .ecosystem-left {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .proof-card {
      padding: 32px;
      background: #ffffff;
      border-radius: 14px;
      border: 1px solid rgba(13, 46, 78, 0.1);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      transition: all 0.4s ease;
    }

    .proof-card:hover {
      border-color: rgba(200, 66, 10, 0.3);
      box-shadow: 0 12px 40px rgba(200, 66, 10, 0.15);
      transform: translateY(-4px);
    }

    .proof-accent-bar {
      display: none;
    }

    .proof-tag {
      display: inline-block;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.8px;
      color: #c8420a;
      background: rgba(200, 66, 10, 0.1);
      padding: 6px 14px;
      border-radius: 20px;
      margin-bottom: 16px;
      text-transform: uppercase;
    }

    .proof-card h3 {
      font-size: 22px;
      font-weight: 800;
      color: #0D2E4E;
      margin-bottom: 10px;
      line-height: 1.3;
    }

    .proof-card p {
      font-size: 14px;
      color: #64748b;
      line-height: 1.5;
      margin-bottom: 18px;
    }

    .proof-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #c8420a;
      text-decoration: none;
      font-weight: 700;
      font-size: 14px;
      transition: all 0.3s ease;
    }

    .proof-cta:hover {
      gap: 12px;
      color: #e04d10;
    }

    .ecosystem-right {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ── ECOSYSTEM ANIMATED ORBITS ── */
    .ecosystem-orbits {
      max-width: 600px;
      margin: 0 auto;
      position: relative;
    }

    .orbit-container {
      position: relative;
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      aspect-ratio: 1;
    }

    .central-circle {
      position: absolute;
      inset: 50%;
      transform: translate(-50%, -50%);
      width: 140px;
      height: 140px;
      background: linear-gradient(135deg, rgba(200,66,10,0.15) 0%, rgba(200,66,10,0.08) 100%);
      border: 2px solid rgba(200, 66, 10, 0.3);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      z-index: 10;
      text-align: center;
      font-weight: 800;
      font-size: 14px;
      color: #0D2E4E;
      line-height: 1.2;
      box-shadow: 0 0 60px rgba(200, 66, 10, 0.15), inset 0 0 40px rgba(200,66,10,0.08);
    }

    .central-circle::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 50%;
      background: conic-gradient(from 0deg, rgba(200,66,10,0.3), rgba(200,66,10,0.2), rgba(200,66,10,0.3));
      animation: spin 8s linear infinite;
      z-index: -1;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .orbit {
      position: absolute;
      inset: 0;
      border-radius: 50%;
    }

    .orbit-1 {
      border: 2px dashed rgba(200, 66, 10, 0.15);
      opacity: 0.5;
    }

    .orbit-item {
      position: absolute;
      inset: 0;
      animation: orbit-rotate 20s linear infinite;
      animation-delay: var(--delay, 0s);
    }

    @keyframes orbit-rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    .orbit-dot {
      position: absolute;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(200,66,10,0.2) 0%, rgba(200,66,10,0.1) 100%);
      border: 2px solid rgba(200, 66, 10, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.4s ease;
      z-index: 5;
      top: 50%;
      left: 50%;
      margin-left: 150px;
      margin-top: -30px;
      opacity: 0;
      animation: fadeInDot 0.8s ease-out forwards;
      animation-delay: calc(var(--delay, 0s) + 0.2s);
    }

    @keyframes fadeInDot {
      from {
        opacity: 0;
        transform: translate(-100px, -100px) scale(0.5);
      }
      to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
      }
    }

    .dot-glow {
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(200,66,10,0.3) 0%, transparent 70%);
      opacity: 0;
      animation: glow-pulse 2s ease-in-out infinite;
      animation-delay: var(--delay, 0s);
    }

    @keyframes glow-pulse {
      0%, 100% { opacity: 0; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.2); }
    }

    .orbit-dot svg {
      width: 28px;
      height: 28px;
      color: var(--orange);
      position: relative;
      z-index: 2;
    }

    .orbit-dot:hover {
      background: linear-gradient(135deg, var(--orange) 0%, #e04d10 100%);
      border-color: var(--orange);
      transform: scale(1.15);
      box-shadow: 0 0 30px rgba(200, 66, 10, 0.4);
    }

    .orbit-dot:hover svg {
      color: #000;
    }

    .orbit-label {
      position: absolute;
      font-size: 11px;
      font-weight: 800;
      color: #0D2E4E;
      text-align: center;
      width: 90px;
      line-height: 1.2;
      letter-spacing: 0.5px;
      white-space: normal;
      top: 50%;
      left: 50%;
      margin-left: 150px;
      margin-top: 45px;
      opacity: 0;
      animation: fadeInDot 0.8s ease-out forwards;
      animation-delay: calc(var(--delay, 0s) + 0.2s);
    }

    /* ── ECOSYSTEM CTA ── */
    .ecosystem-cta-section {
      text-align: center;
      margin-bottom: 40px;
    }

    .ecosystem-cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 18px 48px;
      background: var(--orange);
      color: #fff;
      font-weight: 900;
      font-size: 16px;
      letter-spacing: 0.5px;
      border-radius: 14px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
      box-shadow: 0 12px 40px rgba(200, 66, 10, 0.3);
      position: relative;
      overflow: hidden;
    }

    .ecosystem-cta-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.3) 100%);
      opacity: 0;
      transition: opacity 0.5s;
    }

    .ecosystem-cta-btn::after {
      content: '';
      position: absolute;
      inset: -2px;
      background: conic-gradient(from 0deg, rgba(200,66,10,0.4), rgba(200,66,10,0.2), rgba(200,66,10,0.4));
      border-radius: 14px;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.5s;
    }

    .ecosystem-cta-btn:hover {
      transform: translateY(-4px) scale(1.02);
      box-shadow: 0 20px 60px rgba(200, 66, 10, 0.4);
    }

    .ecosystem-cta-btn:hover::before {
      opacity: 1;
    }

    .ecosystem-cta-btn:hover::after {
      opacity: 1;
    }

    .ecosystem-cta-btn svg {
      width: 20px;
      height: 20px;
      transition: transform 0.4s ease;
    }

    .ecosystem-cta-btn:hover svg {
      transform: translateX(4px);
    }

    /* ── PROOF SHOWCASE ── */
    .proof-showcase {
      max-width: 1300px;
      margin: 0 auto;
      padding: 0 20px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    .proof-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: center;
    }

    .proof-left {
      grid-template-columns: 1fr 1.1fr;
    }

    .proof-right {
      grid-template-columns: 1.1fr 1fr;
    }


    .proof-tag {
      display: inline-block;
      padding: 8px 18px;
      background: rgba(200, 66, 10, 0.12);
      border: 1.5px solid rgba(200, 66, 10, 0.25);
      border-radius: 50px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 16px;
    }

    .proof-content-block h3 {
      font-size: 36px;
      font-weight: 900;
      color: #0D2E4E;
      letter-spacing: -1px;
      margin: 0 0 16px 0;
      line-height: 1.2;
    }

    .proof-content-block p {
      font-size: 16px;
      color: var(--text-dim);
      line-height: 1.8;
      margin: 0 0 24px 0;
    }

    .proof-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 32px;
      background: var(--orange);
      color: #000;
      font-weight: 900;
      font-size: 14px;
      border-radius: 10px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all 0.4s ease;
      box-shadow: 0 8px 20px rgba(200, 66, 10, 0.25);
    }

    .proof-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(200, 66, 10, 0.35);
    }

    .proof-cta svg {
      width: 16px;
      height: 16px;
    }

    .image-frame {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      aspect-ratio: 3/4;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
      background: linear-gradient(135deg, rgba(200,66,10,0.1) 0%, rgba(16,185,129,0.08) 100%);
    }

    .image-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .proof-wrapper:hover .image-frame img {
      transform: scale(1.05);
    }

    @media (max-width: 1024px) {
      .ecosystem-2col {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .proof-showcase {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .proof-wrapper {
        grid-template-columns: 1fr;
      }

      .proof-left,
      .proof-right {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .ecosystem-2col {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .proof-card {
        padding: 28px;
      }

      .proof-card h3 {
        font-size: 20px;
      }

      .proof-card p {
        font-size: 14px;
      }

      .orbit-container {
        max-width: 280px;
      }

      .orbit-item {
        animation: orbit-rotate 12s linear infinite;
      }

      @keyframes orbit-rotate {
        0% { transform: rotate(0deg) translateX(100px) rotate(0deg); }
        100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
      }

      .orbit-label {
        font-size: 9px;
        bottom: -45px;
        width: 70px;
      }

      .ecosystem-cta-btn {
        padding: 14px 32px;
        font-size: 14px;
      }

      .proof-content-block h3 {
        font-size: 24px;
      }

      .proof-content-block p {
        font-size: 14px;
      }
    }

    /* ── RESOURCES ROW (Performance + Podcast) ── */
    .pr-divider {
      max-width: 1080px;
      margin: 18px auto 24px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .pr-divider::before,
    .pr-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(13, 46, 78, 0.1) 50%, transparent 100%);
    }

    .pr-divider span {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 2.4px;
      text-transform: uppercase;
      color: rgba(13, 46, 78, 0.4);
    }


    .social-icon {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.24);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
      color: #fff;
    }

    .social-icon:hover { background: var(--emerald-500); color: #000; }

    .footer-bottom {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-top: 40px;
      gap: 16px;
      position: relative;
      z-index: 2;
    }

    .footer-copy {
      color: rgba(255, 255, 255, 0.3);
      font-size: 11.5px;
      line-height: 1.75;
      max-width: 800px;
    }

    @media (max-width: 768px) {
      footer { padding: 60px 20px 32px; }
      .footer-top { flex-direction: column; gap: 36px; }
      .footer-brand img { transform: scale(3) !important; transform-origin: left center; margin-bottom: 30px; }
      .footer-brand { margin-bottom: 0; }
      .footer-tagline { margin-top: 0; }
    }

    /* ── SECTION 3: THE INSTITUTIONAL LEDGER ── */
    /* ───────────────────────────────────────── */
    /* PREMIUM INSTITUTIONAL SECTION             */
    /* ───────────────────────────────────────── */
    .institutional-section {
      position: relative;
      overflow: hidden;
      padding: 100px 0;
      background: #0D2E4E;
    }
    .institutional-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: 
        radial-gradient(circle at 15% 70%, rgba(20, 80, 150, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(13, 70, 140, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 60% 60%, rgba(0, 188, 255, 0.08) 0%, transparent 45%),
        linear-gradient(180deg, #091a2e 0%, #0D2E4E 100%);
      pointer-events: none;
      -webkit-mask-image: radial-gradient(circle at 60% 50%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 95%);
      mask-image: radial-gradient(circle at 60% 50%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 95%);
    }
    .institutional-bg-grid {
      display: none;
    }
    .institutional-glow {
      position: absolute;
      width: 1000px;
      height: 1000px;
      left: -300px;
      top: 0px;
      background: radial-gradient(circle, rgba(0, 188, 255, 0.12) 0%, transparent 60%);
      pointer-events: none;
      z-index: 1;
    }
    .institutional-container {
      position: relative;
      z-index: 5;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .institutional-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 18px;
      border-radius: 999px;
      border: 1px solid #00bcff;
      background: transparent;
      color: #00bcff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 24px;
    }
    .institutional-left h2 {
      font-size: clamp(42px, 4.5vw, 68px);
      line-height: 1.05;
      letter-spacing: -1.5px;
      color: #fff;
      font-weight: 800;
      margin-bottom: 22px;
    }
    .institutional-left h2 span { color: var(--orange); }
    .institutional-line {
      width: 40px;
      height: 3px;
      border-radius: 999px;
      background: var(--orange);
      margin-bottom: 24px;
    }
    .institutional-left p {
      color: rgba(255,255,255,.65);
      font-size: 17px;
      line-height: 1.7;
      max-width: 520px;
      margin-bottom: 36px;
    }
    .institutional-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 14px 28px;
      border-radius: 8px;
      background: var(--orange);
      border: 1px solid var(--orange);
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      text-decoration: none;
      box-shadow: 0 0 25px rgba(200,66,10,.3);
      transition: all .3s ease;
    }
    .institutional-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 35px rgba(200,66,10,.5);
      background: var(--orange-bright);
      border-color: var(--orange-bright);
    }
    .institutional-right {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .institutional-card {
      position: relative;
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 20px 24px;
      border-radius: 12px;
      background: linear-gradient(rgba(8, 24, 43, 0.65), rgba(8, 24, 43, 0.65)) padding-box,
                  linear-gradient(135deg, rgba(0,188,255,0.6) 0%, rgba(0,188,255,0.6) 100%) border-box; /* Uniform cyan color across the entire border without fading */
      border: 1.5px solid transparent;
      box-shadow: none; /* Removed the default shadow */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: all .3s ease;
    }
    .institutional-card:hover {
      transform: translateY(-4px);
      background: linear-gradient(rgba(8, 24, 43, 0.85), rgba(8, 24, 43, 0.85)) padding-box,
                  linear-gradient(135deg, rgba(0,188,255,1) 0%, rgba(0,188,255,1) 100%) border-box; /* Uniform glowing hover cyan border */
      box-shadow: none; /* Keep shadow completely removed on hover as requested, preserving only the zoom/movement effect */
    }
    .institutional-icon {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,188,255,.08);
      border: 1px solid rgba(0,188,255,.3);
      color: #00bcff;
      flex-shrink: 0;
    }
    .institutional-icon svg { width: 22px; height: 22px; }
    .institutional-card-content { flex: 1; position: relative; min-width: 0; }
    .institutional-card-content h4 {
      font-size: 18px;
      color: #fff;
      margin-bottom: 4px;
      font-weight: 700;
      letter-spacing: -.2px;
    }
    .institutional-card-content p {
      color: rgba(255,255,255,.55);
      font-size: 14px;
      line-height: 1.5;
      margin: 0;
    }
    .institutional-arrow {
      font-size: 24px;
      color: #00bcff;
      opacity: 1;
      font-weight: bold;
      transition: transform .3s ease;
    }
    .institutional-card:hover .institutional-arrow {
      transform: translateX(5px);
    }
    @media (max-width: 1024px) {
      .institutional-container { grid-template-columns: 1fr; }
      .institutional-left h2 { font-size: 48px; }
    }
    @media (max-width: 640px) {
      .institutional-section { padding: 60px 0; }
      .institutional-left h2 { font-size: 38px; }
      .institutional-card { padding: 18px; gap: 16px; }
      .institutional-card-content h4 { font-size: 16px; }
      .institutional-card-content p { font-size: 13px; }
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) {
      .approach-grid-new, .tradehacker-grid { grid-template-columns: 1fr; gap: 60px; }
      .learn-grid-4 { grid-template-columns: 1fr 1fr; }
      .plans-layout { grid-template-columns: 1fr; }
      .plan-box.featured { transform: none; }
      .test-item { flex: 0 0 calc(50% - 16px); }
      .navbar { padding: 18px 30px; }
      .test-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    }

    @media (max-width: 900px) {
      .hero-inner { padding: 0 28px; }
      .hero-content { padding: 120px 0 60px; max-width: 100%; text-align: left; }
      .hero h1 { font-size: clamp(32px, 8vw, 48px); }
      .hero-dashboard-wrapper { top: 320px; }
      .hero { min-height: 780px; }
    }
    @media (max-width: 768px) {
      .learn-grid-4 { grid-template-columns: 1fr; }
      .hero h1 { font-size: 38px; }
      .nav-toggle { display: block; order: -1; }
      .nav-links {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 78%;
        max-width: 320px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: rgba(13, 46, 78, 0.98);
        backdrop-filter: blur(20px);
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.4);
        padding: 90px 28px 18px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 999;
        overflow-y: auto;
      }
      .nav-links.active { transform: translateX(0); }
      .nav-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; font-size: 18px; cursor: pointer; line-height: 1; }
      .nav-close:hover { background: rgba(255,255,255,0.22); }
      .nav-links li { width: 100%; }
      .nav-links a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
      .nav-item-dropdown .dropdown-menu { position: static; box-shadow: none; padding-left: 12px; opacity: 1; visibility: visible; pointer-events: auto; transform: none; background: transparent; backdrop-filter: none; border: none; } .nav-item-dropdown:hover .dropdown-menu, .nav-item-dropdown.is-open .dropdown-menu, .nav-item-dropdown:focus-within .dropdown-menu { position: static !important; transform: none !important; left: auto !important; top: auto !important; }

      .navbar, .navbar.scrolled { display: grid !important; grid-template-columns: 1fr 100px 1fr; gap: 0; padding-left: 16px !important; padding-right: 16px !important; padding-top: 14px !important; padding-bottom: 14px !important; background: rgba(13, 46, 78, 0.98) !important; backdrop-filter: blur(20px); }
      .navbar { position: fixed; top: 0; left: 0; right: 0; }
            .nav-toggle { grid-column: 1; justify-self: start; display: flex; align-items: center; }
      .navbar .nav-logo { grid-column: 2; margin: 0; order: unset; }
      .navbar .nav-auth-group { grid-column: 3; justify-self: end; overflow: visible !important; display: flex !important; }
      .navbar .nav-logo img { transform: scale(2.5) !important; transform-origin: center center !important; }
      .navbar > div.nav-auth-group { display: flex !important; order: 1; gap: 0 !important; }
      .navbar .nav-auth-group .nav-login-link { display: none; }
      .navbar .nav-cta { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
      .nav-mobile-only { display: none; }
      .nav-links.active .nav-mobile-only { display: block; }
      .nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 998; }
      .nav-backdrop.active { display: block; }

      .test-item { flex: 0 0 100%; }

      /* Stats bar mobile */
      .stats-bar { margin-top: 0; padding-top: 28px; }
      .stats-grid { grid-template-columns: repeat(3,1fr); gap: 0; max-width: 100%; }
      .stat-item { padding: 0 6px; }
      .stat-item:not(:last-child)::after { right: 0; }
      .stat-num { font-size: clamp(14px, 4.5vw, 22px); }
      .stat-label { font-size: 9px; }
      /* Hero CTA buttons narrower on mobile */
      .hero-cta-row { padding: 0 24px; }
      .btn-main, .btn-ghost { max-width: 280px; width: 100%; margin: 0 auto; justify-content: center; }
      .hero-cta-row { flex-direction: column; align-items: center; }

      /* Ecosystem mobile */
      .ecosystem-2col { grid-template-columns: 1fr; gap: 32px; }
      .ecosystem-right { margin-top: 40px; }
      .orbit-container { max-width: 400px; }


      /* Tradehacker mobile */
      .tradehacker-grid { grid-template-columns: 1fr; }
      .tradehacker-visual { margin-top: 40px; }

      /* Proof cards mobile */
      .proof-card { padding: 24px; }
      .proof-card h3 { font-size: 18px; }
      .proof-card p { font-size: 13px; }

      /* Container padding */
      .container { padding: 0 24px; }

      /* Section padding */
      .approach-new { padding: 40px 0; }
      .pricing-section-home { padding: 40px 0; }
      .tradehacker-section { padding: 40px 0; }
    }

    @media (max-width: 480px) {
      .container { padding: 0 16px; }
      .orbit-container { max-width: 320px; }
      .orbit-dot { width: 48px; height: 48px; }
      .orbit-label { font-size: 10px; width: 70px; }
      .proof-card { padding: 20px; margin-bottom: 16px; }
      .proof-card h3 { font-size: 16px; }
      .proof-card p { font-size: 12px; line-height: 1.4; }
      .hero h1 { font-size: 28px; }
      .approach-header h2 { font-size: 28px; }

      /* Stats bar extra small */
      .stats-grid { gap: 0; }
      .stat-num { font-size: clamp(13px, 3.8vw, 18px); }
      .stat-label { font-size: 9px; letter-spacing: 1px; }
      .stat-item { padding: 0 8px; }
    }    /* ══ SECTION 13: FINAL CTA ── REDESIGNED LIVE TERMINAL ══ */
    .pm-final-cta {
      background-color: #fff;
      padding: 100px 0;
      position: relative;
    }

    .dt-terminal-cta {
      max-width: 1100px;
      margin: 0 auto;
      background: #0D2E4E; /* Using site brand dark blue */
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      display: grid;
      grid-template-columns: 1fr 400px;
      box-shadow: 0 40px 100px rgba(13, 46, 78, 0.15), 0 0 0 1px rgba(255,255,255,0.04) inset;
      overflow: hidden;
      position: relative;
    }

    .dt-terminal-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
      background-size: 30px 30px;
      pointer-events: none;
    }

    .dt-term-left {
      padding: 60px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .dt-live-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: 'DM Mono', monospace;
      font-size: 11.5px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.8);
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 24px;
      background: rgba(0,0,0,0.25);
      padding: 8px 16px;
      border-radius: 30px;
      border: 1px solid rgba(255,255,255,0.08);
      width: fit-content;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .dt-live-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 10px #10b981;
      animation: pulse-live 2s infinite;
    }

    @keyframes pulse-live {
      0% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.8); }
      100% { opacity: 1; transform: scale(1); }
    }

    .dt-term-left h2 {
      font-size: clamp(34px, 4vw, 50px);
      font-weight: 900;
      color: #fff;
      line-height: 1.15;
      letter-spacing: -0.02em;
      margin-bottom: 16px;
    }

    .dt-term-left h2 em {
      font-style: normal;
      color: var(--orange);
    }

    .dt-term-left p {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.65);
      line-height: 1.6;
      max-width: 520px;
      margin-bottom: 30px;
    }

    .dt-volume-profile {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 10px;
      opacity: 0.8;
    }

    .dt-vol-bar {
      height: 4px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 4px;
      width: 0%;
      transition: width 0.2s;
    }

    .dt-vol-bar:nth-child(1) { width: 35%; animation: vol-shift 3s infinite alternate; }
    .dt-vol-bar:nth-child(2) { width: 65%; animation: vol-shift 4s infinite alternate-reverse; }
    .dt-vol-bar:nth-child(3) { width: 45%; animation: vol-shift 2.5s infinite alternate; }
    .dt-vol-bar:nth-child(4) { width: 85%; background: var(--orange); box-shadow: 0 0 12px rgba(200,66,10,0.5); animation: vol-shift 3.5s infinite alternate-reverse; }
    .dt-vol-bar:nth-child(5) { width: 25%; animation: vol-shift 2s infinite alternate; }

    @keyframes vol-shift {
      0% { transform: scaleX(0.85); transform-origin: left; }
      100% { transform: scaleX(1.15); transform-origin: left; }
    }

    .dt-term-right {
      background: rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-left: 1px solid rgba(255, 255, 255, 0.08);
      padding: 60px 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      z-index: 2;
    }

    .dt-term-price-lbl {
      font-family: 'DM Mono', monospace;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 8px;
      font-weight: 600;
    }

    .dt-term-price {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin-bottom: 36px;
      position: relative;
    }

    .dt-term-price .val {
      font-size: 68px;
      font-weight: 900;
      color: #fff;
      line-height: 1;
      letter-spacing: -0.03em;
    }

    .dt-term-price .cur {
      font-size: 30px;
      color: var(--orange);
      font-weight: 800;
      transform: translateY(-20px);
    }

    .dt-term-price .per {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.5);
      font-weight: 500;
    }

    .dt-term-action {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: linear-gradient(135deg, var(--orange), var(--orange-bright));
      color: #fff;
      padding: 16px 28px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 800;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
      box-shadow: 0 12px 30px rgba(200, 66, 10, 0.25);
      position: relative;
      overflow: hidden;
    }

    .dt-term-action::before {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      transform: skewX(-20deg);
      transition: 0.6s;
    }

    .dt-term-action:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 35px rgba(200, 66, 10, 0.35);
    }
    .dt-term-action:hover::before {
      left: 100%;
    }

    .dt-term-feature {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      font-weight: 500;
      margin-bottom: 12px;
      text-align: left;
    }
    .dt-term-feature svg {
      width: 18px; height: 18px;
      color: #10b981; /* Green checkmarks */
      stroke-width: 3;
      flex-shrink: 0;
    }

    @media (max-width: 960px) {
      .dt-terminal-cta {
        grid-template-columns: 1fr;
        max-width: 600px;
        text-align: center;
      }
      .dt-term-left { padding: 48px 30px; align-items: center; }
      .dt-live-badge { margin: 0 auto 24px; }
      .dt-term-left p { margin: 0 auto; }
      .dt-term-right { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 40px 30px; align-items: center; }
      .dt-volume-profile { display: none; }
      .dt-term-price { justify-content: center; }
      .pm-final-cta { padding: 50px 0; }
    }

    /* ════════════════════════════════════════
       HERO V2 — Premium Layout
       ════════════════════════════════════════ */
    .hero-v2 {
      background: #0D2E4E;
      position: relative;
      overflow: hidden;
      min-height: 92vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    .hero-v2::before {
      content: '';
      position: absolute;
      inset: 0;
      background: 
        /* Soft, premium radial glows matching Section 3 */
        radial-gradient(circle at 15% 70%, rgba(20, 80, 150, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(13, 70, 140, 0.14) 0%, transparent 50%),
        radial-gradient(circle at 60% 60%, rgba(0, 188, 255, 0.08) 0%, transparent 45%),
        linear-gradient(180deg, #091a2e 0%, #0D2E4E 100%);
      pointer-events: none;
      z-index: 1;
    }
    /* Premium background design image using the candles background */
    .hero-v2::after {
      content: '';
      position: absolute;
      inset: 0;
      background: url("/trading_chart_bg.png") center center / cover no-repeat;
      opacity: 0.11; /* Visible candles layout background design */
      mix-blend-mode: overlay; /* Blends nicely with navy gradients */
      pointer-events: none;
      z-index: 2;
    }
    .hv2-line-top {
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, var(--orange) 30%, #d4a040 50%, var(--orange) 70%, transparent);
      z-index: 10;
    }
    .hv2-grid-bg {
      display: none;
    }
    .hv2-glow-l {
      position: absolute;
      width: 1000px;
      height: 1000px;
      left: -300px;
      top: 0px;
      background: radial-gradient(circle, rgba(0, 188, 255, 0.12) 0%, transparent 60%);
      pointer-events: none;
      z-index: 3;
    }
    .hv2-glow-r {
      display: none;
    }
    .hv2-rules {
      display: none;
    }
    /* Main inner: two-column */
    .hv2-inner {
      position: relative; z-index: 5;
      max-width: 1380px; width: 100%;
      min-height: 92vh;
      display: flex;
      align-items: center;
      padding: 0 80px;
    }
    /* Left: text content */
    .hv2-left {
      text-align: left;
      min-width: 0;
      max-width: 580px;
      flex-shrink: 0;
      padding: 160px 0 120px;
    }
    .hv2-left > * {
      opacity: 0;
      animation: fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
    }
    .hv2-badge   { animation-delay: 0.05s; }
    .hv2-h1      { animation-delay: 0.18s; }
    .hv2-sub     { animation-delay: 0.3s; }
    .hv2-ctas    { animation-delay: 0.42s; }
    .hv2-trust   { animation-delay: 0.54s; }
    .hv2-strip   { animation-delay: 0.66s; }
    .hv2-badge {
      display: inline-flex; align-items: center; gap: 9px;
      padding: 8px 18px 8px 12px;
      background: rgba(200,66,10,0.1); border: 1px solid rgba(200,66,10,0.3);
      border-radius: 50px; color: #ff9060;
      font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
      margin-bottom: 32px;
      backdrop-filter: blur(12px);
    }
    .hv2-badge-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--orange);
      box-shadow: 0 0 0 3px rgba(200,66,10,0.28);
      animation: live-pulse 2s ease-in-out infinite;
    }
    .hv2-h1 {
      font-size: clamp(42px, 5.5vw, 80px);
      font-weight: 800; color: #fff;
      line-height: .95; letter-spacing: -3px;
      margin-bottom: 24px;
    }
    .hv2-h1 em {
      font-style: normal;
      display: block;
      margin-top: 8px;
      background: linear-gradient(135deg, #ff6b2c 0%, #ff7b00 50%, #ffb347 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .hv2-sub {
      font-size: 19px; color: rgba(255,255,255,0.58);
      line-height: 1.7; max-width: 560px;
      margin: 0 0 42px;
    }
    .hv2-ctas {
      display: flex; align-items: center; justify-content: flex-start;
      gap: 16px; flex-wrap: wrap; margin-bottom: 36px;
    }
    .hv2-trust {
      display: flex; align-items: center; justify-content: flex-start;
      gap: 28px; flex-wrap: wrap; margin-bottom: 0;
    }
    .hv2-trust-item {
      display: flex; align-items: center; gap: 7px;
      font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.4);
    }
    .hv2-trust-item svg { color: var(--orange); flex-shrink: 0; }

    /* ─────────────────────────────────── */
    /* PREMIUM SAAS PLATFORM VISUAL (right side) */
    /* ─────────────────────────────────── */
    .hero-mountain {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 50%;
      z-index: 4;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 40px;
      box-sizing: border-box;
    }
    .hero-visual-stack {
      position: relative;
      width: 100%;
    }
    .hero-img-back {
      position: relative;
      width: 78%;
      margin-left: auto;
      display: block;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 30px 80px rgba(0,0,0,0.55);
      filter: brightness(0.94) contrast(1.03);
    }
    .hero-img-front {
      position: absolute;
      left: 0;
      top: 66%;
      transform: translateY(-50%);
      width: 78%;
      display: block;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 20px 50px rgba(0,0,0,0.6);
      z-index: 1;
      filter: brightness(0.96) contrast(1.03);
    }
    /* Floating labels — smaller, compact */
    .hero-tag {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 14px 7px 10px;
      border-radius: 8px;
      background: rgba(5,15,30,0.85);
      border: 1px solid rgba(255,255,255,.12);
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 8px 24px rgba(0,0,0,.45);
      pointer-events: none;
      z-index: 6;
      opacity: 0;
      animation: fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
      white-space: nowrap;
    }
    /* Glowing landmark dot */
    .hero-tag::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ff6b2c;
      box-shadow: 0 0 0 3px rgba(255,107,44,0.25), 0 0 10px rgba(255,107,44,0.7);
      flex-shrink: 0;
      animation: dot-pulse 2s ease-in-out infinite;
    }
    @keyframes dot-pulse {
      0%,100% { box-shadow: 0 0 0 3px rgba(255,107,44,0.25), 0 0 10px rgba(255,107,44,0.7); }
      50%      { box-shadow: 0 0 0 6px rgba(255,107,44,0.1), 0 0 18px rgba(255,107,44,0.9); }
    }
    .hero-tag.orange {
      background: linear-gradient(135deg, #a33209, #d95820);
      border-color: rgba(255,120,60,0.3);
      box-shadow: 0 8px 28px rgba(200,66,10,.4);
    }
    .hero-tag.orange::before {
      background: #fff;
      box-shadow: 0 0 0 3px rgba(255,255,255,0.2), 0 0 8px rgba(255,255,255,0.8);
    }
    /* Anchored to road switchbacks; size shrinks toward the peak for depth */
    .tag-1 {
      top: 18%; right: 20%;
      transform: scale(0.72);
      transform-origin: right center;
      animation-delay: 0.7s;
    } /* CONSISTENCY — peak/flag (orange), smallest */
    .tag-2 {
      top: 47%; right: 26%;
      transform: scale(0.82);
      transform-origin: right center;
      animation-delay: 0.85s;
    } /* DISCIPLINE — upper bend */
    .tag-3 {
      top: 68%; right: 33%;
      transform: scale(0.92);
      transform-origin: right center;
      animation-delay: 1.0s;
    } /* STRATEGY — middle bend */
    .tag-4 {
      bottom: 12%; right: 24%;
      transform: scale(1);
      transform-origin: right center;
      animation-delay: 1.15s;
    } /* TRANSPARENCY — lower bend, full size */

    /* fadeUp animation needs to preserve the per-tag scale */
    @keyframes fadeUpScale {
      from { opacity: 0; transform: translateY(20px) scale(var(--s, 1)); }
      to   { opacity: 1; transform: translateY(0) scale(var(--s, 1)); }
    }
    .tag-1 { --s: 0.72; animation-name: fadeUpScale; }
    .tag-2 { --s: 0.82; animation-name: fadeUpScale; }
    .tag-3 { --s: 0.92; animation-name: fadeUpScale; }
    .tag-4 { --s: 1;    animation-name: fadeUpScale; }

    /* Bottom stats strip */
    .hv2-strip {
      display: flex; align-items: center; justify-content: center;
      border-top: 1px solid rgba(255,255,255,0.07);
      padding-top: 40px; gap: 0;
    }
    .hv2-strip-stat {
      padding: 0 48px; text-align: center; position: relative;
    }
    .hv2-strip-stat:not(:last-child)::after {
      content: ''; position: absolute; top: 10%; right: 0; bottom: 10%;
      width: 1px; background: rgba(255,255,255,0.08);
    }
    .hv2-strip-num {
      display: block;
      font-size: clamp(26px, 2.8vw, 40px);
      font-weight: 800; line-height: 1; margin-bottom: 6px;
      background: linear-gradient(135deg, #fff 40%, var(--orange) 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .hv2-strip-lbl {
      font-size: 10.5px; font-weight: 700; letter-spacing: 2px;
      text-transform: uppercase; color: rgba(255,255,255,0.32);
    }
    @media (max-width: 1200px) {
      .hv2-h1 { font-size: 64px; }
      .hero-mountain { width: 50%; }
    }
    @media (max-width: 1024px) {
      .hv2-inner { padding: 0 40px; }
      .hv2-left { max-width: 520px; }
      .hv2-h1 { font-size: 54px; letter-spacing: -2px; }
      .hero-mountain { width: 48%; }
      .hero-tag { transform: scale(0.88); transform-origin: right center; }
    }
    @media (max-width: 768px) {
      .hero-v2 { min-height: auto; }
      .hv2-inner { padding: 100px 24px 60px; min-height: auto; flex-direction: column; align-items: flex-start; }
      .hv2-left { max-width: 100%; padding: 0; }
      .hv2-h1 { font-size: 42px; letter-spacing: -1.5px; }
      .hv2-sub { font-size: 16px; }
      .hv2-ctas { flex-direction: column; align-items: stretch; }
      .hero-mountain { position: relative; width: 100%; height: 340px; bottom: auto; top: auto; margin-top: 40px; padding: 0 12px; }
      .hero-visual-stack { width: 100%; }
      .hero-img-back { width: 80%; }
      .hero-img-front { width: 80%; left: 0; top: 66%; transform: translateY(-50%); bottom: auto; }
      .hero-tag { display: none; }
      .hv2-strip { flex-direction: column; gap: 28px; padding-top: 32px; }
      .hv2-strip-stat { padding: 0; }
      .hv2-strip-stat::after { display: none; }
      .hv2-trust { gap: 16px; }
    }

    /* ════════════════════════════════════════
       ECOSYSTEM V2 — The Four Pillars (dark)
       ════════════════════════════════════════ */
    .eco-v2 {
      padding: 80px 0 90px;
      background: linear-gradient(180deg, #f3f6fa 0%, #edf1f8 100%);
      position: relative;
      overflow: hidden;
    }
    .eco-v2::before {
      content: ''; position: absolute;
      top: 0; left: 20%; right: 20%; bottom: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(200,66,10,0.06) 0%, transparent 55%);
      pointer-events: none;
    }
    .eco-v2-wrap {
      max-width: 1240px; margin: 0 auto;
      padding: 0 48px; position: relative; z-index: 2;
    }
    /* Header */
    .eco-v2-hdr {
      display: flex; align-items: flex-end;
      justify-content: space-between; gap: 40px;
      margin-bottom: 56px;
      padding-bottom: 40px;
      border-bottom: 1px solid rgba(13,46,78,0.12);
    }
    .eco-v2-hdr-left { max-width: 600px; }
    .eco-v2-eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: 'DM Mono', monospace; font-size: 11px;
      font-weight: 500; letter-spacing: 3.5px; text-transform: uppercase;
      color: var(--orange); margin-bottom: 18px;
    }
    .eco-v2-eyebrow::before {
      content: ''; width: 28px; height: 1px; background: rgba(200,66,10,0.5);
    }
    .eco-v2-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(36px, 4.2vw, 58px);
      font-weight: 700; color: #0D2E4E;
      line-height: 1.05; letter-spacing: -1.5px;
    }
    .eco-v2-title em { font-style: italic; color: var(--orange); }
    .eco-v2-sub {
      font-size: 15px; color: #64748b;
      line-height: 1.6; margin-top: 14px;
    }
    .eco-v2-hdr-cta {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 12px 26px;
      border: 1px solid rgba(13,46,78,0.18);
      border-radius: 10px;
      color: #0D2E4E;
      font-size: 13px; font-weight: 700;
      text-decoration: none; white-space: nowrap;
      transition: all 0.25s;
      background: rgba(13,46,78,0.04);
    }
    .eco-v2-hdr-cta:hover {
      border-color: var(--orange); color: var(--orange);
      background: rgba(200,66,10,0.06);
    }
    /* Card grid: 2 tall cards top, 2 wide cards bottom */
    .eco-v2-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 16px;
    }
    .eco-v2-card {
      position: relative; overflow: hidden;
      background: #060f1c;
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 20px;
      padding: 40px 38px 36px;
      display: flex; flex-direction: column;
      text-decoration: none; color: inherit;
      transition: background 0.4s, border-color 0.4s, transform 0.4s cubic-bezier(0.16,1,0.3,1);
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    }
    .eco-v2-card:hover {
      background: #0c1e36;
      border-color: rgba(200,66,10,0.35);
      transform: translateY(-5px);
      box-shadow: 0 20px 48px rgba(0,0,0,0.4);
    }
    /* Bottom orange reveal bar */
    .eco-v2-card::after {
      content: ''; position: absolute;
      bottom: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, var(--orange), #d4a040);
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.55s cubic-bezier(0.65,0,0.35,1);
    }
    .eco-v2-card:hover::after { transform: scaleX(1); }
    /* Ghost glow on hover */
    .eco-v2-card::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse at 0% 100%, rgba(200,66,10,0.1) 0%, transparent 65%);
      opacity: 0; transition: opacity 0.5s;
    }
    .eco-v2-card:hover::before { opacity: 1; }
    /* Wide card spans full row */
    .eco-v2-card.wide { grid-column: 1 / -1; }
    /* Wide card inner: horizontal layout */
    .eco-v2-card.wide .eco-v2-card-body {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 60px; align-items: center;
    }
    .eco-v2-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(60px, 5.5vw, 86px);
      font-style: italic; font-weight: 700;
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,0.1);
      line-height: 1; margin-bottom: 28px;
      transition: color 0.4s ease, -webkit-text-stroke-color 0.35s;
    }
    .eco-v2-card:hover .eco-v2-num {
      color: var(--orange); -webkit-text-stroke-color: transparent;
    }
    .eco-v2-card-icon {
      width: 46px; height: 46px; border-radius: 12px;
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.08);
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.45); margin-bottom: 20px;
      transition: background 0.35s, border-color 0.35s, color 0.35s;
    }
    .eco-v2-card:hover .eco-v2-card-icon {
      background: rgba(200,66,10,0.14);
      border-color: rgba(200,66,10,0.35);
      color: var(--orange);
    }
    .eco-v2-card-tag {
      font-family: 'DM Mono', monospace; font-size: 10px;
      font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
      color: rgba(255,255,255,0.35); margin-bottom: 12px;
      transition: color 0.35s;
    }
    .eco-v2-card:hover .eco-v2-card-tag { color: var(--orange); }
    .eco-v2-card h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(24px, 2.2vw, 32px);
      font-weight: 700; color: #fff;
      line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 12px;
    }
    .eco-v2-card h3 em { font-style: italic; color: rgba(255,200,160,0.9); }
    .eco-v2-card p {
      font-size: 14.5px; color: rgba(255,255,255,0.45);
      line-height: 1.65; flex-grow: 1;
    }
    .eco-v2-card-link {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 28px; padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.06);
      font-family: 'DM Mono', monospace; font-size: 11px;
      font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
      color: rgba(255,255,255,0.3);
      transition: color 0.35s;
    }
    .eco-v2-card:hover .eco-v2-card-link { color: var(--orange); }
    .eco-v2-card-link svg { transition: transform 0.35s; }
    .eco-v2-card:hover .eco-v2-card-link svg { transform: translateX(4px); }
    /* Wide card right side: feature pills */
    .eco-v2-wide-pills {
      display: flex; flex-direction: column; gap: 14px;
    }
    .eco-v2-pill {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 18px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.65);
      transition: background 0.3s, border-color 0.3s;
    }
    .eco-v2-card:hover .eco-v2-pill {
      background: rgba(255,255,255,0.09);
      border-color: rgba(255,255,255,0.14);
    }
    .eco-v2-pill-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--orange); flex-shrink: 0;
    }
    @media (max-width: 900px) {
      .eco-v2-hdr { flex-direction: column; align-items: flex-start; }
      .eco-v2-grid { grid-template-columns: 1fr; }
      .eco-v2-card.wide .eco-v2-card-body { grid-template-columns: 1fr; gap: 32px; }
      .eco-v2-wrap { padding: 0 24px; }
    }

    /* ══════════════════════════════════════════════
       ECOSYSTEM V1 — EDITORIAL PATHWAYS
       ══════════════════════════════════════════════ */
    .pathways-section {
      padding: 45px 0 50px;
      background: #ffffff;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }
    .pathways-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: 
        linear-gradient(rgba(13, 46, 78, 0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 46, 78, 0.012) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
      z-index: -1;
    }
    .pathways-section::after {
      content: "";
      position: absolute;
      top: -20%;
      left: 20%;
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(200, 66, 10, 0.02) 0%, transparent 70%);
      pointer-events: none;
      z-index: -1;
    }

    .pw-container {
      position: relative; z-index: 2;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 32px;
    }

    /* Header */
    .pw-header {
      text-align: center;
      padding-bottom: 24px;
      margin-bottom: 36px;
      border-bottom: 1px solid rgba(13,46,78,0.05);
      position: relative;
    }
    .pw-eyebrow {
      display: inline-flex; align-items: center; gap: 12px;
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 18px;
    }
    .pw-eyebrow::before, .pw-eyebrow::after {
      content: ''; width: 36px; height: 1px;
      background: rgba(200,66,10,0.45);
    }
    .pw-title {
      font-family: var(--ff-sans);
      font-size: clamp(32px, 4vw, 50px);
      font-weight: 800;
      color: #0D2E4E;
      line-height: 1.1;
      letter-spacing: -2px;
      margin-bottom: 18px;
    }
    .pw-title em {
      font-style: normal;
      color: var(--orange);
    }
    .pw-sub {
      font-size: 16px;
      color: #5b6776;
      line-height: 1.6;
      max-width: 580px;
      margin: 0 auto;
    }

    /* Pathways Grid */
    .pw-pathways {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      position: relative;
      margin-top: 70px;
    }

    .pw-pathways::before {
      content: '';
      position: absolute;
      top: -36px;
      left: 12.5%;
      right: 12.5%;
      height: 2px;
      background: #0D2E4E;
      z-index: 1;
    }

    .pw-card {
      position: relative;
      background: #ffffff;
      border: 1px solid rgba(13, 46, 78, 0.08);
      border-radius: 20px;
      padding: 28px 24px;
      text-decoration: none;
      color: inherit;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 10px 30px rgba(13, 46, 78, 0.02);
      display: flex;
      flex-direction: column;
      gap: 20px;
      z-index: 2;
    }

    .pw-card:hover {
      transform: translateY(-6px);
      border-color: var(--orange);
      box-shadow: 
        0 20px 40px rgba(13, 46, 78, 0.08),
        0 1px 3px rgba(200, 66, 10, 0.15);
      z-index: 3;
    }

    .pw-card-node {
      position: absolute;
      top: -57px;
      left: 50%;
      transform: translateX(-50%);
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: #0D2E4E;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--ff-mono);
      font-size: 15px;
      font-weight: 700;
      z-index: 10;
      transition: all 0.3s ease;
      box-shadow: 0 0 0 5px #fbfaf6;
    }

    .pw-card:hover .pw-card-node {
      background: var(--orange);
      transform: translateX(-50%) scale(1.1);
      box-shadow: 0 0 0 8px #fbfaf6, 0 4px 12px rgba(200, 66, 10, 0.2);
    }

    .pw-card-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
      width: 100%;
    }

    .pw-card-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-family: var(--ff-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--orange);
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }
    .pw-card-tag::before {
      content: '';
      width: 14px;
      height: 1px;
      background: currentColor;
    }

    .pw-card-header h3 {
      font-family: var(--ff-sans);
      font-size: clamp(26px, 2.6vw, 32px);
      font-weight: 800;
      color: #0D2E4E;
      line-height: 1.25;
      margin: 0;
      text-align: center;
    }
    .pw-card-header h3 em {
      font-style: normal;
      color: var(--orange);
    }

    .pw-card-body {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      height: 100%;
    }

    .pw-card-text {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
      text-align: left;
    }

    .pw-card-text p {
      font-size: 15px;
      color: #5b6776;
      line-height: 1.55;
      margin: 0;
    }

    .pw-card-link {
      font-family: var(--ff-mono);
      font-size: 12.5px;
      font-weight: 700;
      color: var(--orange);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: gap 0.3s ease;
      margin-top: 6px;
    }

    .pw-card:hover .pw-card-link {
      gap: 10px;
      color: var(--orange-bright);
    }

    .pw-card-image {
      flex: 0 0 92px;
      height: 92px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(13, 46, 78, 0.03);
      border-radius: 14px;
      border: 1px solid rgba(13, 46, 78, 0.05);
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .pw-card:hover .pw-card-image {
      background: rgba(200, 66, 10, 0.04);
      border-color: rgba(200, 66, 10, 0.15);
    }

    .pw-card-image svg {
      width: 54px;
      height: 54px;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .pw-card:hover .pw-card-image svg {
      transform: translateY(-2px) scale(1.05);
    }

    /* Footer */
    .pw-footer {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-top: 56px;
      font-family: 'DM Mono', monospace;
      font-size: 12px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #5b6776;
    }
    .pw-footer-line {
      flex: 0 0 60px;
      height: 1px;
      background: rgba(13,46,78,0.15);
    }
    .pw-footer a {
      color: var(--orange);
      text-decoration: none;
      font-weight: 700;
      border-bottom: 1px solid currentColor;
      padding-bottom: 2px;
      transition: color 0.2s;
    }
    .pw-footer a:hover { color: var(--orange-bright); }

    @media (max-width: 1200px) {
      .pw-pathways {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        margin-top: 40px;
      }
      .pw-pathways::before {
        display: none;
      }
      .pw-card-node {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        margin-bottom: 16px;
        box-shadow: none;
      }
      .pw-card:hover .pw-card-node {
        transform: scale(1.1);
        box-shadow: 0 4px 10px rgba(200, 66, 10, 0.15);
      }
    }

    @media (max-width: 768px) {
      .pw-card-body {
        flex-direction: column-reverse;
        text-align: center;
      }
      .pw-card-text {
        text-align: center;
        align-items: center;
      }
      .pw-card-image {
        flex: 0 0 110px;
        height: 110px;
        width: 100%;
      }
    }

    @media (max-width: 640px) {
      .pw-pathways {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .pathways-section {
        padding: 80px 0 80px;
      }
      .pw-footer {
        flex-direction: column;
        text-align: center;
        gap: 12px;
      }
      .pw-footer-line {
        display: none;
      }
    }

    /* ═══════════════════════════════════════════════════════════
       TYPE SYSTEM — single source of truth for all pages
       ═══════════════════════════════════════════════════════════ */
    :root {
      --ff-sans: 'DM Sans', sans-serif;
      --ff-serif: 'Cormorant Garamond', serif;
      --ff-mono: 'DM Mono', monospace;

      --fs-display: clamp(36px, 4.5vw, 60px);
      --fs-h1:      clamp(30px, 3.6vw, 48px);
      --fs-h2:      clamp(26px, 2.6vw, 36px);
      --fs-h3:      clamp(20px, 1.8vw, 26px);
      --fs-h4:      17px;
      --fs-lead:    18px;
      --fs-body:    16px;
      --fs-small:   14px;
      --fs-eyebrow: 12px;
      --fs-btn:     15px;

      --lh-tight: 1.1;
      --lh-snug:  1.25;
      --lh-body:  1.65;
    }

    /* Base body */
    body { font-family: var(--ff-sans); font-size: var(--fs-body); line-height: var(--lh-body); }

    /* Hero H1 — only the page's main hero headline */
    .hv2-h1 { font-size: var(--fs-display) !important; line-height: var(--lh-tight) !important; font-weight: 800 !important; }

    /* Section H2s — unify every section title */
    .approach-header h2,
    .learn-header-centered h2,
    .test-header h2,
    .pricing-home-header h2,
    .institutional-left h2,
    .eco-v2-title,
    .pw-title {
      font-size: var(--fs-h2) !important;
      line-height: var(--lh-snug) !important;
      font-weight: 700 !important;
      letter-spacing: -0.5px !important;
    }

    /* Card/sub headings (h3/h4) */
    .institutional-card-content h4,
    .eco-v2-card h3,
    .pw-card h3,
    .plan-name,
    .approach-card h3 {
      font-size: var(--fs-h4) !important;
      line-height: 1.3 !important;
      font-weight: 700 !important;
    }

    /* Lead / intro paragraphs */
    .approach-header p,
    .learn-header-centered p,
    .test-header p,
    .pricing-home-header p,
    .institutional-left p,
    .hv2-sub {
      font-size: var(--fs-lead) !important;
      line-height: 1.6 !important;
    }

    /* Default paragraphs inside content cards */
    .institutional-card-content p,
    .eco-v2-card p,
    .pw-card p,
    .approach-card p {
      font-size: var(--fs-body) !important;
      line-height: var(--lh-body) !important;
    }

    /* Eyebrows / pill tags */
    .institutional-badge,
    .approach-eyebrow,
    .learn-eyebrow,
    .test-eyebrow,
    .pricing-home-eyebrow,
    .hv2-eyebrow {
      font-size: var(--fs-eyebrow) !important;
      letter-spacing: 2px !important;
      font-weight: 700 !important;
    }

    /* ── PREMIUM BLOGS SECTION (TRADIENT INSPIRED) ── */
    .blogs-section-premium {
      padding: 40px 0 75px;
      background: #0D2E4E;
      position: relative;
      overflow: hidden;
    }
    .blogs-section-premium::before {
      content: '';
      position: absolute;
      inset: 0;
      background: 
        radial-gradient(circle at 10% 20%, rgba(255,255,255,0.03) 0%, transparent 60%),
        radial-gradient(circle at 90% 80%, rgba(255,255,255,0.03) 0%, transparent 60%),
        #0D2E4E;
      pointer-events: none;
      z-index: 1;
    }
    .blogs-section-premium::after {
      content: '';
      position: absolute;
      inset: 0;
      background: url("/images/trading_chart_bg.png") center center / cover no-repeat;
      opacity: 0.08; /* Visible candles layout background design */
      mix-blend-mode: overlay;
      pointer-events: none;
      z-index: 2;
    }
    
    /* Angled top divider to blend FAQ section into Blogs */
    .blogs-top-divider {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      overflow: hidden;
      line-height: 0;
      transform: rotate(180deg);
      z-index: 5;
    }
    .blogs-top-divider svg {
      position: relative;
      display: block;
      width: calc(100% + 1.3px);
      height: 60px;
    }
    .blogs-top-divider .shape-fill {
      fill: #FFFFFF;
    }

    /* Glow Blobs and Grid Animations */
    @keyframes blogsGlow1 {
      0% {
        transform: scale(1) translate(0, 0);
        opacity: 0.8;
      }
      50% {
        transform: scale(1.15) translate(4%, 3%);
        opacity: 1;
      }
      100% {
        transform: scale(1) translate(0, 0);
        opacity: 0.8;
      }
    }
    @keyframes blogsGlow2 {
      0% {
        transform: scale(1) translate(0, 0);
        opacity: 0.7;
      }
      50% {
        transform: scale(1.2) translate(-3%, -2%);
        opacity: 0.9;
      }
      100% {
        transform: scale(1) translate(0, 0);
        opacity: 0.7;
      }
    }
    
    .blogs-glow-1 {
      position: absolute;
      top: -10%;
      left: -5%;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(0, 188, 255, 0.15) 0%, rgba(13, 46, 78, 0) 70%);
      pointer-events: none;
      z-index: 2;
      animation: blogsGlow1 14s infinite ease-in-out;
    }
    .blogs-glow-2 {
      position: absolute;
      bottom: -10%;
      right: -5%;
      width: 550px;
      height: 550px;
      background: radial-gradient(circle, rgba(200, 66, 10, 0.1) 0%, rgba(13, 46, 78, 0) 70%);
      pointer-events: none;
      z-index: 2;
      animation: blogsGlow2 18s infinite ease-in-out;
    }
    .blogs-grid-overlay {
      position: absolute;
      inset: 0;
      background-image: 
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
      background-size: 45px 45px;
      pointer-events: none;
      z-index: 2;
    }
    .blogs-diagonal-lines {
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 90px,
        rgba(255, 255, 255, 0.008) 90px,
        rgba(255, 255, 255, 0.008) 92px
      );
      pointer-events: none;
      z-index: 2;
    }

    .blogs-section-premium .container {
      position: relative;
      z-index: 10;
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .blogs-header {
      text-align: center;
      max-width: 800px;
      margin: 0 auto 56px;
      position: relative;
      z-index: 5;
    }
    .blogs-header .sec-label {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      color: #ff6b2c;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 4px;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    .blogs-header .sec-label::before,
    .blogs-header .sec-label::after {
      content: '';
      width: 28px; height: 1px;
      background: linear-gradient(90deg, transparent, var(--orange) 50%, transparent);
    }
    .blogs-header h2 {
      font-size: var(--fs-h2) !important;
      color: #fff;
      font-weight: 800;
      letter-spacing: -1.5px !important;
      line-height: var(--lh-snug) !important;
      margin: 0 0 18px 0;
    }
    .blogs-header h2 span {
      color: #ff6b2c;
    }
    .blogs-header p {
      font-size: var(--fs-lead) !important;
      color: rgba(255,255,255,0.6);
      line-height: 1.6 !important;
      max-width: 580px;
      margin: 0 auto;
    }
    
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      position: relative;
      z-index: 5;
    }
    
    .blog-card {
      background: linear-gradient(135deg, rgba(8, 22, 38, 0.95) 0%, rgba(4, 12, 22, 0.98) 100%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      text-decoration: none;
      color: inherit;
    }
    
    .blog-card:hover {
      transform: translateY(-6px);
      border-color: rgba(255, 107, 44, 0.35);
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 107, 44, 0.08);
    }
    
    .blog-image-wrap {
      width: 100%;
      height: 200px;
      overflow: hidden;
      position: relative;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    
    .blog-image-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    
    .blog-card:hover .blog-image-wrap img {
      transform: scale(1.05);
    }
    
    .blog-content {
      padding: 24px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      gap: 12px;
    }
    
    .blog-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .blog-tag {
      font-size: 10px;
      font-weight: 700;
      color: #ff6b2c;
      background: rgba(255, 107, 44, 0.08);
      border: 1px solid rgba(255, 107, 44, 0.15);
      border-radius: 4px;
      padding: 4px 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .blog-date {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.4);
      font-weight: 500;
    }
    
    .blog-content h3 {
      font-size: 19px !important;
      color: #fff;
      font-weight: 700 !important;
      margin: 0;
      line-height: 1.35 !important;
      transition: color 0.3s ease;
    }
    
    .blog-card:hover h3 {
      color: #ff8d4d;
    }
    
    .blog-content p {
      font-size: 14px !important;
      color: rgba(255, 255, 255, 0.55) !important;
      line-height: 1.55 !important;
      margin: 0;
    }
    
    .blog-link {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #ff6b2c;
      font-weight: 700;
      font-size: 13px;
      transition: gap 0.3s ease, color 0.3s ease;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,0.05);
    }
    
    .blog-card:hover .blog-link {
      gap: 10px;
      color: #ff8d4d;
    }
    
    .blog-link svg {
      width: 14px;
      height: 14px;
      transition: transform 0.3s ease;
    }
    
    @media (max-width: 980px) {
      .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }
    }
    @media (max-width: 640px) {
      .blog-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .blogs-section-premium {
        padding: 75px 0 50px;
      }
    }
  

    #exit-popup { display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; padding:16px; }
    #exit-popup.eip-open { display:flex; }
    .eip-overlay { position:absolute; inset:0; background:rgba(5,12,28,0.87); backdrop-filter:blur(6px); }
    .eip-wrap { position:relative; z-index:1; max-width:900px; width:100%; }
    .eip-close { position:absolute; top:14px; right:14px; z-index:10; background:rgba(0,0,0,0.08); border:none; width:30px; height:30px; border-radius:50%; font-size:14px; color:#374151; cursor:pointer; display:none; align-items:center; justify-content:center; transition:background 0.2s; }
    #exit-popup.eip-open .eip-close { display:flex; }
    .eip-close:hover { background:#334155; }
    .eip-card { position:relative; display:grid; grid-template-columns:1fr 1fr; width:100%; border-radius:20px; overflow:hidden; box-shadow:0 48px 120px rgba(0,0,0,0.6); animation:eip-in 0.38s cubic-bezier(.22,.68,0,1.2) both; }
    @keyframes eip-in { from{opacity:0;transform:scale(0.88) translateY(20px)} to{opacity:1;transform:none} }
    .eip-left { background: linear-gradient(rgba(13,46,78,0.88),rgba(13,46,78,0.88)), url("/pricing_hero_bg.png") center/cover no-repeat; padding:44px 40px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
    .eip-left::after { content:''; position:absolute; inset:0; background:url("/transformer-option-spreads-content/WhatsApp Image 2026-03-10 at 5.35.08 PM (1).jpeg") center/cover no-repeat; opacity:0.12; mix-blend-mode:overlay; pointer-events:none; }
    .eip-left > * { position:relative; z-index:1; }
    .eip-logo-row { margin-bottom:28px; overflow:visible; }
    .eip-logo { height:40px; width:auto; transform:scale(5); transform-origin:left center; filter:brightness(0) invert(1); display:block; }
    .eip-badge { display:inline-block; width:fit-content; background:#c8420a; color:#fff; font-size:9px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; padding:5px 14px; border-radius:30px; margin-bottom:18px; }
    .eip-headline { font-family:'DM Sans',sans-serif; font-size:22px; font-weight:800; color:#fff; margin:0 0 12px; line-height:1.25; }
    .eip-tagline { font-size:13.5px; color:rgba(255,255,255,0.72); margin:0 0 20px; line-height:1.55; }
    .eip-bullets { list-style:none; padding:0; margin:0 0 24px; }
    .eip-bullets li { font-size:13px; color:rgba(255,255,255,0.88); margin-bottom:9px; font-weight:500; }
    .eip-date { font-size:12px; color:#e07040; font-weight:700; }
    .eip-right { background:#fff; padding:44px 40px; display:flex; flex-direction:column; justify-content:center; position:relative; }
    .eip-form-title { font-family:'DM Sans',sans-serif; font-size:22px; font-weight:800; color:#0d2040; margin:0 0 8px; line-height:1.2; }
    .eip-form-sub { font-size:13.5px; color:#6b7280; margin:0 0 26px; }
    .eip-field { margin-bottom:14px; }
    .eip-input { width:100%; padding:14px 16px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14.5px; font-family:'DM Sans',sans-serif; color:#1a202c; outline:none; transition:border-color 0.2s; box-sizing:border-box; }
    .eip-input:focus { border-color:#c8420a; box-shadow:0 0 0 3px rgba(200,66,10,0.1); }
    .eip-input::placeholder { color:#a0aec0; }
    .eip-submit { width:100%; padding:16px; background:#c8420a; color:#fff; font-family:'DM Sans',sans-serif; font-size:15px; font-weight:800; border:none; border-radius:10px; cursor:pointer; margin-top:6px; transition:background 0.2s,transform 0.15s; }
    .eip-submit:hover { background:#e04d0e; transform:translateY(-2px); }
    .eip-dismiss { font-size:12px; color:#a0aec0; cursor:pointer; margin:16px 0 0; text-align:center; text-decoration:underline; }
    .eip-dismiss:hover { color:#718096; }
    @media(max-width:640px) { .eip-card{grid-template-columns:1fr} .eip-left,.eip-right{padding:32px 28px} .eip-logo{transform:scale(4)} .eip-logo-row{margin-bottom:40px} }

    /* ── FAQ shared label/title styles ── */
    .faq-section .sec-label {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: var(--orange);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 16px;
    }
    .faq-section .sec-label::before,
    .faq-section .sec-label::after {
      content: '';
      width: 30px;
      height: 2px;
      background: var(--orange);
    }
    .faq-section .sec-title {
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(28px, 3.2vw, 44px);
      font-weight: 700;
      line-height: 1.15;
      color: var(--teal-900);
    }
    .faq-section .body-para {
      font-size: 15px;
      color: var(--text-mid);
      line-height: 1.8;
    }

    /* ── FAQ ── */
    .faq-section {
      background: #ffffff;
      padding: 48px 0 44px;
      position: relative;
      overflow: hidden;
    }
    .faq-section::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }
    .faq-section>.container {
      position: relative;
      z-index: 1
    }
    .faq-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 0.8fr 1.2fr;
      gap: 56px;
      align-items: start;
    }
    .faq-head-col {
      position: sticky;
      top: 110px;
    }
    .faq-list {
      margin-top: 0;
      display: flex;
      flex-direction: column
    }
    @media (max-width: 900px) {
      .faq-inner { grid-template-columns: 1fr; gap: 24px; }
      .faq-head-col { position: static; }
      .faq-head-col .sec-label { justify-content: center !important; }
      .faq-head-col .sec-title { text-align: center !important; }
      .faq-head-col .body-para { text-align: center !important; max-width: 520px !important; margin: 10px auto 0 !important; }
    }
    .faq-item {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1)
    }
    .faq-item:first-child {
      border-top: 1px solid rgba(0, 0, 0, 0.1)
    }
    .faq-q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 13px 0;
      background: none;
      border: none;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      font-size: 18px;
      font-weight: 600;
      color: var(--text-dark);
      text-align: left;
      gap: 16px;
      transition: color 0.2s;
    }
    .faq-q:hover { color: var(--orange) }
    .faq-chevron {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      border: 1.5px solid rgba(0, 0, 0, 0.25);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s, background 0.2s, border-color 0.2s;
    }
    .faq-chevron svg {
      width: 10px;
      height: 10px;
      stroke: var(--text-dark);
      fill: none;
      stroke-width: 2.5;
      transition: stroke 0.2s
    }
    .faq-item.open .faq-chevron {
      transform: rotate(180deg);
      background: var(--orange);
      border-color: var(--orange)
    }
    .faq-item.open .faq-chevron svg { stroke: #fff }
    .faq-item.open .faq-q { color: var(--orange) }
    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, padding 0.3s;
    }
    .faq-item.open .faq-a { max-height: 300px }
    .faq-a-inner {
      font-size: 14.5px;
      color: var(--text-mid);
      line-height: 1.8;
      padding-bottom: 20px;
    }

    /* ═══════════════════════════════════════════════════════════
       MOBILE OPTIMIZATION ENHANCEMENTS
       ═══════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      html, body {
        max-width: 100%;
        overflow-x: hidden !important;
      }
      /* Hero Section Mobile Centering & Gap Removal */
      .hv2-inner {
        padding: 85px 20px 20px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        align-items: center !important;
        text-align: center !important;
      }
      .hv2-left {
        max-width: 100% !important;
        width: 100% !important;
        padding: 10px 0 0 !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
      }
      .hv2-badge {
        margin-left: auto !important;
        margin-right: auto !important;
      }
      .hv2-h1 {
        font-size: clamp(28px, 7.5vw, 40px) !important;
        line-height: 1.1 !important;
        letter-spacing: -1px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        text-align: center !important;
      }
      .hv2-h1 em {
        display: inline-block !important;
        margin-top: 4px !important;
      }
      .hv2-sub {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 24px !important;
        text-align: center !important;
      }
      .hv2-ctas {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
      }
      .hv2-ctas a, .hv2-ctas button {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
      }
      .hv2-trust {
        justify-content: center !important;
        width: 100% !important;
      }
      .hero-mountain {
        position: relative !important;
        margin-top: 20px !important;
        height: auto !important;
        min-height: auto !important;
        width: 100% !important;
        padding: 0 12px 70px 12px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: visible !important;
      }
      .hero-visual-stack {
        position: relative !important;
        width: 100% !important;
        max-width: 420px !important;
        margin: 0 auto !important;
      }
      .hero-img-back {
        width: 82% !important;
        margin-left: auto !important;
        display: block !important;
        border-radius: 12px !important;
      }
      .hero-img-front {
        position: absolute !important;
        width: 82% !important;
        left: 0 !important;
        top: 35% !important;
        transform: translateY(0) !important;
        bottom: auto !important;
        border-radius: 10px !important;
        box-shadow: 0 16px 40px rgba(0,0,0,0.6) !important;
      }

      /* TradeHacker Section Centering */
      .tradehacker-content {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
      }
      .tradehacker-content h2, 
      .tradehacker-content p, 
      .th-body {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      .th-pills {
        justify-content: center !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
      }
      .th-pill {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
      }
      .th-buttons {
        justify-content: center !important;
        width: 100% !important;
        flex-direction: column !important;
      }
      .th-btn-spotify, .th-btn-apple {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
      }

      /* Global Section Headers & Layout Centering */
      .eco-v2-hdr, .eco-v2-hdr-left, .pw-header {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
      }
      .eco-v2-eyebrow, .pw-eyebrow {
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      .eco-v2-title, .pw-title, .eco-v2-sub, .pw-sub {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      .eco-v2-wrap, .pw-container, .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
      }
    }

    @media (max-width: 480px) {
      .hv2-h1 {
        font-size: clamp(24px, 7vw, 32px) !important;
      }
      .hv2-inner {
        padding: 85px 16px 20px !important;
      }
      .hero-mountain {
        min-height: 220px !important;
        margin-top: 12px !important;
      }
      .eco-v2-wrap, .pw-container, .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
    }