/* SignalBox — сайт.
   Гамма и шрифты те же, что у панели программы (build/Release/www): сайт должен
   выглядеть как витрина того самого продукта, а не как чужой шаблон. Панель тёмная
   всегда; сайт тёмный по умолчанию и светлеет, если так настроена система, — но
   макет панели внутри (.app) остаётся тёмным в обеих темах, как в жизни. */

@font-face{font-family:"Saira"; src:url(../fonts/saira-latin.woff2) format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;}
@font-face{font-family:"Saira Condensed"; src:url(../fonts/sairacondensed-600-latin.woff2) format("woff2");
  font-weight:600; font-style:normal; font-display:swap;}
@font-face{font-family:"Saira Condensed"; src:url(../fonts/sairacondensed-700-latin.woff2) format("woff2");
  font-weight:700; font-style:normal; font-display:swap;}
@font-face{font-family:"JetBrains Mono"; src:url(../fonts/jetbrainsmono-latin.woff2) format("woff2");
  font-weight:100 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"JetBrains Mono"; src:url(../fonts/jetbrainsmono-cyrillic.woff2) format("woff2");
  font-weight:100 800; font-style:normal; font-display:swap;
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}

:root{
  --bg:#0a0d11; --bg-2:#0d1116; --panel:#12161c; --panel-2:#161b22; --raise:#1c222b;
  --edge:rgba(255,255,255,.09); --edge-2:rgba(255,255,255,.055); --edge-3:rgba(255,255,255,.18);
  --ink:#eef2f6; --ink-dim:#a2acb7; --ink-faint:#7d8a99;
  --brand:#3d8eff; --brand-2:#1f67e0; --brand-ink:#fff; --link:#86b7ff; --focus:#86b7ff;
  /* заливка кнопки отдельно от --brand: белому тексту на ней нужен контраст ≥ 4.5 */
  --btn-1:#2a72e6; --btn-2:#1d63d8;
  --ok:#41d67e; --warn:#ffc24b; --crit:#ff4d4d;
  --grid-line:rgba(255,255,255,.028);
  --glow:radial-gradient(1100px 560px at 78% -12%, #17243a 0%, transparent 62%),
         radial-gradient(800px 480px at 8% 4%, #121c26 0%, transparent 60%);
  --shadow:0 40px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06);
  --text:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --display:"Saira", var(--text);
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cond:"Saira Condensed", "Saira", var(--text);
  --r:14px; --r-sm:9px;
  --wrap:1160px; --gutter:24px;
  color-scheme:dark;
}
/* У Saira нет ни кириллицы, ни армянского: заголовок собрался бы из двух шрифтов
   вперемешку. Для русских и армянских страниц крупный текст — системным шрифтом целиком. */
:root:lang(ru), :root:lang(hy){--display:var(--text);}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f4f6f8; --bg-2:#eceff3; --panel:#ffffff; --panel-2:#f6f8fa; --raise:#eef1f5;
    --edge:rgba(13,17,23,.11); --edge-2:rgba(13,17,23,.07); --edge-3:rgba(13,17,23,.22);
    --ink:#0d1117; --ink-dim:#4a5562; --ink-faint:#5f6a78;
    --brand:#1f6fe8; --brand-2:#1557c4; --link:#1557c4; --focus:#1f6fe8;
    --btn-1:#1f6fe8; --btn-2:#1557c4;
    --ok:#0e7a40; --warn:#8f5c00; --crit:#c42424;
    --grid-line:rgba(13,17,23,.035);
    --glow:radial-gradient(1100px 560px at 78% -12%, #dbe7fb 0%, transparent 62%),
           radial-gradient(800px 480px at 8% 4%, #e6edf6 0%, transparent 60%);
    --shadow:0 40px 90px -36px rgba(13,30,60,.45), 0 0 0 1px rgba(13,17,23,.08);
    color-scheme:light;
  }
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  font-family:var(--text); font-size:17px; line-height:1.6; color:var(--ink);
  background:var(--glow), var(--bg);
  background-repeat:no-repeat; background-attachment:scroll;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
body::before{ /* та же сетка, что подложена под панель программы */
  content:""; position:absolute; inset:0 0 auto 0; height:1100px; pointer-events:none; z-index:-1;
  background-image:linear-gradient(var(--grid-line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:linear-gradient(#000 0%, transparent 100%); mask-image:linear-gradient(#000 0%, transparent 100%);
}
main{flex:1 0 auto;}
img,svg{display:block; max-width:100%;}
a{color:var(--link); text-decoration-thickness:1px; text-underline-offset:3px;}
a:hover{text-decoration-thickness:2px;}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:6px;}
h1,h2,h3,h4{font-family:var(--display); line-height:1.12; margin:0 0 .5em; letter-spacing:-.01em; text-wrap:balance;}
h1{font-size:clamp(2.35rem, 5.4vw, 4.1rem); font-weight:700; letter-spacing:-.02em;}
h2{font-size:clamp(1.8rem, 3.4vw, 2.6rem); font-weight:700;}
h3{font-size:1.2rem; font-weight:650;}
p{margin:0 0 1em;}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter);}
@media (max-width:640px){:root{--gutter:16px;} body{font-size:16px;}}

.skip{position:absolute; left:-9999px; top:8px; z-index:100; padding:8px 14px; border-radius:8px;
      background:var(--btn-2); color:var(--brand-ink); font-weight:600;}
.skip:focus{left:12px;}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* Предпросмотр: не даёт спутать черновую сборку с боевой. */
.preview-banner{background:repeating-linear-gradient(-45deg, #ffc24b 0 14px, #f2b22e 14px 28px);
  color:#1a1200; font:600 13px/1.4 var(--mono); padding:8px var(--gutter); text-align:center; word-break:break-word;}

/* ------------------------------------------------------------- кнопки, метки */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:0 22px; border-radius:11px; border:1px solid transparent;
  font:650 16px/1 var(--text); letter-spacing:.01em; text-decoration:none; cursor:pointer;
  background:linear-gradient(180deg, var(--btn-1) 0%, var(--btn-2) 100%); color:var(--brand-ink);
  box-shadow:0 10px 28px -12px rgba(31,103,224,.9), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .15s, filter .15s, box-shadow .15s; white-space:nowrap;}
.btn:hover{filter:brightness(1.08); text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--edge-3); box-shadow:none;}
.btn-ghost:hover{background:var(--panel-2);}
.btn-sm{min-height:38px; padding:0 15px; font-size:14px; border-radius:9px;}
.btn-lg{min-height:56px; padding:0 28px; font-size:17px;}
.btn-block{width:100%; white-space:normal; text-align:center; line-height:1.25; padding-top:10px; padding-bottom:10px;}
.btn .price-tag{font-family:var(--mono); font-weight:700; opacity:.9;}

.eyebrow{display:block; margin:0 0 14px;
  font:600 12px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim);}
/* точка — строчный элемент, а не флекс: при переносе длинной надписи она
   остаётся перед первым словом, а не висит сбоку от всего абзаца */
.eyebrow::before{content:""; display:inline-block; vertical-align:2px; margin-right:9px;
  width:7px; height:7px; border-radius:50%; background:var(--crit); box-shadow:0 0 10px var(--crit);}
.eyebrow.ok::before{background:var(--ok); box-shadow:0 0 10px var(--ok);}
.eyebrow.plain::before{display:none;}

.chips{display:flex; flex-wrap:wrap; gap:8px 10px; padding:0; margin:0; list-style:none;}
.chips li{display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px;
  border:1px solid var(--edge); background:color-mix(in srgb, var(--panel) 70%, transparent);
  font-size:14px; color:var(--ink-dim);}
.chips svg{width:15px; height:15px; color:var(--ok); flex:none;}

/* ------------------------------------------------------------- шапка */
.hdr{position:sticky; top:0; z-index:50; border-bottom:1px solid transparent;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  transition:border-color .2s;}
.hdr.scrolled{border-bottom-color:var(--edge);}
.hdr-in{display:flex; align-items:center; gap:24px; min-height:68px;}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none;
  font:700 19px/1 "Saira", var(--text); letter-spacing:.02em;}
