:root{
--primary:#2563ff;
--primary2:#5b8cff;
--bg:#f6f9ff;
--surface:rgba(255,255,255,.72);
--card:#fff;
--text:#0f172a;
--muted:#64748b;
--border:#e6edf8;
--shadow:0 25px 60px rgba(15,23,42,.08);
--radius:28px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:Inter,sans-serif;
background:
radial-gradient(circle at 15% 0%,#d9e9ff 0,transparent 30%),
radial-gradient(circle at 100% 10%,#b8d2ff 0,transparent 28%),
linear-gradient(#f7faff,#f3f8ff);
color:var(--text);
}
.container{max-width:430px;margin:auto;padding:22px}
.site-header{
position:sticky;top:0;z-index:100;
backdrop-filter:blur(20px);
background:rgba(255,255,255,.72);
border-bottom:1px solid rgba(255,255,255,.5)
}
.nav{display:flex;justify-content:space-between;align-items:center;height:76px}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}
.brand-icon{
width:46px;height:46px;border-radius:16px;
display:grid;place-items:center;
background:linear-gradient(135deg,var(--primary),#6ea8ff);
color:#fff;font-weight:900;
box-shadow:0 15px 35px rgba(37,99,255,.28)
}
.brand-text{font-size:30px;font-weight:900}
.brand-text span{
background:linear-gradient(135deg,var(--primary),#7db2ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.nav-btn,.primary-btn,button{
display:inline-flex;justify-content:center;align-items:center;
padding:16px 22px;
border-radius:18px;
text-decoration:none;
font-weight:800;
background:linear-gradient(135deg,var(--primary),var(--primary2));
color:#fff;border:none;
box-shadow:0 18px 40px rgba(37,99,255,.28);
cursor:pointer;transition:.25s}
.nav-btn{padding:12px 16px;font-size:14px}
.secondary-btn{
display:inline-flex;justify-content:center;align-items:center;
padding:16px 22px;border-radius:18px;
background:#fff;color:var(--text);
border:1px solid var(--border);text-decoration:none;font-weight:700
}
.hero{padding:60px 0 30px;position:relative;overflow:hidden}
.hero:before{
content:"";position:absolute;right:-120px;top:-100px;width:320px;height:320px;
background:radial-gradient(circle,#8ab8ff,transparent 70%);filter:blur(8px)}
.eyebrow{
display:inline-flex;align-items:center;gap:8px;
padding:8px 14px;border-radius:999px;
background:#eaf2ff;color:var(--primary);font-size:13px;font-weight:700}
.live-dot{width:8px;height:8px;background:#22c55e;border-radius:50%}
.hero h1{font-size:52px;line-height:1.02;letter-spacing:-2px;margin:18px 0}
.lead{color:var(--muted);font-size:17px;line-height:1.75}
.hero-actions{display:flex;flex-direction:column;gap:14px;margin:28px 0}
.trust-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.hero-ui{margin-top:42px}
.floating{
background:var(--surface);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.8);
border-radius:var(--radius);
padding:22px;
box-shadow:var(--shadow);
margin-bottom:18px;
animation:float 6s ease-in-out infinite;
}
.floating:nth-child(2){margin-left:24px;animation-delay:1.5s}
.floating:nth-child(3){margin-left:48px;animation-delay:3s}
@keyframes float{50%{transform:translateY(-10px)}}
.floating small{color:var(--primary);font-weight:700}
.floating h3{font-size:28px;margin:8px 0}
.floating span{color:var(--muted)}
.stats{padding:20px 0}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stat{background:#fff;border-radius:24px;padding:20px 10px;text-align:center;box-shadow:var(--shadow)}
.stat h2{font-size:30px;color:var(--primary)}
.stat p{font-size:13px;color:var(--muted)}
.search-panel,.faq-item,.process article{
background:#fff;border-radius:30px;padding:28px;box-shadow:var(--shadow);margin-bottom:18px}
.search-panel h2,.process h2,.faq h2{font-size:34px;margin-bottom:10px}
.search-panel p{color:var(--muted);margin-bottom:18px}
form{display:flex;flex-direction:column;gap:14px}
input,select{
height:58px;padding:0 18px;border-radius:18px;
border:1px solid var(--border);font-size:16px}
input:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,255,.12)}
.secure-note{margin-top:16px;color:var(--muted);font-size:13px}
.process{padding:30px 0}
.steps{display:grid;gap:18px}
.process article div{
width:50px;height:50px;border-radius:50%;
display:grid;place-items:center;
background:linear-gradient(135deg,var(--primary),var(--primary2));
color:#fff;font-weight:800;margin-bottom:16px}
.process article h3{margin-bottom:10px}
.process article p,.faq-item p{color:var(--muted)}
.faq{padding:20px 0}
.faq-item h3{margin-bottom:10px}
footer{
background:#0f172a;color:#d4d9e5;
padding:60px 0 90px;margin-top:40px}
footer strong{display:block;margin-bottom:14px;color:#fff}
@media(min-width:900px){
.container{max-width:1180px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
.hero-actions{flex-direction:row}
.steps{grid-template-columns:repeat(2,1fr)}
}