.hero-strip {
      position: relative;
      min-height: 85vh;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255,255,255,.85), rgba(245,247,251,1)),
        var(--bg);
    }

    .grid-lines::before,
    .grid-lines::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .grid-lines::before {
      background:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
      background-size: 120px 120px;
      opacity: .6;
    }

    .hero-inner {
      position: relative;
      z-index: 5;
      width: min(1320px, calc(100% - 80px));
      margin: 0 auto;
      padding-top: 170px;
      /* padding-bottom: 120px; */
    }

    .eyebrow {
      font-size: 18px;
      font-weight: 700;
      color: rgba(7, 19, 59, .92);
      margin-bottom: 34px;
      letter-spacing: -.03em;
    }

    .eyebrow span {
      color: rgba(85, 102, 145, .75);
      font-weight: 500;
    }

    

    .gradient-text {
      background: linear-gradient(
        90deg,
        #4f46e5 0%,
        #7c3aed 18%,
        #d946ef 42%,
        #fb7185 66%,
        #f59e0b 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .sub {
      margin-top: 34px;
      max-width: 900px;
      font-size: clamp(22px, 2vw, 34px);
      line-height: 1.2;
      letter-spacing: -.05em;
      color: #5c7694;
      font-weight: 500;
    }

    
     
    .wave-wrap {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 1;
      pointer-events: none;
    }

    #waveCanvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .brands {
      position: relative;
      z-index: 4;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 28px;
      width: 100%;
      border-top: 1px solid rgba(12, 28, 72, 0.08);
      padding: 34px 70px;
      margin-top: 80px;
      align-items: center;
      color: rgba(7, 19, 59, .72);
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -.04em;
      text-align: center;
      background: rgba(255,255,255,.42);
      backdrop-filter: blur(10px);
    }

    .brands div {
      opacity: .72;
      transition: all .3s ease;
    }

    .brands div:hover {
      opacity: 1;
      transform: translateY(-3px);
    }

    .orb {
      position: absolute;
      border-radius: 999px;
      filter: blur(60px);
      opacity: .5;
      z-index: 0;
      animation: float 12s ease-in-out infinite;
    }

    .orb.one {
      width: 460px;
      height: 460px;
      right: 8%;
      top: -10%;
      background: radial-gradient(circle, rgba(255,163,58,.45), transparent 70%);
    }

    .orb.two {
      width: 420px;
      height: 420px;
      right: 24%;
      top: 10%;
      background: radial-gradient(circle, rgba(197,92,255,.35), transparent 70%);
      animation-delay: -5s;
    }

    .orb.three {
      width: 360px;
      height: 360px;
      right: 40%;
      top: -6%;
      background: radial-gradient(circle, rgba(88,120,255,.25), transparent 70%);
      animation-delay: -2s;
    }

    @keyframes float {
      0%,100% {
        transform: translateY(0px) translateX(0px);
      }
      50% {
        transform: translateY(-18px) translateX(12px);
      }
    }

    @media (max-width: 980px) {
      .hero-inner {
        width: calc(100% - 44px);
        padding-top: 120px;
      }

      .brands {
        grid-template-columns: repeat(2, 1fr);
        font-size: 18px;
        padding: 28px;
      }

     

      .sub {
        font-size: 24px;
      }
    }