.brand img{width:30px; height:30px;}
.nav{display:flex; gap:4px; margin-left:12px;}
.nav a{padding:8px 12px; border-radius:8px; color:var(--ink-dim); text-decoration:none; font-size:15px; font-weight:500;}
.nav a:hover{color:var(--ink); background:var(--panel-2);}
.nav a[aria-current="page"]{color:var(--ink);}
.hdr-r{margin-left:auto; display:flex; align-items:center; gap:10px;}
.langs{display:inline-flex; align-items:center; gap:2px; padding:3px 4px 3px 9px; border-radius:8px;
  border:1px solid var(--edge); color:var(--ink-dim); font-size:13.5px;}
.langs svg{width:15px; height:15px; margin-right:4px; flex:none;}
.langs a, .langs span{padding:5px 6px; border-radius:6px; line-height:1; color:inherit; text-decoration:none;}
.langs a:hover{color:var(--ink); background:var(--panel-2);}
.langs [aria-current]{color:var(--ink); font-weight:650;}
.menu{display:none; position:relative;}
.menu > summary{list-style:none; cursor:pointer; display:grid; place-items:center; width:42px; height:40px;
  border-radius:9px; border:1px solid var(--edge); color:var(--ink);}
.menu > summary::-webkit-details-marker{display:none;}
.menu > summary svg{width:20px; height:20px;}
.menu[open] > summary{background:var(--panel-2);}
.menu-pop{position:absolute; right:0; top:calc(100% + 8px); width:min(78vw, 290px); padding:8px;
  border-radius:12px; border:1px solid var(--edge); background:var(--panel); box-shadow:var(--shadow);
  display:flex; flex-direction:column;}
