:root {
        --green: #00ff88;
        --green2: #00e676;
        --green-dim: rgba(0, 255, 136, 0.15);
        --green-glow: rgba(0, 255, 136, 0.4);
        --bg: #0a0a0a;
        --bg2: #101010;
        --bg3: #141414;
        --bg4: #1a1a1a;
        --card: #111111;
        --border: rgba(0, 255, 136, 0.18);
        --border2: rgba(255, 255, 255, 0.07);
        --white: #ffffff;
        --gray: #aaaaaa;
        --gray2: #777777;
        --font: "Sora", "Poppins", sans-serif;
      }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        background: var(--bg);
        color: var(--white);
        font-family: var(--font);
        font-size: 15px;
        line-height: 1.6;
        overflow-x: hidden;
      }

      /* ===== SCROLLBAR ===== */
      ::-webkit-scrollbar {
        width: 6px;
      }
      ::-webkit-scrollbar-track {
        background: var(--bg2);
      }
      ::-webkit-scrollbar-thumb {
        background: var(--green);
        border-radius: 3px;
      }

      /* ===== NAVBAR ===== */
      nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: rgba(10, 10, 10, 0.97);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(0, 255, 136, 0.12);
        padding: 0 32px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .nav-logo {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
      }
      
      .nav-links {
        display: flex;
        align-items: center;
        gap: 4px;
        list-style: none;
      }
      .nav-links a {
        color: var(--gray);
        font-size: 11.5px;
        font-weight: 500;
        text-decoration: none;
        padding: 6px 10px;
        border-radius: 4px;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        transition: color 0.2s;
      }
      .nav-links a.active,
      .nav-links a:hover {
        color: var(--green);
      }
      .nav-actions {
        display: flex;
        gap: 10px;
        align-items: center;
      }
      .btn-login {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: var(--white);
        font-size: 12px;
        font-weight: 600;
        padding: 8px 18px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.2s;
      }
      .btn-login:hover {
        border-color: var(--green);
        color: var(--green);
      }
      .btn-signup {
        background: var(--green);
        color: #000;
        font-size: 12px;
        font-weight: 700;
        padding: 8px 18px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.2s;
      }
      .btn-signup:hover {
        background: var(--green2);
        box-shadow: 0 0 20px var(--green-glow);
      }

      /* ===== HERO ===== */
      .hero {
        min-height: 100vh;
        background:
          radial-gradient(
            ellipse 80% 60% at 50% 0%,
            rgba(0, 255, 136, 0.04) 0%,
            transparent 70%
          ),
          #0a0a0a;
        padding: 100px 32px 60px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: center;
        position: relative;
        overflow: hidden;
      }
      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300FF88' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        pointer-events: none;
      }
      /* Animated particles */
      .particles {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
      }
      .particle {
        position: absolute;
        width: 2px;
        height: 2px;
        background: var(--green);
        border-radius: 50%;
        opacity: 0;
        animation: floatUp 8s infinite ease-in;
      }
      @keyframes floatUp {
        0% {
          opacity: 0;
          transform: translateY(0) scale(0);
        }
        10% {
          opacity: 0.6;
          transform: translateY(-20px) scale(1);
        }
        90% {
          opacity: 0.2;
        }
        100% {
          opacity: 0;
          transform: translateY(-300px) scale(0.5);
        }
      }
      .hero-left {
        position: relative;
        z-index: 2;
      }
      .hero-headline {
        font-size: 52px;
        font-weight: 800;
        line-height: 1.05;
        text-transform: uppercase;
        margin-bottom: 4px;
        letter-spacing: -0.5px;
      }
      .hero-headline-green {
        color: var(--green);
        display: block;
      }
      .hero-subtext {
        font-size: 20px;
        font-weight: 600;
        color: var(--white);
        margin-bottom: 12px;
      }
      .hero-desc {
        font-size: 14px;
        color: #999;
        max-width: 420px;
        line-height: 1.7;
        margin-bottom: 30px;
      }
      .hero-btns {
        display: flex;
        gap: 14px;
        margin-bottom: 28px;
      }
      .btn-primary {
        background: var(--green);
        color: #000;
        font-size: 13px;
        font-weight: 700;
        padding: 14px 28px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.25s;
        letter-spacing: 0.3px;
      }
      .btn-primary:hover {
        background: var(--green2);
        box-shadow: 0 0 30px var(--green-glow);
        transform: translateY(-1px);
      }
      .btn-outline {
        background: transparent;
        border: 1.5px solid rgba(255, 255, 255, 0.25);
        color: var(--white);
        font-size: 13px;
        font-weight: 600;
        padding: 14px 28px;
        border-radius: 6px;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.25s;
      }
      .btn-outline:hover {
        border-color: var(--green);
        color: var(--green);
      }
      .trust-badges {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        margin-bottom: 32px;
      }
      .trust-badge {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12px;
        color: #bbb;
      }
      .trust-badge svg {
        color: var(--green);
      }
      .partners-label {
        font-size: 11px;
        color: #555;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 14px;
      }
      .partner-logos {
        display: flex;
        align-items: center;
        gap: 28px;
        flex-wrap: wrap;
      }
      .partner-logo {
        font-size: 16px;
        font-weight: 700;
        color: #aaa;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color 0.2s;
      }
      .partner-logo:hover {
        color: var(--green);
      }
      .partner-logo .logo-accent {
        color: #e74c3c;
      }
      .hero-right {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .hero-visual-wrap {
        position: relative;
        width: 100%;
        max-width: 520px;
      }
      /* Bull visual */
      .bull-container {
        position: relative;
        width: 100%;
        height: 480px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .bull-glow {
        position: absolute;
        width: 320px;
        height: 320px;
        background: radial-gradient(
          circle,
          rgba(0, 255, 136, 0.2) 0%,
          transparent 70%
        );
        border-radius: 50%;
        animation: pulseGlow 3s ease-in-out infinite;
      }
      @keyframes pulseGlow {
        0%,
        100% {
          transform: scale(1);
          opacity: 0.6;
        }
        50% {
          transform: scale(1.1);
          opacity: 1;
        }
      }
      /* SVG Bull */
      .bull-svg {
        position: relative;
        z-index: 3;
      }
      /* Phone card overlay */
      .phone-card{
        display: flex;
        margin: auto;
        align-items: center;
        justify-content: center;
      }
      .phone-card img{
        background-size: contain;
        height: 50%;
        background-repeat: no-repeat;
        background-position: center;
        width: 600px;
        margin:  auto;
      }
      
      /* Mini chart */
      .mini-chart {
        width: 100%;
        height: 60px;
      }

      /* ===== STATS BAR ===== */
      .stats-bar {
        background: #0e0e0e;
        border-top: 1px solid rgba(0, 255, 136, 0.12);
        border-bottom: 1px solid rgba(0, 255, 136, 0.12);
        padding: 0 32px;
      }
      .stats-inner {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        max-width: 1200px;
        margin: 0 auto;
      }
      .stat-card {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 22px 16px;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
      }
      .stat-card:last-child {
        border-right: none;
      }
      .stat-icon {
        width: 42px;
        height: 42px;
        background: rgba(0, 255, 136, 0.08);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .stat-icon svg {
        color: var(--green);
      }
      .stat-num {
        font-size: 24px;
        font-weight: 800;
        color: var(--white);
        line-height: 1.1;
      }
      .stat-label {
        font-size: 12px;
        color: #888;
        margin-top: 2px;
      }

      /* ===== SECTION TITLES ===== */
      .section-title {
        text-align: center;
        font-size: 28px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 8px;
      }
      .section-sub {
        text-align: center;
        color: #888;
        font-size: 14px;
        margin-bottom: 40px;
      }

      /* ===== HOW WE TRADE ===== */
      .how-we-trade {
        background: var(--bg2);
        padding: 70px 32px;
      }
      .how-grid {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 20px;
        max-width: 1100px;
        margin: 0 auto;
        align-items: stretch;
      }
      .how-card {
       
        background: #0d0d0d;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        position: relative;
        align-items: center;
        
      }
      .how-card-img {
        height: 200px;
        background: linear-gradient(135deg, #111 0%, #0a0a0a 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
      }
      .how-card-body {
        padding: 24px;
        flex: 1;
      }
      .how-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: var(--green);
        color: #000;
        border-radius: 50%;
        font-size: 13px;
        font-weight: 800;
        margin-bottom: 10px;
      }
      .how-card-title {
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 10px;
        letter-spacing: 0.5px;
      }
      .how-card-desc {
        font-size: 13px;
        color: #999;
        line-height: 1.7;
        margin-bottom: 14px;
      }
      .how-features {
        list-style: none;
      }
      .how-features li {
        font-size: 13px;
        color: #ccc;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
      }
      .how-features li::before {
        content: "✓";
        color: var(--green);
        font-weight: 700;
        font-size: 12px;
      }
      .how-or {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 8px;
        padding: 0 10px;
      }
      .or-circle {
        width: 48px;
        height: 48px;
        border: 2px solid rgba(0, 255, 136, 0.4);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 800;
        color: var(--green);
        background: rgba(0, 255, 136, 0.05);
      }
      .how-combine {
        max-width: 1100px;
        margin: 24px auto 0;
        background: rgba(0, 255, 136, 0.04);
        border: 1px solid rgba(0, 255, 136, 0.15);
        border-radius: 10px;
        padding: 16px 24px;
        text-align: center;
        font-size: 14px;
        color: #ccc;
      }

      /* ===== CEO ===== */
      .ceo-section {
        background: var(--bg);
        padding: 70px 32px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 32px;
        max-width: 1200px;
        margin: 0 auto;
        align-items: center;
      }
      .ceo-img-wrap {
        border-radius: 14px;
        overflow: hidden;
        height: 360px;
        background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
        position: relative;
      }
      .ceo-img-placeholder {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background-position: center;
        background: linear-gradient(
          135deg,
          rgba(0, 255, 136, 0.05),
          rgba(0, 0, 0, 0.8)
        );
      }
      .ceo-info {
        padding: 10px 0;
      }
      .ceo-label {
        font-size: 12px;
        color: var(--green);
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 600;
        margin-bottom: 8px;
      }
      .ceo-name {
        font-size: 32px;
        font-weight: 800;
        margin-bottom: 16px;
      }
      .ceo-desc {
        font-size: 13px;
        color: #999;
        line-height: 1.8;
        margin-bottom: 20px;
      }
      .ceo-stats {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        margin-bottom: 20px;
      }
      .ceo-stat {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: #ccc;
      }
      .ceo-stat svg {
        color: var(--green);
      }
      .ceo-stat strong {
        color: var(--white);
      }
      .btn-watch {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: transparent;
        border: 1.5px solid rgba(255, 255, 255, 0.2);
        color: var(--white);
        font-size: 13px;
        font-weight: 600;
        padding: 12px 22px;
        border-radius: 6px;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.2s;
      }
      .btn-watch:hover {
        border-color: var(--green);
        color: var(--green);
      }
      .ceo-video-card {
        background: #111;
        border: 1px solid rgba(0, 255, 136, 0.2);
        border-radius: 14px;
        overflow: hidden;
        height: 360px;
        position: relative;
      }
      .ceo-video-header {
        background: rgba(0, 255, 136, 0.08);
        border-bottom: 1px solid rgba(0, 255, 136, 0.15);
        padding: 12px 16px;
        font-size: 13px;
        font-weight: 600;
        color: var(--green);
      }
      .ceo-video-body {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100% - 44px);
        position: relative;
        background: linear-gradient(135deg, #0d0d0d, #1a1a1a);
      }
      .play-btn {
        width: 60px;
        height: 60px;
        background: rgba(0, 255, 136, 0.15);
        border: 2px solid var(--green);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.25s;
        box-shadow: 0 0 30px rgba(0, 255, 136, 0.2);
      }
      .play-btn:hover {
        background: var(--green);
        transform: scale(1.1);
      }
      .play-btn:hover svg {
        color: #000;
      }
      .play-btn svg {
        color: var(--green);
        margin-left: 4px;
      }
      .ceo-signature {
        position: absolute;
        bottom: 16px;
        left: 16px;
        right: 16px;
        text-align: center;
      }
      .ceo-sig-text {
        font-size: 14px;
        color: #ccc;
        font-style: italic;
      }
      .ceo-sig-role {
        font-size: 11px;
        color: var(--green);
        margin-top: 2px;
      }

      /* ===== TESTIMONIALS ===== */
      .testimonials-section {
        background: var(--bg2);
        padding: 70px 32px;
      }
      .testimonials-title-line {
        text-align: center;
        margin-bottom: 40px;
      }
      .testimonials-title-line span { color: var(--green); }

      /* two-column: videos | rating card */
      .testi-grid {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 32px;
        max-width: 1100px;
        margin: 0 auto;
      }

      /* 2×2 grid of thumbnail cards */
      .testi-videos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin-bottom: 24px;
      }

      .testi-vid-card {
        border-radius: 12px;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        border: 1px solid rgba(255,255,255,0.07);
        transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
      }
      .testi-vid-card:hover {
        transform: translateY(-4px);
        border-color: rgba(0,255,136,0.35);
        box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,255,136,0.12);
      }

      /* Thumbnail fills the card */
      .testi-vid-thumb {
        height: 185px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* Real video frame as thumbnail background */
      .testi-thumb-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.55s ease;
        z-index: 0;
      }
      .testi-thumb-video.thumb-ready { opacity: 1; }

      /* Dark scrim over the video frame so text stays readable */
      .testi-thumb-scrim {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.38);
        z-index: 1;
        pointer-events: none;
      }

      /* Bottom label strip */
      .testi-vid-label {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        padding: 32px 14px 13px;
        background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, transparent 100%);
        font-size: 11px;
        font-weight: 600;
        color: rgba(255,255,255,0.82);
        display: flex;
        align-items: center;
        gap: 6px;
        letter-spacing: 0.2px;
        z-index: 3;
      }
      .testi-vid-label svg { color: var(--green); flex-shrink: 0; }

      /* Centered circular play button */
      .testi-vid-play {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: rgba(255,255,255,0.92);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 28px rgba(0,0,0,0.55);
        transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
        flex-shrink: 0;
        position: relative;
        z-index: 3;
      }
      .testi-vid-play svg {
        width: 20px; height: 20px;
        fill: #080808;
        margin-left: 3px;
      }
      .testi-vid-card:hover .testi-vid-play {
        transform: scale(1.1);
        background: #fff;
        box-shadow: 0 0 0 10px rgba(255,255,255,0.13), 0 10px 32px rgba(0,0,0,0.6);
      }

      /* Rating card */
      .testi-rating-card {
        background: #0d0d0d;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 14px;
        padding: 28px 24px;
        text-align: center;
        min-width: 210px;
        align-self: start;
      }
      .stars {
        color: #f1c40f;
        font-size: 22px;
        margin-bottom: 10px;
      }
      .rating-big {
        font-size: 48px;
        font-weight: 800;
        color: var(--white);
        line-height: 1;
      }
      .rating-label {
        font-size: 13px;
        color: #888;
        margin-bottom: 6px;
      }
      .rating-based {
        font-size: 12px;
        color: #666;
        margin-bottom: 20px;
      }
      .rating-based span {
        color: var(--white);
        font-weight: 700;
      }
      .trust-logos {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .trust-logo-row {
        display: flex;
        align-items: center;
        gap: 6px;
        background: #1a1a1a;
        border-radius: 8px;
        padding: 8px 12px;
      }
      .trust-logo-name { font-size: 13px; font-weight: 700; }
      .trustpilot-stars { color: #00b67a; font-size: 13px; }
      .google-stars     { color: #f1c40f; font-size: 13px; }

      /* View All button */
      .view-all-btn {
        display: block;
        text-align: center;
        margin: 0 auto;
        background: transparent;
        border: 1.5px solid rgba(255,255,255,0.2);
        color: var(--white);
        font-size: 13px;
        font-weight: 600;
        padding: 13px 36px;
        border-radius: 6px;
        cursor: pointer;
        text-decoration: none;
        width: fit-content;
        letter-spacing: 0.4px;
        transition: all 0.2s;
      }
      .view-all-btn:hover {
        border-color: var(--green);
        color: var(--green);
      }

      /* Testimonial video modal */
      .testi-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9000;
        align-items: center;
        justify-content: center;
      }
      .testi-modal.open { display: flex; }
      .testi-modal-backdrop {
        position: absolute; inset: 0;
        background: rgba(0,0,0,0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      .testi-modal-box {
        position: relative;
        z-index: 1;
        width: 92%;
        max-width: 900px;
        border-radius: 16px;
        overflow: hidden;
        background: #000;
        box-shadow: 0 40px 100px rgba(0,0,0,0.9);
      }
      .testi-modal-close {
        position: absolute;
        top: 12px; right: 12px;
        z-index: 2;
        width: 38px; height: 38px;
        border-radius: 50%;
        background: rgba(255,255,255,0.1);
        border: none;
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
      }
      .testi-modal-close:hover { background: rgba(255,255,255,0.22); }
      .testi-modal-video {
        width: 100%;
        display: block;
        max-height: 80vh;
        background: #000;
      }

      /* ===== PACKAGES ===== */
      .packages-section {
        background: var(--bg);
        padding: 70px 32px;
      }
      .packages-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
        max-width: 1350px;
        margin: 0 auto;
      }
      .pkg-card {
        background: #0d0d0d;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        overflow: hidden;
        position: relative;
        transition: all 0.3s;
      }
      .pkg-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      }
      .pkg-card.popular {
        border-color: var(--green);
        box-shadow: 0 0 40px rgba(0, 255, 136, 0.1);
      }
      .popular-badge {
        position: absolute;
        top: 16px;
        left: -28px;
        background: var(--green);
        color: #000;
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        padding: 4px 36px;
        transform: rotate(-45deg);
        letter-spacing: 0.5px;
      }
      .pkg-header {
        background: #111;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding: 20px 24px;
      }
      .pkg-name {
        font-size: 11px;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: 6px;
      }
      .pkg-price {
        font-size: 36px;
        font-weight: 800;
        color: var(--white);
        line-height: 1;
        margin-bottom: 4px;
      }
      .pkg-desc {
        font-size: 12px;
        color: #666;
      }
      .pkg-body {
        padding: 24px;
      }
      .pkg-features {
        list-style: none;
        margin-bottom: 24px;
      }
      .pkg-features li {
        font-size: 13px;
        color: #ccc;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
      }
      .pkg-check {
        color: var(--green);
        font-size: 15px;
      }
      .btn-pkg {
        width: 100%;
        background: var(--green);
        color: #000;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        padding: 14px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        letter-spacing: 0.5px;
        transition: all 0.25s;
      }
      .btn-pkg:hover {
        background: var(--green2);
        box-shadow: 0 0 20px var(--green-glow);
      }

      /* ===== HOW IT WORKS ===== */
      .how-works-section {
        background: var(--bg2);
        padding: 70px 32px;
      }
      .how-works-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        max-width: 900px;
        margin: 0 auto;
        position: relative;
      }
      .how-works-grid::before {
        content: "";
        position: absolute;
        top: 28px;
        left: 10%;
        right: 10%;
        height: 2px;
        background: linear-gradient(
          90deg,
          transparent,
          var(--green),
          transparent
        );
        z-index: 0;
      }
      .hw-step {
        text-align: center;
        padding: 0 16px;
        position: relative;
        z-index: 1;
      }
      .hw-icon {
        width: 56px;
        height: 56px;
        border: 2px solid rgba(0, 255, 136, 0.3);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        background: var(--bg2);
        position: relative;
      }
      .hw-icon svg {
        color: var(--green);
      }
      .hw-num {
        position: absolute;
        top: -6px;
        right: -6px;
        width: 22px;
        height: 22px;
        background: var(--green);
        color: #000;
        border-radius: 50%;
        font-size: 10px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .hw-title {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 8px;
      }
      .hw-desc {
        font-size: 12px;
        color: #888;
        line-height: 1.6;
      }

      /* ===== FAQ ===== */
      .faq-section {
        background: var(--bg);
        padding: 70px 32px;
      }
      .faq-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        max-width: 1100px;
        margin: 0 auto;
      }
      .faq-item {
        background: #0d0d0d;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
      }
      .faq-q {
        padding: 16px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        font-weight: 500;
        color: #ccc;
        gap: 12px;
      }
      .faq-q .faq-icon {
        color: var(--green);
        font-size: 20px;
        font-weight: 300;
        flex-shrink: 0;
        transition: transform 0.2s;
      }
      .faq-a {
        padding: 0 20px;
        max-height: 0;
        overflow: hidden;
        font-size: 13px;
        color: #888;
        line-height: 1.7;
        transition: all 0.3s ease;
      }
      .faq-item.open .faq-a {
        max-height: 200px;
        padding: 0 20px 16px;
      }
      .faq-item.open .faq-icon {
        transform: rotate(45deg);
      }
      .faq-item.open {
        border-color: rgba(0, 255, 136, 0.2);
      }

      /* ===== FOOTER ===== */
      footer {
        background: #060606;
        border-top: 1px solid rgba(0, 255, 136, 0.1);
        padding: 50px 32px 0;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
        gap: 40px;
        max-width: 1200px;
        margin: 0 auto;
        padding-bottom: 40px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }
      .footer-col-title {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--green);
        margin-bottom: 16px;
      }
      .footer-col ul {
        list-style: none;
      }
      .footer-col ul li {
        margin-bottom: 10px;
      }
      .footer-col ul li a {
        color: #888;
        font-size: 13px;
        text-decoration: none;
        transition: color 0.2s;
      }
      .footer-col ul li a:hover {
        color: var(--green);
      }
      .footer-about {
        font-size: 13px;
        color: #777;
        line-height: 1.7;
        margin: 12px 0 20px;
      }
      .social-links {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }
      .social-link {
        width: 34px;
        height: 34px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #888;
        font-size: 13px;
        text-decoration: none;
        transition: all 0.2s;
      }
      .social-link:hover {
        border-color: var(--green);
        color: var(--green);
      }
      .footer-contact-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 12px;
        font-size: 13px;
        color: #888;
      }
      .footer-contact-icon {
        color: var(--green);
        flex-shrink: 0;
        margin-top: 1px;
      }
      .newsletter-input-wrap {
        display: flex;
        gap: 8px;
        margin-top: 10px;
      }
      .newsletter-input {
        flex: 1;
        background: #1a1a1a;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        padding: 10px 14px;
        color: var(--white);
        font-size: 13px;
        font-family: var(--font);
        outline: none;
      }
      .newsletter-input:focus {
        border-color: var(--green);
      }
      .newsletter-input::placeholder {
        color: #555;
      }
      .btn-subscribe {
        background: var(--green);
        color: #000;
        border: none;
        border-radius: 6px;
        padding: 10px 18px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.2s;
      }
      .btn-subscribe:hover {
        background: var(--green2);
      }
      .footer-bottom {
        max-width: 1200px;
        margin: 0 auto;
        padding: 16px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
      }
      .footer-copy {
        font-size: 12px;
        color: #555;
      }
      .footer-disclaimer {
        font-size: 11px;
        color: #444;
        text-align: right;
      }

      /* ===== PERSON AVATARS (placeholders) ===== */
      .avatar {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #1a2a1a, #0a0a0a);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        overflow: hidden;
      }

      /* ===== CHART CANVAS ===== */
      .chart-line {
        stroke: var(--green);
        stroke-width: 2;
        fill: none;
      }
      .chart-area {
        fill: url(#chartGrad);
        opacity: 0.3;
      }

      /* ===== SECTION WRAPPER ===== */
      .section-wrapper {
        padding: 70px 32px;
      }
      .container {
        max-width: 1200px;
        margin: 0 auto;
      }

      /* ===== RESPONSIVE ===== */
      @media (max-width: 1024px) {
        .hero {
          grid-template-columns: 1fr;
          text-align: center;
        }
        .hero-headline {
          font-size: 38px;
        }
        .hero-right {
          display: none;
        }
        .stats-inner {
          grid-template-columns: repeat(3, 1fr);
        }
        .how-grid {
          grid-template-columns: 1fr;
        }
        .how-or {
          display: none;
        }
        .ceo-section {
          grid-template-columns: 1fr 1fr;
        }
        .packages-grid {
          grid-template-columns: repeat(3, 1fr);
          max-width: 900px;
        }
        .how-works-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .faq-grid {
          grid-template-columns: 1fr 1fr;
        }
        .footer-grid {
          grid-template-columns: 1fr 1fr;
        }
        .testi-videos {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 768px) {
        nav {
          padding: 0 16px;
        }
        .nav-links {
          display: none;
        }
        .hero {
          padding: 90px 16px 50px;
        }
        .hero-headline {
          font-size: 30px;
        }
        .trust-badges {
          gap: 12px;
        }
        .stats-inner {
          grid-template-columns: repeat(2, 1fr);
        }
        .ceo-section {
          grid-template-columns: 1fr;
          padding: 50px 16px;
        }
        .faq-grid {
          grid-template-columns: 1fr;
        }
        .footer-grid {
          grid-template-columns: 1fr;
        }
        .testi-grid {
          grid-template-columns: 1fr;
        }
        .testi-videos {
          grid-template-columns: 1fr 1fr;
        }
        .testi-rating-card {
          min-width: unset;
          width: 100%;
        }
        .how-works-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .packages-section {
          padding: 50px 16px;
        }
        .packages-grid {
          grid-template-columns: 1fr 1fr;
          max-width: 600px;
        }
      }
      @media (max-width: 480px) {
        .packages-grid {
          grid-template-columns: 1fr;
          max-width: 420px;
        }
      }

      /* ===== ANIMATIONS ===== */
      @keyframes countUp {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .animate-in {
        animation: countUp 0.6s ease forwards;
      }
      @keyframes shimmer {
        0% {
          background-position: -200% center;
        }
        100% {
          background-position: 200% center;
        }
      }

      /* HOW WE TRADE person images */
      .trader-person {
        width: 100%;
        height: 100%;
        background: linear-gradient(160deg, #0d1a0d 0%, #050505 100%);
        position: relative;
        overflow: hidden;
      }
      .robot-person {
        width: 100%;
        height: 100%;
        background: linear-gradient(160deg, #0a0a12 0%, #050505 100%);
        position: relative;
        overflow: hidden;
      }

      /* green underline for section titles */
      .title-green {
        color: var(--green);
      }