*{box-sizing:border-box}
body{margin:0;background:#f8fafc;color:#0f172a;font-family:Inter,Arial,Helvetica,sans-serif}
a{text-decoration:none}
.topnav{height:78px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 56px;border-bottom:1px solid #e5e7eb;box-shadow:0 8px 30px rgba(15,23,42,.06)}
.logo{font-size:30px;font-weight:950;color:#111827;letter-spacing:-1px}
.logo span{background:linear-gradient(135deg,#7c3aed,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.navlinks{display:flex;gap:24px;align-items:center}
.navlinks a{color:#334155;font-weight:800;font-size:14px}
.navlinks .btn,.btn-primary{background:linear-gradient(135deg,#7c3aed,#06b6d4);color:#fff;padding:14px 28px;border-radius:999px;border:0;box-shadow:0 14px 35px rgba(124,58,237,.25)}
.btn-outline{padding:14px 28px;border-radius:999px;background:#fff;color:#0f172a;border:1px solid #cbd5e1;font-weight:800}

.hero{min-height:calc(100vh - 78px);display:flex;align-items:center;justify-content:center;text-align:center;padding:80px 24px;background:radial-gradient(circle at 15% 20%,rgba(124,58,237,.18),transparent 30%),radial-gradient(circle at 85% 25%,rgba(6,182,212,.18),transparent 30%),radial-gradient(circle at 50% 100%,rgba(249,115,22,.12),transparent 35%),#f8fafc}
.hero h1{font-size:72px;line-height:1.05;margin:0;color:#0f172a;letter-spacing:-3px}
.hero h1 span{background:linear-gradient(135deg,#7c3aed,#06b6d4,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{color:#475569;font-size:21px;line-height:1.7;max-width:760px;margin:24px auto 0}
.hero-actions{margin-top:36px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

.feature-grid{margin-top:70px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin-left:auto;margin-right:auto}
.feature-card{background:#fff;padding:32px;border-radius:26px;box-shadow:0 20px 60px rgba(15,23,42,.10);text-align:left;border:1px solid #eef2f7}
.feature-icon{font-size:42px}
.feature-card h3{color:#0f172a;margin:18px 0 10px}
.feature-card p{font-size:15px;color:#64748b;margin:0;line-height:1.6}

.stats-row{margin-top:78px;display:flex;justify-content:center;gap:80px;flex-wrap:wrap}
.stats-row strong{display:block;font-size:52px;font-weight:950}
.stats-row span{color:#64748b;font-weight:800}

.auth-wrap{min-height:calc(100vh - 78px);display:flex;align-items:center;justify-content:center;background:#f8fafc}
.auth-card{width:440px;background:#fff;border:1px solid #e5e7eb;border-radius:26px;padding:42px;box-shadow:0 24px 70px rgba(15,23,42,.12)}
.auth-card h1{text-align:center;margin:0 0 18px;color:#0f172a}
.form-group{margin-bottom:18px}
label{display:block;color:#64748b;margin-bottom:8px;font-size:12px;font-weight:900;letter-spacing:1px}
input{width:100%;background:#f8fafc;border:1px solid #dbe4ee;color:#0f172a;padding:16px;border-radius:14px}
button{cursor:pointer}
.btn-full{width:100%;padding:16px;margin-top:12px;background:linear-gradient(135deg,#7c3aed,#06b6d4);color:#fff;border:0;border-radius:14px;font-weight:900}
.center{text-align:center;color:#64748b;margin-top:22px}

@media(max-width:800px){
    .topnav{padding:0 20px}
    .hero h1{font-size:42px}
    .feature-grid{grid-template-columns:1fr}
    .stats-row{gap:34px}
}