:root{
  --bg:#ffffff;
  --fg:#121316;
  --muted:#4a5161;
  --line:#e7e9ef;
  --brand:#0b5cff;
  --brand-ink:#0a3fb3;
  --ghost:#f3f6ff;
  --card:#f9fbff;
  --heading-lh: 1.1;
}
/* Visually hidden, но читаемо скринридерам и роботам */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Отложенный рендер блоков ниже первого экрана */
#features,
#how,
#pricing,
#faq,
.footer {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  font-feature-settings: "kern";
  text-rendering: optimizeLegibility;
  color:var(--fg); background:var(--bg); line-height:1.5;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-ink)}

.container{max-width:1140px; margin:0 auto; padding:0 20px}
.center{text-align:center}
.footer-logo{width:167px; height: 36px;}
.subt{color:var(--muted); margin-top:-10px}

.site-header{padding:28px 0 48px; background:linear-gradient(180deg,#f6f8ff 0%,#fff 50%)}
.nav{display:flex; align-items:center; justify-content:space-between}
.brand img{display:block}
.navmenu{display:flex; gap:18px; list-style:none; margin:0; padding:0; align-items:center}
.navmenu a{color:var(--fg)}
.nav-toggle{display:none; background:none; border:0}
.nav-toggle span{display:block; width:22px; height:2px; background:#111; margin:5px 0}

.hero{padding-top:10px}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:28px; align-items:center; margin-top:0.8rem;}
.hero-copy h1{font-size:40px; line-height:1.1; margin:10px 0 12px}
.lead{font-size:18px; color:var(--muted); margin-bottom:18px}
.logo{width:167px; height: 36px;}
.cta-row{display:flex; gap:12px; align-items:center}
.trust{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.trust-badge{background:var(--ghost); color:#2a3148; padding:6px 10px; border-radius:999px; font-size:12px}

.btn{display:inline-block; padding:12px 18px; border-radius:10px; font-weight:600}
.btn-primary{background:var(--brand); border: none; color:#fff}
.btn-primary:hover{background:var(--brand-ink); color:#fff !important}
.btn-outline{border:1px solid var(--line); color:#111; background:#fff}
.btn-outline:hover{border-color:#c6cbe0}
.btn-ghost{background:var(--ghost); border: 1px solid var(--line); color:#1a2a5a}
.btn-ghost:hover{background:#e8eeff}
.small{padding:10px 14px; font-size:14px}
.tiny-note{font-size:12px; color:var(--muted); margin-top:8px}

.section{padding:64px 0}
.section-muted{background:#fafbff}

.logos{text-align:center}
.logos-title{color:var(--muted); margin-bottom:16px}
.logos-row{display:grid; grid-template-columns:repeat(4,minmax(80px,1fr)); gap:26px; align-items:center}
.logos-row img{width:100%; opacity:.75; filter:grayscale(1)}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:0 4px 14px rgba(18,19,22,.03)}
.card h3{margin:0 0 6px 0}

.steps{max-width:740px; margin:0 auto 18px; color:#2b2f3a}
.steps li{margin-bottom:10px}

.pricing-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:18px}
.price-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.price-card h3{
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0px;
}

.price {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.old-price {
  font-size: 1rem;
  color: var(--muted);
  text-decoration: line-through;
}

.price-stars {
  font-size: 1.4rem;
  font-weight: 700;
}

.price-usd {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--muted);
}

.price-usd span {
  font-size: 0.9rem;
}

.discount {
  font-size: 0.85rem;
  color: #0a3fb3;
  font-weight: 500;
}

.tag {
  font-size: 0.75rem;
  background: var(--brand);
  color: #fff;
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 6px;
}
.price-card .list{margin:4px 0 10px 0; padding-left:18px}
.price-card .list li{margin:6px 0}
.price-card .btn{margin-top:auto}
.highlight{border-color:#b7c7ff; box-shadow:0 10px 30px rgba(11,92,255,.08)}

.quote{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; color:#2b2f3a}

.footer{background:#f7f8fc; padding:34px 0 10px}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:22px}
.footer h4{margin:0 0 8px 0}
.footer ul{list-style:none; padding:0; margin:0}
.footer ul li{margin:6px 0}
.footer .muted{color:var(--muted)}
/* футерные тексты темнее для контраста на светло‑сером фоне */
.footer, .footer .muted, .legal {
  color: #3f4654; /* темнее, чем в остальном дизайне */
}
.footer a:not([class*="btn"]) {
  color: var(--brand-ink);
}
.footer a:hover { color: #083380; }
.footer-heading {
  font-weight: bold;
  font-size: 1rem;
  color: var(--fg);
}
.legal{border-top:1px solid var(--line); margin-top:16px; padding-top:12px; font-size:13px}

/* Trust badges */
.badges { text-align:center }
.badges-title { color:var(--muted); margin-bottom:16px; }
.badges-row {
  display:grid; 
  grid-template-columns:repeat(4,1fr); 
  gap:16px; 
  align-items:stretch;
}
.trust-badge{
  background:#fff; 
  border:1px solid var(--line); 
  border-radius:14px; 
  padding:16px; 
  box-shadow:0 4px 14px rgba(18,19,22,.03);
  display:flex; 
  flex-direction:column; 
  justify-content:center;
}
.badge-title{ font-weight:700; }
.badge-note{ color:var(--muted); font-size:13px; margin-top:4px; }

/* Optional: Integrations */
.integrations { margin-top:22px; }
.integrations-title { color:#2a3148; font-weight:700; margin-bottom:10px; }
.integrations-row{
  display:grid; 
  grid-template-columns:repeat(5,minmax(90px,1fr)); 
  gap:22px; 
  align-items:center; 
  justify-items:center;
}
.integrations-row img{
  height:26px; 
  opacity:.9; 
  filter:grayscale(1);
}
.integrations-note{ font-size:12px; color:var(--muted); margin-top:8px; }

/* --- How it works slider --- */
.how-tabs{
  display:flex; gap:8px; justify-content:center; margin:14px 0 22px;
}
.how-tab{
  border:1px solid var(--line); background:#fff; padding:8px 14px; border-radius:999px;
  font-weight:600; cursor:pointer;
}
.how-tab.is-active{ background:var(--ghost); border-color:#cfe0ff; color:#1a2a5a }

.how-slider{ position:relative }
.how-slide{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:22px; box-shadow:0 10px 30px rgba(11,92,255,.05);
  transform-origin: 50% 50%;
  animation: howIn .36s ease both;
}
.how-slide[hidden]{ display:none }

@keyframes howIn{
  from{ opacity:0; transform: translateY(8px) scale(.99); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.how-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:20px; align-items:center;
}
.how-copy h3{ margin:0 0 8px 0 }
.how-bullets{ margin:10px 0 14px 18px }
.how-bullets li{ margin:6px 0 }
.how-code{
  display:block; background:#0b5cff10; border:1px dashed #b7c7ff; color:#0a3fb3;
  padding:10px 12px; border-radius:10px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:clamp(0.7rem, 2vw, 0.9rem);
  overflow:auto;
}

.how-media picture, .how-media img{
  width:100%; height:auto; display:block; border-radius:14px;
  box-shadow:0 6px 24px rgba(18,19,22,.06);
}

.how-controls{
  display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px;
}
.how-prev, .how-next{
  border:1px solid var(--line); background:#fff; border-radius:10px; width:38px; height:38px; cursor:pointer;
  font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.how-dots { display: flex; gap: 12px; } /* чтобы кнопки не слипались после увеличения */

.how-dot{
  /* кликабельная зона 32×32 (WCAG ориентир ≥44 CSS px; 32 — хороший компромисс) */
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid #cfd5e6;
  background: #fff;
  cursor: pointer;
  display: grid; place-items: center;
}

/* “визуальная точка” внутри — 10×10 */
.how-dot::before{
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid #cfd5e6;
  background: #fff;
}

.how-dot.is-active::before{
  background: var(--brand);
  border-color: var(--brand);
}

/* видимый фокус с контрастом */
.how-dot:focus-visible{
  outline: 3px solid rgba(11,92,255,.35);
  outline-offset: 2px;
}


/* --- FAQ redesigned --- */
.faq-wrap{
  max-width: 840px;
  margin: 0 auto 18px;
}
.faq{
  display: grid;
  gap: 10px;
}
.faq-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(18,19,22,.03);
}
.faq-summary{
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  cursor:pointer;
  font-weight:700;
}
.faq-summary::-webkit-details-marker{ display:none; }
.faq-q{ font-size:18px; line-height:1.3; }
.faq-item .chev{
  width:20px; height:20px; flex:0 0 auto;
  stroke:#2a3148; fill:none; stroke-width:2; transition:transform .2s ease;
}
.faq-item[open] .chev{ transform:rotate(180deg); }

.faq-a{
  padding:0 18px 16px 18px;
  color:#2b2f3a;
}
.faq-a p{ margin:8px 0 0 }

.faq-item:focus-within,
.faq-summary:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(11,92,255,.25);
  border-radius:14px;
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-media { display: none; }
  .how-grid{ grid-template-columns:1fr }
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .badges-row{ grid-template-columns:repeat(2,1fr); }
  .integrations-row{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 640px){
  .navmenu{display:none; position:absolute; right:20px; top:62px; background:#fff; border:1px solid var(--line); padding:10px; border-radius:10px}
  .navmenu.show{display:flex; flex-direction:column; gap:10px}
  .nav-toggle{display:block}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .logos-row{grid-template-columns:repeat(2,1fr)}
  .hero-copy h1{font-size:34px}
  .badges-row{ grid-template-columns:1fr; }
  .integrations-row{ grid-template-columns:repeat(2,1fr); }
  .faq-wrap{ max-width: 100%; }
  .faq-q{ font-size:16px; }
  .faq-summary{ padding:14px 16px; }
  .faq-a{ padding:0 16px 14px 16px; }
}