:root{
    --bg:#0b0d12;
    --card:#11151d;
    --muted:#8a94a6;
    --text:#e8edf7;
    --primary:#4f8cff;
    --primary-600:#3e73d4;
    --border:#1c2230;
    --ring:#9bb8ff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:var(--text);
    background:linear-gradient(180deg, #0b0d12 0%, #0f1320 100%);
    line-height:1.6;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{
    width:min(1120px, 92vw);
    margin-inline:auto;
}
.container.narrow{width:min(800px, 92vw)}
.container.tiny{width:min(700px, 92vw)}

.section{padding:72px 0}
.section.alt{background:linear-gradient(180deg, #0f1320 0%, #0b0d12 100%)}

.site-header{
    position:sticky;top:0;z-index:50;
    background:rgba(11,13,18,.72);
    backdrop-filter: blur(8px);
    border-bottom:1px solid var(--border);
}
.nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 0;
}
.logo{
    font-weight:800;letter-spacing:.2px;font-size:20px;
}
.logo span{color:var(--primary)}
.nav-links{
    display:flex;gap:22px;align-items:center;
}
.nav-links a{color:var(--muted)}
.nav-links a:hover{color:var(--text)}
.btn{
    display:inline-block;
    padding:12px 16px;border-radius:10px;
    border:1px solid var(--border);
    background:transparent;color:var(--text);font-weight:600;
}
.btn-sm{padding:8px 12px;font-size:14px}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#071122}
.btn-primary:hover{background:var(--primary-600);border-color:var(--primary-600)}
.btn-ghost{background:transparent}
.btn-ghost:hover{border-color:var(--text)}

.nav-toggle{display:none; background:transparent; border:1px solid var(--border); color:var(--text); padding:8px 10px; border-radius:8px}

.hero{
    padding-top:84px;padding-bottom:48px;
}
.grid.two{
    display:grid;grid-template-columns: 1.2fr .8fr;gap:28px;align-items:center;
}
.grid.three{
    display:grid;grid-template-columns:repeat(3, 1fr);gap:16px;
}
h1{font-size:44px;line-height:1.12;margin:0 0 12px}
h2{font-size:32px;line-height:1.2;margin:0 0 18px}
h3{font-size:20px;margin:0 0 8px}
.lead{color:var(--muted);font-size:18px;margin-bottom:18px}
.actions{display:flex;gap:12px;margin:18px 0 8px}

.trust{margin:16px 0 0;padding:0;list-style:none;display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.hero-card{
    background:radial-gradient(120% 120% at 100% 0%, #1b2335 0%, #121826 60%, #0e1320 100%);
    border:1px solid var(--border);border-radius:16px;padding:18px;
    display:grid;gap:12px;
}
.stat{
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid var(--border);border-radius:14px;padding:16px;
    display:flex;align-items:baseline;gap:10px;
}
.kpi{font-size:32px;font-weight:800;color:var(--primary)}
.kpi-label{color:var(--muted);font-size:14px}

.card{
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    border:1px solid var(--border);border-radius:14px;padding:16px;
    min-height:140px;
}
.steps{counter-reset:step;margin:0;padding-left:18px;color:var(--muted)}
.steps li{margin:8px 0}
.stack{display:flex;gap:10px;flex-wrap:wrap}
.badge{
    background:#101521;border:1px solid var(--border);border-radius:999px;
    padding:8px 12px;color:var(--muted);font-size:13px
}

.faq details{
    background:#0f1422;border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin:10px 0
}
.faq summary{cursor:pointer;font-weight:600}

.section.cta{
    text-align:center;
    background:radial-gradient(120% 120% at 50% -10%, rgba(79,140,255,.25) 0%, rgba(79,140,255,0) 60%);
}

.site-footer{
    border-top:1px solid var(--border);
    background:#0b0f19;
}
.footer-grid{
    display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:18px;padding:28px 0
}
.muted{color:var(--muted)}

@media (max-width: 980px){
    .grid.two{grid-template-columns:1fr}
    .grid.three{grid-template-columns:1fr 1fr}
    .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
    .nav-links{display:none;position:absolute;right:16px;top:60px;background:#0d1220;border:1px solid var(--border);border-radius:12px;padding:10px 12px;flex-direction:column;gap:10px}
    .nav-links.open{display:flex}
    .nav-toggle{display:inline-flex}
    .grid.three{grid-template-columns:1fr}
    h1{font-size:34px}
}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:8px}