@import url("../fonts/fonts.css");

/* ============ ТОКЕНЫ — один в один из макета v5 ============ */
:root{
  --bone:#F2EDE3;
  --bone-2:#E8E1D3;
  --bone-3:#DCD3C2;
  --ink:#0D0D0F;
  --ink-2:#191A1D;
  --ink-3:#2A2C31;
  --cyan:#00d4ff;
  --cyan-08:rgba(0,212,255,.08);
  --cyan-18:rgba(0,212,255,.18);
  --cyan-35:rgba(0,212,255,.35);
  --muted:#6E685C;
  /* тот же серый, на 6% темнее: нужен на карточках (фон --bone-2),
     где #6E685C даёт 4.25:1 — ниже требования ТЗ 4.5:1 */
  --muted-card:#676256;
  /* бирюза, затемнённая до читаемой на светлом фоне (4.8:1) —
     для мелких подписей; акцентная --cyan остаётся неизменной */
  --cyan-ink:#00728A;
  --muted-on-dark:#8E8C86;
  --line:rgba(13,13,15,.14);
  --line-dark:rgba(242,237,227,.14);

  /* шкала 8pt */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  --display:'Tektur',"Arial Narrow",system-ui,sans-serif;
  --body:'Golos Text',-apple-system,"Segoe UI",Roboto,sans-serif;
  --pixel:'Press Start 2P',"Courier New",monospace; /* ТОЛЬКО латиница+цифры */
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100dvh;
}
/* зерно + точечная сетка — фактура стиля «Механика/Консоль» */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s4);position:relative;z-index:2}
@media(max-width:640px){.wrap{padding:0 var(--s3)}}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--cyan);
  padding:12px 18px;font-family:var(--mono);font-size:12px;text-decoration:none}
.skip:focus{left:0}

/* ============ ТИПОГРАФИКА ============ */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.02em;
  overflow-wrap:break-word}
h1{font-size:clamp(38px,6.4vw,80px)}
h2{font-size:clamp(28px,4vw,52px)}
h3{font-size:clamp(20px,2.2vw,28px);font-weight:600;letter-spacing:-.01em}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--ink)}
.dim{color:var(--muted)}
.dim-d{color:var(--muted-on-dark)}
/* пиксельный шрифт — только латиница/цифры, кириллицы в нём нет */
.px{font-family:var(--pixel);font-size:9px;line-height:1.8;letter-spacing:.04em}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}

