/* MatVolt.innovation (Skrzeszowice) — wersja profesjonalna p1 (13.11); p2: motyw ciemny (domyślny) i jasny, 3 kolory (bursztyn, błękit, zieleń), animacje „włączania prądu”.
   Ciemny grafit, jeden akcent: sygnałowy bursztyn (prąd), chłodny łupkowy błękit pomocniczo.
   Manrope + JetBrains Mono w etykietach. Hero: panel SmartHome jak aplikacja sterująca, rysunek domu liniami. */
:root{
  --bg:#111418;--bg2:#15191e;--panel:#1a1f25;--panel2:#20262d;
  --line:#2b323a;--line2:#232930;
  --tx:#e8ebee;--tx2:#c4cbd2;--mut:#98a2ad;--mut2:#6e7884;
  --acc:#e3a72f;--accD:#c48e1d;--accT:rgba(227,167,47,.14);
  --sl:#8aa4c0;--slT:rgba(138,164,192,.16);--sg:#7fae95;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --e:cubic-bezier(.2,.8,.2,1);--hh:72px;--r:8px;
  --sh:0 1px 0 rgba(255,255,255,.04) inset,0 24px 48px -28px rgba(0,0,0,.8);
  --hi:#fff;--accTx:#e3a72f;--onAcc:#15120a;
  --well:#15191e;--well2:#14181c;--view1:#161a1f;--view2:#1b1a17;--view3:#121519;--glass:#1f252c;--draw:#8792a0;--dim:#4a535e;--dim2:#5a636e;
  --b1:#3a434d;--b2:#3f4852;--plan:#cfd6dd;--bars:#aab3bd;--foot:#0b0d10;--bgEnd:#0d1013;--phB:#191d22;
  --topbg:rgba(17,20,24,.82);--topbg2:rgba(17,20,24,.94);--gridc:rgba(255,255,255,.035);
  --btnL:#eef1f4;--onBtnL:#111418;--btnLH:#fff;
}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 12px);color-scheme:dark}
[data-theme="light"]{color-scheme:light}
body{background:var(--bg);color:var(--tx);font:400 17px/1.65 var(--sans);overflow-x:hidden}
.wrap{width:min(1200px,100% - 48px);margin:0 auto}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
a{color:inherit}
::selection{background:var(--acc);color:#111}

.kick{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accTx)}
.kick::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px var(--accT)}
.h2{font:700 clamp(30px,3.5vw,44px)/1.12 var(--sans);letter-spacing:-.03em;text-wrap:balance;color:var(--hi)}
.lead{font-size:clamp(16.5px,1.35vw,18.5px);color:var(--mut);max-width:62ch;margin:16px 0 0}
.sec{padding:clamp(76px,9vw,124px) 0;position:relative;overflow-x:clip}
.sec--alt{background:var(--bg2);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.sec__head{margin-bottom:clamp(32px,4.5vw,56px)}

/* ---------- przyciski ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 20px;border:1px solid transparent;border-radius:var(--r);font:700 15px/1.15 var(--sans);text-decoration:none;cursor:pointer;text-align:center;transition:background .25s var(--e),border-color .25s var(--e),color .25s var(--e),box-shadow .3s var(--e),transform .3s var(--e)}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.985);transition-duration:.08s}
.btn .arr,.arr{display:inline-block;transition:transform .3s var(--e)}
.btn:hover .arr{transform:translateX(4px)}
.btn--lg{min-height:54px;padding:0 24px;font-size:16px}
.btn--acc{background:var(--acc);color:#15120a}
.btn--acc:hover{background:#efb441;box-shadow:0 12px 28px -14px rgba(227,167,47,.75)}
.btn--light{background:var(--btnL);color:var(--onBtnL)}
.btn--light:hover{background:var(--btnLH)}
.btn--line{background:transparent;border-color:var(--b1);color:var(--tx)}
.btn--line:hover{border-color:var(--tx2);background:rgba(255,255,255,.03)}
.btn--ghost{background:none;color:var(--mut);text-decoration:underline;text-underline-offset:3px}
.btn--ghost:hover{color:var(--hi);transform:none}

/* ---------- intro (≤1,2 s) ---------- */
.intro{display:none}
.js .intro{display:grid;place-items:center;position:fixed;inset:0;z-index:200;background:var(--bg);cursor:pointer;transition:opacity .35s var(--e),visibility 0s linear .35s}
.intro.out{opacity:0;visibility:hidden}
.intro__box{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:0 20px}
.intro__wire{position:relative;display:block;width:min(260px,62vw);height:1px;background:var(--line)}
.intro__wire i{position:absolute;inset:0;background:var(--acc);transform:scaleX(0);transform-origin:left;animation:iLine .55s var(--e) .05s forwards}
.intro__wire i::after{content:"";position:absolute;right:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px var(--acc)}
.intro__name{font:700 clamp(34px,6vw,54px)/1 var(--sans);letter-spacing:-.035em;color:var(--hi);clip-path:inset(0 0 100% 0);transform:translateY(12px);animation:iRev .5s var(--e) .3s forwards}
.intro__name b{color:var(--accTx);font-weight:800}
.intro__name em{font-style:normal;font-weight:500;color:var(--mut)}
.intro__sub{font:500 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);opacity:0;animation:iFade .4s var(--e) .55s forwards}
.intro__skip{position:absolute;right:16px;top:14px;margin:0;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut2)}
@keyframes iLine{to{transform:scaleX(1)}}
@keyframes iRev{to{clip-path:inset(0 0 -10% 0);transform:none}}
@keyframes iFade{to{opacity:1}}

.prog{position:fixed;left:0;right:0;top:0;height:2px;z-index:120;pointer-events:none}
.prog i{display:block;height:100%;background:var(--acc);transform:scaleX(0);transform-origin:left;box-shadow:0 0 8px rgba(227,167,47,.6)}