.menu-pop a{padding:11px 12px; border-radius:8px; color:var(--ink); text-decoration:none;}
.menu-pop a:hover{background:var(--panel-2);}
.menu-pop hr{border:0; border-top:1px solid var(--edge); margin:6px 4px;}
@media (max-width:920px){
  .nav{display:none;}
  .menu{display:block;}
  .hdr-in{gap:12px;}
}
@media (max-width:420px){
  .hdr .btn-sm{padding:0 12px;}
}
/* На узких экранах три языка в шапке наезжают на логотип — там язык меняют из меню. */
@media (max-width:560px){.hdr .langs{display:none;}}

/* ------------------------------------------------------------- секции */
.section{padding:96px 0;}
.section-tight{padding:64px 0;}
.section-head{max-width:720px; margin:0 0 44px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head p{color:var(--ink-dim); font-size:1.1rem; margin:0;}
.band{background:linear-gradient(180deg, transparent, var(--bg-2) 18%, var(--bg-2) 82%, transparent);}
@media (max-width:640px){.section{padding:64px 0;} .section-head{margin-bottom:32px;}}

/* ------------------------------------------------------------- герой */
.hero{padding:72px 0 0; text-align:center;}
.hero h1{max-width:900px; margin:0 auto 22px;}
.hero h1 .accent{background:linear-gradient(92deg, var(--ink) 10%, var(--brand) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero .lead{max-width:700px; margin:0 auto 32px; font-size:clamp(1.08rem, 1.7vw, 1.28rem); color:var(--ink-dim);}
.hero-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:22px;}
.hero-meta{justify-content:center; margin-bottom:56px;}
.hero-shot{position:relative; max-width:1120px; margin:0 auto; padding:0 var(--gutter);}
.shot-note{max-width:720px; margin:14px auto 0; padding:0 var(--gutter); text-align:center;
  font-size:13.5px; color:var(--ink-faint);}
.hero-shot::after{ /* мягкий срез снизу: макет уходит под следующий раздел */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:140px; pointer-events:none;
  background:linear-gradient(transparent, var(--bg));}
@media (max-width:640px){.hero{padding-top:44px;} .hero-meta{margin-bottom:36px;}}

/* ------------------------------------------------------------- макет панели
   Повторяет карточки настоящей панели (cam-control-panel.html): те же цвета,
   подписи и раскладка «− значение +». Тёмный в любой теме сайта. */
.app{--a-bg:#0a0d11; --a-panel:#12161c; --a-panel2:#161b22; --a-raise:#1c222b;
  --a-edge:rgba(255,255,255,.09); --a-edge2:rgba(255,255,255,.06);
  --a-ink:#eef2f6; --a-dim:#94a0ac; --a-idle:#7d8794;
  --a-ok:#41d67e; --a-warn:#ffc24b; --a-crit:#ff4d4d;
  position:relative; margin:0; border-radius:16px; overflow:hidden; text-align:left;
  background:radial-gradient(900px 500px at 80% -20%, #182230 0%, var(--a-bg) 60%), var(--a-bg);
  box-shadow:var(--shadow); color:var(--a-ink); font-family:"Saira", var(--text);
  user-select:none; -webkit-user-select:none;}
.app-bar{display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--a-edge2);
  background:rgba(255,255,255,.025);}
.app-dots{display:flex; gap:7px;}
.app-dots i{width:11px; height:11px; border-radius:50%; background:#2a313b;}
.app-url{flex:0 1 340px; margin:0 auto; padding:5px 12px; border-radius:7px; background:rgba(255,255,255,.05);
  font:500 12px/1.2 var(--mono); color:var(--a-dim); text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.app-live{display:flex; align-items:center; gap:6px; font:600 10px/1 var(--cond); letter-spacing:.1em; color:var(--a-ok);}
.app-live i{width:7px; height:7px; border-radius:50%; background:var(--a-ok); box-shadow:0 0 8px var(--a-ok);}
.app-body{padding:14px; display:grid; gap:11px; grid-template-columns:3fr 2fr; align-items:start;}
.m-grp{background:rgba(255,255,255,.02); border:1px solid var(--a-edge); border-radius:13px; padding:9px 10px 10px;
  display:flex; flex-direction:column; gap:9px; min-width:0;}
.m-grp-h{display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; letter-spacing:.02em;}
.m-grp-h .tri{color:var(--a-dim); font-size:9px;}
.m-grp-h .cnt{font:500 10px/1 var(--text); color:var(--a-dim);}
.m-grp-h .m-recbtn{margin-left:auto;}
.m-cards{display:grid; gap:9px; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));}
.m-card{position:relative; overflow:hidden; background:var(--a-panel); border:1px solid var(--a-edge); border-radius:12px;
  padding:11px 12px 10px;}
.m-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--a-idle);}
.m-card.rec::before{background:var(--a-crit); box-shadow:0 0 12px var(--a-crit);}
.m-top{display:flex; align-items:center; gap:7px; margin-bottom:10px; min-width:0;}
.m-cam{font-weight:700; font-size:16px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;}
.m-bat{position:relative; width:25px; height:12px; border:1.5px solid var(--a-dim); border-radius:3px; flex:none;}
.m-bat::after{content:""; position:absolute; right:-4px; top:3px; width:2px; height:4px; border-radius:0 1px 1px 0; background:var(--a-dim);}
.m-bat i{position:absolute; left:1.5px; top:1.5px; bottom:1.5px; width:calc(var(--lvl) * .19px); border-radius:1px; background:#33b466;}
.m-bat.low i{background:var(--a-crit);}
.m-bolt{width:9px; height:13px; flex:none; color:var(--a-warn); filter:drop-shadow(0 0 3px rgba(255,194,75,.6));}
.m-bolt.off{color:#4a525d; filter:none;}
.m-sd{display:flex; align-items:baseline; gap:2px; font:800 13px/1 var(--mono); color:var(--a-ok); white-space:nowrap;}
.m-sd small{font-size:9px; font-weight:700;}
.m-sd.low{color:var(--a-crit);}
.m-recbtn{margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px;
  border-radius:7px; border:1.5px solid rgba(65,214,126,.5); background:rgba(65,214,126,.08); color:var(--a-ok);
  font:700 10.5px/1 "Saira", var(--text); letter-spacing:.06em;}
.m-recbtn i{width:8px; height:8px; border-radius:50%; background:currentColor;}
.rec .m-recbtn, .m-grp.rec > .m-grp-h .m-recbtn{border-color:var(--a-crit); background:rgba(255,77,77,.12); color:var(--a-crit);}
.rec .m-recbtn i{animation:blink 1.2s steps(2, jump-none) infinite;}
@keyframes blink{50%{opacity:.25;}}
.m-params{display:grid; grid-template-columns:repeat(3, 1fr); gap:7px 4px;}
.m-ctl{display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0;}
.m-lab{font:600 8.5px/1.15 var(--cond); letter-spacing:.08em; text-transform:uppercase; color:var(--a-dim); white-space:nowrap;}
.m-row{display:flex; align-items:center; gap:3px;}
.m-row b{display:grid; place-items:center; width:16px; height:21px; border-radius:5px; border:1px solid var(--a-edge);
  background:var(--a-raise); font:800 11px/1 var(--mono); color:var(--a-ink);}
.m-val{padding:3px 6px; border-radius:6px; border:1px solid var(--a-edge); background:var(--a-raise);
  font:800 11.5px/1.2 var(--mono); white-space:nowrap;}
.m-val.bare{border-color:transparent; background:none;}
.m-lv{display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:8px;
  border-top:1px solid var(--a-edge2); font:600 9.5px/1 var(--cond); letter-spacing:.08em; color:var(--a-dim);}
.m-shot{position:relative; margin-top:8px; aspect-ratio:16/9; border-radius:7px; overflow:hidden;
  background:
    radial-gradient(60px 60px at 18% 30%, rgba(255,190,120,.35), transparent 70%),
    radial-gradient(40px 40px at 82% 22%, rgba(120,170,255,.28), transparent 70%),
    radial-gradient(50px 50px at 70% 70%, rgba(255,120,90,.18), transparent 70%),
    linear-gradient(160deg, #2b2320 0%, #191617 55%, #120f10 100%);}
.m-shot .who{position:absolute; left:50%; bottom:0; width:46%; height:78%; transform:translateX(-50%);
  background:
    radial-gradient(closest-side, #8a6a58 0 98%, transparent 100%) 50% 8% / 34% 40% no-repeat,
    radial-gradient(ellipse 50% 60% at 50% 100%, #33415a 0 98%, transparent 100%) 50% 100% / 100% 62% no-repeat;}
.m-shot .af{position:absolute; left:41%; top:20%; width:18%; height:30%; border:1.5px solid var(--a-ok); border-radius:2px;}
.m-shot .face{position:absolute; left:43%; top:24%; width:14%; height:23%; border:1px solid rgba(255,255,255,.85);}
.m-shot .rec-dot{position:absolute; right:8px; top:7px; display:flex; align-items:center; gap:4px;
  font:700 9px/1 var(--mono); color:#fff; text-shadow:0 1px 2px #000;}
.m-shot .rec-dot i{width:6px; height:6px; border-radius:50%; background:var(--a-crit); animation:blink 1.2s steps(2, jump-none) infinite;}
.m-fmt{display:flex; flex-wrap:wrap; gap:4px 6px; margin:-3px 0 9px; font-size:10.5px; color:var(--a-dim); font-family:var(--text);}
.m-fmt b{color:var(--a-ink); font:600 10.5px/1.4 var(--mono);}
.m-fmt .pw{margin-left:auto;}
.m-tally{font:600 9px/1 var(--text); letter-spacing:.06em; text-transform:uppercase; padding:3px 5px; border-radius:4px;
  border:1px solid var(--a-edge); color:var(--a-idle);}
.m-tally.prog{color:var(--a-crit); border-color:rgba(255,77,77,.5);}
.m-tally.prev{color:var(--a-ok); border-color:rgba(65,214,126,.5);}
.m-tc{margin-left:auto; font:500 11.5px/1 var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap;}
.m-tc.rec-time{color:var(--a-crit); font-weight:600;}
.m-tc + .m-recbtn{margin-left:0;}
.m-oh{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:rgba(10,13,17,.78); color:var(--a-crit); font:700 11px/1 var(--cond); letter-spacing:.12em; text-transform:uppercase;}
.m-oh svg{width:20px; height:34px; animation:blink 1.4s steps(2, jump-none) infinite;}
.m-oh span{font:500 10px/1.3 var(--text); letter-spacing:0; text-transform:none; color:var(--a-dim);}
@media (max-width:980px){
  .app-body{grid-template-columns:1fr;}
}
@media (max-width:640px){
  /* Карточки настоящей панели рассчитаны на ~340 px и шире; на телефоне макет
     уменьшаем целиком, а не переверстываем — иначе он перестанет быть похож
     на программу. Ниже первой группы всё равно уходит под затемнение. */
  .app-body{padding:10px; zoom:.8;}
  .m-hide-sm{display:none;}
  .app-url{font-size:11px;}
  .hero-shot{max-height:600px; overflow:hidden;}
}
@media (prefers-reduced-motion: reduce){
  .rec .m-recbtn i, .m-shot .rec-dot i, .m-oh svg{animation:none;}
}

/* ------------------------------------------------------------- как это работает */
.steps{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; counter-reset:step; padding:0; margin:0; list-style:none;}
.steps li{position:relative; padding:26px 24px 24px; border:1px solid var(--edge); border-radius:var(--r);
  background:color-mix(in srgb, var(--panel) 80%, transparent);}
.steps li::before{counter-increment:step; content:"0" counter(step); display:block; margin-bottom:16px;
  font:700 13px/1 var(--mono); letter-spacing:.1em; color:var(--brand);}
.steps h3{margin-bottom:8px;}
.steps p{margin:0; color:var(--ink-dim); font-size:15.5px;}
@media (max-width:860px){.steps{grid-template-columns:1fr;}}

/* ------------------------------------------------------------- возможности */
.features{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;}
.feature{padding:26px 24px; border:1px solid var(--edge); border-radius:var(--r); background:var(--panel);}
.feature .ic{display:grid; place-items:center; width:42px; height:42px; margin-bottom:18px; border-radius:11px;
  background:color-mix(in srgb, var(--brand) 14%, transparent); color:var(--brand);
  border:1px solid color-mix(in srgb, var(--brand) 30%, transparent);}
.feature .ic.rec{background:color-mix(in srgb, var(--crit) 12%, transparent); color:var(--crit);
  border-color:color-mix(in srgb, var(--crit) 30%, transparent);}
.feature .ic.ok{background:color-mix(in srgb, var(--ok) 12%, transparent); color:var(--ok);
  border-color:color-mix(in srgb, var(--ok) 30%, transparent);}
.feature .ic.warn{background:color-mix(in srgb, var(--warn) 12%, transparent); color:var(--warn);
  border-color:color-mix(in srgb, var(--warn) 30%, transparent);}
.feature .ic svg{width:21px; height:21px;}
.feature h3{margin-bottom:8px;}
.feature p{margin:0; color:var(--ink-dim); font-size:15.5px;}
.feature .tag{display:inline-block; margin-top:12px; font:600 11px/1 var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint);}
@media (max-width:980px){.features{grid-template-columns:repeat(2, 1fr);}}
@media (max-width:640px){.features{grid-template-columns:1fr;}}

/* ------------------------------------------------------------- где открыть */
.places{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;}
.place{display:flex; flex-direction:column; border:1px solid var(--edge); border-radius:var(--r); overflow:hidden; background:var(--panel);}
.place .art{height:170px; display:grid; place-items:center; border-bottom:1px solid var(--edge);
  background:radial-gradient(300px 140px at 50% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent), var(--panel-2);}
.place .txt{padding:22px 24px 24px;}
.place h3{margin-bottom:6px;}
.place p{margin:0; color:var(--ink-dim); font-size:15.5px;}
.art svg{width:auto; height:118px;}
@media (max-width:860px){.places{grid-template-columns:1fr;} .place .art{height:150px;}}

/* ------------------------------------------------------------- камеры */
.vendors{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.vendor{padding:30px 28px; border:1px solid var(--edge); border-radius:var(--r); background:var(--panel);}
.vendor-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px;}
.vendor-h h3{font-size:1.45rem; margin:0;}
.vendor .link-type{font:600 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);}
.vendor > p{color:var(--ink-dim); font-size:15.5px;}
.vendor dl{display:grid; grid-template-columns:auto 1fr; gap:10px 18px; margin:20px 0 0; font-size:15px;}
.vendor dt{color:var(--ink-faint); font:600 12px/1.9 var(--mono); letter-spacing:.06em; text-transform:uppercase;}
.vendor dd{margin:0;}
.models{display:flex; flex-wrap:wrap; gap:6px;}
.models span{padding:3px 8px; border-radius:6px; border:1px solid var(--edge); background:var(--panel-2);
  font:600 12.5px/1.5 var(--mono);}
.note{margin-top:22px; padding:14px 16px; border-radius:10px; border:1px solid var(--edge); background:var(--panel-2);
  color:var(--ink-dim); font-size:14.5px;}
.note strong{color:var(--ink);}
@media (max-width:860px){.vendors{grid-template-columns:1fr;} .vendor dl{grid-template-columns:1fr; gap:4px 0;} .vendor dd{margin-bottom:10px;}}

/* ------------------------------------------------------------- требования */
.reqs{display:grid; grid-template-columns:repeat(2, 1fr); gap:0; border:1px solid var(--edge); border-radius:var(--r); overflow:hidden;}
.req{display:flex; gap:16px; padding:22px 24px; background:var(--panel); border-bottom:1px solid var(--edge);}
.req:nth-child(odd){border-right:1px solid var(--edge);}
.req:nth-last-child(-n+2){border-bottom:0;}
.req svg{width:22px; height:22px; flex:none; margin-top:3px; color:var(--brand);}
.req h3{font-size:1.02rem; margin:0 0 4px; font-family:var(--text); font-weight:650;}
.req p{margin:0; color:var(--ink-dim); font-size:15px;}
@media (max-width:760px){
  .reqs{grid-template-columns:1fr;}
  .req:nth-child(odd){border-right:0;}
  .req:nth-last-child(2){border-bottom:1px solid var(--edge);}
}

/* ------------------------------------------------------------- цена */
.pricing{display:grid; grid-template-columns:1.05fr 1fr; gap:28px; align-items:stretch;}
.plan{position:relative; padding:34px 32px 30px; border-radius:18px; border:1px solid color-mix(in srgb, var(--brand) 45%, var(--edge));
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 9%, var(--panel)) 0%, var(--panel) 46%);
  box-shadow:0 30px 70px -40px color-mix(in srgb, var(--brand) 80%, transparent);}
.plan-name{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px;}
.plan-name h3{margin:0; font-size:1.25rem;}
.plan-badge{font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:6px 9px; border-radius:6px;
  color:var(--ok); border:1px solid color-mix(in srgb, var(--ok) 45%, transparent);}
.price{display:flex; align-items:baseline; gap:8px; margin-bottom:6px;}
.price .amount{font:700 64px/1 "Saira", var(--text); letter-spacing:-.02em;}
.price .per{font-size:18px; color:var(--ink-dim);}
.price-sub{color:var(--ink-dim); font-size:14.5px; margin-bottom:24px;}
.plan .btn{margin-bottom:14px;}
.plan-terms{margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-faint);}
.plan-terms a{color:inherit;}
.incl{padding:30px 30px; border-radius:18px; border:1px solid var(--edge); background:var(--panel);}
.incl h3{font-size:1.1rem; margin-bottom:16px;}
.checks{list-style:none; margin:0; padding:0; display:grid; gap:11px;}
.checks li{position:relative; padding-left:30px; font-size:15.5px;}
.checks li::before{content:""; position:absolute; left:0; top:4px; width:18px; height:18px; border-radius:50%;
  background:color-mix(in srgb, var(--ok) 16%, transparent);}
/* галочка — маской, чтобы её цвет шёл из --ok и темнел в светлой теме */
.checks li::after{content:""; position:absolute; left:0; top:4px; width:18px; height:18px; background:var(--ok);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;}
.checks li small{display:block; color:var(--ink-faint); font-size:13.5px;}
.pay-note{display:flex; align-items:center; gap:10px; margin-top:22px; padding-top:18px; border-top:1px solid var(--edge);
  color:var(--ink-faint); font-size:13.5px;}
.pay-note svg{width:18px; height:18px; flex:none;}
@media (max-width:900px){.pricing{grid-template-columns:minmax(0, 1fr);}}
@media (max-width:420px){.plan{padding:28px 20px 24px;} .incl{padding:26px 20px;} .price .amount{font-size:54px;}}

/* ------------------------------------------------------------- FAQ */
.faq{max-width:860px; margin:0 auto; border-top:1px solid var(--edge);}
.faq details{border-bottom:1px solid var(--edge);}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 4px; font-weight:600; font-size:1.06rem;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:""; flex:none; width:12px; height:12px; border-right:2px solid var(--ink-dim); border-bottom:2px solid var(--ink-dim);
  transform:rotate(45deg) translate(-3px, -3px); transition:transform .2s;}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px, -3px);}
