:root{--primary:#0b71ff;--accent:#34D186;--bg:#eaf4ff;--card:#ffffff;--muted:#6b7280}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:linear-gradient(180deg,#f7fbff,#eaf4ff);color:#062033;line-height:1.5;-webkit-font-smoothing:antialiased}
.container{max-width:1100px;margin:0 auto;padding:20px}
.site-header{position:fixed;left:0;right:0;top:0;z-index:120;background:rgba(255,255,255,0.6);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(11,71,255,0.04)}
.header-inner{display:flex;align-items:center;gap:16px;padding:10px 18px}
.logo{height:56px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--primary)}
.main-nav{margin-left:18px;flex:1}
.main-nav a{margin-right:12px;color:#062033;text-decoration:none;font-weight:600;padding:8px;border-radius:8px}
.nav-actions{display:flex;gap:8px;align-items:center}
.btn{background:var(--primary);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none;display:inline-block;box-shadow:0 8px 30px rgba(11,113,255,0.12);font-weight:600}
.btn-outline{background:transparent;border:1px solid var(--primary);color:var(--primary);padding:8px 12px;border-radius:10px}

/* mobile nav */
.mobile-toggle{display:none}
@media(max-width:880px){ .main-nav{display:none} .mobile-toggle{display:block;margin-left:auto} .logo{height:44px} .header-inner{padding:8px 12px} }

/* Splash */
#splash{position:fixed;inset:0;background:linear-gradient(180deg,#0b71ff,#3ea0ff);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .4s ease}
#splash.hidden{opacity:0;pointer-events:none}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:18px;color:#fff}
.splash-logo{width:320px;height:auto}
.splash-title{font-size:28px;font-weight:700}

/* hero */
.hero{height:62vh;margin-top:84px;display:flex;align-items:center;justify-content:center;padding:28px}
.hero-card{background:var(--card);max-width:980px;width:100%;padding:28px;border-radius:14px;box-shadow:0 24px 60px rgba(11,40,90,0.06);display:flex;gap:24px;align-items:center}
.hero-left{flex:1}
.hero-right{width:360px}
.hero h1{color:var(--primary);font-size:30px;margin-bottom:8px}
.hero p{color:var(--muted)}

/* cards and forms */
.card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 8px 24px rgba(2,6,23,0.04)}
.form-row{margin-bottom:12px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
input[type="text"],input[type="email"],input[type="password"],textarea,select{width:100%;padding:12px;border-radius:10px;border:1px solid #e6eef8;background:#fbfeff;font-size:15px}
.small{font-size:13px;color:var(--muted)}

/* how it works */
.steps{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px}
.step{flex:1;min-width:180px;background:linear-gradient(180deg,#f6fbff,#eef7ff);padding:14px;border-radius:12px;box-shadow:0 8px 20px rgba(11,71,255,0.04)}

/* footer */
.site-footer{padding:30px 0;text-align:center;color:#fff;background:linear-gradient(180deg,var(--primary),#2d89ff);margin-top:40px;border-top-left-radius:8px;border-top-right-radius:8px}

/* responsive */
@media(max-width:880px){ .hero{height:auto;padding:18px}.hero-card{flex-direction:column}.hero-right{width:100%}.steps{flex-direction:column} }