:root{

--primary:#007AFF;
--bg:#f5f7fb;
--card:#ffffff;
--text:#1d1d1f;
--secondary:#6e6e73;
--border:#e6e6e6;

}

@media(prefers-color-scheme:dark){

:root{

--bg:#111315;
--card:#1c1c1e;
--text:#f5f5f7;
--secondary:#a1a1aa;
--border:#333;

}

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.7;

}

.container{

width:min(1100px,92%);
margin:auto;

}

.hero{

padding:90px 0;
text-align:center;

}

.badge{

display:inline-block;
background:#007AFF15;
color:var(--primary);
padding:8px 18px;
border-radius:999px;
font-weight:600;
margin-bottom:25px;

}

.hero h1{

font-size:3.3rem;
margin-bottom:20px;

}

.hero p{

max-width:650px;
margin:auto;
color:var(--secondary);
font-size:1.2rem;

}

.buttons{

margin-top:40px;
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;

}

.primary,.secondary{

padding:15px 28px;
border-radius:14px;
text-decoration:none;
font-weight:600;
transition:.25s;

}

.primary{

background:var(--primary);
color:white;

}

.secondary{

background:var(--card);
border:1px solid var(--border);
color:var(--text);

}

.grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:24px;
margin-bottom:80px;

}

.card{

background:var(--card);
padding:30px;
border-radius:20px;
border:1px solid var(--border);

}

.card h2{

margin:20px 0;

}

.card a{

color:var(--primary);
text-decoration:none;

}

.icon{

font-size:42px;

}

.faq{

margin-bottom:80px;

}

.faq h2{

margin-bottom:30px;

}

details{

background:var(--card);
padding:20px;
border-radius:16px;
margin-bottom:15px;
border:1px solid var(--border);

}

summary{

cursor:pointer;
font-weight:600;

}

details p{

margin-top:15px;

}

footer{

border-top:1px solid var(--border);
padding:40px 0;

}

.footer{

display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:20px;

}

.footer a{

text-decoration:none;
color:var(--secondary);

}

.policy{

max-width:900px;
padding:70px 0;

}

.policy h2{

margin-top:35px;
margin-bottom:10px;

}

.back{

display:inline-block;
margin-top:40px;

}

@media(max-width:768px){

.hero h1{

font-size:2.3rem;

}

}