/* Tłok — warsztat samochodowy. Grafit + sygnałowa żółć, Bebas Neue / Inter Tight / JetBrains Mono. */
:root{
  --bg:#111214;--bg2:#17181c;--bg3:#1e2025;--y:#ffd400;--ink:#f2f2f0;--mut:#a3a39d;--dim:#5f605c;--line:rgba(255,255,255,.1);--red:#ff5a36;
  --D:"Bebas Neue",Impact,sans-serif;--M:"JetBrains Mono",ui-monospace,monospace;
  --out:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);--io:cubic-bezier(.76,0,.24,1)
}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 "Inter Tight",system-ui,sans-serif}
::selection{background:var(--y);color:#111}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{50%{opacity:.15}}

/* ---------- buttons: metallic shine + mechanical press ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;font:400 21px/1 var(--D);letter-spacing:.06em;border-radius:4px;white-space:nowrap;overflow:hidden;isolation:isolate;transition:transform .18s var(--out),box-shadow .18s var(--out),background-color .25s,color .25s}
.btn>span{position:relative;z-index:1}
.btn::after{content:"";position:absolute;inset:-2px;z-index:0;pointer-events:none;background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.85) 45%,rgba(255,255,255,.2) 53%,transparent 64%);transform:translateX(-120%)}
.btn:hover::after{transform:translateX(120%);transition:transform .8s var(--out)}
.btn--lg{height:56px;padding:0 28px;font-size:24px}
.btn--y{background:linear-gradient(180deg,#ffe561 0%,#ffd400 46%,#f0c600 100%);color:#111;box-shadow:0 4px 0 #8f7700,0 10px 22px -12px rgba(255,212,0,.6)}
.btn--y:hover{transform:translateY(2px);box-shadow:0 2px 0 #8f7700,0 6px 14px -10px rgba(255,212,0,.6)}
.btn--y:active{transform:translateY(4px);box-shadow:0 0 0 #8f7700}
.btn--line{color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),0 4px 0 rgba(255,255,255,.16)}
.btn--line::after{background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.3) 45%,transparent 60%)}
.btn--line:hover{transform:translateY(2px);background:var(--ink);color:#111;box-shadow:inset 0 0 0 2px var(--ink),0 2px 0 rgba(255,255,255,.16)}
.btn--line:active{transform:translateY(4px);box-shadow:inset 0 0 0 2px var(--ink)}

/* ---------- intro: engine start ---------- */
.ignite{display:none}
.js .ignite{display:flex;position:fixed;inset:0;z-index:100;flex-direction:column;justify-content:space-between;padding:clamp(18px,3vw,34px);background:radial-gradient(55% 50% at 50% 48%,#1d1f24 0%,#0c0d0f 72%);color:var(--ink);cursor:pointer;will-change:transform;user-select:none}
.js .ignite.is-gone{display:none}
.ignite__top,.ignite__bottom{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;font:500 11px/1 var(--M);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.ignite__logo{display:flex;align-items:flex-end;gap:8px;font:400 30px/1 var(--D);letter-spacing:.06em;color:var(--ink)}
.ignite__logo small{font:500 10px/1 var(--M);letter-spacing:.14em;color:var(--mut);margin-bottom:5px}
.ignite__skip{animation:blink 1.4s steps(2) infinite}
.ignite__lbl{display:flex;align-items:center;gap:10px}
.ignite__lbl i{width:8px;height:8px;border-radius:50%;background:var(--y);animation:blink .5s steps(2) infinite}
.ignite__gear b{color:var(--y);font-weight:500}
.ignite__dial{align-self:center;display:grid;justify-items:center;gap:6px;width:min(80vw,54vh,390px)}
.tach{width:100%;height:auto;overflow:visible}
.tach__ring{fill:none;stroke:rgba(255,255,255,.16);stroke-width:2}
.tach__face{fill:#131418;stroke:rgba(255,255,255,.05)}
.tach__red{fill:none;stroke:var(--red);stroke-width:7;opacity:.75;transition:opacity .1s}
.is-red .tach__red{opacity:1;stroke:#ff3b1f}
.tk{stroke:rgba(242,242,240,.55);stroke-width:1.5}
.tk--m{stroke:var(--ink);stroke-width:3}
.tk--r{stroke:var(--red)}
.tach__n{font:400 21px/1 var(--D);fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.tach__n--r{fill:var(--red)}
.tach__unit{font:500 8px/1 var(--M);letter-spacing:.14em;fill:var(--mut);text-anchor:middle;text-transform:uppercase}
.tach__needle{fill:var(--y)}
.tach__hub{fill:#25272d;stroke:var(--y);stroke-width:2}
.tach__pin{fill:var(--y)}
.ignite__read{display:flex;align-items:baseline;gap:10px}
.ignite__read b{font:500 clamp(30px,5vw,46px)/1 var(--M);color:var(--y);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.ignite__read span{font:500 11px/1 var(--M);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.is-red .ignite__read b{color:var(--red)}
.ignite__edge{position:absolute;left:0;right:0;bottom:-16px;height:16px;background:repeating-linear-gradient(-45deg,var(--y) 0 14px,#111 14px 28px)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(17,18,20,.94);border-bottom:1px solid var(--line)}
.js .top{transform:translateY(-100%)}
.js.is-on .top{transform:none;transition:transform .8s var(--out)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.top__prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--y);transform-origin:0 50%;transform:scaleX(0)}
.logo{display:flex;align-items:center;gap:10px;font:400 30px/1 var(--D);letter-spacing:.06em}
.logo small{font:500 11px/1 var(--M);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);align-self:flex-end;margin-bottom:6px}
.logo__mark{display:block;width:30px;height:30px}
.logo__mark svg{width:100%;height:100%}
.logo__g{fill:var(--y)}
.logo__h{fill:var(--bg)}
.menu{display:flex;gap:30px;font-weight:500;color:var(--mut)}
.menu a{position:relative;padding:6px 0;transition:color .25s}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--y);transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s var(--out)}
.menu a:hover,.menu a.on{color:var(--ink)}
.menu a:hover::after,.menu a.on::after{transform:scaleX(1);transform-origin:0 50%}
.top__r{display:flex;align-items:center;gap:10px}
.burger{display:none;position:relative;width:46px;height:46px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.burger span{position:absolute;left:13px;right:13px;height:2px;background:var(--ink);transition:transform .45s var(--out)}
.burger span:first-child{top:18px}
.burger span:last-child{top:26px}
.menu-open .burger span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-open .burger span:last-child{transform:translateY(-4px) rotate(-45deg)}

.mnav{position:fixed;inset:0;z-index:39;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:100px clamp(16px,4vw,40px) 88px;background:var(--bg);overflow-y:auto;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--io),visibility 0s .6s}
.mnav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:repeating-linear-gradient(-45deg,var(--y) 0 12px,#111 12px 24px)}
.menu-open .mnav{visibility:visible;clip-path:inset(0);transition:clip-path .6s var(--io)}
.menu-open body{overflow:hidden}
.mnav__links a{display:flex;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font:400 clamp(46px,13vw,76px)/1 var(--D);text-transform:uppercase;opacity:0;transform:translateX(40px);transition:transform .6s var(--out),opacity .4s}
.mnav__links small{font:500 12px/1 var(--M);color:var(--y)}
.menu-open .mnav__links a{opacity:1;transform:none}
.menu-open .mnav__links a:nth-child(1){transition-delay:.18s}
.menu-open .mnav__links a:nth-child(2){transition-delay:.24s}
.menu-open .mnav__links a:nth-child(3){transition-delay:.3s}
.menu-open .mnav__links a:nth-child(4){transition-delay:.36s}
.mnav__foot{opacity:0;transition:opacity .5s}
.menu-open .mnav__foot{opacity:1;transition-delay:.42s}
.mnav__foot .btn{width:100%}
.mnav__foot p{margin-top:18px;color:var(--mut);font-size:14px}

/* ---------- shared ---------- */
.lbl{font:500 12px/1 var(--M);letter-spacing:.16em;text-transform:uppercase;color:var(--y)}
.lbl--d{color:#111}
.h2{font:400 clamp(52px,7vw,100px)/.9 var(--D);text-transform:uppercase;letter-spacing:.01em}
.h2 .ln{display:block;overflow:hidden;overflow:clip;padding:.08em 0 .05em;margin:-.08em 0 -.05em}
.h2 .ln>span{display:inline-block;transform-origin:0 100%;transition:transform 1.05s var(--out)}
.h2 .ln+.ln>span{transition-delay:.09s}
.h2 .y{color:var(--y)}
.js .h2[data-r]:not(.in) .ln>span{transform:translateY(115%) rotate(4deg)}
p[data-r],.svc__end{transition:opacity .8s var(--out) .12s,transform .9s var(--out) .12s}
.js p[data-r]:not(.in),.js .svc__end:not(.in){opacity:0;transform:translateY(24px)}
.bg-gear{position:absolute;z-index:0;pointer-events:none;fill:none;stroke:rgba(255,255,255,.07);stroke-width:1.4;overflow:visible}
.bg-gear path,.bg-gear circle{vector-effect:non-scaling-stroke}
.spin-slow{transform-box:fill-box;transform-origin:center;animation:spin 60s linear infinite}
.spin-rev{transform-box:fill-box;transform-origin:center;animation:spin 37.5s linear infinite reverse}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(34px,5vw,64px) 0 clamp(60px,7vw,100px);overflow:hidden;overflow:clip}
.hero>.c-wrap{position:relative;z-index:1}
.bg-gear--hero{width:clamp(420px,52vw,820px);right:-14%;top:-22%}
.hero__top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px}
.tag{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--M);letter-spacing:.14em;text-transform:uppercase;color:var(--y)}
.tag span{width:28px;height:3px;background:var(--y)}
.status{display:inline-flex;align-items:center;gap:10px;font:500 11px/1.3 var(--M);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.status i{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--dim)}
.status.open i{background:var(--y)}
.status.open i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--y);animation:ping 1.8s var(--out) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}
.h1{margin-top:clamp(18px,3vw,30px);font:400 clamp(56px,10.6vw,160px)/.84 var(--D);text-transform:uppercase;letter-spacing:.005em}
.h1__l{display:block}
.h1__l--y{color:var(--y)}
.h1 .w{display:inline-block;white-space:nowrap}
.h1 .ch{display:inline-block;transform-origin:50% 65%}
.js .h1 .ch{opacity:0}
.go .h1 .ch{animation:stamp .64s cubic-bezier(.2,.9,.3,1) var(--d) both}
.go .h1__l{animation:thud .34s ease-out var(--td) both}
@keyframes stamp{0%{opacity:0;transform:scale(2.2) rotate(var(--r,8deg))}35%{opacity:1}58%{transform:scale(.9) rotate(0)}78%{transform:scale(1.05)}100%{opacity:1;transform:none}}
@keyframes thud{0%,100%{transform:none}20%{transform:translate(0,5px)}45%{transform:translate(-3px,-1px)}70%{transform:translate(2px,1px)}}
.js .hero [data-h]{opacity:0;transform:translateY(26px)}
.js .go [data-h]{opacity:1;transform:none;transition:opacity .8s var(--out) var(--hd,0s),transform 1s var(--out) var(--hd,0s)}
.hero__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4.5vw,72px);align-items:end;margin-top:clamp(30px,4vw,52px)}
.lead{max-width:520px;color:var(--mut);font-size:18.5px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:42px;border-top:1px solid var(--line)}
.facts li{padding:18px 14px 0 0}
.facts li+li{padding-left:16px;border-left:1px solid var(--line)}
.facts b{display:block;font:400 40px/1 var(--D);color:var(--y);font-variant-numeric:tabular-nums}
.facts li>span{display:block;margin-top:6px;font-size:13.5px;color:var(--mut);line-height:1.35}

.bay{position:relative;border:1px solid var(--line);border-radius:8px;padding-top:42px;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/28px 28px,#141518}
.bay__lbl{position:absolute;top:15px;left:16px;right:16px;display:flex;justify-content:space-between;font:500 11px/1 var(--M);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.car{width:100%;height:auto;border-radius:0 0 8px 8px}
.road__edge{stroke:rgba(255,255,255,.28);stroke-width:2}
.road__edge--f{stroke:rgba(255,255,255,.1)}
.road__dash{stroke:var(--y);stroke-width:4;stroke-dasharray:36 28;opacity:.8}
.car__shadow{fill:rgba(0,0,0,.6)}
#speed{opacity:0}
.speed path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.car__shell{fill:#1f2126;stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
.car__glass{fill:#2b2e36;stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.car__line{fill:none;stroke:rgba(242,242,240,.38);stroke-width:2;stroke-linecap:round}
.car__mirror{fill:var(--ink)}
.car__stripe{stroke:var(--y);stroke-width:5}
.car__name{font:400 28px/1 var(--D);letter-spacing:.1em;fill:var(--y)}
.car__head{fill:var(--y)}
.car__tail{fill:var(--red)}
.car__pipe{fill:#3a3d44}
.beam{opacity:0;transition:opacity .6s}
.idle .beam{opacity:1}
.tire{fill:#0b0c0e;stroke:var(--ink);stroke-width:4}
.rim{fill:#23262c;stroke:rgba(242,242,240,.55);stroke-width:2}
.spokes{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.hub{fill:var(--y)}
.caliper{fill:none;stroke:var(--y);stroke-width:7;stroke-linecap:round}
.puffs circle{fill:rgba(242,242,240,.22);opacity:0;transform-box:fill-box;transform-origin:center}
.idle .puffs circle{animation:puff 1.9s ease-out infinite}
.idle .puffs circle:nth-child(2){animation-delay:.63s}
.idle .puffs circle:nth-child(3){animation-delay:1.26s}
@keyframes puff{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:.55}100%{opacity:0;transform:translate(-70px,-16px) scale(3)}}
.badge{position:absolute;right:-18px;top:-52px;width:clamp(100px,10vw,140px);aspect-ratio:1;transform:rotate(10deg)}
.badge svg{width:100%;height:100%;overflow:visible}
.badge__bg{fill:var(--y)}
.badge__txt{transform-box:view-box;transform-origin:100px 100px;animation:spin 18s linear infinite}
.badge text{font:400 19px/1 var(--D);letter-spacing:.12em;fill:#111;text-transform:uppercase}
.badge__in{fill:#111}
.badge .badge__c{font-size:38px;letter-spacing:.02em;fill:var(--y);text-anchor:middle}

/* ---------- caution tape ---------- */
.tapes{position:relative;height:clamp(150px,15vw,214px);overflow:hidden;overflow:clip}
.tapes--one{height:clamp(96px,9vw,130px)}
.tape{position:absolute;left:-10%;width:120%;top:50%}
.tape--a{z-index:2;background:var(--y);color:#111;padding:12px 0;transform:translateY(-50%) rotate(-3.2deg)}
.tape--b{z-index:1;background:#0b0b0c;color:var(--y);padding:8px 0;border-block:1px solid rgba(255,212,0,.35);transform:translateY(-50%) rotate(2.8deg)}
.tapes--one .tape--a{transform:translateY(-50%) rotate(-1.6deg)}
.tape--a::before,.tape--a::after{content:"";position:absolute;left:0;right:0;height:8px;background:repeating-linear-gradient(-45deg,#111 0 10px,var(--y) 10px 20px)}
.tape--a::before{top:0}
.tape--a::after{bottom:0}
.tape__track{display:flex;width:max-content;will-change:transform}
.tape__track span{display:flex;align-items:center;gap:28px;padding:6px 28px 4px 0;font:400 clamp(26px,3vw,42px)/1 var(--D);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.tape--b .tape__track span{font-size:clamp(20px,2.2vw,30px)}
.tape__track span::after{content:"";width:11px;height:11px;background:currentColor;transform:rotate(45deg)}

/* ---------- services ---------- */
.svc{position:relative;padding:clamp(72px,9vw,120px) 0;overflow-x:clip}
.svc__head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.svc__meta{display:none;align-items:center;gap:16px;font:500 12px/1 var(--M);letter-spacing:.12em;color:var(--mut)}
.svc__count b{color:var(--y);font-weight:500}
.svc__bar{position:relative;width:160px;height:2px;background:var(--line)}
.svc__bar i{position:absolute;inset:0;background:var(--y);transform-origin:0 50%;transform:scaleX(0)}
.svc__track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;max-width:1200px;margin:26px auto 0;padding-inline:clamp(16px,4vw,40px)}
.svc__intro{grid-column:1/-1;margin-bottom:22px}
.svc__intro p{margin-top:20px;max-width:440px;color:var(--mut);font-size:18px}
.svc__hint{display:none;align-items:center;gap:12px;margin-top:34px;font:500 12px/1 var(--M);letter-spacing:.16em;text-transform:uppercase;color:var(--mut);transition:opacity .4s}
.svc__hint svg{width:40px;height:12px;fill:none;stroke:var(--y);stroke-width:2;animation:nudge 1.3s var(--out) infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
.svc__hint.is-off{opacity:0}
.svc__end{grid-column:1/-1;padding:34px;border:1.5px dashed rgba(255,212,0,.45);border-radius:8px}
.svc__q{font:400 clamp(34px,3.4vw,46px)/1 var(--D);text-transform:uppercase;color:var(--y)}
.svc__end p:not(.svc__q){margin:14px 0 26px;color:var(--mut);max-width:440px}

.card{position:relative;display:flex;flex-direction:column;padding:26px 26px 26px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;overflow:hidden;isolation:isolate;transition:opacity .7s var(--out),transform .9s var(--out),border-color .35s}
.card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--y);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--out)}
.card:hover{border-color:rgba(255,212,0,.45)}
.card:hover::before,.card.is-cur::before{transform:scaleX(1)}
.card__top{display:flex;justify-content:space-between;gap:12px;font:500 12px/1 var(--M);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.card__n{color:var(--y)}
.card__big{position:absolute;right:-.04em;bottom:-.16em;z-index:-1;font:400 clamp(170px,17vw,270px)/1 var(--D);color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.09);pointer-events:none;transition:-webkit-text-stroke-color .4s}
.card.is-cur .card__big,.card:hover .card__big{-webkit-text-stroke-color:rgba(255,212,0,.28)}
.card h3{font:400 clamp(32px,2.8vw,42px)/.95 var(--D);letter-spacing:.02em;text-transform:uppercase}
.card p{margin-top:12px;color:var(--mut);font-size:15.5px}
.card__price{align-self:flex-start;display:inline-flex;gap:8px;margin-top:auto;padding-top:24px;font:500 12.5px/1 var(--M);letter-spacing:.08em;text-transform:uppercase;color:var(--y)}
.card__price span{transition:transform .35s var(--out)}
.card__price:hover span{transform:translateX(6px)}
.js .card:not(.in){opacity:0;transform:translateX(-46px) rotate(-1.5deg)}
.js .card:nth-of-type(even):not(.in){transform:translateX(46px) rotate(1.5deg)}

/* service icons — animate only when the card is on screen */
.ico{width:clamp(96px,9vw,128px);height:auto;margin:30px 0 28px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ico .acc{stroke:var(--y)}
.ico .accf{fill:var(--y);stroke:none}
.ico .fillbg{fill:var(--bg2)}
.ico *{animation-play-state:paused}
.card.is-live .ico *,.card:hover .ico *{animation-play-state:running}
.pst,.pst-rod{animation:pst .9s infinite}
@keyframes pst{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.12,0,.39,0)}25%{transform:translateY(9px);animation-timing-function:cubic-bezier(.61,1,.88,1)}50%{transform:translateY(18px);animation-timing-function:cubic-bezier(.12,0,.39,0)}75%{transform:translateY(9px);animation-timing-function:cubic-bezier(.61,1,.88,1)}100%{transform:translateY(0)}}
.rod{transform-box:fill-box;transform-origin:50% 0;animation:rod .9s infinite}
@keyframes rod{0%{transform:rotate(0);animation-timing-function:cubic-bezier(.61,1,.88,1)}25%{transform:rotate(-13deg);animation-timing-function:cubic-bezier(.12,0,.39,0)}50%{transform:rotate(0);animation-timing-function:cubic-bezier(.61,1,.88,1)}75%{transform:rotate(13deg);animation-timing-function:cubic-bezier(.12,0,.39,0)}100%{transform:rotate(0)}}
.pst-crank{transform-box:fill-box;transform-origin:center;animation:spin .9s linear infinite}
.ecg{stroke-dasharray:100 100;stroke-dashoffset:0;animation:ecg 2.2s linear infinite}
@keyframes ecg{0%{stroke-dashoffset:100}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
.ico .blink{animation:blink 1s steps(2) infinite}
.tyre{transform-box:fill-box;transform-origin:center;animation:spin 2.6s linear infinite}
.disc{transform-box:fill-box;transform-origin:center;animation:brake 1.9s cubic-bezier(.12,.7,.3,1) infinite}
@keyframes brake{to{transform:rotate(540deg)}}
.caliper-i{animation:clamp 1.9s infinite}
@keyframes clamp{0%,100%{transform:none}6%{transform:translate(-2px,2px)}40%{transform:none}}
.fan{transform-box:fill-box;transform-origin:center;animation:spin .8s linear infinite}
.air{stroke-dasharray:6 6;animation:flow .6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-12}}
.tick{stroke-dasharray:10 10;animation:tick 3.2s infinite}
.t2{animation-delay:.35s}
.t3{animation-delay:.7s}
@keyframes tick{0%{stroke-dashoffset:0}8%{stroke-dashoffset:10}22%,82%{stroke-dashoffset:0}}

/* pinned horizontal mode (desktop, set by JS) */
.svc.is-h{padding:0}
.svc.is-h .svc__stick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:96px;padding-bottom:28px;overflow:hidden;overflow:clip}
.svc.is-h .svc__head{position:absolute;top:100px;left:0;right:0;margin-inline:auto}
.svc.is-h .svc__meta{display:flex}
.svc.is-h .svc__track{display:flex;align-items:stretch;gap:24px;width:max-content;max-width:none;margin:28px 0 0;padding-left:max(40px,calc((100vw - 1200px) / 2 + 40px));padding-right:12vw;will-change:transform}
.svc.is-h .svc__intro{flex:none;display:flex;flex-direction:column;justify-content:center;width:min(440px,34vw);margin:0 24px 0 0}
.svc.is-h .svc__hint{display:inline-flex}
.svc.is-h .card{flex:none;width:clamp(320px,27vw,410px);height:min(62vh,540px)}
.svc.is-h .card__big{will-change:transform}
.svc.is-h .svc__end{flex:none;align-self:center;width:min(420px,32vw);margin-left:24px}
.js .svc.is-h .card:not(.in){transform:translateY(70px) rotate(2deg)}

/* ---------- price list ---------- */
.price{position:relative;background:var(--y);color:#111;padding:clamp(76px,9vw,124px) 0}
.price__in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(36px,5vw,80px);align-items:start}
.price__side{position:sticky;top:112px}
.price .h2{margin-top:16px}
.price__note{margin-top:22px;max-width:360px;font-size:15.5px;color:#3a3a36}
.printer{position:relative;max-width:320px;margin-top:34px;padding-top:10px;overflow:hidden;overflow:clip;padding-bottom:14px}
.printer::before{content:"";position:absolute;left:-4px;right:-4px;top:0;height:12px;z-index:2;background:#111214;border-radius:6px}
.ticket{position:relative;display:grid;gap:6px;padding:24px 22px 26px;background:#141518;color:var(--ink);transition:transform 1.5s steps(14,end)}
.ticket::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:linear-gradient(135deg,#141518 50%,transparent 50%) 0 0/14px 10px repeat-x,linear-gradient(225deg,#141518 50%,transparent 50%) 0 0/14px 10px repeat-x}
.js .printer:not(.in) .ticket{transform:translateY(-104%)}
.ticket__k{font:500 11px/1 var(--M);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.ticket__v{font:400 64px/1 var(--D);color:var(--y);margin-top:6px}
.ticket__d{font-size:14px;color:var(--mut);line-height:1.4}
.ticket__bar{height:30px;margin-top:12px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 6px,transparent 6px 9px,var(--ink) 9px 12px,transparent 12px 14px)}

.plist{border-top:2px solid #111}
.prow{position:relative;display:flex;align-items:flex-end;gap:14px;padding:18px 0;border-bottom:1px solid rgba(0,0,0,.2);isolation:isolate;transition:opacity .6s var(--out),transform .8s var(--out),color .3s}
.prow::before{content:"";position:absolute;top:0;bottom:0;left:-14px;right:-14px;z-index:-1;background:#111;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--out)}
.prow:hover{color:var(--ink)}
.prow:hover::before{transform:scaleX(1)}
.prow__n{font-weight:600;font-size:18px;line-height:1.3}
.prow__lead{flex:1 1 20px;min-width:20px;height:3px;margin-bottom:10px;background:radial-gradient(circle,currentColor 1.2px,transparent 1.7px) 0 50%/8px 3px repeat-x;color:rgba(17,17,17,.5);transform-origin:0 50%;transition:transform 1s var(--out) .25s,color .3s}
.prow:hover .prow__lead{color:rgba(242,242,240,.5)}
.prow__v{display:flex;align-items:center;gap:7px;white-space:nowrap}
.prow__v small{font:500 11px/1 var(--M);letter-spacing:.08em;text-transform:uppercase}
.prow__v small.ghost{visibility:hidden}
.js .prow:not(.in){opacity:0;transform:translateX(-40px)}
.js .prow:not(.in) .prow__lead{transform:scaleX(0)}
.odo{display:inline-flex;padding:5px 5px;border-radius:4px;background:#111214;color:var(--y);font:400 30px/1 var(--D);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 2px 0 rgba(0,0,0,.25)}
.odo .dg{position:relative;display:block;width:.62em;height:1em;overflow:hidden;text-align:center}
.odo .dg+.dg{box-shadow:-1px 0 0 rgba(255,255,255,.12)}
.odo .dg::after{content:"";position:absolute;inset:0;background:linear-gradient(#111214,transparent 26%,transparent 74%,#111214);pointer-events:none}
.odo .dg i{display:block;font-style:normal;will-change:transform}
.odo .dg b{display:block;height:1em;font-weight:400}

/* ---------- process ---------- */
.proc{position:relative;padding:clamp(80px,10vw,140px) 0 clamp(90px,11vw,150px);overflow:hidden;overflow:clip}
.proc>.c-wrap{position:relative;z-index:1}
.bg-gear--a{width:clamp(320px,42vw,640px);right:-9%;bottom:-34%}
.bg-gear--b{width:clamp(200px,26vw,400px);right:calc(-9% + clamp(320px,42vw,640px) * .74);bottom:calc(-34% + clamp(320px,42vw,640px) * .5)}
.proc__head .h2{margin-top:16px}
.proc__track{position:relative;margin-top:clamp(52px,7vw,90px)}
.proc__rail{position:absolute;left:0;top:0;width:0;height:2px;background:rgba(255,255,255,.14);z-index:0}
.proc__rail i{position:absolute;inset:0;background:var(--y);transform-origin:0 0;transform:scaleX(0)}
.proc__rail.is-v i{transform:scaleY(0)}
.proc__gear{position:absolute;left:0;top:0;z-index:1;width:42px;height:42px;margin:-21px 0 0 -21px;overflow:visible;will-change:transform}
.proc__gear path{fill:var(--y)}
.proc__gear circle{fill:var(--bg)}
.steps{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.step{display:flex;flex-direction:column;align-items:center;text-align:center}
.step__node{position:relative;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px rgba(255,255,255,.2);font:400 30px/1 var(--D);color:var(--dim);transition:background-color .35s,color .35s,box-shadow .35s}
.step__node::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--y);opacity:0;transform:scale(.6)}
.step__node b{font-weight:400}
.step.on .step__node{background:var(--y);color:#111;box-shadow:inset 0 0 0 2px var(--y);animation:pop .55s var(--spring)}
.step.on .step__node::after{animation:ring .9s var(--out)}
@keyframes pop{0%{transform:scale(.8)}100%{transform:scale(1)}}
@keyframes ring{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.6)}}
.step__body{margin-top:26px;max-width:270px}
.step__t{font:500 11px/1 var(--M);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);transition:color .4s}
.step h3{margin-top:12px;font:400 clamp(32px,3vw,40px)/1 var(--D);letter-spacing:.02em;text-transform:uppercase;color:var(--dim);transition:color .4s,transform .6s var(--out)}
.step p{margin-top:10px;font-size:15.5px;color:var(--dim);transition:color .4s}
.step.on .step__t{color:var(--y)}
.step.on h3{color:var(--ink)}
.step.on p{color:var(--mut)}

/* ---------- contact: garage door ---------- */
.contact{position:relative;padding:clamp(76px,9vw,124px) 0;background:var(--bg2);border-top:1px solid var(--line)}
.garage__head{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;padding:0 16px;background:linear-gradient(#272a30,#1c1e22);border:1px solid rgba(255,255,255,.12);border-radius:8px 8px 0 0;font:500 11px/1 var(--M);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);box-shadow:0 8px 16px -8px rgba(0,0,0,.6)}
.garage__st b{font-weight:500;color:var(--ink);transition:color .3s}
.garage__st b.is-y{color:var(--y)}
.bolts{display:flex;gap:10px}
.bolts i{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#6a6d75,#2d2f34)}
.beacon{position:relative;flex:none;width:26px;height:26px;border-radius:50%;background:#3d3200;overflow:hidden;box-shadow:0 0 0 2px #34363c}
.beacon i{position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 62%,rgba(255,236,120,.3) 82%,transparent 100%)}
.garage.is-moving .beacon{background:#7a6200}
.garage.is-moving .beacon i{background:conic-gradient(from 0deg,transparent 0 62%,rgba(255,236,120,.95) 82%,transparent 100%);animation:spin .55s linear infinite}
.garage__bay{position:relative;overflow:hidden;overflow:clip;background:radial-gradient(80% 90% at 30% 0%,#1d1f24,#121316 70%);border-inline:1px solid rgba(255,255,255,.12)}
.garage__in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,5vw,72px);align-items:end;padding:clamp(30px,5.5vw,72px) clamp(20px,5vw,64px)}
.contact .h2{margin-top:16px}
.contact .lead{margin:22px 0 26px;max-width:460px}
.mail{position:relative;display:inline-block;margin-bottom:28px;font:400 clamp(34px,4.8vw,64px)/1 var(--D);letter-spacing:.02em;color:var(--y);overflow-wrap:anywhere}
.mail::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;background:var(--y);transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--out)}
.mail:hover::after{transform:scaleX(1);transform-origin:0 50%}
.contact__main .btn{display:flex;width:max-content}
.info{display:grid;gap:22px}
.info div{padding-top:16px;border-top:1px solid var(--line)}
.info dt{font:500 11px/1 var(--M);letter-spacing:.16em;text-transform:uppercase;color:var(--y)}
.info dd{margin-top:8px;font-size:17px;line-height:1.5}
.garage__floor{height:12px;border-radius:0 0 6px 6px;background:repeating-linear-gradient(-45deg,var(--y) 0 12px,#111 12px 24px)}
.js .garage:not(.is-open) .garage__in .h2 .ln>span{transform:translateY(115%) rotate(4deg)}
.garage__in .lead,.garage__in .mail,.garage__in .contact__main .btn,.info div{transition:opacity .8s var(--out),transform .9s var(--out)}
.js .garage:not(.is-open) .garage__in .lead,.js .garage:not(.is-open) .garage__in .mail,.js .garage:not(.is-open) .contact__main .btn,.js .garage:not(.is-open) .info div{opacity:0;transform:translateY(26px)}
.garage__in .lead{transition-delay:.15s}
.garage__in .mail{transition-delay:.25s}
.contact__main .btn{transition-delay:.35s}
.info div:nth-child(1){transition-delay:.3s}
.info div:nth-child(2){transition-delay:.4s}
.info div:nth-child(3){transition-delay:.5s}
.contact__main .btn:hover{transition-delay:0s}
.door{display:none}
.js .door{display:block;position:absolute;inset:0;z-index:2;will-change:transform;--sh:46px}
.js .door.is-gone{visibility:hidden}
.door__slats{position:absolute;inset:0;overflow:hidden}
.slat{display:block;height:var(--sh);background:linear-gradient(180deg,#30333a 0%,#26282e 40%,#1c1d21 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 0 #0d0e10}
.door::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 calc(var(--sh) - 2px),rgba(10,10,12,.85) calc(var(--sh) - 2px) var(--sh))}
.door::before{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;z-index:3;background:repeating-linear-gradient(-45deg,var(--y) 0 12px,#111 12px 24px)}
.door__paint{position:absolute;left:50%;top:45%;z-index:1;transform:translate(-50%,-50%);font:400 clamp(110px,22vw,300px)/1 var(--D);letter-spacing:.08em;color:rgba(255,212,0,.88);white-space:nowrap;pointer-events:none}
.door__note{position:absolute;left:0;right:0;bottom:52px;z-index:3;text-align:center;font:500 11px/1 var(--M);letter-spacing:.16em;text-transform:uppercase;color:rgba(242,242,240,.55)}
.door__handle{position:absolute;left:50%;bottom:22px;z-index:3;width:96px;height:10px;margin-left:-48px;border-radius:6px;background:#3d4047;box-shadow:inset 0 2px 0 rgba(255,255,255,.14)}

/* ---------- footer ---------- */
.foot{padding:clamp(36px,5vw,64px) 0 96px;color:var(--mut);font-size:14px;overflow:hidden;overflow:clip}
.foot__big{display:flex;justify-content:space-between;overflow:hidden;overflow:clip;padding-top:.06em;font:400 clamp(120px,27vw,400px)/.82 var(--D);color:transparent;-webkit-text-stroke:2px rgba(255,212,0,.55)}
.foot__big span{display:block;transition:transform 1.1s var(--out),color .35s}
.foot__big span:nth-child(2){transition-delay:.08s,0s}
.foot__big span:nth-child(3){transition-delay:.16s,0s}
.foot__big span:nth-child(4){transition-delay:.24s,0s}
.foot__big span:hover{color:var(--y)}
.js .foot__big:not(.in) span{transform:translateY(102%)}
.foot__in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.foot__up{transition:color .25s}
.foot__up:hover{color:var(--y)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .menu{display:none}
  .burger{display:block}
  .hero__grid{grid-template-columns:1fr}
  .bay{max-width:660px;margin-top:40px}
  .price__in{grid-template-columns:1fr}
  .price__side{position:static}
  .garage__in{grid-template-columns:1fr;align-items:start}
  .steps{grid-template-columns:1fr;gap:40px;max-width:560px}
  .step{flex-direction:row;align-items:flex-start;text-align:left;gap:22px}
  .step__node{flex:none;width:52px;height:52px;font-size:26px}
  .step__body{margin-top:2px}
  .step h3{margin-top:8px}
  .proc__gear{width:34px;height:34px;margin:-17px 0 0 -17px}
}
@media (max-width:640px){
  .svc__track{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .h1{font-size:17.4vw}
  .facts li,.facts li+li{display:flex;align-items:baseline;gap:16px;padding:14px 0 0;border-left:0}
  .facts li+li{margin-top:14px;border-top:1px solid var(--line)}
  .facts b{flex:none;width:118px;font-size:36px}
  .facts li>span{margin-top:0}
  .hero__cta .btn{flex:1 1 auto}
  .badge{right:-6px;top:-44px;width:92px}
  .bay__lbl span+span{display:none}
  .prow{gap:10px;padding:16px 0}
  .prow__n{font-size:16px}
  .odo{font-size:26px}
  .card{padding:22px}
  .svc__end{padding:26px 22px}
  .door__note{letter-spacing:.08em;font-size:10px}
  .door__paint{top:40%}
  .garage__head{padding:0 12px}
  .bolts{gap:6px}
}
@media (max-width:420px){
  .top__cta{display:none}
}

/* ===== audyt 24.10: tryby w tle sa celowo szersze od ekranu (demo.css ogranicza svg do 100%) ===== */
svg.bg-gear{max-width:none}