:root{
  --bg:#000000!important;
  --bg2:#050505!important;
  --bg3:#121212!important;
  --accent:#D4A017!important;
  --al:#D4A017!important;
  --em:#FFE082!important;
  --glow:rgba(212,160,23,.7)!important;
  --accent-muted:rgba(212,160,23,.12)!important;
  --accent-glow:rgba(240,193,75,.30)!important;
  --gold:#FFD700!important;
}
html,body{background:#000000!important;color:#fff}

      :root {
        --bg: #000000;
        --bg2: #050505;
        --bg3: #121212;
        --glass: rgba(255, 255, 255, .03);
        --border: rgba(255, 255, 255, .08);
        --border2: rgba(255, 255, 255, .12);
        --accent: #D4A017;
        --al: #D4A017;
        --em: #FFE082;
        --glow: rgba(212, 160, 23, .7);
        --accent-muted: rgba(212, 160, 23, .12);
        --accent-glow: rgba(240, 193, 75, .30);
        --gold: #FFD700;
        --blue: #3b82f6;
        --t1: #FFFFFF;
        --t2: #A0A0A0;
        --t3: #555555;
        --heading: 'Montserrat', 'Rethink Sans', sans-serif;
        --body: 'Rethink Sans', sans-serif;
      }

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

      html {
        scroll-behavior: smooth;
        scroll-padding-top: 80px;
        overflow-x: hidden
      }

      body {
        font-family: var(--body);
        background: var(--bg);
        color: var(--t1);
        font-size: 15px;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
        position: relative
      }

      a {
        text-decoration: none;
        color: inherit
      }

      button {
        cursor: pointer;
        border: none;
        font-family: var(--body);
        background: none
      }

      ul {
        list-style: none
      }

      img {
        max-width: 100%;
        display: block
      }

      .ctn {
        max-width: 1080px;
        margin: 0 auto;
        padding: 0 28px
      }

      /* ===== AMBIENT GLOWS ===== */
      .bg-canvas {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: .04
      }

      .glow {
        position: absolute;
        pointer-events: none;
        border-radius: 50%;
        filter: blur(100px);
        z-index: 0
      }

      .glow-1 {
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(212, 160, 23, .07), transparent 70%);
        top: -100px;
        left: -150px
      }

      .glow-2 {
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(240, 193, 75, .05), transparent 70%);
        top: 400px;
        right: -200px
      }

      .glow-3 {
        width: 700px;
        height: 500px;
        background: radial-gradient(circle, rgba(212, 160, 23, .05), transparent 70%);
        top: 1400px;
        left: -250px
      }

      .glow-4 {
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(240, 193, 75, .04), transparent 70%);
        top: 2800px;
        right: -180px
      }

      .glow-5 {
        width: 600px;
        height: 400px;
        background: radial-gradient(circle, rgba(212, 160, 23, .06), transparent 70%);
        top: 4200px;
        left: 50%;
        transform: translateX(-50%)
      }

      .glow-6 {
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(212, 160, 23, .05), transparent 70%);
        top: 5600px;
        left: -150px
      }

      /* Hero decorative elements — oversized, 3D */

      /* ===== NAV ===== */
      .nav {
        position: fixed;
        top: 24px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
        width: 100%;
        max-width: 1080px;
        padding: 0 28px;
        transition: all .4s;
        pointer-events: none
      }

      .nav .ctn {
        display: flex;
        align-items: center;
        position: relative;
        padding: 10px 8px 10px 20px;
        border-radius: 100px;
        background: rgba(255, 255, 255, .04);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 0 4px 24px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .06);
        pointer-events: all;
        transition: all .4s
      }

      .nav.s .ctn {
        background: rgba(8, 8, 8, .7);
        border-color: rgba(255, 255, 255, .1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08)
      }

      .nav.s {
        top: 12px
      }

      .n-logo-img {
        height: 32px;
        width: auto
      }

      .n-links {
        display: flex;
        align-items: center;
        gap: 2px;
        margin: 0 auto
      }

      .n-links a {
        font-size: 12.5px;
        font-weight: 500;
        color: var(--t2);
        padding: 6px 14px;
        border-radius: 100px;
        transition: all .2s
      }

      .n-links a:hover {
        color: var(--t1);
        background: rgba(255, 255, 255, .06)
      }

      .n-right {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: 0
      }

      .n-cta {
        padding: 9px 22px;
        background: rgba(212, 160, 23, .9);
        color: #fff;
        font-weight: 700;
        font-size: 12px;
        border-radius: 100px;
        transition: all .3s;
        font-family: var(--heading);
        display: inline-block;
        border: 1px solid rgba(255, 255, 255, .15);
        text-transform: uppercase;
        letter-spacing: .03em;
        position: relative;
        overflow: hidden;
        isolation: isolate
      }

      .n-cta::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, .06) 40%, transparent 100%);
        pointer-events: none;
        transition: opacity .3s
      }

      .n-cta::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 100px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .1);
        pointer-events: none
      }

      .n-cta:hover {
        background: rgba(212, 160, 23, .95);
        box-shadow: 0 0 20px rgba(212, 160, 23, .2)
      }

      .n-cta:hover::before {
        opacity: .8
      }

      .mob-btn {
        display: none;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 10px;
        color: var(--t1);
        align-items: center;
        justify-content: center;
        font-size: 15px
      }

      /* Mobile menu drawer */
      .mob-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 200;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s
      }

      .mob-overlay.open {
        opacity: 1;
        pointer-events: all
      }

      .mob-drawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        background: rgba(12, 12, 12, .97);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border-left: 1px solid rgba(255, 255, 255, .08);
        z-index: 201;
        transform: translateX(100%);
        transition: transform .3s cubic-bezier(.22, 1, .36, 1);
        display: flex;
        flex-direction: column;
        padding: 24px
      }

      .mob-drawer.open {
        transform: translateX(0)
      }

      .mob-drawer-close {
        align-self: flex-end;
        width: 36px;
        height: 36px;
        border: 1px solid var(--border2);
        border-radius: 10px;
        color: var(--t1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        margin-bottom: 24px
      }

      .mob-drawer-links {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1
      }

      .mob-drawer-links a {
        font-size: 15px;
        font-weight: 500;
        color: var(--t2);
        padding: 12px 16px;
        border-radius: 12px;
        transition: all .2s
      }

      .mob-drawer-links a:hover,
      .mob-drawer-links a:active {
        color: var(--t1);
        background: rgba(255, 255, 255, .06)
      }

      .mob-drawer-cta {
        margin-top: auto;
        padding: 18px 1rem;
        background: rgba(212, 160, 23, .85);
        color: #fff;
        font-weight: 700;
        font-size: 15px;
        border-radius: 100px;
        text-align: center;
        font-family: var(--heading);
        text-transform: uppercase;
        letter-spacing: .03em;
        border: 1px solid rgba(255, 255, 255, .1);
        position: relative;
        overflow: hidden;
        isolation: isolate;
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%)
      }

      .mob-drawer-cta::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, .05) 40%, transparent 100%);
        pointer-events: none;
        border-radius: 100px
      }

      .mob-drawer-cta::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 100px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .15);
        pointer-events: none
      }

      /* ===== HERO ===== */
      /* HERO V2 — ORGANIC GRADIENT */
      .hero-v2 {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        overflow: hidden;
        padding: 140px 0 60px;
        background: #000000
      }

      .hero-v2::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        height: 60%;
        background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(240, 193, 75, .18) 0%, transparent 70%);
        pointer-events: none;
        z-index: 0
      }

      /* Organic gradient blobs */
      .hv2-gradient {
        position: absolute;
        inset: 0;
        overflow: hidden;
        z-index: 0;
        display: flex;
        align-items: stretch
      }

      /* Organic emerald orbs */
      .hv2-orb {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        will-change: transform
      }

      .hv2-orb-1 {
        width: 900px;
        height: 900px;
        bottom: -25%;
        left: 0%;
        background: radial-gradient(circle, rgba(240, 193, 75, .4) 0%, rgba(240, 193, 75, .15) 30%, rgba(212, 160, 23, .05) 55%, transparent 70%);
        filter: blur(40px);
        animation: orbDrift1 20s ease-in-out infinite
      }

      .hv2-orb-2 {
        width: 700px;
        height: 700px;
        top: -15%;
        right: 0%;
        background: radial-gradient(circle, rgba(240, 193, 75, .25) 0%, rgba(240, 193, 75, .1) 35%, transparent 65%);
        filter: blur(50px);
        animation: orbDrift2 26s ease-in-out 3s infinite
      }

      .hv2-orb-3 {
        width: 600px;
        height: 600px;
        top: 20%;
        left: 30%;
        background: radial-gradient(circle, rgba(240, 193, 75, .2) 0%, rgba(212, 160, 23, .08) 40%, transparent 65%);
        filter: blur(55px);
        animation: orbDrift3 22s ease-in-out 6s infinite
      }

      @keyframes orbDrift1 {

        0%,
        100% {
          transform: translate(0, 0) scale(1)
        }

        33% {
          transform: translate(50px, 30px) scale(1.06)
        }

        66% {
          transform: translate(-30px, 50px) scale(.95)
        }
      }

      @keyframes orbDrift2 {

        0%,
        100% {
          transform: translate(0, 0) scale(1)
        }

        33% {
          transform: translate(-40px, -35px) scale(1.08)
        }

        66% {
          transform: translate(35px, 25px) scale(.94)
        }
      }

      @keyframes orbDrift3 {

        0%,
        100% {
          transform: translate(0, 0) scale(1)
        }

        33% {
          transform: translate(30px, -40px) scale(1.05)
        }

        66% {
          transform: translate(-45px, 30px) scale(.97)
        }
      }

      /* Soft vignette — darkens edges, brightens center for video contrast */
      .hv2-vignette {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 60% 50%, transparent 30%, rgba(8, 8, 8, .6) 70%, rgba(8, 8, 8, .9) 100%);
        pointer-events: none;
        z-index: 1
      }

      /* Vertical light curtain rays */

      /* Core glow — center spotlight */

      /* Secondary glow — bottom warmth */

      /* Top fade to black — like the reference */

      /* Side fades — black edges like reference */

      /* Financial grid background */
      .hv2-grid-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden
      }

      .hv2-grid-bg canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: .12
      }

      /* Hero micro-stats */
      .hv2-stats {
        display: flex;
        gap: 6px;
        flex-wrap: nowrap;
        margin-top: 16px
      }

      .hv2-stat {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        flex: 1;
        background: rgba(255, 255, 255, .03);
        border: 1px solid rgba(255, 255, 255, .06);
        border-radius: 10px;
        backdrop-filter: blur(8px);
        transition: all .3s
      }

      .hv2-stat:hover {
        background: rgba(212, 160, 23, .06);
        border-color: rgba(212, 160, 23, .15)
      }

      .hv2-stat-val {
        font-family: var(--heading);
        font-size: 13px;
        font-weight: 800;
        color: #fff
      }

      .hv2-stat-val .hv2-stat-gr {
        background: linear-gradient(135deg, #D4A017, #F0C14B);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
      }

      .hv2-stat-lbl {
        font-size: 10px;
        color: rgba(255, 255, 255, .4);
        line-height: 1.2
      }

      .hv2-stat-icon {
        width: 16px;
        height: 16px;
        color: var(--al);
        flex-shrink: 0;
        opacity: .7
      }

      /* Grain overlay for texture */
      .hv2-grain {
        display: none
      }

      /* Content layout */
      .hv2-content {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1fr 2.4fr;
        gap: 40px;
        align-items: start;
        max-width: 1080px;
        margin: 0 auto;
        padding: 0 28px;
        width: 100%
      }

      .hv2-text {
        display: flex;
        flex-direction: column;
        gap: 0
      }

      .hv2-h1 {
        font-family: 'Rethink Sans', var(--heading), sans-serif;
        font-size: clamp(42px, 5.5vw, 80px);
        font-weight: 300;
        line-height: .82;
        letter-spacing: -.02em;
        color: #fff
      }

      .hv2-accent {
        background: linear-gradient(135deg, #D4A017 0%, #F0C14B 50%, #FFE082 100%);
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: hv2Shimmer 4s ease infinite;
        font-weight: 700;
        font-size: 1.15em
      }

      @keyframes hv2Shimmer {

        0%,
        100% {
          background-position: 0% 50%
        }

        50% {
          background-position: 100% 50%
        }
      }

      .hv2-p {
        font-size: 15px;
        color: rgba(255, 255, 255, .45);
        line-height: 1.75;
        max-width: 420px;
        margin-top: 28px;
        letter-spacing: .01em
      }

      .hv2-p strong {
        color: rgba(255, 255, 255, .65);
        font-weight: 600
      }

      .hv2-cta-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-top: 36px;
        width: fit-content
      }

      .hv2-cta-row .btn-hero {
        width: 100%;
        justify-content: center
      }

      .hv2-cta-row .hv2-live-box {
        margin-top: 0;
        width: 100%
      }

      .hv2-cta-row .hv2-live-inner {
        width: 100%;
        justify-content: center
      }

      .lang-switcher {
        position: relative;
        flex-shrink: 0
      }

      .lang-switcher-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 100px;
        background: rgba(255, 255, 255, .04);
        color: var(--t1);
        cursor: pointer;
        font: inherit;
        font-size: 14px;
        line-height: 1;
        transition: background .15s, border-color .15s
      }

      .lang-switcher-btn:hover,
      .lang-switcher-btn[aria-expanded="true"] {
        background: rgba(255, 255, 255, .08);
        border-color: rgba(255, 255, 255, .24)
      }

      .lang-switcher-btn .lang-chevron {
        opacity: .55;
        transition: transform .15s
      }

      .lang-switcher-btn[aria-expanded="true"] .lang-chevron {
        transform: rotate(180deg)
      }

      .lang-switcher-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 210px;
        max-height: 70vh;
        overflow-y: auto;
        padding: 6px;
        background: #0f1316;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 12px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
        display: none;
        z-index: 200
      }

      .lang-switcher-menu.is-open {
        display: block
      }

      .lang-switcher-menu a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 8px;
        color: var(--t2);
        text-decoration: none;
        font-size: 14px;
        white-space: nowrap;
        transition: background .12s, color .12s
      }

      .lang-switcher-menu a:hover,
      .lang-switcher-menu a.is-active {
        background: rgba(255, 255, 255, .06);
        color: var(--t1)
      }

      .lang-switcher-btn .lang-flag {
        font-size: 16px;
        line-height: 1
      }

      .lang-switcher-menu a .lang-flag {
        font-size: 18px;
        line-height: 1
      }

      .hv2-proof {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        color: var(--t3)
      }

      .hv2-proof-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--al);
        animation: proofPulse 2s ease infinite
      }

      /* Live counter box — premium pill */
      .hv2-live-box {
        position: relative;
        margin-top: 28px
      }

      .hv2-live-spot {
        display: none
      }

      .hv2-live-inner {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 10px 20px 10px 14px;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 100px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        transition: all .3s ease
      }

      .hv2-live-inner:hover {
        background: rgba(255, 255, 255, .07);
        border-color: rgba(255, 255, 255, .12)
      }

      .hv2-live-inner::after {
        display: none
      }

      /* Stacked avatars */
      .hv2-live-avatars {
        display: flex;
        align-items: center;
        flex-shrink: 0
      }

      .hv2-live-avatars span {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid var(--bg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 600;
        color: #fff;
        flex-shrink: 0
      }

      .hv2-live-avatars span:not(:first-child) {
        margin-left: -10px
      }

      .hv2-live-avatars span:nth-child(1) {
        background: linear-gradient(135deg, #D4A017, #F0C14B)
      }

      .hv2-live-avatars span:nth-child(2) {
        background: linear-gradient(135deg, #B8860B, #D4A017)
      }

      .hv2-live-avatars span:nth-child(3) {
        background: linear-gradient(135deg, #A67C00, #F0C14B)
      }

      .hv2-live-avatars .avatar-more {
        background: rgba(255, 255, 255, .1);
        color: var(--t2);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: -.2px
      }

      /* Status dot + text */
      .hv2-live-status {
        display: flex;
        align-items: center;
        gap: 10px
      }

      .hv2-live-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--al);
        flex-shrink: 0;
        box-shadow: 0 0 6px rgba(212, 160, 23, .5);
        animation: liveDotPulse 2s ease-in-out infinite
      }

      @keyframes liveDotPulse {

        0%,
        100% {
          box-shadow: 0 0 6px rgba(212, 160, 23, .4)
        }

        50% {
          box-shadow: 0 0 14px rgba(212, 160, 23, .7)
        }
      }

      .hv2-live-info {
        display: flex;
        align-items: baseline;
        gap: 6px
      }

      .hv2-live-count {
        font-family: 'DM Mono', var(--heading), monospace;
        font-size: 15px;
        font-weight: 500;
        color: #fff;
        line-height: 1
      }

      .hv2-live-label {
        font-size: 12px;
        color: rgba(255, 255, 255, .45);
        font-weight: 400
      }

      .hv2-live-chart {
        display: none
      }

      [data-theme="light"] .hv2-live-inner {
        background: rgba(255, 255, 255, .5);
        border-color: rgba(40, 40, 40, .1);
        backdrop-filter: blur(20px)
      }

      [data-theme="light"] .hv2-live-inner:hover {
        background: rgba(255, 255, 255, .65)
      }

      [data-theme="light"] .hv2-live-avatars span {
        border-color: #f0f5f2
      }

      [data-theme="light"] .hv2-live-avatars .avatar-more {
        background: rgba(0, 0, 0, .06);
        color: rgba(0, 0, 0, .5)
      }

      [data-theme="light"] .hv2-live-count {
        color: #1a1408
      }

      [data-theme="light"] .hv2-live-label {
        color: rgba(14, 14, 14, .45)
      }

      [data-theme="light"] .hv2-live-spot {
        background: radial-gradient(circle, rgba(212, 160, 23, .2) 0%, transparent 65%)
      }

      .hv2-video {
        position: relative
      }

      /* Light theme */
      [data-theme="light"] .hero-v2 {
        background: #f0f5f2
      }

      [data-theme="light"] .hv2-orb-1 {
        background: radial-gradient(circle, rgba(212, 160, 23, .18) 0%, rgba(212, 160, 23, .06) 40%, transparent 65%)
      }

      [data-theme="light"] .hv2-orb-2 {
        background: radial-gradient(circle, rgba(212, 160, 23, .12) 0%, transparent 60%)
      }

      [data-theme="light"] .hv2-orb-3 {
        background: radial-gradient(circle, rgba(240, 193, 75, .1) 0%, transparent 55%)
      }

      [data-theme="light"] .hv2-vignette {
        background: radial-gradient(ellipse at 60% 50%, transparent 35%, rgba(242, 247, 244, .5) 70%, rgba(242, 247, 244, .85) 100%)
      }

      [data-theme="light"] .hv2-h1 {
        color: #1a1408
      }

      [data-theme="light"] .hv2-p {
        color: rgba(14, 14, 14, .5)
      }

      [data-theme="light"] .hv2-p strong {
        color: rgba(14, 14, 14, .7)
      }

      [data-theme="light"] .hv2-grain {
        opacity: .06;
        mix-blend-mode: multiply
      }

      @media(max-width:900px) {
        .hv2-content {
          grid-template-columns: 1fr;
          gap: 32px;
          padding: 0 24px
        }

        .hv2-text {
          text-align: center;
          align-items: center;
          order: 1
        }

        .hv2-video {
          order: 2
        }

        .hv2-actions {
          justify-content: center
        }

        .hv2-p {
          max-width: 480px
        }

        .hv2-stats {
          justify-content: center
        }
      }

      @media(max-width:500px) {
        .hero-v2 {
          padding: 140px 0 40px;
          min-height: auto
        }

        .hv2-h1 {
          font-size: 24px
        }

        .hv2-stats {
          flex-wrap: wrap;
          gap: 8px
        }

        .hv2-stat {
          min-width: calc(50% - 4px)
        }
      }

      .btn {
        padding: 14px 36px;
        font-weight: 600;
        font-size: 14px;
        border-radius: 100px;
        transition: all .4s cubic-bezier(.22, 1, .36, 1);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--heading);
        letter-spacing: .5px;
        position: relative;
        overflow: hidden
      }

      .btn-a {
        background: rgba(212, 160, 23, .15);
        color: #fff;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, .2);
        box-shadow: 0 8px 32px rgba(31, 38, 135, .15), inset 0 1px 0 rgba(255, 255, 255, .25)
      }

      .btn-a::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(180deg, rgba(255, 255, 255, .2), transparent);
        border-radius: 50px 50px 0 0;
        pointer-events: none
      }

      .btn-a:hover {
        background: rgba(212, 160, 23, .3);
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, .35);
        box-shadow: 0 12px 40px rgba(212, 160, 23, .25), inset 0 1px 0 rgba(255, 255, 255, .3)
      }

      .btn-glow {
        box-shadow: 0 8px 32px rgba(212, 160, 23, .2), 0 0 60px rgba(212, 160, 23, .08), inset 0 1px 0 rgba(255, 255, 255, .25)
      }

      /* HERO BUTTON — liquid glass green */
      .btn.btn-hero {
        padding: 18px 40px;
        font-size: 15px;
        font-weight: 700;
        gap: 10px;
        white-space: nowrap;
        overflow: hidden;
        transition: all .3s;
        background: rgba(212, 160, 23, .85);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 100px;
        text-transform: uppercase;
        letter-spacing: .03em;
        isolation: isolate;
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
        box-shadow: none
      }

      .btn.btn-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, .05) 40%, transparent 100%);
        pointer-events: none;
        transition: opacity .3s;
        border-radius: 100px;
        height: auto
      }

      .btn.btn-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 100px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .15);
        pointer-events: none;
        background: none;
        top: 0;
        left: 0;
        right: 0;
        height: auto
      }

      .btn.btn-hero:hover {
        background: rgba(212, 160, 23, .95);
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, .15);
        box-shadow: none
      }

      .btn.btn-hero:hover::before {
        opacity: .8
      }

      .btn.btn-hero:active {
        transform: translateY(0)
      }

      @keyframes pulse-glow {

        0%,
        100% {
          box-shadow: 0 0 20px var(--accent-glow)
        }

        50% {
          box-shadow: 0 0 40px rgba(212, 160, 23, .55)
        }
      }

      .btn-hero-arrow {
        transition: transform .35s cubic-bezier(.22, 1, .36, 1)
      }

      .btn-hero:hover .btn-hero-arrow {
        transform: translateX(5px)
      }

      .btn-glow:hover {
        box-shadow: 0 16px 48px rgba(212, 160, 23, .3), 0 0 80px rgba(212, 160, 23, .1), inset 0 1px 0 rgba(255, 255, 255, .3)
      }

      .btn-g {
        background: rgba(255, 255, 255, .08);
        color: var(--t1);
        border: 1px solid rgba(255, 255, 255, .15);
        backdrop-filter: blur(16px) saturate(150%);
        -webkit-backdrop-filter: blur(16px) saturate(150%);
        border-radius: 50px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15)
      }

      .btn-g:hover {
        border-color: rgba(255, 255, 255, .25);
        background: rgba(255, 255, 255, .12);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 24px rgba(0, 0, 0, .1)
      }

      /* VSL Video Embed */
      .vsl-wrap {
        position: relative;
        width: 100%;
        animation: fu .6s ease .24s both
      }

      .vsl-frame {
        position: relative;
        border-radius: 18px;
        overflow: hidden;
        aspect-ratio: 16/9;
        background: rgba(5, 5, 5, .65);
        backdrop-filter: blur(100px) saturate(110%) brightness(60%);
        -webkit-backdrop-filter: blur(100px) saturate(110%) brightness(60%);
        border: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 0 20px 60px rgba(0, 0, 0, .4), 0 0 0 .5px rgba(255, 255, 255, .06), 0 0 80px rgba(212, 160, 23, .06), inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .2);
        transition: all .5s cubic-bezier(.22, 1, .36, 1)
      }

      .vsl-frame:hover {
        border-color: rgba(255, 255, 255, .18);
        box-shadow: 0 28px 80px rgba(0, 0, 0, .45), 0 0 0 .5px rgba(255, 255, 255, .08), 0 0 100px rgba(212, 160, 23, .1), inset 0 1px 0 rgba(255, 255, 255, .15);
        transform: translateY(-4px)
      }

      .vsl-glow-tl,
      .vsl-glow-br {
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        pointer-events: none;
        z-index: 1;
        filter: blur(60px);
        opacity: .5;
        animation: vslPulse 4s ease-in-out infinite
      }

      .vsl-glow-tl {
        top: -60px;
        left: -60px;
        background: rgba(212, 160, 23, .18)
      }

      .vsl-glow-br {
        bottom: -60px;
        right: -60px;
        background: rgba(212, 160, 23, .22);
        animation-delay: 2s
      }

      @keyframes vslPulse {

        0%,
        100% {
          opacity: .4;
          transform: scale(1)
        }

        50% {
          opacity: .7;
          transform: scale(1.15)
        }
      }

      /* Glass layers */
      .vsl-frame::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: 10px;
        backdrop-filter: blur(20px) saturate(140%) brightness(1.03);
        -webkit-backdrop-filter: blur(20px) saturate(140%) brightness(1.03);
      }

      .vsl-frame::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        border-radius: 10px;
        background: linear-gradient(175deg, rgba(255, 255, 255, .06) 0%, transparent 30%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(255, 255, 255, .02);
      }

      /* Specular top line */
      .vsl-spec {
        position: absolute;
        top: -1px;
        left: 12%;
        right: 12%;
        height: 1px;
        z-index: 3;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), rgba(255, 255, 255, .3), rgba(255, 255, 255, .18), transparent);
      }

      /* Placeholder state */
      .vsl-placeholder {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        background: transparent;
        cursor: pointer
      }

      .vsl-play {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .1);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .35s cubic-bezier(.22, 1, .36, 1);
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .08);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }

      .vsl-play:hover {
        background: rgba(212, 160, 23, .12);
        border-color: rgba(212, 160, 23, .2);
        transform: scale(1.08);
        box-shadow: 0 6px 28px rgba(212, 160, 23, .15), inset 0 1px 0 rgba(255, 255, 255, .1)
      }

      .vsl-play svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: #fff;
        stroke-width: 1.5;
        margin-left: 3px
      }

      .vsl-label {
        font-size: 12px;
        color: var(--t3);
        font-weight: 500;
        letter-spacing: .3px
      }

      /* When video is embedded (replace placeholder with iframe) */
      .vsl-frame iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
        z-index: 2;
        border-radius: 10px
      }

      /* Hero half-moon glow */

      @keyframes heroSpotDrift {

        0%,
        100% {
          transform: translate(0, 0) scale(1)
        }

        50% {
          transform: translate(-20px, 15px) scale(1.05)
        }
      }

      .hero-glow::before {
        content: '';
        position: absolute;
        bottom: 42%;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(212, 160, 23, .3), var(--al), rgba(212, 160, 23, .3), transparent);
        border-radius: 100px;
        box-shadow: 0 0 20px rgba(212, 160, 23, .3), 0 0 60px rgba(212, 160, 23, .15)
      }

      /* ===== FINANCIAL TICKER ===== */
      .ticker-wrap {
        padding: 20px 0;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        overflow: hidden;
        position: relative;
        z-index: 2;
        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
      }

      .ticker-track {
        display: flex;
        gap: 10px;
        animation: scroll 35s linear infinite;
        width: max-content;
        align-items: center
      }

      .ticker-track:hover {
        animation-play-state: paused
      }

      .tk {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 22px;
        border-radius: 100px;
        white-space: nowrap;
        flex-shrink: 0;
        transition: all .3s cubic-bezier(.22, 1, .36, 1);
        cursor: default;
        position: relative;
        background: rgba(255, 255, 255, .02);
        border: 1px solid rgba(255, 255, 255, .06)
      }

      .tk.tk-up-card {
        background: linear-gradient(135deg, rgba(212, 160, 23, .06) 0%, rgba(212, 160, 23, .02) 100%);
        border: 1px solid rgba(212, 160, 23, .15);
        box-shadow: 0 0 12px rgba(212, 160, 23, .06)
      }

      .tk.tk-dn-card {
        background: linear-gradient(135deg, rgba(255, 82, 82, .06) 0%, rgba(200, 40, 40, .02) 100%);
        border: 1px solid rgba(255, 82, 82, .15);
        box-shadow: 0 0 12px rgba(255, 82, 82, .06)
      }

      .tk.tk-up-card:hover {
        background: linear-gradient(135deg, rgba(212, 160, 23, .14) 0%, rgba(212, 160, 23, .06) 100%);
        border-color: rgba(212, 160, 23, .3);
        box-shadow: 0 0 20px rgba(212, 160, 23, .15), 0 0 40px rgba(212, 160, 23, .06)
      }

      .tk.tk-dn-card:hover {
        background: linear-gradient(135deg, rgba(255, 82, 82, .14) 0%, rgba(200, 40, 40, .06) 100%);
        border-color: rgba(255, 82, 82, .3);
        box-shadow: 0 0 20px rgba(255, 82, 82, .15), 0 0 40px rgba(255, 82, 82, .06)
      }

      .tk:hover {
        background: rgba(212, 160, 23, .08);
        border-color: rgba(212, 160, 23, .2);
        box-shadow: 0 0 20px rgba(212, 160, 23, .12), 0 0 40px rgba(212, 160, 23, .05)
      }

      .tk:hover .tk-i {
        color: var(--al)
      }

      .tk:hover .tk-p {
        color: var(--al)
      }

      .tk:hover .tk-v {
        color: var(--em)
      }

      .tk-i {
        width: 18px;
        height: 18px;
        color: var(--t3);
        flex-shrink: 0;
        transition: color .3s
      }

      .tk-p {
        font-size: 14px;
        font-weight: 600;
        color: var(--t2);
        transition: color .3s
      }

      .tk-v {
        font-size: 13px;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 100px;
        transition: color .3s
      }

      .tk-v.up {
        background: rgba(212, 160, 23, .08);
        color: var(--al)
      }

      .tk-v.dn {
        background: rgba(255, 82, 82, .08);
        color: #ff5252
      }

      .tk-icon {
        width: 14px;
        height: 14px;
        color: var(--t3);
        flex-shrink: 0
      }

      .tk-label {
        font-size: 11px;
        font-weight: 500;
        color: var(--t2);
        font-family: var(--body)
      }

      .tk-val {
        font-family: var(--heading);
        font-size: 11px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 100px
      }

      .tk-up {
        background: rgba(212, 160, 23, .08);
        color: var(--al)
      }

      .tk-neut {
        background: rgba(255, 255, 255, .04);
        color: var(--t2)
      }

      /* ===== GLASS CARD ===== */
      .gc {
        background: rgba(255, 255, 255, .03);
        backdrop-filter: blur(16px) saturate(1.2);
        border: 1px solid rgba(255, 255, 255, .07);
        border-radius: 10px;
        position: relative;
        overflow: hidden;
        transition: all .35s cubic-bezier(.22, 1, .36, 1)
      }

      .gc::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 10%, rgba(255, 255, 255, .1) 50%, transparent 90%)
      }

      .gc::after {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: 10px;
        padding: 1px;
        background: linear-gradient(180deg, rgba(212, 160, 23, .12), transparent 40%, transparent 60%, rgba(212, 160, 23, .06));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        opacity: 0;
        transition: opacity .35s
      }

      .gc:hover::after {
        opacity: 1
      }

      .gc:hover {
        border-color: rgba(240, 193, 75, .25);
        transform: translateY(-3px);
        box-shadow: 0 8px 32px rgba(212, 160, 23, .1)
      }

      .gc-gold::after {
        background: linear-gradient(180deg, rgba(240, 196, 48, .15), transparent 40%, transparent 60%, rgba(240, 196, 48, .08))
      }

      .gc-gold:hover {
        border-color: rgba(240, 196, 48, .12);
        box-shadow: 0 8px 32px rgba(240, 196, 48, .05)
      }

      .gc-blue::after {
        background: linear-gradient(180deg, rgba(59, 130, 246, .15), transparent 40%, transparent 60%, rgba(59, 130, 246, .08))
      }

      .gc-blue:hover {
        border-color: rgba(59, 130, 246, .12);
        box-shadow: 0 8px 32px rgba(59, 130, 246, .05)
      }

      /* ===== SECTIONS ===== */
      .sec {
        padding: 100px 0;
        position: relative;
        z-index: 1
      }

      .tag {
        display: inline-flex;
        padding: 6px 16px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 500;
        color: var(--al);
        text-transform: uppercase;
        letter-spacing: .15em;
        margin-bottom: 14px;
        font-family: 'DM Mono', monospace;
        background: rgba(255, 255, 255, .05);
        border: 1px solid var(--border);
        backdrop-filter: blur(10px)
      }

      .stitle {
        font-family: var(--heading);
        font-size: clamp(28px, 3.5vw, 44px);
        font-weight: 700;
        letter-spacing: -.3px;
        line-height: 1.1;
        margin-bottom: 14px
      }

      .stitle .gr {
        background: linear-gradient(135deg, #D4A017 0%, #F0C14B 50%, #FFE082 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
      }

      .gr-tg {
        background: linear-gradient(135deg, #29B6F6 0%, #81D4FA 50%, #B3E5FC 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
      }

      .sdesc {
        font-size: 14px;
        color: var(--t2);
        line-height: 1.75;
        max-width: 420px
      }

      .sdesc strong {
        color: var(--t1);
        font-weight: 600
      }

      /* ===== SPLIT ===== */
      .split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 56px;
        align-items: center
      }

      .split-rev {
        direction: rtl
      }

      .split-rev>* {
        direction: ltr
      }

      /* ===== PHOTO — seamless fade into background ===== */
      /* ===== PHOTO — seamless fade ===== */
      .photo-fade {
        position: relative
      }

      .photo-fade img {
        width: 100%;
        height: auto;
        max-height: 560px;
        object-fit: contain;
        object-position: top center;
        display: block
      }

      /* Accordion */
      .acc {
        margin-top: 24px;
        border-top: 1px solid var(--border)
      }

      .acc-i {
        border-bottom: 1px solid var(--border)
      }

      .acc-b {
        width: 100%;
        padding: 14px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        font-weight: 600;
        color: var(--t1);
        text-align: left;
        transition: color .2s;
        font-family: var(--heading)
      }

      .acc-b:hover {
        color: var(--al)
      }

      .acc-b svg {
        width: 13px;
        height: 13px;
        color: var(--t3);
        transition: transform .3s;
        flex-shrink: 0
      }

      .acc-i.o .acc-b svg {
        transform: rotate(180deg)
      }

      .acc-c {
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s
      }

      .acc-i.o .acc-c {
        max-height: 100px
      }

      .acc-c p {
        padding-bottom: 14px;
        font-size: 13px;
        color: var(--t2);
        line-height: 1.7
      }

      /* Stats */
      .stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 24px
      }

      .stat {
        padding: 18px;
        text-align: center;
        border-radius: 18px
      }

      .stat-v {
        font-family: 'Bebas Neue', var(--heading), sans-serif;
        font-size: 36px;
        font-weight: 700;
        color: var(--al);
        letter-spacing: -1px;
        margin-bottom: 1px
      }

      .stat-l {
        font-size: 10px;
        color: var(--t3);
        font-weight: 500
      }

      /* ===== CHART PANEL — horizontal bars ===== */
      .chart-panel {
        padding: 28px;
        border-radius: 10px
      }

      .cp-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px
      }

      .cp-title {
        font-family: var(--heading);
        font-size: 14px;
        font-weight: 600;
        color: var(--t2);
        transition: all .8s cubic-bezier(.22, 1, .36, 1);
        transform-origin: left center
      }

      .cp-live {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        color: var(--t3);
        font-weight: 500
      }

      .live-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--al);
        box-shadow: 0 0 6px var(--al);
        animation: livePulse 2s infinite
      }

      @keyframes livePulse {

        0%,
        100% {
          box-shadow: 0 0 6px var(--al)
        }

        50% {
          box-shadow: 0 0 12px var(--al), 0 0 24px rgba(212, 160, 23, .2)
        }
      }

      .cp-bars {
        display: flex;
        flex-direction: column;
        gap: 22px
      }

      /* Row — stagger entrance */
      .cp-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
        opacity: 0;
        transform: translateY(12px);
        transition: all .5s cubic-bezier(.22, 1, .36, 1);
        cursor: pointer;
        padding: 10px 14px;
        margin: -10px -14px;
        border-radius: 8px
      }

      .cp-bars.animated .cp-row {
        opacity: 1;
        transform: translateY(0)
      }

      .cp-bars.animated .cp-row:nth-child(1) {
        transition-delay: .1s
      }

      .cp-bars.animated .cp-row:nth-child(2) {
        transition-delay: .25s
      }

      .cp-bars.animated .cp-row:nth-child(3) {
        transition-delay: .4s
      }

      .cp-bars.animated .cp-row:nth-child(4) {
        transition-delay: .55s
      }

      /* Row hover — highlight + reveal pct */
      .cp-row:hover {
        background: rgba(255, 255, 255, .02)
      }

      .cp-row.cp-hl:hover {
        background: rgba(212, 160, 23, .03)
      }

      .cp-info {
        display: flex;
        align-items: center;
        justify-content: space-between
      }

      .cp-name {
        font-size: 12px;
        color: var(--t2);
        font-weight: 500;
        transition: color .25s
      }

      .cp-row:hover .cp-name {
        color: var(--t1)
      }

      /* Percentage — hidden, revealed on hover */
      .cp-pct {
        font-family: var(--heading);
        font-size: 12px;
        font-weight: 600;
        color: var(--t3);
        opacity: 0;
        transform: translateX(8px);
        transition: all .3s cubic-bezier(.22, 1, .36, 1);
        padding: 3px 10px;
        border-radius: 100px;
        background: rgba(255, 255, 255, .04);
        white-space: nowrap;
      }

      .cp-row:hover .cp-pct {
        opacity: 1;
        transform: translateX(0)
      }

      .cp-pct-hl {
        color: var(--al) !important;
        font-size: 13px;
        font-weight: 700;
        background: rgba(212, 160, 23, .08) !important
      }

      .cp-row:hover .cp-pct-hl {
        box-shadow: 0 0 12px rgba(212, 160, 23, .08)
      }

      /* Track */
      .cp-track {
        width: 100%;
        height: 10px;
        background: rgba(255, 255, 255, .035);
        border-radius: 100px;
        overflow: hidden;
        position: relative
      }

      /* Fill — base */
      .cp-fill {
        height: 100%;
        border-radius: 100px;
        position: relative;
        overflow: hidden;
        width: 0%;
        transition: width 1.2s cubic-bezier(.22, 1, .36, 1);
      }

      /* Regular bars — subtle white with continuous shimmer */
      .cp-fill-reg {
        background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .14), rgba(255, 255, 255, .08));
        background-size: 200% 100%;
      }

      .cp-bars.animated .cp-fill-reg {
        animation: barBreath 3s ease-in-out infinite
      }

      @keyframes barBreath {

        0%,
        100% {
          background-position: 0% 0;
          opacity: .85
        }

        50% {
          background-position: 100% 0;
          opacity: 1
        }
      }

      /* Regular bar glow on row hover */
      .cp-row:hover .cp-fill-reg {
        background: linear-gradient(90deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .2), rgba(255, 255, 255, .12));
        box-shadow: 0 0 10px rgba(255, 255, 255, .04);
      }

      /* Highlight bar — green gradient with continuous shine */
      .cp-fill-hl {
        background: linear-gradient(90deg, var(--accent), var(--em), var(--al));
        background-size: 200% 100%;
        box-shadow: 0 0 14px rgba(212, 160, 23, .15);
        transition: width 1.8s cubic-bezier(.22, 1, .36, 1) .3s;
      }

      .cp-bars.animated .cp-fill-hl {
        animation: barGlow 4s ease-in-out infinite;
      }

      @keyframes barGlow {

        0%,
        100% {
          background-position: 0% 0;
          box-shadow: 0 0 14px rgba(212, 160, 23, .15)
        }

        50% {
          background-position: 100% 0;
          box-shadow: 0 0 24px rgba(212, 160, 23, .25), 0 0 48px rgba(212, 160, 23, .08)
        }
      }

      /* Shimmer streak — runs across filled bar continuously */
      .cp-fill::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        border-radius: 100px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
        opacity: 0;
      }

      .cp-bars.animated .cp-fill-hl::after {
        opacity: 1;
        animation: barStreak 3.5s ease-in-out 1.5s infinite;
      }

      .cp-bars.animated .cp-fill-reg::after {
        opacity: 1;
        animation: barStreak 5s ease-in-out 2s infinite;
      }

      @keyframes barStreak {
        0% {
          left: -100%
        }

        40% {
          left: 120%
        }

        100% {
          left: 120%
        }
      }

      /* Highlight name */
      .cp-hl .cp-name {
        color: var(--t1);
        font-weight: 600
      }

      /* Header grows when animated */
      .chart-panel.animated .cp-title {
        font-size: 16px;
        color: var(--t1)
      }

      .chart-panel.animated .live-dot {
        box-shadow: 0 0 10px var(--al), 0 0 20px rgba(212, 160, 23, .15)
      }

      /* Highlight row hover — bar pulses */
      .cp-hl:hover .cp-fill-hl {
        box-shadow: 0 0 28px rgba(212, 160, 23, .3), 0 0 56px rgba(212, 160, 23, .1)
      }

      .cp-footer {
        margin-top: 24px;
        font-size: 11px;
        color: var(--t3);
        line-height: 1.7;
        text-align: center
      }

      .cp-footer strong {
        color: var(--t2)
      }

      /* ===== PLANS — Liquid Glass v2 ===== */
      .pricing {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        max-width: 1080px;
        margin: 0 auto;
        align-items: stretch;
        position: relative
      }

      /* ---- Card Base ---- */
      .p-card {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        isolation: isolate;
        display: flex;
        flex-direction: column;
        transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s;
      }

      .p-card:hover {
        transform: translateY(-10px)
      }

      /* Glass Layer 1: backdrop */
      .p-card::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: 10px;
        background: rgba(255, 255, 255, .04);
        backdrop-filter: blur(20px) saturate(150%) brightness(1.05);
        -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(1.05);
      }

      /* Glass Layer 2: specular rim */
      .p-card::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: 10px;
        pointer-events: none;
        background: linear-gradient(170deg, rgba(255, 255, 255, .1) 0%, transparent 25%, transparent 80%, rgba(255, 255, 255, .02) 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, .14),
          inset 0 -1px 0 rgba(255, 255, 255, .03),
          inset 1px 0 0 rgba(255, 255, 255, .05),
          inset -1px 0 0 rgba(255, 255, 255, .05);
      }

      /* Glass border + specular top line */
      .p-card .p-glass-border {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, .1);
      }

      .p-card .p-glass-border::before {
        content: '';
        position: absolute;
        top: -1px;
        left: 12%;
        right: 12%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), rgba(255, 255, 255, .38), rgba(255, 255, 255, .22), transparent);
      }

      /* Content layer */
      .p-pad {
        padding: 36px 30px;
        display: flex;
        flex-direction: column;
        flex: 1;
        position: relative;
        z-index: 3
      }

      /* Push CTA to bottom */
      .p-spacer {
        flex: 1
      }

      /* ======== SIDE CARDS (Light + Avançado) ======== */
      .p-side {
        background: rgba(255, 255, 255, .025);
        border: 1px solid rgba(255, 255, 255, .07);
        box-shadow: 0 8px 36px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(255, 255, 255, .04);
      }

      .p-side:hover {
        box-shadow: 0 28px 72px rgba(0, 0, 0, .45), 0 0 0 .5px rgba(255, 255, 255, .1);
        border-color: rgba(255, 255, 255, .12);
      }

      /* ======== FEATURED — Green Tinted Glass ======== */
      .p-feat {
        background: linear-gradient(180deg, rgba(255, 255, 255, .025) 0%, rgba(255, 255, 255, .025) 40%, rgba(212, 160, 23, .06) 100%);
        border: 1px solid rgba(255, 255, 255, .08);
        z-index: 3;
        box-shadow:
          0 14px 56px rgba(0, 0, 0, .25),
          0 0 0 .5px rgba(255, 255, 255, .06),
          0 0 80px rgba(212, 160, 23, .04);
      }

      .p-feat:hover {
        border-color: rgba(212, 160, 23, .15);
        box-shadow:
          0 18px 72px rgba(212, 160, 23, .15),
          0 36px 90px rgba(0, 0, 0, .4),
          0 0 0 .5px rgba(212, 160, 23, .15),
          0 0 160px rgba(212, 160, 23, .06);
      }

      .p-feat::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .035) 50%, rgba(212, 160, 23, .06) 100%);
        backdrop-filter: blur(28px) saturate(170%) brightness(1.06);
        -webkit-backdrop-filter: blur(28px) saturate(170%) brightness(1.06);
      }

      .p-feat::after {
        background: linear-gradient(175deg, rgba(255, 255, 255, .08) 0%, transparent 25%, transparent 70%, rgba(212, 160, 23, .06) 100%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, .12),
          inset 0 -1px 0 rgba(212, 160, 23, .12),
          inset 1px 0 0 rgba(255, 255, 255, .04),
          inset -1px 0 0 rgba(255, 255, 255, .04);
      }

      .p-feat .p-glass-border {
        border-color: rgba(255, 255, 255, .08)
      }

      .p-feat .p-glass-border::before {
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), rgba(255, 255, 255, .35), rgba(255, 255, 255, .2), transparent);

      }

      @keyframes glassShimmer {
        0% {
          background-position: -200% 0
        }

        100% {
          background-position: 200% 0
        }
      }

      @keyframes goldShimmer {
        0% {
          background-position: -200% 0
        }

        100% {
          background-position: 200% 0
        }
      }

      /* Featured glow orb */
      .p-feat-glow {
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        height: 140px;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(ellipse, rgba(212, 160, 23, .12), transparent 70%);
        filter: blur(20px);
      }

      /* ======== GOLD ACCENT (Avançado) ======== */
      .p-gold {
        border-color: rgba(240, 196, 48, .14);
        background: linear-gradient(180deg, rgba(255, 255, 255, .025) 0%, rgba(240, 196, 48, .02) 15%, rgba(240, 196, 48, .07) 60%, rgba(240, 196, 48, .1) 100%)
      }

      .p-gold:hover {
        border-color: rgba(240, 196, 48, .28);
        box-shadow: 0 28px 72px rgba(0, 0, 0, .45), 0 0 80px rgba(240, 196, 48, .08), 0 0 140px rgba(240, 196, 48, .04)
      }

      .p-gold::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, .035) 0%, rgba(240, 196, 48, .02) 20%, rgba(240, 196, 48, .06) 100%)
      }

      .p-gold::after {
        background: linear-gradient(175deg, rgba(255, 255, 255, .07) 0%, transparent 20%, rgba(240, 196, 48, .02) 60%, rgba(240, 196, 48, .08) 100%);
        box-shadow: inset 0 1px 0 rgba(240, 196, 48, .12), inset 0 -1px 0 rgba(240, 196, 48, .18), inset 1px 0 0 rgba(240, 196, 48, .06), inset -1px 0 0 rgba(240, 196, 48, .06);
      }

      .p-gold .p-glass-border {
        border-color: rgba(240, 196, 48, .12)
      }

      .p-gold .p-glass-border::before {
        background: linear-gradient(90deg, transparent, rgba(240, 196, 48, .2), rgba(240, 196, 48, .4), rgba(240, 196, 48, .2), transparent);
        animation: goldShimmer 5s linear infinite;
        background-size: 200% 100%;
      }

      /* Gold glow orb */
      .p-gold-glow {
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 320px;
        height: 200px;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(ellipse, rgba(240, 196, 48, .1), rgba(240, 196, 48, .04) 50%, transparent 75%);
        filter: blur(24px);
      }

      /* ======== INNER ELEMENTS ======== */

      /* Icon — bigger, glassy */
      .p-icon {
        width: 54px;
        height: 54px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 22px;
        position: relative;
        overflow: hidden;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .07);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 12px rgba(0, 0, 0, .1);
      }

      .p-icon svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round
      }

      .p-green .p-icon {
        background: rgba(212, 160, 23, .07);
        border-color: rgba(212, 160, 23, .12)
      }

      .p-green .p-icon svg {
        stroke: var(--al)
      }

      .p-feat .p-icon {
        background: rgba(212, 160, 23, .12);
        border-color: rgba(212, 160, 23, .18);
        box-shadow: inset 0 1px 0 rgba(212, 160, 23, .15), 0 4px 16px rgba(212, 160, 23, .08)
      }

      .p-feat .p-icon svg {
        stroke: var(--em)
      }

      .p-gold .p-icon {
        background: rgba(240, 196, 48, .1);
        border-color: rgba(240, 196, 48, .18);
        box-shadow: 0 0 16px rgba(240, 196, 48, .06)
      }

      .p-gold .p-icon svg {
        stroke: var(--gold)
      }

      /* Tag — pill, glassy */
      .p-tag {
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 6px 16px;
        border-radius: 100px;
        font-family: var(--heading);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        z-index: 4;
        background: rgba(212, 160, 23, .1);
        color: var(--al);
        border: 1px solid rgba(212, 160, 23, .14);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
      }

      /* Gold tag */
      .p-tag-gold {
        background: rgba(240, 196, 48, .08);
        color: var(--gold);
        border-color: rgba(240, 196, 48, .12);
      }

      /* Name */
      .p-name {
        font-family: var(--heading);
        font-size: 22px;
        font-weight: 700;
        color: var(--t1);
        margin-bottom: 8px;
        letter-spacing: .2px
      }

      .p-feat .p-name {
        font-size: 24px
      }

      /* Desc */
      .p-desc {
        font-size: 13px;
        color: var(--t3);
        margin-bottom: 28px;
        line-height: 1.6
      }

      /* Price — big and bold */
      .p-price {
        font-family: var(--heading);
        font-size: 54px;
        font-weight: 800;
        color: var(--t1);
        letter-spacing: -.5px;
        line-height: 1;
        margin-bottom: 5px
      }

      .p-per {
        font-size: 15px;
        font-weight: 400;
        color: var(--t3);
        letter-spacing: 0;
        margin-left: 4px
      }

      .p-feat .p-price {
        font-size: 60px;
        color: var(--al);
        text-shadow: 0 0 40px rgba(212, 160, 23, .15)
      }

      .p-gold .p-price {
        color: var(--gold);
        text-shadow: 0 0 30px rgba(240, 196, 48, .12), 0 0 60px rgba(240, 196, 48, .05)
      }

      /* Range */
      .p-range {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 32px
      }

      .p-range-box {
        padding: 12px 14px;
        border-radius: 8px;
        text-align: center;
        background: rgba(255, 255, 255, .025);
        border: 1px solid rgba(255, 255, 255, .06);
        transition: border-color .25s;
      }

      .p-range-box:hover {
        border-color: rgba(255, 255, 255, .12)
      }

      .p-range-label {
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--t3);
        font-family: var(--heading);
        font-weight: 600;
        margin-bottom: 5px
      }

      .p-range-val {
        font-family: var(--heading);
        font-size: 18px;
        font-weight: 700;
        color: var(--t1);
        letter-spacing: -.3px
      }

      .p-feat .p-range-box {
        background: rgba(212, 160, 23, .03);
        border-color: rgba(212, 160, 23, .1)
      }

      .p-feat .p-range-box:hover {
        border-color: rgba(212, 160, 23, .2)
      }

      .p-feat .p-range-val {
        color: var(--al)
      }

      .p-gold .p-range-box {
        background: rgba(240, 196, 48, .05);
        border-color: rgba(240, 196, 48, .12)
      }

      .p-gold .p-range-box:hover {
        border-color: rgba(240, 196, 48, .24);
        box-shadow: 0 0 12px rgba(240, 196, 48, .06)
      }

      .p-gold .p-range-val {
        color: var(--gold)
      }

      /* CTA — prominent */
      .p-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 16px;
        border-radius: 10px;
        font-family: var(--heading);
        font-weight: 700;
        font-size: 14px;
        letter-spacing: .6px;
        transition: all .35s cubic-bezier(.22, 1, .36, 1);
        margin-bottom: 28px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .p-side .p-btn {
        background: rgba(255, 255, 255, .06);
        color: var(--t1);
        border: 1px solid rgba(255, 255, 255, .1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
      }

      .p-side .p-btn:hover {
        background: rgba(255, 255, 255, .1);
        border-color: rgba(255, 255, 255, .16);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, .15)
      }

      .p-feat .p-btn {
        background: linear-gradient(135deg, var(--al), var(--em));
        color: #fff;
        border: none;
        box-shadow: 0 8px 32px rgba(212, 160, 23, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
        font-size: 15px;
        padding: 18px;
      }

      .p-feat .p-btn:hover {
        box-shadow: 0 10px 40px rgba(212, 160, 23, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
        transform: translateY(-3px)
      }

      .p-gold .p-btn {
        background: linear-gradient(135deg, rgba(240, 196, 48, .2), rgba(210, 170, 40, .15));
        color: #fff;
        border: 1px solid rgba(240, 196, 48, .25);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 20px rgba(240, 196, 48, .1);
      }

      .p-gold .p-btn:hover {
        background: linear-gradient(135deg, rgba(240, 196, 48, .28), rgba(210, 170, 40, .2));
        border-color: rgba(240, 196, 48, .35);
        transform: translateY(-3px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 32px rgba(240, 196, 48, .15)
      }

      .p-btn .arr {
        transition: transform .25s;
        font-size: 16px
      }

      .p-btn:hover .arr {
        transform: translateX(4px)
      }

      /* Separator — glass edge */
      .p-sep {
        height: 1px;
        margin-bottom: 22px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent)
      }

      .p-feat .p-sep {
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), rgba(212, 160, 23, .08), transparent)
      }

      .p-gold .p-sep {
        background: linear-gradient(90deg, transparent, rgba(240, 196, 48, .1), rgba(240, 196, 48, .14), rgba(240, 196, 48, .1), transparent)
      }

      /* Features */
      .p-fi {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 9px 0;
        font-size: 13.5px;
        color: var(--t2);
        line-height: 1.4
      }

      .p-fi-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
        background: rgba(255, 255, 255, .18)
      }

      .p-feat .p-fi {
        color: var(--t2)
      }

      .p-feat .p-fi-dot {
        background: var(--al);
        box-shadow: 0 0 8px rgba(212, 160, 23, .3)
      }

      .p-gold .p-fi-dot {
        background: var(--gold);
        box-shadow: 0 0 8px rgba(240, 196, 48, .3), 0 0 16px rgba(240, 196, 48, .1)
      }

      /* Note */
      .p-note {
        text-align: center;
        font-size: 11px;
        color: var(--t3);
        max-width: 520px;
        margin: 28px auto 0
      }

      @media(max-width:1024px) {
        .pricing {
          grid-template-columns: 1fr;
          max-width: 420px;
          margin-left: auto;
          margin-right: auto;
          gap: 18px
        }
      }

      /* CALC — gamified redesign */

      /* PLANS — GLASSMORPHISM CARDS */
      .gp-wrap {
        position: relative;
        max-width: 1120px;
        margin: 0 auto;
        padding: 20px 24px;
        overflow: visible
      }

      .gp-spot {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        pointer-events: none;
        z-index: 0
      }

      .gp-spot-1 {
        width: 400px;
        height: 400px;
        top: -10%;
        left: 10%;
        background: radial-gradient(circle, rgba(212, 160, 23, .18) 0%, transparent 65%);
        animation: orbDrift1 18s ease-in-out infinite
      }

      .gp-spot-2 {
        width: 350px;
        height: 350px;
        bottom: -5%;
        right: 8%;
        background: radial-gradient(circle, rgba(240, 196, 48, .12) 0%, transparent 60%);
        animation: orbDrift2 22s ease-in-out 3s infinite
      }

      .gp-spot-3 {
        width: 300px;
        height: 300px;
        top: 40%;
        left: 50%;
        transform: translateX(-50%);
        background: radial-gradient(circle, rgba(212, 160, 23, .1) 0%, transparent 55%);
        animation: orbDrift3 16s ease-in-out 6s infinite
      }

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

      .gp-card {
        position: relative;
        border-radius: 24px;
        overflow: visible;
        transition: transform .5s cubic-bezier(.22, 1, .36, 1)
      }

      /* Background organic blobs behind glass cards */
      .gp-bg-blobs {
        position: absolute;
        inset: -80px -60px;
        z-index: 0;
        pointer-events: none;
        overflow: visible
      }

      .gp-blob {
        position: absolute;
        border-radius: 50%;
        pointer-events: none
      }

      .gp-blob-1 {
        width: 380px;
        height: 380px;
        top: -40px;
        left: -40px;
        background: radial-gradient(circle, rgba(255, 255, 255, .13) 0%, rgba(200, 215, 230, .06) 40%, transparent 70%);
        filter: blur(50px);
        animation: gpBlobDrift1 12s ease-in-out infinite
      }

      .gp-blob-2 {
        width: 440px;
        height: 440px;
        top: 10%;
        left: 35%;
        background: radial-gradient(circle, rgba(212, 160, 23, .22) 0%, rgba(212, 160, 23, .08) 35%, rgba(212, 160, 23, .02) 55%, transparent 70%);
        filter: blur(55px);
        animation: gpBlobDrift2 14s ease-in-out 2s infinite
      }

      .gp-blob-3 {
        width: 360px;
        height: 360px;
        top: -30px;
        right: -50px;
        background: radial-gradient(circle, rgba(240, 196, 48, .18) 0%, rgba(210, 170, 40, .07) 35%, rgba(240, 196, 48, .02) 55%, transparent 70%);
        filter: blur(48px);
        animation: gpBlobDrift3 11s ease-in-out 4s infinite
      }

      @keyframes gpBlobDrift1 {

        0%,
        100% {
          transform: translate(0, 0) scale(1)
        }

        33% {
          transform: translate(15px, 20px) scale(1.04)
        }

        66% {
          transform: translate(-10px, 8px) scale(.97)
        }
      }

      @keyframes gpBlobDrift2 {

        0%,
        100% {
          transform: translate(0, 0) scale(1)
        }

        33% {
          transform: translate(-20px, -15px) scale(1.06)
        }

        66% {
          transform: translate(12px, 10px) scale(.98)
        }
      }

      @keyframes gpBlobDrift3 {

        0%,
        100% {
          transform: translate(0, 0) scale(1)
        }

        33% {
          transform: translate(10px, 18px) scale(1.03)
        }

        66% {
          transform: translate(-15px, -12px) scale(.96)
        }
      }

      .gp-card-inner {
        position: relative;
        height: 100%;
        padding: 40px 32px 36px;
        background: rgba(255, 255, 255, .02);
        backdrop-filter: blur(50px) saturate(180%) brightness(108%);
        -webkit-backdrop-filter: blur(50px) saturate(180%) brightness(108%);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 24px;
        display: flex;
        flex-direction: column;
        transition: all .5s cubic-bezier(.22, 1, .36, 1);
        box-shadow: 0 4px 30px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .06);
        overflow: hidden
      }

      .gp-card-inner::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 90% 5%, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .03) 25%, rgba(255, 255, 255, .01) 50%, transparent 80%);
        pointer-events: none;
        border-radius: 24px
      }

      .gp-card-inner::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 60%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15));
        pointer-events: none
      }

      .gp-card:hover {
        transform: translateY(-6px)
      }

      .gp-card:hover .gp-card-inner {
        border-color: rgba(255, 255, 255, .18);
        box-shadow: 0 32px 80px rgba(0, 0, 0, .3), 0 0 40px rgba(255, 255, 255, .02), inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(255, 255, 255, .04)
      }

      .gp-card-iso {
        position: absolute;
        top: -60px;
        right: -60px;
        width: 300px;
        height: 300px;
        opacity: .22;
        pointer-events: none;
        z-index: 0;
        background-image: url('/landing/isotipo-3d.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transform: rotate(-15deg);
        -webkit-mask: radial-gradient(circle at 100% 0%, #000 15%, rgba(0, 0, 0, .5) 35%, transparent 65%);
        mask: radial-gradient(circle at 100% 0%, #000 15%, rgba(0, 0, 0, .5) 35%, transparent 65%)
      }

      .gp-card-hl .gp-card-iso {
        opacity: .28
      }

      .gp-card-gold .gp-card-iso {
        opacity: .25
      }

      .gp-card-hl {
        z-index: 3
      }

      .gp-card-hl .gp-card-inner {
        border-color: rgba(212, 160, 23, .15);
        background: rgba(240, 193, 75, .02);
        box-shadow: 0 0 40px rgba(240, 193, 75, .08), 0 4px 30px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(240, 193, 75, .08)
      }

      .gp-card-hl .gp-card-inner::before {
        background: radial-gradient(ellipse at 90% 5%, rgba(240, 193, 75, .12) 0%, rgba(240, 193, 75, .05) 25%, rgba(240, 193, 75, .02) 50%, transparent 80%)
      }

      .gp-card-hl .gp-card-inner::after {
        background: linear-gradient(90deg, transparent, rgba(240, 193, 75, .25));
        width: 60%
      }

      .gp-card-hl:hover .gp-card-inner {
        border-color: var(--accent);
        box-shadow: 0 0 60px rgba(240, 193, 75, .18), 0 32px 80px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(240, 193, 75, .15)
      }

      .gp-card-gold .gp-card-inner {
        border-color: rgba(240, 196, 48, .12);
        background: rgba(240, 196, 48, .02);
        box-shadow: 0 0 30px rgba(240, 196, 48, .06), 0 4px 30px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(240, 196, 48, .08)
      }

      .gp-card-gold .gp-card-inner::before {
        background: radial-gradient(ellipse at 90% 5%, rgba(240, 196, 48, .1) 0%, rgba(240, 196, 48, .04) 25%, rgba(240, 196, 48, .015) 50%, transparent 80%)
      }

      .gp-card-gold .gp-card-inner::after {
        background: linear-gradient(90deg, transparent, rgba(240, 196, 48, .2));
        width: 60%
      }

      .gp-card-light .gp-card-inner {
        border-color: #555
      }

      .gp-card-gold:hover .gp-card-inner {
        border-color: var(--gold);
        box-shadow: 0 0 50px rgba(255, 215, 0, .12), 0 32px 80px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 215, 0, .12)
      }

      .gp-badge {
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        padding: 3px 14px;
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        border-radius: 100px;
        background: linear-gradient(135deg, #D4A017 0%, #F0C14B 50%, #FFE082 100%);
        color: #3d2e0a;
        z-index: 5;
        font-family: var(--heading);
        text-align: center;
        white-space: nowrap;
        border: none;
        box-shadow: 0 2px 8px rgba(240, 193, 75, .3)
      }

      .gp-badge-gold {
        background: var(--gold);
        color: #000;
        box-shadow: 0 2px 8px rgba(255, 215, 0, .3)
      }

      .gp-head {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 28px
      }

      .gp-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .06);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0
      }

      .gp-icon svg {
        width: 22px;
        height: 22px;
        color: var(--t2)
      }

      .gp-icon-hl {
        background: rgba(212, 160, 23, .06);
        border-color: rgba(212, 160, 23, .12)
      }

      .gp-icon-hl svg {
        color: var(--al)
      }

      .gp-icon-gold {
        background: rgba(240, 196, 48, .06);
        border-color: rgba(240, 196, 48, .1)
      }

      .gp-icon-gold svg {
        color: var(--gold)
      }

      .gp-name {
        font-family: var(--heading);
        font-size: 18px;
        font-weight: 700;
        color: var(--t1);
        line-height: 1.2
      }

      .gp-sub {
        font-size: 12px;
        color: var(--t3);
        margin-top: 2px
      }

      .gp-price-block {
        text-align: left;
        margin-bottom: 24px
      }

      .gp-price {
        font-family: var(--heading);
        font-size: 56px;
        font-weight: 800;
        color: var(--t1);
        line-height: 1
      }

      .gp-price span {
        font-size: 15px;
        font-weight: 500;
        color: var(--t3)
      }

      .gp-price-hl {
        background: linear-gradient(135deg, #D4A017 0%, #F0C14B 50%, #FFE082 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
      }

      .gp-price-hl span {
        -webkit-text-fill-color: var(--t3)
      }

      .gp-price-gold {
        background: linear-gradient(135deg, #F0C430 0%, #FFD740 50%, #FFE082 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
      }

      .gp-price-gold span {
        -webkit-text-fill-color: var(--t3)
      }

      .gp-range {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-bottom: 24px;
        padding: 14px 18px;
        border-radius: 14px;
        background: rgba(255, 255, 255, .03);
        border: 1px solid rgba(255, 255, 255, .05)
      }

      .gp-range-item {
        text-align: center
      }

      .gp-range-label {
        display: block;
        font-size: 10px;
        color: var(--t3);
        text-transform: uppercase;
        letter-spacing: .5px;
        margin-bottom: 2px
      }

      .gp-range-val {
        font-family: var(--heading);
        font-size: 14px;
        font-weight: 700;
        color: var(--t1)
      }

      .gp-range-div {
        width: 1px;
        height: 28px;
        background: rgba(255, 255, 255, .06)
      }

      .gp-range-div-hl {
        background: rgba(212, 160, 23, .12)
      }

      .gp-range-div-gold {
        background: rgba(240, 196, 48, .1)
      }

      .gp-divider {
        height: 1px;
        background: rgba(255, 255, 255, .04);
        margin-bottom: 20px
      }

      .gp-divider-hl {
        background: linear-gradient(90deg, transparent, rgba(212, 160, 23, .1), transparent)
      }

      .gp-divider-gold {
        background: linear-gradient(90deg, transparent, rgba(240, 196, 48, .08), transparent)
      }

      .gp-feats {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 24px;
        flex: 1
      }

      .gp-fi {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        color: var(--t2)
      }

      .gp-fi svg {
        flex-shrink: 0;
        color: rgba(255, 255, 255, .2);
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 50%;
        padding: 4px;
        width: 22px;
        height: 22px;
        box-sizing: content-box
      }

      .gp-fi-hl svg {
        color: var(--al);
        background: rgba(212, 160, 23, .06);
        border-color: rgba(212, 160, 23, .15)
      }

      .gp-fi-gold svg {
        color: var(--gold);
        background: rgba(240, 196, 48, .06);
        border-color: rgba(240, 196, 48, .15)
      }

      .gp-btn {
        display: block;
        text-align: center;
        padding: 16px 20px;
        border-radius: 100px;
        font-family: var(--heading);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        color: var(--t1);
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .1);
        transition: all .3s;
        position: relative;
        overflow: hidden;
        text-transform: uppercase;
        letter-spacing: .02em;
        isolation: isolate;
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%)
      }

      .gp-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .03) 40%, transparent 100%);
        pointer-events: none;
        transition: opacity .3s
      }

      .gp-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 100px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .1);
        pointer-events: none
      }

      .gp-btn:hover {
        background: rgba(255, 255, 255, .12);
        transform: translateY(-2px)
      }

      .gp-btn:hover::before {
        opacity: .8
      }

      .gp-btn-hl {
        background: rgba(212, 160, 23, .85);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .1)
      }

      .gp-btn-hl::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, .05) 40%, transparent 100%);
        pointer-events: none;
        transition: opacity .3s
      }

      .gp-btn-hl::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 100px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .15);
        pointer-events: none
      }

      .gp-btn-hl:hover {
        background: rgba(212, 160, 23, .95);
        transform: translateY(-2px)
      }

      .gp-btn-hl:hover::before {
        opacity: .8
      }

      .gp-btn-gold {
        background: rgba(190, 150, 30, .85);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .1)
      }

      .gp-btn-gold::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, .05) 40%, transparent 100%);
        pointer-events: none;
        transition: opacity .3s
      }

      .gp-btn-gold::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 100px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .15);
        pointer-events: none
      }

      .gp-btn-gold:hover {
        background: rgba(200, 160, 35, .95);
        transform: translateY(-2px)
      }

      .gp-btn-gold:hover::before {
        opacity: .8
      }

      /* Light theme */
      [data-theme="light"] .gp-card-inner {
        background: rgba(255, 255, 255, .5);
        border-color: rgba(40, 40, 40, .08);
        box-shadow: 0 8px 32px rgba(0, 0, 0, .04), inset 0 1px 0 rgba(255, 255, 255, .6)
      }

      [data-theme="light"] .gp-card-inner::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, .3), transparent)
      }

      [data-theme="light"] .gp-card:hover .gp-card-inner {
        border-color: rgba(40, 40, 40, .14);
        box-shadow: 0 20px 56px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .7)
      }

      [data-theme="light"] .gp-blob-1 {
        background: radial-gradient(circle, rgba(160, 190, 210, .15) 0%, transparent 65%)
      }

      [data-theme="light"] .gp-blob-2 {
        background: radial-gradient(circle, rgba(212, 160, 23, .1) 0%, transparent 65%)
      }

      [data-theme="light"] .gp-blob-3 {
        background: radial-gradient(circle, rgba(240, 196, 48, .08) 0%, transparent 65%)
      }

      [data-theme="light"] .gp-card-hl .gp-card-inner {
        border-color: rgba(212, 160, 23, .1)
      }

      [data-theme="light"] .gp-card-gold .gp-card-inner {
        border-color: rgba(210, 170, 40, .08)
      }

      [data-theme="light"] .gp-icon {
        background: rgba(40, 40, 40, .04);
        border-color: rgba(40, 40, 40, .06)
      }

      [data-theme="light"] .gp-range {
        background: rgba(40, 40, 40, .02);
        border-color: rgba(40, 40, 40, .04)
      }

      [data-theme="light"] .gp-divider {
        background: rgba(40, 40, 40, .05)
      }

      [data-theme="light"] .gp-btn {
        background: rgba(40, 40, 40, .04);
        border-color: rgba(40, 40, 40, .06);
        color: var(--t1)
      }

      [data-theme="light"] .gp-btn:hover {
        background: rgba(40, 40, 40, .08)
      }

      @media(max-width:800px) {
        .gp-grid {
          grid-template-columns: 1fr;
          max-width: 400px;
          margin: 0 auto
        }
      }

      /* Calculator — Single compact card */
      .calc-s {
        margin-top: 72px;
        position: relative
      }

      .calc-s .sec-head {
        margin-bottom: 36px
      }

      .calc-wrap {
        max-width: 540px;
        margin: 0 auto;
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        isolation: isolate;
        background: rgba(255, 255, 255, .03);
        border: 1px solid rgba(255, 255, 255, .06);
        box-shadow: 0 12px 48px rgba(0, 0, 0, .25), 0 0 60px rgba(212, 160, 23, .04)
      }

      .calc-wrap::before {
        content: '';
        position: absolute;
        inset: 0;
        backdrop-filter: blur(40px) saturate(180%) brightness(1.06);
        -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.06);
        z-index: 0
      }

      .calc-wrap::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: radial-gradient(ellipse at 50% 100%, rgba(212, 160, 23, .06) 0%, transparent 70%);
        box-shadow: inset 0 -1px 0 rgba(212, 160, 23, .1), inset 0 1px 0 rgba(255, 255, 255, .06)
      }

      .calc-left {
        padding: 32px 32px 24px;
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column
      }

      .calc-title {
        font-family: var(--heading);
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 4px;
        letter-spacing: .2px
      }

      .calc-sub {
        font-size: 13px;
        color: var(--t3);
        margin-bottom: 24px;
        line-height: 1.5
      }

      /* Inputs row */
      .cf-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px
      }

      .cf {
        margin-bottom: 18px
      }

      .cf label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 600;
        color: var(--t2);
        margin-bottom: 6px;
        letter-spacing: .3px;
        font-family: var(--heading)
      }

      .cf label svg {
        width: 14px;
        height: 14px;
        stroke: var(--al);
        flex-shrink: 0
      }

      .cf select,
      .cf input[type=number] {
        width: 100%;
        padding: 12px 14px;
        background: rgba(255, 255, 255, .03);
        border: 1px solid rgba(255, 255, 255, .06);
        border-radius: 10px;
        color: var(--t1);
        font-size: 14px;
        outline: none;
        transition: all .3s;
        font-family: var(--body);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px)
      }

      .cf select:focus,
      .cf input:focus {
        border-color: rgba(212, 160, 23, .3);
        box-shadow: 0 0 20px rgba(212, 160, 23, .06)
      }

      .cf select option {
        background: #000000;
        color: #fff
      }

      .cf input[type=range] {
        width: 100%;
        accent-color: var(--al);
        margin-top: 4px
      }

      .cm-row {
        display: flex;
        align-items: baseline;
        gap: 6px;
        margin-top: 6px
      }

      .cm-num {
        font-family: var(--heading);
        font-size: 26px;
        font-weight: 700;
        background: linear-gradient(135deg, #D4A017 0%, #F0C14B 50%, #FFE082 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
      }

      .cm-sub {
        font-size: 12px;
        color: var(--t3)
      }

      /* CTA Button */
      .calc-cta {
        padding-top: 4px
      }

      .calc-btn {
        width: 100%;
        padding: 14px;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 100px;
        cursor: pointer;
        font-family: var(--heading);
        font-weight: 700;
        font-size: 14px;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: #fff;
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background: rgba(212, 160, 23, .85);
        transition: all .3s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%)
      }

      .calc-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 100px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .15);
        pointer-events: none
      }

      .calc-btn:hover {
        background: rgba(212, 160, 23, .95);
        transform: translateY(-2px)
      }

      .calc-btn svg {
        stroke: #fff
      }

      .calc-btn:active {
        transform: scale(.98)
      }

      .calc-btn svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: #fff;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .3s
      }

      .calc-btn:hover svg {
        transform: rotate(15deg)
      }

      .calc-btn.loading {
        pointer-events: none
      }

      .calc-btn.loading .btn-text {
        opacity: 0
      }

      .calc-btn .spinner {
        display: none;
        width: 18px;
        height: 18px;
        border: 2px solid rgba(255, 255, 255, .3);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin .6s linear infinite;
        position: absolute
      }

      .calc-btn.loading .spinner {
        display: block
      }

      @keyframes spin {
        to {
          transform: rotate(360deg)
        }
      }

      /* Results — below inputs in same card */
      .calc-right {
        padding: 0 32px 32px;
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 0
      }

      .cr-main {
        text-align: center;
        padding: 20px 0 16px;
        position: relative;
        border-top: 1px solid rgba(255, 255, 255, .06)
      }

      .cr-main .l {
        font-size: 11px;
        color: var(--t3);
        text-transform: uppercase;
        letter-spacing: 1.2px;
        font-family: var(--heading);
        font-weight: 600;
        margin-bottom: 8px
      }

      .cr-main .v {
        font-family: var(--heading);
        font-size: 40px;
        font-weight: 800;
        color: var(--al);
        letter-spacing: -.5px;
        transition: opacity .3s, transform .3s;
        line-height: 1
      }

      .cr-main .v.counting {
        animation: pulse .4s ease infinite alternate
      }

      @keyframes pulse {
        0% {
          opacity: .6;
          transform: scale(.98)
        }

        100% {
          opacity: 1;
          transform: scale(1.02)
        }
      }

      .cr-glow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 180px;
        height: 60px;
        background: radial-gradient(ellipse, rgba(212, 160, 23, .12), transparent 70%);
        filter: blur(20px);
        opacity: 0;
        transition: opacity .6s;
        pointer-events: none
      }

      .cr-glow.show {
        opacity: 1
      }

      /* Metrics */
      .cr-metrics {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin: 8px 0 16px
      }

      .cr-metric {
        text-align: center;
        padding: 12px 20px;
        background: rgba(255, 255, 255, .025);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, .05)
      }

      .cr-metric .l {
        font-size: 10px;
        color: var(--t3);
        text-transform: uppercase;
        letter-spacing: .8px;
        font-family: var(--heading);
        margin-bottom: 4px
      }

      .cr-metric .v {
        font-family: var(--heading);
        font-size: 18px;
        font-weight: 700;
        color: var(--t1)
      }

      .cr-metric {
        opacity: 0;
        transform: translateY(10px);
        transition: all .4s cubic-bezier(.22, 1, .36, 1)
      }

      .cr-metric.show {
        opacity: 1;
        transform: translateY(0)
      }

      /* Timeline */
      .cr-timeline {
        flex: 1;
        overflow: hidden
      }

      .cr-th {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        margin-bottom: 4px
      }

      .cr-th span {
        font-size: 10px;
        color: var(--t3);
        text-transform: uppercase;
        letter-spacing: .8px;
        font-family: var(--heading);
        font-weight: 600
      }

      .cr-r {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        padding: 6px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .02);
        opacity: 0;
        transform: translateX(-20px);
        transition: all .35s cubic-bezier(.22, 1, .36, 1)
      }

      .cr-r.show {
        opacity: 1;
        transform: translateX(0)
      }

      .cr-r .m {
        font-size: 12px;
        color: var(--t2);
        font-weight: 500
      }

      .cr-r .g {
        font-size: 12px;
        color: var(--al);
        font-weight: 600;
        text-align: center;
        font-family: var(--heading)
      }

      .cr-r .t {
        font-size: 12px;
        color: var(--t1);
        font-weight: 600;
        text-align: right;
        font-family: var(--heading)
      }

      .cr-note {
        font-size: 10px;
        color: var(--t3);
        margin-top: 12px;
        opacity: .6
      }

      /* Idle state */
      .cr-idle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding: 32px 0
      }

      .cr-idle-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .06);
        display: flex;
        align-items: center;
        justify-content: center
      }

      .cr-idle-icon svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: var(--t3);
        stroke-width: 1.5
      }

      .cr-idle-text {
        font-size: 13px;
        color: var(--t3);
        text-align: center;
        line-height: 1.5;
        max-width: 220px
      }

      .cr-results {
        display: none
      }

      .cr-results.active {
        display: flex;
        flex-direction: column
      }

      @media(max-width:600px) {
        .calc-wrap {
          border-radius: 16px
        }

        .calc-left,
        .calc-right {
          padding-left: 20px;
          padding-right: 20px
        }

        .cf-row {
          grid-template-columns: 1fr
        }

        .cr-main .v {
          font-size: 30px
        }

        .cr-metric .v {
          font-size: 15px
        }

        .cr-th,
        .cr-r {
          grid-template-columns: 1fr 1fr 1fr 1fr
        }

        .cf select,
        .cf input {
          font-size: 16px;
          padding: 12px 14px;
          min-height: 44px
        }
      }

      /* COURSES v2 — with covers */
      .courses-wrap {
        position: relative;
        overflow: visible
      }

      .crs-spot {
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        pointer-events: none;
        z-index: 0
      }

      .crs-spot-1 {
        width: 350px;
        height: 350px;
        top: 5%;
        left: 5%;
        background: radial-gradient(circle, rgba(212, 160, 23, .12) 0%, transparent 60%);
        animation: orbDrift2 20s ease-in-out infinite
      }

      .crs-spot-2 {
        width: 300px;
        height: 300px;
        bottom: 0;
        right: 10%;
        background: radial-gradient(circle, rgba(59, 130, 246, .1) 0%, transparent 55%);
        animation: orbDrift3 18s ease-in-out 4s infinite
      }

      .crs-spot-3 {
        width: 250px;
        height: 250px;
        top: 40%;
        left: 55%;
        background: radial-gradient(circle, rgba(240, 196, 48, .08) 0%, transparent 50%);
        animation: orbDrift1 16s ease-in-out 2s infinite
      }

      .courses-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-bottom: 32px;
        position: relative;
        z-index: 2
      }

      .crs2 {
        display: flex;
        flex-direction: column;
        border-radius: 24px;
        overflow: hidden;
        background: rgba(255, 255, 255, .04);
        backdrop-filter: blur(40px) saturate(170%) brightness(106%);
        -webkit-backdrop-filter: blur(40px) saturate(170%) brightness(106%);
        border: 1px solid rgba(255, 255, 255, .08);
        transition: all .5s cubic-bezier(.22, 1, .36, 1);
        position: relative;
        box-shadow: 0 4px 32px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .08)
      }

      .crs2::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
        pointer-events: none;
        z-index: 3
      }

      .crs2::after {
        display: none
      }

      .courses-grid:hover .crs2 {
        filter: blur(3px) brightness(.7);
        opacity: .6;
        transform: scale(.97)
      }

      .courses-grid .crs2:hover {
        filter: none;
        opacity: 1;
        transform: translateY(-25px) scale(1.02);
        z-index: 10;
        border-color: rgba(255, 255, 255, .2);
        box-shadow: 0 32px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12)
      }

      .gc-blue:hover {
        border-color: rgba(59, 130, 246, .25)
      }

      .gc-gold:hover {
        border-color: rgba(240, 196, 48, .22)
      }

      .crs2-cover {
        position: relative;
        overflow: hidden
      }

      .crs2-cover img {
        width: 100%;
        display: block;
        transition: transform .5s cubic-bezier(.22, 1, .36, 1)
      }

      .crs2:hover .crs2-cover img {
        transform: scale(1.03)
      }

      .crs2-cover::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 20%;
        background: linear-gradient(180deg, transparent 0%, rgba(8, 9, 10, .85) 100%);
        pointer-events: none
      }

      .crs2-body {
        padding: 24px 24px 24px;
        display: flex;
        flex-direction: column;
        flex: 1;
        position: relative;
        z-index: 2
      }

      .crs2-desc {
        font-size: 13px;
        color: var(--t3);
        line-height: 1.6;
        margin-bottom: 16px
      }

      .ct2 {
        display: inline-block;
        padding: 5px 14px;
        border-radius: 100px;
        font-size: 10px;
        font-weight: 700;
        margin-bottom: 12px;
        width: fit-content;
        font-family: var(--heading);
        text-transform: uppercase;
        letter-spacing: 1px
      }

      .ct2-green {
        background: rgba(212, 160, 23, .1);
        background: linear-gradient(135deg, rgba(212, 160, 23, .12), rgba(240, 193, 75, .08));
        color: var(--al);
        border: 1px solid rgba(240, 193, 75, .2)
      }

      .ct2-blue {
        background: rgba(59, 130, 246, .1);
        color: var(--blue);
        border: 1px solid rgba(59, 130, 246, .15)
      }

      .ct2-gold {
        background: rgba(240, 196, 48, .1);
        color: var(--gold);
        border: 1px solid rgba(240, 196, 48, .15)
      }

      .crs2-title {
        font-family: var(--heading);
        font-size: 20px;
        font-weight: 800;
        margin-bottom: 8px;
        letter-spacing: -.3px;
        color: #fff
      }

      .crs2-hl-green {
        background: linear-gradient(135deg, #D4A017 0%, #F0C14B 50%, #FFE082 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
      }

      .crs2-hl-blue {
        background: linear-gradient(135deg, #29B6F6 0%, #81D4FA 50%, #B3E5FC 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
      }

      .crs2-hl-gold {
        background: linear-gradient(135deg, #FFD700 0%, #FFE566 50%, #FFF3B0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
      }

      .ci2 {
        flex: 1;
        margin-bottom: 20px;
        padding: 0
      }

      .ci2 li {
        padding: 6px 0;
        font-size: 13px;
        color: var(--t2);
        display: flex;
        align-items: center;
        gap: 10px;
        list-style: none
      }

      .ci2 li::before {
        content: '';
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: rgba(212, 160, 23, .1);
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2300e676' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center
      }

      .gc-blue .ci2 li::before {
        background-color: rgba(59, 130, 246, .1);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
      }

      .gc-gold .ci2 li::before {
        background-color: rgba(240, 196, 48, .1);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23f0c430' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
      }

      .crs2-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: auto;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, .06)
      }

      .cp2 {
        font-family: var(--heading);
        font-size: 24px;
        font-weight: 800
      }

      .cp2.free {
        background: linear-gradient(135deg, #D4A017 0%, #F0C14B 50%, #FFE082 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
      }

      .cp2.gp2 {
        background: linear-gradient(135deg, #FFD700 0%, #FFE566 50%, #FFF3B0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
      }

      .cbx2 {
        display: block;
        text-align: center;
        padding: 14px 24px;
        border-radius: 100px;
        font-family: var(--heading);
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: .02em;
        transition: all .3s;
        position: relative;
        overflow: hidden;
        isolation: isolate;
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%)
      }

      .cbx2::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, .05) 40%, transparent 100%);
        pointer-events: none;
        transition: opacity .3s
      }

      .cbx2::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 100px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .15);
        pointer-events: none
      }

      .cbx2.og2 {
        background: rgba(212, 160, 23, .85);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .1)
      }

      .cbx2.og2:hover {
        background: rgba(212, 160, 23, .95);
        transform: translateY(-2px)
      }

      .cbx2.sg2 {
        background: rgba(45, 110, 220, .85);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .1)
      }

      .cbx2.sg2:hover {
        background: rgba(50, 115, 230, .95);
        transform: translateY(-2px)
      }

      .cbx2.sgo2 {
        background: rgba(190, 150, 30, .85);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .1)
      }

      .cbx2.sgo2:hover {
        background: rgba(200, 160, 35, .95);
        transform: translateY(-2px)
      }

      .cbx2:hover::before {
        opacity: .8
      }

      /* Course card glow — only on hover */
      .crs2-light {
        display: none
      }

      .courses-grid .crs2:hover {
        box-shadow: 0 32px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 40px rgba(212, 160, 23, .2), 0 0 90px rgba(212, 160, 23, .1)
      }

      .courses-grid .gc-blue:hover {
        box-shadow: 0 32px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 40px rgba(59, 130, 246, .25), 0 0 90px rgba(59, 130, 246, .12)
      }

      .courses-grid .gc-gold:hover {
        box-shadow: 0 32px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 40px rgba(240, 196, 48, .2), 0 0 90px rgba(240, 196, 48, .1)
      }

      /* Commission callout */
      /* Commission card — glass style matching plan cards */
      .comm2 {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        gap: 16px;
        padding: 28px 32px;
        border-radius: 20px;
        background: rgba(255, 255, 255, .02);
        backdrop-filter: blur(50px) saturate(180%) brightness(108%);
        -webkit-backdrop-filter: blur(50px) saturate(180%) brightness(108%);
        border: 1px solid rgba(212, 160, 23, .1);
        margin-top: 40px;
        overflow: hidden;
        transition: all .5s cubic-bezier(.22, 1, .36, 1);
        box-shadow: 0 4px 30px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(240, 193, 75, .06);
        cursor: pointer
      }

      /* Top light streak like plan cards */
      .comm2::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 60%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(240, 193, 75, .25));
        pointer-events: none
      }

      /* Radial glow top-right */
      .comm2::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 90% 5%, rgba(240, 193, 75, .1) 0%, rgba(240, 193, 75, .04) 25%, rgba(240, 193, 75, .01) 50%, transparent 80%);
        pointer-events: none;
        border-radius: 24px
      }

      .comm2:hover {
        transform: translateY(-4px);
        border-color: rgba(212, 160, 23, .25);
        box-shadow: 0 0 50px rgba(240, 193, 75, .12), 0 32px 80px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(240, 193, 75, .12)
      }

      /* Percentage badge */
      .comm2-icon {
        display: none
      }

      .comm2-icon svg {
        display: none
      }

      .comm2-big-pct {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-bottom: 8px
      }

      .comm2-pct-big {
        font-family: var(--heading);
        font-size: 48px;
        font-weight: 800;
        background: linear-gradient(135deg, #D4A017 0%, #F0C14B 50%, #FFE082 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
        letter-spacing: -1px
      }

      .comm2-pct-label {
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        background: linear-gradient(135deg, #D4A017 0%, #F0C14B 50%, #FFE082 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
      }

      /* Text */
      .comm2-text {
        position: relative;
        z-index: 1;
        font-size: 14px;
        color: var(--t2);
        line-height: 1.7
      }

      .comm2-text strong {
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        display: block;
        margin-bottom: 2px
      }

      .comm2-pct {
        font-family: var(--heading);
        font-weight: 700;
        background: linear-gradient(135deg, #D4A017 0%, #F0C14B 50%, #FFE082 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
      }

      .comm2-sub {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--t3);
        margin-top: 6px;
        letter-spacing: .2px
      }

      .comm2-sub::before {
        content: '';
        width: 16px;
        height: 1px;
        background: linear-gradient(90deg, var(--al), transparent);
        flex-shrink: 0
      }

      /* Arrow CTA */
      .comm2-arrow {
        position: relative;
        z-index: 1;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(212, 160, 23, .08);
        border: 1px solid rgba(212, 160, 23, .12);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .4s cubic-bezier(.22, 1, .36, 1)
      }

      .comm2-arrow svg {
        width: 18px;
        height: 18px;
        color: var(--al);
        transition: all .35s cubic-bezier(.22, 1, .36, 1)
      }

      .comm2:hover .comm2-arrow {
        background: var(--accent);
        border-color: var(--accent);
        box-shadow: 0 0 24px var(--accent-glow)
      }

      .comm2:hover .comm2-arrow svg {
        color: #000;
        transform: translateX(3px)
      }

      /* Decorative isotipo ghost */
      .comm2-iso {
        position: absolute;
        top: -30px;
        right: -30px;
        width: 280px;
        height: 280px;
        opacity: .1;
        pointer-events: none;
        z-index: 0;
        background-image: url('/landing/isotipo-3d.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transform: rotate(-15deg)
      }

      /* Light theme */
      [data-theme="light"] .comm2 {
        background: rgba(255, 255, 255, .5);
        border-color: rgba(212, 160, 23, .12);
        box-shadow: 0 8px 32px rgba(0, 0, 0, .04), inset 0 1px 0 rgba(255, 255, 255, .6)
      }

      [data-theme="light"] .comm2:hover {
        background: rgba(255, 255, 255, .65);
        box-shadow: 0 0 40px rgba(212, 160, 23, .08), 0 20px 60px rgba(0, 0, 0, .06)
      }

      [data-theme="light"] .comm2::after {
        background: radial-gradient(ellipse at 90% 5%, rgba(212, 160, 23, .08) 0%, transparent 60%)
      }

      [data-theme="light"] .comm2-icon {
        background: rgba(212, 160, 23, .06);
        border-color: rgba(212, 160, 23, .1)
      }

      [data-theme="light"] .comm2-text strong {
        color: #1a1408
      }

      [data-theme="light"] .comm2-arrow {
        background: rgba(212, 160, 23, .06);
        border-color: rgba(212, 160, 23, .1)
      }

      [data-theme="light"] .comm2:hover .comm2-arrow {
        background: var(--accent);
        border-color: var(--accent)
      }

      /* AI / ROYAL BOT */
      .ai-features {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-top: 24px
      }

      .ai-feat {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 13px;
        color: var(--t2);
        line-height: 1.5
      }

      .ai-feat strong {
        color: var(--t1);
        font-weight: 600;
        display: block;
        margin-bottom: 1px
      }

      .ai-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: rgba(212, 160, 23, .06);
        border: 1px solid rgba(212, 160, 23, .1);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0
      }

      .ai-visual {
        padding: 24px;
        border-radius: 10px
      }

      .ai-bot-card {
        border-radius: 10px;
        overflow: hidden
      }

      .ai-bot-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border)
      }

      .ai-bot-name {
        font-family: var(--heading);
        font-size: 16px;
        font-weight: 700;
        color: var(--t1)
      }

      .ai-bot-badge {
        padding: 2px 8px;
        border-radius: 6px;
        font-size: 9px;
        font-weight: 700;
        background: rgba(212, 160, 23, .1);
        color: var(--al);
        font-family: var(--heading);
        letter-spacing: .5px
      }

      .ai-bot-msg {
        padding: 18px 0;
        display: flex;
        flex-direction: column;
        gap: 12px
      }

      .ai-msg {
        padding: 10px 14px;
        border-radius: 10px;
        font-size: 12px;
        line-height: 1.6;
        max-width: 85%
      }

      .ai-msg-user {
        background: rgba(255, 255, 255, .04);
        border: 1px solid var(--border);
        color: var(--t2);
        align-self: flex-end;
        border-bottom-right-radius: 4px
      }

      .ai-msg-bot {
        background: rgba(212, 160, 23, .04);
        border: 1px solid rgba(212, 160, 23, .08);
        color: var(--t1);
        align-self: flex-start;
        border-bottom-left-radius: 4px
      }

      .ai-typing {
        display: inline
      }

      .ai-bot-input {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        background: rgba(255, 255, 255, .02);
        border: 1px solid var(--border);
        border-radius: 8px;
        font-size: 11px;
        color: var(--t3)
      }

      /* FAQ */
      .faq {
        max-width: 640px;
        margin: 0 auto
      }

      .fi {
        border-bottom: 1px solid var(--border)
      }

      .fq {
        width: 100%;
        color: var(--t1);
        padding: 16px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        transition: color .2s;
        font-family: var(--heading)
      }

      .fq:hover {
        color: var(--al)
      }

      .fq svg {
        width: 14px;
        height: 14px;
        color: var(--t3);
        transition: transform .3s;
        flex-shrink: 0;
        margin-left: 14px
      }

      .fi.o .fq svg {
        transform: rotate(180deg)
      }

      .fa {
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s
      }

      .fi.o .fa {
        max-height: 200px
      }

      .fa p {
        padding-bottom: 16px;
        font-size: 13px;
        color: var(--t2);
        line-height: 1.7
      }

      /* CTA */
      .cta-f {
        padding: 120px 0;
        text-align: center;
        position: relative;
        z-index: 1;
        overflow: hidden
      }

      .cta-f::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 600px;
        height: 400px;
        background: radial-gradient(ellipse, rgba(240, 193, 75, .15) 0%, transparent 70%);
        pointer-events: none
      }

      .cta-f h2 {
        font-family: var(--heading);
        font-size: clamp(24px, 3.2vw, 38px);
        font-weight: 700;
        letter-spacing: -1px;
        margin-bottom: 10px;
        line-height: 1.1
      }

      .cta-f h2 .gr {
        background: linear-gradient(135deg, #D4A017 0%, #F0C14B 50%, #FFE082 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
      }

      .cta-f>p {
        font-size: 15px;
        color: var(--t2);
        margin-bottom: 28px
      }

      .cta-link {
        display: block;
        margin-top: 12px;
        font-size: 12px;
        color: var(--t3);
        transition: color .2s
      }

      .cta-link:hover {
        color: var(--al)
      }

      /* FOOTER */
      .foot {
        padding: 36px 0 20px;
        border-top: 1px solid var(--border);
        position: relative;
        z-index: 1
      }

      .foot-g {
        display: grid;
        grid-template-columns: 1.8fr 1fr 1fr;
        gap: 36px;
        margin-bottom: 28px
      }

      .f-brand .f-logo {
        margin-bottom: 10px
      }

      .f-logo-img {
        height: 80px;
        width: auto
      }

      .f-brand .ft {
        font-size: 12px;
        color: var(--t3);
        line-height: 1.6
      }

      .f-col h4 {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: var(--t3);
        margin-bottom: 12px;
        font-family: var(--heading)
      }

      .f-col a {
        display: block;
        font-size: 12px;
        color: var(--t2);
        padding: 3px 0;
        transition: color .2s
      }

      .f-col a:hover {
        color: var(--al)
      }

      .f-bot {
        padding-top: 16px;
        border-top: 1px solid var(--border);
        text-align: center;
        font-size: 9px;
        color: var(--t3);
        line-height: 1.8
      }

      @keyframes fu {
        from {
          opacity: 0;
          transform: translateY(18px)
        }

        to {
          opacity: 1;
          transform: translateY(0)
        }
      }

      @keyframes pulse {

        0%,
        100% {
          opacity: 1
        }

        50% {
          opacity: .3
        }
      }

      @keyframes scroll {
        0% {
          transform: translateX(0)
        }

        100% {
          transform: translateX(-50%)
        }
      }

      @keyframes grShift {
        0% {
          background-position: 0% 50%
        }

        50% {
          background-position: 100% 50%
        }

        100% {
          background-position: 0% 50%
        }
      }

      .rv {
        opacity: 0;
        transform: translateY(22px);
        transition: all .6s cubic-bezier(.22, 1, .36, 1)
      }

      .rv.v {
        opacity: 1;
        transform: translateY(0)
      }

      @media(max-width:1024px) {
        .split {
          grid-template-columns: 1fr;
          gap: 32px
        }

        .split-rev {
          direction: ltr
        }

        .pricing {
          grid-template-columns: 1fr;
          max-width: 400px;
          margin-left: auto;
          margin-right: auto
        }

        .courses-grid {
          grid-template-columns: 1fr;
          max-width: 400px;
          margin-left: auto;
          margin-right: auto
        }

        .foot-g {
          grid-template-columns: 1fr;
          gap: 18px
        }

        .stats {
          grid-template-columns: repeat(3, 1fr)
        }

        .n-links {
          margin: 0 auto
        }
      }

      @media(max-width:768px) {
        .n-links {
          display: none
        }

        .mob-btn {
          display: flex
        }

        .nav .ctn {
          justify-content: space-between;
          gap: 10px
        }

        .n-right {
          margin-left: auto
        }

        .hero {
          padding: 100px 0 60px
        }

        .sec {
          padding: 64px 0
        }

        .calc-c {
          padding: 20px
        }

        .stats {
          grid-template-columns: 1fr
        }

        .photo-fade img {
          max-width: 280px
        }
      }

      /* Font: Rethink Sans for headings + Tenor Sans for body */
      h1,
      h2,
      .stitle,
      .crs2-title,
      .calc-t {
        font-family: var(--heading)
      }

      .tag,

      .p-name,
      .p-price,
      .p-btn,
      .p-tag,
      .p-range,
      .n-cta,
      .ct2,
      .cbx2,
      .cp2,
      .stat-v,
      .stat-l,
      .btn,
      .fq,
      .acc-b,
      .cf label,
      .cp-title,
      .cp-pct,
      .tk-p,
      .tk-v,
      .cm-num,
      .cr-hero .l,
      .cr-hero .v,
      .cr-sm .l,
      .cr-sm .v {
        font-family: var(--heading) !important
      }

      /* SIDNEI CARD */

      /* TOP: Photo left + Info right */

      /* ABOUT — OPEN LAYOUT */

      [data-theme="light"] @media(max-width:800px) {}

      .sid-photo-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        display: block
      }

      .sid-info .stitle {
        font-size: clamp(32px, 4vw, 44px);
        margin-bottom: 16px;
        line-height: 1.1
      }

      .sid-info .stitle .gr {
        font-size: clamp(38px, 4.5vw, 52px)
      }

      .sid-info .sdesc {
        margin-bottom: 0;
        font-size: 17px;
        line-height: 1.7;
        color: var(--t2)
      }

      /* QUOTE — hero banner style */

      .sid-quote-icon svg {
        width: 22px;
        height: 22px;
        color: var(--al)
      }

      .sid-quote-text strong {
        color: var(--al);
        font-weight: 800;
        font-style: normal
      }

      /* HORIZONTAL TIMELINE — animated on hover */
      /* ABOUT V2 — HERO STYLE */
      .sid-v2 {
        position: relative;
        overflow: hidden;
        padding: 80px 0
      }

      .sid-v2-bg {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden
      }

      .sid-v2-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px)
      }

      .sid-v2-orb1 {
        width: 500px;
        height: 500px;
        top: 10%;
        right: 15%;
        background: radial-gradient(circle, rgba(212, 160, 23, .15) 0%, transparent 65%);
        animation: orbDrift2 22s ease-in-out infinite
      }

      .sid-v2-orb2 {
        width: 350px;
        height: 350px;
        bottom: 5%;
        left: 10%;
        background: radial-gradient(circle, rgba(240, 193, 75, .12) 0%, transparent 60%);
        animation: orbDrift3 18s ease-in-out 4s infinite
      }

      /* Layout grid: foto + conteúdo */
      .sid-v2-grid {
        display: grid;
        grid-template-columns: .9fr 1.1fr;
        gap: 48px;
        align-items: center;
        position: relative;
        z-index: 2
      }

      /* Photo card glass */
      .sid-v2-photo {
        position: relative;
        border-radius: 24px;
        overflow: hidden;
        aspect-ratio: 3/4;
        background: rgba(255, 255, 255, .02);
        border: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 0 12px 48px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06)
      }

      .sid-v2-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 20%;
        display: block
      }

      .sid-v2-photo-fade {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 50%, rgba(13, 13, 13, .9) 100%);
        pointer-events: none
      }

      .sid-v2-photo-info {
        position: absolute;
        bottom: 24px;
        left: 24px;
        right: 24px;
        z-index: 2
      }

      .sid-v2-photo-name {
        font-family: var(--heading);
        font-size: 28px;
        font-weight: 800;
        color: #fff;
        line-height: 1.1
      }

      .sid-v2-photo-role {
        font-size: 12px;
        background: linear-gradient(135deg, #D4A017 0%, #F0C14B 50%, #FFE082 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-top: 6px
      }

      /* Right content */
      .sid-v2-content {
        display: flex;
        flex-direction: column;
        gap: 24px
      }

      .sid-v2-eyebrow {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        background: linear-gradient(135deg, #D4A017 0%, #F0C14B 50%, #FFE082 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        opacity: .7
      }

      .sid-v2-h2 {
        font-family: 'Rethink Sans', var(--heading), sans-serif;
        font-size: clamp(28px, 3.5vw, 42px);
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -.5px
      }

      .sid-v2-h2 .sid-name {
        display: inline;
        background: linear-gradient(135deg, #D4A017 0%, #F0C14B 50%, #FFE082 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
      }

      .sid-v2-desc {
        font-size: 15px;
        color: var(--t2);
        line-height: 1.7;
        max-width: 480px
      }

      .sid-v2-desc strong {
        color: var(--t1);
        font-weight: 600
      }

      .sid-v2-quote {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        padding: 20px 24px;
        border-radius: 16px;
        background: rgba(212, 160, 23, .04);
        border: 1px solid rgba(212, 160, 23, .12);
        backdrop-filter: blur(12px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .06)
      }

      .sid-v2-quote svg {
        flex-shrink: 0;
        color: var(--al);
        opacity: .4;
        margin-top: 2px
      }

      .sid-v2-quote p {
        font-size: 14px;
        color: var(--t2);
        line-height: 1.7;
        margin: 0
      }

      .sid-v2-quote strong {
        color: var(--t1)
      }

      /* Stats em mini-cards */
      .sid-v2-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px
      }

      .sid-v2-st {
        text-align: center;
        padding: 16px 8px;
        border-radius: 14px;
        background: rgba(255, 255, 255, .02);
        border: 1px solid rgba(255, 255, 255, .06);
        transition: all .3s
      }

      .sid-v2-st:hover {
        border-color: rgba(212, 160, 23, .15);
        background: rgba(212, 160, 23, .03)
      }

      .sid-v2-st-num {
        font-family: var(--heading);
        font-size: 36px;
        font-weight: 800;
        background: linear-gradient(135deg, #D4A017 0%, #F0C14B 50%, #FFE082 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: block;
        line-height: 1
      }

      .sid-v2-st-suffix {
        font-size: 20px;
        font-weight: 700;
        background: linear-gradient(135deg, #D4A017 0%, #F0C14B 50%, #FFE082 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: inline;
        margin-left: 1px
      }

      .sid-v2-st-lbl {
        font-size: 10px;
        color: var(--t3);
        text-transform: uppercase;
        letter-spacing: .5px;
        margin-top: 6px;
        display: block
      }

      .sid-v2-st-div {
        display: none
      }

      .sid-v2-ctas {
        display: flex;
        gap: 12px;
        align-items: center
      }

      .sid-v2-btn-primary {
        padding: 16px 32px;
        background: rgba(212, 160, 23, .85);
        color: #fff;
        font-family: var(--heading);
        font-weight: 700;
        font-size: 14px;
        border-radius: 100px;
        text-decoration: none;
        transition: all .3s;
        border: 1px solid rgba(255, 255, 255, .1);
        text-transform: uppercase;
        letter-spacing: .02em;
        position: relative;
        overflow: hidden;
        isolation: isolate;
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%)
      }

      .sid-v2-btn-primary::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, .05) 40%, transparent 100%);
        pointer-events: none;
        transition: opacity .3s
      }

      .sid-v2-btn-primary::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 100px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .15);
        pointer-events: none
      }

      .sid-v2-btn-primary:hover {
        background: rgba(212, 160, 23, .95);
        transform: translateY(-2px)
      }

      .sid-v2-btn-primary:hover::before {
        opacity: .8
      }

      .sid-v2-btn-ghost {
        padding: 16px 32px;
        color: var(--t1);
        font-family: var(--heading);
        font-weight: 600;
        font-size: 14px;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 100px;
        text-decoration: none;
        transition: all .3s;
        background: rgba(255, 255, 255, .08);
        position: relative;
        overflow: hidden;
        isolation: isolate;
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%)
      }

      .sid-v2-btn-ghost::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .03) 40%, transparent 100%);
        pointer-events: none;
        transition: opacity .3s
      }

      .sid-v2-btn-ghost::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 100px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .1);
        pointer-events: none
      }

      .sid-v2-btn-ghost:hover {
        color: #fff;
        background: rgba(255, 255, 255, .12);
        transform: translateY(-2px)
      }

      .sid-v2-btn-ghost:hover::before {
        opacity: .8
      }

      @keyframes float {

        0%,
        100% {
          transform: translateY(0px)
        }

        50% {
          transform: translateY(-12px)
        }
      }

      /* Timeline — Minimalist Inline */
      .sid-tl-wrap {
        margin-top: 56px;
        position: relative;
        z-index: 2;
        padding: 0 40px
      }

      .sid-tl-inline {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        gap: 24px;
        position: relative;
        padding-top: 16px
      }

      .sid-tl-inline::before {
        content: '';
        position: absolute;
        top: 21px;
        left: 32px;
        right: 32px;
        height: 1px;
        background: rgba(255, 255, 255, .08)
      }

      .sid-tl-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        position: relative;
        z-index: 1
      }

      .sid-tl-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: linear-gradient(135deg, #D4A017 0%, #F0C14B 50%, #FFE082 100%);
        box-shadow: 0 0 8px rgba(212, 160, 23, .35)
      }

      .sid-tl-yr {
        font-family: var(--heading);
        font-size: 20px;
        font-weight: 800;
        background: linear-gradient(135deg, #D4A017 0%, #F0C14B 50%, #FFE082 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1
      }

      .sid-tl-title {
        font-family: var(--heading);
        font-size: 12px;
        font-weight: 700;
        color: var(--t2);
        text-transform: uppercase;
        letter-spacing: 1px
      }

      /* Light theme */
      [data-theme="light"] .sid-v2-quote {
        background: rgba(40, 40, 40, .02)
      }

      [data-theme="light"] .sid-v2-btn-ghost {
        border-color: rgba(40, 40, 40, .1);
        color: var(--t1)
      }

      [data-theme="light"] .sid-tl-inline::before {
        background: rgba(0, 0, 0, .08)
      }

      @media(max-width:900px) {
        .sid-v2-grid {
          grid-template-columns: 1fr;
          gap: 32px
        }

        .sid-v2-photo {
          aspect-ratio: 1/1;
          max-width: 320px;
          margin: 0 auto
        }

        .sid-v2-content {
          align-items: center;
          text-align: center
        }

        .sid-v2-stats {
          grid-template-columns: repeat(3, 1fr)
        }

        .sid-v2-ctas {
          justify-content: center;
          flex-wrap: wrap
        }

        .sid-v2-quote {
          text-align: left
        }

        .sid-tl-wrap {
          padding: 0 24px
        }
      }

      /* BOTTOM: Stats + CTAs (compact) */
      .sid-bottom {
        padding: 0 40px 32px;
        display: flex;
        gap: 20px;
        align-items: center;
        flex-wrap: wrap
      }

      .sid-stat:hover {
        border-color: rgba(212, 160, 23, .15);
        background: rgba(212, 160, 23, .03)
      }

      .sid-btn-primary:hover {
        background: var(--al);
        transform: translateY(-2px);
        box-shadow: 0 10px 32px rgba(212, 160, 23, .3)
      }

      .sid-btn-primary svg {
        width: 18px;
        height: 18px
      }

      .sid-btn-secondary:hover {
        border-color: rgba(255, 255, 255, .16);
        background: rgba(255, 255, 255, .07);
        transform: translateY(-1px)
      }

      .sid-btn-secondary svg {
        width: 16px;
        height: 16px
      }

      @media(max-width:900px) {
        .sid-top {
          grid-template-columns: 1fr
        }

        .sid-info {
          padding: 28px 24px 20px
        }

        .sid-info .stitle {
          font-size: 32px
        }

        .sid-info .stitle .gr {
          font-size: 38px
        }

        .sid-quote-bar {
          padding: 20px 24px;
          flex-direction: column;
          text-align: center;
          gap: 12px
        }

        .sid-bottom {
          padding: 0 24px 28px;
          flex-direction: column
        }
      }

      @media(max-width:600px) {
        .sid-tl-wrap {
          padding: 0 16px
        }

        .sid-tl-inline {
          gap: 12px
        }

        .sid-tl-inline::before {
          left: 16px;
          right: 16px
        }

        .sid-tl-yr {
          font-size: 16px
        }

        .sid-tl-title {
          font-size: 10px
        }
      }

      /* =========================================
   NEW SECTIONS CSS
   ========================================= */

      /* NAV flex for toggle */
      .n-right {
        display: flex;
        align-items: center;
        gap: 12px
      }

      /* RENTABILIDADE — SLIDE REVEAL CARDS */
      .slide-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        max-width: 960px;
        margin: 0 auto
      }

      .slide-card {
        position: relative;
        height: 280px;
        border-radius: 20px;
        overflow: hidden;
        cursor: pointer;
        transition: all .5s cubic-bezier(.22, 1, .36, 1);
        backdrop-filter: blur(40px) saturate(180%) brightness(1.06);
        -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.06)
      }

      .slide-card-hl {
        z-index: 2
      }

      /* Back layer — sits behind, always visible when front slides away */
      .slide-back {
        position: absolute;
        inset: 0;
        border-radius: 20px;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 28px 20px;
        z-index: 3;
        transform: translateY(-100%);
        transition: transform .5s cubic-bezier(.33, 1, .68, 1) .15s;
        box-shadow: 0 4px 30px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(255, 255, 255, .03)
      }

      .slide-back-hl {
        border-color: rgba(212, 160, 23, .15);
        background: rgba(212, 160, 23, .04)
      }

      .slide-back-label {
        font-size: 11px;
        color: var(--t3);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 12px
      }

      .slide-back-val {
        font-family: var(--heading);
        font-size: 36px;
        font-weight: 800;
        color: var(--t1);
        line-height: 1;
        margin-bottom: 6px;
        display: flex;
        align-items: baseline;
        white-space: nowrap
      }

      .slide-val-hl {
        color: var(--al);
        text-shadow: 0 0 40px rgba(212, 160, 23, .2)
      }

      .slide-plus {
        font-size: 24px;
        color: var(--al);
        margin-right: 2px
      }

      .slide-back-mult {
        font-size: 12px;
        font-weight: 700;
        color: var(--t3);
        letter-spacing: 1px;
        margin-bottom: 20px
      }

      .slide-mult-hl {
        color: var(--al)
      }

      .slide-back-bar {
        width: 80%;
        height: 4px;
        background: rgba(255, 255, 255, .04);
        border-radius: 100px;
        overflow: hidden
      }

      .slide-bar-fill {
        height: 100%;
        border-radius: 100px;
        background: rgba(255, 255, 255, .12)
      }

      .slide-bar-hl {
        background: linear-gradient(90deg, var(--accent), var(--al), var(--em))
      }

      /* Front layer — slides down on hover to reveal back */
      .slide-front {
        position: absolute;
        inset: 0;
        border-radius: 20px;
        background: rgba(255, 255, 255, .03);
        border: 1px solid rgba(255, 255, 255, .08);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 28px 20px;
        z-index: 2;
        transition: transform .5s cubic-bezier(.33, 1, .68, 1);
        box-shadow: 0 4px 30px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .1)
      }

      .slide-front::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 95%, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 35%, transparent 70%);
        pointer-events: none;
        border-radius: 20px
      }

      .slide-front::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
        pointer-events: none
      }

      .slide-front-hl {
        border-color: rgba(212, 160, 23, .1);
        background: rgba(212, 160, 23, .03)
      }

      .slide-front-hl::before {
        background: radial-gradient(ellipse at 50% 95%, rgba(212, 160, 23, .08) 0%, rgba(212, 160, 23, .03) 35%, transparent 70%)
      }

      .slide-front-hl::after {
        background: linear-gradient(90deg, transparent, rgba(212, 160, 23, .15), transparent)
      }

      .slide-card:hover .slide-front {
        transform: translateY(105%)
      }

      .slide-card:hover .slide-back {
        transform: translateY(0)
      }

      .slide-card.revealed .slide-front {
        transform: translateY(105%)
      }

      .slide-card.revealed .slide-back {
        transform: translateY(0)
      }

      .slide-hl-glow {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 30%, rgba(212, 160, 23, .08), transparent 70%);
        pointer-events: none
      }

      .slide-icon {
        width: auto;
        height: auto;
        border-radius: 0;
        background: none;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        transition: transform .3s;
        backdrop-filter: none;
        -webkit-backdrop-filter: none
      }

      .slide-icon svg {
        width: 28px;
        height: 28px;
        color: var(--t2);
        stroke-width: 1.5
      }

      .slide-icon-hl {
        background: none;
        border-color: transparent
      }

      .slide-icon-hl svg {
        color: var(--al)
      }

      .slide-card:hover .slide-icon {
        transform: translateY(-2px)
      }

      .slide-name {
        font-family: var(--heading);
        font-size: 16px;
        font-weight: 700;
        color: var(--t1);
        margin-bottom: 6px
      }

      .slide-rate {
        font-size: 13px;
        color: var(--t3);
        margin-bottom: 24px
      }

      .slide-rate-hl {
        color: var(--al);
        font-weight: 600
      }

      .slide-hint {
        font-size: 11px;
        color: var(--t3);
        opacity: .4;
        letter-spacing: .5px;
        transition: opacity .3s
      }

      .slide-hint-hl {
        color: var(--al);
        opacity: .5
      }

      .slide-card:hover .slide-hint {
        opacity: 0
      }

      /* Light theme */
      [data-theme="light"] .slide-front {
        background: rgba(255, 255, 255, .5);
        border-color: rgba(40, 40, 40, .06)
      }

      [data-theme="light"] .slide-front-hl {
        border-color: rgba(212, 160, 23, .12);
        background: rgba(212, 160, 23, .02)
      }

      [data-theme="light"] .slide-back {
        background: rgba(255, 255, 255, .6);
        border-color: rgba(40, 40, 40, .08)
      }

      [data-theme="light"] .slide-back-hl {
        border-color: rgba(212, 160, 23, .15);
        background: rgba(212, 160, 23, .03)
      }

      [data-theme="light"] .slide-icon {
        background: rgba(40, 40, 40, .04);
        border-color: rgba(40, 40, 40, .06)
      }

      [data-theme="light"] .slide-back-bar {
        background: rgba(40, 40, 40, .04)
      }

      [data-theme="light"] .slide-bar-fill {
        background: rgba(40, 40, 40, .1)
      }

      @media(max-width:800px) {
        .slide-grid {
          grid-template-columns: 1fr 1fr;
          gap: 14px
        }

        .slide-card {
          height: 240px
        }
      }

      @media(max-width:500px) {
        .slide-grid {
          grid-template-columns: 1fr 1fr;
          gap: 10px
        }

        .slide-card {
          height: 220px
        }

        .slide-back-val {
          font-size: 28px
        }

        .slide-front,
        .slide-back {
          padding: 20px 14px
        }
      }

      /* Royal Binary card — isotipo with fade */
      .slide-card-iso {
        position: absolute;
        top: -60px;
        right: -85px;
        width: 320px;
        height: 320px;
        opacity: .22;
        pointer-events: none;
        z-index: 1;
        background-image: url('/landing/isotipo-3d.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transform: rotate(-15deg);
        -webkit-mask: radial-gradient(circle at 100% 0%, #000 15%, rgba(0, 0, 0, .5) 35%, transparent 65%);
        mask: radial-gradient(circle at 100% 0%, #000 15%, rgba(0, 0, 0, .5) 35%, transparent 65%)
      }

      .slide-note {
        font-size: 11px;
        color: var(--t3);
        text-align: center;
        line-height: 1.7;
        margin-top: 24px
      }

      .slide-note strong {
        color: var(--t2)
      }

      /* TELEGRAM */
      .tg-hero {
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(0, 136, 204, .1);
        background: linear-gradient(180deg, rgba(0, 136, 204, .03) 0%, rgba(0, 136, 204, .005) 100%);
        padding: 56px 40px 48px;
        text-align: center
      }

      .tg-hero:hover {
        border-color: rgba(0, 136, 204, .18)
      }

      .tg-hero-bg {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 0%, rgba(0, 136, 204, .06), transparent 70%);
        pointer-events: none
      }

      .tg-hero-content {
        position: relative;
        z-index: 2
      }

      .tg-badge {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: linear-gradient(135deg, #0088cc, #00a8e8);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 24px;
        box-shadow: 0 8px 32px rgba(0, 136, 204, .2);
        animation: tgFloat 4s ease-in-out infinite
      }

      .tg-badge svg {
        width: 28px;
        height: 28px;
        color: #fff;
        display: block;
        margin: 0 auto
      }

      @keyframes tgFloat {

        0%,
        100% {
          transform: translateY(0)
        }

        50% {
          transform: translateY(-6px)
        }
      }

      .tg-desc {
        font-size: 16px;
        color: var(--t2);
        line-height: 1.7;
        max-width: 540px;
        margin: 0 auto 36px
      }

      .tg-strip {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
        gap: 0;
        align-items: start;
        margin-bottom: 40px;
        padding: 0 12px
      }

      .tg-strip-div {
        width: 1px;
        height: 48px;
        background: rgba(255, 255, 255, .06);
        align-self: center;
        margin: 0 4px
      }

      .tg-strip-item {
        text-align: center;
        padding: 12px 8px;
        border-radius: 10px;
        transition: all .3s
      }

      .tg-strip-item:hover {
        background: rgba(0, 136, 204, .03)
      }

      .tg-strip-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: none;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 10px;
        transition: all .35s
      }

      .tg-strip-icon svg {
        width: 28px;
        height: 28px;
        color: #29B6F6
      }

      .tg-strip-item:hover .tg-strip-icon {
        transform: translateY(-2px)
      }

      .tg-strip-label {
        font-family: var(--heading);
        font-size: 13px;
        font-weight: 700;
        color: var(--t1);
        margin-bottom: 4px
      }

      .tg-strip-sub {
        font-size: 12px;
        color: var(--t3);
        line-height: 1.5
      }

      .tg-cta-area {
        display: flex;
        justify-content: center
      }

      /* Telegram button — solid style matching hero CTA */
      .tg-btn {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 16px 36px;
        background: rgba(30, 150, 220, .85);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 100px;
        text-decoration: none;
        transition: all .3s;
        font-family: var(--heading);
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: .03em;
        position: relative;
        overflow: hidden;
        isolation: isolate;
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%)
      }

      .tg-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, .05) 40%, transparent 100%);
        pointer-events: none;
        transition: opacity .3s
      }

      .tg-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 100px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .15);
        pointer-events: none
      }

      .tg-btn:hover {
        transform: translateY(-2px);
        background: rgba(30, 150, 220, .95)
      }

      .tg-btn:hover::before {
        opacity: .8
      }

      .tg-btn svg {
        fill: currentColor
      }

      .tg-btn-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0
      }

      .tg-btn-icon svg {
        width: 20px;
        height: 20px;
        color: #fff
      }

      .tg-btn-text {
        display: none
      }

      .tg-btn-main {
        display: none
      }

      .tg-btn-sub {
        display: none
      }

      .tg-btn-arrow {
        display: none
      }

      /* CTA GAMIFIED */
      .cta-card {
        position: relative;
        max-width: 680px;
        margin: 0 auto;
        padding: 56px 40px;
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(212, 160, 23, .04) 0%, rgba(255, 255, 255, .01) 100%);
        border: 1px solid rgba(212, 160, 23, .1);
        overflow: hidden
      }

      .cta-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 400px;
        height: 400px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 1px solid rgba(212, 160, 23, .04);
        animation: ctaRingSpin 25s linear infinite
      }

      .cta-ring-2 {
        width: 300px;
        height: 300px;
        border-color: rgba(212, 160, 23, .03);
        animation-duration: 18s;
        animation-direction: reverse
      }

      @keyframes ctaRingSpin {
        to {
          transform: translate(-50%, -50%) rotate(360deg)
        }
      }

      /* CTA final button — gradient */
      .cta-main-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 18px 44px;
        background: rgba(212, 160, 23, .85);
        color: #fff;
        font-family: var(--heading);
        font-weight: 700;
        font-size: 15px;
        border-radius: 100px;
        text-decoration: none;
        transition: all .3s;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .1);
        text-transform: uppercase;
        letter-spacing: .03em;
        isolation: isolate;
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%)
      }

      .cta-main-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, .05) 40%, transparent 100%);
        pointer-events: none;
        transition: opacity .3s
      }

      .cta-main-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 100px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .15);
        pointer-events: none
      }

      .cta-main-btn:hover {
        transform: translateY(-2px);
        background: rgba(212, 160, 23, .95)
      }

      .cta-main-btn:hover::before {
        opacity: .8
      }

      .cta-trust {
        display: flex;
        justify-content: center;
        gap: 14px;
        margin-top: 24px;
        flex-wrap: wrap
      }

      .cta-trust span {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 600;
        color: var(--t1);
        padding: 10px 18px;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 10px;
        backdrop-filter: blur(8px);
        transition: all .3s
      }

      .cta-trust span:hover {
        background: rgba(212, 160, 23, .08);
        border-color: rgba(212, 160, 23, .2)
      }

      .cta-trust svg {
        color: var(--al);
        width: 18px;
        height: 18px;
        flex-shrink: 0
      }

      /* THEME TOGGLE */
      .theme-toggle {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .1);
        background: rgba(255, 255, 255, .04);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all .3s;
        flex-shrink: 0
      }

      .theme-toggle:hover {
        border-color: rgba(255, 255, 255, .2);
        background: rgba(255, 255, 255, .08)
      }

      .theme-toggle svg {
        width: 18px;
        height: 18px;
        color: var(--t2);
        transition: all .3s
      }

      .theme-toggle .sun {
        display: none
      }

      /* =========================================
   LIGHT THEME
   ========================================= */
      [data-theme="light"] {
        --bg: #F5F5F5;
        --bg2: #EDEDED;
        --glass: rgba(0, 0, 0, .015);
        --border: rgba(40, 40, 40, .08);
        --border2: rgba(40, 40, 40, .12);
        --t1: #1a1a1a;
        --t2: #888888;
        --t3: #999999
      }

      [data-theme="light"] body {
        background: var(--bg)
      }

      [data-theme="light"] canvas#heroBg {
        opacity: .12
      }

      [data-theme="light"] .n-logo-img {
        filter: brightness(.12)
      }

      [data-theme="light"] .nav .ctn {
        background: rgba(245, 247, 246, .85);
        border-color: rgba(40, 40, 40, .08);
        box-shadow: 0 4px 24px rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .5)
      }

      [data-theme="light"] .nav.s .ctn {
        background: rgba(245, 247, 246, .92);
        border-color: rgba(40, 40, 40, .1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .6)
      }

      [data-theme="light"] .mob-btn {
        border-color: rgba(40, 40, 40, .1)
      }

      [data-theme="light"] .theme-toggle {
        border-color: rgba(40, 40, 40, .12);
        background: rgba(40, 40, 40, .04)
      }

      [data-theme="light"] .theme-toggle:hover {
        border-color: rgba(40, 40, 40, .2);
        background: rgba(40, 40, 40, .08)
      }

      [data-theme="light"] .theme-toggle .sun {
        display: block
      }

      [data-theme="light"] .theme-toggle .moon {
        display: none
      }

      [data-theme="light"] .tag {
        background: rgba(212, 160, 23, .06);
        border-color: rgba(212, 160, 23, .12);
        color: var(--al)
      }

      [data-theme="light"] .tick {
        background: rgba(40, 40, 40, .02);
        border-color: rgba(40, 40, 40, .04)
      }

      [data-theme="light"] .vsl-wrap {
        background: rgba(255, 255, 255, .6);
        border-color: rgba(40, 40, 40, .06)
      }

      [data-theme="light"] .sid-quote-bar {
        background: rgba(212, 160, 23, .03);
        border-color: rgba(212, 160, 23, .06)
      }

      [data-theme="light"] [data-theme="light"] .sid-tl-dot {
        box-shadow: 0 0 8px rgba(212, 160, 23, .25)
      }

      [data-theme="light"] .sid-stat:hover {
        background: rgba(212, 160, 23, .03)
      }

      [data-theme="light"] .gc {
        background: rgba(255, 255, 255, .5);
        border-color: rgba(40, 40, 40, .06)
      }

      [data-theme="light"] .gc::after {
        opacity: .3
      }

      [data-theme="light"] .p-card::before {
        background: rgba(255, 255, 255, .75);
        backdrop-filter: blur(20px)
      }

      [data-theme="light"] .p-card::after {
        background: none
      }

      [data-theme="light"] .p-glass-border {
        border-color: rgba(40, 40, 40, .06)
      }

      [data-theme="light"] .p-side {
        background: rgba(255, 255, 255, .5);
        border-color: rgba(40, 40, 40, .06);
        box-shadow: 0 8px 36px rgba(0, 0, 0, .04)
      }

      [data-theme="light"] .p-side:hover {
        border-color: rgba(40, 40, 40, .12);
        box-shadow: 0 16px 48px rgba(0, 0, 0, .08)
      }

      [data-theme="light"] .p-feat {
        border-color: rgba(212, 160, 23, .15);
        box-shadow: 0 8px 40px rgba(212, 160, 23, .08)
      }

      [data-theme="light"] .p-btn {
        background: rgba(40, 40, 40, .04);
        border-color: rgba(40, 40, 40, .08);
        color: var(--t1)
      }

      [data-theme="light"] .p-side .p-btn {
        background: rgba(40, 40, 40, .04);
        border-color: rgba(40, 40, 40, .08);
        color: var(--t1)
      }

      [data-theme="light"] .p-side .p-btn:hover {
        background: rgba(40, 40, 40, .08);
        border-color: rgba(40, 40, 40, .14)
      }

      [data-theme="light"] .p-feat .p-btn {
        background: linear-gradient(135deg, var(--al), var(--em));
        color: #fff
      }

      [data-theme="light"] .p-sep {
        background: linear-gradient(90deg, transparent, rgba(40, 40, 40, .06), transparent)
      }

      [data-theme="light"] .p-fi-dot {
        background: rgba(40, 40, 40, .12)
      }

      [data-theme="light"] .p-feat .p-fi-dot {
        background: var(--al)
      }

      [data-theme="light"] .p-feat-glow,
      [data-theme="light"] .p-gold-glow {
        opacity: 0
      }

      [data-theme="light"] .p-gold {
        border-color: rgba(210, 170, 40, .12)
      }

      [data-theme="light"] .p-gold:hover {
        border-color: rgba(210, 170, 40, .2)
      }

      [data-theme="light"] .p-tag {
        background: var(--al);
        color: #fff
      }

      [data-theme="light"] .p-tag-gold {
        background: var(--gold);
        color: #fff
      }

      [data-theme="light"] .calc-wrap {
        background: rgba(255, 255, 255, .6);
        border-color: rgba(40, 40, 40, .06)
      }

      [data-theme="light"] .calc-wrap select,
      [data-theme="light"] .calc-wrap input[type="number"] {
        background: rgba(40, 40, 40, .03);
        border-color: rgba(40, 40, 40, .08);
        color: var(--t1)
      }

      [data-theme="light"] .cr-main {
        background: rgba(212, 160, 23, .03)
      }

      [data-theme="light"] .cr-r {
        border-color: rgba(40, 40, 40, .04)
      }

      [data-theme="light"] .tg-hero {
        background: linear-gradient(180deg, rgba(0, 136, 204, .02) 0%, rgba(255, 255, 255, .4) 100%);
        border-color: rgba(0, 136, 204, .08)
      }

      [data-theme="light"] .tg-strip-div {
        background: rgba(40, 40, 40, .06)
      }

      [data-theme="light"] .tg-strip-icon {
        background: rgba(0, 136, 204, .05);
        border-color: rgba(0, 136, 204, .08)
      }

      [data-theme="light"] .tg-btn {
        background: rgba(41, 182, 246, .1);
        border-color: rgba(41, 182, 246, .25);
        color: #0a3d5c
      }

      [data-theme="light"] .tg-btn svg {
        fill: currentColor
      }

      [data-theme="light"] .cta-card {
        background: linear-gradient(180deg, rgba(212, 160, 23, .02) 0%, rgba(255, 255, 255, .4) 100%);
        border-color: rgba(212, 160, 23, .08)
      }

      [data-theme="light"] .cta-ring {
        border-color: rgba(212, 160, 23, .03)
      }

      [data-theme="light"] .fi {
        border-color: rgba(40, 40, 40, .05)
      }

      [data-theme="light"] .fq {
        color: var(--t1)
      }

      [data-theme="light"] .acc-b {
        color: var(--t1);
        border-color: rgba(40, 40, 40, .05)
      }

      [data-theme="light"] .foot {
        border-color: rgba(40, 40, 40, .05)
      }

      [data-theme="light"] .f-bot {
        border-color: rgba(40, 40, 40, .05);
        color: var(--t3)
      }

      [data-theme="light"] .vsl-frame {
        background: rgba(255, 255, 255, .35);
        border-color: rgba(40, 40, 40, .08);
        box-shadow: 0 16px 48px rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .5)
      }

      /* =========================================
   RESPONSIVE — new sections only
   ========================================= */
      @media(max-width:800px) {
        .tg-hero {
          padding: 40px 24px 36px
        }

        .tg-strip {
          grid-template-columns: 1fr 1fr;
          gap: 12px;
          padding: 0
        }

        .tg-strip-div {
          display: none
        }
      }

      @media(max-width:500px) {
        .tg-strip {
          grid-template-columns: 1fr
        }

        .tg-strip-item {
          display: flex;
          text-align: left;
          gap: 12px;
          align-items: center;
          padding: 14px
        }

        .tg-strip-icon {
          margin: 0;
          flex-shrink: 0
        }

        .tg-btn {
          max-width: 100%
        }

        .cta-card {
          padding: 40px 24px
        }
      }

      /* =============================================
   MOBILE OPTIMIZATION — 768px & 480px
   ============================================= */

      @media(max-width:768px) {

        /* GENERAL */
        .ctn {
          padding: 0 18px
        }

        .sec {
          padding: 56px 0
        }

        .stitle {
          font-size: clamp(22px, 5vw, 30px)
        }

        .sdesc {
          font-size: 14px;
          line-height: 1.6
        }

        /* NAV */
        .nav {
          padding: 0 18px
        }

        .n-logo-img {
          height: 28px
        }

        .n-cta {
          padding: 8px 18px;
          font-size: 11px
        }

        /* HERO — better text breathing */
        .hero-v2 {
          padding: 140px 0 40px;
          min-height: auto
        }

        .hv2-h1 {
          font-size: clamp(36px, 10vw, 52px);
          font-weight: 300;
          line-height: .85;
          letter-spacing: -.02em
        }

        .hv2-accent {
          font-weight: 700;
          font-size: 1.15em
        }

        .hv2-p {
          font-size: 15px;
          line-height: 1.7;
          color: rgba(255, 255, 255, .55);
          margin-top: 20px
        }

        .hv2-stats {
          margin-top: 24px
        }

        .hv2-cta-row {
          flex-direction: column;
          align-items: stretch;
          gap: 16px;
          margin-top: 28px;
          width: 100%
        }

        .btn-hero {
          padding: 16px 32px;
          font-size: 14px;
          min-height: 48px;
          width: 100%;
          justify-content: center
        }

        .hv2-orb-1 {
          width: 400px;
          height: 400px;
          filter: blur(50px)
        }

        .hv2-orb-2 {
          width: 350px;
          height: 350px;
          filter: blur(55px)
        }

        .hv2-orb-3 {
          width: 300px;
          height: 300px;
          filter: blur(60px)
        }

        .hv2-live-box {
          margin-top: 0
        }

        .hv2-live-inner {
          padding: 8px 16px;
          gap: 12px
        }

        .hv2-live-avatars span {
          width: 24px;
          height: 24px;
          font-size: 9px
        }

        .hv2-live-count {
          font-size: 14px
        }

        .hv2-live-label {
          font-size: 11px
        }

        .vsl-play {
          width: 52px;
          height: 52px
        }

        .vsl-label {
          font-size: 11px
        }

        /* TICKER */
        .tk {
          padding: 5px 12px
        }

        .tk-v {
          font-size: 12px
        }

        .tk-l {
          font-size: 10px
        }

        /* SIDNEI / ABOUT */
        .sid-v2-grid {
          gap: 24px
        }

        .sid-v2-photo-name {
          font-size: 22px
        }

        .sid-v2-photo-role {
          font-size: 11px
        }

        .sid-v2-info {
          gap: 20px
        }

        .sid-v2-h2 {
          font-size: clamp(22px, 5vw, 30px)
        }

        .sid-v2-p {
          font-size: 14px;
          line-height: 1.6
        }

        .sid-v2-btn {
          padding: 14px 28px;
          font-size: 13px
        }

        .sid-v2-btn-ghost {
          padding: 14px 28px;
          font-size: 13px
        }

        .sid-v2-stats {
          gap: 12px
        }

        .sid-v2-st {
          padding: 14px 12px
        }

        .sid-v2-st-num {
          font-size: 22px
        }

        .sid-v2-st-lbl {
          font-size: 9px
        }

        /* PLANS — isotipo better positioned */
        .gp-card-inner {
          padding: 28px 22px 24px
        }

        .gp-price {
          font-size: 40px
        }

        .gp-price span {
          font-size: 13px
        }

        .gp-name {
          font-size: 16px
        }

        .gp-range {
          padding: 10px 14px
        }

        .gp-range-val {
          font-size: 13px
        }

        .gp-btn {
          padding: 14px 16px;
          font-size: 13px;
          min-height: 48px
        }

        .gp-badge {
          padding: 5px 14px;
          font-size: 10px
        }

        .gp-fi {
          font-size: 12px
        }

        .gp-icon {
          width: 40px;
          height: 40px
        }

        .gp-card-iso {
          width: 220px;
          height: 220px;
          top: -30px;
          right: -30px;
          opacity: .2
        }

        .gp-card-hl .gp-card-iso {
          opacity: .25
        }

        .gp-card-gold .gp-card-iso {
          opacity: .22
        }

        /* COURSES */
        .crs2-body {
          padding: 20px 18px
        }

        .crs2-title {
          font-size: 18px
        }

        .crs2-desc {
          font-size: 13px;
          line-height: 1.5
        }

        .ci2 li {
          font-size: 13px;
          padding: 5px 0
        }

        .cp2 {
          font-size: 20px
        }

        .cbx2 {
          padding: 12px 20px;
          font-size: 12px;
          min-height: 44px
        }

        .crs2-foot {
          padding-top: 16px
        }

        /* COMMISSION CARD — compact horizontal */
        .comm2 {
          grid-template-columns: auto 1fr;
          gap: 14px;
          padding: 18px 20px;
          margin-top: 28px;
          border-radius: 16px
        }

        .comm2-arrow {
          display: none
        }

        .comm2-icon {
          width: 44px;
          height: 44px;
          border-radius: 12px;
          gap: 0
        }

        .comm2-pct-big {
          font-size: 16px
        }

        .comm2-pct-label {
          font-size: 7px;
          letter-spacing: .5px
        }

        .comm2-text {
          font-size: 13px;
          line-height: 1.5
        }

        .comm2-text strong {
          font-size: 14px;
          display: inline;
          margin-bottom: 0
        }

        .comm2-sub {
          margin-top: 4px;
          font-size: 11px
        }

        .comm2-sub::before {
          width: 10px
        }

        .comm2-iso {
          width: 140px;
          height: 140px
        }

        /* SLIDE CARDS */
        .slide-grid {
          grid-template-columns: 1fr 1fr;
          gap: 12px
        }

        .slide-card {
          height: 220px
        }

        .slide-back-val {
          font-size: 28px
        }

        .slide-front,
        .slide-back {
          padding: 20px 14px
        }

        .slide-icon {
          width: 40px;
          height: 40px;
          margin-bottom: 12px
        }

        .slide-icon svg {
          width: 18px;
          height: 18px
        }

        .slide-name {
          font-size: 14px
        }

        .slide-rate {
          font-size: 11px
        }

        /* TELEGRAM — compact, left-aligned features */
        .tg-hero {
          padding: 32px 22px 28px
        }

        .tg-badge {
          width: 44px;
          height: 44px;
          margin-bottom: 16px
        }

        .tg-badge svg {
          width: 20px;
          height: 20px
        }

        .tg-desc {
          font-size: 14px;
          margin-bottom: 20px;
          line-height: 1.6
        }

        .tg-strip {
          margin-bottom: 24px;
          grid-template-columns: 1fr 1fr;
          gap: 8px 12px;
          padding: 0
        }

        .tg-strip-div {
          display: none
        }

        .tg-strip-item {
          text-align: left;
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 10px 12px;
          border-radius: 10px;
          background: rgba(0, 136, 204, .03);
          border: 1px solid rgba(0, 136, 204, .06)
        }

        .tg-strip-icon {
          margin: 0;
          flex-shrink: 0;
          width: 32px;
          height: 32px;
          margin-bottom: 0
        }

        .tg-strip-icon svg {
          width: 14px;
          height: 14px
        }

        .tg-strip-label {
          font-size: 12px;
          margin-bottom: 0
        }

        .tg-strip-sub {
          display: none
        }

        .tg-btn {
          padding: 14px 28px;
          font-size: 14px;
          min-height: 48px;
          width: 100%;
          justify-content: center
        }

        /* CTA FINAL — trust badges organized */
        .cta-f {
          padding: 60px 0
        }

        .cta-card {
          padding: 36px 24px
        }

        .cta-main-btn {
          padding: 16px 32px;
          font-size: 14px;
          min-height: 48px;
          width: 100%;
          justify-content: center
        }

        .cta-trust {
          gap: 8px;
          margin-top: 16px;
          justify-content: center
        }

        .cta-trust span {
          font-size: 11px;
          gap: 5px;
          padding: 6px 12px;
          background: rgba(255, 255, 255, .03);
          border: 1px solid rgba(255, 255, 255, .05);
          border-radius: 8px
        }

        /* FAQ */
        .fq {
          font-size: 14px;
          padding: 14px 0
        }

        .fa p {
          font-size: 13px
        }

        /* FOOTER */
        .f-logo-img {
          height: 50px
        }

        .f-col h4 {
          font-size: 10px
        }

        .f-col a {
          font-size: 13px;
          padding: 6px 0
        }

        .f-brand .ft {
          font-size: 11px
        }

        /* PERFORMANCE */
        .glow {
          filter: blur(60px);
          opacity: .02
        }

        .crs-spot {
          filter: blur(60px);
          opacity: .6
        }

        .gp-blob {
          filter: blur(40px)
        }
      }

      @media(max-width:480px) {

        /* GENERAL */
        .ctn {
          padding: 0 16px
        }

        .sec {
          padding: 44px 0
        }

        /* NAV */
        .nav {
          padding: 0 16px;
          top: 16px
        }

        .nav .ctn {
          padding: 8px 8px 8px 14px
        }

        .n-logo-img {
          height: 26px
        }

        .n-cta {
          padding: 7px 14px;
          font-size: 10px
        }

        /* HERO — readable text, proper spacing */
        .hero-v2 {
          padding: 130px 0 32px
        }

        .hv2-h1 {
          font-size: clamp(32px, 9vw, 46px);
          font-weight: 300;
          line-height: .85;
          letter-spacing: -.02em
        }

        .hv2-accent {
          font-weight: 700;
          font-size: 1.15em
        }

        .hv2-p {
          font-size: 14px;
          line-height: 1.6;
          max-width: 340px;
          margin-top: 16px
        }

        .hv2-stats {
          margin-top: 20px
        }

        .hv2-cta-row {
          flex-direction: column;
          align-items: flex-start;
          gap: 14px;
          margin-top: 24px;
          width: 100%
        }

        .btn-hero {
          padding: 14px 28px;
          font-size: 13px;
          gap: 8px;
          min-height: 48px;
          width: 100%;
          justify-content: center
        }

        .hv2-live-box {
          margin-top: 0
        }

        .hv2-live-inner {
          padding: 8px 14px;
          gap: 10px;
          border-radius: 80px
        }

        .hv2-live-avatars span {
          width: 22px;
          height: 22px;
          font-size: 8px;
          border-width: 1.5px
        }

        .hv2-live-avatars span:not(:first-child) {
          margin-left: -8px
        }

        .hv2-live-count {
          font-size: 13px
        }

        .hv2-live-label {
          font-size: 10px
        }

        .hv2-live-status {
          gap: 7px
        }

        .hv2-orb-1 {
          width: 280px;
          height: 280px
        }

        .hv2-orb-2 {
          width: 220px;
          height: 220px
        }

        .hv2-orb-3 {
          display: none
        }

        .vsl-play {
          width: 44px;
          height: 44px
        }

        .vsl-play svg {
          width: 16px;
          height: 16px
        }

        .vsl-label {
          font-size: 10px
        }

        .vsl-frame {
          border-radius: 12px
        }

        /* SIDNEI */
        .sid-v2-photo {
          max-width: 260px
        }

        .sid-v2-photo-name {
          font-size: 18px
        }

        .sid-v2-h2 {
          font-size: 22px
        }

        .sid-v2-p {
          font-size: 13px;
          line-height: 1.6
        }

        .sid-v2-btn {
          padding: 14px 28px;
          font-size: 13px;
          min-height: 48px;
          width: 100%;
          justify-content: center
        }

        .sid-v2-btn-ghost {
          padding: 14px 28px;
          font-size: 13px;
          min-height: 48px;
          width: 100%;
          justify-content: center
        }

        .sid-v2-stats {
          flex-direction: column;
          gap: 8px
        }

        .sid-v2-st {
          flex-direction: row;
          gap: 8px;
          padding: 10px 14px
        }

        .sid-v2-st-num {
          font-size: 20px
        }

        /* TIMELINE */
        .sid-tl-yr {
          font-size: 16px
        }

        .sid-tl-title {
          font-size: 10px
        }

        /* PLANS — isotipo visible and well-placed */
        .gp-card-inner {
          padding: 24px 20px 22px
        }

        .gp-price {
          font-size: 36px
        }

        .gp-name {
          font-size: 15px
        }

        .gp-sub {
          font-size: 11px
        }

        .gp-fi {
          font-size: 12px;
          gap: 8px
        }

        .gp-fi svg {
          width: 18px;
          height: 18px;
          padding: 3px
        }

        .gp-range {
          padding: 10px 12px;
          gap: 10px
        }

        .gp-range-val {
          font-size: 12px
        }

        .gp-range-label {
          font-size: 9px
        }

        .gp-btn {
          padding: 14px 16px;
          font-size: 13px;
          min-height: 48px
        }

        .gp-card-iso {
          width: 200px;
          height: 200px;
          top: -20px;
          right: -20px;
          opacity: .18
        }

        .gp-card-hl .gp-card-iso {
          opacity: .22
        }

        .gp-card-gold .gp-card-iso {
          opacity: .2
        }

        /* COURSES */
        .courses-grid {
          max-width: 100%;
          gap: 16px
        }

        .crs2-body {
          padding: 18px 16px
        }

        .crs2-title {
          font-size: 17px
        }

        .crs2-desc {
          font-size: 12px;
          line-height: 1.5
        }

        .ci2 li {
          font-size: 12px;
          gap: 8px
        }

        .ci2 li::before {
          width: 14px;
          height: 14px
        }

        .cp2 {
          font-size: 18px
        }

        .cbx2 {
          padding: 12px 18px;
          font-size: 12px;
          min-height: 44px
        }

        .ct2 {
          font-size: 9px;
          padding: 4px 10px
        }

        /* COMMISSION — compact inline */
        .comm2 {
          grid-template-columns: auto 1fr;
          gap: 12px;
          padding: 16px 18px;
          text-align: left;
          margin-top: 20px;
          border-radius: 14px
        }

        .comm2-icon {
          width: 40px;
          height: 40px;
          border-radius: 10px
        }

        .comm2-pct-big {
          font-size: 32px
        }

        .comm2-pct-label {
          font-size: 7px
        }

        .comm2-text strong {
          font-size: 13px;
          display: inline
        }

        .comm2-text {
          font-size: 12px;
          line-height: 1.5
        }

        .comm2-sub {
          font-size: 10px;
          margin-top: 3px
        }

        .comm2-sub::before {
          width: 8px
        }

        .comm2-iso {
          display: none
        }

        /* SLIDE CARDS */
        .slide-grid {
          gap: 8px
        }

        .slide-card {
          height: 200px
        }

        .slide-back-val {
          font-size: 24px
        }

        .slide-back-mult {
          font-size: 11px
        }

        .slide-name {
          font-size: 13px
        }

        .slide-rate {
          font-size: 10px;
          margin-bottom: 16px
        }

        .slide-hint {
          font-size: 10px
        }

        .slide-note {
          font-size: 10px
        }

        .slide-card-iso {
          width: 200px;
          height: 200px
        }

        /* TELEGRAM — compact 2x2, left-aligned, button close */
        .tg-hero {
          padding: 24px 16px 22px
        }

        .tg-badge {
          width: 36px;
          height: 36px;
          margin-bottom: 12px
        }

        .tg-badge svg {
          width: 16px;
          height: 16px
        }

        .tg-desc {
          font-size: 13px;
          margin-bottom: 14px;
          line-height: 1.5
        }

        .tg-strip {
          margin-bottom: 16px;
          grid-template-columns: 1fr 1fr;
          gap: 6px;
          padding: 0
        }

        .tg-strip-div {
          display: none
        }

        .tg-strip-sub {
          display: none
        }

        .tg-strip-item {
          text-align: left;
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 8px 10px;
          border-radius: 8px;
          background: rgba(0, 136, 204, .03);
          border: 1px solid rgba(0, 136, 204, .06)
        }

        .tg-strip-icon {
          margin: 0;
          flex-shrink: 0;
          width: 26px;
          height: 26px;
          margin-bottom: 0
        }

        .tg-strip-icon svg {
          width: 12px;
          height: 12px
        }

        .tg-strip-label {
          font-size: 11px;
          margin-bottom: 0
        }

        .tg-btn {
          padding: 14px 24px;
          font-size: 13px;
          gap: 8px;
          min-height: 48px;
          width: 100%;
          justify-content: center
        }

        /* CTA — trust badges as pills */
        .cta-f {
          padding: 48px 0
        }

        .cta-card {
          padding: 28px 18px
        }

        .cta-main-btn {
          padding: 14px 28px;
          font-size: 13px;
          gap: 8px;
          min-height: 48px;
          width: 100%;
          justify-content: center
        }

        .cta-trust {
          gap: 6px;
          margin-top: 14px;
          justify-content: center
        }

        .cta-trust span {
          font-size: 10px;
          gap: 4px;
          padding: 5px 10px;
          background: rgba(255, 255, 255, .03);
          border: 1px solid rgba(255, 255, 255, .05);
          border-radius: 6px;
          white-space: nowrap
        }

        .cta-ring {
          width: 250px;
          height: 250px
        }

        .cta-ring-2 {
          width: 180px;
          height: 180px
        }

        /* FAQ */
        .fq {
          font-size: 13px;
          padding: 12px 0
        }

        .fq svg {
          width: 16px;
          height: 16px
        }

        .fa p {
          font-size: 12px
        }

        /* FOOTER */
        .f-logo-img {
          height: 42px
        }

        .f-col a {
          padding: 6px 0;
          font-size: 13px
        }

        .f-brand .ft {
          font-size: 10px;
          line-height: 1.5
        }

        .foot-g {
          gap: 24px
        }
      }