:root{
  --ink:#121212; --paper:#ffffff; --mist:#ececea; --stone:#f5f4f0; --mute:#595959; --line:rgba(0,0,0,.1);
  --pad:24px; --f:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-width:none;overflow-x:clip}
html::-webkit-scrollbar{display:none}
html.lock{overflow:hidden}
body{font-family:var(--f);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;letter-spacing:-.02em;overflow-x:clip}
a{color:inherit;text-decoration:none}
a,button,input,label{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid #2b6cff;outline-offset:3px}
h1,h2,h3,h4{font-weight:400}

/* ---------- PRELOADER ---------- */
.loader{position:fixed;inset:0;z-index:1000}
.loader .cols{position:absolute;inset:0;display:flex}
.loader .cols i{flex:1;background:var(--mist);margin-right:-1px;transition:transform 1s cubic-bezier(.76,0,.24,1)}
.loader .bar{position:absolute;top:0;left:0;right:0;height:3px;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.loader .pct{position:absolute;inset:0;display:grid;place-items:center;font-size:21px;letter-spacing:-.06em;font-variant-numeric:tabular-nums;opacity:0;transform:translateY(15px);animation:pin .6s .1s forwards}
@keyframes pin{to{opacity:1;transform:none}}
.loader.done .cols i{transform:translateY(-101%)}
.loader.done .bar,.loader.done .pct{opacity:0;animation:none;transition:opacity .25s}
.loader.done{pointer-events:none}
.loader.gone{display:none}

/* ---------- HEADER (blend: czarny na jasnym, biały na ciemnym) ---------- */
.brandmark{position:fixed;left:0;top:0;width:270px;height:270px;display:block;z-index:60;color:var(--ink);transform-origin:0 0;opacity:0;transition:opacity 1s .2s}
body.ready .brandmark{opacity:1}
.brandmark svg{width:100%;height:100%;display:block}
.hdr{position:fixed;top:0;right:0;z-index:55;padding:calc(16px + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right)) 16px var(--pad);color:var(--ink);display:flex;align-items:center;min-height:84px}
.hdr-bg{position:fixed;top:0;left:0;right:0;height:calc(84px + env(safe-area-inset-top));z-index:50;background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid rgba(0,0,0,.06);opacity:0;transform:translateY(-100%);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
body.scrolled .hdr-bg{opacity:1;transform:none}
.hdr nav{display:flex;gap:28px;transform:translateY(-68px);transition:transform 1.5s cubic-bezier(.2,1.3,.3,1) .3s}
body.ready .hdr nav{transform:none}
.hdr nav a{padding:8px 0;font-size:14px;font-weight:500;letter-spacing:0;position:relative}
.hdr nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.7,0,.3,1)}
.hdr nav a:hover::after{transform:scaleX(1);transform-origin:left}
.burger{display:none;width:48px;height:28px;position:relative;background:none;border:0;color:inherit;cursor:pointer}
.burger i{position:absolute;left:11px;width:26px;height:2px;border-radius:2px;background:currentColor;transition:top .4s,transform .4s}
.burger i:nth-child(1){top:calc(31% - 1px)}
.burger i:nth-child(2){top:calc(69% - 1px)}
body.menu-open .burger i{top:calc(50% - 1px)}
body.menu-open .burger i:nth-child(1){transform:rotate(45deg)}
body.menu-open .burger i:nth-child(2){transform:rotate(-45deg)}
.mmenu{position:fixed;inset:0 0 auto 0;z-index:45;background:#fff;padding:96px 20px 32px;transform:translateY(-100%);transition:transform .7s cubic-bezier(.76,0,.24,1)}
body.menu-open .mmenu{transform:none}
.mmenu a{display:block;padding:14px 0;border-bottom:1px solid #8f8f8f;font-size:18px;font-weight:500;letter-spacing:-.04em;text-transform:uppercase}

/* ---------- HERO ---------- */
.hero{height:420vh;position:relative}
.hero-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.scene{position:absolute;inset:-10px;border:4px solid #bfbfbf;background:var(--stone);opacity:0;transition:opacity 2.4s ease}
body.ready .scene{opacity:1;transition-delay:.8s}
/* hala produkcyjna pod manifestem */
.hall{position:absolute;inset:0;opacity:0;will-change:opacity,transform}
.hall img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.hero-img{position:absolute;inset:-6% -7%;opacity:0;will-change:transform,opacity;pointer-events:none}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.72));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent)}
.hero-txt{position:absolute;left:20px;right:20px;bottom:32px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;z-index:3;pointer-events:none}
.hero-txt p{width:289px;font-size:16px;line-height:1;letter-spacing:-.05em;opacity:0;transform:translateY(20px);transition:opacity 1s,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.hero-txt .r{text-align:right}
body.ready .hero-txt p{opacity:1;transform:none;transition-delay:1.6s}
body.ready .hero-txt .r{transition-delay:1.8s}
.statement-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(900px,calc(100% - 40px));padding:48px 52px 52px;z-index:4;color:#fff;opacity:0;pointer-events:none;text-align:center;
  background:linear-gradient(140deg,rgba(14,14,14,.82) 0%,rgba(38,44,40,.62) 55%,rgba(120,108,86,.42) 100%);
  border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.statement-box::before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.14);pointer-events:none}