/* ---------- nagłówek ---------- */
.top{position:sticky;top:0;z-index:100;border-bottom:1px solid transparent;transition:border-color .3s var(--e),background .3s var(--e)}
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--topbg);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);transition:background .3s var(--e)}
.top.scrolled::before{background:var(--topbg2)}
.top.scrolled{border-bottom-color:var(--line2)}
.top__in{display:flex;align-items:center;gap:28px;height:var(--hh)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.logo__mk svg{display:block;width:38px;height:38px}
.logo__mk rect{fill:none;stroke:var(--b1);stroke-width:1.6}
.logo__mk path{fill:var(--acc)}
.logo__t{display:flex;flex-wrap:wrap;align-items:baseline;font:700 19px/1.05 var(--sans);letter-spacing:-.02em;color:var(--hi);max-width:220px}
.logo__t b{font-weight:800;color:var(--hi)}
.logo__t em{font-style:normal;font-weight:500;color:var(--mut)}
.logo__t small{flex-basis:100%;font:500 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut2);margin-top:5px}
.menu{display:flex;gap:28px;margin-left:auto}
.menu a{position:relative;font-weight:600;font-size:14.5px;text-decoration:none;color:var(--tx2);padding:6px 0;transition:color .25s}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--e)}
.menu a:hover{color:var(--hi)}
.menu a:hover::after{transform:scaleX(1);transform-origin:left}
.top__cta{flex:none}
.navbtn{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);cursor:pointer;padding:0 11px}
.navbtn i{display:block;height:2px;background:var(--hi);border-radius:1px;transition:transform .3s var(--e),opacity .2s}
.navbtn[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navbtn[aria-expanded="true"] i:nth-child(2){opacity:0}
.navbtn[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{display:none}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(56px,7vw,100px) 0 clamp(72px,8vw,112px);overflow:hidden;border-bottom:1px solid var(--line2)}
.hero__grid{position:absolute;inset:0;background-image:linear-gradient(var(--gridc) 1px,transparent 1px),linear-gradient(90deg,var(--gridc) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 30%,transparent 80%);pointer-events:none}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center}
.hero__h{font:800 clamp(38px,4.8vw,64px)/1.04 var(--sans);letter-spacing:-.04em;margin:0;color:var(--hi);text-wrap:balance}
.hero__lead{font-size:clamp(17px,1.4vw,18.5px);color:var(--mut);margin:24px 0 0;max-width:56ch}
.hero__lead b{color:var(--tx);font-weight:700}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero__spec{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.hero__spec li{font-weight:600;font-size:15px;color:var(--tx2)}
.hero__spec span{font:500 11px var(--mono);color:var(--accTx);margin-right:8px}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.w>span{display:inline-block;transform:translateY(108%);transition:transform .8s var(--e)}
.split-in .w>span{transform:none}

/* panel SmartHome */
.smart{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);overflow:hidden;will-change:transform}
.smart__bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line2);font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.smart__dot{width:7px;height:7px;border-radius:50%;background:var(--sg);box-shadow:0 0 0 3px rgba(127,174,149,.2);animation:led 2.4s ease-in-out infinite}
@keyframes led{50%{opacity:.4}}
.smart__clock{margin-left:auto;font-weight:500;color:var(--tx)}
.smart__view{position:relative;background:var(--view1);transition:background .8s var(--e);border-bottom:1px solid var(--line2)}
.smart[data-scene="wieczor"] .smart__view{background:var(--view2)}
.smart[data-scene="noc"] .smart__view{background:var(--view3)}
.smart__house{display:block;width:100%;height:auto;padding:14px 18px 0}
.sh-ln,.sh-gr{fill:none;stroke:var(--draw);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.sh-gr{stroke:var(--dim)}
.sh-chim{fill:none;stroke:var(--draw);stroke-width:1.4}
.sh-frame{fill:none;stroke:var(--draw);stroke-width:1.4}
.sh-glass{fill:var(--glass);transition:fill .7s var(--e)}
.sh-blind path{stroke:var(--mut2);stroke-width:3}
.sh-blind{transform-box:fill-box;transform-origin:top;transform:scaleY(0);transition:transform .9s var(--e)}
.sh-lamp{fill:var(--line);stroke:var(--draw);stroke-width:1.2;transition:fill .5s}
.sh-shield path:first-child{fill:none;stroke:var(--dim2);stroke-width:1.6;transition:stroke .4s}
.sh-tick{fill:none;stroke:var(--sg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .5s var(--e) .2s}
.sh-heat path{fill:none;stroke:var(--draw);stroke-width:1.6;stroke-linecap:round}
.sh-heat text{font:500 13px var(--mono);fill:var(--tx2)}
.smart[data-scene="wyjscie"] .sh-blind,.smart[data-scene="noc"] .sh-blind{transform:scaleY(1)}
.smart[data-scene="wieczor"] .sh-blind{transform:scaleY(.42)}
.smart[data-scene="wieczor"] .sh-glass{fill:rgba(227,167,47,.55)}
.smart[data-scene="noc"] .sh-win[data-w="3"] .sh-glass{fill:rgba(227,167,47,.25)}
.smart[data-scene="wieczor"] .sh-lamp,.smart[data-scene="noc"] .sh-lamp{fill:var(--acc)}
.smart[data-scene="wyjscie"] .sh-shield path:first-child,.smart[data-scene="noc"] .sh-shield path:first-child{stroke:var(--sg)}
.smart[data-scene="wyjscie"] .sh-tick,.smart[data-scene="noc"] .sh-tick{stroke-dashoffset:0}
.smart__st{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line2)}
.smart__st li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 8px;padding:14px 16px}
.smart__st li+li{border-left:1px solid var(--line2)}
.smart__st i{width:6px;height:6px;border-radius:50%;background:var(--dim);transition:background .4s,box-shadow .4s}
.smart__st li.on i{background:var(--acc);box-shadow:0 0 0 3px var(--accT)}
.smart__st span{font:500 10.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mut2)}
.smart__st b{grid-column:1/-1;font-weight:700;font-size:14.5px;color:var(--hi);white-space:nowrap}
.smart__st li.flash b{animation:vIn .5s var(--e)}
@keyframes vIn{from{opacity:0;transform:translateY(6px)}}
.smart__scenes{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:14px 16px 0;padding:4px;border-radius:10px;background:var(--well2);border:1px solid var(--line2)}
.smart__pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/4);border-radius:7px;background:var(--acc);transition:transform .5s var(--e)}
.smart__scenes button{position:relative;z-index:1;min-height:42px;border:0;background:none;color:var(--tx2);font:700 14px var(--sans);cursor:pointer;border-radius:7px;transition:color .35s var(--e)}
.smart__scenes button:hover{color:var(--hi)}
.smart__scenes button[aria-pressed="true"]{color:#15120a}
.smart__cap{margin:0;padding:12px 18px 16px;font-size:13.5px;color:var(--mut)}

/* ---------- pojawianie ---------- */
.js [data-r]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--e),transform .7s var(--e)}
.js [data-r].in{opacity:1;transform:none}

