.hero::before{
      content:'';
      position:absolute;
      width:700px;
      height:700px;
      background:#6D28D9;
      border-radius:50%;
      filter:blur(180px);
      top:-250px;
      right:-200px;
      opacity:.45;
    }

    .hero::after{
      content:'';
      position:absolute;
      width:500px;
      height:500px;
      background:#00D4FF;
      border-radius:50%;
      filter:blur(180px);
      bottom:-250px;
      left:-100px;
      opacity:.30;
    }

    .hero-content{
      position:relative;
      z-index:2;
      width:100%;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:60px;
      align-items:center;
    }

    .hero-text h1{
      font-size:72px;
      line-height:1.05;
      margin-bottom:24px;
      font-weight:900;
    }

    .hero-text h1 span{
      background:var(--gradient);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }

    .hero-text p{
      color:var(--muted);
      font-size:20px;
      line-height:1.7;
      margin-bottom:40px;
    }

    .hero-buttons{
      display:flex;
      gap:18px;
      flex-wrap:wrap;
    }.hero-card{
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      border-radius:32px;
      padding:36px;
      backdrop-filter:blur(20px);
      position:relative;
      overflow:hidden;
      box-shadow:0 20px 60px rgba(0,0,0,.35);
    }

    .hero-card::before{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(135deg,rgba(255,255,255,.08),transparent);
    }

    .hero-card h3{
      font-size:24px;
      margin-bottom:24px;
    }