.sb-label{display:block;font-size:13px;opacity:.75;margin-bottom:20px;letter-spacing:.01em}
.statement{font-size:34px;line-height:1.2;letter-spacing:-.045em;display:flex;flex-wrap:wrap;justify-content:center}
.statement span{display:inline-block;margin-right:.28em;opacity:0;transform:translateY(40px)}

/* ---------- REVEAL SŁÓW ---------- */
[data-reveal] .w{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity .7s,transform .9s cubic-bezier(.2,.8,.2,1)}
[data-reveal].in .w{opacity:1;transform:none}

/* ---------- BRAND (rozjeżdżające się nagłówki) ---------- */
.brand{overflow:hidden;padding:120px var(--pad) 140px;display:flex;flex-direction:column;align-items:center;gap:56px;background:#fff;position:relative;z-index:2}
.split-row{display:flex;justify-content:space-between;align-items:center;width:100%}
.split{position:relative;width:425px;height:122px}
.split h2{position:absolute;font-size:64px;letter-spacing:-.05em;line-height:.95;white-space:nowrap;will-change:transform}
.split .t{top:0;left:0}
.split .b{bottom:0;right:0}
.micro{width:318px;font-size:13px;line-height:1.3;color:var(--mute);text-align:center;letter-spacing:0}

/* ---------- ABOUT ---------- */
.about{height:220vh;position:relative;background:#fff}
.about-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:flex-end;padding:0 var(--pad) var(--pad)}
.about-grid{display:flex;gap:24px;width:100%;height:min(665px,calc(100vh - 110px))}
.about-l{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:10vh 0 28px}
.label{font-size:12px;letter-spacing:.02em;color:var(--mute)}
.big{font-size:28px;line-height:1.08;letter-spacing:-.03em;max-width:515px;margin-top:56px;text-transform:uppercase}
.about-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.btn{display:inline-flex;align-items:center;gap:20px;background:#d6d6d3;padding:12px 20px;font-size:12px;letter-spacing:.02em;font-weight:500;transition:gap .35s cubic-bezier(.2,.8,.2,1),background .3s}
.btn:hover{gap:10px;background:#cacac6}
.btn svg,.view svg{width:14px;height:14px}
.addr{width:170px;font-size:12px;line-height:1.25;text-align:right;text-wrap:balance}
.about-r{flex:1;position:relative;overflow:hidden;background:#0d0d0d;padding-top:0}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp .rv{clip-path:inset(100% 0 0 0)}
.cmp .edge{position:absolute;left:0;right:0;top:100%;opacity:0;height:1px;background:rgba(255,255,255,.75);z-index:2}
.cmp .edge span{position:absolute;right:12px;font-size:11px;color:#fff;letter-spacing:.04em}
.cmp .edge .up{bottom:8px}
.cmp .edge .dn{top:8px}

/* ---------- KOLEKCJA ---------- */
.coll{padding:120px var(--pad) 56px;display:flex;flex-direction:column;align-items:center;gap:48px;background:#fff}
.tri{display:flex;justify-content:space-between;width:100%}
.tri h2{flex:1;font-size:64px;letter-spacing:-.05em;line-height:.95}
.tri h2:nth-child(2){text-align:center}
.tri h2:nth-child(3){text-align:right}

/* ---------- GALERIA WARSTW ---------- */
.gal{position:relative;height:720vh}
.gal-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#111}
.layer{position:absolute;inset:0;overflow:hidden}
.layer .bg{position:absolute;inset:0;will-change:transform}
.layer .bg img{width:100%;height:100%;object-fit:cover}
.panel{position:absolute;left:50%;top:50%;width:min(520px,calc(100% - 40px));transform:translate(-50%,-50%);padding:40px 36px 32px;color:#fff;
  background:linear-gradient(140deg,rgba(18,18,18,.78) 0%,rgba(40,48,44,.55) 55%,rgba(120,110,90,.35) 100%);
  border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);will-change:transform,opacity}
.panel::before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.14);pointer-events:none}
.panel small{font-size:13px;opacity:.8;letter-spacing:.01em}
.panel h3{font-size:56px;letter-spacing:-.05em;line-height:.95;margin:12px 0 24px}
.panel .spec{display:flex;gap:28px;border-top:1px solid rgba(255,255,255,.25);padding-top:16px;margin-bottom:24px}
.panel .spec div{display:flex;flex-direction:column;gap:4px}
.panel .spec b{font-weight:400;font-size:22px;letter-spacing:-.04em}
.panel .spec span{font-size:11px;opacity:.7}
.view{display:inline-flex;align-items:center;gap:10px;font-size:13px;padding:10px 16px;border:1px solid rgba(255,255,255,.5);transition:gap .35s,background .3s}
.view:hover{gap:5px;background:rgba(255,255,255,.12)}
.layer .num{position:absolute;left:var(--pad);bottom:var(--pad);color:#fff;font-size:12px;font-variant-numeric:tabular-nums;z-index:3;text-shadow:0 1px 8px rgba(0,0,0,.4)}

/* ---------- LICZBY ---------- */
.stats{padding:120px var(--pad) 60px;display:flex;flex-direction:column;gap:56px;background:#fff}
.stats .intro{max-width:641px;font-size:24px;line-height:1.05;letter-spacing:-.05em}
.row{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:32px;padding:16px 0}
.row:last-child{border-bottom:1px solid var(--line)}
.row .lab{font-size:14px}
.slot{display:flex;font-size:104px;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;user-select:none}
.slot .d{height:1em;overflow:hidden;display:inline-block}
.slot .d i{display:flex;flex-direction:column;font-style:normal;transition:transform 1.9s cubic-bezier(.16,1,.3,1)}
.slot .d b{height:1em;display:block;font-weight:400;text-align:center}
.slot.in .d i{transform:translateY(calc(var(--n) * -1em))}

/* ---------- REALIZACJE (poziomy scroll) ---------- */
.works{position:relative;background:#fff}
.works-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:40px}
.works-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 var(--pad)}
.works-head h2{font-size:64px;letter-spacing:-.05em;line-height:.95}
.works-head .micro{text-align:right}
.track{display:flex;gap:16px;padding:0 var(--pad);width:max-content;will-change:transform}
.pc{width:clamp(280px,30vw,440px);background:var(--mist);padding:10px 10px 22px;display:flex;flex-direction:column;gap:14px}
.pc .ph{aspect-ratio:4/3;overflow:hidden;background:#ddd}
.pc .ph img{width:115%;max-width:none;height:100%;object-fit:cover;will-change:transform}
.pc h4{font-size:18px;letter-spacing:-.04em;padding:0 4px}
.pc p{font-size:13px;letter-spacing:-.02em;line-height:1.25;color:var(--mute);padding:0 4px}
.works-bar{margin:0 var(--pad);height:1px;background:var(--line);position:relative}
.works-bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- CTA ---------- */
.cta{height:400vh;position:relative;background:#fff}
.cta-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.cta-top{position:absolute;top:0;left:0;right:0;padding:80px var(--pad);display:flex;flex-direction:column;align-items:center;gap:40px;z-index:2}
.holder{position:absolute;inset:0;transform:scale(.2);z-index:1;overflow:hidden;will-change:transform}
.holder .vid{position:absolute;inset:0;transform:scale(1.5);will-change:transform}
.vid img{width:100%;height:100%;object-fit:cover;animation:kb 20s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.12) translate(-2%,-1%)}}
.vid::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.3)}
.cta-link{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 40px));text-align:center;color:#fff;z-index:3;display:flex;flex-direction:column;gap:10px;opacity:0}
.cta-link small{font-size:14px}
.cta-link a{font-size:44px;letter-spacing:-.05em;line-height:1;display:inline-block;opacity:0}
.cta-link a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.cta-link p{font-size:16px;line-height:1.25;opacity:.9}

/* ---------- FOOTER ---------- */
footer{padding:100px var(--pad) var(--pad);background:#fff;position:relative;z-index:2}
.f-top{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:90px}
.f-top .logo{width:50px;height:50px;color:var(--ink)}
.f-nav{display:flex;flex-wrap:wrap;gap:4px}
.f-nav a,.f-terms a{padding:8px 12px;font-size:14px;font-weight:500;letter-spacing:0;text-transform:uppercase}
.f-nav a:hover,.f-terms a:hover{opacity:.55}
.f-legal{display:flex;flex-direction:column;gap:8px}
.f-row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.copy{font-size:14px;font-weight:500;color:rgba(18,18,18,.7);letter-spacing:-.03em}
.soc{display:flex}
.soc a{padding:8px;display:grid;transition:opacity .3s}
.soc a:hover{opacity:.5}
.soc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.divider{height:1px;background:#c2c2c2}
.f-terms{display:flex;justify-content:space-between}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1199.98px){
  .split h2,.tri h2{font-size:46px}
  .split{width:330px;height:92px}
}
@media (max-width:809.98px){
  :root{--pad:20px}
  .hdr nav{display:none}
  .burger{display:block}
  .hero-txt{flex-direction:column;align-items:center;gap:12px}
  .hero-txt p,.hero-txt .r{width:100%;text-align:center}
  .statement{font-size:22px}
  .statement-box{padding:32px 22px 34px}
  .brand{padding:64px 20px 80px;gap:40px}
  .split-row{flex-direction:column;gap:40px}
  .split{width:100%;height:84px}
  .split h2,.tri h2{font-size:32px}
  .about{height:auto}
  .about-sticky{position:relative;height:auto;padding:40px 20px}
  .about-grid{flex-direction:column;height:auto;gap:32px}
  .about-l{padding:0;gap:40px}
  .big{font-size:21px;margin-top:32px}
  .about-bottom{flex-direction:column;align-items:flex-start;gap:16px}
  .addr{text-align:left;order:-1}
  .about-r{flex:none;height:347px}
  .coll{padding:80px 20px 40px;gap:24px}
  .tri h2{font-size:28px}
  .panel{padding:28px 22px 24px}
  .panel h3{font-size:36px}
  .panel .spec{gap:18px}
  .works-head{flex-direction:column;align-items:flex-start}
  .works-head h2{font-size:36px}
  .works-head .micro{text-align:left}
  .pc{width:78vw}
  .stats .intro{font-size:18px}
  .row{flex-direction:column;gap:12px}
  .slot{font-size:84px}
  .cta-link a{font-size:30px}
  .f-top{flex-direction:column;align-items:flex-start;gap:32px;margin-bottom:60px}
  .f-row{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .vid img{animation:none}
}
.credit{margin-top:16px;font-size:11px;color:var(--mute);padding:0 12px}
.hero-img img,.layer .bg img,.cmp img,.vid img{background:#ddd}

/* ---------- CTA -> zapowiedź konfiguratora ---------- */
.cta-next{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;padding:0 20px;opacity:0;z-index:4;visibility:hidden}
.cta-next h2{font-size:clamp(44px,9vw,128px);letter-spacing:-.06em;line-height:.88}
.cta-down{font-size:14px;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:2px}

/* ---------- KONFIGURATOR ---------- */
.cfg{background:#fff;padding:40px var(--pad) 120px;position:relative;z-index:2;scroll-margin-top:84px}
.cfg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.cfg-head h2{font-size:64px;letter-spacing:-.05em;line-height:.95}
.cfg-head .micro{text-align:right}
.cfg-app{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:24px;align-items:start}
.cfg.show-pres .cfg-app{display:none}
.cfg-plot{position:sticky;top:100px;background:var(--stone);border:1px solid var(--line);padding:16px}
.plot-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;font-size:13px;font-variant-numeric:tabular-nums}
.plot-tools{display:flex;gap:6px}
.tool{border:1px solid var(--ink);background:#fff;color:var(--ink);padding:8px 14px;font:inherit;font-size:12px;cursor:pointer;transition:background .2s,color .2s}
.tool:hover:not(:disabled){background:var(--ink);color:#fff}
.tool:disabled{opacity:.3;cursor:default}
.tool[aria-pressed="true"]{background:var(--ink);color:#fff}
.plot-sel{font-size:12px;color:var(--mute);margin-top:4px;min-height:1.2em}
.plot-wrap{outline:none}
.plot-wrap:focus-visible{outline:2px solid #2b6cff;outline-offset:4px}
#plot{width:100%;height:auto;max-height:calc(100vh - 240px);display:block;margin:0 auto;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
#plot text{font-family:var(--f);fill:#121212;letter-spacing:0}
#plot .mod{cursor:grab}
#plot.dragging,#plot.dragging .mod{cursor:grabbing}
#plot .mod text{pointer-events:none}
#plot .mod .body{stroke:#121212;stroke-width:.08;transition:fill .2s}
#plot .mod:hover .body{stroke-width:.14}
#plot .mod.sel .body{stroke:#2b6cff;stroke-width:.2}
#plot .mod.bad .body{stroke:#c0392b;stroke-width:.2;fill:#f1c7bf}
.plot-hint{font-size:12px;color:var(--mute);margin-top:10px}

.cfg-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.step{border:1px solid var(--line);padding:14px 18px 20px}
.step legend{display:flex;align-items:center;gap:10px;font-size:18px;letter-spacing:-.03em;padding:0 6px}
.step legend span{width:24px;height:24px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:12px;letter-spacing:0}
.field{display:grid;grid-template-columns:90px 1fr 52px;align-items:center;gap:12px;font-size:13px;margin-top:14px}
.field output{text-align:right;font-variant-numeric:tabular-nums}
input[type=range]{accent-color:var(--ink);width:100%}
input[type=checkbox]{accent-color:var(--ink);width:16px;height:16px;vertical-align:-3px}
.chk{display:flex;gap:10px;align-items:center;font-size:13px;margin-top:16px;cursor:pointer}
.cat h4{font-size:12px;color:var(--mute);font-weight:500;margin:16px 0 8px}
.mod-item{width:100%;display:grid;grid-template-columns:14px minmax(0,1fr) auto 28px;align-items:center;gap:12px;padding:10px;background:#fff;border:1px solid var(--line);margin-bottom:6px;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color .2s,background .2s}
.mod-item:hover{border-color:var(--ink);background:var(--stone)}
.mod-item i{width:14px;height:14px;border:1px solid rgba(0,0,0,.25)}
.mod-item b{display:block;font-size:14px;font-weight:500;letter-spacing:-.02em}
.mod-item small{font-size:12px;color:var(--mute)}
.mod-item em{font-style:normal;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.mod-item .plus{width:28px;height:28px;border:1px solid var(--ink);display:grid;place-items:center;font-size:16px;position:relative}
.mod-item .cnt{position:absolute;top:-8px;right:-8px;background:var(--ink);color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:8px;display:grid;place-items:center;padding:0 4px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.seg label{cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label>span{display:block;border:1px solid var(--line);padding:14px;height:100%;transition:background .25s,color .25s,border-color .25s}
.seg input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}
.seg input:focus-visible+span{outline:2px solid #2b6cff;outline-offset:2px}
.seg b{display:block;font-weight:500;font-size:14px;margin-bottom:6px}
.seg small{font-size:12px;opacity:.75;line-height:1.3;display:block}
.ex{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer}
.ex:last-child{border-bottom:0}
.ex span{display:flex;gap:10px;align-items:center}
.ex em{font-style:normal;font-variant-numeric:tabular-nums;white-space:nowrap}

.sum{background:var(--ink);color:#fff;padding:22px}
.sum-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.sum-grid span{display:block;font-size:11px;opacity:.6;margin-bottom:4px}
.sum-grid b{font-weight:400;font-size:22px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.sum-lines>div{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:8px 0;border-top:1px solid rgba(255,255,255,.15);font-variant-numeric:tabular-nums}
.sum-total{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;border-top:1px solid rgba(255,255,255,.5);padding-top:14px;margin-top:4px;font-size:13px}
.sum-total b{font-size:32px;font-weight:400;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.warn{list-style:none;margin-top:14px;font-size:12px;line-height:1.35;color:#ffd3a6;display:flex;flex-direction:column;gap:6px}
.warn li::before{content:"! ";font-weight:600}
.finish{width:100%;margin-top:18px;background:#fff;color:var(--ink);border:0;padding:16px;font:inherit;font-weight:500;font-size:15px;cursor:pointer;transition:opacity .2s}
.finish:hover:not(:disabled){opacity:.85}
.finish:disabled{opacity:.3;cursor:not-allowed}
.fine{font-size:11px;opacity:.6;margin-top:12px;line-height:1.35}

/* ---------- PREZENTACJA DOMU ---------- */
.pres{position:relative;height:min(88vh,880px);overflow:hidden;background:#111}
.pres[hidden]{display:none}
.pres-img{position:absolute;inset:0;overflow:hidden}
.pres-img img{width:100%;height:100%;object-fit:cover;animation:presIn 2.6s cubic-bezier(.2,.8,.2,1) both,kb 22s 2.6s ease-in-out infinite alternate}
@keyframes presIn{from{transform:scale(1.18);filter:blur(10px);opacity:0}to{transform:scale(1);filter:blur(0);opacity:1}}
@keyframes up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.pres-card{position:absolute;left:24px;bottom:24px;width:min(440px,calc(100% - 48px));background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:28px;animation:up .9s .9s both}
.pres-card small,.pres-plan small{font-size:12px;color:var(--mute)}
.pres-card h3{font-size:40px;letter-spacing:-.05em;line-height:.95;margin:8px 0 18px}
.pres-card .spec{display:flex;gap:24px;border-top:1px solid var(--line);padding-top:14px}
.pres-card .spec div{display:flex;flex-direction:column;gap:3px}
.pres-card .spec b{font-weight:400;font-size:20px;letter-spacing:-.04em}
.pres-card .spec span{font-size:11px;color:var(--mute)}
.pres-price{font-size:30px;letter-spacing:-.05em;margin:18px 0;font-variant-numeric:tabular-nums}
.pres-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-solid{background:var(--ink);color:#fff;padding:14px 22px;font-size:14px;font-weight:500;display:inline-flex;gap:12px;align-items:center;transition:gap .3s}
.btn-solid:hover{gap:8px}
.btn-line{background:none;border:1px solid var(--ink);color:var(--ink);padding:14px 22px;font:inherit;font-size:14px;cursor:pointer}
.pres-card .fine{opacity:1;color:var(--mute)}
.pres-plan{position:absolute;right:24px;top:24px;width:280px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:14px;animation:up .9s 1.3s both}
.pres-plan svg{width:100%;height:auto;max-height:280px;display:block;margin-top:8px;pointer-events:none}
.pres-plan svg text{font-family:var(--f)}

@media (max-width:1100px){
  .cfg-app{grid-template-columns:1fr}
  .cfg-plot{position:relative;top:auto}
  #plot{max-height:72vh}
}
@media (max-width:809.98px){
  .cfg-head{flex-direction:column;align-items:flex-start}
  .cfg-head h2{font-size:36px}
  .cfg-head .micro{text-align:left}
  .field{grid-template-columns:78px 1fr 46px}
  .seg{grid-template-columns:1fr}
  .sum-grid b{font-size:18px}
  .pres{height:auto;background:#fff}
  .pres-img{position:relative;height:62vh}
  .pres-card,.pres-plan{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;margin-top:12px;background:var(--stone)}
  .pres-card h3{font-size:30px}
}
@media (prefers-reduced-motion:reduce){.pres-img img{animation:none}}

/* ---------- LOGO: moduły układają się przy starcie ---------- */
.brandmark svg{overflow:visible}
.brandmark .m-top{transform:translateY(-16px);opacity:0;transition:transform 1.1s cubic-bezier(.2,1.4,.3,1) .9s,opacity .5s .9s}
.brandmark .m-slit{opacity:0;transition:opacity .4s 1.6s}
.brandmark .m-base{stroke-dasharray:110;stroke-dashoffset:110;transition:stroke-dashoffset 1.2s cubic-bezier(.6,0,.2,1) .2s}
.brandmark .m-door,.brandmark .m-win{opacity:0;transition:opacity .5s 1.3s}
.brandmark .m-ground{stroke-dasharray:46;stroke-dashoffset:46;transition:stroke-dashoffset .9s cubic-bezier(.6,0,.2,1)}
body.ready .brandmark .m-top{transform:none;opacity:1}
body.ready .brandmark .m-slit,body.ready .brandmark .m-door,body.ready .brandmark .m-win{opacity:1}
body.ready .brandmark .m-base,body.ready .brandmark .m-ground{stroke-dashoffset:0}
.brandword{position:fixed;left:50%;top:0;z-index:60;transform:translateX(-50%);pointer-events:none;color:var(--ink)}
.bw-in{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0}
.brandword b{font-weight:500;font-size:clamp(34px,5.4vw,64px);letter-spacing:.32em;margin-right:-.32em;line-height:1}
.brandword span{font-size:clamp(11px,1.1vw,14px);letter-spacing:.42em;margin-right:-.42em;text-transform:uppercase;color:var(--mute)}
body.ready .bw-in{animation:bwIn 1.3s 1.5s cubic-bezier(.2,.8,.2,1) both}
@keyframes bwIn{from{opacity:0;filter:blur(8px);transform:translateY(14px)}to{opacity:1;filter:blur(0);transform:none}}
footer .logo{overflow:visible}
footer .logo .m-slit{stroke:#fff}

/* ---------- MOBILE: pasek ceny i komunikat w konfiguratorze ---------- */
.cfg-mbar{display:none}
.cfg-toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:#fff;font-size:13px;padding:10px 16px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:70;white-space:nowrap}
.cfg-toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:809.98px){
  .cfg-mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:65;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:rgba(18,18,18,.94);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    transform:translateY(110%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .cfg-mbar.on{transform:none}
  .cfg-mbar small{display:block;font-size:11px;opacity:.65}
  .cfg-mbar b{font-weight:400;font-size:22px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
  .cfg-mbar button{background:#fff;color:var(--ink);border:0;padding:12px 16px;font:inherit;font-size:14px;font-weight:500;min-height:44px}
  .cfg{padding-bottom:110px}
  .plot-bar{flex-wrap:wrap}
  .plot-tools{width:100%}
  .plot-tools .tool{flex:1;min-height:40px;padding:8px 6px;white-space:nowrap}
  .cfg-plot{padding:12px}
  .mod-item{padding:12px 10px}
  .mod-item .plus{width:36px;height:36px}
  .mod-item{grid-template-columns:14px minmax(0,1fr) auto 36px}
  .cta-link a{font-size:22px;overflow-wrap:anywhere}
  .hero-txt{bottom:calc(24px + env(safe-area-inset-bottom))}
  .brandword b{font-size:30px}
  .works-head h2,.cfg-head h2{font-size:34px}
  .pres-actions .btn-solid,.pres-actions .btn-line{flex:1;justify-content:center;text-align:center}
  .panel .view{min-height:44px}
  footer{padding-bottom:calc(var(--pad) + env(safe-area-inset-bottom))}
  .f-nav a,.f-terms a{padding:10px 12px}
}
@media (max-width:380px){
  .panel h3{font-size:30px}
  .panel .spec b{font-size:18px}
  .sum-grid b{font-size:16px}
  .sum-total b{font-size:26px}
  .slot{font-size:68px}
}
.cfg-plot{scroll-margin-top:96px}

/* ---------- MOBILE PIONOWO: konfigurator ----------
   Plan działki przewija się razem ze stroną (bez sticky); przycisk „Plan działki ↑” w dolnym pasku wraca do niego. */
#plot .mod{touch-action:none}
@media (max-width:1100px){
  #plot{max-height:72vh;max-height:72svh}
}
@media (max-width:809.98px){
  .cfg-plot{position:relative;top:auto;z-index:auto;padding:8px 10px 6px;box-shadow:none}
  .plot-bar{flex-wrap:nowrap;margin-bottom:6px;gap:8px}
  #plotInfo{flex:0 0 auto;white-space:nowrap}
  .plot-tools{width:auto;flex:1 1 auto;min-width:0}
  .plot-tools .tool{min-height:36px;padding:6px 4px}
  #plot{max-height:clamp(220px,46vh,440px);max-height:clamp(220px,46svh,440px)}
  .plot-hint{display:none}
  .plot-sel{margin-top:4px;min-height:16px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mod-item{grid-template-columns:14px minmax(0,1fr) 36px;column-gap:10px;row-gap:2px}
  .mod-item>i{grid-column:1;grid-row:1 / span 2;align-self:start;margin-top:3px}
  .mod-item>span:not(.plus){grid-column:2;grid-row:1}
  .mod-item>em{grid-column:2;grid-row:2}
  .mod-item>.plus{grid-column:3;grid-row:1 / span 2;align-self:center}
  .cfg-toast{max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}
  .pres-img{height:62vh;height:62svh}
}