HERO
   ============================================================ */
    #hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: var(--space-8) 0 var(--space-7);
      position: relative;
      overflow: hidden;
    }

    .hero-bg-gradient {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 90% 55% at 50% 20%, rgba(139, 38, 255, .15) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 85% 75%, rgba(255, 255, 255, .03) 0%, transparent 60%);
      pointer-events: none;
    }

    .hero-grid-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(139, 38, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 38, 255, .05) 1px, transparent 1px);
      background-size: 56px 56px;
      -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, black 10%, transparent 75%);
              mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, black 10%, transparent 75%);
    }

    .hero-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-7);
      align-items: center;
      position: relative;
      z-index: 2;
    }

    .hero-eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: 'Rajdhani', sans-serif;
      font-weight: 600;
      font-size: 13px;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 1.4rem;
    }

    .hero-eyebrow::before {
      content: '';
      width: 28px;
      height: 2px;
      background: var(--accent);
    }

    .hero-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: var(--text-hero);
      line-height: .88;
      letter-spacing: 2px;
      margin-bottom: var(--space-5);
    }

    .hero-title .t1 {
      display: inline;
      color: var(--text);
      margin-right: 15px;
    }

    .hero-title .t2 {
      display: inline;
      color: #FFFFFF;
    }

    .hero-title .t3 {
      display: block;
      color: var(--accent);
      text-shadow: 0 0 48px var(--accent-glow);
    }

    .hero-desc {
      font-size: var(--text-body);
      color: var(--text2);
      line-height: 1.75;
      max-width: 430px;
      margin-bottom: var(--space-6);
    }

    .hero-ctas {
      display: flex;
      gap: var(--space-3);
      flex-wrap: wrap;
      margin-bottom: var(--space-6);
    }

    .hero-stats {
      display: flex;
      gap: var(--space-7);
    }

    .hero-stats > div:first-child .stat-num {
      color: var(--purple-mid);
    }

    .stat-num {
      font-family: 'Bebas Neue', sans-serif;
      font-size: var(--text-h2);
      letter-spacing: 1px;
      color: var(--text);
      line-height: 1;
    }

    .stat-num sup {
      font-size: 20px;
      color: var(--accent);
    }

    .stat-label {
      font-size: 11px;
      color: var(--text3);
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-top: 2px;
    }

    /* Hero Visual */
    .hero-visual {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-card {
      width: 320px;
      height: 400px;
      background: linear-gradient(150deg, var(--surface) 0%, var(--bg3) 100%);
      border: 1px solid var(--border);
      border-radius: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 40px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(123, 47, 190, .18);
      animation: heroFloat 6s ease-in-out infinite;
    }

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

    @keyframes heroFloat {

      0%,
      100% {
        transform: translateY(0) rotate(.3deg);
      }

      50% {
        transform: translateY(-18px) rotate(-.3deg);
      }
    }

    .hero-card-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 180px;
      height: 180px;
      background: radial-gradient(circle, rgba(123, 47, 190, .65) 0%, transparent 70%);
      transform: translate(-50%, -50%);
      filter: blur(28px);
      pointer-events: none;
    }

    .hero-card-emoji {
      font-size: 90px;
      filter: drop-shadow(0 0 18px rgba(0, 245, 255, .25));
      position: relative;
      z-index: 1;
    }

    .hero-card-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 26px;
      letter-spacing: 2px;
      color: var(--text);
      z-index: 1;
    }

    .hero-card-price {
      font-family: 'Rajdhani', sans-serif;
      font-weight: 700;
      font-size: 22px;
      color: var(--accent);
      z-index: 1;
    }

    .hero-card-badge {
      position: absolute;
      top: 18px;
      right: 18px;
      background: var(--red);
      color: #fff;
      font-family: 'Rajdhani', sans-serif;
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 6px;
      z-index: 2;
    }

    .float-tag {
      position: absolute;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 9px 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: 'Rajdhani', sans-serif;
      font-size: 13px;
      font-weight: 600;
      color: var(--text2);
      white-space: nowrap;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    }

    .float-tag.t1 {
      top: 18px;
      left: -40px;
      animation: ft1 4.5s ease-in-out infinite;
    }

    .float-tag.t2 {
      bottom: 90px;
      left: -55px;
      animation: ft1 4.5s ease-in-out infinite .8s;
    }

    .float-tag.t3 {
      bottom: 30px;
      right: -20px;
      animation: ft1 4.5s ease-in-out infinite 1.6s;
    }

    @keyframes ft1 {

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

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

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .dot-g {
      background: var(--green);
      box-shadow: 0 0 7px var(--green);
    }

    .dot-c {
      background: var(--accent);
      box-shadow: 0 0 7px var(--accent);
    }

    .dot-p {
      background: var(--purple-mid);
      box-shadow: 0 0 7px var(--purple-mid);
    }

    /* ============================================================