:root{
  /* role kolorów */
  --bg:#0d0f12; --surface:#14171c; --surface-2:#1b1f26;
  --paper:#f2f0ec; --card:#fff;
  --text:#f2f0ec; --text-2:#aeaca7; --ink:#14161a; --ink-2:#5b5a56;
  --accent:#ff4a1c;
  --wa:#25d366; --wa-ink:#0d0f12; --ink-3:#2a2c30; --ph-bg:#d9d7d2;
  --line-d:rgba(255,255,255,.12); --line-l:rgba(0,0,0,.09);
  /* skala */
  --r-pill:999px; --r-card:28px; --r-img:16px;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(16px,5vw,80px);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:Archivo,system-ui,sans-serif;font-stretch:100%;background:var(--bg);color:var(--text);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--accent);color:#fff}
html{scrollbar-color:var(--accent) var(--bg)}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* HERO */
.hero{position:relative;isolation:isolate;min-height:clamp(440px,38vw,560px);display:flex;align-items:stretch;overflow:hidden}
.hero>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;z-index:-2;filter:grayscale(1) contrast(1.05)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,15,18,.55) 0%,rgba(13,15,18,.35) 40%,rgba(13,15,18,.92) 100%)}
.hero .wrap{width:100%;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;column-gap:32px;padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(24px,3vw,48px)}
.logo{display:block;width:clamp(120px,12vw,168px);height:auto;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 6px rgba(255,255,255,.1),0 20px 50px rgba(0,0,0,.5);transition:transform .7s var(--ease)}
.logo:hover{transform:scale(1.03)}
.logo img{width:100%;height:100%;border-radius:50%;display:block}
.hero h1{justify-self:end;align-self:start;font-stretch:112%;font-weight:600;font-size:clamp(40px,5.2vw,76px);line-height:1.04;letter-spacing:-.035em;text-align:right;text-wrap:balance;padding-top:8px}
.hero h1 span{color:var(--accent)}
.contacts{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.contacts.l{grid-column:1/2;align-self:end}
.contacts.r{grid-column:2/3;justify-self:end;align-self:end}
.pill{font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 24px 0 8px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);border:1px solid var(--line-d);backdrop-filter:blur(14px);text-decoration:none;font-weight:600;font-size:clamp(17px,1.7vw,22px);letter-spacing:-.01em;transition:transform .7s var(--ease),background .4s}
.pill:hover{transform:translateY(-3px);background:rgba(255,255,255,.14)}
.pill i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff}
.pill svg,.wa svg{width:20px;height:20px;fill:currentColor}
.wa{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--wa);color:var(--wa-ink);text-decoration:none;transition:transform .7s var(--ease)}
.wa:hover{transform:translateY(-3px) scale(1.04)}
.wa svg{width:28px;height:28px}

/* MARKI */
.brands{background:var(--paper);color:var(--ink);padding:clamp(56px,8vw,112px) 0}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;background:var(--card);border:1px solid var(--line-l);border-radius:var(--r-card);padding:28px 24px 24px;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.card:hover{transform:translateY(-4px) scale(1.006);box-shadow:0 24px 50px -20px rgba(0,0,0,.28)}
.card h3{font-stretch:112%;font-weight:700;font-size:20px;letter-spacing:.02em;text-transform:uppercase;margin-bottom:20px}
.card .ph{width:100%;aspect-ratio:4/3;border-radius:var(--r-img);overflow:hidden;background:var(--ph-bg)}
.card .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.card:hover .ph img{transform:scale(1.05)}
.card .u{margin-top:20px;font-size:13px;color:var(--ink-2)}
.card .n{font:500 16px 'JetBrains Mono',monospace;letter-spacing:.04em;color:var(--ink);margin:2px 0 16px;text-transform:none}
.card .al{height:34px;width:auto;margin-top:auto}

/* ASORTYMENT */
.range{background:var(--bg);padding:clamp(56px,8vw,112px) 0}
h2{text-wrap:balance;font-stretch:112%;font-weight:600;font-size:clamp(32px,3.6vw,48px);line-height:1.05;letter-spacing:-.035em;margin-bottom:clamp(32px,4vw,56px)}
h2::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--accent);margin-bottom:20px}
.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px)}
.col{display:flex;flex-direction:column;gap:20px}
.grp{background:var(--surface);border:1px solid var(--line-d);border-radius:20px;padding:24px}
.grp h3{font:500 12px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.grp ul{list-style:none;padding:0;margin-top:14px;display:flex;flex-direction:column;gap:6px;color:var(--text-2);font-size:15px}
.grp li{padding-left:16px;position:relative}
.grp li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:2px;background:var(--accent)}

