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

      :root {
        --amber: #f59e0b;
        --amber-dark: #d97706;
        --indigo: #6366f1;
        --indigo-light: #818cf8;
        --green: #22c55e;
        --bg: #060d1a;
        --bg2: #0a1221;
        --bg3: #0e1833;
        --card: #0f1828;
        --border: rgba(255, 255, 255, 0.07);
        --text: #e2e8f0;
        --muted: #7a8aa0;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        font-family: "Inter", sans-serif;
        background: var(--bg);
        color: var(--text);
        overflow-x: hidden;
      }

      /* ── NAV ── */
      nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 5%;
        background: rgba(6, 13, 26, 0.85);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--border);
      }
      .nav-logo {
        font-size: 18px;
        font-weight: 900;
        color: #fff;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .nav-logo span {
        color: var(--amber);
      }
      .logo-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--amber);
        display: inline-block;
        box-shadow: 0 0 8px var(--amber);
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 28px;
        list-style: none;
      }
      .nav-links a {
        font-size: 13px;
        font-weight: 500;
        color: var(--muted);
        text-decoration: none;
        transition: color 0.15s;
      }
      .nav-links a:hover {
        color: #fff;
      }
      .nav-cta {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .btn-outline {
        padding: 9px 20px;
        border-radius: 10px;
        border: 1px solid rgba(245, 158, 11, 0.3);
        color: var(--amber);
        background: transparent;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        font-family: "Inter", sans-serif;
        text-decoration: none;
        transition: all 0.15s;
      }
      .btn-outline:hover {
        background: rgba(245, 158, 11, 0.08);
      }
      .btn-primary {
        padding: 9px 22px;
        border-radius: 10px;
        border: none;
        background: linear-gradient(135deg, var(--amber), var(--amber-dark));
        color: #000;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        font-family: "Inter", sans-serif;
        text-decoration: none;
        transition: all 0.15s;
        box-shadow: 0 3px 12px rgba(245, 158, 11, 0.3);
      }
      .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 18px rgba(245, 158, 11, 0.4);
      }
      .hamburger {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
      }
      .hamburger span {
        width: 22px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: all 0.2s;
      }
      @media (max-width: 768px) {
        .nav-cta {
          display: none;
        }
      }

      /* ── HERO ── */
      .hero {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 120px 5% 80px;
        position: relative;
        overflow: hidden;
      }
      .hero-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        background: radial-gradient(
            ellipse 80% 60% at 50% 0%,
            rgba(99, 102, 241, 0.12) 0%,
            transparent 70%
          ),
          radial-gradient(
            ellipse 60% 40% at 80% 80%,
            rgba(245, 158, 11, 0.08) 0%,
            transparent 60%
          );
      }
      .hero-grid {
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image: linear-gradient(
            rgba(255, 255, 255, 0.02) 1px,
            transparent 1px
          ),
          linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
        background-size: 60px 60px;
      }
      .hero-content {
        position: relative;
        z-index: 1;
        max-width: 780px;
      }

      /* ── Robot Signal Animations ── */
      @keyframes floatY {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-18px);
        }
      }
      @keyframes floatYr {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(16px);
        }
      }
      @keyframes scanLine {
        0% {
          top: 0;
        }
        100% {
          top: 100%;
        }
      }
      @keyframes signalPop {
        0% {
          opacity: 0;
          transform: scale(0.7) translateY(10px);
        }
        15% {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
        80% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: scale(0.95) translateY(-8px);
        }
      }
      @keyframes pulsRing {
        0% {
          transform: scale(1);
          opacity: 0.7;
        }
        100% {
          transform: scale(2.4);
          opacity: 0;
        }
      }
      @keyframes waveBar {
        0%,
        100% {
          transform: scaleY(0.3);
        }
        50% {
          transform: scaleY(1);
        }
      }
      @keyframes orbitDot {
        0% {
          transform: rotate(0deg) translateX(38px) rotate(0deg);
        }
        100% {
          transform: rotate(360deg) translateX(38px) rotate(-360deg);
        }
      }
      @keyframes blinkCursor {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
      }
      @keyframes slideInSig {
        0% {
          opacity: 0;
          transform: translateX(-20px);
        }
        20% {
          opacity: 1;
          transform: translateX(0);
        }
        80% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translateX(10px);
        }
      }
      @keyframes chartDraw {
        0% {
          stroke-dashoffset: 200;
        }
        100% {
          stroke-dashoffset: 0;
        }
      }

      .hero-robots {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
      }

      /* ── Robot Body ── */
      .hrobot {
        position: absolute;
        width: 64px;
        height: 72px;
        animation: floatY 4s ease-in-out infinite;
      }
      .hrobot-2 {
        animation: floatYr 5s ease-in-out infinite;
      }
      .hrobot-inner {
        width: 100%;
        height: 100%;
        background: linear-gradient(
          160deg,
          rgba(99, 102, 241, 0.18),
          rgba(99, 102, 241, 0.06)
        );
        border: 1px solid rgba(99, 102, 241, 0.35);
        border-radius: 14px;
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(4px);
      }
      /* scan line sweeping down the robot */
      .hrobot-inner::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(99, 102, 241, 0.8),
          transparent
        );
        animation: scanLine 2.4s linear infinite;
      }
      /* robot eye row */
      .hrobot-eyes {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding-top: 16px;
      }
      .hrobot-eye {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--amber);
        box-shadow: 0 0 8px var(--amber);
        animation: pulse 1.8s ease-in-out infinite;
      }
      .hrobot-eye:nth-child(2) {
        animation-delay: 0.4s;
        background: #6366f1;
        box-shadow: 0 0 8px #6366f1;
      }
      /* mouth / signal bar */
      .hrobot-mouth {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 3px;
        margin-top: 10px;
        height: 18px;
      }
      .hrobot-bar {
        width: 4px;
        border-radius: 2px;
        background: linear-gradient(180deg, #22c55e, #16a34a);
        transform-origin: bottom;
      }
      .hrobot-bar:nth-child(1) {
        height: 8px;
        animation: waveBar 0.9s ease-in-out infinite;
      }
      .hrobot-bar:nth-child(2) {
        height: 16px;
        animation: waveBar 0.9s ease-in-out infinite 0.15s;
      }
      .hrobot-bar:nth-child(3) {
        height: 12px;
        animation: waveBar 0.9s ease-in-out infinite 0.3s;
      }
      .hrobot-bar:nth-child(4) {
        height: 18px;
        animation: waveBar 0.9s ease-in-out infinite 0.45s;
      }
      .hrobot-bar:nth-child(5) {
        height: 10px;
        animation: waveBar 0.9s ease-in-out infinite 0.6s;
      }
      /* antenna */
      .hrobot-antenna {
        position: absolute;
        top: -14px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 14px;
        background: rgba(99, 102, 241, 0.5);
        border-radius: 1px;
      }
      .hrobot-antenna::before {
        content: "";
        position: absolute;
        top: -5px;
        left: 50%;
        transform: translateX(-50%);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #6366f1;
        box-shadow: 0 0 8px #6366f1;
        animation: pulse 1.2s ease-in-out infinite;
      }
      /* orbit dot around robot */
      .hrobot-orbit {
        position: absolute;
        inset: -18px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .hrobot-orbit-dot {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--amber);
        box-shadow: 0 0 6px var(--amber);
        animation: orbitDot 3s linear infinite;
      }
      .hrobot-orbit-dot:nth-child(2) {
        animation-delay: -1.5s;
        background: #6366f1;
        box-shadow: 0 0 6px #6366f1;
      }

      /* ── BUY / SELL Signal Chips ── */
      .hsignal {
        position: absolute;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 14px;
        border-radius: 10px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
        backdrop-filter: blur(8px);
        animation: signalPop 4s ease-in-out infinite;
      }
      .hsignal-buy {
        background: rgba(34, 197, 94, 0.15);
        border: 1px solid rgba(34, 197, 94, 0.35);
        color: #22c55e;
      }
      .hsignal-sell {
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: #ef4444;
      }
      .hsignal-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        animation: pulse 1s infinite;
      }
      .hsignal-buy .hsignal-dot {
        background: #22c55e;
        box-shadow: 0 0 6px #22c55e;
      }
      .hsignal-sell .hsignal-dot {
        background: #ef4444;
        box-shadow: 0 0 6px #ef4444;
      }

      /* ── Pulse rings floating around ── */
      .hpulse {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
      }
      .hpulse::before,
      .hpulse::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1.5px solid rgba(99, 102, 241, 0.5);
        animation: pulsRing 2.5s ease-out infinite;
      }
      .hpulse::after {
        animation-delay: 1.25s;
        border-color: rgba(245, 158, 11, 0.4);
      }

      /* ── Mini live chart SVG ── */
      .hchart {
        position: absolute;
        background: rgba(10, 15, 30, 0.7);
        border: 1px solid rgba(99, 102, 241, 0.25);
        border-radius: 12px;
        padding: 10px 14px;
        animation: floatYr 6s ease-in-out infinite;
      }
      .hchart-label {
        font-size: 9px;
        color: var(--muted);
        font-weight: 600;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
        font-family: "Inter", sans-serif;
      }
      .hchart svg {
        display: block;
      }
      .hchart-line {
        stroke-dasharray: 200;
        animation: chartDraw 3s ease-in-out infinite alternate;
      }

      /* ── Floating data pill ── */
      .hdata {
        position: absolute;
        background: rgba(10, 15, 30, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 8px;
        padding: 6px 12px;
        font-family: "Inter", sans-serif;
        font-size: 10px;
        animation: slideInSig 5s ease-in-out infinite;
      }
      .hdata-key {
        color: var(--muted);
        margin-bottom: 1px;
      }
      .hdata-val {
        color: #fff;
        font-weight: 700;
        font-size: 12px;
      }
      .hdata-val.up {
        color: #22c55e;
      }
      .hdata-val.dn {
        color: #ef4444;
      }
      .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(245, 158, 11, 0.1);
        border: 1px solid rgba(245, 158, 11, 0.2);
        border-radius: 20px;
        padding: 5px 14px;
        font-size: 11px;
        font-weight: 600;
        color: var(--amber);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 28px;
      }
      .hero-badge::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--amber);
        animation: pulse 2s infinite;
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.4;
        }
      }
      .hero h1 {
        font-size: clamp(36px, 6vw, 68px);
        font-weight: 900;
        line-height: 1.1;
        color: #fff;
        margin-bottom: 24px;
        letter-spacing: -1px;
      }
      .hero h1 .highlight {
        background: linear-gradient(135deg, var(--amber), #fbbf24);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .hero p {
        font-size: clamp(15px, 2vw, 18px);
        color: var(--muted);
        line-height: 1.7;
        max-width: 560px;
        margin: 0 auto 40px;
      }
      .hero-btns {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        flex-wrap: wrap;
      }
      .btn-lg {
        padding: 14px 34px;
        font-size: 15px;
        border-radius: 12px;
      }
      .hero-stats {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        margin-top: 60px;
        flex-wrap: wrap;
      }
      .hero-stat-val {
        font-size: 26px;
        font-weight: 800;
        color: #fff;
      }
      .hero-stat-label {
        font-size: 11px;
        color: var(--muted);
        margin-top: 2px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
      }
      .stat-divider {
        width: 1px;
        height: 40px;
        background: var(--border);
      }

      /* ── TICKER ── */
      .ticker-wrap {
        background: var(--bg2);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 14px 0;
        overflow: hidden;
        position: relative;
      }
      .ticker-track {
        display: flex;
        gap: 40px;
        width: max-content;
        animation: tickerScroll 30s linear infinite;
      }
      .ticker-track:hover {
        animation-play-state: paused;
      }
      @keyframes tickerScroll {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }
      .ticker-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
      }
      .ticker-name {
        color: var(--muted);
      }
      .ticker-price {
        color: #fff;
      }
      .ticker-change {
        font-size: 11px;
      }
      .ticker-change.up {
        color: var(--green);
      }
      .ticker-change.down {
        color: #ef4444;
      }
      .ticker-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--border);
      }

      /* ── SECTIONS ── */
      section {
        padding: 90px 5%;
      }
      .section-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: var(--amber);
        margin-bottom: 12px;
      }
      .section-title {
        font-size: clamp(26px, 4vw, 42px);
        font-weight: 800;
        color: #fff;
        line-height: 1.2;
        margin-bottom: 16px;
      }
      .section-sub {
        font-size: 15px;
        color: var(--muted);
        line-height: 1.7;
        max-width: 520px;
      }
      .section-header {
        margin-bottom: 50px;
      }
      .section-header.center {
        text-align: center;
      }
      .section-header.center .section-sub {
        margin: 0 auto;
      }

      /* ── FEATURES ── */
      .features-bg {
        background: var(--bg2);
      }
      .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
      }
      .feature-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 28px 24px;
        transition: border-color 0.2s, transform 0.2s;
      }
      .feature-card:hover {
        border-color: rgba(245, 158, 11, 0.2);
        transform: translateY(-3px);
      }
      .feature-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
      }
      .feature-icon svg {
        width: 22px;
        height: 22px;
      }
      .fi-amber {
        background: rgba(245, 158, 11, 0.1);
        border: 1px solid rgba(245, 158, 11, 0.2);
      }
      .fi-amber svg {
        stroke: var(--amber);
      }
      .fi-indigo {
        background: rgba(99, 102, 241, 0.1);
        border: 1px solid rgba(99, 102, 241, 0.2);
      }
      .fi-indigo svg {
        stroke: var(--indigo-light);
      }
      .fi-green {
        background: rgba(34, 197, 94, 0.1);
        border: 1px solid rgba(34, 197, 94, 0.2);
      }
      .fi-green svg {
        stroke: var(--green);
      }
      .fi-purple {
        background: rgba(168, 85, 247, 0.1);
        border: 1px solid rgba(168, 85, 247, 0.2);
      }
      .fi-purple svg {
        stroke: #c084fc;
      }
      .fi-blue {
        background: rgba(59, 130, 246, 0.1);
        border: 1px solid rgba(59, 130, 246, 0.2);
      }
      .fi-blue svg {
        stroke: #60a5fa;
      }
      .fi-rose {
        background: rgba(244, 63, 94, 0.1);
        border: 1px solid rgba(244, 63, 94, 0.2);
      }
      .fi-rose svg {
        stroke: #fb7185;
      }
      .feature-title {
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 8px;
      }
      .feature-desc {
        font-size: 13px;
        color: var(--muted);
        line-height: 1.6;
      }

      /* ── HOW IT WORKS ── */
      .steps {
        display: flex;
        flex-direction: column;
        gap: 0;
        max-width: 680px;
      }
      .step {
        display: flex;
        gap: 24px;
        position: relative;
        padding-bottom: 40px;
      }
      .step:last-child {
        padding-bottom: 0;
      }
      .step-left {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .step-num {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        flex-shrink: 0;
        background: linear-gradient(135deg, var(--amber), var(--amber-dark));
        color: #000;
        font-size: 15px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
      }
      .step-line {
        width: 2px;
        flex: 1;
        background: linear-gradient(
          to bottom,
          rgba(245, 158, 11, 0.4),
          transparent
        );
        margin-top: 8px;
      }
      .step:last-child .step-line {
        display: none;
      }
      .step-body {
        padding-top: 8px;
      }
      .step-title {
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 6px;
      }
      .step-desc {
        font-size: 13px;
        color: var(--muted);
        line-height: 1.65;
      }
      .hiw-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
      }
      .hiw-visual {
        background: var(--bg3);
        border: 1px solid var(--border);
        border-radius: 24px;
        padding: 28px;
        position: relative;
        overflow: hidden;
      }
      .hiw-visual::before {
        content: "";
        position: absolute;
        top: -40px;
        right: -40px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(245, 158, 11, 0.15),
          transparent 70%
        );
      }
      .dash-mock {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .mock-row {
        display: flex;
        gap: 12px;
      }
      .mock-card {
        flex: 1;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px;
      }
      .mock-label {
        font-size: 9px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.6px;
        margin-bottom: 6px;
      }
      .mock-val {
        font-size: 18px;
        font-weight: 800;
        color: #fff;
      }
      .mock-val.green {
        color: var(--green);
      }
      .mock-val.amber {
        color: var(--amber);
      }
      .mock-bar-wrap {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
        height: 6px;
        margin-top: 8px;
        overflow: hidden;
      }
      .mock-bar {
        height: 100%;
        border-radius: 4px;
        background: linear-gradient(90deg, var(--amber), #fbbf24);
      }
      .mock-chart {
        height: 80px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid var(--border);
        border-radius: 10px;
        display: flex;
        align-items: flex-end;
        padding: 10px;
        gap: 4px;
      }
      .mock-bar-v {
        flex: 1;
        border-radius: 3px 3px 0 0;
        background: linear-gradient(
          to top,
          rgba(99, 102, 241, 0.6),
          rgba(99, 102, 241, 0.2)
        );
      }

      /* ── PLANS ── */
      .plans-bg {
        background: var(--bg2);
      }
      .plans-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 18px;
      }
      .plan-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 28px 22px;
        transition: border-color 0.2s, box-shadow 0.2s;
        position: relative;
        overflow: hidden;
      }
      .plan-card:hover {
        border-color: rgba(245, 158, 11, 0.25);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      }
      .plan-card.featured {
        border-color: rgba(245, 158, 11, 0.3);
      }
      .plan-featured-chip {
        position: absolute;
        top: 14px;
        right: 14px;
        background: linear-gradient(135deg, var(--amber), var(--amber-dark));
        color: #000;
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        padding: 3px 10px;
        border-radius: 20px;
      }
      .plan-name {
        font-size: 13px;
        font-weight: 700;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 16px;
      }
      .plan-roi {
        font-size: 42px;
        font-weight: 900;
        color: var(--green);
        line-height: 1;
      }
      .plan-roi-label {
        font-size: 11px;
        color: var(--muted);
        margin-bottom: 20px;
        margin-top: 4px;
      }
      .plan-divider {
        border: none;
        border-top: 1px solid var(--border);
        margin: 18px 0;
      }
      .plan-detail {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 12px;
      }
      .plan-detail-label {
        color: var(--muted);
      }
      .plan-detail-val {
        color: #fff;
        font-weight: 600;
      }
      .plan-btn {
        display: block;
        width: 100%;
        margin-top: 22px;
        padding: 11px;
        border-radius: 10px;
        text-align: center;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        transition: all 0.15s;
      }
      .plan-btn-primary {
        background: linear-gradient(135deg, var(--amber), var(--amber-dark));
        color: #000;
        box-shadow: 0 3px 12px rgba(245, 158, 11, 0.3);
      }
      .plan-btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 18px rgba(245, 158, 11, 0.4);
      }
      .plan-btn-secondary {
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
        border: 1px solid var(--border);
      }
      .plan-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      /* ── STATS BANNER ── */
      .stats-banner {
        background: linear-gradient(135deg, #0a1221, #0e1833);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 60px 5%;
      }
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        text-align: center;
      }
      .stat-val {
        font-size: clamp(28px, 4vw, 44px);
        font-weight: 900;
        color: #fff;
      }
      .stat-val span {
        color: var(--amber);
      }
      .stat-desc {
        font-size: 13px;
        color: var(--muted);
        margin-top: 6px;
      }

      /* ── TESTIMONIALS ── */
      .testi-section {
        padding: 90px 0;
        overflow: hidden;
        background: var(--bg2);
      }
      .testi-section .section-header {
        padding: 0 5%;
      }
      .testi-marquee-wrap {
        position: relative;
        margin-top: 50px;
      }
      .testi-marquee-wrap::before,
      .testi-marquee-wrap::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 120px;
        z-index: 2;
        pointer-events: none;
      }
      .testi-marquee-wrap::before {
        left: 0;
        background: linear-gradient(90deg, var(--bg2), transparent);
      }
      .testi-marquee-wrap::after {
        right: 0;
        background: linear-gradient(-90deg, var(--bg2), transparent);
      }
      .testi-row {
        display: flex;
        gap: 18px;
        margin-bottom: 18px;
        width: max-content;
      }
      .testi-row-1 {
        animation: scrollLeft 50s linear infinite;
      }
      .testi-row-2 {
        animation: scrollRight 45s linear infinite;
      }
      .testi-row-3 {
        animation: scrollLeft 55s linear infinite;
      }
      @keyframes scrollLeft {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }
      @keyframes scrollRight {
        from {
          transform: translateX(-50%);
        }
        to {
          transform: translateX(0);
        }
      }
      .testi-row:hover {
        animation-play-state: paused;
      }
      .testi-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 24px 22px;
        width: 300px;
        flex-shrink: 0;
        transition: border-color 0.2s, transform 0.2s;
        cursor: default;
      }
      .testi-card:hover {
        border-color: rgba(245, 158, 11, 0.2);
        transform: translateY(-3px);
      }
      .testi-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 14px;
      }
      .testi-stars {
        display: flex;
        gap: 3px;
      }
      .testi-stars svg {
        width: 13px;
        height: 13px;
        fill: var(--amber);
        stroke: none;
      }
      .testi-quote-icon {
        opacity: 0.12;
      }
      .testi-quote-icon svg {
        width: 28px;
        height: 28px;
        fill: var(--amber);
        stroke: none;
      }
      .testi-text {
        font-size: 13px;
        color: var(--muted);
        line-height: 1.75;
        margin-bottom: 18px;
      }
      .testi-author {
        display: flex;
        align-items: center;
        gap: 11px;
      }
      .testi-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 800;
        color: #fff;
        flex-shrink: 0;
      }
      .testi-name {
        font-size: 13px;
        font-weight: 700;
        color: #fff;
      }
      .testi-meta {
        font-size: 11px;
        color: var(--muted);
        margin-top: 1px;
      }
      .testi-verified {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 10px;
        color: var(--green);
        font-weight: 600;
        margin-top: 2px;
      }
      .testi-verified svg {
        width: 10px;
        height: 10px;
        stroke: var(--green);
      }

      /* ── CTA ── */
      .cta-section {
        text-align: center;
        padding: 100px 5%;
        background: linear-gradient(135deg, #060d1a, #0a1221);
        position: relative;
        overflow: hidden;
      }
      .cta-section::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(99, 102, 241, 0.1) 0%,
          transparent 70%
        );
        pointer-events: none;
      }
      .cta-section .section-title {
        max-width: 600px;
        margin: 0 auto 16px;
      }
      .cta-section .section-sub {
        margin: 0 auto 40px;
      }
      .cta-btns {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        flex-wrap: wrap;
      }

      /* ── FOOTER ── */
      footer {
        background: var(--bg2);
        border-top: 1px solid var(--border);
        padding: 60px 5% 30px;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 40px;
        margin-bottom: 50px;
      }
      .footer-brand p {
        font-size: 13px;
        color: var(--muted);
        line-height: 1.7;
        margin-top: 14px;
        max-width: 280px;
      }
      .footer-col h4 {
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 16px;
      }
      .footer-col a {
        display: block;
        font-size: 13px;
        color: var(--muted);
        text-decoration: none;
        margin-bottom: 10px;
        transition: color 0.15s;
      }
      .footer-col a:hover {
        color: var(--amber);
      }
      .footer-bottom {
        border-top: 1px solid var(--border);
        padding-top: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
      }
      .footer-bottom p {
        font-size: 12px;
        color: var(--muted);
      }

      /* ── MOBILE MENU ── */
      .mobile-menu {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 998;
        background: rgba(6, 13, 26, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 28px;
      }
      .mobile-menu.open {
        display: flex;
      }
      .mobile-menu a {
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        text-decoration: none;
      }
      .mobile-menu a:hover {
        color: var(--amber);
      }

      /* ── RESPONSIVE ── */
      @media (max-width: 1024px) {
        .hiw-layout {
          grid-template-columns: 1fr;
        }
        .hiw-visual {
          order: -1;
        }
        .stats-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .footer-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 768px) {
        nav {
          padding: 14px 5%;
        }
        .nav-links {
          display: none;
        }
        .hamburger {
          display: flex;
        }
        .hero-stats {
          gap: 24px;
        }
        .stat-divider {
          display: none;
        }
        .stats-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 20px;
        }
        .footer-grid {
          grid-template-columns: 1fr;
        }
        section {
          padding: 60px 5%;
        }
      }
      @media (max-width: 480px) {
        .hero h1 {
          letter-spacing: -0.5px;
        }
        .hero-btns {
          flex-direction: column;
          align-items: stretch;
          text-align: center;
        }
        .btn-lg {
          padding: 13px 28px;
        }
      }