/* Kable Tech — „Włącz prąd”
   Paleta: noc (budynek bez prądu), obudowa rozdzielnicy RAL 7035, faza = limonka z logo (tylko stany „pod napięciem”),
   taśma = etykieta z drukarki P-touch, którą elektryk opisuje obwody. */
:root{
  --noc:#0A0F16;
  --noc-2:#121A25;
  --mgla:#C3CAD3;
  --biel:#F3F1EA;
  --faza:#A6C83A;
  --faza-2:#D4EC7E;
  --faza-glow:rgba(166,200,58,.45);
  --obudowa:#D5D7D1;
  --obudowa-2:#C6C9C1;
  --grafit:#1B2027;
  --tasma:#F7F6F0;
  --f-disp:'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --f-body:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --top-h:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 12px)}
body{margin:0;background:var(--noc);color:var(--mgla);font:400 17px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;color:var(--biel);font-family:var(--f-disp);font-weight:800;line-height:.95;letter-spacing:.005em}
p{margin:0}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--faza);outline-offset:3px;border-radius:4px}
.skip{position:fixed;left:12px;top:-60px;z-index:50;background:var(--tasma);color:#111;padding:10px 14px;font:600 14px var(--f-mono);border-radius:4px;transition:top .2s}
.skip:focus{top:12px}

/* ---------- etykieta P-touch ---------- */
.tape{display:inline-block;background:linear-gradient(180deg,#fff 0%,var(--tasma) 55%,#EBEAE2 100%);color:#121212;
  font:600 12px/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;padding:7px 10px 6px;border-radius:2px;
  box-shadow:0 1px 0 rgba(0,0,0,.35),0 8px 18px -8px rgba(0,0,0,.5);transform:rotate(-.8deg)}

/* ---------- górny pasek ---------- */
.top{position:fixed;inset:0 0 auto 0;height:var(--top-h);z-index:30;display:flex;align-items:center;gap:24px;padding:0 clamp(12px,3vw,32px);
  background:linear-gradient(180deg,rgba(10,15,22,.85),rgba(10,15,22,0));pointer-events:none}
.top>*{pointer-events:auto}
.top{transition:background .3s}
.top.solid{background:rgba(10,15,22,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(243,241,234,.06)}
.plate{display:block;background:linear-gradient(180deg,#FBFAF6,#E7E6DF);padding:7px 20px;border-radius:5px;position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 6px 18px -6px rgba(0,0,0,.6)}
.plate::before,.plate::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#8d9097 70%);box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.plate::before{left:6px}.plate::after{right:6px}
.plate img{width:148px;height:auto}
.nav{display:flex;gap:22px;margin-left:auto;font:500 15px var(--f-body)}
.nav a{text-decoration:none;color:var(--biel);opacity:.8}
.nav a:hover{opacity:1;color:var(--faza-2)}
.top-cta{display:flex;align-items:center;gap:10px}
.phone{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--biel);font:600 16px var(--f-mono);letter-spacing:.02em;
  padding:9px 14px;border-radius:10px;background:rgba(18,26,37,.7);border:1px solid rgba(166,200,58,.45);backdrop-filter:blur(6px)}
.phone svg{width:16px;height:16px;fill:var(--faza)}
.phone:hover{border-color:var(--faza);box-shadow:0 0 22px -4px var(--faza-glow)}
.wa,.sound{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:rgba(18,26,37,.7);border:1px solid rgba(243,241,234,.18);color:var(--biel);cursor:pointer;padding:0}
.wa svg{width:20px;height:20px;fill:currentColor}
.sound svg{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:0}
.sound svg .w{fill:none;stroke-width:1.8;stroke-linecap:round}
.sound[aria-pressed="false"] svg .w{opacity:.15}
.wa:hover,.sound:hover{border-color:var(--faza)}

/* ---------- opowieść ---------- */
.story{position:relative;height:1000vh;background:var(--noc)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--noc)}
.canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scrim{position:absolute;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.scrim-l{inset:0 auto 0 0;width:58%;background:linear-gradient(90deg,rgba(8,12,18,.92) 0%,rgba(8,12,18,.72) 45%,rgba(8,12,18,0) 100%)}
.scrim-r{inset:0 0 0 auto;width:58%;background:linear-gradient(270deg,rgba(8,12,18,.92) 0%,rgba(8,12,18,.72) 45%,rgba(8,12,18,0) 100%)}
.scrim-b{inset:auto 0 0 0;height:62%;background:linear-gradient(0deg,rgba(8,12,18,.95) 0%,rgba(8,12,18,.78) 45%,rgba(8,12,18,0) 100%)}
.scrim-t{inset:0 0 auto 0;height:62%;background:linear-gradient(180deg,rgba(8,12,18,.95) 0%,rgba(8,12,18,.78) 50%,rgba(8,12,18,0) 100%)}
.stage[data-side="full"] .scrim-l{opacity:1;width:70%}
.stage[data-side="left"] .scrim-l,.stage[data-side="right"] .scrim-r,.stage[data-side="bottom"] .scrim-b,.stage[data-side="top"] .scrim-t{opacity:1}

.panel{position:absolute;z-index:3;top:50%;width:min(470px,36vw);opacity:0;visibility:hidden;will-change:opacity,transform;
  transform:translate3d(0,calc(-50% + var(--y,18px)),0)}
.panel{right:clamp(20px,5vw,80px)}
.panel[data-d="left"]{right:auto;left:clamp(20px,5vw,80px)}
.panel.on{visibility:visible}
.panel h2{font-size:clamp(2.4rem,4.4vw,4.3rem);margin:18px 0 14px;text-wrap:balance}
.panel p{font-size:clamp(16px,1.25vw,18px);color:var(--mgla);max-width:42ch}
.panel .ref{margin-top:18px;padding:14px 16px;border-left:3px solid var(--faza);background:rgba(166,200,58,.08);font-size:15px}
.panel .ref strong{color:var(--biel)}
.chips{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font:500 13px/1 var(--f-mono);color:var(--biel);padding:8px 10px;border:1px solid rgba(243,241,234,.22);border-radius:6px;background:rgba(10,15,22,.4)}

/* scena 0 */
.panel-hero{left:clamp(20px,6vw,96px);right:auto;width:min(720px,58vw);top:52%}
.h1-big{display:block;margin-top:22px;font-size:clamp(3.4rem,8.6vw,8.6rem);line-height:.86;text-transform:uppercase;font-weight:900;letter-spacing:-.005em;position:relative}
.h1-off,.h1-on{display:block;transition:opacity .35s,filter .35s}
.h1-on{position:absolute;inset:0;opacity:0}
.h1-on em{font-style:normal;color:var(--faza);text-shadow:0 0 28px var(--faza-glow),0 0 4px rgba(212,236,126,.9)}
.powered .h1-off{opacity:0}
.powered .h1-on{opacity:1}
.panel-hero .lead{margin-top:22px;font-size:clamp(17px,1.5vw,20px);max-width:40ch;color:var(--mgla)}
.hero-call{margin-top:18px;font:500 14px var(--f-mono);color:#8e98a5}
.hero-call a{color:var(--biel);text-decoration-color:var(--faza);text-underline-offset:4px}

/* łącznik ścienny z podświetleniem orientacyjnym */
.switch-wrap{margin-top:30px;display:flex;align-items:center;gap:22px}
.switch{--r:0deg;position:relative;width:118px;height:118px;border-radius:16px;border:0;cursor:pointer;padding:0;
  background:linear-gradient(160deg,#F7F6F1 0%,#DEDCD5 100%);
  box-shadow:0 1px 0 #fff inset,0 -2px 0 rgba(0,0,0,.08) inset,0 22px 40px -12px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.25);
  perspective:320px;transition:transform .15s var(--ease)}
.switch:active{transform:scale(.97)}
.rocker{position:absolute;left:19px;right:19px;top:17px;bottom:17px;border-radius:9px;transform-style:preserve-3d;
  transform:rotateX(14deg);transition:transform .12s cubic-bezier(.3,1.6,.5,1);
  background:linear-gradient(180deg,#FDFCF8 0%,#E6E4DD 48%,#D5D3CB 52%,#EDEBE5 100%);
  box-shadow:0 1px 0 #fff inset,0 10px 14px -8px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.12)}
.switch[aria-pressed="true"] .rocker{transform:rotateX(-14deg);background:linear-gradient(0deg,#FDFCF8 0%,#E6E4DD 48%,#D5D3CB 52%,#EDEBE5 100%)}
.locator{position:absolute;left:50%;bottom:12px;width:18px;height:4px;margin-left:-9px;border-radius:2px;background:#e9a33a;
  box-shadow:0 0 8px rgba(233,163,58,.9);animation:loc 2.4s ease-in-out infinite}
.switch[aria-pressed="true"] .locator{animation:none;background:#bdbab2;box-shadow:none}
@keyframes loc{50%{opacity:.45}}
.switch-label{font-size:14px}
.cue{position:absolute;left:0;bottom:-18vh;display:flex;align-items:center;gap:12px;font:500 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#8e98a5;opacity:0;transition:opacity .6s .4s}
.cue span{width:2px;height:46px;background:linear-gradient(180deg,var(--faza),transparent);animation:cue 1.6s ease-in infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}60%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(1);opacity:0}}
.powered .cue{opacity:1}

.panel-final{left:50%;right:auto;top:auto;bottom:clamp(96px,11vh,130px);width:min(760px,90vw);text-align:center;transform:translate3d(-50%,var(--y,18px),0)}
.panel-final p{margin:0 auto}
.panel-final h2{font-size:clamp(2.8rem,6vw,5.6rem)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.panel-final .cta-row{justify-content:center}

/* przyciski */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:12px;text-decoration:none;cursor:pointer;
  font:600 16px var(--f-body);border:1px solid transparent;transition:box-shadow .2s,transform .15s,background .2s}
.btn:active{transform:translateY(1px)}
.btn-live{background:var(--faza);color:#0C1206;box-shadow:0 0 0 0 var(--faza-glow)}
.btn-live:hover{box-shadow:0 0 0 4px rgba(166,200,58,.22),0 0 36px -2px var(--faza-glow)}
.btn-ghost{background:rgba(10,15,22,.35);color:var(--biel);border-color:rgba(243,241,234,.3)}
.btn-ghost:hover{border-color:var(--biel)}

/* szyna DIN z wyłącznikami (postęp opowieści) */
.rail{position:absolute;z-index:4;left:50%;bottom:18px;transform:translateX(-50%);transition:opacity .5s}
.rail ol{list-style:none;margin:0;padding:10px 14px 8px;display:flex;gap:6px;position:relative;
  background:linear-gradient(180deg,rgba(14,20,29,.82),rgba(14,20,29,.66));border:1px solid rgba(243,241,234,.08);border-radius:10px;backdrop-filter:blur(8px)}
.rail ol::before{content:"";position:absolute;left:8px;right:8px;top:32px;height:12px;border-radius:1px;
  background:linear-gradient(180deg,#8c9299 0%,#d7dbdf 30%,#9aa0a6 55%,#6f757c 100%);opacity:.75}
.rail li{position:relative}
.rail.done{opacity:0;pointer-events:none}
.mcb{--h:58px;position:relative;display:flex;flex-direction:column;align-items:center;width:52px;padding:0;border:0;background:none;cursor:pointer;color:inherit}
.mcb>.lever{position:relative;display:block;width:30px;height:var(--h);border-radius:3px;
  background:linear-gradient(90deg,#DAD9D2,#F6F5F0 40%,#E3E2DB);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 6px 10px -6px rgba(0,0,0,.6)}
.mcb>.lever::before{content:"";position:absolute;left:8px;right:8px;top:18px;height:22px;border-radius:2px;background:#2A3038;box-shadow:inset 0 2px 3px rgba(0,0,0,.5)}
.mcb>.lever::after{content:"O";position:absolute;left:10px;right:10px;top:26px;height:12px;border-radius:2px;background:linear-gradient(180deg,#4a5059,#343a42);
  color:#dfe3e8;font:700 8px/12px var(--f-mono);text-align:center;transition:top .18s cubic-bezier(.3,1.6,.5,1),background .2s}
.mcb.on>.lever::after{content:"I";top:20px;background:linear-gradient(180deg,#b9dc4e,var(--faza));color:#10170a;box-shadow:0 0 10px var(--faza-glow)}
.mcb .t{margin-top:5px;font:600 10px/1 var(--f-mono);color:#9aa4b0}
.mcb .tape{margin-top:6px;font-size:9px;padding:4px 5px 3px;transform:rotate(-1.5deg)}
.mcb.cur .t{color:var(--faza-2)}
.mcb:hover>.lever{box-shadow:0 0 0 1px var(--faza),0 6px 10px -6px rgba(0,0,0,.6)}

/* ---------- sekcje jasne: obudowa rozdzielnicy ---------- */
.wrap{width:min(1180px,100% - 40px);margin:0 auto}
.sheet-sec,.steps-sec,.ref-sec{background:var(--obudowa);color:var(--grafit);position:relative}
.sheet-sec{padding:clamp(80px,11vw,140px) 0 clamp(56px,7vw,90px);
  background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.018) 3px 4px);background-color:var(--obudowa)}
.sheet-sec h2,.steps-sec h2,.ref-sec h2{color:var(--grafit)}
.sec-head{display:grid;gap:16px;margin-bottom:42px;max-width:760px}
.sec-head .tape{justify-self:start}
.sec-head h2{font-size:clamp(2.8rem,6vw,5.4rem)}
.sec-head p{font-size:18px;color:#4a515b}

.legend{position:relative;background:#FBFAF5;border:1px solid #BFC2BA;border-radius:4px;box-shadow:0 30px 60px -30px rgba(20,24,30,.45),0 2px 0 rgba(255,255,255,.8) inset;
  transform:rotate(-.35deg);overflow:hidden}
.legend::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 70%,rgba(255,255,255,.25) 100%)}
.legend-head{display:flex;justify-content:space-between;padding:14px 22px;border-bottom:2px solid var(--grafit);font:600 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.legend table{width:100%;border-collapse:collapse}
.legend th{text-align:left;font:600 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#6b727c;padding:12px 22px;border-bottom:1px solid #D9DBD4}
.legend td{padding:16px 22px;border-bottom:1px solid #E3E4DE;vertical-align:top}
.legend tr:last-child td{border-bottom:0}
.legend td:first-child{font:600 15px var(--f-mono);width:84px;color:var(--grafit)}
.legend td:first-child::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--faza);margin-right:10px;box-shadow:0 0 0 2px rgba(166,200,58,.25);vertical-align:1px}
.legend td strong{display:block;font:700 19px/1.25 var(--f-body);color:var(--grafit)}
.legend td span{display:block;color:#5a616b;font-size:15.5px;margin-top:2px}
.legend td:last-child{font:500 13px/1.5 var(--f-mono);color:#5a616b;width:30%}
.legend tbody tr{transition:background .15s}
.legend tbody tr:hover{background:#F3F5E9}

.steps-sec{padding:clamp(56px,7vw,90px) 0 clamp(70px,9vw,120px);border-top:1px solid var(--obudowa-2)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.steps::before{content:"";position:absolute;left:22px;right:22px;top:21px;height:3px;background:linear-gradient(90deg,var(--faza),#8aa82e);border-radius:2px}
.steps li{position:relative}
.steps .n{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#D9DAD3 70%);
  box-shadow:0 0 0 2px var(--grafit),0 8px 14px -8px rgba(0,0,0,.6);font:700 16px var(--f-mono);color:var(--grafit)}
.steps h3{color:var(--grafit);font-size:26px;margin:20px 0 8px;line-height:1.02}
.steps p{color:#4a515b;font-size:16px}

.ref-sec{padding:clamp(70px,9vw,120px) 0;background:linear-gradient(180deg,var(--obudowa),#CACDC6)}
.ref-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,6vw,90px);align-items:center}
.ref-grid h2{font-size:clamp(2.6rem,5vw,4.6rem);margin:18px 0 18px}
.ref-grid p{font-size:18px;color:#3d434c;max-width:48ch}
.din{position:relative;padding:34px 26px 26px;background:linear-gradient(180deg,#E3E4DF,#D2D4CD);border-radius:14px;box-shadow:0 1px 0 #fff inset,0 30px 50px -30px rgba(0,0,0,.5),0 0 0 1px #B9BCB4}
.din-rail{position:absolute;left:16px;right:16px;top:64px;height:14px;background:linear-gradient(180deg,#8c9299 0%,#e2e5e8 30%,#9aa0a6 55%,#6f757c 100%);border-radius:1px}
.din ul{list-style:none;margin:0;padding:0;display:flex;justify-content:space-around;gap:10px;position:relative}
.din li{display:flex;flex-direction:column;align-items:center;gap:12px}
.din .mcb{--h:74px;width:auto;cursor:default}
.din .mcb>.lever{width:40px}
.din .mcb>.lever::before{top:22px;height:30px;left:10px;right:10px}
.din .mcb.on>.lever::after{top:24px;left:12px;right:12px;height:14px;line-height:14px}
.din .mcb .t{color:#59606a}
.din .tape{font-size:11px}

/* ---------- kontakt ---------- */
.contact-sec{padding:clamp(80px,10vw,140px) 0;background:radial-gradient(1200px 500px at 15% 0%,rgba(166,200,58,.10),transparent 60%),var(--noc)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:start}
.contact-sec h2{font-size:clamp(2.6rem,5vw,4.6rem);margin:18px 0 22px}
.big-phone{display:inline-block;font:900 clamp(3.4rem,8vw,7rem)/.9 var(--f-disp);color:var(--faza);text-decoration:none;text-shadow:0 0 40px rgba(166,200,58,.35);letter-spacing:.01em}
.big-phone:hover{color:var(--faza-2)}
.contact-mail{margin-top:14px;font:500 18px var(--f-mono)}
.contact-mail a{color:var(--biel);text-decoration-color:rgba(166,200,58,.6);text-underline-offset:5px}
.muted{color:#8e98a5;margin-top:14px}
.ask{display:grid;gap:16px;background:var(--noc-2);border:1px solid rgba(243,241,234,.1);border-radius:16px;padding:clamp(20px,3vw,32px)}
.ask label{display:grid;gap:8px;font:600 13px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#9aa4b0}
.ask textarea,.ask input{width:100%;font:400 17px/1.45 var(--f-body);color:var(--biel);background:#0C121A;border:1px solid rgba(243,241,234,.16);border-radius:10px;padding:12px 14px;resize:vertical;text-transform:none;letter-spacing:0}
.ask textarea:focus,.ask input:focus{outline:none;border-color:var(--faza);box-shadow:0 0 0 3px rgba(166,200,58,.2)}
.ask ::placeholder{color:#5d6672}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-note{font-size:14px;color:#8e98a5}
.form-err{color:#ffb4a8;font-size:15px}
.ask .cta-row{margin-top:4px}

.foot{background:#070A0F;color:#8e98a5;padding:40px 0 calc(40px + env(safe-area-inset-bottom));font-size:14px}
.foot-grid{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:20px}
.foot strong{color:var(--biel)}
.foot a{color:#c3cad3;text-decoration:none}
.foot a:hover{color:var(--faza-2)}
.foot .muted{margin:0}

.dock{display:none}

/* ---------- telefon ---------- */
@media (max-width:860px){
  :root{--top-h:58px}
  body{font-size:16px}
  .nav,.phone{display:none}
  .plate{padding:6px 16px}
  .plate img{width:120px}
  .top-cta{margin-left:auto}
  .story{height:900vh}
  .panel,.panel[data-d="left"]{left:14px;right:14px;width:auto;top:auto;bottom:calc(78px + env(safe-area-inset-bottom));transform:translate3d(0,var(--y,18px),0)}
  .panel[data-m="top"]{top:calc(var(--top-h) + 58px);bottom:auto}
  .panel h2{font-size:clamp(2.1rem,9vw,2.8rem);margin:12px 0 8px}
  .panel p{font-size:15px}
  .panel .ref{font-size:13.5px;padding:10px 12px;margin-top:12px}
  .chips{margin-top:12px;gap:6px}
  .chips li{font-size:11.5px;padding:6px 8px}
  .panel-hero{top:calc(var(--top-h) + 34px);bottom:auto;width:auto;transform:translate3d(0,var(--y,0px),0)}
  .h1-big{font-size:clamp(3rem,15vw,4.6rem);margin-top:16px}
  .panel-hero .lead{font-size:16px;margin-top:14px}
  .switch-wrap{margin-top:22px}
  .switch{width:96px;height:96px}
  .rocker{left:15px;right:15px;top:14px;bottom:14px}
  .cue{bottom:-10vh}
  .hero-call{font-size:13px}
  .panel-final{left:14px;right:14px;transform:translate3d(0,var(--y,18px),0);bottom:calc(84px + env(safe-area-inset-bottom));text-align:left}
  .panel-final h2{font-size:clamp(2.6rem,12vw,3.4rem)}
  .panel-final .cta-row{display:none}
  .rail{left:auto;right:10px;top:calc(var(--top-h) + 6px);bottom:auto;transform:scale(.62);transform-origin:top right}
  .rail .tape{display:none}
  .stage[data-side="full"] .scrim-l{width:100%;background:linear-gradient(180deg,rgba(8,12,18,.9) 0%,rgba(8,12,18,.75) 55%,rgba(8,12,18,.2) 100%)}
  .scrim-l,.scrim-r{opacity:0!important}
  .stage[data-m="top"] .scrim-t,.stage[data-m="bottom"] .scrim-b{opacity:1}
  .stage[data-side="left"] .scrim-b,.stage[data-side="right"] .scrim-b{opacity:0}
  .stage[data-m="bottom"] .scrim-b{opacity:1}
  .steps{grid-template-columns:1fr 1fr;gap:28px 20px}
  .steps::before{display:none}
  .ref-grid,.contact-grid{grid-template-columns:1fr}
  .legend{transform:none}
  .legend thead{display:none}
  .legend tr{display:grid;grid-template-columns:52px 1fr;padding:14px 16px;border-bottom:1px solid #E3E4DE}
  .legend td{padding:0;border:0}
  .legend td:first-child{width:auto}
  .legend td:first-child::before{display:none}
  .legend td:last-child{grid-column:2;width:auto;margin-top:6px;font-size:12px}
  .legend-head{padding:12px 16px;font-size:11px}
  .row2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .dock{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;position:fixed;z-index:40;left:0;right:0;bottom:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(0deg,rgba(10,15,22,.96),rgba(10,15,22,.85));border-top:1px solid rgba(243,241,234,.08);backdrop-filter:blur(8px)}
  .dock .btn{min-height:50px}
  .foot{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
}
@media (max-width:420px){.din ul{gap:4px}.din .tape{font-size:9.5px;padding:5px 6px 4px}.din{padding:30px 10px 22px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01s!important}
}