:root{
  --bg: #0b0d12;
  --card: #11151d;
  --muted: #96a0b5;
  --text: #e7ecf5;
  --brand: #0d6efd;
  --brand-2: #6f4bff;
  --ok: #16a34a;
  --danger: #ef4444;
  --ring: 0 0 0 3px rgba(13,110,253,.25);
}
:root { color-scheme: dark; }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text); background:linear-gradient(180deg,#080a0f, #0b1020 40%, #0b0d12 100%);
  line-height:1.6;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--text); text-decoration:none}
a:hover{opacity:.9}
.container{width:min(1120px, 92%); margin-inline:auto}

.skip-link{position:absolute; left:-9999px; top:auto}
.skip-link:focus{left:1rem; top:1rem; background:#fff; color:#000; padding:.5rem; border-radius:.5rem}

.site-header{position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); background:rgba(8,12,20,.6); border-bottom:1px solid rgba(255,255,255,.06)}
.header__inner{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700}
.brand .logo img{width: 220px;}
.brand__name{letter-spacing:.3px}
.nav ul{display:flex; gap:1rem; align-items:center; margin:0; padding:0; list-style:none}
.nav a{padding:.5rem .75rem; border-radius:.6rem}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav .btn{margin-left:.25rem}

.nav-toggle{display:none; background:none; border:0; cursor:pointer}
.nav-toggle span{display:block; width:24px; height:2px; background:#fff; margin:5px 0; transition:.2s}

.hero{padding:4.5rem 0 2rem; position:relative; overflow:hidden}
.hero__grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:2rem; align-items:center}
.hero h1{font-size:clamp(1.9rem, 3.2vw, 3rem); line-height:1.1; margin:0 0 .75rem}
.grad{background:linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:1.05rem; color:#d9e1f1; max-width:52ch}
.hero__cta{display:flex; gap:.75rem; margin:1.25rem 0 1rem}
.hero__trust{display:flex; flex-wrap:wrap; gap:.75rem; padding:0; margin:1rem 0 0; list-style:none}
.hero__trust li{font-size:.95rem; padding:.4rem .6rem; border:1px solid rgba(255,255,255,.08); border-radius:999px; color:#cbd6ee}

.hero__art{position:relative; min-height:320px}
.card{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:1.1rem}
.glass{backdrop-filter: blur(10px)}
.hero__art .card{position:absolute; right:10%; top:10%;z-index: 9;}
.tiny{font-size:.85rem}
.huge{font-size:3rem; font-weight:800; line-height:1}
.huge .unit{font-size:1rem; margin-left:.2rem; color:#cbd6ee}
.muted{color:var(--muted)}
.chart{position:absolute; bottom:0; left:0; right:0; height:54%; margin:0 6%; border-radius:16px; background:linear-gradient(180deg, rgba(13,110,253,.35), rgba(111,75,255,.15)), radial-gradient(120px 120px at 60% -20%, rgba(111,75,255,.8), transparent), rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06)}

.section{padding:3.5rem 0}
.section--alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
.section__title{font-size:clamp(1.4rem, 2.4vw, 2rem); margin:0 0 1.5rem}
.steps{display:grid; grid-template-columns: repeat(5, 1fr); gap:1rem}
.step__num{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:linear-gradient(90deg,var(--brand),var(--brand-2)); font-weight:700}

.grid{display:grid; gap:1rem}
.grid--3{grid-template-columns: repeat(3, 1fr)}
.feat h3{margin:.2rem 0 .4rem; font-size:1.1rem}

.price{display:flex; flex-direction:column; gap:.75rem}
.price.best{border-color:rgba(13,110,253,.45); box-shadow:0 12px 40px rgba(13,110,253,.15)}
.check{list-style:none; padding:0; margin:0}
.check li{padding-left:1.4rem; position:relative}
.check li::before{content:"✓"; position:absolute; left:0; color:var(--ok)}

.faq{display:grid; gap:1rem}
details summary{cursor:pointer; font-weight:600}
details[open]{background:rgba(255,255,255,.04)}

.form{max-width:780px; margin-inline:auto}
.form__grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem;margin-bottom: 1rem;}
.form__grid label{display:grid; gap:.3rem}
.form__grid label.full{grid-column:1/-1}
input, textarea{
  width:100%; padding:.8rem .9rem; border-radius:.7rem; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02); color:var(--text); outline:none;
}
input:focus, textarea:focus{box-shadow:var(--ring); border-color:rgba(13,110,253,.5)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1rem; border-radius:.8rem; font-weight:600; border:1px solid rgba(255,255,255,.15)}
.btn--primary{background:linear-gradient(90deg,var(--brand),var(--brand-2)); border-color:transparent; color:#fff}
.btn--ghost{background:transparent}
.btn--sm{padding:.55rem .8rem; font-size:.95rem}

.site-footer{border-top:1px solid rgba(255,255,255,.06); margin-top:3rem}
.footer__grid{display:grid; grid-template-columns: 1.4fr .8fr .8fr; gap:2rem; padding:2rem 0}
.foot__bar{padding:1rem 0; border-top:1px solid rgba(255,255,255,.06); display:flex; justify-content:space-between; gap:1rem; align-items:center}
.footer__grid h4{margin:.2rem 0 .6rem}

.prose{max-width:900px}
.prose h1{margin:0 0 .75rem}
.prose h2{margin:1.5rem 0 .5rem}

.center{text-align:center}
/* Trusted row */
.trust{display:grid; gap:.6rem; justify-items:center}
.trust__row{display:flex; gap:1rem; list-style:none; padding:0; margin:.6rem 0 0; flex-wrap:wrap; opacity:.9}
.trust__row li{border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:.45rem .8rem; font-weight:600}

/* Metrics pills */
.metrics{display:flex; gap:.6rem; list-style:none; padding:0; margin:1.25rem 0 0; flex-wrap:wrap}
.metrics li{border:1px dashed rgba(255,255,255,.15); border-radius:999px; padding:.4rem .7rem; color:#cbd6ee; font-size:.95rem}

/* 4-col grid on desktop */
.grid--4{grid-template-columns:repeat(4,1fr)}

/* Testimonials scroller */
.scroller{display:grid; grid-auto-flow:column; gap:1rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem}
.scroller > .card{min-width:min(520px, 90vw); scroll-snap-align:start}
.card.t h4{margin:.1rem 0 .4rem; font-size:1rem; color:#dbe6ff}
.scroll-ctrls{display:flex; gap:.5rem; justify-content:flex-end; margin-top:.5rem}

/* CTA band */
.cta-band .cta__inner{display:grid; place-items:center; text-align:center; gap:.6rem}
.scroller{
  -webkit-overflow-scrolling: touch;      
  overscroll-behavior-inline: contain;    
  scrollbar-gutter: stable both-edges;   
}
.scroller > .card{ scroll-snap-stop: always; } 
.scroller-wrap{ position:relative; }

/* Горизонтальная лента + скрываем системный скроллбар */
.scroller{
  display:grid;
  grid-auto-flow:column;
  gap:1rem;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding: .25rem 0 1.25rem; /* нижний паддинг, чтобы контент не прилипал к краю */
  -ms-overflow-style: none;   /* IE/Edge */
  scrollbar-width: none;      /* Firefox */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}
.scroller::-webkit-scrollbar{ display:none; height:0; } /* WebKit */

/* Ширина карточек и «прилипание» */
.scroller > .card{ 
  min-width: clamp(280px, 48vw, 520px);
  scroll-snap-align:start;
  scroll-snap-stop: always;
}

/* Градиентные фейдеры по краям (не блокируют клики) */
.scroller::before,
.scroller::after{
  content:"";
  position:sticky;
  top:0; bottom:0;
  width:28px;
  pointer-events:none;
  z-index:2;
}
.scroller::before{ left:0; background:linear-gradient(90deg, rgba(11,13,18,1), rgba(11,13,18,0)); }
.scroller::after { right:0; background:linear-gradient(270deg, rgba(11,13,18,1), rgba(11,13,18,0)); }

/* Кнопки навигации – компактные, прижаты к нижнему правому краю ленты */
.scroll-ctrls{
  position:absolute;
  right:.25rem;
  bottom:.25rem;
  display:flex;
  gap:.5rem;
  z-index:3;
}
.scroll-ctrls .ctrl{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff; font-weight:700;
  cursor:pointer;
}
.scroll-ctrls .ctrl:disabled{ opacity:.45; cursor:not-allowed; }

/* Немного типографики карточек отзывов */
.card.t h4{ margin:.1rem 0 .4rem; font-size:1rem; color:#dbe6ff; }
.card.t p{ margin:0; }
input[type="checkbox" i] {width: auto;}
/* Responsive tweaks */
@media (max-width: 980px){
  .grid--4{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .grid--4{grid-template-columns:1fr}
}
/* Responsive */
@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr}
  .steps{grid-template-columns: repeat(2, 1fr)}
  .grid--3{grid-template-columns: 1fr 1fr}
  .footer__grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 720px){
  .nav{position:fixed; inset:64px 0 0 auto; width:min(86vw, 360px); background:#0b0f18; transform:translateX(100%); transition:.2s; border-left:1px solid rgba(255,255,255,.06); padding:1rem}
  .nav.open{transform:translateX(0)}
  .nav ul{flex-direction:column; align-items:flex-start;background: rgb(8 12 20);padding: 1rem;}
  .nav-toggle{display:inline-block}
  .steps{grid-template-columns: 1fr}
  .grid--3{grid-template-columns: 1fr}
  .footer__grid{grid-template-columns: 1fr}
  .form__grid{grid-template-columns: 1fr}
}

/* Light mode auto (optional) */
@media (prefers-color-scheme: light){
  :root{ --bg:#0b0d12; --text:#e7ecf5; --card:#11151d; --muted:#96a0b5 }
  body{ background:linear-gradient(180deg,#080a0f,#0b1020 40%,#0b0d12) }
  .card{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.06) }
  .nav a:hover{ background:rgba(255,255,255,.06) }
}
@media (max-width:720px){
  .scroll-ctrls{ bottom:.5rem; right:.5rem; }
}