/* ---------- usługi ---------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.svc__c{position:relative;background:var(--panel);padding:32px 30px 34px;transition:background .35s var(--e)}
.svc__c::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e)}
.svc__c:hover{background:var(--panel2)}
.svc__c:hover::after{transform:scaleX(1)}
.svc__ic{width:44px;height:44px;fill:none;stroke:var(--tx);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s var(--e),transform .5s var(--e)}
.svc__c:hover .svc__ic{stroke:var(--acc);transform:translateY(-2px)}
.svc__n{font:500 12px var(--mono);color:var(--mut2);margin:26px 0 8px}
.svc__c h3{font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--hi)}
.svc__c>p:not(.svc__n){margin-top:10px;color:var(--mut);font-size:15.5px}
.svc__l{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:6px}
.svc__l li{position:relative;padding-left:18px;font-size:14.5px;color:var(--tx2)}
.svc__l li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--acc)}
.svc__cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;margin-top:20px;padding:20px 26px;border:1px solid var(--line);border-radius:12px;background:var(--panel);text-decoration:none;transition:border-color .3s var(--e),background .3s var(--e)}
.svc__cta:hover{border-color:var(--dim);background:var(--panel2)}
.svc__cta:hover .arr{transform:translateX(5px)}
.svc__cta-k{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accTx)}
.svc__cta b{color:var(--accTx)}

/* ---------- planer ---------- */
.pl{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start}
.pl__plan{padding:18px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.pl__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.pl__hint{margin:0;display:flex;align-items:center;gap:10px;font:500 12.5px/1.3 var(--mono);color:var(--tx2)}
.pl__dot{width:7px;height:7px;border-radius:50%;background:var(--acc);animation:led 1.8s ease-in-out infinite}
.pl__tools{display:flex;gap:8px}
.mini{min-height:38px;padding:0 14px;border-radius:7px;border:1px solid var(--b1);background:var(--panel2);color:var(--tx);font:600 13.5px var(--sans);cursor:pointer;transition:border-color .25s,background .25s}
.mini:hover{border-color:var(--tx2)}
.mini--ghost{background:none;border-color:transparent;color:var(--mut);text-decoration:underline;text-underline-offset:3px}
.plan{display:block;width:100%;height:auto;background:var(--well);border-radius:8px;background-image:linear-gradient(var(--gridc) 1px,transparent 1px),linear-gradient(90deg,var(--gridc) 1px,transparent 1px);background-size:20px 20px}
.walls .w-out{fill:none;stroke:var(--plan);stroke-width:5}
.walls path{fill:none;stroke:var(--plan);stroke-width:3}
.doors path{stroke:var(--well);stroke-width:6}
.wins rect{fill:var(--well);stroke:var(--plan);stroke-width:1.2}
.rm{cursor:pointer;outline:none}
.rm__r{fill:transparent;transition:fill .35s var(--e)}
.rm:hover .rm__r{fill:var(--gridc)}
.rm.has .rm__r{fill:rgba(138,164,192,.07)}
.rm.sel .rm__r{fill:rgba(227,167,47,.09)}
.rm:focus-visible .rm__r{stroke:var(--acc);stroke-width:2}
.rm--out .rm__r{stroke:var(--dim);stroke-width:1.4;stroke-dasharray:6 5}
.rm__sel{fill:none;stroke:var(--acc);stroke-width:1.6;opacity:0;transition:opacity .3s var(--e);pointer-events:none}
.rm.sel .rm__sel{opacity:1}
.lb{font:500 10.5px var(--mono);letter-spacing:.08em;fill:var(--tx);text-transform:uppercase;pointer-events:none}
.lb2{font:500 10px var(--mono);fill:var(--acc);pointer-events:none}
.p-s rect{fill:var(--well);stroke:var(--plan);stroke-width:1.3}
.p-s circle{fill:var(--plan)}
.p-l .gl{fill:rgba(227,167,47,.16)}
.p-l .co{fill:var(--acc)}
.p-f text{font:700 7.5px var(--mono);fill:#111418;text-anchor:middle}
.p-more{font:600 10px var(--mono);fill:var(--tx2)}
#pts g{pointer-events:none}
.pop{animation:popIn .4s var(--e) both;transform-box:fill-box;transform-origin:center}
@keyframes popIn{from{opacity:0;transform:scale(.4)}}
.gate{pointer-events:none}
.gate__post{stroke:var(--plan);stroke-width:4;stroke-linecap:round}
.gate__leaf rect{fill:rgba(227,167,47,.1);stroke:var(--acc);stroke-width:1.5}
.gate__leaf path{stroke:var(--acc);stroke-width:1.2}
.gate__leaf{transition:transform 1.4s var(--e)}
.gate.open .gate__leaf{transform:translateX(-118px)}
.pl__legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 2px 0;font-size:13px;color:var(--mut)}
.pl__legend span{display:inline-flex;align-items:center;gap:8px}
.lg{display:inline-block;width:12px;height:12px}
.lg--s{border:1.3px solid var(--plan);border-radius:2px}
.lg--l{border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px rgba(227,167,47,.2)}
.lg--f{border-radius:3px;background:linear-gradient(135deg,var(--sl) 50%,var(--sg) 50%)}
.pl__side{display:grid;gap:16px}
.room,.sum{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.room__empty{text-align:center;padding:10px 4px}
.room__empty svg{width:64px;height:64px;fill:none;stroke:var(--dim2);stroke-width:2;margin:0 auto 10px;display:block}
.room__empty svg circle{fill:var(--acc);stroke:none;animation:led 1.6s infinite}
.room__empty p{margin:0 0 16px;color:var(--mut);font-size:15px}
.room__empty b{color:var(--hi)}
.room__quick{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.room__quick button{min-height:38px;padding:0 12px;border-radius:7px;border:1px solid var(--line);background:var(--panel2);color:var(--tx2);font:600 13.5px var(--sans);cursor:pointer;transition:border-color .2s,color .2s}
.room__quick button:hover{border-color:var(--acc);color:var(--hi)}
.room__body.enter{animation:roomIn .45s var(--e)}
@keyframes roomIn{from{opacity:0;transform:translateY(8px)}}
.room__head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line2)}
.room__k{margin:0;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accTx)}
.room__h{font:700 clamp(21px,2vw,26px)/1.15 var(--sans);letter-spacing:-.025em;color:var(--hi);margin-top:4px}
.room__nav{display:flex;gap:6px}
.rn{width:40px;height:40px;border-radius:7px;border:1px solid var(--line);background:var(--panel2);color:var(--tx);font-size:16px;cursor:pointer;transition:border-color .2s}
.rn:hover{border-color:var(--tx2)}
.cnt{display:grid;grid-template-columns:20px 1fr 40px 46px 40px;align-items:center;gap:8px;padding:8px 8px 8px 12px;border-radius:9px;background:var(--well);border:1px solid var(--line2);margin-bottom:8px}
.cnt__ic{width:12px;height:12px}
.cnt__ic--s{border:1.3px solid var(--plan);border-radius:2px}
.cnt__ic--l{border-radius:50%;background:var(--acc)}
.cnt__l{font-weight:600;font-size:15px}
.cnt__b{width:40px;height:40px;border-radius:7px;border:1px solid var(--b1);background:var(--panel2);color:var(--hi);font-size:20px;line-height:1;cursor:pointer;transition:border-color .2s,transform .15s var(--e)}
.cnt__b:hover{border-color:var(--acc)}
.cnt__b:active{transform:scale(.9)}
.cnt__v{text-align:center;font:700 21px/1 var(--sans);font-variant-numeric:tabular-nums}
.cnt__v.bump{animation:bump .35s var(--e)}
@keyframes bump{40%{transform:translateY(-3px);color:var(--accTx)}}
.room__sub{margin:18px 0 10px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut2)}
.feats{display:grid;gap:6px}
.ft{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 12px 6px 8px;border-radius:8px;border:1px solid var(--line2);background:var(--well);color:var(--tx2);font:600 14px/1.25 var(--sans);text-align:left;cursor:pointer;transition:border-color .25s var(--e),background .25s var(--e),color .25s}
.ft i{flex:none;display:grid;place-items:center;min-width:34px;height:24px;padding:0 5px;border-radius:5px;background:var(--line);color:var(--tx2);font:700 10px var(--mono);font-style:normal;transition:background .3s var(--e),color .3s var(--e)}
.ft:hover{border-color:var(--b2)}
.ft[aria-pressed="true"]{border-color:var(--c);color:var(--hi);background:rgba(255,255,255,.03)}
.ft[aria-pressed="true"] i{background:var(--c);color:#111418}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{min-height:40px;padding:0 14px;border-radius:7px;border:1px solid var(--line);background:var(--well);color:var(--tx2);font:600 14px var(--sans);cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.chips button:hover{border-color:var(--b2)}
.chips button[aria-pressed="true"]{border-color:var(--acc);background:var(--accT);color:var(--hi)}
.sum__tot{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.sum__tot p{margin:0;padding:12px;background:var(--well)}
.sum__tot b{display:block;font:700 28px/1 var(--sans);color:var(--hi);font-variant-numeric:tabular-nums}
.sum__tot span{display:block;margin-top:4px;font-size:12.5px;color:var(--mut);line-height:1.3}
.flds{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.fld--w{grid-column:1/-1}
.fld>span{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:var(--tx2)}
.fld small{font-weight:400;color:var(--mut2)}
.fld input,.msg__t{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:7px;background:var(--well);color:var(--tx);font:400 16px/1.4 var(--sans);transition:border-color .2s,box-shadow .2s}
.fld input::placeholder{color:var(--mut2)}
.fld input:focus,.msg__t:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--accT)}
.msg{margin-top:20px;padding:24px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.msg__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;margin-bottom:12px}
.msg__head .kick{margin:0}
.msg__note{margin:0;font-size:14px;color:var(--mut)}
.msg__t{display:block;resize:vertical;min-height:200px;font:400 15px/1.6 var(--mono);font-family:var(--sans)}
.msg__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.msg__ok{min-height:1.4em;margin:10px 0 0;font-size:14px;color:var(--sg)}

/* ---------- brama ---------- */
.gate2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:center}
.gate2__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.yard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px 22px 20px;box-shadow:var(--sh)}
.yard__svg{display:block;width:100%;height:auto}
.y-gr{stroke:var(--dim);stroke-width:1.4}
.y-rail{stroke:var(--b1);stroke-width:3;stroke-dasharray:2 4}
.y-post{fill:var(--panel2);stroke:var(--plan);stroke-width:1.4}
.y-fence{fill:none;stroke:var(--mut2);stroke-width:1.4}
.y-beacon{fill:var(--line);stroke:var(--plan);stroke-width:1.2;transition:fill .3s}
.yard.moving .y-beacon{animation:beacon .5s steps(2) infinite}
@keyframes beacon{50%{fill:var(--acc)}}
.y-gate{transition:transform 2.2s cubic-bezier(.45,.05,.25,1)}
.yard.open .y-gate{transform:translateX(186px)}
.y-gframe{fill:var(--panel);stroke:var(--tx);stroke-width:1.8}
.y-bars{fill:none;stroke:var(--bars);stroke-width:1.2}
.y-motor{fill:var(--panel2);stroke:var(--plan);stroke-width:1.2}
.y-led{fill:var(--dim);transition:fill .3s}
.yard.moving .y-led,.yard.open .y-led{fill:var(--sg)}
.y-dim path{fill:none;stroke:var(--dim2);stroke-width:1}
.y-dim text{font:500 11px var(--mono);fill:var(--mut);letter-spacing:.06em;text-transform:uppercase}
.remote{display:flex;align-items:center;gap:12px;width:100%;margin-top:18px;min-height:52px;padding:0 18px;border-radius:9px;border:1px solid var(--b1);background:var(--well);color:var(--hi);font:700 15px var(--sans);cursor:pointer;transition:border-color .25s,background .25s,transform .15s var(--e)}
.remote:hover{border-color:var(--acc)}
.remote:active{transform:scale(.985)}
.remote__led{width:9px;height:9px;border-radius:50%;background:var(--dim);transition:background .3s,box-shadow .3s}
.remote.blink .remote__led{background:var(--acc);box-shadow:0 0 0 4px var(--accT)}
.remote[aria-pressed="true"]{border-color:var(--acc)}

