/* ============================================
       HERO
       ============================================ */
    .hero {
      position: relative;
      border-radius: 28px;
      overflow: hidden;
      margin-bottom: 18px;
      background:
        linear-gradient(90deg,
          rgba(2, 12, 3, 0.94) 0%,
          rgba(3, 20, 5, 0.82) 38%,
          rgba(4, 30, 7, 0.35) 62%,
          rgba(7, 40, 6, 0.05) 100%),
        url('https://gambarbacok.club/bnrswti01') 65% center / cover no-repeat;
      border: 1px solid rgba(95, 255, 108, 0.28);
      box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 60px rgba(45, 255, 59, 0.2);
      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(120, 255, 140, 0.7), rgba(255,255,255,.08) 35%, rgba(255,255,255,.05) 65%, rgba(0, 230, 27, 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(95, 255, 103, 0.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);
    }