/* ============ SIGNATURE: приборная лента секции ============ */
.rail{
  display:flex;align-items:center;gap:var(--s2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:10px 0;margin-bottom:var(--s5);
}
.rail .idx{font-family:var(--pixel);font-size:9px;background:var(--ink);color:var(--cyan);padding:6px 8px;white-space:nowrap}
.rail .nm{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.rail .bar{flex:1;height:6px;background:
   repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 7px);
   position:relative;overflow:hidden}
.rail .bar::after{content:'';position:absolute;left:0;top:0;bottom:0;width:22%;
  background:linear-gradient(90deg,transparent,var(--cyan));opacity:.55}
.sec-dark .rail{border-color:var(--line-dark)}
.sec-dark .rail .nm{color:var(--muted-on-dark)}
.sec-dark .rail .bar{background:repeating-linear-gradient(90deg,var(--line-dark) 0 1px,transparent 1px 7px)}
.sec-dark .rail .idx{background:var(--cyan);color:var(--ink)}

section{padding:var(--s7) 0}
@media(max-width:760px){section{padding:var(--s6) 0}}
.sec-dark{background:var(--ink);color:var(--bone)}
.sec-dark h2,.sec-dark h3{color:var(--bone)}

/* ============ КЛАВИШИ (кнопки) ============ */
.key{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.01em;
  padding:15px 26px;min-height:48px;
  background:var(--ink);color:var(--bone);border:1px solid var(--ink);
  text-decoration:none;cursor:pointer;
  box-shadow:4px 4px 0 rgba(13,13,15,.22);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .2s var(--ease);
}
.key:hover{background:var(--ink-2);transform:translate(1px,1px);box-shadow:3px 3px 0 rgba(13,13,15,.22)}
.key:active{transform:translate(4px,4px);box-shadow:0 0 0 rgba(13,13,15,0)}
.key.ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 rgba(13,13,15,.12)}
.key.ghost:hover{background:var(--bone-2)}
.key.cyan{background:var(--cyan);color:var(--ink);border-color:var(--cyan);box-shadow:4px 4px 0 rgba(0,212,255,.28)}
.key.cyan:hover{background:#25dcff}
.key .dot{width:7px;height:7px;background:var(--cyan);border-radius:50%;flex:none}
.key.cyan .dot{background:var(--ink)}
.sec-dark .key.ghost{color:var(--bone);border-color:var(--bone);box-shadow:4px 4px 0 rgba(242,237,227,.12)}
.sec-dark .key.ghost:hover{background:var(--ink-2)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* ============ ШАПКА ============ */
header{position:sticky;top:0;z-index:50;background:rgba(242,237,227,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:var(--s3);height:68px}
.logo{font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:.1em;text-decoration:none;color:var(--ink);white-space:nowrap}
.logo span{color:var(--cyan);-webkit-text-stroke:.6px var(--ink)}
nav{display:flex;gap:var(--s3);margin-left:auto}
nav a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
nav a:hover,nav a[aria-current="page"]{border-color:var(--cyan)}
.lang{display:flex;border:1px solid var(--ink);height:34px}
.lang a{font-family:var(--pixel);font-size:8px;background:transparent;color:var(--ink);
  padding:0 10px;display:flex;align-items:center;text-decoration:none}
.lang a[aria-current="true"]{background:var(--ink);color:var(--cyan)}
@media(max-width:900px){nav{display:none}}
@media(max-width:520px){.hd .key{display:none}}

/* ============ HERO ============ */
.hero{padding:var(--s7) 0 var(--s6)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s6);align-items:end}
.hero-tag{display:inline-block;background:var(--ink);color:var(--cyan);padding:7px 10px;margin-bottom:var(--s3)}
.hero h1{margin-bottom:var(--s3)}
.hero h1 em{font-style:normal;color:var(--cyan);-webkit-text-stroke:1.2px var(--ink)}
.hero .lead{max-width:33em;margin-bottom:var(--s4)}
.cta-row{display:flex;gap:var(--s2);flex-wrap:wrap}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:var(--s5)}}

/* ============ КАДРЫ ============ */
.shot{position:relative;display:block;background:var(--ink);border:1px solid var(--ink);overflow:hidden}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
.shot.r43{aspect-ratio:3/4}
.shot.r11{aspect-ratio:1/1}
.shot.r169{aspect-ratio:16/9}
.shot.r34{aspect-ratio:4/3}

/* плейсхолдеры кадров — там, где фотографии ещё нет */
.ph{
  position:relative;background:var(--ink);border:1px solid var(--ink);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--s2);overflow:hidden;
  background-image:
    radial-gradient(circle at center,rgba(0,212,255,.10) 0,transparent 62%),
    radial-gradient(rgba(242,237,227,.16) 1px,transparent 1px);
  background-size:100% 100%,18px 18px;
}
.ph::before{
  content:'';position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:38%;height:52%;border:1px dashed rgba(0,212,255,.5);
}
.ph .tagline{position:relative;font-family:var(--pixel);font-size:8px;color:var(--cyan)}
.ph .fname{position:relative;font-family:var(--mono);font-size:11px;color:var(--muted-on-dark);letter-spacing:.08em;margin-top:4px}
.ph.r43{aspect-ratio:3/4}
.ph.r11{aspect-ratio:1/1}
.ph.r169{aspect-ratio:16/9}
.ph.r34{aspect-ratio:4/3}

