*{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:#F4F7FB;color:#0E1A2B;}
  body{font-family:'Space Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  ::selection{background:#2563EB;color:#fff;}
  a{color:inherit;}
  @media (pointer:fine){ html.snw-cur, html.snw-cur *{cursor:none !important;} }
  .snw-cursor{position:fixed;left:0;top:0;pointer-events:none;z-index:99999;border:1.4px solid rgba(37,99,235,.9);border-radius:3px;will-change:transform,width,height;}
  .snw-cursor i{position:absolute;width:6px;height:6px;background:#2563EB;border:1px solid #fff;border-radius:1px;}
  .snw-cursor i:nth-child(1){left:-3px;top:-3px;} .snw-cursor i:nth-child(2){right:-3px;top:-3px;}
  .snw-cursor i:nth-child(3){left:-3px;bottom:-3px;} .snw-cursor i:nth-child(4){right:-3px;bottom:-3px;}
  @keyframes snw-blink{0%,100%{opacity:1}50%{opacity:.25}}
  @keyframes snw-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (hover:hover){.op-marq:hover .op-track{animation-play-state:paused;}}
  @keyframes snw-float{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
  @keyframes snw-spin{to{transform:rotate(360deg)}}
  /* dzwoniąca ikonka telefonu (CTA „zadzwoń") */
  @keyframes snw-ring{0%,58%,100%{transform:rotate(0)}8%,24%,40%{transform:rotate(-14deg)}16%,32%{transform:rotate(14deg)}}
  .snw-ring{transform-origin:50% 60%;animation:snw-ring 2.4s ease-in-out infinite;}
  image-slot{display:block;}
  /* interactive grid canvas */
  .snw-grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
  /* dekoracyjne nakładki hero (ramka, narożniki, linia wymiarowa) — NIE mogą łapać kliknięć w przyciski */
  .hero-box,.hero-h,.hero-dimt{pointer-events:none;}
  /* HERO — ramka pomiarowa. RAMKA STATYCZNA, NIE-KOMPOZYTOWANA (v1.2.9):
     zwykły border na .hero-box, opacity:1, BEZ transition/transform/will-change/animacji rysowania.
     Dzięki temu przeglądarka NIE tworzy dla ramki osobnej warstwy GPU — maluje ją w tej samej
     warstwie co tekst hero (który u usera działa). To rozwiązuje bug, w którym karta gubiła
     cienkie POZIOME linie na każdej osobnej warstwie (znikała góra i dół ramki, boki zostawały).
     Świadomie BEZ animacji „rysowania" — niezawodność na każdym GPU ważniejsza niż efekt. */
  #start .hero-box{ border:1.4px dashed rgba(37,99,235,.6) !important; border-radius:4px; opacity:1 !important; transition:none !important; overflow:visible; }
  #start .hero-box::before, #start .hero-box::after{ display:none !important; }
  /* gdy JS narysuje ramkę na canvasie (desktop, fx) — chowamy statyczny border; bez JS / na mobile border zostaje jako pewny fallback */
  html.snw-hero-cv #start .hero-box{ border-color:transparent !important; }
  .hero-frame-cv{ display:block; }
  /* Canvas ramki działa tylko na desktopie (fx>900). Na ≤900 (lub po zwężeniu okna z desktopu) chowamy canvas
     i PRZYWRACAMY statyczny border CSS — żeby fallback był pewny i klasa snw-hero-cv (nigdy nie zdejmowana) nie chowała ramki. */
  @media (max-width:900px){
    .hero-frame-cv{ display:block !important; }
    html.snw-hero-cv #start .hero-box{ border-color:transparent !important; }
  }
  /* kinetic words */
  .kw{display:inline-block;will-change:transform,opacity;}
  /* portfolio: hover gloss REMOVED — a mix-blend-mode layer over a playing
     <video> blocks hardware video compositing and throttled the preview to
     ~1.5fps (measured). The video itself is the hover effect now. */
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
    .snw-grid{display:none;}
  }


/* ---- portfolio placeholder slots (image-slot zastapiony) ---- */
.pf-slot{ background:linear-gradient(180deg,#ffffff 0%,#EAF0F8 55%,#DCE6F2 100%); display:flex; align-items:flex-start; justify-content:center; }
.pf-slot img{ display:block; width:100%; height:auto; pointer-events:none; }
.pf-ph{ margin-top:118px; font-family:'Space Mono',monospace; font-size:12px; line-height:1.5; color:#5A6B85; text-align:center; padding:0 24px; max-width:80%; }

/* ---- portfolio: WebP poster at rest + recorded scroll-through VIDEO on hover ---- */
.pf-poster{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:center top; display:block; background:#eef2f7; pointer-events:none; user-select:none; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.pf-card:hover .pf-poster{ transform:scale(1.07); }
/* Mobile: Geometria 3D ma szerokie hero (nagłówek z lewej / radar z prawej); na wąskim
   portretowym kafelku center-crop ucina tekst — kadrujemy do nagłówka. Tylko ten poster. */
@media (max-width:560px){
  .pf-poster[src*="geometria-3d"]{ object-position:center; }
}

/* ---- responsywnosc: lzejszy wariant mobilny ---- */
@media (max-width:880px){
  /* warianty ze spacją po dwukropku — JS normalizuje inline-style (np. przy reveal/siatce),
     więc dopasowujemy ZAROWNO "columns:1.05fr" jak i "columns: 1.05fr" (inaczej zwijanie się psuło) */
  [style*="grid-template-columns:1.12fr"],[style*="grid-template-columns: 1.12fr"],
  [style*="grid-template-columns:1fr 1.25fr"],[style*="grid-template-columns: 1fr 1.25fr"],
  [style*="grid-template-columns:1.05fr"],[style*="grid-template-columns: 1.05fr"],
  [style*="grid-template-columns:0.85fr"],[style*="grid-template-columns: 0.85fr"],
  [style*="grid-template-columns:1.1fr"],[style*="grid-template-columns: 1.1fr"],
  [style*="grid-template-columns:repeat(2"],[style*="grid-template-columns: repeat(2"]{ grid-template-columns:1fr !important; }
  [style*="grid-template-columns:repeat(4"],[style*="grid-template-columns: repeat(4"]{ grid-template-columns:repeat(2,1fr) !important; }

  /* naglowek na mobile: tylko logo + hamburger (wszystkie linki w rozwijanym menu, w tym Kontakt i Darmowy audyt) */
  header nav a{ display:none !important; }
  header nav{ padding:4px !important; }

  /* ukryj drugorzędny przycisk „Umów rozmowę" (dolne CTA) na mobile */
  .snw-hide-mobile{ display:none !important; }

  /* PROCES: na mobile statyczna, kompaktowa wersja-teaser (pinned-scroll + „0%” wyłączone).
     Selektory KLASOWE (nie [style*=…]) — odporne na normalizację inline-style przez JS. */
  #proces{ height:auto !important; }
  .proc-sticky{ position:static !important; height:auto !important; overflow:visible !important; padding:clamp(64px,10vh,92px) 0 52px !important; }
  .proc-top{ position:static !important; padding:0 clamp(22px,5vw,46px) 22px !important; }
  .proc-center{ position:static !important; padding:0 clamp(22px,5vw,46px) !important; }
  .proc-grid{ grid-template-columns:1fr !important; gap:0 !important; }
  .proc-badge{ display:none !important; }            /* zepsuty wskaźnik „0%” — usuwamy na mobile */
  /* PEŁNE bloki etapów (ETAP 0X + tytuł + opis + tagi) — wypełniają sekcję treścią zamiast cienkiej listy */
  .proc-stage{ display:block !important; height:auto !important; }
  .proc-txt{ position:relative !important; inset:auto !important; opacity:1 !important; transform:none !important; margin-bottom:32px !important; }
  .proc-txt:last-child{ margin-bottom:6px !important; }
  .proc-txt > div:last-child{ display:none !important; }                 /* tagi pod opisem — usuwamy z bloków etapów na mobile */
  .proc-txt[data-i="3"] > div:first-child{ color:#34D17E !important; }   /* ETAP 04 = launch → zielony akcent */
  /* kompaktowa lista + jej nagłówek „ETAPY WSPÓŁPRACY” — chowamy (bez duplikacji), zostaje sam przycisk */
  .proc-list{ max-width:none !important; width:100% !important; justify-self:stretch !important; margin-top:6px; }
  .proc-list > div:first-child{ display:none !important; }
  .proc-list .proc-step{ display:none !important; }

  /* elementy choreografii lecacego okna nie sa potrzebne na mobile */
  .snw-anchor{ display:none !important; }
  .snw-fly{ display:none !important; }

  /* HERO: ucinamy desktopową wysokość 100vh i nadmiarowe paddingi (była ogromna pustka przed kolejną sekcją) */
  #start{ min-height:auto !important; padding:132px 22px 50px !important; }
  /* HERO „na wymiar”: kreskowana ramka pomiarowa MIEŚCI się w ekranie (boki nie uciekają) i jest widoczna pod nagłówkiem */
  #start .hero-frame{ width:calc(100vw - 84px) !important; }
  #start .hero-dimt{ top:-46px !important; }                                   /* bliżej ramki, pewnie pod headerem */
  #start .hero-dimt > span:nth-child(3){ font-size:13px !important; font-weight:700 !important; letter-spacing:.3px; }

  /* === Hero: ramka STATYCZNA, nie-kompozytowana (v1.2.9) — patrz komentarz na górze pliku === */
  #start .hero-box{ border:1.4px dashed rgba(37,99,235,.6) !important; border-radius:4px; opacity:1 !important; transition:none !important; overflow:visible !important; }
  #start .hero-box::before, #start .hero-box::after{ display:none !important; }
  /* środkowe znaczniki (góra/dół) nachodzą na odczyt „px” — chowamy je, zostają 4 narożniki */
  #start .hero-frame > .hero-h:nth-of-type(6), #start .hero-frame > .hero-h:nth-of-type(7){ display:none !important; }
  /* narożniki: ukryte do końca pomiaru, potem wskakują sprężyście (gate .snw-hero-done z JS — finisz zamiast „popa” licznika) */
  #start .hero-h{ transform:scale(0); transition:transform .5s cubic-bezier(.34,1.7,.5,1) !important; will-change:transform; }
  .snw-hero-done #start .hero-frame > .hero-h{ transform:scale(1) !important; }
  .snw-hero-done #start .hero-frame > .hero-h:nth-of-type(3){ transition-delay:.06s !important; }
  .snw-hero-done #start .hero-frame > .hero-h:nth-of-type(4){ transition-delay:.06s !important; }
  .snw-hero-done #start .hero-frame > .hero-h:nth-of-type(5){ transition-delay:.12s !important; }
  /* linia wymiarowa u góry: tylko delikatny fade-in, BEZ animacji rysowania (animuje się ramka, nie linie) */
  #start .hero-dimt{ transition:opacity .5s ease .2s !important; }
  #start .hero-dimt > span:nth-child(2), #start .hero-dimt > span:nth-child(4){ transform:none !important; }
  #start .hero-ln{ transition-delay:.95s, .95s !important; }
  #start .hero-ln:nth-of-type(2){ transition-delay:1.08s, 1.08s !important; }
  #start .hero-ln:nth-of-type(3){ transition-delay:1.21s, 1.21s !important; }

  .intro-statement{ padding-top:clamp(40px,7vh,64px) !important; padding-bottom:clamp(40px,7vh,64px) !important; }
  /* rytm pionowy sekcji treści na mobile — desktopowe paddingi (14vh≈118px) dawały ~236px przerwy między sekcjami */
  #konfigurator, #audyt, #portfolio, #dlaczego, #zaufanie, #oferta, #kontakt{
    padding-top:clamp(40px,6vh,56px) !important;
    padding-bottom:clamp(40px,6vh,56px) !important;
  }

  /* KONFIGURATOR: 1 kolumna, podgląd NA GÓRZE, typy POD nim w rzędzie (obok siebie) */
  .cfg-grid{ display:flex !important; flex-direction:column !important; gap:24px !important; }
  .cfg-preview{ order:-1 !important; }                    /* obrazek-podgląd na górze */
  /* mobile = WSZYSTKIE 5 rodzajów (jak desktop), siatka 2 kolumn — czytelnie się mieszczą */
  .cfg-types{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; margin-bottom:18px !important; }
  .cfg-types .cfg-type{ min-width:0 !important; align-items:center !important; justify-content:center !important; text-align:center !important; padding:13px 8px !important; }
  .cfg-types .cfg-type[data-type="niewiem"]{ grid-column:1 / -1 !important; }   /* 5. rodzaj na całą szerokość */
  .cfg-types .cfg-type span:last-child{ display:none !important; }   /* zostaw sam tytuł (kompaktowo) */
  .cfg-types .cfg-type span:first-child{ display:block !important; width:100% !important; min-width:0 !important; font-size:13px !important; line-height:1.2 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
  /* podgląd konfiguratora: pełna szerokość (szerszy) + stała wysokość, żeby zmiana typu nie „skakała” */
  .cfg-preview{ width:100% !important; }
  .cfg-preview .cfg-win{ min-height:320px; width:100% !important; max-width:none !important; }
  .cfg-preview .cfg-body{ height:auto !important; min-height:280px; justify-content:flex-start !important; }
  /* CTA: „Umów spotkanie” OBOK „Chcę taką stronę”, nie pod — równa szerokość */
  .cfg-cta-row{ flex-wrap:nowrap !important; gap:10px !important; }
  .cfg-cta-row > a{ flex:1 1 0 !important; justify-content:center !important; padding-left:8px !important; padding-right:8px !important; white-space:nowrap; }

  /* gdyby fx zaciął się ze startu na szerokim ekranie: na mobile NIGDY kursora ani siatki kropek */
  html.snw-cur, html.snw-cur *{ cursor:auto !important; }
  .snw-cursor{ display:none !important; }
  canvas.snw-grid{ display:none !important; }

  /* KONTAKT (finał) / OPINIE-STATYSTYKI: do 1 kolumny — KLASOWO (odporne na normalizację inline-style) */
  .kontakt-card{ grid-template-columns:1fr !important; gap:34px !important; text-align:center; }
  .kontakt-copy{ display:flex !important; flex-direction:column; align-items:center; }   /* na mobile: tekst i przyciski wyśrodkowane nad kalendarzem */
  .trust-stats{ grid-template-columns:1fr !important; }

  /* KONTAKT — finałowy CTA na telefonie: przycisk w RZĘDZIE 1, a „lub 📞 numer" w RZĘDZIE 2.
     (nie ściskamy wszystkiego w jedną linię — na wąskim ekranie numer był dociśnięty do krawędzi). */
  #kontakt{ padding-left:16px !important; padding-right:16px !important; }
  .kontakt-card{ padding-left:16px !important; padding-right:16px !important; }
  .k-cta{ flex-direction:column !important; gap:16px !important; align-items:center !important; }
  .k-cta > .snw-cal-wrap{ align-self:center !important; }
  .k-cta a[href*="calendly"]{ font-size:15.5px !important; padding:14px 24px !important; }
  .k-btn-word{ display:none !important; }                         /* ukryj „ termin" — zostaje „Zarezerwuj →" */
  .k-alt{ gap:15px !important; }
  .k-or{ font-size:12.5px !important; }
  .k-cta a[href^="tel"]{ font-size:15.5px !important; gap:9px !important; }
  .k-cta a[href^="tel"] > span{ width:30px !important; height:30px !important; }
  .k-cta a[href^="tel"] .snw-ring{ width:16px !important; height:16px !important; }

  /* OFERTA: 2 kolumny (klasowo — odporne na normalizację), numer + nagłówek wyrównane do góry, niższe karty */
  .offer-grid{ grid-template-columns:repeat(2,1fr) !important; }
  #oferta .hov{ min-height:0 !important; padding:22px 20px !important; }
  #oferta .hov > div{ margin-top:12px !important; }
}

/* ---- mobilne menu (hamburger + rozwijane) — domyślnie ukryte, widoczne tylko <=880px ---- */
.m-burger{ display:none; align-items:center; justify-content:center; flex-direction:column; gap:4px; width:44px; height:44px; padding:0; background:transparent; border:none; cursor:pointer; }
.m-burger span{ display:block; width:18px; height:2px; border-radius:2px; background:#0E1A2B; transition:transform .25s ease,opacity .2s ease; }
.m-drawer{ display:none; }
html.menu-open .m-burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
html.menu-open .m-burger span:nth-child(2){ opacity:0; }
html.menu-open .m-burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (max-width:960px){   /* hamburger włącza się WCZEŚNIEJ — zanim pełne menu zacznie się zawijać (~900px) */
  header nav a{ display:none !important; }
  header nav{ padding:4px !important; }
  .m-burger{ display:inline-flex; }
  .m-drawer{ position:fixed; top:68px; left:clamp(18px,4vw,42px); right:clamp(18px,4vw,42px); z-index:8999;
    flex-direction:column; gap:3px; background:rgba(255,255,255,.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(14,26,43,.1); box-shadow:0 24px 60px -22px rgba(14,26,43,.55); border-radius:16px; padding:10px; pointer-events:auto; }
  html.menu-open .m-drawer{ display:flex; }
  .m-drawer a{ text-decoration:none; font-size:16px; font-weight:600; color:#0E1A2B; padding:14px 16px; border-radius:11px; display:flex; align-items:center; gap:10px; }
  .m-drawer a:active{ background:rgba(37,99,235,.08); }
  .m-drawer .m-drawer-cta{ background:#2563EB; color:#fff; justify-content:center; margin-top:5px; }
  .m-drawer .m-drawer-audit{ color:#2563EB; background:rgba(37,99,235,.08); justify-content:center; }
  .m-drawer .m-dot{ width:7px; height:7px; border-radius:50%; background:#1B9E54; box-shadow:0 0 0 3px rgba(27,158,84,.18); }
}

/* keyframes „kliku” licznika + błysku (mocniejszy reveal hero, Kierunek A) */
@keyframes snw-meas-hit{ 0%{transform:scale(1);} 45%{transform:scale(1.18);} 100%{transform:scale(1);} }
@keyframes snw-meas-flash{ 0%{opacity:0;} 25%{opacity:1;} 100%{opacity:0;} }
/* reduced-motion: hero blueprint widoczny od razu, bez ruchu (ramka pełna, narożniki przez .snw-hero-done) */
@media (prefers-reduced-motion: reduce){
  #start .hero-box::before{ left:0 !important; right:0 !important; transition:none !important; }
  #start .hero-box::after{ top:0 !important; bottom:0 !important; transition:none !important; }
  #start .hero-h{ transition:none !important; }
}

/* plakietka LIVE w lecacym oknie (launch) */
.fly-tag--live{ color:#127A3F !important; display:inline-flex; align-items:center; gap:4px; }
.fly-tag--live::before{ content:""; width:5px; height:5px; border-radius:50%; background:#1B9E54; animation:snw-blink 1.3s ease-in-out infinite; }


/* === MOBILE: poprawki responsywne (v1.5.6) === */
@media (max-width: 880px) {
  .op-marq figure { flex: 0 0 84vw !important; max-width: 340px !important; padding: 22px !important; }
  .op-marq { -webkit-mask: linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); mask: linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); }
  .pf-link { padding: 11px 16px !important; min-height: 44px; display: inline-flex; align-items: center; }
  footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 6px; }
}


/* SNW: równe przyciski ZBUDUJ NA ŻYWO */
.cfg-cta-row{ display:flex; flex-wrap:wrap; gap:11px; align-items:flex-start; }
.cfg-cta-row > .cfg-cta-link{ flex:1 1 190px; justify-content:center; box-sizing:border-box; }
.cfg-cta-row > .snw-cal-wrap{ flex:1 1 190px; display:flex !important; flex-direction:column !important; align-items:stretch !important; }
.cfg-cta-row > .snw-cal-wrap > a{ width:auto !important; justify-content:center; box-sizing:border-box; }
@media (max-width:560px){ .cfg-cta-row > .cfg-cta-link, .cfg-cta-row > .snw-cal-wrap{ flex:1 1 100%; } }

/* === SNW: responsywność — polish (tablet H1 nie ucina + czytelniejszy podtekst) === */
#start h1{ font-size:clamp(40px,5.6vw,86px) !important; }
.hero-sub{ font-size:clamp(16px,1.5vw,17px) !important; }

/* ===== Finałowe CTA (#kontakt): „lub + numer" równo ze ŚRODKIEM przycisku (desktop).
   calendly-newtab.js owija przycisk kalendarza w kolumnę (przycisk + podpis „Otworzy się
   w nowej karcie"), przez co sąsiedzi w rzędzie centrowali się do CAŁEJ kolumny i numer
   siedział za nisko. Fix: podpis wypada z przepływu (absolute pod przyciskiem),
   a owijka centruje się w rzędzie jak zwykły przycisk. Mobile (kolumna) bez zmian. */
@media (min-width:881px){
  .k-cta > .snw-cal-wrap{ position:relative; align-self:center !important; }
  .k-cta > .snw-cal-wrap > .snw-caltab{ position:absolute; top:100%; left:0; right:0; }
}