:root{
  --bg:#0B0E14; --surface:#11151E; --surface-2:#161B26; --border:#232A38;
  --border-soft:#1B212C;
  --text:#EEF2F7; --muted:#93A0B4; --dim:#6B778C;
  --accent:#00E58A; --accent-dim:#00B86B; --accent-soft:rgba(0,229,138,.10);
  --radius:14px;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}

/* ── шапка ───────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:50; border-bottom:1px solid var(--border-soft);
  background:rgba(11,14,20,.78); backdrop-filter:blur(10px);
}
.top .wrap{display:flex; align-items:center; gap:22px; height:66px}
.brand{display:flex; align-items:center; gap:11px; color:var(--text); font-size:19px;
       font-weight:650; letter-spacing:-.015em}
.brand:hover{text-decoration:none}
.brand img{width:30px; height:30px; display:block}
nav{margin-left:auto; display:flex; align-items:center; gap:22px; font-size:14.5px}
nav a{color:var(--muted)}
nav a:hover{color:var(--text); text-decoration:none}
nav .sep{width:1px; height:18px; background:var(--border); flex:0 0 auto}
.lang{font-size:13px; color:var(--muted); border:1px solid var(--border); padding:4px 10px; border-radius:7px}
.lang:hover{color:var(--text); border-color:var(--accent); text-decoration:none}
@media(max-width:820px){ nav .hide-sm{display:none} }

/* ── герой ───────────────────────────────────────────── */
.hero{position:relative; padding:64px 0 40px; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:-46% 0 auto 50%; width:1000px; height:1000px;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(0,229,138,.11), transparent 60%);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--border-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border-soft) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 70%);
  opacity:.5;
}
.hero-inner{position:relative; text-align:center}
.hero-logo{width:min(560px,86vw); height:auto; display:block; margin:0 auto 34px}
.eyebrow{
  font:600 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0 0 16px;
}
h1{font-size:clamp(30px,4.6vw,46px); line-height:1.14; margin:0 0 18px; letter-spacing:-.022em}
.lead{font-size:clamp(16.5px,2vw,19px); color:var(--muted); max-width:720px; margin:0 auto 28px}
.cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center}
.btn{
  display:inline-block; padding:12px 22px; border-radius:10px; font-weight:650; font-size:15px;
  background:linear-gradient(180deg,var(--accent),var(--accent-dim)); color:#04140C;
}
.btn:hover{filter:brightness(1.07); text-decoration:none}
.btn-ghost{background:none; color:var(--text); border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:26px 0 0}
.chip{
  font:500 12.5px/1 var(--mono); color:var(--muted);
  border:1px solid var(--border); border-radius:999px; padding:7px 13px;
}

/* ── секции ──────────────────────────────────────────── */
section{padding:64px 0; border-top:1px solid var(--border-soft)}
section:first-of-type{border-top:0}
.eyebrow-s{
  font:600 11.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin:0 0 12px;
}
h2{font-size:clamp(23px,3vw,30px); margin:0 0 12px; letter-spacing:-.018em}
.sub{color:var(--muted); margin:0 0 32px; max-width:760px}
.sub b{color:var(--text); font-weight:600}

