:root{
  --primary:#8b5cf6;
  --primary-dark:#7c3aed;
  --secondary:#ec4899;
  --success:#10b981;
  --bg-dark:#0f172a;
  --bg-darker:#020617;
  --text:#f1f5f9;
  --text-muted:#94a3b8;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 800px at 10% 10%, rgba(139,92,246,.22), transparent 60%),
              radial-gradient(1000px 700px at 90% 30%, rgba(236,72,153,.18), transparent 55%),
              radial-gradient(1000px 700px at 40% 100%, rgba(6,182,212,.14), transparent 55%),
              var(--bg-darker);
  color:var(--text);
  line-height:1.6;
}

a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:0 1.25rem}

.topbar{
  padding:1.25rem 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(2,6,23,.35);
  backdrop-filter: blur(14px);
  position:sticky;
  top:0;
  z-index:10;
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:900;letter-spacing:.2px}
.brand-bolt{
  width:34px;height:34px;border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.08em;
  box-shadow:0 12px 30px rgba(139,92,246,.25);
}
.nav-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1rem;border-radius:12px;
  text-decoration:none;font-weight:700;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(139,92,246,.6);background:rgba(255,255,255,.08)}
.btn.primary{
  border:none;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  box-shadow:0 18px 40px rgba(139,92,246,.22);
}
.btn.primary:hover{transform:translateY(-1px) scale(1.01)}

.page{padding:3rem 0 4rem}
.hero{
  margin:0 0 1.25rem;
  font-size:2.2rem;
  font-weight:900;
  letter-spacing:-.02em;
}
.subtitle{color:rgba(255,255,255,.86);max-width:70ch;margin:0 0 2rem}
.card{
  background:rgba(15,23,42,.62);
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  padding:2rem;
  backdrop-filter: blur(18px);
  box-shadow:0 24px 60px rgba(0,0,0,.25);
}
.card h2{margin:1.75rem 0 .5rem;font-size:1.35rem}
.card h2:first-child{margin-top:0}
.card p{margin:.6rem 0;color:rgba(255,255,255,.92)}
.card ul{margin:.75rem 0 0;padding-left:1.25rem;color:rgba(255,255,255,.92)}
.card li{margin:.35rem 0}
.muted{color:var(--text-muted)}
.callout{
  margin-top:1.25rem;
  padding:1rem 1.25rem;
  border-radius:16px;
  border:1px solid rgba(139,92,246,.35);
  background:linear-gradient(135deg, rgba(139,92,246,.14), rgba(236,72,153,.08));
}

.footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:2rem 0;
  background:rgba(2,6,23,.35);
}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-links{display:flex;gap:1rem;flex-wrap:wrap}
.footer a{color:rgba(255,255,255,.88);text-decoration:none}
.footer a:hover{text-decoration:underline}

/* Forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-grid .full{grid-column:1/-1}
label{display:block;margin:0 0 .35rem;font-weight:700}
input,textarea{
  width:100%;
  padding:.85rem .9rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}
textarea{min-height:120px;resize:vertical}
input:focus,textarea:focus{border-color:rgba(139,92,246,.7);background:rgba(255,255,255,.08)}
.form-actions{margin-top:1rem;display:flex;gap:.75rem;flex-wrap:wrap}

@media (max-width:720px){
  .hero{font-size:1.8rem}
  .form-grid{grid-template-columns:1fr}
}