.hero{
  padding:90px 0 80px;
  position:relative;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
}

.hero-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;

  background:rgba(0,194,255,.12);

  border:1px solid rgba(0,194,255,.2);

  padding:12px 18px;

  border-radius:999px;

  color:var(--secondary);

  font-size:.95rem;

  margin-bottom:24px;

  font-weight:700;
}

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

.hero h1 span{
  background:linear-gradient(135deg,#00c2ff,#00ffbf);

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero p{
  color:#b7c6d9;
  font-size:1.1rem;
  line-height:1.8;
  margin-bottom:35px;
  max-width:620px;
}

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

 .hero{
      padding:90px 0 80px;
      position:relative;
    }

    .hero-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:60px;
      align-items:center;
    }

    .hero-tag{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:rgba(0,194,255,.12);
      border:1px solid rgba(0,194,255,.2);
      padding:12px 18px;
      border-radius:999px;
      color:var(--secondary);
      font-size:.95rem;
      margin-bottom:24px;
      font-weight:700;
    }

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

    .hero h1 span{
      background:linear-gradient(135deg,#00c2ff,#00ffbf);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }

    .hero p{
      color:#b7c6d9;
      font-size:1.1rem;
      line-height:1.8;
      margin-bottom:35px;
      max-width:620px;
    }

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

    .btn-outline{
      padding:16px 28px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.1);
      color:white;
      background:rgba(255,255,255,.03);
    }

    .btn-outline:hover{
      background:rgba(255,255,255,.08);
    }

    .phone{
      position:relative;
      width:100%;
      max-width:430px;
      margin:auto;
    }

    .phone-frame{
      background:linear-gradient(180deg,#15243c,#0c1524);
      border-radius:40px;
      padding:18px;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow);
      transform:rotate(-2deg);
    }

    .phone-screen{
      background:#f4f7fb;
      border-radius:28px;
      padding:22px;
      overflow:hidden;
      min-height:700px;
      position:relative;
    }

    .app-top{
      background:linear-gradient(135deg,#0066ff,#00c2ff);
      border-radius:20px;
      padding:22px;
      color:white;
      margin-bottom:22px;
    }

    .app-top h3{
      font-size:1.3rem;
      margin-bottom:8px;
    }

    .app-top p{
      opacity:.9;
      font-size:.92rem;
    }

    .mini-card{
      background:white;
      border-radius:18px;
      padding:18px;
      margin-bottom:16px;
      box-shadow:0 10px 25px rgba(0,0,0,.06);
    }

    .mini-label{
      font-size:.8rem;
      color:#667;
      margin-bottom:8px;
    }

    .mini-value{
      font-size:1.35rem;
      font-weight:800;
      color:#07111f;
    }