/* ── рамка скриншота ─────────────────────────────────── */
.frame{
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  background:var(--surface); box-shadow:0 24px 60px -30px rgba(0,0,0,.9);
}
.frame-bar{
  display:flex; align-items:center; gap:7px; padding:9px 13px;
  border-bottom:1px solid var(--border-soft); background:var(--surface-2);
}
.frame-bar i{width:9px; height:9px; border-radius:50%; background:#2C3444; flex:0 0 auto}
.frame-bar span{
  margin-left:8px; font:500 12px/1 var(--mono); color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.frame img{display:block; width:100%; height:auto}
a.frame{display:block; color:inherit; cursor:zoom-in; transition:border-color .15s}
a.frame:hover{text-decoration:none; border-color:#334052}
a.frame:hover .frame-bar em{color:var(--accent); border-color:rgba(0,229,138,.4)}
.frame-bar em{
  margin-left:auto; flex:0 0 auto; font:500 11px/1 var(--mono); font-style:normal;
  color:var(--dim); border:1px solid var(--border); border-radius:6px; padding:5px 9px;
}

/* ── просмотр скриншота в полном размере ─────────────── */
.lb{
  position:fixed; inset:0; z-index:100; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; padding:24px;
  background:rgba(6,8,12,.95); cursor:zoom-out;
}
.lb img{
  max-width:min(1900px,97vw); max-height:87vh; width:auto; height:auto;
  border:1px solid var(--border); border-radius:10px;
  box-shadow:0 30px 80px -30px #000;
}
.lb p{margin:0; color:var(--dim); font:500 12.5px/1 var(--mono); text-align:center}
.hero-shot{position:relative; margin-top:46px}
.shots{display:grid; gap:40px}
.shot{display:grid; grid-template-columns:300px 1fr; gap:30px; align-items:center}
.shot > figcaption{order:1; color:var(--muted); font-size:15px; margin:0}
.shot > .frame{order:2; min-width:0}
.shot figcaption b{display:block; color:var(--text); font-weight:600; margin-bottom:6px}
figure{margin:0}
@media(max-width:900px){ .shot{grid-template-columns:1fr; gap:14px} }

/* ── таблица сравнения ───────────────────────────────── */
.tablewrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius)}
table{border-collapse:collapse; width:100%; min-width:760px; font-size:14.5px}
th,td{text-align:left; padding:13px 18px; vertical-align:top; border-bottom:1px solid var(--border-soft)}
tr:last-child td{border-bottom:0}
thead th{
  background:var(--surface-2); color:var(--dim); font:600 11.5px/1.4 var(--mono);
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
thead th:nth-child(2){color:var(--accent); padding-left:36px}
td:first-child{color:var(--text); font-weight:600; width:24%}
/* сначала то, что даёт панель, — и оно ярче; «без панели» рядом, приглушённым */
td:nth-child(2){color:#D7DFEA; width:40%; position:relative; padding-left:36px}
td:nth-child(2)::before{
  content:"✓"; position:absolute; left:16px; top:13px;
  color:var(--accent); font-weight:700; font-size:13px;
}
td:last-child{color:var(--dim); width:36%}
tbody tr:nth-child(even){background:rgba(255,255,255,.016)}
tbody tr:hover{background:rgba(0,229,138,.05)}
code{font-family:var(--mono); font-size:.92em; color:#BFD8CC}

/* ── сценарии ────────────────────────────────────────── */
.cases{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.case{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px; position:relative;
}
.case h3{margin:0 0 12px; font-size:16.5px; letter-spacing:-.01em}
.case .dia{display:block; width:100%; max-width:340px; height:auto; margin:0 0 15px}
.case p{margin:0; color:var(--muted); font-size:14.5px}

/* ── серверы против устройств ────────────────────────── */
.pair{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); margin:0 0 28px}
.kind{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px}
.kind .role{
  margin:0 0 10px; font:600 11.5px/1 var(--mono); letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent);
}
.kind.dev .role{color:var(--dim)}
.kind h3{margin:0 0 16px; font-size:17px; letter-spacing:-.01em}
.kind ul{margin:0; padding:0; list-style:none; display:grid; gap:11px}
.kind li{position:relative; padding-left:21px; color:var(--muted); font-size:14.5px}
.kind li::before{
  content:""; position:absolute; left:4px; top:8px; width:6px; height:6px;
  border-radius:50%; background:#39455A;
}
.kind.srv li::before{background:var(--accent-dim)}
.kind li b{color:var(--text); font-weight:600}

/* ── архитектура ─────────────────────────────────────── */
.arch{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:26px 26px 34px; overflow-x:auto;
  cursor:zoom-in; transition:border-color .15s;
}
.arch:hover{border-color:#334052}
.arch:hover em{color:var(--accent); border-color:rgba(0,229,138,.4)}
.arch em{
  position:absolute; right:18px; bottom:14px; font-style:normal;
  font:500 11px/1 var(--mono); color:var(--dim);
  border:1px solid var(--border); border-radius:6px; padding:5px 9px;
}
.arch svg{display:block; width:100%; min-width:620px; height:auto}
.lb svg{width:min(1700px,95vw); height:auto}
.facts{margin:26px 0 0; padding:0; list-style:none; display:grid; gap:12px}
.facts li{color:var(--muted); font-size:15px; padding-left:26px; position:relative}
.facts li::before{
  content:""; position:absolute; left:6px; top:9px; width:7px; height:7px;
  border-radius:2px; background:var(--accent);
}
.facts li b{display:block; color:var(--text); font-weight:600; margin-bottom:3px}

/* ── установка ───────────────────────────────────────── */
pre{
  font-family:var(--mono); background:#080B11; border:1px solid var(--border);
  border-radius:12px; padding:18px 20px; overflow-x:auto; font-size:13.5px;
  line-height:1.8; color:#CDE7D8; margin:0;
}
pre .c{color:var(--dim)}
pre .p{color:var(--accent)}
.two{display:grid; gap:20px; grid-template-columns:1.25fr 1fr; align-items:start}
@media(max-width:820px){ .two{grid-template-columns:1fr} }
.side{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px}
.side h3{margin:0 0 12px; font-size:15px}
.side dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:14.5px}
.side dt{color:var(--dim); font-family:var(--mono); font-size:12.5px; padding-top:2px; white-space:nowrap}
.side dd{margin:0; color:var(--muted)}

/* ── скриншот сбоку от списка ─────────────────────────── */
.sec-split{display:grid; grid-template-columns:1fr 300px; gap:44px; align-items:start}
.sec-split .facts{margin:0}
.shot-side .frame{box-shadow:0 20px 50px -28px rgba(0,0,0,.9)}
.shot-side figcaption{color:var(--muted); font-size:14px; margin:12px 2px 0}
@media(max-width:900px){
  .sec-split{grid-template-columns:1fr; gap:28px}
  .shot-side{max-width:340px}
}

footer{border-top:1px solid var(--border); padding:34px 0 52px; color:var(--dim); font-size:14px}
.foot{display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between; align-items:center}
.foot a{color:var(--muted)}
@media(max-width:640px){
  .hero{padding:44px 0 28px} section{padding:48px 0}
  .shots{grid-template-columns:1fr}
}