:root{
  --bg:#0b0f1a; --bg2:#0d1324; --fg:#eef2ff; --muted:#a5b4fc;
  --brand1:#6366f1; --brand2:#22d3ee; --ok:#10b981; --warn:#f59e0b; --danger:#ef4444;
  --card:rgba(255,255,255,.05); --stroke:rgba(255,255,255,.12);
  --radius:18px;
}
*{box-sizing:border-box} html,body{margin:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial,sans-serif;
  color:var(--fg);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(34,211,238,.25), transparent 60%),
    radial-gradient(900px 400px at -10% 10%, rgba(99,102,241,.25), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  line-height:1.6;
}
a{color:inherit; text-decoration:none}
.container{max-width:1180px; margin:0 auto; padding:24px}
.row{display:flex; align-items:center}
.nav{position:sticky; top:0; z-index:50; background:rgba(11,15,26,.65); backdrop-filter:blur(10px); border-bottom:1px solid var(--stroke)}
.logo{gap:10px; font-weight:800; letter-spacing:.3px}
.logo-badge{width:30px; height:30px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand1),var(--brand2)); color:#000; font-weight:900}
nav a{padding:10px 12px; border-radius:12px}
nav a:hover{background:rgba(255,255,255,.06)}
.cta-nav{margin-left:12px; padding:10px 14px; border-radius:12px; font-weight:700;
  background:linear-gradient(135deg,var(--brand1),var(--brand2))}
.hero{padding:80px 0}
.grid{display:grid; gap:22px}
.hero-grid{grid-template-columns:1.1fr .9fr; align-items:center}
h1{font-size:clamp(28px,4.6vw,56px); line-height:1.1; margin:0 0 12px}
.muted{color:var(--muted)}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 18px; border-radius:14px; font-weight:700}
.btn-primary{background:linear-gradient(135deg,var(--brand1),var(--brand2))}
.btn-ghost{border:1px solid var(--stroke)}
.card{background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius); padding:18px}
.badge{display:inline-flex; gap:8px; padding:6px 10px; border:1px solid var(--stroke);
  border-radius:999px; background:rgba(255,255,255,.04); font-size:12px}
.section{padding:48px 0}
.section h2{font-size:28px; margin:0 0 10px}
.features{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.feature h3{margin:0 0 6px; font-size:18px}
.steps{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.step-num{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-weight:800;
  background:linear-gradient(135deg,var(--brand1),var(--brand2))}
.kpi{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px}
.kpi .card{display:grid; gap:2px}
.road{position:relative; padding-left:16px}
.road:before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px;
  background:linear-gradient(var(--brand1), transparent)}
.faq details{background:rgba(255,255,255,.04); border:1px solid var(--stroke); border-radius:14px; padding:12px}
.faq summary{cursor:pointer; font-weight:700}
.footer{padding:28px 0; border-top:1px solid var(--stroke); color:var(--muted); font-size:14px}
progress{width:100%; height:12px; -webkit-appearance:none; appearance:none}
progress::-webkit-progress-bar{background:rgba(255,255,255,.08); border-radius:999px}
progress::-webkit-progress-value{background:linear-gradient(90deg,var(--brand1),var(--brand2)); border-radius:999px}
.pill{border:1px dashed var(--stroke); padding:10px 12px; border-radius:12px; display:inline-flex; gap:8px; align-items:center; font-size:13px}
.copy{cursor:pointer}
.input{flex:1; min-width:260px; background:rgba(255,255,255,.06); color:var(--fg); border:1px solid var(--stroke); border-radius:12px; padding:12px 14px}
.fade{opacity:0; transform:translateY(8px); animation:fade .8s ease forwards}
@keyframes fade{to{opacity:1; transform:none}}
@media (max-width:860px){ .hero-grid{grid-template-columns:1fr} nav{display:none} }
/* === Accessibility & UX improvements === */
:focus-visible { outline: 2px solid var(--brand2); outline-offset: 3px; border-radius: 8px; }
a, button, input { transition: box-shadow .2s ease, transform .2s ease; }
a:hover, button:hover { box-shadow: 0 0 0 2px rgba(255,255,255,.06) inset; }

/* Reduced motion: отключаем анимации, если пользователь против */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Мелкие улучшения для инпутов и копируемых пилюль */
.input:focus-visible { box-shadow: 0 0 0 2px var(--brand2); }
.copy:hover { background: rgba(255,255,255,.06); }

/* Кнопки: легкое нажатие */
button:active, .btn:active { transform: translateY(1px); }