.faq .a{padding:0 4px 22px; color:var(--ink-dim);}
.faq .a p:last-child{margin-bottom:0;}

/* ------------------------------------------------------------- финальный призыв */
.cta{position:relative; overflow:hidden; padding:56px 40px; border-radius:22px; text-align:center; border:1px solid var(--edge);
  background:radial-gradient(600px 260px at 50% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent), var(--panel);}
.cta h2{margin-bottom:12px;}
.cta p{color:var(--ink-dim); max-width:560px; margin:0 auto 26px;}
.cta .chips{justify-content:center; margin-top:20px;}
@media (max-width:640px){.cta{padding:40px 20px;}}

/* ------------------------------------------------------------- текстовые страницы */
.doc-head{padding:64px 0 28px;}
.doc-head h1{font-size:clamp(2rem, 4.4vw, 3rem); margin-bottom:12px; overflow-wrap:break-word; hyphens:auto;}
@media (max-width:360px){.doc-head h1{font-size:1.75rem;}}
.doc-head .meta{color:var(--ink-faint); font:500 13.5px/1.5 var(--mono);}
.doc-head .lead{color:var(--ink-dim); font-size:1.12rem; max-width:720px; margin:14px 0 0;}
.doc{display:grid; grid-template-columns:230px minmax(0, 1fr); gap:56px; padding-bottom:96px; align-items:start;}
.toc{position:sticky; top:96px; font-size:14px; max-height:calc(100vh - 120px); overflow:auto;}
.toc p{margin:0 0 10px; font:600 11.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);}
.toc ol{list-style:none; margin:0; padding:0; border-left:1px solid var(--edge);}
.toc a{display:block; padding:5px 0 5px 14px; margin-left:-1px; border-left:1px solid transparent; color:var(--ink-dim); text-decoration:none;}
.toc a:hover{color:var(--ink); border-left-color:var(--brand);}
.prose{max-width:74ch; min-width:0; font-size:16.5px; overflow-wrap:break-word;}
.prose h2{font-size:1.45rem; margin:2.2em 0 .6em; padding-top:.2em; scroll-margin-top:96px;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:1.08rem; margin:1.6em 0 .5em; font-family:var(--text); font-weight:650;}
.prose ul, .prose ol{padding-left:1.3em; margin:0 0 1em;}
.prose li{margin:.35em 0;}
.prose li::marker{color:var(--ink-faint);}
.prose strong{color:var(--ink);}
.prose .callout{margin:1.4em 0; padding:16px 18px; border-radius:11px; border:1px solid color-mix(in srgb, var(--brand) 35%, var(--edge));
  background:color-mix(in srgb, var(--brand) 7%, var(--panel));}
