:root{
--bg:#eef4fb;
--card:#fff;
--line:#dfe8f3;
--text:#182334;
--muted:#64748b;
--primary:#635bff;
--primary2:#8b5cf6;
}

*{box-sizing:border-box}

body{
margin:0;
font-family:Inter,Segoe UI,Arial,sans-serif;
background:
radial-gradient(circle at top left,#ffffff 0,#eef4fb 72%);
color:var(--text);
}

.container{
max-width:1180px;
margin:auto;
padding:36px 24px 70px;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:34px;
}

.brand{
font-size:22px;
font-weight:900;
}

.brand span{
color:var(--primary);
}

.nav a{
color:#526178;
text-decoration:none;
margin-left:16px;
font-weight:700;
font-size:14px;
}

.panel{
background:#fff;
border:1px solid var(--line);
border-radius:32px;
padding:46px;
box-shadow:0 30px 80px rgba(0,30,80,.08);
}

.hero{
display:grid;
grid-template-columns:1fr 1fr;
gap:38px;
align-items:center;
}

.badge{
display:inline-block;
background:#eef2ff;
color:#4338ca;
font-weight:800;
font-size:13px;
padding:9px 15px;
border-radius:999px;
margin-bottom:22px;
}

h1{
font-size:54px;
line-height:1.04;
letter-spacing:-1.8px;
margin:0 0 20px;
}

h2{
font-size:34px;
margin:0 0 15px;
}

h3{
font-size:22px;
margin:0 0 12px;
}

p{
color:var(--muted);
line-height:1.7;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
height:54px;
padding:0 28px;
border-radius:15px;
background:
linear-gradient(
135deg,
var(--primary),
var(--primary2)
);
color:#fff;
text-decoration:none;
font-weight:900;
border:0;
}

.btn.light{
background:#fff;
color:#172033;
border:1px solid var(--line);
}

.actions{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:26px;
}

.grid3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
margin-top:26px;
}

.card{
background:#fff;
border:1px solid var(--line);
border-radius:24px;
padding:28px;
box-shadow:0 14px 50px rgba(0,30,80,.06);
}

.mock{
background:#172033;
color:white;
border-radius:30px;
padding:32px;
}

.mock p{
color:#cbd5e1;
}

.iq{
font-size:90px;
font-weight:900;
}

.barline{
height:10px;
background:#334155;
border-radius:999px;
overflow:hidden;
margin:10px 0 18px;
}

.barline span{
display:block;
height:100%;
background:linear-gradient(90deg,#38bdf8,#8b5cf6);
}

footer{
margin-top:60px;
text-align:center;
color:#738295;
}

footer a{
text-decoration:none;
margin:0 10px;
color:#5d6cff;
}

.cookie{
position:fixed;
left:20px;
right:20px;
bottom:20px;
z-index:9999;
}

.cookiebox{
max-width:900px;
margin:auto;
background:white;
border-radius:24px;
padding:24px;
box-shadow:0 20px 70px rgba(0,0,0,.25);
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
}

@media(max-width:900px){
.hero,.grid3{
grid-template-columns:1fr;
}
h1{
font-size:40px;
}
}