/* =========================================================================
     Szybsza Robota, wersja 7. Rejestr wariantu C: papier kontra terminal.
     Barwy, kroje i promienie WYLACZNIE z marka.css. Zero szkla, gradientu, lun i cieni.
     Stan spoczynku kazdego elementu jest widoczny; ruch doklada klasa html.ruch.
     ========================================================================= */
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--paper);color:var(--ink-grey);font-family:var(--body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;}
  h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;}
  h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.03;}
  h2{font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;}
  h3{font-size:1.12rem;font-weight:700;letter-spacing:-.015em;}
  h4{font-size:.98rem;font-weight:700;}
  /* naglowek o poziom wyzej dla kolejnosci naglowkow, wyglad jak h3/h4 */
  .jak-h3{font-size:1.12rem;font-weight:700;letter-spacing:-.015em;line-height:inherit;}
  .jak-h4{font-size:.98rem;font-weight:700;letter-spacing:normal;line-height:inherit;}
  p{margin:0;}
  a{color:var(--accent);text-underline-offset:3px;}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
  .shell{max-width:var(--shell);margin:0 auto;padding-inline:24px;}
  .col{max-width:62ch;}
  .eyebrow{font-family:var(--mono);font-size:.71rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}

  /* ---------- GŁÓWKA ---------- */
  .topbar{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--rule);padding-top:env(safe-area-inset-top, 0px);}
  .topbar .inner{max-width:var(--shell);margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:18px;}
  .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
  .brand .cl{font-family:var(--mono);font-size:.68rem;color:var(--ink-soft);white-space:nowrap;}
  nav.main{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
  /* 2026-10-03: na komputerze przycisk spadal pod menu przy KAZDEJ szerokosci (1442, 1600, 1920).
     Jeden rzad + chowany podpis marki ponizej 1240 px, bo inaczej rzad nie miesci sie od 901 px */
  @media (min-width:901px){nav.main{flex-wrap:nowrap;}}
  @media (max-width:1240px){.brand .cl{display:none;}}
  nav.main a, nav.main summary{font-family:var(--display);font-size:.88rem;font-weight:500;color:var(--ink-soft);text-decoration:none;padding:7px 10px;border-radius:6px;cursor:pointer;white-space:nowrap;}
  nav.main a:hover, nav.main summary:hover{color:var(--ink);background:var(--paper);}
  nav.main a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent);}
  details.dd{position:relative;}
  details.dd summary{list-style:none;display:inline-flex;align-items:center;gap:5px;}
  details.dd summary::-webkit-details-marker{display:none;}
  details.dd summary::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);}
  details.dd[open] summary{color:var(--ink);}
  .ddmenu{position:absolute;top:calc(100% + 6px);left:0;min-width:250px;background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r-md);padding:6px;display:flex;flex-direction:column;z-index:60;}
  .ddmenu a{padding:9px 12px;font-size:.9rem;border-radius:8px;}
  .ddmenu a span{display:block;font-family:var(--body);font-size:.8rem;color:var(--ink-soft);}
  nav.main a.cta-top{font-family:var(--display);font-size:.9rem;font-weight:600;background:var(--ink);color:var(--paper);text-decoration:none;padding:11px 20px;white-space:nowrap;border-radius:var(--r-pill);margin-left:6px;}
  nav.main a.cta-top:hover{background:var(--accent);color:var(--accent-ink);}
  nav.main a.cta-top.on{box-shadow:none;}
  /* Trzy kropki menu: gradient zieleni marki, od --accent do --dark-accent, srodkowa
     dokladnie w polowie. Zero barw spoza palety. Przejscie od ciemnej do jasnej czyta sie
     jako kierunek, co pasuje do nazwy i do podwojnego szewronu w znaku.

     PIERWSZA WERSJA BRALA BARWY Z OKNA TERMINALA (.okno i: #E08072, #D8A23F, #5FC0A8)
     i to byl BLAD, ktory warto zapisac, bo jest kuszacy. Tamte trzy hexy to tokeny
     --gap, --warn i --accent Z MOTYWU CIEMNEGO (marka.css, blok po @media). W oknie
     terminala sa poprawne, bo ono stoi na --dark-2. Naglowek stoi na --surface, czyli na
     jasnym, wiec tam obowiazuje zestaw jasny. Kontrast najslabszej kropki wynosil 2,13:1
     przy tle #FBFCFD. Dodatkowo --gap oznacza w tym systemie DZIURE, wiec czerwien
     w nawigacji niosla znaczenie, ktorego menu miec nie powinno.

     44x44 px to minimalne pole dotyku wg wytycznych Apple. Poprzedni przycisk mial okolo
     31 px wysokosci, czyli ponizej progu, i to byl blad juz przed ta zmiana. Kropki
     zostaja male, rosnie samo pole trafienia. */
  .burger{display:none;margin-left:auto;align-items:center;justify-content:center;gap:5px;
    min-width:44px;min-height:44px;background:none;border:1px solid var(--rule-strong);
    padding:0 13px;cursor:pointer;border-radius:var(--r-pill);
    transition:background .18s,border-color .18s;}
  .burger i{width:7px;height:7px;border-radius:50%;}
  .burger i:nth-child(1){background:var(--accent);}
  .burger i:nth-child(2){background:#357E6E;}
  .burger i:nth-child(3){background:var(--dark-accent);}
  .burger[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);}
  .burger[aria-expanded="true"] i{background:var(--paper);}
  /* Slowo "menu" NIE znika, tylko schodzi z oka. Czytnik ekranu nadal je czyta, a przy
     wylaczonym CSS wraca na wierzch. Sama podmiana napisu na kropki byla by regresja. */
  .burger .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  @media (max-width:900px){
    /* 2026-10-03: bez zawijania otwarte menu stawalo kolumna OBOK logo zamiast pod nim (iPhone operatora) */
    .topbar .inner{flex-wrap:wrap;}
    .burger{display:flex;}
    nav.main{display:none;width:100%;order:3;margin-left:0;flex-direction:column;align-items:stretch;gap:0;padding-bottom:10px;}
    nav.main.open{display:flex;}
    nav.main a, nav.main summary{padding:11px 4px;border-bottom:1px solid var(--rule);border-radius:0;}
    /* 2026-10-03: inline-flex dawal summary szerokosc tekstu, wiec kreska pod "Co robie" byla krotsza od reszty */
    details.dd summary{display:flex;}
    .ddmenu{position:static;border:0;padding:0 0 0 14px;}
    nav.main a.cta-top{text-align:center;margin:10px 0 0;}
    .brand .cl{display:none;}
  }

  /* ---------- SEKCJE ---------- */
  .band{padding-block:clamp(52px,7vw,88px);}
  .band + .band{border-top:1px solid var(--rule);}
  .band.dark{background:var(--dark);color:var(--on-dark);border-top:0;}
  .band.dark h1,.band.dark h2,.band.dark h3,.band.dark h4{color:var(--on-dark);}
  .band.dark h1{font-size:clamp(1.9rem,4.2vw,3rem);}
  .band.dark p{color:var(--on-dark-soft);}
  .band.dark .eyebrow{color:var(--dark-accent);}
  .band.dark strong{color:var(--on-dark);}
  .stack{display:flex;flex-direction:column;gap:22px;}
  .band.text .shell{max-width:860px;}
  .sec-head{display:flex;flex-direction:column;gap:10px;margin-bottom:6px;}
  .sec-head p{color:var(--ink-soft);}
  .sec-label{display:flex;align-items:baseline;gap:14px;margin-bottom:28px;}
  .sec-label .eyebrow{white-space:nowrap;}
  .sec-label .line{flex:1;height:1px;background:var(--rule);}

  /* ---------- HERO ROZCIĘTY: co rozstrzyga kod | gdzie rozstrzyga człowiek ---------- */
  .hero{padding-block:clamp(60px,8vw,104px) clamp(56px,8vw,96px);--seam:50%;}
  .hero h1{max-width:19ch;}
  .hero .sub{margin-top:20px;max-width:54ch;color:var(--ink-soft);}
  .split{margin-top:clamp(34px,5vw,56px);display:grid;grid-template-columns:var(--seam) 1fr;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--rule-strong);transition:grid-template-columns .25s linear;}
  .side{padding:22px;min-width:0;}
  .side.dark{background:var(--term-bg);color:var(--term-ink);}
  .side.light{background:var(--surface);}
  .side .tag{font-family:var(--mono);font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:16px;}
  .side.dark .tag{color:var(--term-dim);}
  .side.light .tag{color:var(--ink-soft);}
  .side pre{font-family:var(--mono);font-size:.8rem;line-height:1.62;margin:0;white-space:pre-wrap;word-break:break-word;}
  .t-dim{color:var(--term-dim);}
  .t-add{color:#5FC0A8;}
  .t-del{color:#E08072;}
  .t-warn{color:#D8A23F;}
  .side.dark .ok{display:grid;grid-template-columns:1fr auto;gap:5px 14px;align-items:start;padding:13px 0;border-top:1px solid rgba(255,255,255,.08);font-size:.87rem;color:var(--on-dark);}
  .side.dark .ok .how{grid-column:1/-1;font-family:var(--mono);font-size:.7rem;color:var(--term-dim);}
  .podpis{margin-top:16px;font-family:var(--mono);font-size:.71rem;line-height:1.55;color:var(--term-dim);}
  .podpis b{color:var(--dark-accent);font-weight:500;}
  .warunek{border:1px solid var(--rule);border-radius:var(--r-md);padding:18px;background:var(--paper);display:flex;flex-direction:column;gap:10px;}
  .warunek + .warunek{margin-top:10px;}
  .warunek .gorny{display:flex;justify-content:space-between;align-items:start;gap:14px;}
  .warunek h2{font-size:.97rem;font-weight:700;letter-spacing:-.012em;line-height:1.35;}
  .warunek p{font-size:.86rem;color:var(--ink-soft);line-height:1.5;}

  /* stany warunków: pigułki na papierze, mięta na terminalu */
  .status{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap;}
  .s-ok{background:var(--accent-soft);color:var(--accent);}
  .s-tmp{background:var(--warn-soft);color:#8B5A06;} /* --warn + 10% czerni: kontrast 5,1 na --warn-soft, sam --warn 4,3 */
  .s-gap{background:var(--gap-soft);color:var(--gap);}
  .side.dark .s-ok{background:rgba(95,192,168,.16);color:var(--dark-accent);}

  /* ---------- PASMO TRZECH LICZB ---------- */
  .liczby .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
  .liczby b{display:block;font-family:var(--display);font-size:clamp(1.9rem,4vw,2.9rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--dark-accent);}
  .liczby span{display:block;margin-top:10px;color:var(--on-dark-soft);font-size:.95rem;}

  /* ---------- BENTO: narzędzie i efekt, parami ---------- */
  .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  /* cztery bloki: dwie kolumny zamiast trzech, zeby czwarty nie zostal sam w drugim rzedzie.
     Regula telefonowa nizej trafia TYM SAMYM selektorem, inaczej wygralaby specyficznosc. */
  .bento.dwie{grid-template-columns:repeat(2,1fr);}
  .cell{border-radius:var(--r-md);padding:26px;display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;transition:transform .18s ease,border-color .18s ease;}
  .cell:hover{transform:translateY(-2px);}
  .cell.d{background:var(--dark);color:var(--on-dark);}
  .cell.d p{color:var(--on-dark-soft);}
  .cell.d .n{color:var(--dark-accent);}
  .cell.l{background:var(--surface);border:1px solid var(--rule);}
  .cell.l:hover{border-color:var(--rule-strong);}
  .cell.l p{color:var(--ink-soft);}
  .cell.l .n{color:var(--accent);}
  .cell .n{font-family:var(--mono);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;}
  .cell h3{font-size:1.12rem;font-weight:700;letter-spacing:-.015em;}
  .cell p{font-size:.92rem;line-height:1.5;}

  /* ---------- ZNAK ---------- */
  /* Kafelek ZALEZY OD TLA: na jasnym --accent (6,56:1), na ciemnym --dark-accent
     (7,89:1). Mieta na jasnym tle dawala 1,95:1 przy progu 3:1 i kwadrat znikal. */
  .logo{display:inline-flex;align-items:center;gap:.4em;font-family:"Anton",var(--display);font-weight:400;font-size:1.34rem;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);line-height:1;white-space:nowrap;}
  .logo .znak{width:1.6em;height:1.6em;border-radius:.38em;background:var(--accent);display:grid;place-items:center;flex:none;}
  .logo .znak svg{width:66%;height:66%;display:block;stroke:var(--accent-ink);}
  .logo.on-dark{color:var(--on-dark);}
  .logo.on-dark .znak{background:var(--dark-accent);}
  .logo.on-dark .znak svg{stroke:var(--dark-accent-ink);}

  /* ---------- IKONY ---------- */
  .icobox{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none;}
  .ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

  /* ---------- KAFLE (realizacje) ---------- */
  .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;}
  .tile{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);padding:26px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);transition:transform .18s ease,border-color .18s ease;}
  .tile:hover{transform:translateY(-2px);border-color:var(--rule-strong);}
  .tile .n{font-family:var(--mono);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);}
  .tile p{font-size:.93rem;color:var(--ink-soft);line-height:1.5;}
  .tile .go{font-family:var(--display);font-size:.88rem;font-weight:600;color:var(--accent);margin-top:auto;padding-top:8px;}

  /* ---------- LISTY I TABELE ---------- */
  ul.plain{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:9px;}
  ul.plain li{font-size:.99rem;}
  .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;}
  .two h4,.two h2{margin-bottom:8px;}
  .kv{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:6px 20px;font-variant-numeric:tabular-nums;border-top:1px solid var(--rule);padding-top:12px;}

  .tl{display:flex;flex-direction:column;border-left:2px solid var(--rule-strong);padding-left:18px;gap:16px;}
  .tl .ev{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:baseline;}
  .tl .d{font-family:var(--mono);font-size:.76rem;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap;}
  @media (max-width:520px){.tl .ev{grid-template-columns:1fr;gap:2px;}}

  .rules{display:flex;flex-direction:column;}
  .rule-row{padding:18px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:6px;}
  .rule-row:last-child{border-bottom:0;}
  .rule-row p{font-size:.99rem;color:var(--ink-soft);}
  .rule-row p b{color:var(--ink);font-weight:600;}

  .gate{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:start;padding:14px 0;border-bottom:1px solid var(--rule);}
  .gate:last-of-type{border-bottom:0;}
  .gate .how{grid-column:1/-1;font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);}
  .legend{display:flex;flex-wrap:wrap;gap:10px 16px;font-family:var(--mono);font-size:.71rem;color:var(--ink-soft);}

  .cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;}
  .cmp > div{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);padding:22px;display:flex;flex-direction:column;gap:10px;}
  .cmp .lbl{font-family:var(--mono);font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;}
  .cmp .a .lbl{color:var(--gap);} .cmp .b .lbl{color:var(--accent);}
  .cmp ul{margin:0;padding-left:1.05em;display:flex;flex-direction:column;gap:7px;font-size:.93rem;}

  /* ---------- TRZY TRYBY WSPÓŁPRACY ---------- */
  .modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;}
  .mode{border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);padding:26px;display:flex;flex-direction:column;gap:11px;}
  .mode .n{font-family:var(--mono);font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
  .mode p{font-size:.94rem;color:var(--ink-soft);line-height:1.5;}
  .more{font-family:var(--display);font-size:.95rem;font-weight:600;color:var(--accent);text-decoration:none;align-self:flex-start;border-bottom:2px solid var(--accent-soft);padding-bottom:2px;}
  .more:hover{border-bottom-color:var(--accent);}

  .slot{font-family:var(--mono);font-size:.83rem;color:var(--warn);background:var(--warn-soft);border:1px dashed var(--warn);border-radius:var(--r-md);padding:14px 16px;}
  .pull{border-left:3px solid var(--accent);padding:4px 0 4px 18px;font-size:1.05rem;}
  .btn{font-family:var(--display);font-weight:600;font-size:.97rem;padding:13px 24px;text-decoration:none;display:inline-block;border-radius:var(--r-pill);}
  .btn-a{background:var(--accent);color:var(--accent-ink);}
  .btn-a:hover{background:var(--ink);color:var(--paper);}
  .btn-b{border:1px solid var(--rule-strong);color:var(--ink);}

  /* ---------- KONTAKT ---------- */
  .kontakt{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(28px,5vw,48px);display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
  .kontakt h2{max-width:16ch;}
  .kontakt p{color:var(--ink-soft);}
  .kontakt .btn{margin-top:8px;}
  .contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;align-items:start;}
  .contact .card{background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:14px;}
  .contact .card p{color:var(--ink-soft);}
  .contact .card h2{color:var(--ink);}
  .contact label{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:6px;}
  .contact input,.contact textarea{width:100%;background:var(--paper);border:1px solid var(--rule-strong);border-radius:var(--r-pill);color:var(--ink);font-family:var(--body);font-size:.95rem;padding:13px 18px;}
  .contact textarea{border-radius:var(--r-md);min-height:110px;resize:vertical;}
  .contact .send{align-self:flex-start;font-family:var(--display);font-weight:600;font-size:.95rem;background:var(--accent);color:var(--accent-ink);border:0;border-radius:var(--r-pill);padding:14px 28px;cursor:pointer;}

  /* ---------- STOPKA ---------- */
  footer.site{background:var(--dark);color:var(--on-dark-soft);padding-block:46px 30px;padding-bottom:calc(30px + env(safe-area-inset-bottom, 0px));}
  footer.site .cols{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:30px;}
  @media (max-width:820px){footer.site .cols{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}}
  footer.site h2{line-height:inherit;font-family:var(--mono);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark);margin-bottom:12px;font-weight:500;}
  footer.site p{font-size:.9rem;line-height:1.6;}
  footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
  footer.site a{color:var(--on-dark-soft);text-decoration:none;font-size:.9rem;}
  footer.site a:hover{color:var(--on-dark);}
  footer.site .base{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:16px;font-family:var(--mono);font-size:.7rem;line-height:1.8;color:var(--on-dark-soft);}

  /* ---------- TELEFON ---------- */
  @media (max-width:900px){
    .bento,.bento.dwie{grid-template-columns:1fr;}
    .liczby .grid{grid-template-columns:1fr;gap:28px;}
    .split{grid-template-columns:1fr;transition:none;}
  }

  /* ---------- RUCH: spoczynek widoczny, ruch dokłada html.ruch ---------- */
  .rv{opacity:1;transform:none;}
  html.ruch .rv{opacity:0;transform:translateY(16px);}
  html.ruch .rv.in{opacity:1;transform:none;transition:opacity .34s ease, transform .34s cubic-bezier(.2,.7,.3,1);transition-delay:calc(var(--i, 0) * 60ms);}
  [hidden]{display:none!important;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .rv,.rv.in,html.ruch .rv,html.ruch .rv.in{opacity:1;transform:none;transition:none;}
    .split,.cell,.tile{transition:none;}
    .cursor{animation:none;}
  }

  /* =========================================================================
     LIFT v8 (decyzja operatora 2026-09-17): obiekt z glebia w hero, pigulka, wieksze liczby.
     Wchodza --grad-a/b/c i --shadow-lift z marka.css. Szklo nadal NIE.
     ========================================================================= */
  .hero{position:relative;overflow:hidden;--tilt:6deg;}
  .hero h1{font-size:clamp(2.3rem,5.6vw,4.2rem);max-width:17ch;}
  .pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);border-radius:var(--r-pill);padding:6px 12px 6px 8px;}
  .pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);}
  .scena{position:relative;margin-top:clamp(40px,6vw,72px);perspective:1400px;}
  .poswiata{position:absolute;inset:-12% -6% -18% -6%;z-index:0;pointer-events:none;filter:blur(48px);opacity:.75;
    background:
      radial-gradient(42% 55% at 18% 30%, var(--grad-a), transparent 70%),
      radial-gradient(38% 50% at 78% 22%, var(--grad-b), transparent 70%),
      radial-gradient(34% 46% at 55% 92%, var(--grad-c), transparent 72%);}
  .split{position:relative;z-index:1;margin-top:0;border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);box-shadow:var(--shadow-lift), 0 0 0 1px rgba(255,255,255,.55) inset;
    transform:rotateX(var(--tilt));transform-origin:50% 100%;transition:grid-template-columns .25s linear, transform .12s linear;}
  .okno{grid-column:1/-1;display:flex;align-items:center;gap:7px;padding:11px 16px;background:var(--dark-2);border-bottom:1px solid rgba(255,255,255,.08);}
  .okno i{width:10px;height:10px;border-radius:50%;background:var(--term-dim);opacity:.55;}
  .okno i:first-child{background:#E08072;opacity:.9;} .okno i:nth-child(2){background:#D8A23F;opacity:.9;} .okno i:nth-child(3){background:#5FC0A8;opacity:.9;}
  .side{padding:26px;}
  .liczby .grid{gap:0;}
  .liczby .grid > div{padding-block:8px;}
  .liczby .grid > div + div{border-left:1px solid rgba(255,255,255,.12);padding-left:36px;}
  .liczby b{font-size:clamp(3rem,7vw,5.4rem);letter-spacing:-.05em;}
  .liczby span{margin-top:14px;font-size:1.02rem;}
  .btn-a{background:linear-gradient(120deg,var(--grad-a),var(--grad-b) 50%,var(--grad-c));color:#0C1A22;box-shadow:var(--shadow-soft);}
  .btn-a:hover{background:linear-gradient(120deg,var(--grad-a),var(--grad-b) 50%,var(--grad-c));color:#0C1A22;box-shadow:var(--shadow-lift);transform:translateY(-1px);}
  @media (max-width:900px){
    .split{transform:none;}
    .liczby .grid > div + div{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:24px;}
  }
  @media (prefers-reduced-motion: reduce){ .split{transform:none;transition:none;} }
  /* v8: ciasniejszy rytm pionowy, zeby obiekt wchodzil w pierwszy ekran; poswiata mocniejsza */
  .hero{padding-block:clamp(36px,5vw,56px) clamp(56px,8vw,96px);}
  .hero .sub{margin-top:16px;}
  .scena{margin-top:clamp(28px,4vw,44px);}
  .poswiata{inset:-16% -8% -22% -8%;opacity:1;filter:blur(44px);}
  /* v8 krok 2: ikony i poswiata w bento */
  .cell{position:relative;overflow:hidden;}
  .cell .icobox{margin-bottom:6px;}
  .cell.d .icobox{background:rgba(95,192,168,.14);color:var(--dark-accent);}
  .cell.d::after{content:"";position:absolute;right:-30%;top:-40%;width:70%;aspect-ratio:1;border-radius:50%;pointer-events:none;
    background:radial-gradient(closest-side, rgba(95,192,168,.22), transparent);}
  .cell.l:hover{box-shadow:var(--shadow-soft);}
  .cell.d:hover{box-shadow:var(--shadow-lift);}
  @media (prefers-reduced-motion: reduce){ .cell,.cell:hover{transform:none;} }

  /* =========================================================================
     v9 (2026-09-17): podstrona /realizacje schodzi z galerii prac na katalog uslug.
     Zakres WYLACZNIE nowy: pasmo czterech liczb + lista katalogu. Zadna istniejaca
     regula nie jest nadpisana, pozostale osiem widokow bez zmian.
     ========================================================================= */
  .liczby.czwor .grid{grid-template-columns:repeat(4,1fr);}
  .liczby.czwor b{font-size:clamp(2rem,4.4vw,3.2rem);}
  .liczby.czwor span{margin-top:8px;font-size:.92rem;}
  .liczby.czwor .grid > div + div{padding-left:24px;}
  @media (max-width:900px){
    .liczby.czwor .grid{grid-template-columns:1fr;gap:22px;}
    .liczby.czwor .grid > div + div{padding-left:0;padding-top:20px;}
  }
  .katalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;}
  .katalog h4{margin-bottom:10px;}
  .katalog .n{display:block;font-family:var(--mono);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
  .katalog ul{margin:0;padding-left:1.05em;display:flex;flex-direction:column;gap:8px;}
  .katalog li{font-size:.93rem;line-height:1.5;color:var(--ink-soft);}

  /* =========================================================================
     v10 (2026-09-17): pierwsze obrazy na stronie. Zdjecie wlasne operatora
     (fotografia, zero elementu z modelu) oraz cztery prace jako dowod na
     /realizacje. Podpisy POD kadrami, nigdy na kadrach.
     ========================================================================= */
  .prace{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;}
  /* Tryptyk trzyma TRZY kolumny niezaleznie od szerokosci pasa. Siatka .prace liczy
     kolumny automatem od 270 px, a w pasie `band text` (860 px) trzy takie sie nie
     mieszcza i szly po dwie. Porownanie ma sens tylko obok siebie, wiec liczba kolumn
     jest tu DEKLAROWANA, nie wyliczana. Ponizej 700 px schodzi do jednej. */
  .prace.tryptyk{grid-template-columns:repeat(3,1fr);gap:14px;}
  .prace.tryptyk figcaption{font-size:.82rem;}
  @media (max-width:700px){ .prace.tryptyk{grid-template-columns:1fr;gap:18px;} }
  /* Tryptyk wychodzi poza waska kolumne pasa `band text` (860 px) do szerokosci
     zwyklego pasa (1120 px), zeby trzy kadry mialy po ~348 px zamiast 261. Tylko od
     1200 px, bo nizej zabraklo by miejsca na marginesy i strona zaczelaby sie przewijac w bok. */
  @media (min-width:1200px){ .band.text .prace.tryptyk{margin-inline:-130px;} }
  .praca{margin:0;display:flex;flex-direction:column;gap:9px;}
  .praca img{width:100%;height:auto;display:block;border-radius:var(--r-md);border:1px solid var(--rule);background:var(--surface);}
  .praca figcaption{font-size:.87rem;line-height:1.45;color:var(--ink-soft);}
  .osoba{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:30px;align-items:start;}
  .osoba figure{margin:0;}
  .osoba img{width:100%;height:auto;display:block;border-radius:var(--r-md);border:1px solid var(--rule);}
  .osoba figcaption{margin-top:9px;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-soft);}
  .osoba .tekst{display:flex;flex-direction:column;gap:18px;}
  @media (max-width:700px){.osoba{grid-template-columns:1fr;gap:22px;}}
  .wizytowka{display:flex;align-items:center;gap:13px;}
  .wizytowka img{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--rule);}
  .wizytowka .kto{font-family:var(--display);font-weight:600;font-size:.96rem;color:var(--ink);line-height:1.3;}
  .band.dark .wizytowka .kto{color:var(--on-dark);}
  .band.dark .wizytowka img{border-color:rgba(255,255,255,.18);}

  /* ---------- DANE KONTAKTOWE (przepisane ze sochanails.pl 2026-09-17) ---------- */
  .dane{display:flex;flex-direction:column;gap:14px;font-family:var(--mono);font-size:.82rem;line-height:1.7;color:var(--ink-soft);}
  .dane a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;}
  .dane a:hover{border-bottom-color:currentColor;}
  .dane .tel{font-size:1.14rem;font-weight:500;letter-spacing:.01em;}
  .dane .kiedy{display:block;font-size:.76rem;margin-top:2px;}
  .dane .firma{border-top:1px solid var(--rule);padding-top:13px;font-size:.78rem;}
  .band.dark .dane{color:var(--on-dark-soft);}
  .band.dark .dane a{color:var(--dark-accent);}
  .band.dark .dane .firma{border-top-color:rgba(255,255,255,.14);}
  footer.site .adres{font-family:var(--mono);font-size:.78rem;line-height:1.75;color:var(--on-dark-soft);}

  /* =========================================================================
     v11: bloki skali z tlumaczeniem przy kazdej liczbie + rozdzielnia dwoch kafli.
     ========================================================================= */
  .skala{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;}
  .poz{display:flex;flex-direction:column;gap:4px;border-top:2px solid var(--accent);padding-top:14px;}
  .poz b{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;}
  .poz .et{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
  .poz p{font-size:.9rem;line-height:1.5;color:var(--ink-soft);margin-top:4px;}
  .band.dark .poz b{color:var(--on-dark);} .band.dark .poz p{color:var(--on-dark-soft);}
  .bento.dwa{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
  /* rolki: pion 9:16, wideo doladowuje sie samo, pod spodem zawsze dziala odnosnik */
  .rolki{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
  .rolka{margin:0;display:flex;flex-direction:column;gap:10px;}
  .rolka .ramka{position:relative;aspect-ratio:9/16;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--rule);background:var(--dark-2);display:block;}
  .rolka .ramka:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
  .rolka figcaption{font-size:.87rem;line-height:1.45;color:var(--ink-soft);}
  .rolka .zadanie{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
  .rolka .zapas{font-size:.8rem;}
  .praca img{background:var(--paper);}

  /* =========================================================================
     v12: rytm i powietrze przeniesione z podstron sochanails.pl (decyzja
     operatora 2026-09-17). Struktura TAK: kreska przy nadtytule, gradientowa
     kreska pod naglowkiem sekcji, wieksze odstepy, kolorowa kreska na kartach.
     Paleta NIE: mieta i ciemna zielen zostaja, rozu z kosmetyki nie bierzemy.
     ========================================================================= */

  /* 1. nadtytul dostaje kreske po lewej, jak w sklepie */
  .sec-head .eyebrow, .stack > .eyebrow, .band > .shell > .eyebrow{display:inline-flex;align-items:center;gap:12px;}
  .sec-head .eyebrow::before, .stack > .eyebrow::before, .band > .shell > .eyebrow::before{
    content:"";width:26px;height:2px;background:var(--accent);border-radius:2px;flex:none;}
  .band.dark .eyebrow::before{background:var(--dark-accent);}

  /* 2. naglowek sekcji: lamany na dwa wiersze + gradientowa kreska pod spodem */
  .sec-head h2, .sec-head h1{max-width:18ch;}
  .sec-head h2::after, .sec-head h1::after{content:"";display:block;width:46px;height:3px;margin-top:14px;border-radius:3px;
    background:linear-gradient(90deg,var(--accent),var(--grad-b));}
  .band.dark .sec-head h2::after, .band.dark .sec-head h1::after{
    background:linear-gradient(90deg,var(--dark-accent),var(--grad-c));}

  /* 3. wiecej powietrza: sekcja, odstepy w kolumnie, oddech pod naglowkiem */
  /* Odstepy sekcji zmierzone 2026-09-19: przy 8,5vw i 1280 px wychodzilo 109 px z kazdej
     strony, czyli 1523 px na siedmiu sekcjach podstrony /sklep, 23% jej wysokosci.
     Operator zglosil to jako "za duzo wolnych przestrzeni na wersji desktopowej".
     Telefon schodzi lagodniej (64 -> 56), bo tam odstepy to tylko 10% wysokosci. */
  .band{padding-block:clamp(56px,6vw,80px);}
  .stack{gap:30px;}
  .sec-head{gap:14px;margin-bottom:14px;}
  .band.text .shell > .stack > p.col + p.col{margin-top:2px;}

  /* 4. karty dostaja kolorowa kreske u gory, jak kafle w sklepie */
  .mode, .tile, .cmp > div, .warunek{position:relative;overflow:hidden;}
  .mode::before, .tile::before, .cmp > div::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
    background:linear-gradient(90deg,var(--accent),var(--grad-b));}
  .cmp .a::before{background:linear-gradient(90deg,var(--gap),var(--warn));}
  .mode, .tile, .cmp > div{padding-top:28px;}

  /* 5. blok skali: kreska juz jest, wyrownac ja do reszty */
  .poz{border-top-width:3px;border-top-color:var(--accent);}

  /* zwijane ramki: krotka informacja widoczna, reszta na zadanie */
  .zwin{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;}
  .zwin + .zwin{margin-top:10px;}
  .zwin > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;
    padding:17px 22px;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink);}
  .zwin > summary::-webkit-details-marker{display:none;}
  .zwin > summary::after{content:"";width:11px;height:11px;flex:none;border-right:2px solid var(--accent);
    border-bottom:2px solid var(--accent);transform:rotate(45deg) translateY(-3px);transition:transform .18s ease;}
  .zwin[open] > summary::after{transform:rotate(-135deg) translateY(-3px);}
  .zwin > summary:hover{background:var(--paper);}
  .zwin > summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
  .zwin .tresc{padding:0 22px 20px;display:flex;flex-direction:column;gap:12px;}
  .zwin .tresc p{font-size:.97rem;color:var(--ink-soft);line-height:1.6;}

  /* wideo z wlasnego pliku: plakat widoczny, plik ladowany dopiero po klinieciu */
  .film{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:28px;align-items:start;}
  .film video{width:100%;height:auto;display:block;border-radius:var(--r-md);border:1px solid var(--rule);background:var(--dark-2);}
  /* Klip ze sklepu SIEDZI W RAMCE i to nie jest ozdoba. SochaNails idzie w rozu i cyjanie,
     ta strona w zieleni i papierze. Bez wyraznej ramki roz rozlewa sie po ukladzie i strona
     zaczyna wygladac na strone tamtej marki. Rant z ciemnego granatu marki robi granice:
     w srodku cudzy brand, na zewnatrz moj. Ten sam chwyt, co okno terminala wyzej. */
  .film.telefon video{border:9px solid var(--dark);border-radius:26px;box-shadow:var(--shadow-soft);}

  /* DWIE KOLUMNY OD 901 px, czyli tylko na duzym ekranie. Ponizej nic sie nie zmienia
     i to jest decyzja z pomiaru, nie zaniechanie: przy 430 px zaden z 15 blokow tej
     podstrony nie miesci sie ponizej 12 slow, wiec kolumna mialaby 180 px szerokosci
     i wiersze po 22 znaki. Zgierz laczy kafelki po dwa, bo jego kafelki maja po cztery
     slowa ("14 min / z Aleksandrowa"). Nasze maja po dwadziescia pare. */
  @media (min-width:901px){
    .pary{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;}
    .pary .film{grid-template-columns:1fr;gap:16px;}
    .pary .film.telefon video{max-width:300px;margin-inline:auto;}
    .bramki{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;}
  }
  .film .obok{display:flex;flex-direction:column;gap:14px;}
  .znacznik{font-family:var(--mono);font-size:.72rem;line-height:1.55;color:#8B5A06;background:var(--warn-soft);
    border:1px solid var(--warn);border-radius:var(--r-md);padding:12px 14px;}
  .praca .znacznik{font-size:.68rem;padding:10px 12px;}
  .film .znacznik{font-family:var(--mono);font-size:.72rem;line-height:1.55;color:#8B5A06;background:var(--warn-soft);
    border:1px solid var(--warn);border-radius:var(--r-md);padding:12px 14px;}
  @media (max-width:700px){
    .film{grid-template-columns:1fr;gap:20px;}
    /* Klip pionowy 9:16 rozciagniety na cala szerokosc telefonu zajmuje wiecej niz ekran,
       a na tej podstronie stoja trzy takie. Zostaje wielkosci telefonu, bo telefon udaje. */
    .film.telefon video{max-width:min(260px,64vw);margin-inline:auto;}
  }

  /* szerokie zrzuty z drobnym tekstem: na waskim ekranie przewijamy w bok,
     zamiast zmniejszac je do rozmiaru, w ktorym nic nie widac */
  @media (max-width:700px){
    .praca.szeroki{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
    .praca.szeroki img{width:auto;max-width:none;min-width:760px;}
    .praca.szeroki figcaption{position:sticky;left:0;}
    .praca.szeroki::after{content:"przesuń w bok, żeby zobaczyć całość";position:sticky;left:0;
      display:block;font-family:var(--mono);font-size:.68rem;color:var(--ink-soft);}
  }

  /* ===== przejscie miedzy podstronami: zaslona ukosna, 420 ms =====
     Kto wylaczyl animacje w systemie, nie zobaczy zadnej. Stara warstwa stoi,
     nowa wjezdza z lewej i ja przykrywa. */
  @media (prefers-reduced-motion: no-preference){
    ::view-transition-old(root){ animation:none; }
    ::view-transition-new(root){ animation:420ms cubic-bezier(.65,0,.35,1) both odslona; z-index:2; }
  }
  @keyframes odslona{
    from{ clip-path:polygon(0 0, 0 0, 0 100%, 0 100%); }
    to{ clip-path:polygon(0 0, 140% 0, 100% 100%, 0 100%); }
  }
  /* SCHEMAT WPIECIA (przestrzen 03). Rysunek jest KODEM, nie obrazem z modelu, wiec skaluje sie
     bez straty i nie wymaga oznaczenia AI. Pokazuje topologie, nigdy danych: na rysunku nie ma
     ani jednej wiadomosci, adresu czy kwoty. */
  .schemat{margin:0;}
  .schemat svg{width:100%;height:auto;display:block;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);}
  .schemat figcaption{margin-top:10px;color:var(--ink-soft);font-size:.9rem;}
  .schemat .pudlo{fill:var(--surface);stroke:var(--rule-strong);}
  .schemat .pudlo-akcent{fill:var(--accent-soft);stroke:var(--accent);}
  .schemat .pudlo-ostrzez{fill:var(--warn-soft);stroke:var(--warn);}
  .schemat .tyt{font-family:var(--display);font-size:15px;font-weight:700;fill:var(--ink);}
  .schemat .opis{font-family:var(--body);font-size:12.5px;fill:var(--ink-soft);}
  .schemat .etyk{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;fill:var(--ink-soft);text-transform:uppercase;}
  .schemat .etyk-a{fill:var(--accent);}
  .schemat .etyk-w{fill:var(--warn);}
  .schemat .strzal{stroke:var(--rule-strong);stroke-width:1.6;fill:none;}

  /* rysunki maja plotno 1000 jednostek: sciskane do szerokosci telefonu daja napis
     ponizej szesciu punktow. Przewijamy w bok w skali jeden do jednego, tak samo
     jak szerokie zrzuty wyzej. Prog 900, nie 700: kolumna tekstowa ma 860, wiec
     przy oknie 701 rysunek schodzil do 653 i napis mial 9,8 punktu, czyli mniej
     niz na telefonie po tej poprawce. */
  @media (max-width:900px){
    .schemat{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
    .schemat svg{width:auto;min-width:1000px;}
    .schemat figcaption{position:sticky;left:0;}
    .schemat::after{content:"przesuń w bok, żeby zobaczyć całość";position:sticky;left:0;
      display:block;font-family:var(--mono);font-size:.68rem;color:var(--ink-soft);}
  }