.hero{
      min-height:100vh;
      display:grid;
      grid-template-columns:1fr 1fr;
      align-items:center;
      gap:60px;
      padding-top:8%;
    }

    .hero-text{
      animation: fadeUp 1s ease;
    }

    .hero-text h1{
      font-size:4rem;
      line-height:1.1;
      margin-bottom:20px;
    }

    .hero-text span{
      color:var(--blue);
    }

    .hero-text p{
      color:var(--gray);
      font-size:1.05rem;
      line-height:1.8;
      margin-bottom:35px;
    }

    .buttons{
      display:flex;
      gap:20px;
      flex-wrap:wrap;
    }

    .btn{
      padding:14px 28px;
      border-radius:14px;
      text-decoration:none;
      font-weight:700;
      transition:.35s;
      border:1px solid transparent;
    }

    .primary{
      background:linear-gradient(135deg,var(--blue),var(--cyan));
      color:#ffffff;
      box-shadow:0 10px 25px #4f8cff59;
    }

    .primary:hover{
      transform:translateY(-5px) scale(1.03);
    }

    .secondary{
      border:1px solid var(--border);
      color:#ffffff;
      background:#ffffff08;
    }

    .secondary:hover{
      border-color:var(--blue);
      transform:translateY(-5px);
    }

    .hero-card{
      background:linear-gradient(145deg,var(--card),var(--card2));
      border:1px solid var(--border);
      border-radius:30px;
      padding:20px;
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
      animation: floatingCard 5s ease-in-out infinite;
    }

    .hero-card::before{
      content:"";
      position:absolute;
      width:180px;
      height:180px;
      background:#4f8cff33;
      border-radius:50%;
      top:-60px;
      right:10px;
    }

    .hero-card img{
      width:80%;
      border-radius:20px;
      transition:.4s;
    }

    .hero-card img:hover{
      transform:scale(1.04);
    }