:root {
  --bg:#fff;
  --text:#111;
  --muted:#6b7280;
  --border:#e5e7eb;
  --g50:#fafafa;
  --g100:#f3f4f6;
  --g200:#e5e7eb;
  --g300:#d1d5db;
  --g400:#9ca3af;
  --g700:#374151;
  --g900:#111827;
  --radius:.75rem;
  --radius-sm:.5rem;
  --accent:#51D0E8;
  --shadow:0 8px 24px rgba(17,24,39,.08),0 2px 8px rgba(17,24,39,.05);
}
html,body{background:var(--bg);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:24px}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:#000;padding:.75rem 1rem;border-radius:.65rem;font-weight:700;box-shadow:0 2px 0 rgba(0,0,0,.06);transition:transform .12s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(81,208,232,.35)}
.btn-ghost{background:var(--g100);color:var(--g900)}
.badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--g100);color:var(--g700);border-radius:.5rem;padding:.25rem .5rem;font-size:.85rem}
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1.1fr .9fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.kicker{color:var(--muted);font-size:.9rem}
.h1{font-size:2rem;font-weight:800;letter-spacing:-.01em}
.h2{font-size:1.35rem;font-weight:800}
.h3{font-size:1rem;font-weight:700}
.mono-sm{font-size:.9rem;color:var(--muted)}
.section{padding:28px 24px}
.section-alt{background:var(--g50);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.hero{padding:28px;border-radius:var(--radius);background:linear-gradient(180deg,#fff, #fafafa)}
.hero-visual{position:relative;min-height:280px}
.hero-visual .robot{position:absolute;right:8%;bottom:4%;width:180px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.08))}
.hero-visual .computer{position:absolute;right:22%;top:8%;width:300px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.08))}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:16px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.step{padding:16px;border:1px dashed var(--border);border-radius:var(--radius-sm);background:#fff}
.step .num{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--g100);margin-bottom:8px;font-weight:700}
.row{display:flex;gap:16px;flex-wrap:wrap}
.icon{width:22px;height:22px;display:inline-block}
.sidenav{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#f6f7f9,#eef1f5);border-right:1px solid var(--border);padding:18px;display:flex;flex-direction:column;gap:18px}
.sidenav .brand{display:flex;align-items:center;gap:.6rem;font-weight:800}
.sidenav .brand .dot{width:10px;height:10px;background:var(--accent);border-radius:50%}
.sidenav nav a{display:flex;align-items:center;gap:.6rem;padding:.6rem .5rem;border-radius:.6rem;color:var(--g700)}
.sidenav nav a:hover,.sidenav nav a.active{background:#fff;border:1px solid var(--border)}
.layout{display:grid;grid-template-columns:260px 1fr}
.topbar{display:none;position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--border)}
.toggle{display:none}
.hr{height:1px;background:var(--border);margin:12px 0}
.feature{padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;display:flex;gap:12px}
.feature .ico{width:32px;height:32px;border-radius:.5rem;background:var(--g100);display:flex;align-items:center;justify-content:center}
.scenario{padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:#fff}
.code{border:1px solid var(--border);border-radius:var(--radius-sm);background:#0b0f14;color:#d1e7ef;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem;padding:12px;overflow:auto}
.note{font-size:.9rem;color:var(--muted)}
.arch{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.arch .b{padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;text-align:center}
.slider{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--border);background:#fff}
.slides{display:flex;transition:transform .4s ease}
.slide{min-width:100%;user-select:none}
.slider .nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 4px;pointer-events:none}
.slider .btn-nav{pointer-events:auto;background:rgba(255,255,255,.9);border:1px solid var(--border);width:36px;height:36px;border-radius:.65rem;display:flex;align-items:center;justify-content:center}
.dots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.dot{width:8px;height:8px;border-radius:8px;background:var(--g300)}
.dot.active{background:var(--accent)}
.price-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.calc{padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:#fff}
.range{width:100%}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;text-align:center}
.footer{padding:28px;margin-top:12px;border-top:1px solid var(--border);background:#fff}
.reveal{opacity:0;transform:translateY(8px);transition:all .5s ease}
.reveal.v{opacity:1;transform:none}
.cta-pulse{animation:glow 2.6s ease-in-out infinite}
@keyframes glow{0%{box-shadow:0 0 0 rgba(81,208,232,.0)}50%{box-shadow:0 0 0 12px rgba(81,208,232,.12)}100%{box-shadow:0 0 0 rgba(81,208,232,.0)}}
@media (max-width:1060px){
  .grid-2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .arch{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .price-wrap{grid-template-columns:1fr}
  .hero-visual .computer{position:static;width:100%;margin:0 auto}
  .hero-visual .robot{position:absolute;right:4%;bottom:-12%;width:120px;opacity:.9}
}

/* Скрыть мобильный дровер на широких экранах */
@media (min-width: 881px) {
  .sidenav.mobile { 
    display: none !important; 
    height: 0 !important; 
    overflow: hidden !important;
  }
}

@media (max-width:880px){
  .layout{grid-template-columns:1fr}
  .sidenav{display:none}
  .topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px}
  .toggle{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border:1px solid var(--border);border-radius:.6rem;background:#fff}
  .sidenav.mobile{position:fixed;inset:0 30% 0 0;height:100vh;display:flex;z-index:40;transform:translateX(-100%);transition:transform .25s ease}
  .sidenav.mobile.open{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(17,24,39,.35);backdrop-filter:saturate(120%) blur(2px);display:none;z-index:35}
  .scrim.show{display:block}
}

/* Центрирование изображений и серый фон вокруг */
.slider{
  background: var(--g100);      /* серый фон */
  padding: 12px;                /* отступ вокруг кадра */
}
.slide{
  min-width: 100%;
  display: flex;                /* центр по двум осям */
  align-items: center;
  justify-content: center;
  min-height: clamp(220px, 48vh, 520px); /* высота кадра на больших экранах */
}
.slide img{
  max-width: 100%;
  max-height: 70vh;             /* чтобы не вылезало за экран */
  object-fit: contain;
  background: #fff;             /* белая «рамка» под скрином */
  border-radius: .5rem;
  box-shadow: var(--shadow);
}