/* CRITICAL: блок vars→gauge-foot зазеркален инлайном в index.html — править в обоих местах */
:root{
  --head:#191919; --panel:#1C1C1C; --bg:#212121; --surf:#2A2A2A; --line:#333333;
  --tx:#EDEDED; --tx2:#A8A8A8; --tx3:#8A8A8A; --tx3u:#9A9A9A;
  --ac:#2FB6C9; --ac-d:#207C89; --ac-dd:#2A5A62;
  --ok:#4CAF50; --warn:#FFB74D; --err:#E94560;
  --ui:Ubuntu,"Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:400 15px/1.62 var(--ui)}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,table{margin:0}
ul{padding:0;list-style:none}
a{color:var(--ac);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.mono{font-family:var(--mono)}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
.grow{flex:1}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ——— знак ——— */
.mark{--s:20px;width:var(--s);height:var(--s);flex:none;border-radius:calc(var(--s)*.26);background:var(--ac);position:relative;display:block}
.mark::after{content:"";position:absolute;left:25%;bottom:24%;width:50%;height:12.5%;border-radius:calc(var(--s)*.05);background:var(--cut,var(--head))}

/* ——— шапка ——— */
.topbar{position:sticky;top:0;z-index:10;background:var(--head);border-bottom:1px solid var(--line)}
.bar{height:46px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;color:var(--tx)}
.brand:hover{text-decoration:none}
.wordmark{font:500 13px var(--mono);color:var(--tx)}
.vsep{width:1px;height:18px;background:var(--line);flex:none}
.tele{display:flex;align-items:center;gap:8px;font:400 12px var(--mono);color:var(--ac)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.gh{display:flex;align-items:center;gap:8px;height:26px;padding:0 11px;border-radius:7px;background:var(--surf);font:400 11px var(--mono);color:var(--tx2)}
.gh:hover{color:var(--tx);text-decoration:none}
.gh .mark{--s:11px;--cut:var(--surf)}
.nav{display:flex;align-items:center;gap:2px}
.nav a{padding:6px 10px;border-radius:7px;font:400 13px var(--ui);color:var(--tx2);white-space:nowrap}
.nav a:hover{background:var(--surf);color:var(--tx);text-decoration:none}
section{scroll-margin-top:60px}

/* ——— hero ——— */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start;padding-top:72px;padding-bottom:72px}
.eyebrow{font:400 11px var(--mono);color:var(--tx3);margin-bottom:18px}
h1{font:400 clamp(34px,6vw,52px)/1.1 var(--ui);color:var(--tx);margin-bottom:20px}
h1 b{font-weight:500;color:var(--ac)}
.lead{font:400 17px/1.62 var(--ui);color:var(--tx2);max-width:44em}
.lead b{font-weight:500;color:var(--tx)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{display:flex;align-items:center;gap:14px;height:46px;padding:0 20px;border-radius:10px;font:500 15px var(--ui);background:var(--surf);color:var(--tx)}
.btn:hover{text-decoration:none}
.btn .sub{font:400 11px var(--mono);color:var(--tx3u)}
.btn .key{font:400 11px var(--mono);opacity:.6}
.btn-primary{background:var(--ac);color:var(--head)}
.btn-primary .sub,.btn-primary .key{color:var(--head);opacity:1}
.cta-note{margin-top:16px;font:400 13px/1.6 var(--ui);color:var(--tx3)}

/* ——— прибор ——— */
.gauge{background:var(--panel);border-radius:14px;padding:22px 22px 20px}
.zone{font:500 12px var(--ui);color:var(--tx3);margin-bottom:14px}
.rtt{display:flex;align-items:baseline;gap:9px}
.rtt .num{font:500 46px/1 var(--mono);color:var(--ac)}
.rtt .unit{font:400 12px var(--mono);color:var(--tx3)}
.spark{display:flex;align-items:flex-end;gap:2px;height:24px;margin:16px 0 20px}
.spark i{width:3px;flex:none;background:var(--ac)}
.spark i.p1{background:var(--ac-dd)}
.spark i.p2{background:var(--ac-d)}
.stages{display:flex;flex-direction:column;gap:9px}
.stages>div{display:flex;align-items:center;gap:10px}
.stages dt{display:flex;align-items:center;gap:10px;font:400 12px var(--mono);color:var(--tx2);flex:1}
.stages dd{font:400 12px var(--mono);color:var(--ok)}
.sq{width:6px;height:6px;flex:none;background:var(--ok)}
.gauge-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font:400 11px/1.6 var(--mono);color:var(--tx3)}

/* ——— секции ——— */
section{padding:72px 0}
.sec-head{margin-bottom:34px}
h2{font:400 clamp(24px,3.4vw,30px)/1.25 var(--ui);color:var(--tx)}
.sec-head p{margin-top:12px;font:400 15px/1.62 var(--ui);color:var(--tx2);max-width:62ch}

/* ——— макет мессенджера ——— */
figure.shot{margin:0}
.shot figcaption{margin-top:16px;font:400 13px/1.6 var(--ui);color:var(--tx3)}
.app{background:var(--bg);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.app-bar{height:46px;background:var(--head);display:flex;align-items:center;gap:14px;padding:0 14px}
.tab{display:flex;align-items:center;gap:9px;height:46px;padding:0 14px;font:400 13px var(--ui);color:var(--tx2)}
.tab.on{color:var(--tx);font-weight:500;box-shadow:inset 0 -2px 0 var(--ac)}
.tab .sqm{width:16px;height:16px;border-radius:4px;background:var(--tx);flex:none}
.chip{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:8px;padding:6px 11px;font:400 13px var(--ui);color:var(--tx3)}
.chip .k{font:400 11px var(--mono);color:var(--tx3)}
.lens{position:relative;width:12px;height:12px;flex:none}
.lens::before{content:"";position:absolute;left:0;top:0;width:9px;height:9px;border:1.5px solid var(--tx3);border-radius:50%}
.lens::after{content:"";position:absolute;right:0;bottom:1px;width:5px;height:1.5px;background:var(--tx3);transform:rotate(45deg);transform-origin:right center}
.app-body{display:grid;grid-template-columns:248px minmax(0,1fr)}
.side{background:var(--panel);padding:20px 0 16px;display:flex;flex-direction:column;gap:0}
.side-h{padding:0 20px;font:500 12px var(--ui);color:var(--tx3)}
.side-h.live{color:var(--ok);display:flex;align-items:baseline;gap:8px}
.side-h.live .t{font:400 11px var(--mono);color:var(--ok)}
.chans{padding:12px 10px 0}
.chan{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:8px}
.chan .h{font:400 13px var(--mono);color:var(--tx3)}
.chan .n{font:400 14px var(--ui);color:var(--tx3);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chan.on{background:var(--surf)}
.chan.on .h{color:var(--ac)}
.chan.on .n{color:var(--tx);font-weight:500}
.chan.unread .n{color:var(--tx2)}
.chan .cnt{font:500 12px var(--mono);color:var(--err)}
.chan .cnt.ok{color:var(--ok)}
.spk{display:flex;align-items:flex-end;gap:1.5px;height:10px;flex:none}
.spk i{width:2px;background:var(--tx3)}
.spk.on i{background:var(--ok)}
.voice{padding:4px 0 0 30px;display:flex;flex-direction:column;gap:8px}
.member{display:flex;align-items:center;gap:9px;font:400 13px var(--ui);color:var(--tx2)}
.member .mic{font:400 11px var(--mono);color:var(--err);margin-left:auto}
.av{border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--ui);font-weight:500;color:#191919}
.me{margin-top:auto;padding:16px 20px 0;display:flex;align-items:center;gap:11px;font:400 14px var(--ui);color:var(--tx)}
.me .st{font:400 11px var(--mono);color:var(--tx2)}
.canvas{background:var(--bg);display:flex;flex-direction:column;min-width:0}
.ch-head{height:62px;display:flex;align-items:center;gap:14px;padding:0 34px}
.ch-head h3{font:500 19px var(--ui);color:var(--tx)}
.ch-head .desc{font:400 13px var(--ui);color:var(--tx3);flex:1}
.stack{display:flex;align-items:center}
.stack .av{border:2px solid var(--bg)}
.stack .av+.av{margin-left:-8px}
.stack .n{font:400 12px var(--ui);color:var(--tx3);margin-left:10px}
.e2e{display:flex;align-items:center;gap:7px;font:400 11px var(--mono);color:var(--ac)}
.e2e i{width:5px;height:5px;border-radius:50%;background:var(--ac)}
.feed{padding:8px 34px 4px;display:flex;flex-direction:column}
.daysep{display:flex;align-items:center;gap:14px;padding-bottom:20px;font:400 12px var(--ui);color:var(--tx3)}
.daysep i{flex:1;height:1px;background:var(--line)}
.msg{display:flex;gap:14px;padding-bottom:20px}
.msg .body{flex:1;min-width:0}
.mhead{display:flex;align-items:baseline;gap:10px}
.mhead .who{font:500 14px var(--ui);color:var(--tx)}
.mhead .tm{font:400 11px var(--mono);color:var(--tx3)}
.mhead .mode{font:400 11px var(--mono);color:var(--tx3);margin-left:auto}
.mhead .mode.e{color:var(--ac)}
.mtext{margin-top:5px;font:400 15px/1.62 var(--ui);color:var(--tx)}
.cont{padding:0 0 20px 48px;font:400 15px/1.62 var(--ui);color:var(--tx)}
.delivered{display:flex;align-items:flex-end;gap:6px;margin-left:auto}
.delivered .ticks{display:flex;align-items:flex-end;gap:1.5px;height:9px}
.delivered .ticks i{width:2px;background:var(--ok)}
.delivered span{font:400 11px/1 var(--mono);color:var(--ok)}
.modeline{display:flex;align-items:center;gap:12px;padding:0 0 20px 48px;font:400 12px var(--ui);color:var(--ac)}
.modeline i.d{width:5px;height:5px;border-radius:50%;background:var(--ac);flex:none}
.modeline i.l{flex:1;height:1px;background:var(--ac-dd)}
.xfer{padding:0 0 20px 48px}
.xfer .in{max-width:600px}
.xfer .t{font:500 12px var(--ui);color:var(--tx3)}
.xfer .row{display:flex;align-items:baseline;gap:12px;margin-top:9px}
.xfer .fn{font:400 14px var(--ui);color:var(--tx);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xfer .pc{font:400 12px var(--mono);color:var(--ac)}
.xfer .sp{font:400 12px var(--mono);color:var(--tx2)}
.chunks{display:flex;gap:2px;height:6px;margin-top:9px}
.chunks i{flex:1;background:var(--line)}
.chunks i.on{background:var(--ac)}
.chunks i.fly{background:var(--ac-d)}
.xfer .src{margin-top:8px;font:400 12px var(--mono);color:var(--tx3)}
.composer{padding:12px 34px 22px}
.composer .in{display:flex;align-items:center;gap:12px;background:var(--panel);border-radius:12px;padding:0 16px;height:50px}
.composer .plus{font:400 17px var(--mono);color:var(--tx3)}
.composer .ph{flex:1;font:400 15px var(--ui);color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.composer .e{font:400 11px var(--mono);color:var(--ac)}
.composer .k{font:400 11px var(--mono);color:var(--tx3)}

/* ——— карточки архитектуры ——— */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{background:var(--panel);border-radius:14px;padding:24px 22px 26px;display:flex;flex-direction:column}
.card .idx{font:400 11px var(--mono);color:var(--tx3)}
.card .bars{display:flex;align-items:flex-end;gap:2px;height:16px;margin:14px 0 16px}
.card .bars i{width:3px;background:var(--ac)}
.card .bars i.d{background:var(--ac-dd)}
.card h3{font:500 17px/1.35 var(--ui);color:var(--tx);margin-bottom:10px}
.card p{font:400 14px/1.6 var(--ui);color:var(--tx2)}
.card dl{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px}
.card dl>div{display:flex;align-items:baseline;gap:10px}
.card dt{font:400 12px var(--ui);color:var(--tx3);flex:1}
.card dd{font:400 12px var(--mono);color:var(--ac)}

/* ——— таблица ——— */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font:400 14px var(--ui);min-width:640px}
caption{text-align:left;font:400 13px/1.6 var(--ui);color:var(--tx3);padding-bottom:16px}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:baseline}
thead th{font:500 12px var(--ui);color:var(--tx3);padding-bottom:10px}
tbody th{font:400 14px var(--ui);color:var(--tx2);font-weight:400}
td.f{font-family:var(--mono);font-size:13px;color:var(--ac);white-space:nowrap}
td.e{font-family:var(--mono);font-size:13px;color:var(--tx3)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.tbl-note{margin-top:18px;font:400 12px/1.7 var(--mono);color:var(--tx3)}

/* ——— подвал ——— */
footer{background:var(--panel);padding:44px 0 52px}
.foot{display:flex;flex-wrap:wrap;gap:28px 40px;align-items:flex-start}
.foot .col{min-width:200px}
.foot h2{font:500 12px var(--ui);color:var(--tx3);margin-bottom:12px}
.foot li{font:400 13px/1.9 var(--ui);color:var(--tx2)}
.foot .copy{width:100%;padding-top:24px;border-top:1px solid var(--line);font:400 11px/1.7 var(--mono);color:var(--tx3)}

@media(max-width:1000px){
  .hero{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:48px;padding-bottom:48px}
  .gauge{max-width:360px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-body{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .ch-head,.feed,.composer{padding-left:20px;padding-right:20px}
  .app-bar .chip,.app-bar .tab.dm{display:none}
  .nav{display:none}
}
@media(max-width:640px){
  section{padding:48px 0}
  .cards,.install-grid{grid-template-columns:minmax(0,1fr)}
  .btn{width:100%}
  .gh span.u{display:none}
  .xfer,.cont,.modeline{padding-left:0}
  .msg .av{display:none}
}

/* ——— живая телеметрия (шаг 1, без смены дизайна) ——— */
.dot{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.rtt .num{font-variant-numeric:tabular-nums;min-width:2ch;display:inline-block}
.tele span:last-child{font-variant-numeric:tabular-nums}
.spark i{transition:height .7s ease}
/* чанки без transition: background-color не композитится, тикам смена мгновенно */

/* ——— reveal (шаг 2): только opacity + 10px, без теней/градиентов/масштаба по §9 ——— */
/* Без JS всё видимо: скрытие включается только при .js */
.js .reveal{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
.js .cards .card:nth-child(2){transition-delay:.08s}
.js .cards .card:nth-child(3){transition-delay:.16s}
.js .cards .card:nth-child(4){transition-delay:.24s}

/* ——— микроинтеракции (шаг 3): только transform/opacity + палитра §1, без теней/градиентов §9 ——— */
.btn,.gh{transition:transform .15s ease,background-color .15s ease,filter .15s ease}
.btn:hover,.gh:hover{transform:translateY(-1px)}
.btn:active,.gh:active{transform:none;filter:brightness(.94)}
.btn:not(.btn-primary):hover{background:var(--line)}
.btn-primary:hover{filter:brightness(1.07)}
.card{transition:transform .2s ease}
.card:hover{transform:translateY(-2px)}
a{transition:color .15s ease}
/* Ссылки в тексте — акцент с подчёркиванием 1px по §6.2: различимы без цвета */
.cta-note a,.faq-list .a a,.install-col .t a,.foot li a{text-decoration:underline;text-underline-offset:2px}

/* ——— faq: строки с линиями #333, плюс геометрией, без рамок/теней §9 ——— */
.faq-list{max-width:780px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:first-of-type{border-top:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 4px;font:500 15px var(--ui);color:var(--tx)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::marker{content:""}
.faq-list summary:hover{background:var(--panel)}
.faq-list .pm{width:12px;height:12px;flex:none;position:relative}
.faq-list .pm::before,.faq-list .pm::after{content:"";position:absolute;background:var(--tx3)}
.faq-list .pm::before{left:0;top:5px;width:12px;height:2px}
.faq-list .pm::after{left:5px;top:0;width:2px;height:12px}
.faq-list details[open] .pm::after{display:none}
.faq-list .a{padding:0 4px 22px 30px;font:400 14px/1.65 var(--ui);color:var(--tx2);max-width:64ch}
.faq-list .a b{font-weight:500;color:var(--tx)}
.faq-list .a .mono{color:var(--ac)}

/* ——— install: две панели + блок кода по §6.2 (фон #1C1C1C, шапка #191919) ——— */
.install-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.install-col{background:var(--panel);border-radius:14px;padding:24px 22px 26px}
.install-col h3{font:500 17px/1.35 var(--ui);color:var(--tx);margin-bottom:6px}
.install-col .os{font:400 11px var(--mono);color:var(--tx3);margin-bottom:18px}
.install-col ol{display:flex;flex-direction:column;gap:16px}
.install-col li{display:flex;gap:12px;font:400 14px/1.6 var(--ui);color:var(--tx2)}
.install-col li .n{font:400 12px var(--mono);color:var(--ac);flex:none;padding-top:3px}
.install-col li .t{flex:1;min-width:0}
.code{margin-top:8px;background:var(--bg);border-radius:10px;overflow:hidden}
.code .ch{height:30px;background:var(--head);display:flex;align-items:center;padding:0 14px;font:400 11px var(--mono);color:var(--tx2)}
.code pre{margin:0;padding:12px 14px;font:400 13px/1.6 var(--mono);color:var(--tx);overflow-x:auto;white-space:pre}
.code .c{color:var(--tx3)}
@media(prefers-reduced-motion:reduce){
  .dot{animation:none}
  .spark i{transition:none}
  .btn,.gh,.card,a{transition:none;transform:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}