.prose .callout p:last-child{margin-bottom:0;}
.prose table{width:100%; border-collapse:collapse; margin:0 0 1.2em; font-size:15px;}
.prose th, .prose td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--edge); vertical-align:top;}
.prose th{font:600 12px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}
.prose .table-wrap{overflow-x:auto;}
/* на телефоне таблицу не сжимаем в столбики по слову — пусть прокручивается вбок */
.prose .table-wrap table{min-width:560px;}
.prose address{font-style:normal;}
.prose code{font:500 .9em/1.4 var(--mono); padding:1px 5px; border-radius:5px; background:var(--panel-2); border:1px solid var(--edge-2); word-break:break-word;}
@media (max-width:900px){
  /* minmax(0,…), а не 1fr: иначе колонку распирает широкая таблица, и вся
     страница уезжает за край экрана вместо прокрутки самой таблицы */
  .doc{grid-template-columns:minmax(0, 1fr); gap:28px;}
  .toc{position:static; padding:16px 18px; border:1px solid var(--edge); border-radius:12px; background:var(--panel);}
  .toc ol{border-left:0;}
  .toc a{padding:4px 0; border-left:0; margin-left:0;}
}

/* карточки-плитки на служебных страницах (контакты, спасибо) */
.tiles{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px;}
.tile{padding:26px 24px; border:1px solid var(--edge); border-radius:var(--r); background:var(--panel);}
.tile h2, .tile h3{font-size:1.15rem; margin-bottom:8px; font-family:var(--text); font-weight:650;}
.tile p{color:var(--ink-dim); font-size:15.5px;}
.tile p:last-child{margin-bottom:0;}
.tile .btn{margin-top:4px;}
.tile .big{font:600 18px/1.4 var(--mono); word-break:break-all;}
@media (max-width:760px){.tiles{grid-template-columns:1fr;}}