/* ---------- kiedy ---------- */
.tl{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.tl::before{content:"";position:absolute;left:0;right:0;top:15px;height:1px;background:var(--line)}
.tl__i{position:relative;padding:0 24px 0 0}
.tl__n{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bg);border:1px solid var(--b1);font:500 11.5px var(--mono);color:var(--tx2);margin-bottom:18px}
.tl__i--hot .tl__n{border-color:var(--acc);color:var(--accTx);box-shadow:0 0 0 5px var(--accT)}
.tl__i h3{font-size:18.5px;font-weight:700;color:var(--hi);letter-spacing:-.01em}
.tl__i p{margin-top:8px;font-size:15px;color:var(--mut)}
.tl__badge{display:inline-block;margin-top:12px;padding:4px 9px;border-radius:5px;border:1px solid rgba(227,167,47,.4);font:500 11px var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--accTx)}
.send{display:grid;grid-template-columns:auto 1fr auto;gap:12px 32px;align-items:center;margin-top:48px;padding:22px 26px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.send__k{margin:0;font-weight:700;color:var(--hi)}
.send ul{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14.5px;color:var(--mut)}
.send li b{color:var(--tx)}

/* ---------- gdzie ---------- */
.gdzie{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:clamp(32px,5vw,72px);align-items:center}
.addr{display:grid;gap:2px;margin:24px 0 0;padding-top:16px;border-top:1px solid var(--line);color:var(--mut);font-size:15.5px}
.addr__k{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut2)}
.addr b{font-size:20px;color:var(--hi)}
.gdzie__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.fb{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px}
.fb__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--slT)}
.fb__ic svg{width:20px;height:20px;fill:var(--sl)}
.fb__n{display:block;font:800 60px/1 var(--sans);letter-spacing:-.04em;margin-top:22px;color:var(--hi);font-variant-numeric:tabular-nums}
.fb p{color:var(--mut);margin-top:6px;font-size:15.5px}
.fb__a{display:inline-block;margin-top:16px;font-weight:700;color:var(--accTx);text-decoration:none;border-bottom:1px solid currentColor}

