/* ============================================
       HERO
       ============================================ */
    .hero {
      position: relative;
      border-radius: 28px;
      overflow: hidden;
      margin-bottom: 18px;
      background:
        linear-gradient(90deg,
          rgba(12,2,2,.94) 0%,
          rgba(20,3,3,.82) 38%,
          rgba(30,4,4,.35) 62%,
          rgba(40,6,6,.05) 100%),
        url('https://veldrive.com/mNF247xV/a70835cd-7b6e-4560-beb1-7c22baf6051c.png') 65% center / cover no-repeat;
      border: 1px solid rgba(255,95,95,.28);
      box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 60px rgba(255,45,45,.20);
      padding: 40px 36px;
      min-height: 280px;
      display: flex;
      align-items: center;
      animation: fadeInScale .8s ease-out .1s both;
      isolation: isolate;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1.5px;
      background: linear-gradient(140deg, rgba(255,120,120,.7), rgba(255,255,255,.08) 35%, rgba(255,255,255,.05) 65%, rgba(230,0,0,.6));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      z-index: 2;
    }

    .hero::after {
      display: none;
    }

    .hero-inner {
      position: relative;
      z-index: 3;
      max-width: 55%;
      padding-right: 10px;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      font-size: 11.5px;
      font-weight: 700;
      color: #fff;
      letter-spacing: .3px;
      margin-bottom: 18px;
    }

    .hero-badge svg { width: 14px; height: 14px; }

    .hero h1 {
      font-size: clamp(30px, 5.4vw, 50px);
      line-height: 1.04;
      letter-spacing: -1.6px;
      margin-bottom: 14px;
      color: #fff;
      text-shadow: 0 0 30px rgba(255,95,95,.55), 0 2px 8px rgba(0,0,0,.65);
      text-wrap: balance;
    }

    .hero p {
      color: #f2d6d6;
      font-size: 14.5px;
      line-height: 1.6;
      text-shadow: 0 1px 6px rgba(0,0,0,.75);
    }