/* ============ ПРИБОРНАЯ ЛЕНТА ЦИФР ============ */
.specs{background:var(--ink);color:var(--bone);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.specs-in{display:grid;grid-template-columns:repeat(5,1fr);}
.spec{padding:var(--s4) var(--s3);border-right:1px solid var(--line-dark)}
.spec:last-child{border-right:0}
.spec b{display:block;font-family:var(--display);font-size:clamp(26px,3vw,40px);font-weight:800;color:var(--cyan);line-height:1}
.spec i{display:block;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-on-dark);margin-top:8px}
@media(max-width:860px){.specs-in{grid-template-columns:repeat(2,1fr)}
 .spec{border-bottom:1px solid var(--line-dark)}
 .spec:nth-child(2n){border-right:0}
 .spec:last-child{grid-column:1/-1}}

/* ============ ПРОБЛЕМА → РЕШЕНИЕ ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}
.split .col p+p{margin-top:var(--s2)}
.arrowbox{border-left:2px solid var(--cyan);padding-left:var(--s3)}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:var(--s4)}}

/* ============ 5 ЭТАПОВ ============ */
.timeline{display:flex;align-items:center;gap:2px;margin-bottom:var(--s5)}
.tl-seg{flex:1;height:34px;background:var(--ink-2);border:1px solid var(--ink-3);position:relative;display:flex;align-items:center;justify-content:center}
.tl-seg span{font-family:var(--pixel);font-size:8px;color:var(--muted-on-dark)}
.tl-seg[data-on="1"]{background:var(--cyan-18);border-color:var(--cyan-35)}
.tl-seg[data-on="1"] span{color:var(--cyan)}
.stages{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2)}
.stage .num{font-family:var(--pixel);font-size:9px;color:var(--cyan);margin-bottom:10px;display:block}
.stage h3{margin-bottom:8px;font-size:19px}
.stage p{font-size:14px;line-height:1.5;color:var(--muted-on-dark)}
.stage .ph,.stage .shot{margin-bottom:var(--s2)}
@media(max-width:1000px){.stages{grid-template-columns:repeat(2,1fr)}.timeline{display:none}}
@media(max-width:560px){.stages{grid-template-columns:1fr}}
.pullquote{margin-top:var(--s5);border-top:1px solid var(--line-dark);padding-top:var(--s3);font-family:var(--display);font-size:clamp(19px,2.2vw,26px);font-weight:600;max-width:26em;line-height:1.25}

/* ============ ТРИ РЕЖИМА ============ */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.mode{background:var(--bone-2);border:1px solid var(--ink);padding:var(--s4);box-shadow:5px 5px 0 rgba(13,13,15,.10);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.mode:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(13,13,15,.10)}
.mode .lvl{display:flex;gap:4px;margin-bottom:var(--s3)}
.mode .lvl i{width:26px;height:8px;background:var(--bone-3);border:1px solid var(--line)}
.mode .lvl i.on{background:var(--cyan);border-color:var(--cyan)}
.mode h3{margin-bottom:8px}
.mode p{font-size:15px;color:var(--muted-card)}
@media(max-width:860px){.modes{grid-template-columns:1fr}}

/* ============ ТАБЛИЦА СРАВНЕНИЯ ============ */
.cmp{width:100%;border-collapse:collapse;font-size:15px}
.cmp th{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-align:left;padding:14px var(--s2);border-bottom:1px solid var(--ink)}
.cmp th:last-child{color:var(--ink);background:var(--cyan-18)}
.cmp td{padding:16px var(--s2);border-bottom:1px solid var(--line);vertical-align:top}
.cmp td:first-child{color:var(--muted)}
.cmp td:last-child{background:var(--cyan-08);font-weight:500}
@media(max-width:640px){.cmp,.cmp tbody,.cmp tr,.cmp td,.cmp th{display:block}.cmp th{border:0;padding:8px var(--s2)}.cmp tr{border:1px solid var(--line);margin-bottom:var(--s2)}.cmp td{border:0}}