/* ---------- obszar działania ---------- */
.area{margin-top:26px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.area__k{margin:0 0 12px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accTx)}
.area__l{display:flex;flex-wrap:wrap;gap:7px}
.area__l li{padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--bg2);font-size:13.5px;font-weight:600;color:var(--tx2);line-height:1.3}
.area__l li:nth-child(-n+2){border-color:rgba(227,167,47,.45);color:var(--hi)}
.area__l .area__more{border-style:dashed;background:none;color:var(--mut);font-weight:500}

/* ---------- pełny zakres usług ---------- */
.all{margin-top:20px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:26px 26px 22px}
.all__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;margin-bottom:18px}
.all__k{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--hi)}
.all__t{margin:0;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accTx)}
.all__l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.all__l li{display:grid;align-content:start;gap:3px;padding:14px 16px;background:var(--panel);transition:background .3s var(--e)}
.all__l li:hover{background:var(--panel2)}
.all__l li>b{font-size:15.5px;font-weight:700;color:var(--hi);letter-spacing:-.01em}
.all__l li>span{font-size:13.5px;color:var(--mut);line-height:1.4}
.all__l li.all__tel{padding:0;background:var(--acc)}
.all__tel a{display:grid;align-content:center;gap:2px;height:100%;padding:14px 16px;text-decoration:none;color:var(--onAcc);transition:background .3s var(--e)}
.all__tel a:hover{background:#efb441}
.all__tel span{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.all__tel b{font-size:19px;font-weight:800;letter-spacing:-.02em}
.all__q{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 0;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.all__q span{display:inline-flex;align-items:center;gap:8px}
.all__q span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sg)}

/* ---------- realizacje (galeria) ---------- */
.gal__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px clamp(32px,5vw,72px);align-items:end;margin-bottom:clamp(28px,4vw,44px)}
.gal__head .h2{margin-bottom:0}
.gal__head .lead{margin:0}
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,15.5vw,230px);gap:12px}
.gal__i--big{grid-column:span 2;grid-row:span 2}
.gal__i--wide{grid-column:span 2}
.gal__i a{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:10px;background:var(--view1);border:1px solid var(--line);outline-offset:3px}
.gal__i img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e),filter .5s var(--e)}
.gal__i--wide img{object-position:50% 58%}
.gal__i a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(8,10,13,.78) 100%);pointer-events:none}
.gal__cap{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:baseline;gap:9px;padding:12px 14px;color:#fff;font-size:14px;font-weight:600;line-height:1.3;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.gal__cap b{flex:none;font:500 11px var(--mono);color:var(--acc);letter-spacing:.04em}
.gal__i--big .gal__cap{font-size:17px;padding:18px 20px}
.gal__i a:hover img{transform:scale(1.045)}
.gal__i a:focus-visible{outline:2px solid var(--acc)}
.gal__i a::before{content:"";position:absolute;top:10px;right:10px;z-index:1;width:34px;height:34px;border-radius:50%;background:rgba(17,20,24,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/16px no-repeat;opacity:0;transform:scale(.8);transition:opacity .3s var(--e),transform .3s var(--e)}
.gal__i a:hover::before,.gal__i a:focus-visible::before{opacity:1;transform:none}
.js .gal__i[data-r]{transform:translateY(18px) scale(.97)}
.js .gal__i[data-r].in{transform:none}

/* lightbox */
.mvlb{position:fixed;inset:0;z-index:2147480000;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:rgba(6,8,10,.94);color:#e8ebee;opacity:0;visibility:hidden;transition:opacity .3s var(--e),visibility 0s linear .3s}
.mvlb[hidden]{display:none}
.mvlb.open{opacity:1;visibility:visible;transition:opacity .3s var(--e)}
.mvlb__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}
.mvlb__n{font:500 13px var(--mono);letter-spacing:.08em;color:#98a2ad}
.mvlb__n b{color:var(--acc);font-weight:500}
.mvlb__fig{position:relative;display:grid;place-items:center;min-height:0;margin:0;padding:0 72px;touch-action:pan-y}
.mvlb__img{--ar:1.333;display:block;aspect-ratio:var(--ar);height:auto;width:min(calc(100vw - 160px),calc((100vh - 150px) * var(--ar)),1600px);width:min(calc(100vw - 160px),calc((100dvh - 150px) * var(--ar)),1600px);object-fit:contain;border-radius:6px;box-shadow:0 30px 80px -30px rgba(0,0,0,.9);transition:opacity .25s var(--e),transform .35s var(--e)}
.mvlb.open .mvlb__img{animation:lbIn .4s var(--e)}
.mvlb__img.swap{opacity:.35;transform:scale(.985)}
@keyframes lbIn{from{opacity:.4;transform:scale(.96)}to{opacity:1;transform:none}}
.mvlb__cap{margin:0;padding:14px 16px 20px;text-align:center;font-size:15px;font-weight:600;color:#e8ebee;min-height:1.3em}
.mvlb__btn{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(32,38,45,.85);color:#fff;cursor:pointer;transition:background .25s var(--e),border-color .25s var(--e)}
.mvlb__btn:hover{background:#2b323a;border-color:rgba(255,255,255,.4)}
.mvlb__btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mvlb__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mvlb__prev,.mvlb__next{position:absolute;top:50%;margin-top:-24px;z-index:1}
.mvlb__prev{left:12px}.mvlb__next{right:12px}
html.mvlb-lock,html.mvlb-lock body{overflow:hidden}
html.mvlb-lock .chc-b,html.mvlb-lock .chc-x,html.mvlb-lock .made{visibility:hidden}
.calm .mvlb,.calm .mvlb__img{transition:none!important;animation:none!important}
.calm .gal__i img{transition:none!important}

/* ---------- opinie (przygotowane, ukryte do czasu wizytówki Google) ---------- */
.rv__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(28px,4vw,44px)}
.rv__head .h2{margin-bottom:0}
.rv__score{display:flex;align-items:center;gap:16px}
.rv__n{margin:0;font:800 56px/1 var(--sans);letter-spacing:-.04em;color:var(--hi)}
.rv__src{margin:4px 0 0;color:var(--mut);font-size:14.5px}
.rv__stars{position:relative;display:inline-block;font-size:22px;line-height:1;letter-spacing:2px}
.rv__stars i{font-style:normal;color:var(--dim)}
.rv__stars b{position:absolute;left:0;top:0;width:calc(var(--v) / 5 * 100%);overflow:hidden;white-space:nowrap;color:var(--acc);font-weight:400}
.rv__stars--sm{font-size:15px}
.rv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* 15.11: dluga opinia po lewej na 3 wiersze, 3 krotkie po prawej */
.rv__c:first-child{grid-row:span 3}
.rv__c:first-child blockquote{font-size:1.08em}
.rv__c{display:flex;flex-direction:column;gap:14px;margin:0;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.rv__c blockquote{margin:0;flex:1;color:var(--tx2);font-size:15.5px;line-height:1.6}
.rv__c figcaption{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding-top:14px;border-top:1px solid var(--line)}
.rv__c figcaption b{color:var(--hi)}
.rv__c figcaption span{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut2)}
.rv__more{margin-top:24px}

/* ---------- kontakt ---------- */
.sec--contact{background:linear-gradient(180deg,var(--bg) 0%,var(--bgEnd) 100%);border-top:1px solid var(--line2)}
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.contact__tel{display:block;margin-top:28px;font:800 clamp(40px,5.4vw,66px)/1 var(--sans);letter-spacing:-.04em;text-decoration:none;color:var(--hi);transition:color .3s var(--e)}
.contact__tel:hover{color:var(--accTx)}
.contact__tel small{display:block;font:500 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);margin-bottom:10px}
.contact__sub{color:var(--mut);margin-top:18px}
.contact__list{border-top:1px solid var(--line)}
.contact__list li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.contact__list span{font:500 11px/2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut2)}
.contact__list a{color:var(--hi);text-decoration:none;font-weight:600;overflow-wrap:anywhere;background:linear-gradient(var(--acc),var(--acc)) 0 100%/0 1px no-repeat;transition:background-size .4s var(--e)}
.contact__list a:hover{background-size:100% 1px}

.foot{background:var(--foot);color:var(--mut);padding:40px 0 96px;font-size:14px;border-top:1px solid var(--line2)}
.foot__in{display:grid;gap:6px}
.foot__logo{font:700 18px var(--sans);color:var(--hi)}
.foot__logo b{font-weight:800}.foot__logo em{font-style:normal;font-weight:500;color:var(--mut)}
.foot a{color:var(--tx2);text-decoration:none}
.foot a:hover{color:var(--hi)}
.foot__c{margin-top:10px}
.calm-btn{background:none;border:1px solid var(--b1);color:var(--tx2);padding:5px 10px;border-radius:5px;cursor:pointer;font-size:13px}
.calm-btn:hover{border-color:var(--tx2)}
.made{position:fixed;left:12px;bottom:12px;z-index:90;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 24px);padding:7px 12px 7px 9px;border-radius:999px;background:rgba(32,38,45,.94);border:1px solid #333b44;color:#b9c1c9;font:500 11.5px/1.25 var(--sans);text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .3s var(--e)}
.made::before{content:"";position:absolute;inset:-10px -4px}
.made i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--acc)}
.made b{color:#fff}
.made:hover{transform:translateY(-2px)}

/* ---------- przełącznik animacji ---------- */
.calm .intro{display:none!important}
.calm [data-r]{opacity:1!important;transform:none!important;transition:none!important}
.calm .w>span{transform:none!important;transition:none!important}
.calm .smart,.calm .smart *,.calm .yard *,.calm .gate__leaf{transition:none!important;animation:none!important}
.calm .pop,.calm .room__body,.calm .cnt__v,.calm .pl__dot,.calm .room__empty svg circle{animation:none!important}

/* ---------- RWD ---------- */
@media (max-width:1120px){
  .menu{display:none}
  .navbtn{display:flex}
  .top__cta{margin-left:auto}
  .drawer{display:flex;flex-direction:column;position:fixed;inset:0;z-index:-2;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);background-image:linear-gradient(var(--gridc) 1px,transparent 1px),linear-gradient(90deg,var(--gridc) 1px,transparent 1px);background-size:40px 40px;padding:calc(var(--hh) + 12px) 24px 26px;visibility:hidden;clip-path:inset(50% 0 50% 0);transition:clip-path .5s var(--e),visibility 0s linear .5s}
  .drawer.open{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .6s var(--e)}
  .drawer>a,.drawer__row{opacity:0;filter:blur(6px);transform:scale(.97);transition:opacity .25s,transform .25s,filter .25s}
  .drawer.open>a,.drawer.open .drawer__row{opacity:1;filter:none;transform:none;transition:opacity .45s var(--e),transform .6s var(--e),filter .5s var(--e);transition-delay:calc(.2s + var(--k,0) * .06s)}
  .drawer>a:nth-child(1){--k:0}.drawer>a:nth-child(2){--k:1}.drawer>a:nth-child(3){--k:2}.drawer>a:nth-child(4){--k:3}.drawer>a:nth-child(5){--k:4}.drawer>a:nth-child(6){--k:5}
  .drawer a{display:flex;align-items:baseline;gap:16px;padding:17px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:clamp(22px,6.3vw,28px);letter-spacing:-.03em;text-decoration:none;color:var(--hi)}
  .drawer a b{font:500 12px/1.9 var(--mono);color:var(--accTx)}
  .drawer a:nth-child(3n+2) b{color:var(--sl)}.drawer a:nth-child(3n) b{color:var(--sg)}
  .drawer__row{--k:6;display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);color:var(--mut);font-size:15px}
  .drawer a.drawer__tel{--k:7;border-bottom:0;margin-top:auto;justify-content:center;padding:16px;border-radius:var(--r);background:var(--acc);color:#15120a;font-weight:700;font-size:17px;letter-spacing:0}
  .pl{grid-template-columns:1fr}
  .pl__side{grid-template-columns:1fr 1fr;align-items:start}
}
@media (max-width:920px){
  .hero__in,.gate2,.gdzie,.contact,.gal__head{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr}
  .all__l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rv{grid-template-columns:1fr}
  .rv__c:first-child{grid-row:auto}
  .tl{grid-template-columns:1fr 1fr;row-gap:32px}
  .tl::before{display:none}
  .send{grid-template-columns:1fr}
  .pl__side{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 32px)}
  :root{--hh:64px}
  .logo__t small{display:none}
  .logo__t{font-size:17px}
  .top__in{gap:12px}
  .top__cta{min-height:44px;padding:0 13px}
  .hero__btns .btn{flex:1 1 100%}
  .smart__st{grid-template-columns:1fr 1fr}
  .smart__st li:nth-child(3){border-left:0}
  .smart__st li:nth-child(n+3){border-top:1px solid var(--line2)}
  .smart__house{padding:10px 8px 0}
  .smart__scenes{margin:12px 12px 0}
  .smart__scenes button{font-size:13px}
  .pl__plan{padding:10px}
  .room,.sum{padding:16px}
  .cnt{grid-template-columns:16px 1fr 40px 40px 40px;gap:6px}
  .sum__tot b{font-size:24px}
  .flds{grid-template-columns:1fr}
  .msg{padding:16px}
  .msg__btns .btn{flex:1 1 100%}
  .tl{grid-template-columns:1fr}
  .contact__list li{grid-template-columns:1fr;gap:2px}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(130px,42vw,220px);gap:8px}
  .gal__cap{font-size:12px;line-height:1.25;padding:8px 10px;gap:7px}
  .gal__i:not(.gal__i--big):not(.gal__i--wide) .gal__cap b{display:none}
  .gal__i a::after{background:linear-gradient(180deg,transparent 45%,rgba(8,10,13,.82) 100%)}
  .gal__i--big .gal__cap{font-size:15px;padding:12px 14px}
  .gal__i a::before{display:none}
  .all{padding:18px 14px 16px}
  .all__l li,.all__tel a{padding:12px}
  .all__l li>b{font-size:14.5px}
  .all__l li>span{font-size:12.5px}
  .area{padding:14px}
  .mvlb__fig{padding:0 8px}
  .mvlb__img{width:min(calc(100vw - 16px),calc((100vh - 200px) * var(--ar)));width:min(calc(100vw - 16px),calc((100dvh - 200px) * var(--ar)))}
  .mvlb__prev,.mvlb__next{top:auto;bottom:-62px;margin:0}
  .mvlb__prev{left:16px}.mvlb__next{right:16px}
  .mvlb__cap{padding:14px 72px 22px;font-size:14px}
  .rv__n{font-size:44px}
  .made{font-size:10.5px;padding:6px 10px 6px 8px;left:8px;bottom:8px;max-width:calc(100vw - 200px)}
}
@media (max-width:400px){
  .top__cta span{display:none}
  .top__cta{width:44px;padding:0}
}

