/* Odyx — приборная панель. Тёмно-зелёный «салон», кожаные панели со строчкой, вкладыши из сервисной книжки.
   Шрифты самохостятся (OFL, см. fonts/LICENSES.txt): страница не обращается к сторонним серверам. */
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/roboto-condensed-latin.woff2) format('woff2');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:'Roboto Condensed';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/roboto-condensed-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/roboto-condensed-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/roboto-condensed-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'PT Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/pt-mono-400-latin.woff2) format('woff2');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:'PT Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/pt-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'PT Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/pt-mono-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'PT Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/pt-mono-400-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/caveat-500-latin.woff2) format('woff2');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:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/caveat-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/caveat-500-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/caveat-500-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}

:root{
  --bg:#0e1712; --leather:#2a2a26; --stitch:#c7a468; --brass:#d8b45c; --brass-2:#9a7c3a;
  --fg:#f1efe6; --fg-2:#aab3ab; --fg-3:#78857b;
  --led:#5ff28c; --amber:#ffb54a; --red:#ff6b57;
  --paper:#efe7d2; --paper-2:#e5dbc0; --ink:#2a2620; --ink-2:#5a534a;
  --stamp-red:#c9372c; --stamp-green:#2f8f4a; --stamp-blue:#2d5fb0;
  --r:28px; --r-2:18px; --r-3:12px;
  --cond:"Roboto Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --type:"PT Mono","Courier New",Courier,monospace;
  --hand:"Caveat","Bradley Hand","Segoe Script",cursive;
  color-scheme:dark;
}
*{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;background:var(--bg);color:var(--fg);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,summary:focus-visible{outline:2px solid var(--led);outline-offset:4px;border-radius:6px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
.skip{position:absolute;left:16px;top:8px;z-index:50;padding:12px 20px;background:var(--paper);color:var(--ink);border-radius:8px;transform:translateY(-150%)}
.skip:focus{transform:none}
.wrap{max-width:1160px;margin:0 auto;padding-inline:20px}
@media(min-width:900px){.wrap{padding-inline:32px}}
.label{font:600 13px/1.2 var(--cond);text-transform:uppercase;letter-spacing:.18em;color:var(--fg-3)}
.lead{color:var(--fg-2);font-size:18px;max-width:60ch;text-wrap:pretty}
section{padding-block:56px}
@media(min-width:900px){section{padding-block:88px}}
h2.title{font:700 clamp(32px,4.6vw,50px)/1.04 var(--cond);text-transform:uppercase;letter-spacing:.01em;margin-top:10px}
.sec-head{display:grid;gap:10px;max-width:760px;margin-bottom:32px}
.sec-head .lead{font-size:17px}

/* кожа и строчка */
.leather{position:relative;background:
  radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.05),transparent 60%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.16 0 0 0 0 0.14 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
  var(--leather);
  border:1px solid #3b3b35;border-radius:var(--r);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 -1px 0 rgba(0,0,0,.6) inset,0 24px 50px -30px #000}
.leather::before{content:"";position:absolute;inset:9px;border:2px dashed var(--stitch);border-radius:calc(var(--r) - 9px);opacity:.75;pointer-events:none}
.leather.tight{border-radius:var(--r-2)}
.leather.tight::before{inset:7px;border-radius:calc(var(--r-2) - 7px)}
.well{background:linear-gradient(#070b08,#101814);border:1px solid #2b332d;border-radius:var(--r-3);box-shadow:0 0 0 1px #000 inset,0 10px 24px -14px #000 inset}

/* светодиоды, латунь, бирки */
.led{font:700 1em/1 var(--cond);color:var(--led);text-shadow:0 0 10px rgba(95,242,140,.55),0 0 24px rgba(95,242,140,.25);font-variant-numeric:tabular-nums}
.led.amber{color:var(--amber);text-shadow:0 0 10px rgba(255,181,74,.5)}
.led.cream{color:#e9f3e9;text-shadow:0 0 10px rgba(233,243,233,.35)}
.dot{display:inline-block;width:14px;height:4px;border-radius:2px;background:var(--led);box-shadow:0 0 8px var(--led)}
.tag{display:inline-flex;align-items:center;gap:5px;font:700 12px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;padding:5px 7px;border-radius:5px}
.tag.blk{background:#d9d9d2;color:#1b1b18}
.tag.sfd{color:var(--brass);padding-inline:0}
.tag.pro{background:linear-gradient(#e7c977,#b8933d);color:#2b2008}
.tag.dim{color:var(--fg-2);padding-inline:0}
.plate{display:inline-grid;place-items:center;font:700 28px/1 var(--cond);color:#eee;background:#141414;border:2px solid #4a4a44;border-radius:8px;padding:8px 12px;box-shadow:0 0 0 1px #000 inset,0 2px 0 rgba(255,255,255,.08) inset}

/* штампы */
.stamp{display:inline-block;font:700 16px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;padding:6px 10px 5px;border:2.5px solid currentColor;border-radius:4px;transform:rotate(-7deg);color:var(--stamp-green);opacity:.92;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.4 -.2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.4 -.2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E")}
.stamp.red{color:var(--stamp-red)}.stamp.blue{color:#8fb4ff}.stamp.on-dark{color:#7cf29f}.stamp.amber{color:var(--amber)}

/* клавиши */
.key{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:12px 26px;border-radius:16px;border:1px solid #4a4f4a;
  background:linear-gradient(#454a45,#262a27 55%,#1b1e1c);color:#f2f2ec;font:700 17px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 -2px 0 rgba(0,0,0,.5) inset,0 10px 20px -10px #000;transition:transform .12s ease,box-shadow .12s ease}
.key:hover{transform:translateY(-1px)}.key:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 4px 10px -8px #000}
.key.green{background:linear-gradient(#2c9a66,#1f7a4e 55%,#176340);border-color:#2f8a5c;color:#f3fff6}
.key.ghost{background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.03));border-color:#3d453f;box-shadow:none}
.key small{display:block;font:500 12px/1.1 var(--sans);letter-spacing:0;text-transform:none;color:#c9d6cc;margin-top:4px}
.key .col{display:grid;text-align:left}
a.more{font:600 14px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--led)}
a.more.amber{color:var(--amber)}
a.more:hover{text-decoration:underline;text-underline-offset:4px}

/* шапка */
.nav{position:sticky;top:0;z-index:30;background:rgba(14,23,18,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid #1f2b24}
.nav .wrap{display:flex;align-items:center;gap:18px;min-height:68px}
.logo{display:inline-flex;align-items:center}
.drum{display:inline-flex;gap:2px;padding:3px;border-radius:6px;background:linear-gradient(#0a0d0b,#1a1f1b);border:1.5px solid var(--brass-2);box-shadow:0 0 0 1px #000 inset;font-size:15px}
.drum b{display:grid;place-items:center;width:1.25em;height:1.65em;font:700 1em/1 var(--cond);color:#f1e7c8;background:linear-gradient(#0a0c0b,#2a302c 50%,#0a0c0b);border-radius:2px}
.drum b:last-child{color:#17432b;background:linear-gradient(#b89a5f,#f3e5bb 50%,#b89a5f)}
.drum.mid{font-size:40px}
.nav-links{display:none;gap:4px;margin-left:8px}
.nav-links a{font:600 14px/1 var(--cond);text-transform:uppercase;letter-spacing:.12em;color:var(--fg-2);padding:10px 12px;border-radius:999px}
.nav-links a:hover{color:var(--fg);background:rgba(255,255,255,.05)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.langs{display:inline-flex;padding:3px;border-radius:999px;background:#0a110d;border:1px solid #243129}
.langs a{font:600 12px/1 var(--cond);letter-spacing:.1em;padding:8px 10px;border-radius:999px;color:var(--fg-3)}
.langs a[aria-current]{color:var(--fg);background:#22302a;box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
.nav .key{min-height:42px;padding:8px 16px;font-size:14px;border-radius:12px}
@media(min-width:900px){.nav-links{display:flex}}

/* hero */
.hero{position:relative;overflow:hidden;padding-block:48px 0;background:radial-gradient(90% 70% at 50% 110%,#1f3a2c 0,transparent 60%),radial-gradient(60% 40% at 0% 0%,#15271e 0,transparent 60%),var(--bg)}
.hero .wrap{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.hero{padding-block:72px 0}.hero .wrap{grid-template-columns:1.05fr .95fr;gap:48px}}
.drum.big{font-size:clamp(44px,8vw,80px);gap:4px;padding:6px;border-radius:14px;border-width:3px;box-shadow:0 0 0 2px #000 inset,0 30px 50px -30px #000,0 0 0 6px rgba(216,180,92,.08)}
.drum.big b{border-radius:4px}
.drum.big b i{display:block;font-style:normal;animation:roll .9s cubic-bezier(.2,.9,.3,1) both}
.drum.big b:nth-child(2) i{animation-delay:.12s}.drum.big b:nth-child(3) i{animation-delay:.24s}.drum.big b:nth-child(4) i{animation-delay:.36s}
@keyframes roll{from{transform:translateY(-1.1em);opacity:.2}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.drum.big b i{animation:none}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);padding:8px 11px;border-radius:999px;border:1px solid #2a3a30;background:rgba(255,255,255,.03)}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--led);box-shadow:0 0 8px var(--led)}
.chip.soon i{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.hero h1{font:700 clamp(42px,6.2vw,76px)/.98 var(--cond);text-transform:uppercase;letter-spacing:.005em;margin-top:22px}
.hero h1 em{font-style:normal;color:var(--led);text-shadow:0 0 18px rgba(95,242,140,.35)}
.hero .lead{margin-top:20px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .note{margin-top:18px;font-size:13px;color:var(--fg-3)}
.hero .note a{color:var(--fg-2);border-bottom:1px solid #2f3f35}
.phone-wrap{position:relative;justify-self:center;width:min(340px,86vw);margin-top:8px;max-height:560px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
@media(min-width:900px){.phone-wrap{max-height:640px}}
.phone{position:relative;border-radius:48px;background:#0b0d0c;padding:10px;border:1px solid #3a3f3a;box-shadow:0 0 0 2px #000,0 50px 80px -40px #000,0 0 0 1px rgba(255,255,255,.06) inset}
.phone img{border-radius:38px;width:100%}
.phone-wrap .stamp{position:absolute;right:-10px;bottom:90px;font-size:18px;z-index:2;background:rgba(14,23,18,.6);backdrop-filter:blur(4px)}

/* табло */
.board{margin-top:-10px;padding-block:0 0}
.board .leather{padding:22px 18px}
.board ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.board ul{grid-template-columns:repeat(4,1fr)}}
.board li{text-align:center;padding:18px 10px 16px;display:grid;gap:8px}
.board .led{font-size:52px}
.board small{font:600 13px/1.25 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}

/* платформы */
.plates{display:grid;gap:16px}
@media(min-width:900px){.plates{grid-template-columns:repeat(3,1fr)}}
.plate-card{padding:26px 22px 24px;display:grid;gap:12px;align-content:start;min-height:200px}
.plate-card .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.plate-card h3{font:700 28px/1 var(--cond);text-transform:uppercase;letter-spacing:.03em}
.plate-card p{color:var(--fg-2);font-size:15px}
.plate-card .stamp{font-size:14px;transform:rotate(-5deg)}
.plate-card a.more{margin-top:6px}
.icon-tile{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;color:var(--led);background:linear-gradient(#0a110d,#121b15);border:1px solid #2a3a30;box-shadow:0 0 0 1px #000 inset}
.icon-tile svg{width:26px;height:26px;filter:drop-shadow(0 0 6px rgba(95,242,140,.6))}
.icon-tile.amber{color:var(--amber)}.icon-tile.amber svg{filter:drop-shadow(0 0 6px rgba(255,181,74,.6))}

/* возможности */
.features{display:grid;gap:14px}
@media(min-width:700px){.features{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.features{grid-template-columns:repeat(3,1fr)}}
.feat{padding:24px 22px 22px;display:grid;gap:12px;align-content:start}
.feat h3{font:600 20px/1.2 var(--sans);letter-spacing:-.01em}
.feat p{color:var(--fg-2);font-size:15px}
.feat .cap{font:600 12px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}

/* витрина функции */
.showcase{display:grid;gap:22px;align-items:start}
@media(min-width:900px){.showcase{grid-template-columns:1.2fr .8fr}}
.fn-card{padding:22px;display:grid;gap:18px}
.fn-card .scene{position:relative;display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:start}
@media(max-width:560px){.fn-card .scene{grid-template-columns:1fr}}
.mmi{aspect-ratio:4/3;max-width:100%;border-radius:14px;background:linear-gradient(#1a1d1b,#0a0c0b);border:3px solid #3a3d3a;box-shadow:0 0 0 1px #000;padding:14px 12px;display:grid;gap:7px;align-content:center}
.mmi span{display:flex;align-items:center;gap:8px;font:500 11px/1 var(--sans);color:#d5dbd6;padding:5px 8px;border-radius:5px;background:#161a18}
.mmi span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--led)}
.mmi span:nth-child(2)::before{background:#4da3ff}.mmi span:nth-child(3)::before{background:#ff5d6b}.mmi span:nth-child(4)::before{background:#4ad0ff}
.fn-card .scene .stamp{position:absolute;left:8px;bottom:-10px;font-size:13px}
.fn-card h3{font:600 24px/1.15 var(--sans)}
.fn-card .text p{color:var(--fg-2);font-size:15px;margin-top:8px}
.tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.fn-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}
.fn-foot .state{font:700 16px/1 var(--cond);letter-spacing:.14em;color:var(--led);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.fn-foot .state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--led);box-shadow:0 0 8px var(--led)}
.toggle{display:inline-flex;align-items:center;gap:10px;height:42px;padding:3px 3px 3px 16px;border-radius:999px;background:linear-gradient(#2d6b4a,#1f5a3c);border:1px solid #3a8a5f;font:700 14px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#eafbef;box-shadow:0 2px 0 rgba(0,0,0,.4) inset}
.toggle i{width:36px;height:36px;border-radius:50%;background:linear-gradient(#d9d9d4,#9d9d97);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.fn-notes{display:grid;gap:12px;min-width:0}
.note-card{background:var(--paper);color:var(--ink);border-radius:6px;padding:18px 18px 16px 22px;font-family:var(--type);font-size:14px;line-height:1.45;box-shadow:0 14px 30px -18px #000;background-image:linear-gradient(90deg,transparent 14px,rgba(201,55,44,.5) 14px,rgba(201,55,44,.5) 15px,transparent 15px)}
.note-card b{display:block;color:var(--stamp-red);letter-spacing:.2em;font-size:12px;text-transform:uppercase;margin-bottom:10px}
.note-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
.note-card dt{color:var(--ink-2);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding-top:3px}
.note-card dd{margin:0}
.sticky{background:#f7e36a;color:#2b2612;padding:16px 18px;border-radius:3px;font:500 19px/1.25 var(--hand);transform:rotate(1.2deg);box-shadow:0 12px 24px -16px #000;position:relative}
.sticky::before{content:"";position:absolute;left:50%;top:-9px;transform:translateX(-50%) rotate(-2deg);width:70px;height:18px;background:rgba(255,255,255,.45);border:1px solid rgba(0,0,0,.08)}

/* руководство владельца (бумага) */
.paper-sec{background:var(--paper);color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E")}
.paper-sec .label,.paper-sec .lead{color:var(--ink-2)}
.manual-head{display:flex;justify-content:space-between;gap:12px;font:600 11px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid #b9ad8f;padding-bottom:10px;margin-bottom:28px}
.steps{display:grid;gap:18px}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:28px}}
.step{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.step .num{display:grid;place-items:center;width:44px;height:44px;background:#1b1b18;color:#f3eddb;font:700 24px/1 var(--cond);border-radius:4px}
.step h3{font:700 22px/1.15 var(--sans);letter-spacing:-.01em}
.step p{color:var(--ink-2);font-size:15px;margin-top:8px}
.step .fig{margin-top:14px;font:600 11px/1.3 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.step .hand{font:500 20px/1.1 var(--hand);color:#2d5fb0;transform:rotate(-3deg);display:inline-block;margin-top:8px}
.checklist{margin-top:34px;display:grid;gap:8px;max-width:520px;font-family:var(--type);font-size:14px}
.checklist div{display:flex;align-items:baseline;gap:10px}
.checklist i{font-style:normal;color:#2d5fb0;font-weight:700}
.checklist span.dots{flex:1;border-bottom:2px dotted #8d8469;transform:translateY(-4px)}
.checklist b{font-weight:700;text-align:right}

/* автомобили */
.cars{display:grid;gap:16px}
@media(min-width:900px){.cars{grid-template-columns:repeat(3,1fr)}}
.car{padding:24px 22px;display:grid;gap:14px;align-content:start}
.car .head{display:flex;align-items:center;gap:16px}
.car h3{font:700 26px/1 var(--cond);text-transform:uppercase;letter-spacing:.02em}
.car .sub{font:600 12px/1.3 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--led);margin-top:6px}
.car .sub.amber{color:var(--amber)}
.car ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--fg-2);font-size:15px}
.car li{display:flex;gap:10px}.car li::before{content:"";flex:none;width:10px;height:3px;border-radius:2px;background:var(--led);margin-top:11px;box-shadow:0 0 6px var(--led)}
.car .brands{display:flex;flex-wrap:wrap;gap:6px}
.car .brands span{font:600 12px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);padding:7px 9px;border:1px solid #3a4a40;border-radius:6px}
.disclaimer{margin-top:16px;font-size:13px;color:var(--fg-3);max-width:70ch}

/* адаптеры */
.adapters{padding:20px 18px}
.adapters .label{margin:4px 0 12px 6px}
.adapters ul{list-style:none;margin:0;padding:6px 14px;display:grid}
.adapters li{display:grid;grid-template-columns:32px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid #243027;min-width:0}
.adapters li:last-child{border-bottom:0}
.adapters li svg{width:24px;height:24px;color:var(--led);filter:drop-shadow(0 0 5px rgba(95,242,140,.6))}
.adapters b{display:block;font:600 17px/1.2 var(--sans)}
.adapters small{display:block;color:var(--fg-3);font-size:13px;margin-top:3px}
.bars{display:inline-flex;align-items:flex-end;gap:2px;height:16px}
.bars i{width:4px;background:var(--led);border-radius:1px;box-shadow:0 0 5px var(--led)}
.bars i:nth-child(1){height:5px}.bars i:nth-child(2){height:8px}.bars i:nth-child(3){height:12px}.bars i:nth-child(4){height:16px}
.bars.w2 i:nth-child(n+3){background:#26382d;box-shadow:none}

/* цены — талоны */
.tickets{display:grid;gap:18px}
@media(min-width:900px){.tickets{grid-template-columns:1fr 1fr;gap:24px}}
.ticket{position:relative;display:grid;grid-template-columns:96px 1fr;background:var(--paper-2);color:var(--ink);border-radius:10px;box-shadow:0 20px 40px -24px #000,0 0 0 1px rgba(0,0,0,.25);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E")}
.ticket.gold{background-color:#efd98f}
.ticket .stub{border-right:2px dashed #9b8f6c;display:grid;align-content:center;justify-items:center;gap:12px;padding:20px 8px}
.ticket .stub b{writing-mode:vertical-rl;transform:rotate(180deg);font:700 22px/1 var(--cond);letter-spacing:.22em;text-transform:uppercase}
.ticket .stub i{width:22px;height:22px;border-radius:50%;border:3px solid #2a2620}
.ticket.gold .stub i{background:#2a2620}
.ticket::before,.ticket::after{content:"";position:absolute;left:96px;width:22px;height:22px;border-radius:50%;background:var(--bg);transform:translateX(-50%)}
.ticket::before{top:-11px}.ticket::after{bottom:-11px}
.ticket .body{padding:22px 22px 20px;min-width:0}
.ticket h3{font:700 32px/1 var(--cond);text-transform:uppercase;letter-spacing:.02em}
.ticket .price{font-family:var(--type);font-size:13px;color:var(--ink-2);margin-top:6px}
.ticket ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:7px;font-family:var(--type);font-size:14px}
.ticket li{display:flex;gap:10px;align-items:baseline}
.ticket li::before{content:"✓";font-weight:700;color:var(--stamp-green)}
.ticket .stamp{position:absolute;right:18px;top:14px;font-size:13px}
.pay-card{margin-top:24px;max-width:640px}
.pay-card a{display:inline-block;margin-top:14px;color:var(--ink);border-bottom:1px solid currentColor}
.price-note{margin-top:18px;font-size:14px;color:var(--fg-3);max-width:70ch}

/* безопасность и приватность */
.safety{display:grid;gap:16px;margin-top:40px}
@media(min-width:900px){.safety{grid-template-columns:1fr 1fr}}
.safety .leather{padding:24px 22px;display:grid;gap:12px;align-content:start}
.safety h3{font:700 24px/1 var(--cond);text-transform:uppercase;letter-spacing:.03em}
.safety p{color:var(--fg-2);font-size:15px}
.safety ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--fg-2);font-size:15px}
.safety li{display:flex;gap:10px}.safety li::before{content:"";flex:none;width:10px;height:3px;border-radius:2px;background:var(--led);margin-top:11px;box-shadow:0 0 6px var(--led)}

/* вопросы */
.faq{max-width:760px}
.faq details{border-bottom:2px dotted #a79c7c;padding:4px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;gap:12px;align-items:baseline;padding:14px 0;font:700 19px/1.25 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{font:700 16px/1 var(--cond);color:#f3eddb;background:#1b1b18;border-radius:3px;padding:5px 7px;font-style:normal;flex:none}
.faq summary::after{content:"+";margin-left:auto;font:600 24px/1 var(--cond);color:var(--ink-2)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--ink-2);padding:0 0 16px 40px;font-size:15px;max-width:62ch}

/* финал и подвал */
.final{text-align:center;padding-block:64px 40px}
.final .leather{padding:44px 22px 40px;display:grid;justify-items:center;gap:18px}
.final h2{font:700 clamp(32px,5vw,50px)/1 var(--cond);text-transform:uppercase}
.final .lead{text-align:center}
.final .actions{justify-content:center;margin-top:8px}
footer{border-top:1px solid #1f2b24;padding:32px 0 120px;color:var(--fg-3);font-size:13px}
@media(min-width:900px){footer{padding-bottom:40px}}
footer .wrap{display:grid;gap:18px}
@media(min-width:900px){footer .wrap{grid-template-columns:auto 1fr;align-items:center}}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
footer nav a{color:var(--fg-2);border-bottom:1px solid #2a3a30}
footer .edition{font:600 11px/1.4 var(--cond);letter-spacing:.18em;text-transform:uppercase}
footer .legal-line{display:grid;gap:6px;margin-top:22px;font-size:12px;color:var(--fg-3);max-width:1160px}
@media(min-width:900px){footer .legal-line{grid-template-columns:auto 1fr;gap:24px}}

/* таб-бар на телефоне, как в приложении */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;align-items:center;justify-content:center}
.tabbar .bar{flex:1;max-width:420px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:7px;border-radius:22px}
.tabbar .bar::before{inset:5px;border-radius:17px;opacity:.6}
.tabbar .bar a{display:grid;justify-items:center;gap:4px;padding:9px 4px 7px;border-radius:14px;background:linear-gradient(#3a3f3a,#232724);border:1px solid #4a4f4a;box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 -2px 0 rgba(0,0,0,.4) inset;font:700 11px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:#e8ebe6;position:relative}
.tabbar .bar a::before{content:"";width:16px;height:3px;border-radius:2px;background:#555a55;margin-bottom:2px}
.tabbar .bar a.on::before{background:var(--led);box-shadow:0 0 8px var(--led)}
.tabbar .bar a svg{width:20px;height:20px}
.tabbar .round{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#2c9a66,#176340);border:1px solid #2f8a5c;box-shadow:0 10px 20px -10px #000,0 1px 0 rgba(255,255,255,.2) inset;color:#f3fff6}
.tabbar .round svg{width:26px;height:26px;stroke-width:2}
@media(min-width:900px){.tabbar{display:none}}
/* Страницы каталога: функция, машина, список функций (catalog_pages.py) */
.crumbs{font:600 13px/1.5 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);margin-bottom:18px}
.crumbs a{color:var(--fg);text-decoration:underline;text-decoration-color:rgba(241,239,230,.35);text-underline-offset:3px}.crumbs a:hover{color:var(--led)}
.page-hero{padding-block:40px 28px}
.page-hero h1{font:700 clamp(34px,5vw,58px)/1.04 var(--cond);text-transform:uppercase;letter-spacing:.01em;margin:10px 0 14px;text-wrap:balance}
.page-hero .tags{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 22px}
.page-hero .facts{margin:18px 0 4px;font-size:20px}.page-hero .car-meta{color:var(--fg-2);font-size:15px;margin:0 0 22px}
.tag.ok{background:rgba(95,242,140,.14);color:var(--led)}
.page-body{padding-top:8px}
.page-grid{display:grid;gap:22px}@media(min-width:900px){.page-grid{grid-template-columns:1.6fr 1fr;align-items:start}}
.prose{padding:26px 24px}.prose h2,.where h2{font:700 21px/1.2 var(--cond);text-transform:uppercase;letter-spacing:.05em;margin:0 0 10px}
.prose h2:not(:first-child){margin-top:26px}.prose p{color:var(--fg-2);margin:0}.prose ul{color:var(--fg-2);padding-left:20px;margin:10px 0 0}
.prose ul a{color:var(--led)}
.page-aside{display:grid;gap:18px}
.where{padding:22px}.where ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.where li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}.where li a{color:var(--fg)}.where li a:hover{color:var(--led)}
.st{font:600 12px/1.3 var(--cond);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.st.ready,.st.diagnostic{color:var(--led)}.st.mapped{color:var(--brass)}.st.caution{color:var(--amber)}
.legend{font-size:13px;color:var(--fg-2);margin:14px 0 0;display:grid;gap:4px}.legend b{color:var(--fg);font-weight:600}
h2.title.small{font-size:clamp(24px,3vw,34px);margin:0 0 6px}
.page-cat,.page-related{padding-block:28px}
.fn-links,.fn-list{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.fn-links a,.fn-list a{display:grid;gap:6px;height:100%;padding:14px 16px;border-radius:var(--r-3);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--fg)}
.fn-links a:hover,.fn-list a:hover{border-color:var(--led)}
.fn-links b,.fn-list b{font:600 17px/1.25 var(--sans)}.fn-links small,.fn-list small{color:var(--fg-2);font-size:14px;line-height:1.4}
.fn-list .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}.fn-list .cars{font-size:13px;color:var(--fg-2)}
.car-links{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.car-links a{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:var(--fg);font:600 14px/1.2 var(--cond);letter-spacing:.04em}
.car-links a small{color:var(--led);margin-left:4px}.car-links a:hover{border-color:var(--led)}
.car-links-row{margin-top:26px;display:grid;gap:4px}.car-links-row .car-links{margin:6px 0 10px}
.page-how h2.title{margin-top:14px}.how-list{margin:18px 0 22px;padding-left:22px;display:grid;gap:10px;max-width:70ch}

.consent{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;max-width:560px;
margin:0 auto;padding:16px 18px;border-radius:16px;background:#17221b;color:#e8ebe6;border:1px solid #2f3d34;
box-shadow:0 18px 40px -18px #000;font:400 14px/1.45 system-ui,-apple-system,sans-serif}
.consent[hidden]{display:none}
.consent p{margin:0 0 12px}.consent a{color:#9fe0b6;text-decoration:underline}
.consent .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.consent button{flex:1 1 120px;min-height:44px;padding:8px 16px;border-radius:12px;border:1px solid #4a4f4a;
background:#2a302b;color:#f3fff6;font:700 13px/1 system-ui,-apple-system,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.consent button:focus-visible{outline:2px solid #5ff28c;outline-offset:2px}
.prose.cookies p+p{margin-top:10px}.prose.cookies a{color:var(--led)}.prose.cookies code{font-family:var(--mono,monospace);font-size:.92em}