/* ============ ДВЕ КАМЕРЫ ============ */
.chambers{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s6);align-items:center}
.ch-list{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s4)}
.ch-item{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:baseline;border-bottom:1px solid var(--line-dark);padding-bottom:var(--s3)}
.ch-item .k{font-family:var(--pixel);font-size:9px;color:var(--cyan)}
.ch-item .t{font-family:var(--display);font-size:20px;font-weight:600}
.ch-item .d{font-size:14px;color:var(--muted-on-dark);grid-column:2/-1}
.ch-item .m{font-family:var(--display);font-size:26px;font-weight:800;color:var(--cyan)}
@media(max-width:860px){.chambers{grid-template-columns:1fr;gap:var(--s4)}}

/* ============ AR ============ */
.ar{background:var(--ink-2);border:1px solid var(--ink-3);padding:var(--s5);display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center}
.ar-stage{aspect-ratio:1/1;border:1px dashed var(--cyan-35);position:relative;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 60%,rgba(0,212,255,.12),transparent 60%)}
.ar-stage model-viewer{width:100%;height:100%;--poster-color:transparent;background:transparent}
.ar-stage .hint{text-align:center;position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none}
.ar-stage.loaded .hint{display:none}
.ar-stage .hint b{display:block;font-family:var(--pixel);font-size:9px;color:var(--cyan);margin-bottom:10px}
.ar-stage .hint span{font-family:var(--mono);font-size:11px;color:var(--muted-on-dark);letter-spacing:.08em}
.ar-stage .spin{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:64px;height:64px;border:1px solid var(--cyan-35);border-radius:50%;
  border-top-color:var(--cyan);animation:sp 4s linear infinite}
.ar-stage.loaded .spin{display:none}
@keyframes sp{to{transform:translateX(-50%) rotate(360deg)}}
@media(max-width:860px){.ar{grid-template-columns:1fr;padding:var(--s4)}}

/* ============ СЕГМЕНТЫ ============ */
.segs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.seg{position:relative;text-decoration:none;color:inherit;border:1px solid var(--ink);background:var(--bone-2);overflow:hidden;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.seg:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(13,13,15,.16)}
.seg .ph,.seg .shot{border:0;border-bottom:1px solid var(--ink)}
.seg .body{padding:var(--s2) var(--s3) var(--s3)}
.seg .code{font-family:var(--pixel);font-size:8px;color:var(--muted-card);display:block;margin-bottom:8px}
.seg h3{font-size:17px;margin-bottom:6px}
.seg p{font-size:13px;color:var(--muted-card);line-height:1.45}
@media(max-width:980px){.segs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.segs{grid-template-columns:1fr}}

/* ============ СТРАНИЦА «РЕШЕНИЯ»: сегмент крупно ============ */
.seg-full{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s6);align-items:center;
  padding:var(--s6) 0;border-bottom:1px solid var(--line);scroll-margin-top:84px}
.seg-full:nth-child(even) .seg-media{order:2}
.seg-full .code{font-family:var(--pixel);font-size:9px;color:var(--cyan-ink);display:block;margin-bottom:var(--s2)}
.seg-full h2{font-size:clamp(24px,3vw,38px);margin-bottom:var(--s3)}
.seg-full .inside{margin-top:var(--s3);font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);border-left:2px solid var(--cyan);padding-left:var(--s2)}
@media(max-width:860px){.seg-full{grid-template-columns:1fr;gap:var(--s4);padding:var(--s5) 0}
 .seg-full:nth-child(even) .seg-media{order:0}}

.anchors{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s5)}
.anchors a{font-family:var(--pixel);font-size:8px;text-decoration:none;color:var(--ink);
  border:1px solid var(--ink);padding:9px 11px;background:var(--bone-2)}
.anchors a:hover{background:var(--ink);color:var(--cyan)}

