:root{
  --ground:#EDEFF0;
  --surface:#FFFFFF;
  --graphite:#14181C;
  --graphite-2:#1D242A;
  --ink:#11161A;
  --muted:#5C6873;
  --line:#D2D8DC;
  --line-dark:#2C353C;
  --accent:#0B7FA6;
  --accent-bright:#30BBE6;
  --alert:#D92D20;
  --display:"Bahnschrift","DIN Alternate","Oswald","Segoe UI",system-ui,sans-serif;
  --body:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono",ui-monospace,monospace;
  --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.04;margin:0;text-wrap:balance;letter-spacing:-.005em}
p{margin:0}
a{color:inherit}
/* height:auto jest konieczne, bo atrybuty width/height w znaczniku działają jak wskazówka CSS:
   bez tego max-width skaluje szerokość, a wysokość zostaje przy wartości z pliku i obraz się rozjeżdża */
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}

.tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.tag::before{content:"";width:26px;height:1px;background:currentColor;opacity:.5}
.tag--on-dark{color:#8FA3B0}


/* ══ nagłówek ══ */
.top{position:sticky;top:0;z-index:60;background:var(--graphite);border-bottom:1px solid var(--line-dark)}
.top__in{display:flex;align-items:center;gap:28px;height:66px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.logo{height:34px;width:auto;flex:none}
.brand__nm{
  font-family:var(--display);font-size:14px;line-height:1.06;color:#EAF0F4;
  letter-spacing:.015em;text-transform:uppercase;
}
@media(max-width:420px){.brand__nm{display:none}}
.nav{display:flex;gap:26px;margin-left:auto;font-size:14.5px}
.nav a{color:#B9C6CF;text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.nav a:hover{color:#fff;border-bottom-color:var(--accent-bright)}
.nav a[data-active]{color:#fff;border-bottom-color:var(--accent-bright)}
.top .btn{flex:none}
.progress{position:absolute;left:0;bottom:-1px;height:2px;background:var(--accent-bright);width:0;transition:width .1s linear}

/* ── menu rozwijane „Usługi” ── */
.nav__grp{position:relative;display:flex}
.nav__top{
  font:inherit;font-size:14.5px;color:#B9C6CF;background:none;border:0;cursor:pointer;
  padding:6px 0;border-bottom:1px solid transparent;display:inline-flex;align-items:center;gap:6px;
  transition:color .18s,border-color .18s;
}
.nav__top::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.nav__top:hover{color:#fff;border-bottom-color:var(--accent-bright)}
.nav__top[data-active]{color:#fff;border-bottom-color:var(--accent-bright)}
.nav__top[aria-expanded="true"]::after{transform:rotate(225deg) translate(-3px,-3px)}
.nav__sub{
  position:absolute;top:calc(100% + 12px);left:-18px;min-width:232px;z-index:70;
  background:var(--graphite);border:1px solid var(--line-dark);
  display:flex;flex-direction:column;box-shadow:0 18px 40px #0000005C;
}
.nav__sub[hidden]{display:none}
.nav__sub a{padding:12px 18px;border-bottom:1px solid var(--line-dark);white-space:nowrap}
.nav__sub a:last-child{border-bottom:0}
.nav__sub a:hover{background:#242D34;color:#fff;border-bottom-color:var(--line-dark)}
.nav__sub a[data-active]{color:var(--accent-bright)}

/* ── okruszki ── */
.crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;display:flex;align-items:center;gap:9px;margin-bottom:20px;flex-wrap:wrap}
.crumbs a{color:#8FA3B0;text-decoration:none;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.crumbs a:hover{color:#fff;border-bottom-color:var(--accent-bright)}
.crumbs i{font-style:normal;color:#5C6873}
.crumbs b{font-weight:400;color:#DCE4E9}
.crumbs--light a{color:var(--muted)}
.crumbs--light a:hover{color:var(--accent)}
.crumbs--light b{color:var(--ink)}

/* ── menu na telefonie ── */
.burger{display:none;margin-left:auto;width:44px;height:44px;padding:11px 10px;background:transparent;border:1px solid var(--line-dark);cursor:pointer;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:#DCE4E9;transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.mnav{position:fixed;inset:66px 0 0;z-index:55;background:var(--graphite);overflow-y:auto;padding:8px var(--pad) 32px;display:flex;flex-direction:column}
.mnav[hidden]{display:none}
.mnav nav{display:flex;flex-direction:column}
.mnav a{color:#DCE4E9;text-decoration:none;font-family:var(--display);font-size:20px;padding:16px 0;border-bottom:1px solid var(--line-dark)}
.mnav__h{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#7E909C;padding:20px 0 8px}
.mnav .mnav__in{padding-left:16px;font-size:18px;border-left:1px solid var(--line-dark)}
.mnav a[data-active]{color:var(--accent-bright)}
.mnav a:active{color:var(--accent-bright)}
.mnav__cta{margin-top:26px;justify-content:center}
body[data-lock]{overflow:hidden}
@media(max-width:860px){
  .nav{display:none}
  .burger{display:flex}
  /* .top__cta samo w sobie przegrywa z .btn, bo .btn jest niżej w arkuszu przy tej samej
     szczegółowości — stąd selektor z rodzicem, inaczej przycisk wypycha hamburgera poza ekran */
  .top .top__cta{display:none}
}
@media(min-width:861px){.mnav{display:none}}

.btn{font-family:var(--display);font-size:15px;letter-spacing:.02em;display:inline-flex;align-items:center;gap:9px;padding:11px 20px;background:var(--accent);color:#fff;text-decoration:none;border:0;cursor:pointer;transition:background .18s,transform .18s}
.btn:hover{background:#0A6B8C}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;border:1px solid var(--line-dark);color:#DCE4E9}
.btn--ghost:hover{background:#242D34;border-color:#3D4952}
/* .btn--ghost jest pod ciemne tło; ten wariant jest czytelny na jasnych sekcjach */
.btn--line{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn--line:hover{background:var(--surface);border-color:var(--accent);color:var(--accent)}
.btn--bright{background:var(--accent-bright);color:#07141B}
.btn--bright:hover{background:#5ACBEE}
.btn--sm{padding:8px 14px;font-size:13.5px}

/* ══ reveal ══ */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.rv[data-in]{opacity:1;transform:none}

/* ══ hero ══ */
.hero{background:var(--graphite);color:#EEF3F6;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;opacity:.5;background-image:linear-gradient(#FFFFFF0C 1px,transparent 1px),linear-gradient(90deg,#FFFFFF0C 1px,transparent 1px);background-size:64px 64px}
.hero__in{position:relative;display:grid;grid-template-columns:.66fr 1fr;gap:clamp(28px,5vw,58px);align-items:center;padding-block:clamp(52px,8vw,92px)}
.hero h1{font-size:clamp(34px,4.9vw,58px);letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--accent-bright)}
.hero__lead{color:#A9BAC5;max-width:40ch;margin-top:18px;font-size:16.8px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero__tag{margin-bottom:22px}
.spec{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);margin-top:44px}
.spec div{background:var(--graphite);padding:16px 18px}
.spec dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7E909C;margin-bottom:7px}
.spec dd{font-family:var(--display);font-size:26px;margin:0;color:#fff;font-variant-numeric:tabular-nums}
.spec dd span{font-size:14px;color:#8FA3B0;margin-left:3px}

/* przełącznik zdjęcia w hero */
.hero__fig{position:relative}
.hero__stack{position:relative;aspect-ratio:5/4}
.hero__stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.06);opacity:0;transition:opacity .55s}
.hero__stack img[data-on]{opacity:1}
.hero__fig figcaption{position:absolute;left:0;bottom:0;background:var(--graphite);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8FA3B0;padding:8px 14px;border-top:1px solid var(--line-dark);border-right:1px solid var(--line-dark);z-index:2}
.hero__fig::after{content:"";position:absolute;top:-9px;right:-9px;width:34px;height:34px;border-top:2px solid var(--accent-bright);border-right:2px solid var(--accent-bright);z-index:3}
.hero__dots{position:absolute;right:10px;bottom:10px;display:flex;gap:6px;z-index:3}
.hero__dots button{width:26px;height:4px;border:0;background:#FFFFFF44;cursor:pointer;padding:0;transition:background .2s}
.hero__dots button[data-on]{background:var(--accent-bright)}
@media(max-width:900px){.hero__in{grid-template-columns:1fr}.hero__fig{order:-1}.spec{margin-top:32px}}
@media(max-width:520px){.spec{grid-template-columns:1fr}}

/* ══ podstrony usług ══ */
.shero{background:var(--graphite);color:#EEF3F6;position:relative;overflow:hidden}
.shero::before{content:"";position:absolute;inset:0;opacity:.5;background-image:linear-gradient(#FFFFFF0C 1px,transparent 1px),linear-gradient(90deg,#FFFFFF0C 1px,transparent 1px);background-size:64px 64px}
.shero__in{position:relative;display:grid;grid-template-columns:1fr .82fr;gap:clamp(28px,5vw,58px);align-items:center;padding-block:clamp(46px,7vw,84px)}
.shero h1{font-size:clamp(32px,4.6vw,54px);letter-spacing:-.02em;margin-top:20px}
.shero h1 em{font-style:normal;color:var(--accent-bright)}
.shero__lead{color:#A9BAC5;max-width:52ch;margin-top:18px;font-size:16.8px}
.shero .hero__cta{margin-top:30px}
.shero .spec{margin-top:38px}
.shero__fig{margin:0;position:relative}
.shero__fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.shero__fig::after{content:"";position:absolute;top:-9px;right:-9px;width:34px;height:34px;border-top:2px solid var(--accent-bright);border-right:2px solid var(--accent-bright)}
.shero__fig .viz{position:absolute;top:0;left:0;z-index:2;font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;background:#14181CD9;color:#DCE4E9;padding:6px 10px}
@media(max-width:900px){.shero__in{grid-template-columns:1fr}.shero__fig{order:-1}}

/* odsyłacze do pozostałych usług */
.xgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.xlink{background:var(--surface);padding:24px 22px 28px;text-decoration:none;display:flex;flex-direction:column;gap:9px;transition:background .2s}
.xlink:hover{background:#F8FAFB}
.xlink span{font-family:var(--display);font-size:19px;color:var(--ink)}
.xlink span::after{content:" →";color:var(--accent)}
.xlink em{font-style:normal;color:var(--muted);font-size:14.8px;line-height:1.6}
@media(max-width:760px){.xgrid{grid-template-columns:1fr}}

/* zamknięcie podstrony */
.scta{text-align:center}
.scta h2{font-size:clamp(26px,3.6vw,40px)}
.scta h2 em{font-style:normal;color:var(--accent)}
.scta p{color:var(--muted);max-width:56ch;margin:16px auto 28px}

/* ══ sekcje ══ */
section{padding-block:clamp(56px,8vw,104px)}
.head{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,64px);align-items:end;margin-bottom:44px}
.head h2{font-size:clamp(28px,4.2vw,46px)}
.head h2 em,.form-side h2 em{font-style:normal;color:var(--accent)}
.smart h2 em{color:var(--accent-bright)}
.head p{color:var(--muted);max-width:52ch;font-size:16.5px}
@media(max-width:820px){.head{grid-template-columns:1fr;gap:16px;align-items:start}}

.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.svc article{background:var(--surface);padding:30px 26px 34px;display:flex;flex-direction:column;gap:11px;transition:background .2s,transform .2s;position:relative}
.svc article::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.svc article:hover{background:#F8FAFB}
.svc article:hover::after{transform:scaleX(1)}
.svc h3{font-size:21px}
.svc p{color:var(--muted);font-size:15.5px}
.svc .num{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.12em}

.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.2vw,26px);counter-reset:step}
.proc article{counter-increment:step;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.proc article:hover{transform:translateY(-4px);box-shadow:0 12px 28px #14181C14}
.proc img{aspect-ratio:3/2;object-fit:cover;border-bottom:1px solid var(--line)}
.proc__b{padding:20px 20px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.proc h3{font-size:18.5px;display:flex;align-items:baseline;gap:10px}
.proc h3::before{content:counter(step,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.08em}
.proc p{color:var(--muted);font-size:14.8px;line-height:1.6}
@media(max-width:960px){.proc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.proc{grid-template-columns:1fr}}

/* ══ smart breloki ══ */
.smart{background:var(--graphite-2);color:#EDF2F5}
.smart__in{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,68px);align-items:center}
.smart h2{font-size:clamp(28px,4.2vw,46px);margin-block:20px 18px}
.smart h2 em{font-style:normal;color:var(--accent-bright)}
.smart p{color:#A9BAC5;max-width:48ch}
.smart__list{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:11px}
.smart__list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:#C6D2DA}
.smart__list li::before{content:"";flex:none;width:7px;height:7px;margin-top:8px;background:var(--accent-bright)}
.smart .btn{margin-top:30px}
@media(max-width:900px){.smart__in{grid-template-columns:1fr}}

/* ── zestaw: brelok + telefon jako jeden produkt ── */
.combo{position:relative;display:flex;align-items:center;justify-content:center;gap:0;padding-block:10px}
/* wspólna poświata spina obie rzeczy w jedną scenę */
.combo::before{
  content:"";position:absolute;width:min(560px,102%);height:78%;border-radius:50%;
  background:radial-gradient(ellipse,#30BBE61F 0%,#30BBE60A 45%,transparent 72%);
  pointer-events:none;
}

/* brelok — render produktowy z wyciętym tłem */
.keyring{
  width:min(130px,25vw);flex:none;margin:0 -22px 0 0;z-index:2;
  filter:drop-shadow(0 20px 26px #000000A6);
}
.keyring img{width:100%;height:auto;display:block}

/* telefon — proporcje i detale iPhone'a Pro Max */
.phone{
  position:relative;width:min(286px,64vw);aspect-ratio:1320/2868;flex:none;
  border-radius:54px;padding:7px;
  /* szczotkowany tytan: jasne krawędzie, ciemniejsze płaskie boki */
  background:
    linear-gradient(105deg,
      #6E767C 0%, #C3CBD1 4%, #8E969C 9%,
      #4C5359 22%, #3C4247 50%, #4C5359 78%,
      #8E969C 91%, #C3CBD1 96%, #6E767C 100%);
  box-shadow:
    0 34px 70px -20px #000B,
    0 0 0 1px #0F1316,
    0 1px 1px #FFFFFF4D inset,
    0 -1px 1px #00000059 inset;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.phone:hover{transform:translateY(-7px)}
/* czarna krawędź pod szkłem */
.phone__glass{
  position:relative;width:100%;height:100%;border-radius:47px;background:#07090B;
  padding:2px;box-shadow:0 0 0 1px #000 inset;
}

/* przyciski tytanowe */
.btns i{position:absolute;background:linear-gradient(180deg,#9AA2A8,#5A6167 40%,#42484D);border-radius:2px;display:block}
.btns i.act{left:-2.5px;top:19%;width:3px;height:4.6%;border-radius:2px 0 0 2px}   /* Action Button */
.btns i.vup{left:-2.5px;top:27.5%;width:3px;height:7.4%;border-radius:2px 0 0 2px}
.btns i.vdn{left:-2.5px;top:36.5%;width:3px;height:7.4%;border-radius:2px 0 0 2px}
.btns i.pwr{right:-2.5px;top:30%;width:3px;height:10.4%;border-radius:0 2px 2px 0}
.btns i.cam{right:-2.5px;top:45%;width:3px;height:5.6%;border-radius:0 2px 2px 0;
  background:linear-gradient(180deg,#C9D0D5,#7E868C 45%,#585F65)}                  /* Camera Control */

.screen{
  position:relative;width:100%;height:100%;border-radius:45px;overflow:hidden;
  background:#E9EBEC;color:#111418;display:flex;flex-direction:column;
}
/* geometryczny wzór tła e-wizytówki */
.screen::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(30deg,#0000 47%,#C9CDD0 47% 49%,#0000 49%),
    linear-gradient(-30deg,#0000 47%,#C9CDD0 47% 49%,#0000 49%),
    linear-gradient(90deg,#0000 47%,#C9CDD0 47% 49%,#0000 49%);
  background-size:44px 76px;
}
.screen>*{position:relative}

.sbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 24px 0;font:600 12.5px/1 "Segoe UI",system-ui;flex:none;
}
.sbar__i{display:flex;gap:5px;align-items:center;opacity:.85}
.sbar__i i{display:block;width:16px;height:10px;border:1px solid currentColor;border-radius:2.5px;position:relative}
.sbar__i i::after{content:"";position:absolute;inset:1.5px;right:5px;background:currentColor;border-radius:1px}
/* Dynamic Island z obiektywem i czujnikiem */
.island{
  position:absolute;top:10px;left:50%;translate:-50% 0;width:33%;height:24px;
  background:#050708;border-radius:14px;z-index:5;
  display:flex;align-items:center;justify-content:flex-end;padding-right:9px;
  box-shadow:0 0 0 .5px #FFFFFF0F inset;
}
.island::after{
  content:"";width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#2C4657 0%,#101C24 48%,#05090C 100%);
  box-shadow:0 0 0 1px #FFFFFF12;
}

.ecard{flex:1;overflow-y:auto;padding:26px 17px 20px;display:flex;flex-direction:column;align-items:center;scrollbar-width:none}
.ecard::-webkit-scrollbar{display:none}
/* logo pionowo: symbol, pod nim napis — układ z e-wizytówki */
.ecard__mark{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%}
.ecard__sym{width:41%;max-width:112px}
.ecard__word{width:52%;max-width:142px}
.ecard__claim{
  font-family:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  font-size:25px;font-weight:350;line-height:1.14;text-align:center;
  letter-spacing:-.012em;color:#101316;margin-top:26px;
}
/* pasek kontaktu — matowe szkło */
.ecard__soc{
  display:flex;gap:6px;padding:9px 12px;border-radius:34px;margin-top:26px;
  background:linear-gradient(180deg,#FFFFFFA8,#FFFFFF7A);
  box-shadow:0 2px 5px #00000010, 0 0 0 1px #FFFFFFB8 inset;
}
.ecard__soc a{
  width:39px;height:39px;border-radius:50%;
  background:linear-gradient(180deg,#FFFFFFF2,#FFFFFFC7);display:grid;place-items:center;
  box-shadow:0 1px 3px #00000017;transition:transform .18s,background .18s;color:#0D1013;
}
.ecard__soc a:hover{transform:translateY(-2px);background:#fff}
.ecard__soc svg{width:19px;height:19px;display:block}
.ecard__stats{
  width:100%;margin-top:26px;padding:26px 16px;border-radius:26px;
  background:linear-gradient(180deg,#FFFFFF9E,#FFFFFF70);
  box-shadow:0 2px 6px #00000010, 0 0 0 1px #FFFFFFA8 inset;
  display:flex;flex-direction:column;gap:22px;
}
.ecard__stats div{text-align:center;display:flex;flex-direction:column;gap:2px}
.ecard__stats b{
  font-family:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  font-size:27px;font-weight:350;color:#54B3E7;line-height:1.1;font-variant-numeric:tabular-nums;
}
.ecard__stats span{font-size:19px;font-weight:350;color:#14181C;line-height:1.15}
.ecard__nfc{
  display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:#6B767F;padding-bottom:4px;
}
.ecard__nfc i{display:block;width:6px;height:6px;border-radius:50%;background:var(--accent-bright);animation:nfcBlink 2.2s ease-in-out infinite}
@keyframes nfcBlink{0%,100%{opacity:.35}50%{opacity:1}}

.stage{display:flex;flex-direction:column;align-items:center}
@media(max-width:900px){.stage{margin-top:10px}}
@media(max-width:560px){
  .keyring{width:97px;margin-right:-17px}
  .island{height:21px}
  .ecard{padding:24px 15px 18px;gap:13px}
  .ecard__claim{font-size:19px}
  .ecard__stats b{font-size:25px}
}

/* ══ cennik ══
   Jasna sekcja; przynależność do breloków niosą etykieta i nota pod cennikiem. */
.pack-note{
  margin-top:26px;padding:16px 20px;background:var(--surface);
  border:1px solid var(--line);border-left:2px solid var(--accent);
  color:var(--muted);font-size:15px;line-height:1.6;max-width:80ch;
}
.pack-note b{color:var(--ink);font-family:var(--display);font-weight:600;font-size:15.5px}
.pack-note a{color:var(--accent);text-decoration:none;border-bottom:1px solid #0B7FA659}
.pack-note a:hover{border-bottom-color:var(--accent)}

/* ── FAQ: jasne tło, pełna szerokość sekcji ── */
.faq{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.faq details{background:var(--surface)}
.faq details[open]{background:#F7FAFB}
.faq summary{
  cursor:pointer;list-style:none;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  padding:19px 24px;font-family:var(--display);font-size:18.5px;color:var(--ink);
  transition:color .18s,background .18s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent);background:#F3F7F9}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.faq summary::after{
  content:"";width:13px;height:13px;flex:none;
  background:
    linear-gradient(var(--accent),var(--accent)) center/13px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/2px 13px no-repeat;
  transition:background-size .26s cubic-bezier(.2,.7,.3,1);
}
/* po otwarciu pionowa kreska zwija się do środka: plus staje się minusem */
.faq details[open] summary::after{background-size:13px 2px, 2px 0}
.faq__a{padding:0 24px 24px;color:var(--muted);font-size:15.4px;line-height:1.7;display:flex;flex-direction:column;gap:11px}
.faq__a strong{color:var(--ink);font-weight:600}
.faq__a ul{margin:0;padding-left:19px;display:flex;flex-direction:column;gap:7px}
.faq__a li::marker{color:var(--accent)}
.faq__hi{border-left:2px solid var(--accent);background:#F1F8FB;padding:12px 15px;color:var(--ink)}
@media(prefers-reduced-motion:no-preference){
  .faq details[open] .faq__a{animation:faqIn .32s cubic-bezier(.2,.7,.3,1)}
}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.pack{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
/* Cennik e-wizytówki ma trzy warianty, nie cztery pakiety. */
.pack--3{grid-template-columns:repeat(3,1fr)}
.pack article{background:var(--surface);padding:28px 22px 26px;display:flex;flex-direction:column;gap:8px;position:relative;transition:background .2s}
.pack article[data-featured]{background:#0F1418;color:#EDF2F5}
.pack article[data-sel]{outline:2px solid var(--accent-bright);outline-offset:-2px}
.pack__flag{position:absolute;top:0;right:0;background:var(--accent-bright);color:#fff;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;padding:5px 9px}
.pack h3{font-size:19px;display:flex;align-items:center}
.pack .price{font-family:var(--display);font-size:34px;font-variant-numeric:tabular-nums;margin-top:6px;display:flex;align-items:baseline}
.pack .price span{font-size:13px;color:var(--muted);font-family:var(--body);margin-left:4px}
.pack article[data-featured] .price span{color:#8FA3B0}
.pack .qty{font-family:var(--mono);font-size:11.5px;color:var(--accent);letter-spacing:.06em;display:flex;align-items:center}
.pack article[data-featured] .qty{color:var(--accent-bright)}
.pack .desc{font-size:14.5px;color:var(--muted);margin-top:-2px}
.pack article[data-featured] .desc{color:#A9BAC5}
.pack .btn{margin-top:18px;justify-content:center}

/* lista cech pakietu */
.feat{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px;flex:1}
.pack article[data-featured] .feat{border-top-color:#2C353C}
.feat li{display:grid;grid-template-columns:auto 1fr;gap:9px;font-size:14.2px;line-height:1.45;align-items:start}
.feat li::before{
  content:"";width:13px;height:8px;margin-top:5px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.pack article[data-featured] .feat li::before{border-color:var(--accent-bright)}
/* cecha niedostępna w pakiecie */
.feat li[data-no]{color:#9AA6AF;text-decoration:line-through;text-decoration-color:#C3CBD1}
.feat li[data-no]::before{
  width:11px;height:11px;margin-top:4px;transform:none;border:0;
  background:
    linear-gradient(45deg,transparent 44%,#AEB8C0 44% 56%,transparent 56%),
    linear-gradient(-45deg,transparent 44%,#AEB8C0 44% 56%,transparent 56%);
}
.pack article[data-featured] .feat li[data-no]{color:#77848D;text-decoration-color:#4A555E}
@media(max-width:980px){.pack{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.pack{grid-template-columns:1fr}}

/* ══ galeria + lightbox ══ */
.gal__filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.gal__filter button{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;background:var(--surface);border:1px solid var(--line);color:var(--muted);padding:8px 15px;cursor:pointer;transition:all .18s}
.gal__filter button:hover{border-color:var(--accent);color:var(--accent)}
.gal__filter button[data-on]{background:var(--graphite);border-color:var(--graphite);color:#fff}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,18px)}
.gal figure{margin:0;position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);cursor:zoom-in;transition:opacity .3s,transform .3s}
.gal figure[hidden]{display:none}
.gal img{aspect-ratio:3/2;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img{transform:scale(1.035)}
.gal figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:9px 12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:8px}
.gal figcaption em{font-style:normal;color:var(--accent)}
/* projekt poglądowy, nie zrealizowane zamówienie — musi być widoczne wprost na kafelku */
.gal .viz{
  position:absolute;top:0;left:0;z-index:2;font-family:var(--mono);font-weight:400;
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  background:#14181CD9;color:#DCE4E9;padding:6px 10px;
}
@media(max-width:860px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.gal{grid-template-columns:1fr}}

.lb{position:fixed;inset:0;z-index:100;background:#0B1015F2;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px)}
.lb[data-on]{display:flex}
.lb img{max-width:100%;max-height:82vh;object-fit:contain}
.lb__cap{position:absolute;bottom:clamp(16px,4vw,42px);left:0;right:0;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#9FB0BC}
.lb button{position:absolute;background:#FFFFFF14;border:1px solid #FFFFFF2E;color:#fff;cursor:pointer;font-family:var(--display);font-size:20px;width:44px;height:44px;display:grid;place-items:center;transition:background .18s}
.lb button:hover{background:#FFFFFF29}
.lb__x{top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px)}
.lb__p{left:clamp(8px,2vw,24px);top:50%;transform:translateY(-50%)}
.lb__n{right:clamp(8px,2vw,24px);top:50%;transform:translateY(-50%)}

/* ══ formularz ══ */
.form-sec{background:var(--surface);border-top:1px solid var(--line)}
.form-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,72px);align-items:start}
.form-side h2{font-size:clamp(26px,3.6vw,40px);margin-bottom:16px}
.form-side p{color:var(--muted)}
.assure{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:14px}
.assure li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:15px}
.assure b{font-family:var(--display);font-size:15px;font-weight:600;display:block}
.assure span{color:var(--muted);font-size:14.5px}
.assure i{width:7px;height:7px;background:var(--accent);margin-top:7px;font-style:normal}
.side-contact{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font-size:15px;display:flex;flex-direction:column;gap:4px}
.side-contact dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.side-contact dt:first-child{margin-top:0}
.side-contact dd{margin:0;line-height:1.5}
.side-contact dd a{color:var(--accent);text-decoration:none;border-bottom:1px solid #0B7FA640}
.side-contact dd a:hover{border-bottom-color:var(--accent)}
.side-contact .nip{font-variant-numeric:tabular-nums;letter-spacing:.02em}

form{display:grid;grid-template-columns:1fr 1fr;gap:16px;border:1px solid var(--line);padding:clamp(20px,3vw,32px);background:var(--ground)}
.f-full{grid-column:1/-1}
label{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;margin-bottom:7px}
input,select,textarea{width:100%;font:inherit;font-size:15.5px;padding:11px 13px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:0;transition:border-color .16s,box-shadow .16s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #0B7FA61F}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--alert);box-shadow:0 0 0 3px #D92D201A}
textarea{resize:vertical;min-height:112px;line-height:1.6}
.err{color:var(--alert);font-size:12.5px;margin-top:5px;display:none}
.err[data-on]{display:block}
.cnt{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:5px;text-align:right;font-variant-numeric:tabular-nums}

/* wybór pakietu wewnątrz formularza */
.pk{grid-column:1/-1;display:none;border:1px solid var(--line);background:var(--surface);padding:18px}
.pk[data-on]{display:block;animation:pkIn .3s cubic-bezier(.2,.7,.3,1)}
@keyframes pkIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.pk__hd{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;align-items:center}
/* Drugi wybór w tym samym polu: e-wizytówka jest osobnym produktem. */
.pk__hd--2{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.pk__opt{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:12px}
.pk__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pk__grid label{display:block;margin:0;cursor:pointer;border:1px solid var(--line);padding:13px 12px;background:var(--ground);transition:border-color .18s,background .18s;text-transform:none;letter-spacing:0;font-family:var(--body);color:var(--ink)}
.pk__grid label:hover{border-color:var(--accent-bright)}
.pk__grid input{position:absolute;opacity:0;width:0;height:0}
.pk__grid input:checked+span{color:var(--accent-bright)}
.pk__grid label:has(input:checked){border-color:var(--accent-bright);background:#EFF9FD;box-shadow:inset 0 0 0 1px var(--accent-bright)}
.pk__grid input:focus-visible+span{outline:2px solid var(--accent-bright);outline-offset:3px}
.pk__nm{font-family:var(--display);font-size:15.5px;display:block}
.pk__q{font-family:var(--mono);font-size:10.5px;color:var(--muted);display:block;margin-top:3px}
.pk__pr{font-family:var(--display);font-size:20px;margin-top:7px;display:block;font-variant-numeric:tabular-nums}
.calc{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);display:flex;justify-content:flex-end;align-items:baseline;gap:14px;flex-wrap:wrap}
.calc__v{font-family:var(--display);font-size:26px;font-variant-numeric:tabular-nums}
.calc__v small{font-size:13px;color:var(--muted);font-family:var(--body);margin-left:5px}
@media(max-width:760px){.pk__grid{grid-template-columns:repeat(2,1fr)}}

.drop{border:1px dashed #B9C2C8;background:var(--surface);padding:26px;text-align:center;cursor:pointer;transition:border-color .16s,background .16s}
.drop:hover,.drop[data-over]{border-color:var(--accent);background:#F4FAFC}
.drop b{font-family:var(--display);font-size:16px;display:block}
.drop span{font-size:13px;color:var(--muted)}
.drop__files{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.chip{font-family:var(--mono);font-size:11px;background:var(--ground);border:1px solid var(--line);padding:4px 9px;color:var(--ink);display:inline-flex;gap:7px;align-items:center}
.chip button{background:none;border:0;color:var(--muted);cursor:pointer;font-family:var(--mono);padding:0;line-height:1}
.chip button:hover{color:var(--alert)}
.f-note{font-size:13px;color:var(--muted)}
.f-send{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.f-ok{grid-column:1/-1;display:none;gap:12px;align-items:flex-start;border-left:3px solid var(--accent);background:#F1F8FB;padding:15px 18px}
.f-ok[data-on]{display:grid;grid-template-columns:auto 1fr}
.f-ok b{font-family:var(--display);font-size:17px;display:block}
.f-ok p{font-size:14.5px;color:var(--muted)}
@media(max-width:900px){.form-grid{grid-template-columns:1fr}}
@media(max-width:560px){form{grid-template-columns:1fr}}

/* ══ stopka ══ */
footer{background:var(--graphite);color:#93A5B1;padding-block:52px 30px;font-size:14.5px}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
.foot h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#6F8391;font-weight:400;margin-bottom:14px}
.foot a{color:#B9C6CF;text-decoration:none;display:block;padding:3px 0}
.foot a:hover{color:var(--accent-bright)}
.foot__brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.foot__logo{height:38px;width:auto;flex:none}
.foot__brand span{
  font-family:var(--display);font-size:15px;line-height:1.06;color:#DCE4E9;
  letter-spacing:.015em;text-transform:uppercase;
}
.foot__bar{border-top:1px solid var(--line-dark);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#667885}
.foot address{font-style:normal;color:#93A5B1;line-height:1.6;margin-top:10px;font-size:14px}
@media(max-width:760px){.foot{grid-template-columns:1fr 1fr}}


@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* dopisek przy adresie — informacja, nie ostrzeżenie, więc szara i mniejsza */
.side-contact dd small,.foot address small{
  display:block;margin-top:6px;font-size:12.5px;line-height:1.5;opacity:.72;
}

/* ══ kalkulator brył ══ */
.shero__in--wide{grid-template-columns:1fr}
.kal{display:grid;grid-template-columns:1fr 370px;gap:clamp(20px,3vw,38px);align-items:start}
@media(max-width:980px){.kal{grid-template-columns:1fr}}
.kal__h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:400;margin:0 0 12px}
.kal__h:not(:first-child){margin-top:30px}
.kal__h small{text-transform:none;letter-spacing:0;margin-left:6px}

.kal__tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:680px){.kal__tabs{grid-template-columns:repeat(2,1fr)}}
.kal__tab{background:var(--surface);border:0;cursor:pointer;padding:8px 9px 7px;font:inherit;
  display:flex;flex-direction:column;align-items:center;gap:6px;transition:background .18s}
.kal__tab:hover{background:#F5F8FA}
.kal__tab b{font-family:var(--display);font-size:14px;font-weight:600;color:var(--ink)}
/* Rozmiar ikony ustawiamy tu, a nie w atrybutach SVG — kafelki mają być o ćwierć mniejsze,
   a jeden zapis jest łatwiejszy do przestrojenia niż wymiary w każdym rysunku. */
.kal__ico{display:block;width:30px;height:30px;fill:none;stroke:var(--graphite);
  stroke-width:1.5;stroke-linejoin:round;transition:stroke .18s}
.kal__tab[data-on]{background:var(--graphite)}
.kal__tab[data-on] b{color:#fff}
.kal__tab[data-on] .kal__ico{stroke:var(--accent-bright)}
/* Wgranie pliku to wybór innego rodzaju niż gotowy kształt — dostaje własny,
   pełny wiersz, zamiast zostawiać pustą komórkę w siatce czterech brył. */
.kal__tab[data-shape="plik"]{grid-column:1/-1;flex-direction:row;justify-content:center;gap:10px;padding:10px}
.kal__tab[data-shape="plik"] .kal__ico{width:23px;height:23px}

/* Nagłówki sekcji („Kształt", „Wymiary", „Materiał i nakład") zostały usunięte —
   odstęp między blokami niosły ich marginesy, więc bloki dostają go teraz same. */
.kal__dims,.kal__row,#plikBox{margin-top:24px}
.kal__dims{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
/* jednostka wewnątrz pola, nie przy podpisie — nie rozpycha wąskich kolumn */
.kal__pole{position:relative;display:block}
.kal .kal__pole input{padding-right:36px}
/* Strzałki przeglądarki zasłoniłyby „mm" po najechaniu, a przy skoku co 1 mm w zakresie
   do 250 mm i tak nikt nie doklika się nimi do wymiaru — wpisanie liczby jest szybsze. */
.kal .kal__pole input::-webkit-outer-spin-button,
.kal .kal__pole input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.kal .kal__pole input{-moz-appearance:textfield;appearance:textfield}
.kal__pole i{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-style:normal;
  font-family:var(--mono);font-size:11px;color:var(--muted);pointer-events:none}
/* Materiał, kolor, nakład, ściany i wypełnienie w jednym rzędzie. Kolumny opisane wprost,
   bo auto-fit dobierał im równe szerokości — a pola na liczbę sztuk i ścian potrzebują
   znacznie mniej miejsca niż nazwa materiału z odnośnikiem i niż suwak ze skalą. */
.kal__row{display:grid;gap:14px;align-items:start;
  grid-template-columns:minmax(0,.86fr) minmax(80px,.44fr) minmax(66px,.34fr) minmax(132px,.62fr) minmax(0,1.05fr)}
/* w węższym oknie suwak schodzi pod spód na całą szerokość, zamiast ściskać się do paska */
@media(max-width:860px){.kal__row{grid-template-columns:minmax(0,1fr) minmax(76px,.5fr) minmax(66px,.4fr) minmax(132px,.7fr)}
  .kal__row .kal__fill{grid-column:1/-1}}
@media(max-width:720px){.kal__row{grid-template-columns:1fr 1fr}
  .kal__row .kal__fill{grid-column:1/-1}}
/* na telefonie materiał na całą szerokość — w połowie kolumny odnośnik łamał się na dwie linie */
@media(max-width:520px){.kal__row{grid-template-columns:1fr}}
/* align-items:stretch znosi globalne label{align-items:center} — inaczej podpisy pól
   są wyśrodkowane, a nagłówki sekcji i skala suwaka dosunięte do lewej.
   margin-bottom:0 znosi globalne label{margin-bottom:7px} — bez tego podpis „Materiał"
   (osobny element wewnątrz .kal__f) odsuwał swoje pole o 7 px niżej niż pole „Sztuk",
   gdzie podpis jest tekstem w środku etykiety i tego marginesu nie dostaje. */
.kal label,.kal__f{display:flex;flex-direction:column;align-items:stretch;gap:6px;
  margin-bottom:0;font-size:13.5px;color:var(--muted)}
/* Wysokość wprost, bo lista rozwijana liczy ją z wysokości wiersza opcji i wychodziła
   o 2 px niższa niż pole liczbowe obok — przy polach stojących ramię w ramię widać to
   po niewyrównanych dolnych krawędziach. */
.kal input,.kal select{font:inherit;font-size:14.5px;height:40px;padding:0 11px;border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%}
.kal input:focus,.kal select:focus{outline:2px solid var(--accent-bright);outline-offset:-1px}
.kal__mlink{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;margin-top:2px}
.kal__mlink:hover{color:var(--ink);text-decoration:underline}

/* ── suwak wypełnienia ── */
.kal__scale output{color:var(--ink);font-variant-numeric:tabular-nums;text-align:center}
/* Pole suwaka wysokie tak samo jak pola obok. Przeglądarki centrują tor w polu,
   więc pasek trafia dokładnie w połowę wysokości listy materiałów i pola „Sztuk". */
.kal__fill input[type=range]{height:40px}
/* Gradient siedzi na samym torze, nie na tle całego pola — inaczej Chrome
   rysowałby go pod uchwytem i kolor gubiłby się przy krańcach skali. */
/* margin:0 znosi domyślne 2 px przeglądarki — bez tego suwak stoi 2 px niżej niż pola obok */
.kal input[type=range]{-webkit-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;width:100%}
.kal input[type=range]::-webkit-slider-runnable-track{height:6px;border:1px solid var(--line);
  background:linear-gradient(90deg,#1B9BD8 0%,#7FA24C 50%,#D9422F 100%)}
.kal input[type=range]::-moz-range-track{height:6px;border:1px solid var(--line);
  background:linear-gradient(90deg,#1B9BD8 0%,#7FA24C 50%,#D9422F 100%)}
.kal input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:13px;height:18px;margin-top:-5px;background:var(--graphite);border:0;box-shadow:0 0 0 2px #fff}
.kal input[type=range]::-moz-range-thumb{width:11px;height:16px;border-radius:0;
  background:var(--graphite);border:2px solid #fff}
.kal input[type=range]:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px}
.kal__scale{display:flex;justify-content:space-between;gap:8px;margin-top:-2px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted)}

/* ── kolory filamentu ── */
/* Paleta bywa pięćdziesięciokolorowa, więc siedzi w rozwijanej liście — rozłożona
   na płasko spychała podgląd bryły poniżej krawędzi ekranu. */
.kal__kolbox{position:relative}
.kal__kolsel{display:flex;align-items:center;width:100%;height:40px;padding:0 11px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer}
.kal__kolsel i{display:block;width:20px;height:20px;background:var(--prob);
  border:1px solid rgba(17,22,26,.22)}
.kal__kolsel::after{content:'';margin-left:auto;border:5px solid transparent;
  border-top-color:var(--muted);transform:translateY(2px)}
.kal__kolsel:focus-visible{outline:2px solid var(--accent-bright);outline-offset:-1px}
.kal__kol{position:absolute;z-index:6;top:calc(100% + 4px);left:0;width:min(322px,86vw);
  max-height:238px;overflow:auto;padding:9px;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 12px 34px rgba(17,22,26,.16);
  display:flex;flex-wrap:wrap;gap:7px}
.kal__kol[hidden]{display:none}
/* Kwadrat bez nazwy — nazwa jest w podpowiedzi i dla czytnika ekranu. Cienka ramka
   w kolorze tuszu, bo bez niej biały i przezroczysty filament znikają na tle strony. */
.kal__prob{width:28px;height:28px;padding:0;border:1px solid rgba(17,22,26,.22);
  background:var(--prob);cursor:pointer;transition:transform .12s,box-shadow .12s}
.kal__prob:hover{transform:translateY(-2px)}
.kal__prob[aria-selected=true]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink);
  border-color:transparent}
.kal__prob:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px}
/* Podpowiedzi przy nastawach. Opis każdej nastawy stał wcześniej akapitem pod rzędem
   pól — czytał go ten, kto i tak wiedział, a szukającemu nie mówił, którego pola dotyczy.
   Teraz siedzi przy swoim polu: najechanie myszą albo dotknięcie pytajnika.
   Wymiary bryły podpowiedzi nie dostają, bo mówią same za siebie. */
.kal__lab{display:flex;align-items:center;gap:6px;position:relative}
.kal__lab label{display:inline;margin:0}
.kal__pyt{flex:none;width:19px;height:19px;padding:0;display:flex;align-items:center;
  justify-content:center;border:1px solid #AFB9C0;border-radius:50%;background:var(--surface);
  color:var(--graphite);font-family:var(--display);font-weight:600;font-size:13px;line-height:1;
  cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.kal__pyt:hover,.kal__pyt[data-on],.kal__pyt:focus-visible{background:var(--accent);
  border-color:var(--accent);color:#fff}
/* Dymek nie znika z drzewa (czyta go czytnik ekranu przez aria-describedby), tylko
   przestaje być widoczny — dlatego visibility, a nie display. */
.kal__dymek{position:absolute;left:0;bottom:calc(100% + 9px);z-index:20;width:max-content;
  max-width:min(280px,72vw);background:var(--graphite);color:#DCE4E9;font-size:12.5px;
  line-height:1.5;padding:10px 12px;border:1px solid var(--line-dark);white-space:normal;
  opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none;
  transition:opacity .16s,transform .16s,visibility .16s}
.kal__dymek::after{content:"";position:absolute;left:13px;top:100%;
  border:6px solid transparent;border-top-color:var(--graphite)}
.kal__pyt:hover + .kal__dymek,.kal__pyt:focus-visible + .kal__dymek,
.kal__pyt[data-on] + .kal__dymek{opacity:1;visibility:visible;transform:none}
/* Pole przy prawej krawędzi rzędu rozwija dymek w lewo — inaczej wychodzi poza
   kalkulator i urywa się w połowie zdania. Które pole jest ostatnie w rzędzie, zależy
   od szerokości okna, więc rozstrzyga to ta sama granica, co układ kolumn. */
.kal__fill .kal__dymek{left:auto;right:0}
.kal__fill .kal__dymek::after{left:auto;right:13px}
@media(max-width:860px){
  .kal__row > :nth-child(4) .kal__dymek{left:auto;right:0}
  .kal__row > :nth-child(4) .kal__dymek::after{left:auto;right:13px}
}
@media(max-width:720px){
  .kal__row > :nth-child(2) .kal__dymek{left:auto;right:0}
  .kal__row > :nth-child(2) .kal__dymek::after{left:auto;right:13px}
}
/* Jedna kolumna: żadne pole nie stoi już przy prawej krawędzi. */
@media(max-width:520px){
  .kal__row .kal__dymek{left:0;right:auto}
  .kal__row .kal__dymek::after{left:13px;right:auto}
}

/* ── zamówienie z kilku modeli ── */
.kal__zam{margin:28px 0 0}
.kal__poz{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.kal__poz li{background:var(--surface);display:grid;align-items:center;gap:12px;padding:11px 13px;
  grid-template-columns:1fr auto auto auto auto}
/* nazwa i wymiar zajmują pierwszą kolumnę jeden pod drugim */
.kal__poz b{grid-row:1;font-family:var(--display);font-size:14.5px;font-weight:600;color:var(--ink);
  overflow-wrap:anywhere}
.kal__pozopis{grid-column:1;grid-row:2;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;color:var(--muted)}
.kal__kolbox--mini{grid-column:2;grid-row:1/3;display:block}
.kal__kolsel--mini{width:34px;height:34px;padding:0;justify-content:center}
.kal__kolsel--mini::after{display:none}
.kal__kolsel--mini i{width:18px;height:18px}
/* paleta wiersza otwiera się w prawo, żeby nie wychodziła poza kolumnę listy */
.kal__kolbox--mini .kal__kol{left:auto;right:0}
.kal__poz label{grid-column:3;grid-row:1/3;flex-direction:row;align-items:center;gap:6px;margin:0}
.kal__poz input{width:64px;text-align:center}
.kal__poz label i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.kal__poz em{grid-column:4;grid-row:1/3;font-style:normal;font-family:var(--display);font-size:15px;
  color:var(--ink);font-variant-numeric:tabular-nums;min-width:74px;text-align:right}
.kal__poz li > button{grid-column:5;grid-row:1/3;width:30px;height:30px;padding:0;border:1px solid var(--line);
  background:none;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;
  transition:border-color .18s,color .18s}
.kal__poz li > button:hover{border-color:var(--alert);color:var(--alert)}
@media(max-width:520px){
  .kal__poz li{grid-template-columns:1fr auto auto auto}
  .kal__poz em{grid-column:1/-1;grid-row:3;text-align:left}
}

/* Dodanie pozycji to krok pomocniczy, nie główny — obrys zamiast wypełnienia,
   żeby nie konkurował z „Wyślij to zapytanie". */
.kal__dodaj{width:100%;margin:16px 0 0;padding:9px 12px;font:inherit;font-size:13.5px;
  background:none;border:1px solid var(--line-dark);color:#DCE4E9;cursor:pointer;
  transition:border-color .18s,color .18s,background .18s}
.kal__dodaj:hover:not(:disabled){border-color:var(--accent-bright);color:#fff;background:#1E262C}
.kal__dodaj:disabled{opacity:.4;cursor:not-allowed}

/* potwierdzenie w formularzu, że model z kalkulatora dojdzie razem z zapytaniem */
.f-model{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--accent);
  padding-left:11px;border-left:2px solid var(--accent-bright)}

/* ── wgranie własnego modelu ── */
.kal__drop{border:1px dashed #B9C2C8;background:var(--surface);padding:26px 22px;text-align:center;
  cursor:pointer;display:flex;flex-direction:column;gap:7px;transition:border-color .16s,background .16s}
.kal__drop:hover,.kal__drop[data-nad]{border-color:var(--accent-bright);background:#F2FAFD}
.kal__drop:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
.kal__drop b{font-family:var(--display);font-size:16.5px;color:var(--ink);word-break:break-all}
.kal__drop span{font-size:13px;line-height:1.55;color:var(--muted)}
.kal__drop[data-ma]{border-style:solid;border-color:var(--accent-bright)}
.kal__plik{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--muted);
  padding-left:11px;border-left:2px solid var(--accent-bright)}
.kal__plik--blad{border-left-color:var(--alert);color:#8A3428}

.kal__prev{margin:26px 0 0;background:linear-gradient(#F7FAFB,#E8EFF3);border:1px solid var(--line);padding:14px;position:relative}
/* pan-y, nie none: palec przesuwany w pionie przewija stronę zamiast więznąć
   na podglądzie, a obrót w poziomie — ten, który pokazuje bryłę ze wszystkich
   stron — nadal działa. Przechył w pionie zostaje dla myszki i strzałek. */
.kal__prev canvas{display:block;width:100%;height:calc(clamp(200px,32vw,280px) + 205px);touch-action:pan-y;cursor:grab}
.kal__prev canvas[data-drag]{cursor:grabbing}
.kal__prev canvas:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
.kal__reset{position:absolute;top:14px;right:14px;background:#FFFFFFD9;border:1px solid var(--line);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:5px 9px;cursor:pointer;transition:color .2s,border-color .2s}
.kal__reset:hover{color:var(--ink);border-color:var(--graphite)}
.kal__prev figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.kal__prev figcaption b{font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}

/* przełącznik netto / brutto */
.kal__vat{display:flex;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);margin:0 0 20px}
.kal__vat button{flex:1;background:var(--graphite);border:0;cursor:pointer;padding:8px 10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:#8FA3B0;transition:background .16s,color .16s}
.kal__vat button:hover{color:#EDF2F5}
.kal__vat button[data-on]{background:var(--accent-bright);color:#fff}
.kal__vat button:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}

/* ── progi ilościowe ── */
/* Podpowiedź, nie przycisk główny: ma być widoczna, ale nie konkurować z „Wyślij". */
.kal__progi{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.kal__progi button{background:none;border:1px dashed var(--line-dark);color:#A9BAC5;
  font:inherit;font-size:12.5px;padding:6px 10px;cursor:pointer;
  transition:border-color .18s,color .18s}
.kal__progi button:hover{border-color:var(--accent-bright);color:#fff}
.kal__progi em{font-style:normal;color:var(--accent-bright);margin-left:5px}
.kal__progi button:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}

/* ── dostawa ── */
.kal__dost{margin:22px 0 0}
.kal__vat--dost{margin:9px 0 0}
/* Skad jest kwota. Kropka z przodu zmienia kolor razem ze stanem: liczymy (szara,
   pulsuje), policzone z ciecia (akcent), sam szacunek (pomaranczowa). */
.kal__zrodlo{display:flex;align-items:center;gap:7px;margin:6px 0 0;font-size:12.6px;
  line-height:1.4;color:var(--muted)}
.kal__zrodlo:empty{display:none}
.kal__zrodlo::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--muted)}
.kal__zrodlo[data-stan="liczy"]::before{animation:kalPuls 1.4s ease-in-out infinite}
.kal__zrodlo[data-stan="ciete"]::before{background:var(--accent)}
.kal__zrodlo[data-stan="szacunek"]::before{background:var(--msk-akcent,#E8892B)}
@keyframes kalPuls{0%,100%{opacity:.35}50%{opacity:1}}

.kal__dostkw{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin:11px 0 0;font-size:13.5px;color:#8FA3B0}
.kal__dostkw i{font-style:normal;color:#EDF2F5;font-variant-numeric:tabular-nums}
.kal__dostkw--suma{margin-top:6px}
.kal__dostkw b{font-family:var(--display);font-size:17px;color:#fff;font-variant-numeric:tabular-nums}
/* Pasek do progu darmowej dostawy — ten sam błękit co wskaźnik przewijania strony. */
.kal__dostpas{height:3px;background:var(--line-dark);margin:10px 0 7px;overflow:hidden}
.kal__dostpas i{display:block;height:100%;width:0;background:var(--accent-bright);
  transition:width .35s ease}
.kal__dostpas[data-gratis] i{background:#4FBF7B}
.kal__dostinfo{margin:0;font-size:12.5px;line-height:1.5;color:#A9BAC5}

/* Pasek cięcia — ten sam wygląd co wskaźnik przewijania strony. Leży zaraz po canvasie
   i wjeżdża na jego dolną krawędź ujemnym marginesem: wysokość 2 px minus 2 px marginesu
   daje zero, więc pojawienie się paska nie przesuwa niczego na stronie. */
.kal__bar{position:relative;z-index:2;height:2px;margin-top:-2px;background:#D3DDE3}
.kal__bar i{display:block;height:2px;width:0;background:var(--accent-bright);transition:width .12s linear}

/* Panel podsumowania sięga tam, gdzie kończy się podgląd — dolne krawędzie obu kolumn
   równo. Kosztem jest przyklejanie panelu przy przewijaniu: rozciągnięty do wysokości
   lewej kolumny i tak nie zmieściłby się w oknie, więc sticky nic by nie dawał. */
.kal__right{align-self:stretch}
.kal__out{background:var(--graphite);color:#EDF2F5;padding:26px 24px 24px;height:100%}
.kal__lbl{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8FA3B0}
.kal__price strong{display:block;font-family:var(--display);font-size:clamp(26px,3vw,34px);color:#fff;margin-top:8px;font-variant-numeric:tabular-nums;line-height:1.1}
.kal__net{font-size:12.5px;color:#8FA3B0}
.kal__per{color:#A9BAC5;font-size:14.5px;margin-top:6px}
.kal__facts{display:grid;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);margin:22px 0 0}
.kal__facts div{background:var(--graphite);display:flex;justify-content:space-between;gap:12px;padding:10px 14px}
.kal__facts dt{font-size:13.5px;color:#8FA3B0}
.kal__facts dd{margin:0;font-family:var(--display);font-size:15px;color:#fff;font-variant-numeric:tabular-nums}
.kal__info{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.kal__info li{font-size:12.8px;line-height:1.5;color:#A9BAC5;padding-left:12px;position:relative}
.kal__info li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:1px;background:var(--accent-bright)}

.kal__warn{margin-top:16px;padding:11px 13px;background:#D92D2018;border-left:2px solid var(--alert);color:#F0C7C3;font-size:13.2px;line-height:1.55}
.kal__cta{margin-top:20px;width:100%;justify-content:center}
.kal__note{margin-top:14px;font-size:12.2px;line-height:1.55;color:#7E909C}

/* ══ maskotka doradcy ══
   Postać rysowana kształtami: nic się nie pobiera, nic się nie rozmywa przy powiększeniu
   i wszystko zmienia się jednym atrybutem data-stan na kontenerze. Miny są w SVG obok
   siebie — pokazujemy tę, która pasuje do stanu, zamiast przerysowywać postać.

   Kolory postaci trzymamy osobno od kolorów strony: to bohater, nie element sterowania,
   a jego granat i cyjan mają zostać takie same niezależnie od tego, co zrobimy z motywem. */
.msk{--msk-korpus:#2B4470;--msk-korpus-c:#22355A;--msk-ekran:#101B2E;--msk-oko:#35E0E8;
  --msk-akcent:#E8892B;
  width:clamp(96px,12vw,132px);flex:none;align-self:start}
.msk__svg{width:100%;height:auto;display:block;overflow:visible}
.msk__cien{fill:#0F1A2A;opacity:.13}
.msk__tulow,.msk__noga,.msk__reka,.msk__obudowa{fill:var(--msk-korpus)}
.msk__noga,.msk__reka{fill:var(--msk-korpus-c)}
.msk__ekran{fill:var(--msk-ekran)}
.msk__anteny,.msk__antenak{fill:var(--msk-korpus-c)}
.msk__antenap{fill:var(--msk-akcent)}
.msk__oczy,.msk__usta{fill:var(--msk-oko)}
/* Zacisniete oczy rysujemy kreska, nie plama: zmruzone oko to linia, a wypelniony
   ksztalt czytalby sie jak kolejna para wielkich oczu. */
.msk__oczy--wysilek path{fill:none;stroke:var(--msk-oko);stroke-width:7;
  stroke-linecap:round;stroke-linejoin:round}
.msk__pot{fill:#7FD6EE;display:none;transform-origin:163px 58px}
.msk__pytz{fill:none;stroke:var(--msk-akcent);stroke-width:3.4;stroke-linecap:round}
.msk__pytk{fill:var(--msk-akcent)}
.msk__bateria rect{fill:none;stroke:var(--msk-oko);stroke-width:4}
.msk__bateria .msk__bateriak,.msk__bateria .msk__bateriaw{fill:var(--msk-oko);stroke:none}

/* Domyślnie żadnej miny — każdy stan włącza swoją. Dzięki temu nowy stan to jedna
   reguła, a nie polowanie na to, co trzeba dodatkowo ukryć. */
.msk__oczy,.msk__usta,.msk__bateria{display:none}
.msk[data-stan="sit"] .msk__oczy--okragle,
.msk[data-stan="idzie"] .msk__oczy--okragle,
.msk[data-stan="radosc"] .msk__oczy--okragle,
.msk[data-stan="sit"] .msk__usta--usmiech,
.msk[data-stan="idzie"] .msk__usta--usmiech,
.msk[data-stan="radosc"] .msk__usta--usmiech,
.msk[data-stan="nudzi"] .msk__oczy--plaskie,
.msk[data-stan="nudzi"] .msk__usta--plaskie,
.msk[data-stan="mysli"] .msk__oczy--dal,
.msk[data-stan="mysli"] .msk__usta--plaskie,
.msk[data-stan="smutek"] .msk__oczy--smutne,
.msk[data-stan="smutek"] .msk__usta--plaskie,
.msk[data-stan="bateria"] .msk__bateria{display:block}
/* Pytajniki nie sa mina, tylko mysla obok glowy — stad osobna regula. */
.msk__pytajniki{display:none}
.msk[data-stan="mysli"] .msk__pytajniki{display:block}

/* ── ruch ──
   Oddech chodzi zawsze, mruganie w stanach z okrągłymi oczami, reszta dokłada się
   zależnie od tego, co doradca właśnie robi. */
.msk__cialo{transform-origin:100px 190px;animation:mskOddech 3.4s ease-in-out infinite}
.msk__glowa{transform-origin:100px 130px}
/* Bez transform-origin scaleY zwezalby oczy ku gornej krawedzi ukladu wspolrzednych,
   a nie ku wlasnej osi — oczy wyjezdzaly wtedy ponad glowe. Origin siedzi na linii oczu. */
.msk__oczy--okragle{transform-origin:100px 78px;animation:mskMrug 5.2s infinite}
.msk__oczy--dal{transform-origin:100px 73px}
.msk__reka--l{transform-origin:51px 128px}
.msk__reka--p{transform-origin:148px 128px}
.msk__noga--l,.msk__noga--p{transform-origin:100px 168px}
.msk__antena--l{transform-origin:58px 30px}
.msk__antena--p{transform-origin:141px 30px}

/* Powitanie: postać macha raz, przy pierwszym pokazaniu panelu. */
.msk__reka--p{animation:mskMachanie 1.6s ease-in-out 1}

.msk[data-stan="idzie"] .msk__cialo{animation:mskChod .62s ease-in-out infinite}
.msk[data-stan="idzie"] .msk__noga--l{animation:mskKrok .62s ease-in-out infinite}
.msk[data-stan="idzie"] .msk__noga--p{animation:mskKrok .62s ease-in-out infinite reverse}
.msk[data-stan="idzie"] .msk__reka--l{animation:mskKrok .62s ease-in-out infinite reverse}
.msk[data-stan="idzie"] .msk__reka--p{animation:mskKrok .62s ease-in-out infinite}

.msk[data-stan="radosc"] .msk__cialo{animation:mskSkok .55s cubic-bezier(.3,1.4,.5,1) 2,
  mskOddech 3.4s ease-in-out infinite 1.1s}
.msk[data-stan="radosc"] .msk__ekran{animation:mskBlysk .5s ease-out 2}
.msk[data-stan="radosc"] .msk__antena--l{animation:mskDzwon .55s ease-in-out 2}
.msk[data-stan="radosc"] .msk__antena--p{animation:mskDzwon .55s ease-in-out 2 reverse}

/* Zastanowienie: dlon podpiera twarz, wzrok odplywa w bok, a nad glowa krazy mysl.
   Trzy pytajniki ida po kolei, zeby czytalo sie to jak ciag mysli, a nie jak migajacy znak. */
.msk[data-stan="mysli"] .msk__glowa{animation:mskPrzechyl 4.2s ease-in-out infinite}
.msk[data-stan="mysli"] .msk__reka--p{animation:mskDlon 4.2s ease-in-out infinite}
.msk[data-stan="mysli"] .msk__oczy--dal{animation:mskWzrok 4.2s ease-in-out infinite}
.msk[data-stan="mysli"] .msk__pyt{animation:mskMysl 2.7s ease-in-out infinite}
.msk[data-stan="mysli"] .msk__pyt--2{animation-delay:.9s}
.msk[data-stan="mysli"] .msk__pyt--3{animation-delay:1.8s}

/* Powitanie na dotyk: podskok, rece w gore i usmiech. Siedzi na wlasnym atrybucie,
   nie na data-stan, bo to reakcja na klienta, a nie stan doradcy — dzieki temu wchodzi
   na kazda mine i schodzi z niej bez sladu. Rece ida na zewnatrz, nie do gory pionowo:
   rysunek ma je za glowa, wiec uniesione w srodku po prostu by w niej zniknely. */
.msk[data-hej] .msk__usta{display:none}
.msk[data-hej] .msk__usta--usmiech{display:block}
.msk[data-hej="skok"] .msk__cialo{animation:mskPodskok .82s cubic-bezier(.3,1.5,.5,1)}
.msk[data-hej="skok"] .msk__reka--l{animation:mskReceL .82s cubic-bezier(.3,1.5,.5,1)}
.msk[data-hej="skok"] .msk__reka--p{animation:mskReceP .82s cubic-bezier(.3,1.5,.5,1)}
.msk[data-hej="skok"] .msk__antena--l{animation:mskDzwon .5s ease-in-out}
.msk[data-hej="skok"] .msk__antena--p{animation:mskDzwon .5s ease-in-out reverse}

/* Praca rak i nog przy wspinaczce i na krawedzi. Osobny atrybut od data-stan, bo to
   polozenie postaci, a nie jej nastroj: doradca moze sie cieszyc albo martwic siedzac
   na krawedzi tak samo jak stojac na dole, i mina ma sie od tego nie zmieniac.
   Reguly stoja za minami, zeby wygrywac z chodem i kolysaniem. */
/* Elipsa pod nogami to cien rzucany na grunt — na drabinie i na krawedzi nie ma
   zadnego gruntu, wiec znika razem z nim. */
.msk[data-poz] .msk__cien{opacity:0}
.msk[data-poz] .msk__cialo{animation:none}
.msk[data-poz="wspina"] .msk__cialo{animation:mskZamach .5s ease-in-out infinite}
.msk[data-poz="wspina"] .msk__reka--l{animation:mskChwytL .5s ease-in-out infinite}
.msk[data-poz="wspina"] .msk__reka--p{animation:mskChwytP .5s ease-in-out infinite}
.msk[data-poz="wspina"] .msk__noga--l{animation:mskKrok .5s ease-in-out infinite}
.msk[data-poz="wspina"] .msk__noga--p{animation:mskKrok .5s ease-in-out infinite reverse}
.msk[data-poz="krawedz"] .msk__cialo{animation:mskOddech 3.4s ease-in-out infinite}
.msk[data-poz="krawedz"] .msk__noga--l{animation:mskDynda 2.6s ease-in-out infinite}
.msk[data-poz="krawedz"] .msk__noga--p{animation:mskDynda 2.6s ease-in-out infinite .35s}

/* Ostatni zryw: mina bierze gore nad ta, ktora niesie data-stan. To jedyne miejsce,
   gdzie polozenie postaci przykrywa jej nastroj — bo klient patrzy wtedy na wysilek,
   a nie na to, jak poszla wycena. Po zrywie wszystko wraca samo, bez sprzatania. */
.msk[data-poz="zryw"] .msk__oczy,
.msk[data-poz="zryw"] .msk__usta{display:none}
.msk[data-poz="zryw"] .msk__oczy--wysilek,
.msk[data-poz="zryw"] .msk__usta--wysilek,
.msk[data-poz="zryw"] .msk__pot{display:block}
.msk[data-poz="zryw"] .msk__cialo{animation:mskDrzenie .11s linear infinite}
.msk[data-poz="zryw"] .msk__glowa{animation:mskDrzenieGlowy .13s linear infinite}
.msk[data-poz="zryw"] .msk__reka--l{animation:mskChwytL .9s ease-in-out infinite}
.msk[data-poz="zryw"] .msk__reka--p{animation:mskChwytP .9s ease-in-out infinite}
.msk[data-poz="zryw"] .msk__noga--l{animation:mskKopniak .38s ease-in-out infinite}
.msk[data-poz="zryw"] .msk__noga--p{animation:mskKopniak .38s ease-in-out infinite reverse}
.msk[data-poz="zryw"] .msk__pot{animation:mskKropla .7s ease-in infinite}

/* Zaczepki z krawedzi: krotkie odpowiedzi na najechanie myszka, losowane po kolei.
   Stoja za regulami polozenia, bo maja na chwile wygrac z dyndaniem nogami — po nich
   postac wraca do siedzenia sama, bez zadnego sprzatania w kodzie. */
.msk[data-hej="macha"] .msk__reka--p{animation:mskMachanie 1.25s ease-in-out}
.msk[data-hej="macha"] .msk__glowa{animation:mskPrzechyl 1.25s ease-in-out}
.msk[data-hej="noga"] .msk__noga--l{animation:mskKopniak .52s ease-in-out 2}
.msk[data-hej="noga"] .msk__noga--p{animation:mskKopniak .52s ease-in-out 2 reverse}
.msk[data-hej="klaszcze"] .msk__reka--l{animation:mskKlaskL .3s ease-in-out 3}
.msk[data-hej="klaszcze"] .msk__reka--p{animation:mskKlaskP .3s ease-in-out 3}
.msk[data-hej="klaszcze"] .msk__cialo{animation:mskZamach .3s ease-in-out 3}
.msk[data-hej="rozglada"] .msk__glowa{animation:mskRozglad 1.4s ease-in-out}
.msk[data-hej="rozglada"] .msk__antena--l{animation:mskDzwon .7s ease-in-out}
.msk[data-hej="rozglada"] .msk__antena--p{animation:mskDzwon .7s ease-in-out .2s}

.msk[data-stan="nudzi"] .msk__cialo{animation:mskKolysanie 4.6s ease-in-out infinite}

.msk[data-stan="smutek"] .msk__cialo{animation:mskSmutek 1.1s ease-out forwards}
.msk[data-stan="smutek"] .msk__antena--l{animation:mskZwis 1.1s ease-out forwards}
.msk[data-stan="smutek"] .msk__antena--p{animation:mskZwis 1.1s ease-out forwards}

.msk[data-stan="bateria"]{--msk-oko:#5A7A94}
.msk[data-stan="bateria"] .msk__cialo{animation:mskOddech 6s ease-in-out infinite}
.msk[data-stan="bateria"] .msk__bateriaw{animation:mskBateria 2.4s ease-in-out infinite}
.msk[data-stan="bateria"] .msk__antena--l,
.msk[data-stan="bateria"] .msk__antena--p{animation:mskZwis 1s ease-out forwards}

@keyframes mskOddech{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-3px) scaleY(1.015)}}
@keyframes mskMrug{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes mskMachanie{0%,100%{transform:rotate(0)}20%{transform:rotate(-52deg)}
  40%{transform:rotate(-28deg)}60%{transform:rotate(-52deg)}80%{transform:rotate(-30deg)}}
@keyframes mskChod{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-5px) rotate(1.5deg)}}
@keyframes mskKrok{0%,100%{transform:translateX(-5px) rotate(-9deg)}50%{transform:translateX(5px) rotate(9deg)}}
@keyframes mskSkok{0%{transform:translateY(0)}45%{transform:translateY(-18px) scaleY(1.05)}
  75%{transform:translateY(0) scaleY(.94)}100%{transform:translateY(0) scaleY(1)}}
@keyframes mskBlysk{0%{opacity:1}30%{opacity:.55}100%{opacity:1}}
@keyframes mskDzwon{0%,100%{transform:rotate(0)}50%{transform:rotate(-16deg)}}
@keyframes mskPrzechyl{0%,100%{transform:rotate(0)}35%{transform:rotate(-8deg)}70%{transform:rotate(-5deg)}}
@keyframes mskPodskok{0%{transform:translateY(0) scaleY(1)}
  18%{transform:translateY(2px) scaleY(.94)}
  46%{transform:translateY(-15px) scaleY(1.05)}
  76%{transform:translateY(0) scaleY(.97)}100%{transform:translateY(0) scaleY(1)}}
@keyframes mskReceL{0%{transform:rotate(0)}40%{transform:rotate(132deg)}
  62%{transform:rotate(120deg)}100%{transform:rotate(0)}}
@keyframes mskReceP{0%{transform:rotate(0)}40%{transform:rotate(-132deg)}
  62%{transform:rotate(-120deg)}100%{transform:rotate(0)}}
@keyframes mskDrzenie{0%,100%{transform:translateX(-1px)}50%{transform:translateX(1px)}}
@keyframes mskDrzenieGlowy{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
@keyframes mskKropla{0%{opacity:0;transform:translateY(-4px) scale(.7)}
  25%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(26px) scale(.9)}}
@keyframes mskKopniak{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(26deg)}}
@keyframes mskKlaskL{0%,100%{transform:rotate(122deg)}50%{transform:rotate(146deg)}}
@keyframes mskKlaskP{0%,100%{transform:rotate(-122deg)}50%{transform:rotate(-146deg)}}
@keyframes mskRozglad{0%,100%{transform:rotate(0)}30%{transform:rotate(-13deg)}
  65%{transform:rotate(13deg)}}
@keyframes mskZamach{0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes mskChwytL{0%,100%{transform:rotate(146deg)}50%{transform:rotate(108deg)}}
@keyframes mskChwytP{0%,100%{transform:rotate(-108deg)}50%{transform:rotate(-146deg)}}
@keyframes mskDynda{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(11deg)}}
@keyframes mskDlon{0%,100%{transform:rotate(-68deg) translateY(-2px)}
  50%{transform:rotate(-74deg) translateY(-4px)}}
@keyframes mskWzrok{0%,100%{transform:translate(3px,-2px)}45%,60%{transform:translate(-4px,-3px)}}
@keyframes mskMysl{0%{opacity:0;transform:translateY(5px)}
  22%,62%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-9px)}}
@keyframes mskKolysanie{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes mskSmutek{to{transform:translateY(6px) scaleY(.96)}}
@keyframes mskZwis{to{transform:rotate(0) translateY(5px) scaleY(.8)}}
@keyframes mskBateria{0%,100%{opacity:1}50%{opacity:.25}}

/* ══ doradca jako rozmowa ══
   Okno przy prawej krawędzi, nad treścią strony. Uchwytem jest maskotka: jej mina
   niesie stan doradcy, zanim klient przeczyta choćby słowo, a kropka mówi, że jest
   już coś do powiedzenia. Na telefonie okno rozkłada się niemal na cały ekran —
   uzasadnień nie da się czytać w rogu. */
.cz{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:70;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px}

/* Bez kafla pod spodem: postać stoi wprost na stronie. Cień idzie za jej kształtem
   (drop-shadow, nie box-shadow), bo prostokątna poświata bez prostokąta, który ją rzuca,
   wygląda na resztkę po usuniętym tle. Własna elipsa w rysunku zostaje — to grunt,
   na którym postać stoi; drop-shadow tylko odkleja ją od tego, co pod nią przewija. */
.cz__uchwyt{position:relative;order:2;z-index:2;width:88px;height:88px;padding:0;border:0;
  background:transparent;cursor:pointer;align-self:flex-end;
  transform-origin:50% 100%;transition:transform .3s cubic-bezier(.3,1.2,.5,1)}
.cz__uchwyt:hover{transform:translateY(-2px)}
.cz__uchwyt:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px}
.cz__uchwyt .msk{width:86px;margin:0 auto;filter:drop-shadow(0 6px 10px #0F1A2A33)}
.cz__kropka{position:absolute;top:5px;right:4px;width:14px;height:14px;border-radius:50%;
  background:var(--accent-bright);border:2px solid var(--surface);
  animation:czPuls 1.8s ease-in-out infinite}
.cz__kropka[hidden]{display:none}
@keyframes czPuls{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

.cz__okno{order:1;position:relative;z-index:1;width:min(430px,calc(100vw - 2*clamp(14px,3vw,28px)));
  max-height:min(660px,calc(100vh - 140px));display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 50px #0F1A2A2E;
  animation:czWejscie .22s cubic-bezier(.2,.7,.3,1)}
.cz__okno[hidden]{display:none}
@keyframes czWejscie{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── podejscie na krawedz okna ──
   Po otwarciu rozmowy postac wchodzi na krawedz naglowka i tam zostaje. Cala droga
   idzie za karta, a widac tylko to, co wystaje ponad jej gorna krawedz: dlon na
   krawedzi i ostatni zryw. Wysokosc podejscia liczy kod (--cz-wspin), bo okno rosnie
   razem z rozmowa — arkusz nie ma skad jej znac.

   Cztery etapy siedza w jednym atrybucie data-podejscie zamiast w czterech osobnych:
   naraz obowiazuje dokladnie jeden, wiec nie da sie zostawic zapalonych dwoch. */
.cz{--cz-wspin:0px}

/* Drabina jest z gradientu, nie z rysunku: szczeble musza wyjsc rowno przy kazdej
   wysokosci okna, a rozciagany rysunek pogrubialby je razem z soba. Konczy sie rowno
   pod krawedzia i stoi za karta — na gorze nie ma jej widac wcale. */
.cz__drabina{position:absolute;right:77px;bottom:2px;z-index:0;width:26px;
  height:var(--cz-wspin);
  display:none;box-sizing:border-box;transform-origin:50% 100%;
  border-left:4px solid var(--graphite);border-right:4px solid var(--graphite);
  background:repeating-linear-gradient(to bottom,var(--graphite) 0 4px,transparent 4px 20px)}
/* Drabina jest tylko przez dwa pierwsze etapy: w chwili, gdy postac chowa sie za karta,
   przewraca sie i wypada za krawedz ekranu. Stad reszta tej historii — bez drabiny
   trzeba sie wciagnac na krawedz samemu i dlatego zajmuje to tyle sil. */
.cz[data-podejscie="wspina"] .cz__drabina,
.cz[data-podejscie="czeka"] .cz__drabina{display:block}
.cz[data-podejscie="wspina"] .cz__drabina{animation:czStawianie .38s cubic-bezier(.3,1.3,.5,1)}
.cz[data-podejscie="czeka"] .cz__drabina{animation:czUpadek .85s cubic-bezier(.45,0,.85,.5) forwards}

/* Dlon na krawedzi: to jedyny znak zycia przez te kilka sekund, kiedy postaci nie
   widac. Siedzi za karta i wystaje ponad krawedz tylko koncem — reszta przedramienia
   ma byc schowana, inaczej wygladaloby to jak reka polozona na naglowku, a nie jak
   ktos, kto sie trzyma krawedzi. Kolor ramienia postaci; zmieni sie tam, zmieni i tu. */
.cz__lapka{position:absolute;right:84px;bottom:calc(var(--cz-wspin) + 6px);z-index:0;
  width:12px;height:24px;border-radius:6px;background:var(--msk-korpus-c,#22355A);
  display:none}
.cz[data-podejscie="lapka"] .cz__lapka{display:block;animation:czLapka 1.5s ease-in-out}
.cz[data-podejscie="wydostaje"] .cz__lapka{display:block;
  animation:czLapkaZnika .3s ease-out .3s forwards}

/* Na przod postac wychodzi dopiero w polowie ostatniego zrywu, kiedy tulow mija
   krawedz. Wczesniej przeskoczylaby na wierzch w srodku ruchu. */
.cz[data-podejscie] .cz__uchwyt{z-index:0}
.cz[data-podejscie="wspina"] .cz__uchwyt{animation:czZnikanie .9s ease-in .38s forwards}
.cz[data-podejscie="czeka"] .cz__uchwyt,
.cz[data-podejscie="lapka"] .cz__uchwyt{opacity:0;pointer-events:none;
  transform:translate(-46px,-118px)}
.cz[data-podejscie="wydostaje"] .cz__uchwyt{animation:czWydostanie 1.1s ease-out forwards}
.cz[data-podejscie="wydostaje"][data-przod="1"] .cz__uchwyt{z-index:2}

/* Siad na krawedzi to zwykla nastawa, nie koniec animacji: gdy okno urosnie o kolejna
   wypowiedz, postac ma przejechac za krawedzia, a nie zostac w powietrzu. */
.cz[data-siedzi="1"] .cz__uchwyt{z-index:2;
  transform:translate(-46px,calc(0px - var(--cz-wspin))) scale(.78)}

@keyframes czStawianie{from{transform:rotate(-78deg)}to{transform:rotate(0)}}
/* Najpierw odchyla sie w druga strone, potem leci — inaczej wygladaloby to jak
   zsuniecie w bok, a nie jak utrata oparcia. */
@keyframes czUpadek{0%{transform:rotate(0)}12%{transform:rotate(-6deg)}
  46%{transform:rotate(46deg)}100%{transform:rotate(62deg) translateY(90vh)}}
@keyframes czLapka{0%{opacity:0;transform:translateY(9px)}
  18%{opacity:1;transform:translateY(0)}
  42%{transform:translateY(-4px)}54%{transform:translateY(1px)}
  74%{transform:translateY(-3px)}100%{transform:translateY(0)}}
@keyframes czLapkaZnika{to{opacity:0}}
@keyframes czZnikanie{
  0%{opacity:1;transform:translate(0,0)}
  16%{opacity:1;transform:translate(-46px,0)}
  82%{opacity:1;transform:translate(-46px,-96px)}
  100%{opacity:0;transform:translate(-46px,-118px)}}
/* Ostatkiem sil: dzwiga sie, zsuwa o kawalek, dopiero potem daje rade. Dlatego krzywa
   jest lamana wartosciami klatek, a nie jednym plynnym przejsciem. */
@keyframes czWydostanie{
  0%{opacity:1;transform:translate(-46px,calc(72px - var(--cz-wspin))) scale(.78)}
  26%{transform:translate(-46px,calc(38px - var(--cz-wspin))) scale(.78)}
  40%{transform:translate(-46px,calc(50px - var(--cz-wspin))) scale(.78)}
  82%{transform:translate(-46px,calc(-14px - var(--cz-wspin))) scale(.78)}
  100%{transform:translate(-46px,calc(0px - var(--cz-wspin))) scale(.78)}}

/* Pasek jest sama nazwa i wyjsciem — kto tu doradza i w czym, mowi pierwsze zdanie
   rozmowy, wiec drugi raz tego nie powtarzamy. Niski pasek oddaje wysokosc tresci
   i nie wchodzi pod postac siedzaca na krawedzi. */
.cz__gl{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 10px 9px 16px;background:var(--graphite);color:#EDF2F5}
.cz__gl b{font-family:var(--display);font-size:15px;font-weight:600}
.cz__zamknij{width:28px;height:28px;flex:none;padding:0;border:1px solid var(--line-dark);
  background:transparent;color:#DCE4E9;font-size:18px;line-height:1;cursor:pointer;
  transition:background .18s,border-color .18s}
.cz__zamknij:hover{background:#242D34;border-color:#3D4952}

.cz__tresc{flex:1;overflow-y:auto;padding:16px 14px 18px;display:flex;flex-direction:column;
  gap:3px;background:var(--ground)}

/* ── wypowiedzi jak w komunikatorze ──
   Doradca od lewej na bialym, klient od prawej na niebieskim, obie banki zaokraglone
   i sciete w rogu po swojej stronie. To uklad, ktory kazdy zna z telefonu — nie trzeba
   sie go uczyc, zeby wiedziec, kto co powiedzial.

   Odstepy sa dwa: ciasny wewnatrz jednej tury i szerszy tam, gdzie zmienia sie mowiacy.
   Rowne odstepy zlepilyby pytanie z odpowiedzia w jedna sciane tekstu. */
.cz__w{display:flex;max-width:100%}
.cz__w--bot{justify-content:flex-start}
.cz__w--ja{justify-content:flex-end}
.cz__w--ja + .cz__w--bot,.cz__w--bot + .cz__w--ja{margin-top:11px}
.cz__b{max-width:86%;padding:10px 14px;font-size:15px;line-height:1.45;color:var(--ink);
  background:var(--surface);border-radius:19px 19px 19px 5px;box-shadow:0 1px 1px #0F1A2A12}
.cz__w--ja .cz__b{background:var(--accent);color:#fff;border-radius:19px 19px 5px 19px}
/* Propozycja i rozliczenie to tabelki, nie zdania — dostaja cala szerokosc rozmowy,
   bo scisniete w banke na 86% lamia sie tam, gdzie nie powinny. */
.cz__b--szeroka{max-width:100%;width:100%}
.cz__h{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:9px}

/* Gotowe odpowiedzi stoja pod wypowiedzia, przy prawej krawedzi — tam, skad pisze
   klient. Pigulki, a nie prostokaty, bo to nie sa przyciski formularza, tylko slowa
   do wybrania. */
.cz__chipy{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end;margin:8px 0 4px}
.cz__chip{font:inherit;font-size:14px;padding:8px 15px;border-radius:999px;
  background:var(--surface);border:1.5px solid var(--accent);color:var(--accent);
  cursor:pointer;text-align:left;transition:background .16s,color .16s}
.cz__chip:hover{background:var(--accent);color:#fff}

/* Propozycja w banieczce: nazwa i wartość obok siebie, powód pod spodem drobniejszym. */
.cz__zest{display:flex;flex-direction:column;gap:12px}
.cz__zest > div{display:flex;flex-direction:column;gap:3px;padding-left:11px;
  border-left:2px solid var(--accent)}
.cz__zest span{display:flex;align-items:baseline;gap:9px}
.cz__zest i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.cz__zest strong{font-family:var(--display);font-size:17.5px;color:var(--ink)}
.cz__zest em{font-style:normal;font-size:13.6px;line-height:1.5;color:var(--muted)}

.cz__uwagi{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.cz__uwagi li{background:#F1F8FB;border-left:2px solid var(--accent);padding:10px 12px;
  font-size:13.4px;line-height:1.5}

/* Nazwa pozycji dostaje wlasny wiersz, a liczby stoja pod nia.
   Wczesniej wszystko szlo w jednej linii i przy waskiej bance kolumna z nazwa scinala
   sie do zera — tekst wychodzil poza swoje pole i wchodzil na liczby. */
.cz__diff{display:flex;flex-direction:column;gap:14px}
.cz__diff > div{display:grid;grid-template-columns:auto auto auto minmax(0,1fr);gap:3px 8px;
  align-items:baseline;font-variant-numeric:tabular-nums}
.cz__diff span{grid-column:1/-1;font-size:13px;line-height:1.35;color:var(--muted)}
.cz__diff i,.cz__diff em{font-style:normal;font-size:15px}
.cz__diff i{color:var(--muted)}
.cz__diff b{font-weight:400;font-size:13px;color:var(--muted)}
.cz__diff b + i{color:var(--ink)}
.cz__diff em{justify-self:end;font-family:var(--display);font-weight:600;color:var(--ink)}
.cz__diff em[data-wiecej]{color:var(--alert)}
.cz__diff em[data-mniej]{color:#1B7F4B}

/* Trzy kropki na czas liczenia — postać w tym momencie i tak idzie, ale rozmowa też
   musi pokazać, że coś się dzieje. */
.cz__kropki{display:flex;gap:5px;padding:3px 0}
.cz__kropki i{width:7px;height:7px;border-radius:50%;background:var(--muted);
  animation:czKropki 1.2s ease-in-out infinite}
.cz__kropki i:nth-child(2){animation-delay:.15s}
.cz__kropki i:nth-child(3){animation-delay:.3s}
@keyframes czKropki{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

@media(max-width:560px){
  .cz{left:10px;right:10px;bottom:10px;align-items:stretch}
  .cz__okno{width:auto;max-height:min(76vh,600px)}
  .cz__uchwyt{width:70px;height:70px;margin-left:auto}
  .cz__uchwyt .msk{width:68px}
  .cz__drabina{right:68px}
  .cz__b{max-width:92%}
}