:root {
  --bg-dark:#020612;
  --bg-mid:#071a33;
  --blue-glow:#0a6cff;
  --blue-soft:#4aa3ff;
  --text:#ffffff;
  --muted:#9fb4d6;
}

body {
  margin:0;
  font-family:Inter, sans-serif;
  background:linear-gradient(180deg,var(--bg-dark),var(--bg-mid));
  color:var(--text);
}

/* Header */
header {
  position:sticky; top:0;
  background:rgba(2,6,18,0.92);
  padding:16px 0;
  backdrop-filter:blur(10px);
}
.nav { display:flex; justify-content:space-between; align-items:center; }
.nav ul { display:flex; gap:24px; list-style:none; margin:0; padding:0; }
.nav a { color:var(--muted); text-decoration:none; transition:color .3s; }
.nav a:hover { color:var(--blue-soft); }
.cta {
  background:linear-gradient(90deg,var(--blue-glow),var(--blue-soft));
  border:none; padding:10px 18px; border-radius:999px;
  font-weight:700; color:#020612;
  box-shadow:0 0 16px rgba(10,108,255,.7);
  transition:transform .3s;
}
.cta:hover { transform:scale(1.06); }

/* Hero */
.hero { padding:96px 0; }
.hero-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:center; }
.hero h1 {
  font-size:48px;
  background:linear-gradient(180deg,#ffffff,#a9cfff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p { color:var(--muted); }
.hero-actions { display:flex; gap:16px; margin-top:24px; }
.btn {
  padding:12px 18px; border-radius:12px;
  border:1px solid var(--blue-soft);
  background:#071a33; color:var(--text);
  transition:box-shadow .3s, transform .3s;
}
.btn:hover { box-shadow:0 0 16px rgba(10,108,255,.6); transform:translateY(-2px); }
.btn.primary {
  background:linear-gradient(90deg,var(--blue-glow),var(--blue-soft));
  color:#020612;
}

/* Orb */
.orb {
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #5bb3ff, #0a6cff 40%, transparent 70%);
  box-shadow:0 0 60px rgba(10,108,255,0.7), inset 0 0 40px rgba(74,163,255,0.6);
  animation:float 8s infinite ease-in-out;
}
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-15px); } }

/* Sections */
section { padding:84px 0; }
.section-head { text-align:center; margin-bottom:40px; }
.section-head h2 { font-size:32px; margin:0; }
.section-head p { color:var(--muted); }

/* Cards / Testimonials / Pricing */
.cards, .testimonials, .pricing {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  justify-items:center;
}
.card, .quote, .plan {
  background:#071a33;
  padding:22px; border-radius:14px;
  border:1px solid rgba(10,108,255,0.25);
  transition:transform .3s, box-shadow .3s;
}
.card:hover, .plan:hover { transform:translateY(-6px); box-shadow:0 0 24px rgba(10,108,255,.7); }
.card h3, .plan h3 { margin:8px 0; }
.card p, .quote p { color:var(--muted); }
/* ================= MOBILE PERFECT UI ================= */
@media (max-width: 768px) {

  /* 🔥 NAV */
  .nav {
    flex-direction: column;
    gap: 12px;
  }

  .nav ul {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  .cta {
    width: 100%;
    max-width: 220px;
  }

  /* 🔥 HERO */
  .hero {
    padding: 60px 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .hero h1 {
    font-size: 2.2rem;
    line-height: 1.2;
  }

  .hero p {
    font-size: 0.95rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .btn {
    width: 100%;
    max-width: 240px;
  }

  /* 🔥 ORB (balanced, not overwhelming) */
  .orb {
    width: 180px;
    height: 180px;
    margin: auto;
  }

  /* 🔥 SECTIONS */
  section {
    padding: 60px 0;
  }

  .section-head h2 {
    font-size: 1.6rem;
  }

  .section-head p {
    font-size: 0.9rem;
  }

  /* 🔥 GRID FIX (MOST IMPORTANT) */
  .cards,
  .testimonials,
  .pricing {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* 🔥 CARD DESIGN (mobile optimized) */
  .card, .quote, .plan {
    padding: 18px;
    border-radius: 12px;
  }

  .card h3, .plan h3 {
    font-size: 1.1rem;
  }

  .card p, .quote p {
    font-size: 0.9rem;
  }

  /* 🔥 PRICING BUTTON */
  .buy {
    width: 100%;
    margin-top: 10px;
  }

  /* 🔥 NEWSLETTER */
  .newsletter {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .newsletter form {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .newsletter input {
    width: 100%;
    margin-bottom: 10px;
  }

  .newsletter button {
    width: 100%;
  }

}
/* Testimonials