/* =====================================================================
   p2 (13.11): motyw jasny (ciemny zostaje domyślny), 3 kolory (bursztyn, błękit, zieleń), animacje „włączania prądu”
   ===================================================================== */
:root{--sl:#82aee0;--slT:rgba(130,174,224,.15);--sg:#6fc39a;--sgT:rgba(111,195,154,.13)}
[data-theme="light"]{
  --bg:#f4f6f8;--bg2:#eceff3;--panel:#fff;--panel2:#f4f6f9;
  --line:#d8dee5;--line2:#e3e8ed;
  --tx:#18202a;--tx2:#2f3a46;--mut:#5b6774;--mut2:#7b8693;--hi:#0f151c;
  --accD:#b5800f;--accT:rgba(227,167,47,.16);--accTx:#9c6904;
  --sl:#3a6aa0;--slT:rgba(58,106,160,.11);--sg:#2f8558;--sgT:rgba(47,133,88,.1);
  --sh:0 1px 2px rgba(20,30,40,.05),0 22px 44px -28px rgba(20,30,40,.35);
  --well:#f2f4f7;--well2:#e9edf1;--view1:#eef2f6;--view2:#f6efe2;--view3:#dde3ea;--glass:#d5dee8;--draw:#5c6876;--dim:#aab3bd;--dim2:#9aa4af;
  --b1:#c8d0d8;--b2:#b5bfc9;--plan:#2a323b;--bars:#5c6876;--foot:#e8ecf0;--bgEnd:#e7ebef;--phB:#e6eaee;
  --topbg:rgba(244,246,248,.86);--topbg2:rgba(244,246,248,.95);--gridc:rgba(20,30,40,.05);
  --btnL:#18202a;--onBtnL:#fff;--btnLH:#2c3846;
}
[data-theme="light"] .logo__mk rect{stroke:var(--b1)}
[data-theme="light"] .made{background:rgba(24,32,42,.92);border-color:transparent}
[data-theme="light"] .smart[data-scene="wieczor"] .sh-glass{fill:rgba(227,167,47,.7)}
[data-theme="light"] .btn--line:hover{background:rgba(20,30,40,.03)}

/* zmiana motywu: najpierw lekka animacja (transform/opacity), 2 klatki później kolory; przejścia kolorów wyłączone do końca animacji */
.theme-sw,.theme-sw *,.theme-sw *::before,.theme-sw *::after{transition:none!important}
.theme-sw .thm .thm__sun,.theme-sw .thm .thm__moon{transition:transform .7s var(--e),opacity .35s!important}
.thm-fx{position:fixed;pointer-events:none;z-index:2147483000;will-change:transform,opacity}
.thm-flash{border-radius:50%;background:radial-gradient(circle,#fff7df 0 14%,rgba(240,180,60,.9) 26%,rgba(227,167,47,.35) 48%,transparent 70%)}
.thm-spark{border-radius:2px;background:linear-gradient(90deg,transparent,#e3a72f 35%,#ffd36e);box-shadow:0 0 6px rgba(227,167,47,.7)}
.thm-spark.b{background:linear-gradient(90deg,transparent,#3f7fd0 35%,#8fbef0);box-shadow:0 0 6px rgba(63,127,208,.6)}
.thm-spark.g{background:linear-gradient(90deg,transparent,#2fa36a 35%,#86dcae);box-shadow:0 0 6px rgba(47,163,106,.6)}

/* przycisk motywu */
.thm{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--hi);cursor:pointer;transition:border-color .25s,transform .3s var(--e)}
.thm:hover{border-color:var(--acc)}
.thm:active{transform:scale(.93)}
.thm svg{width:20px;height:20px;overflow:visible;flex:none}
.thm__sun,.thm__moon{transform-box:view-box;transform-origin:12px 12px;transition:transform .7s var(--e),opacity .35s}
.thm__sun circle{fill:none;stroke:var(--accTx);stroke-width:1.8}
.thm__sun path{fill:none;stroke:var(--accTx);stroke-width:1.8;stroke-linecap:round}
.thm__moon{fill:none;stroke:var(--sl);stroke-width:1.8;stroke-linejoin:round}
:root:not([data-theme="light"]) .thm__moon{opacity:0;transform:rotate(90deg) scale(.3)}
[data-theme="light"] .thm__sun{opacity:0;transform:rotate(-90deg) scale(.3)}
.thm--row{width:auto;padding:0 14px 0 10px;display:flex;gap:8px;font:700 14.5px var(--sans)}

/* trzy kolory: bursztyn (prąd), błękit (SmartHome), zieleń (automatyka / gotowe) */
.prog i{background:linear-gradient(90deg,var(--sg),var(--sl) 45%,var(--acc))}
.svc__c:nth-child(2) .svc__ic{stroke:var(--sl)}
.svc__c:nth-child(3) .svc__ic{stroke:var(--sg)}
.svc__c:nth-child(2)::after{background:var(--sl)}
.svc__c:nth-child(3)::after{background:var(--sg)}
.svc__c:nth-child(2):hover .svc__ic{stroke:var(--sl)}
.svc__c:nth-child(3):hover .svc__ic{stroke:var(--sg)}
.svc__c:nth-child(2) .svc__n{color:var(--sl)}
.svc__c:nth-child(3) .svc__n{color:var(--sg)}
.hero__spec li:nth-child(2) span{color:var(--sl)}
.hero__spec li:nth-child(3) span{color:var(--sg)}
#brama .kick{color:var(--sg)}
#brama .kick::before{box-shadow:0 0 0 4px var(--sgT)}
#planer .kick{color:var(--sl)}
#planer .kick::before{box-shadow:0 0 0 4px var(--slT)}
#planer{background:radial-gradient(900px 420px at 100% 0%,var(--slT),transparent 70%),radial-gradient(700px 380px at 0% 100%,var(--accT),transparent 70%)}
#brama.sec--alt{background:radial-gradient(800px 380px at 0% 0%,var(--sgT),transparent 70%),var(--bg2)}
.fb__n{color:var(--sl)}

/* hero: wolno przesuwający się pas światła po siatce (jak skaner) */
.hero__scan{position:absolute;left:0;right:0;top:0;height:220px;pointer-events:none;background:linear-gradient(180deg,transparent,var(--accT) 45%,var(--slT) 55%,transparent);opacity:.7;animation:scan 9s cubic-bezier(.45,.05,.55,.95) infinite;will-change:transform}
@keyframes scan{0%{transform:translateY(-240px)}100%{transform:translateY(1100px)}}

/* nagłówki: słowa „zapalają się” — z rozmycia do ostrości z krótkim mignięciem, kaskadowo */
.h2 .vw{display:inline-block}
.js .h2.split .vw{opacity:0;filter:blur(8px);transform:translateY(8px)}
.js .h2.split.in .vw{animation:vOn .9s var(--e) both;animation-delay:calc(var(--i) * 70ms + .05s)}
@keyframes vOn{0%{opacity:0;filter:blur(8px);transform:translateY(8px)}35%{opacity:.85;filter:blur(1px);transform:none}45%{opacity:.35}60%{opacity:1;filter:none}100%{opacity:1;filter:none;transform:none}}
.h2.split .vw.acc-w{color:var(--accTx)}

/* karty usług: wejście z rozmycia */
.js .svc__c[data-r]{filter:blur(10px);transform:scale(.98);transition:opacity .8s var(--e),transform .8s var(--e),filter .9s var(--e),background .35s var(--e)}
.js .svc__c[data-r].in{filter:none;transform:none}

/* ikony rysowane linią */
.js .draw path,.js .draw circle,.js .draw rect{stroke-dasharray:var(--len,160);stroke-dashoffset:var(--len,160);transition:stroke-dashoffset 1.2s var(--e) .45s,stroke .3s}
.js .draw.on path,.js .draw.on circle,.js .draw.on rect{stroke-dashoffset:0}

/* przyciski: przebiegający błysk + magnes */
.btn{overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:50%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(0) skewX(-12deg);opacity:0}
.btn:hover::after{animation:shine .8s var(--e)}
.btn--line::after,.btn--ghost::after{background:linear-gradient(100deg,transparent,var(--accT),transparent)}
@keyframes shine{0%{opacity:1;transform:translateX(0) skewX(-12deg)}100%{opacity:1;transform:translateX(420%) skewX(-12deg)}}

/* karty: tilt 3D (desktop) */
.tilt.tilting{transition:transform .15s linear,background .35s}
.svc{perspective:1000px}

@media (max-width:1120px){
  .top__in{gap:10px}
  .top__cta{margin-left:auto}
}
@media (max-width:400px){
  .logo__mk{display:none}
}

/* przełącznik animacji */
.calm .hero__scan{animation:none!important;display:none}
.calm .h2 .vw{opacity:1!important;filter:none!important;transform:none!important;animation:none!important}
.calm .svc__c[data-r]{filter:none!important}
.calm .draw path,.calm .draw circle,.calm .draw rect{stroke-dashoffset:0!important;transition:none!important}
.calm .btn::after{animation:none!important}
.calm .drawer,.calm .drawer>a,.calm .drawer__row{transition:none!important}
.calm .tilt,.calm .mag{transform:none!important}

/* wydajność (13.11): sekcje poza ekranem nie są przeliczane (zmiana motywu na telefonie bez przycięć). Rozmiar zapamiętywany (auto). */
.sec{contain-intrinsic-size:auto 1000px}
html:not(.cv-off) .sec{content-visibility:auto}