*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0d0d1a;
  --bg-card:#161628;
  --accent:#4cc9f0;
  --accent-hover:#3ab4d9;
  --text:#e0e0e0;
  --text-muted:#8a8a9a;
  --border:#2a2a3a;
  --success:#4ecca3;
  --radius:12px;
}

html{scroll-behavior:smooth}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:960px;margin:0 auto;padding:0 24px}

/* ── Hero ────────────────────────────────────────── */

.hero{
  text-align:center;
  padding:100px 24px 80px;
}

.hero-icon{
  width:120px;height:120px;
  border-radius:28px;
  box-shadow:0 0 60px rgba(76,201,240,.35),0 0 120px rgba(76,201,240,.15);
  margin-bottom:28px;
  animation:glow 3s ease-in-out infinite alternate;
}

@keyframes glow{
  from{box-shadow:0 0 40px rgba(76,201,240,.3),0 0 80px rgba(76,201,240,.1)}
  to{box-shadow:0 0 70px rgba(76,201,240,.45),0 0 140px rgba(76,201,240,.2)}
}

.hero h1{
  font-size:3.2rem;
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:12px;
}

.hero .tagline{
  font-size:1.25rem;
  color:var(--text-muted);
  max-width:500px;
  margin:0 auto 32px;
}

.btn-primary{
  display:inline-block;
  background:var(--accent);
  color:#0d0d1a;
  font-weight:600;
  font-size:1.05rem;
  padding:14px 36px;
  border-radius:var(--radius);
  border:none;
  cursor:pointer;
  transition:background .2s,transform .15s;
}

.btn-primary:hover{
  background:var(--accent-hover);
  transform:translateY(-2px);
  text-decoration:none;
}

.hero .sub-cta{
  display:block;
  margin-top:14px;
  font-size:.9rem;
  color:var(--text-muted);
}

/* ── Features ────────────────────────────────────── */

.features{
  padding:80px 24px;
}

.features h2{
  text-align:center;
  font-size:2rem;
  margin-bottom:48px;
}

.features-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:960px;
  margin:0 auto;
}

.feature-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px 24px;
  transition:border-color .3s,box-shadow .3s;
}

.feature-card:hover{
  border-color:var(--accent);
  box-shadow:0 0 24px rgba(76,201,240,.12);
}

.feature-card h3{
  font-size:1.15rem;
  margin-bottom:10px;
  color:var(--accent);
}

.feature-card p{
  font-size:.95rem;
  color:var(--text-muted);
  line-height:1.65;
}

/* ── Pricing ─────────────────────────────────────── */

.pricing{
  padding:80px 24px;
}

.pricing h2{
  text-align:center;
  font-size:2rem;
  margin-bottom:48px;
}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  max-width:680px;
  margin:0 auto;
}

.price-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:36px 28px;
  text-align:center;
  transition:border-color .3s,box-shadow .3s;
}

.price-card.pro{
  border-color:var(--accent);
  box-shadow:0 0 30px rgba(76,201,240,.12);
}

.price-card h3{
  font-size:1.3rem;
  margin-bottom:8px;
}

.price-card .price{
  font-size:2.2rem;
  font-weight:700;
  margin-bottom:4px;
}

.price-card .period{
  font-size:.9rem;
  color:var(--text-muted);
  margin-bottom:20px;
}

.price-card ul{
  list-style:none;
  text-align:left;
  margin-bottom:24px;
}

.price-card ul li{
  padding:6px 0;
  font-size:.95rem;
  color:var(--text-muted);
}

.price-card ul li::before{
  content:"\2713 ";
  color:var(--success);
  font-weight:700;
  margin-right:6px;
}

/* ── Footer ──────────────────────────────────────── */

.footer{
  border-top:1px solid var(--border);
  padding:40px 24px;
  text-align:center;
  color:var(--text-muted);
  font-size:.9rem;
}

.footer-links{
  margin-bottom:12px;
}

.footer-links a{
  color:var(--text-muted);
  margin:0 12px;
  transition:color .2s;
}

.footer-links a:hover{
  color:var(--accent);
}

/* ── Fade-in animation ───────────────────────────── */

.fade-in{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease,transform .6s ease;
}

.fade-in.visible{
  opacity:1;
  transform:translateY(0);
}

/* ── Responsive ──────────────────────────────────── */

@media(max-width:768px){
  .hero h1{font-size:2.2rem}
  .hero .tagline{font-size:1.05rem}
  .features-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
}