:root{
  --bg:#0c1214;
  --panel:#0f1619;
  --text:#e8f1f0;
  --muted:#a6b8b4;
  --accent:#32d1b0;
  --accent2:#1ea1ff;
  --btn:#143432;
  --btnEdge:#0e2726;
  --ghost:#1a262b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 700px at 15% -10%, #0f1f20 0%, var(--bg) 42%, var(--bg) 100%);
}
.wrap{max-width:1160px;margin:0 auto;padding:48px 20px}
.brand{margin-top:8px;margin-bottom:18px}
.logo{height:42px;width:auto;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));}
.accent-line{
  height:8px;width:260px;border-radius:6px;
  background:linear-gradient(90deg,var(--accent) 0%, var(--accent2) 100%);
  box-shadow:0 8px 28px rgba(50,209,176,.25), 0 2px 8px rgba(30,161,255,.12);
  margin:10px 0 28px 2px;
}
.hero{max-width:780px}
.title{
  font-size: clamp(36px, 7vw, 68px);
  line-height:1.02;
  letter-spacing:-0.02em;
  margin:0 0 16px 0;
  font-weight:800;
}
.subtitle{
  font-size: clamp(18px, 2.8vw, 24px);
  line-height:1.45;
  color:var(--muted);
  margin:0 0 28px 0;
}
.cta{display:flex;gap:18px;flex-wrap:wrap}
.btn{
  display:inline-block; text-decoration:none; font-weight:700;
  padding:16px 22px; border-radius:14px; transition:all .18s ease;
  border:1px solid transparent;
}
.btn.primary{
  background: radial-gradient(120% 140% at 10% 20%, rgba(50,209,176,.22), rgba(50,209,176,.08));
  border:1px solid rgba(50,209,176,.35);
  color:var(--text); box-shadow:inset 0 0 0 1px rgba(50,209,176,.18), 0 10px 30px rgba(0,0,0,.35);
}
.btn.primary:hover{transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgba(50,209,176,.28), 0 14px 36px rgba(0,0,0,.42)}
.btn.ghost{
  background:var(--ghost);
  color:var(--text);
  border:1px solid rgba(255,255,255,.08);
}
.btn.ghost:hover{background:#223038}
.footer{
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:80px;
  background:linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,0) 50%);
}
.footer-grid{display:flex;justify-content:space-between;gap:20px;align-items:center}
.muted{color:var(--muted);font-size:14px}
.right{text-align:right}
@media (max-width:640px){
  .footer-grid{flex-direction:column;align-items:flex-start}
  .right{text-align:left}
}