/* ============ СПИСКИ ХАРАКТЕРИСТИК ============ */
.speclist{list-style:none;display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}
.speclist li{display:grid;grid-template-columns:12px 1fr;gap:var(--s2);align-items:start;font-size:16px}
.speclist li::before{content:'';width:7px;height:7px;background:var(--cyan);margin-top:9px}
.sec-dark .speclist li{color:var(--bone)}

.stage-row{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);padding:var(--s3) 0;
  border-bottom:1px solid var(--line-dark);align-items:start}
.stage-row .clock{font-family:var(--pixel);font-size:9px;color:var(--cyan);white-space:nowrap;padding-top:4px}
.stage-row h3{font-size:20px;margin-bottom:6px}
.stage-row p{color:var(--muted-on-dark);font-size:15px}
@media(max-width:640px){.stage-row{grid-template-columns:1fr;gap:var(--s1)}}

/* ============ ФАБРИКА ============ */
.factory{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s5)}
@media(max-width:860px){.factory{grid-template-columns:1fr}}

/* ============ FAQ ============ */
.faq{max-width:52em}
.faq details{border-bottom:1px solid var(--line);padding:var(--s3) 0}
.faq summary{font-family:var(--display);font-weight:600;font-size:19px;cursor:pointer;
  list-style:none;display:flex;gap:var(--s2);align-items:baseline;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';color:var(--cyan);font-family:var(--mono);font-size:18px;flex:none}
.faq details[open] summary::before{content:'–'}
.faq details p{margin-top:var(--s2);padding-left:calc(var(--s2) + 12px);color:var(--muted);max-width:44em}

/* ============ ФОРМА ============ */
.form-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s6);align-items:start}
@media(max-width:900px){.form-grid{grid-template-columns:1fr;gap:var(--s5)}}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s3)}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:16px;color:var(--ink);background:var(--bone-2);
  border:1px solid var(--ink);padding:13px var(--s2);min-height:48px;width:100%;
  border-radius:0;appearance:none}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{background:#fff;outline:3px solid var(--cyan);outline-offset:2px}
.field .err{font-size:13px;color:#B3261E;min-height:0}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#B3261E;border-width:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:13px;color:var(--muted);margin-top:var(--s2);max-width:34em}
.form-msg{margin-top:var(--s3);padding:var(--s3);border:1px solid var(--ink);background:var(--bone-2);display:none}
.form-msg.on{display:block}
.form-msg.ok{border-color:var(--cyan);background:var(--cyan-08)}
.form-msg.fail{border-color:#B3261E}
.form-msg h3{font-size:19px;margin-bottom:6px}

/* ============ КОНТАКТЫ / QR ============ */
.contacts{display:flex;flex-direction:column;gap:var(--s3)}
.contact-row{display:grid;grid-template-columns:88px 1fr;gap:var(--s2);align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:var(--s2)}
.contact-row .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contact-row a{color:var(--ink);font-family:var(--display);font-weight:600;font-size:18px;text-decoration:none;border-bottom:1px solid var(--cyan)}
.qr{margin-top:var(--s4);display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.qr img{width:200px;height:200px;background:#fff;border:1px solid var(--ink);padding:8px;display:block}
.qr .cap{font-size:14px;color:var(--muted);max-width:16em}
.final .qr .cap{color:rgba(13,13,15,.7)}
.final .qr img{border-color:var(--ink)}

/* ============ ФИНАЛЬНЫЙ CTA ============ */
.final{background:var(--cyan);color:var(--ink)}
.final h2{max-width:16em;margin-bottom:var(--s3)}
.final .lead{max-width:36em;margin-bottom:var(--s4)}
.final .rail .idx{background:var(--ink);color:var(--cyan)}
.final .rail{border-color:rgba(13,13,15,.25)}
.final .rail .nm{color:rgba(13,13,15,.65)}
.final .rail .bar{background:repeating-linear-gradient(90deg,rgba(13,13,15,.25) 0 1px,transparent 1px 7px)}
.final .key.ghost{border-color:var(--ink);color:var(--ink);box-shadow:4px 4px 0 rgba(13,13,15,.2)}
.final .key.ghost:hover{background:rgba(13,13,15,.08)}
.contact-line{font-family:var(--display);font-weight:600;font-size:clamp(17px,2vw,22px);margin-top:var(--s4)}

/* ============ ФУТЕР ============ */
footer{background:var(--ink);color:var(--muted-on-dark);padding:var(--s6) 0 var(--s5);font-size:14px}
.ft{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s5)}
footer a{color:var(--bone);text-decoration:none;display:block;padding:5px 0}
footer a:hover{color:var(--cyan)}
.ft h2,.ft h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-on-dark);margin-bottom:var(--s2);font-weight:400}
.ft-bottom{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font-size:12px}
@media(max-width:760px){.ft{grid-template-columns:1fr}}

/* ============ СТРАНИЦЫ ОШИБОК ============ */
.err-page{min-height:70dvh;display:flex;flex-direction:column;justify-content:center}
.err-page .code404{font-family:var(--pixel);font-size:clamp(28px,7vw,64px);color:var(--cyan);margin-bottom:var(--s3)}

/* ── ТАЧ-ЦЕЛИ ≥44px на сенсорных экранах (ТЗ, раздел 12).
      Десктопный вид макета не трогаем: правила только под pointer:coarse. ── */
@media(max-width:900px),(pointer:coarse){
  .logo{display:inline-flex;align-items:center;min-height:44px}
  .lang{height:44px}
  .lang a{padding:0 14px;min-height:44px}
  .lang{height:auto}
  nav a{padding:12px 0}
  footer a{padding:12px 0}
  .contact-row a{display:inline-flex;align-items:center;min-height:44px}
  .anchors a{min-height:44px;display:inline-flex;align-items:center}
  .ft h2,.ft h4{margin-bottom:var(--s1)}
}

/* ── ЗАЩИТА ОТ ГОРИЗОНТАЛЬНОЙ ПРОКРУТКИ (ТЗ: чисто на 320px) ── */
html{overflow-x:hidden}
.lead,p,li,td,th,summary,.seg h3,.stage h3{overflow-wrap:break-word}
.rail{flex-wrap:wrap}
.rail .bar{min-width:40px}
.cmp{table-layout:fixed}
.contact-row a{overflow-wrap:anywhere}
@media(max-width:400px){
  .wrap{padding:0 var(--s2)}
  .qr img{width:180px;height:180px}
  .anchors a{font-size:7px;padding:8px 9px}
}

/* ============ ПУЛЬТ УПРАВЛЕНИЯ (геймпад) ============ */
#pad{
  position:fixed;right:24px;bottom:24px;z-index:70;width:344px;
  background:linear-gradient(180deg,#2A2D33 0%,#191B1F 46%,#0F1013 100%);
  border:1px solid #000;border-radius:20px 20px 30px 30px;
  box-shadow:8px 10px 0 rgba(13,13,15,.32), inset 0 1px 0 rgba(255,255,255,.09);
  user-select:none;touch-action:none;
  transition:opacity .2s var(--ease);
}
/* рукоятки геймпада */
#pad::before,#pad::after{
  content:'';position:absolute;bottom:-26px;width:96px;height:62px;z-index:-1;
  background:linear-gradient(180deg,#1B1D21,#0D0E10);border:1px solid #000;
}
#pad::before{left:8px;border-radius:26px 10px 34px 30px;transform:rotate(9deg)}
#pad::after{right:8px;border-radius:10px 26px 30px 34px;transform:rotate(-9deg)}

/* плечевые кнопки — язык */
.shoulder{position:absolute;top:-19px;display:flex;align-items:center;gap:5px;
  height:26px;padding:0 12px;background:linear-gradient(180deg,#33373E,#1D2024);
  border:1px solid #000;color:var(--bone);cursor:pointer;text-decoration:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  box-shadow:0 2px 0 rgba(0,0,0,.5)}
.shoulder::after{content:'';position:absolute;left:-6px;right:-6px;top:-12px;bottom:-12px}
.shoulder.l{left:26px;border-radius:12px 12px 3px 3px}
.shoulder.r{right:26px;border-radius:12px 12px 3px 3px}
.shoulder:hover{background:linear-gradient(180deg,#3D424A,#24272C)}
.shoulder[aria-current="true"]{background:var(--cyan);color:var(--ink);border-color:var(--cyan)}

#pad .grip{
  height:26px;cursor:grab;display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;border-bottom:1px solid rgba(0,0,0,.6);border-radius:19px 19px 0 0;
  background-image:repeating-linear-gradient(90deg,rgba(242,237,227,.14) 0 1px,transparent 1px 6px);
}
#pad.drag .grip{cursor:grabbing}
#pad .grip b{font-family:var(--pixel);font-size:7px;color:var(--cyan);letter-spacing:.05em}
#pad .grip .gbtn{display:flex;gap:2px}
#pad .grip button{background:none;border:0;color:#8E8C86;cursor:pointer;font-size:13px;line-height:1;
  padding:2px 5px;position:relative}
#pad .grip button::after{content:'';position:absolute;left:-9px;right:-9px;top:-14px;bottom:-14px}
#pad .grip button:hover{color:var(--cyan)}

#pad .face{display:grid;grid-template-columns:96px 1fr 108px;gap:8px;align-items:center;padding:14px 12px 6px}

/* --- крестовина --- */
.dpad{width:94px;height:94px;position:relative}
.dpad .cross{position:absolute;inset:0}
.dpad .cross i{position:absolute;background:#0A0B0D;border:1px solid #000;border-radius:4px}
.dpad .cross i:first-child{left:31px;top:2px;width:32px;height:90px}
.dpad .cross i:last-child{left:2px;top:31px;width:90px;height:32px}
.dpad button{position:absolute;width:30px;height:30px;padding:0;cursor:pointer;
  background:linear-gradient(180deg,#3A3E45,#22252A);border:1px solid #000;color:var(--bone);
  font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:background .1s var(--ease),transform .08s var(--ease)}
.dpad .up{left:32px;top:3px;border-radius:6px 6px 2px 2px}
.dpad .dn{left:32px;bottom:3px;border-radius:2px 2px 6px 6px}
.dpad .lf{left:3px;top:32px;border-radius:6px 2px 2px 6px}
.dpad .rt{right:3px;top:32px;border-radius:2px 6px 6px 2px}
.dpad .hub{position:absolute;left:35px;top:35px;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#33373E,#141619);border:1px solid #000}
.dpad button:hover{background:linear-gradient(180deg,#474C55,#2B2F35)}
.dpad button:active,.dpad button.hit{background:var(--cyan);color:var(--ink);transform:translateY(2px)}

/* --- LCD в центре --- */
.lcd{background:#06181C;border:1px solid #000;border-radius:5px;padding:9px 8px;min-height:74px;
  display:flex;flex-direction:column;justify-content:center;gap:5px;text-align:center;
  box-shadow:inset 0 0 14px rgba(0,212,255,.22)}
.lcd .n{font-family:var(--pixel);font-size:7px;color:rgba(0,212,255,.65)}
.lcd .t{font-family:var(--mono);font-size:11px;line-height:1.25;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);
  text-shadow:0 0 8px rgba(0,212,255,.6)}
.lcd .scan{height:4px;background:repeating-linear-gradient(180deg,rgba(0,212,255,.16) 0 1px,transparent 1px 3px)}

/* --- четыре кнопки ромбом --- */
.diamond{width:108px;height:104px;position:relative}
.diamond button{position:absolute;width:38px;height:38px;border-radius:50%;cursor:pointer;padding:0;
  border:1px solid #000;font-family:var(--display);font-weight:800;font-size:15px;
  background:linear-gradient(180deg,#3A3E45,#22252A);color:var(--bone);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 3px 0 rgba(0,0,0,.5);
  transition:transform .08s var(--ease),box-shadow .08s var(--ease)}
.diamond .y{left:35px;top:0}
.diamond .x{left:0;top:33px}
.diamond .b{right:0;top:33px}
.diamond .a{left:35px;bottom:0;background:linear-gradient(180deg,#3BE0FF,#00b4dd);color:var(--ink);border-color:#000}
.diamond button:hover{filter:brightness(1.18)}
.diamond button:active,.diamond button.hit{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 rgba(0,0,0,.5)}

/* --- START / SELECT --- */
.mid{display:flex;justify-content:center;align-items:center;gap:10px;padding:2px 0 10px}
.mid button{background:linear-gradient(180deg,#33373E,#1D2024);border:1px solid #000;color:#B9B6AE;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;padding:5px 13px;border-radius:9px;cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.5)}
.mid button:hover{color:var(--cyan)}
.mid button:active,.mid button.hit{transform:translateY(2px);box-shadow:0 0 0}
.mid .led{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 7px var(--cyan);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}

/* --- легенда: что делает каждая кнопка --- */
.legend{display:grid;grid-template-columns:1fr 1fr;gap:1px 8px;padding:9px 12px 13px;
  border-top:1px solid rgba(0,0,0,.6);background:rgba(0,0,0,.22);border-radius:0 0 19px 19px}
.legend span{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;
  letter-spacing:.06em;text-transform:uppercase;color:#9C9A94;white-space:nowrap}
.legend span i{width:15px;height:15px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:9px;font-style:normal;background:#2B2F35;color:var(--bone);border:1px solid #000}
.legend span.hi{color:var(--cyan)}
.legend span.acc i{background:var(--cyan);color:var(--ink)}

/* --- свёрнутое состояние --- */
#pad.min{width:56px;height:56px;border-radius:14px;overflow:hidden}
#pad.min::before,#pad.min::after{display:none}
#pad.min .face,#pad.min .mid,#pad.min .legend,#pad.min .shoulder,#pad.min .grip b,#pad.min #pad-reset{display:none}
#pad.min .grip{height:56px;justify-content:center;border-radius:14px;background-image:none}
#pad.min .grip .gbtn{transform:scale(1.5)}

#pad .menu{position:absolute;right:0;bottom:calc(100% + 22px);width:230px;background:var(--ink);border:1px solid var(--cyan);display:none;
  box-shadow:6px 6px 0 rgba(13,13,15,.3);max-height:60dvh;overflow:auto}
#pad .menu.open{display:block}
#pad .menu a{display:block;padding:9px 13px;color:var(--bone);text-decoration:none;font-family:var(--mono);
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;border-bottom:1px solid var(--line-dark)}
#pad .menu a:hover{background:var(--cyan);color:var(--ink)}

@media(max-width:820px){#pad{transform:scale(.78);transform-origin:100% 100%;right:10px;bottom:14px}}
/* на узких экранах пульт не должен закрывать форму и кнопки CTA */
@media(max-width:560px){#pad:not(.min){transform:scale(.66);transform-origin:100% 100%}}

/* ============ КУРСОР-МАСКОТ + ШЛЕЙФ ============ */
#mol,.puff,.cryst{position:fixed;pointer-events:none;z-index:65;will-change:transform}
#mol{width:68px;height:60px;left:0;top:0;margin:-30px 0 0 -34px;opacity:0;transition:opacity .4s var(--ease);
  filter:drop-shadow(0 3px 8px rgba(0,212,255,.45))}
#mol img{width:100%;height:100%;display:block}
.puff{width:26px;height:26px;left:0;top:0;margin:-13px 0 0 -13px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,.55),rgba(0,212,255,0) 70%);filter:blur(3px);opacity:0}
.cryst{width:7px;height:7px;left:0;top:0;margin:-3.5px 0 0 -3.5px;background:var(--cyan);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:0}
@media(hover:none),(pointer:coarse){#mol,.puff,.cryst{display:none}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
 html{scroll-behavior:auto}
 #mol,.puff,.cryst{display:none}}