:root{
--primary:#667eea;
--primary-dark:#5a67d8;
--bg:#f7f8fc;
--text:#1f2937;
--muted:#6b7280;
--card:#ffffff;
--radius:24px;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Inter,Arial,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
}

.container{
width:min(1280px,92%);
margin:auto;
}

.section{
padding:90px 0;
}

.section-head{
text-align:center;
margin-bottom:50px;
}

.section-head h2{
font-size:42px;
margin-bottom:10px;
}

.section-head p{
color:var(--muted);
}

.header{
position:sticky;
top:0;
background:#fff;
z-index:100;
border-bottom:1px solid #eee;
}

.header__inner{
display:flex;
justify-content:space-between;
align-items:center;
height:80px;
}

.logo{
font-size:28px;
font-weight:800;
text-decoration:none;
color:#111;
}

.nav{
display:flex;
gap:30px;
}

.nav a{
text-decoration:none;
color:#111;
font-weight:500;
}

.hero{
padding:100px 0;
background:
linear-gradient(
135deg,
#667eea 0%,
#764ba2 100%
);
color:white;
}

.hero__inner{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:60px;
align-items:center;
}

.hero__badge{
display:inline-block;
background:rgba(255,255,255,.15);
padding:10px 16px;
border-radius:999px;
margin-bottom:20px;
}

.hero h1{
font-size:64px;
line-height:1.1;
margin-bottom:25px;
}

.hero p{
font-size:20px;
max-width:650px;
margin-bottom:30px;
}

.hero-search{
display:flex;
gap:10px;
margin-bottom:40px;
}

.hero-search input{
flex:1;
height:60px;
border:none;
border-radius:14px;
padding:0 20px;
}

.hero-search button{
height:60px;
padding:0 30px;
border:none;
background:#fff;
color:#667eea;
font-weight:700;
border-radius:14px;
cursor:pointer;
}

.hero-stats{
display:flex;
gap:40px;
}

.stat strong{
display:block;
font-size:34px;
}

.stat span{
opacity:.9;
}

.brain-card{
width:320px;
height:320px;
margin:auto;
border-radius:40px;
background:rgba(255,255,255,.15);
display:flex;
align-items:center;
justify-content:center;
font-size:140px;
backdrop-filter:blur(10px);
}
.brain-image{
    max-width:80%;
    max-height:80%;
    object-fit:contain;
}
.categories-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}

.category-card{
position:relative;
overflow:hidden;
min-height:220px;
padding:30px;
border-radius:28px;

background:
linear-gradient(
135deg,
var(--gradient-from),
var(--gradient-to)
);

text-decoration:none;
color:white;

display:flex;
flex-direction:column;
justify-content:space-between;

transition:.3s;
}

.category-card:hover{
transform:translateY(-8px);
box-shadow:
0 20px 40px rgba(0,0,0,.18);
}

.category-card::before{
content:'';
position:absolute;
right:-40px;
top:-40px;

width:180px;
height:180px;

border-radius:50%;

background:
rgba(255,255,255,.08);
}

.category-card::after{
content:'';
position:absolute;

left:-30px;
bottom:-30px;

width:120px;
height:120px;

border-radius:50%;

background:
rgba(255,255,255,.06);
}

.category-content{
position:relative;
z-index:2;
}

.category-content h3{
font-size:26px;
font-weight:700;
margin-bottom:12px;
}

.category-content p{
font-size:15px;
line-height:1.5;
opacity:.95;
max-width:220px;
}

.category-image{
    position:absolute;

    right:16px;
    bottom:16px;

    width:72px;
    height:72px;

    object-fit:contain;

    z-index:1;
    filter:
        drop-shadow(0 8px 8px rgba(0,0,0,.45))
        drop-shadow(0 18px 20px rgba(0,0,0,.35))
        drop-shadow(0 30px 40px rgba(0,0,0,.25));
}

right:20px;
bottom:20px;

width:90px;
height:90px;

object-fit:contain;

z-index:2;
}

.category-icon{
font-size:42px;
margin-bottom:15px;
}

.tests-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}

.test-card{
background:#fff;
border-radius:24px;
height:520px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.test-image{
width:100%;
height:220px;
object-fit:cover;
}

.test-body{
    display:flex;
    flex-direction:column;
    flex:1;
}

.test-category{
font-size:13px;
color:#667eea;
margin-bottom:10px;
}

.test-body h3{
margin-bottom:12px;
}

.test-body p{
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;

    overflow:hidden;

    line-height:1.6;
    min-height:72px;
}

.test-meta{
display:flex;
justify-content:space-between;
margin-bottom:20px;
}

.btn-primary{
 margin-top:auto;
display:block;
text-align:center;
padding:14px;
border-radius:12px;
background:#667eea;
color:#fff;
text-decoration:none;
font-weight:700;
}

.features{
padding:90px 0;
background:#fff;
}

.features-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}

.feature-card{
padding:30px;
background:#f8f9ff;
border-radius:24px;
text-align:center;
font-size:18px;
}

.about{
padding:100px 0;
}

.about h2{
text-align:center;
margin-bottom:20px;
font-size:42px;
}

.about p{
max-width:900px;
margin:auto;
text-align:center;
font-size:18px;
}

.footer{
background:#111827;
color:white;
padding:70px 0 20px;
}

.footer__grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:40px;
}

.footer a{
display:block;
color:#d1d5db;
margin:8px 0;
text-decoration:none;
}

.footer__bottom{
text-align:center;
margin-top:40px;
border-top:1px solid rgba(255,255,255,.1);
padding-top:20px;
}

@media(max-width:992px){

.hero__inner,
.categories-grid,
.tests-grid,
.features-grid,
.footer__grid{
grid-template-columns:1fr 1fr;
}

.hero h1{
font-size:44px;
}

}

@media(max-width:768px){

.hero__inner,
.categories-grid,
.tests-grid,
.features-grid,
.footer__grid{
grid-template-columns:1fr;
}

.hero{
padding:60px 0;
}

.hero h1{
font-size:34px;
}

.hero-stats{
flex-direction:column;
gap:20px;
}

.brain-card{
width:220px;
height:220px;
font-size:90px;
}
}