.dl{display:flex; align-items:center; gap:16px; padding:20px 22px; border:1px solid var(--edge); border-radius:var(--r);
  background:var(--panel); text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s;}
.dl:hover{border-color:color-mix(in srgb, var(--brand) 60%, var(--edge)); text-decoration:none;}
.dl svg{width:30px; height:30px; flex:none; color:var(--ink-dim);}
.dl b{display:block; font-size:16.5px;}
.dl small{display:block; color:var(--ink-faint); font-size:13.5px;}
.dl .go{margin-left:auto; width:20px; height:20px; color:var(--brand);}

.big-404{font:800 clamp(5rem, 16vw, 9rem)/1 var(--mono); letter-spacing:-.04em; color:var(--ink-faint); margin:0 0 6px;}

/* ------------------------------------------------------------- подвал */
.ftr{margin-top:auto; border-top:1px solid var(--edge); background:var(--bg-2); font-size:14.5px; color:var(--ink-dim);}
.ftr-grid{display:grid; grid-template-columns:1.6fr repeat(3, 1fr); gap:32px; padding:56px 0 40px;}
.ftr-brand p{margin:14px 0 0; max-width:300px;}
.ftr h2{font:600 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:4px 0 16px;}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.ftr a{color:var(--ink-dim); text-decoration:none;}
.ftr a:hover{color:var(--ink); text-decoration:underline;}
.ftr-legal{padding:24px 0 36px; border-top:1px solid var(--edge); display:grid; gap:10px; font-size:13.5px; color:var(--ink-faint);}
.ftr-legal p{margin:0;}
.ftr-legal .mor{color:var(--ink-dim);}
@media (max-width:860px){.ftr-grid{grid-template-columns:1fr 1fr;} .ftr-brand{grid-column:1 / -1;}}
@media (max-width:440px){.ftr-grid{grid-template-columns:1fr;}}

/* ------------------------------------------------------------- уведомление оформления заказа */
.toast{position:fixed; left:50%; bottom:24px; z-index:200; transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  width:min(calc(100vw - 32px), 520px); padding:16px 18px; border-radius:12px; border:1px solid var(--edge);
  background:var(--panel); box-shadow:var(--shadow); color:var(--ink); font-size:15px;
  transition:opacity .2s, transform .2s;}
/* Без visibility:hidden: живая область должна оставаться в дереве доступности, иначе
   скринридер не объявит сообщение. Скрытую подсказку checkout.js просто опустошает. */
.toast:empty{padding:0; border:0;}
.toast.show{opacity:1; transform:translate(-50%, 0); pointer-events:auto;}
.toast a{color:var(--link);}
.btn[aria-busy="true"]{opacity:.7; pointer-events:none;}
.hero-compact{padding-bottom:0;}
.hero-compact .lead{margin-bottom:0;}
.section-after-hero{padding-top:48px;}
@media (max-width:640px){
  .eyebrow{letter-spacing:.1em; font-size:11px;}
}