/* O FIRMIE */
.about{background:var(--paper);color:var(--ink);padding:clamp(56px,8vw,112px) 0}
.about .txt{max-width:70ch;display:flex;flex-direction:column;gap:20px;font-size:17px;color:var(--ink-3);text-wrap:pretty}
.about h2{color:var(--ink)}

/* STOPKA */
footer{background:var(--bg)}
.foot{display:grid;grid-template-columns:240px repeat(3,1fr);gap:clamp(24px,3vw,56px);padding:clamp(48px,6vw,80px) 0;align-items:start}
.foot .lg{display:grid;place-items:center;background:var(--surface-2);border-radius:var(--r-card);padding:32px}
.foot .lg img{width:140px;height:140px;border-radius:50%}
.foot h3{font:500 12px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.foot p{color:var(--text-2);font-size:15px;line-height:1.7;text-wrap:pretty}
.foot p+p{margin-top:16px}
.foot p a{transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.foot p a:hover{color:var(--text);text-decoration-color:var(--text)}
.foot b{color:var(--text);font-weight:600}
.foot p a{display:inline-block;padding-block:12px;margin-block:-12px;text-decoration-color:var(--accent);text-underline-offset:4px;overflow-wrap:anywhere}
.foot .wa{margin:20px 0 12px}
.copy{border-top:1px solid var(--line-d);padding:20px 0;text-align:right;font-size:13px;color:var(--text-2)}

/* RUCH */
/* listy: karty marek i grupy asortymentu wchodzą kaskadowo (maks. 240 ms) */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.js .rv.in{opacity:1;transform:none}
.d1{--i:1}.d2{--i:2}.d3{--i:3}
.col:nth-child(2) .rv{--i:1}.col:nth-child(3) .rv{--i:2}.col:nth-child(4) .rv{--i:3}
/* nagłówki sekcji: tylko pasek akcentu dorysowuje się */
.js h2.rv{opacity:1;transform:none;transition:none}
.js h2.rv::before{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .1s}
.js h2.rv.in::before{transform:none}
/* sprzężenie zwrotne */
.pill:active,.wa:active,.card:active{transform:scale(.98);transition-duration:.12s}
.card:active{transform:translateY(-1px) scale(.99)}

/* scena główna: hero „zapala się” */
@keyframes lights{to{opacity:0}}
@keyframes settle{from{transform:scale(1.06)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes wipe{from{clip-path:inset(-12% 102% -12% 0)}to{clip-path:inset(-12% -2% -12% 0)}}
@keyframes ringin{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .js .hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);animation:lights 1.2s var(--ease) .1s both}
  .js .hero>img.bg{animation:settle 1.8s var(--ease) both}
  .js .hero h1{animation:rise .8s var(--ease) .15s both}
  .js .hero h1 span{display:inline-block;animation:wipe .8s var(--ease) .55s both}
  .js .hero .logo{animation:ringin .8s var(--ease) .3s both}
  .js .contacts.l{animation:rise .8s var(--ease) .65s both}
  .js .contacts.r{animation:rise .8s var(--ease) .8s both}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);animation:lights .4s linear both}
  .js .rv{transform:none;transition:opacity .3s}
  .js h2.rv::before{transform:none;transition:none}
  .logo:hover,.pill:hover,.wa:hover,.card:hover,.card:hover .ph img,.pill:active,.wa:active,.card:active{transform:none}
}

/* TABLET */
@media(max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr 1fr}
  .foot .lg{grid-column:1/-1}
}
/* MOBILE */
@media(max-width:640px){
  body{font-size:16px}
  .hero{min-height:0}
  .hero .wrap{grid-template-columns:1fr;grid-template-rows:auto;justify-items:center;row-gap:20px;padding-top:28px;padding-bottom:32px}
  .hero h1{order:1;justify-self:center;text-align:center;font-size:40px;padding:0}
  .logo{order:2}
  .contacts.l,.contacts.r{order:3;grid-column:1;justify-self:stretch;justify-content:center}
  .contacts.r{order:4}
  .pill{height:56px;flex:1;justify-content:center;padding-right:20px;min-width:0}
  .cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin:0 calc(var(--gutter)*-1);padding:4px var(--gutter) 24px;scrollbar-width:none}
  .cards::-webkit-scrollbar{display:none}
  .card{flex:0 0 78%;scroll-snap-align:center}
  .cols{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .copy{text-align:left}
}

/* 404 */
.nf{min-height:100svh;display:grid;align-items:center}
.nf h1{font-size:clamp(36px,5vw,64px);line-height:1.05;letter-spacing:-.035em;font-stretch:112%;font-weight:600;margin-bottom:24px}
.nf p{margin-bottom:32px}
.nf .pill{background:var(--bg);color:var(--text);padding-left:24px;display:inline-flex}