/* ============================================
       HERO
       ============================================ */
    .hero {
      position: relative;
      border-radius: 28px;
      overflow: hidden;
      margin-bottom: 18px;
      background:
        linear-gradient(90deg,
          rgba(0, 0, 0, 0.94) 0%,
          rgba(20,3,3,.82) 38%,
          rgba(0, 0, 0, 0.35) 62%,
          rgba(0, 0, 0, 0.05) 100%),
        url('https://veldrive.com/cZv662Sm/service-donototo.jpg') 65% center / cover no-repeat;
      border: 1px solid #3BE3FC;
      box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 60px #3BE3FC;
      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, #f7f7f7, rgba(255,255,255,.08) 35%, rgba(255,255,255,.05) 65%,  #3BE3FC);
      -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 #f7f7f7, 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);
    }