/* ======= Base ======= */
:root{
  --bg:#0e1116;
  --card:#151a22;
  --card-2:#1a1f27;
  --accent:#00bfa6;
  --accent-2:#5df2d6;
  --text:#e6e8ec;
  --muted:#a4acb9;
  --line:#232a36;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial;
  background: radial-gradient(1200px 800px at 80% -20%, rgba(0,191,166,.15), transparent 40%),
              radial-gradient(800px 800px at -10% 110%, rgba(93,242,214,.10), transparent 40%),
              var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{width:min(1120px,92%);margin:0 auto}

/* ======= Buttons ======= */
.btn{
  display:inline-block;
  padding:.9rem 1.2rem;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.2px;
  transition:.2s ease;
  border:1px solid transparent;
}
.btn--primary{background:var(--accent);color:#052b25}
.btn--ghost{border-color:var(--line);color:var(--text);background:transparent}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}

/* ======= Hero ======= */
.hero{
  position:relative;
  padding:5.5rem 0 4rem;
  overflow:hidden;
}
.hero__inner{text-align:center}
.hero h1{
  font-size: clamp(2rem, 2.8vw + 1rem, 3.2rem);
  font-weight: 900;
  letter-spacing:.2px;
}
.subtitle{
  margin:.8rem auto 1.4rem;
  color:var(--muted);
  max-width: 780px;
}
.hero__cta{display:flex;gap:.8rem;justify-content:center;margin-top:1rem}
.hero__shape{
  position:absolute;inset:-20% -10% auto auto;height:420px;width:420px;
  background: conic-gradient(from 180deg at 50% 50%, rgba(0,191,166,.28), rgba(93,242,214,.08), transparent 40%);
  filter: blur(30px);
  transform: rotate(15deg);
  pointer-events:none;
}

/* ======= Cards / Sections ======= */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 60%), var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:2rem;
  box-shadow: var(--shadow);
}

.card + .card{margin-top:1.6rem}

.grid-2{display:grid;grid-template-columns:1.4fr .9fr;gap:1.6rem;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}

.aside{
  background: var(--card-2);
  border:1px solid var(--line);
  border-radius: 14px;
  padding:1.2rem 1.1rem;
  position:relative;
}

.badge{
  position:absolute;top:-12px;right:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#062822;
  font-weight:800;
  padding:.35rem .6rem;
  border-radius:999px;
  font-size:.8rem;
  letter-spacing:.3px;
  border:1px solid #0e5c50aa;
}

.pillwrap{display:flex;flex-wrap:wrap;gap:.6rem;margin:.6rem 0 0}
.pill{
  padding:.55rem .75rem;border-radius:999px;
  background:#0f141c;border:1px solid var(--line);color:var(--text);
  font-size:.95rem;
}

.feature{background:var(--card-2);border:1px solid var(--line);border-radius:14px;padding:1.2rem}

.check li::marker{content:'✔ ';color:var(--accent)}
.warn li::marker{content:'⚠ ';}
.check, .warn{padding-left:1.1rem}

.steps{counter-reset: step; list-style:none}
.steps li{position:relative;padding-left:2.4rem;margin:.7rem 0}
.steps li::before{
  counter-increment: step;
  content: counter(step);
  position:absolute;left:0;top:0;
  width:1.8rem;height:1.8rem;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#062822;font-weight:900;display:grid;place-items:center;
}

.stat{display:flex;align-items:center;gap:.7rem;margin:.6rem 0}
.stat__num{
  display:grid;place-items:center;
  width:48px;height:48px;border-radius:12px;
  background:#0f141c;border:1px solid var(--line);
  font-weight:900;font-size:1.1rem;color:var(--accent-2);
}
.stat__label{color:var(--muted)}

.callout{
  margin-top:1rem;padding:1rem 1.2rem;border-radius:12px;
  background: #0f141c;border:1px dashed var(--line);color:var(--text);
}

.tips{background:var(--card-2);border:1px solid var(--line);border-radius:14px;padding:1.2rem}

.muted{color:var(--muted)}

/* ======= Footer ======= */
.footer{border-top:1px solid var(--line);margin:2rem 0 0;padding:1.6rem 0;color:var(--muted);text-align:center}

/* ======= Responsive ======= */
@media (max-width: 960px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .hero__shape{display:none}
}