/* ==========================================================================
   MACLOM - wyglad taste dla podstron.
   Ladowany PO site.css. Nie zmienia tresci ani ukladu podstron, tylko
   wspolne czesci: naglowek, stopke, przyciski, etykiety, kafle, typografie.
   Strona glowna ma wlasny arkusz taste.css; te dwa pliki maja wygladac
   tak samo tam, gdzie sie stykaja (naglowek, stopka, przyciski).
   Zasady: jeden motyw (jasny papier), jeden akcent interfejsu (teal),
   przyciski pelna pigulka, kafle 20px, duze panele 28px.
   ========================================================================== */

:root{
  --max:       1320px;
  --radius:    20px;
  --radius-lg: 28px;
  --on-teal:      #FCFAF5;
  --on-teal-soft: #CFE2E0;
  --header-h:  68px;
  /* cien w odcieniu papieru */
  --shadow-soft: 0 1px 2px rgba(60,52,34,.05), 0 22px 44px -20px rgba(60,52,34,.28);
  --shadow-lift: 0 1px 2px rgba(60,52,34,.05), 0 22px 44px -20px rgba(60,52,34,.28);
}

html{scroll-padding-top:calc(var(--header-h) + 24px);}
body{font-size:17px;}
.wrap{padding:0 clamp(18px,4vw,40px);}

/* tlo z plamami i poswiata za kursorem wypadaja */
.env,.kursor-halo{display:none!important;}

/* --- Typografia ----------------------------------------------------------- */
h1{font-size:clamp(2.1rem,4.2vw,3.6rem);letter-spacing:-.04em;line-height:1.02;}
h2{font-size:clamp(1.7rem,3vw,2.6rem);letter-spacing:-.035em;line-height:1.05;}
h3{letter-spacing:-.02em;}
.lead{font-size:clamp(1.05rem,1.35vw,1.22rem);}
.page-hero .lead{font-size:clamp(1.05rem,1.35vw,1.22rem);}
.page-hero h1{max-width:20ch;}

.eyebrow{
  background:none;border:0;border-radius:0;padding:0;margin-bottom:18px;
  font-size:.76rem;font-weight:500;letter-spacing:.1em;color:var(--teal-dark);
}
.eyebrow::before{display:none;}
.eyebrow--magenta{color:var(--teal-dark);}

.tag{
  background:none;padding:0;border-radius:0;margin-bottom:10px;
  font-size:.8rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-soft);
}
.tag--new{background:none;color:var(--teal-dark);}
.tag--amber{background:none;color:var(--amber-ink);}

/* --- Poziom tonera u gory okna: sam poziom, bez toru ----------------------- */
.toner-progress{height:3px;background:none;z-index:70;}
.toner-progress i{background:var(--teal);}

/* --- Naglowek -------------------------------------------------------------- */
.site-header{
  background:rgba(231,226,214,.88);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
  box-shadow:none;
}
@supports not (backdrop-filter:blur(4px)){
  .site-header{background:var(--paper);}
}
.site-header::after{display:none;}
/* ten sam element ma klase .wrap, wiec boczny odstep trzeba podac tutaj */
.header-inner{min-height:var(--header-h);padding:0 clamp(18px,4vw,40px);}
.brand::before{display:none;}
.brand img,.brand:hover img{width:auto;height:46px;filter:none;}

.site-nav{gap:clamp(16px,2.4vw,34px);}
.site-nav a{
  font-family:'Inter',system-ui,sans-serif;font-size:16px;font-weight:500;
  text-transform:none;letter-spacing:0;color:var(--ink);padding:8px 0;white-space:nowrap;
}
.site-nav a::after{bottom:2px;background:var(--teal);}
.site-nav a:hover{color:var(--teal-dark);}
.site-nav a[aria-current="page"]{color:var(--teal-dark);font-weight:600;}
.site-nav a[aria-current="page"]::after{background:var(--teal);}
.site-nav a.nav-cta,
.site-nav a.nav-cta[aria-current="page"]{
  background:var(--ink);color:var(--paper-raised);padding:10px 20px;letter-spacing:0;font-weight:600;
}
.site-nav a.nav-cta:hover,
.site-nav a.nav-cta[aria-current="page"]:hover{background:var(--teal-dark);color:var(--on-teal);}
.site-nav a.nav-cta:active{transform:scale(.98);}

.burger{border-color:var(--line-strong);border-radius:12px;padding:14px 11px;}
.burger span{background:var(--ink);}

/* --- Przyciski ------------------------------------------------------------- */
.btn{font-size:1rem;padding:16px 28px;white-space:nowrap;}
.btn:active{transform:scale(.98);}
.btn-primary{color:var(--on-teal);box-shadow:none;}
.btn-primary:hover{color:var(--on-teal);}
.btn-light{background:var(--paper-raised);}
.btn-light:hover{background:var(--paper);}

/* --- Sekcje ---------------------------------------------------------------- */
.section--raised{border-top:0;border-bottom:0;}
.section--sunken{box-shadow:none;}
.section--sunken::before,.section--sunken::after{display:none;}

/* --- Kafle: plaskie, bez obwodek, cien dopiero pod kursorem ---------------- */
.card,.stat,.price,.contact-block,.calc,.calc-results,.owner,.photo,.map-figure,.video-figure,.steps li{
  box-shadow:none;
}
.card,.price,.steps li{border:0;}
.card{padding:clamp(22px,2.6vw,34px);transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1);}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);}
.card p{font-size:.98rem;}
.section--raised .card,.section--raised .price,.section--raised .steps li{background:var(--paper);}
/* pasek w kroku mial szerokosc 100% plus odsuniecie i wychodzil poza kafel */
.steps--flow li .gauge{width:auto;}
.media{border:0;box-shadow:none;}
.photo{border:0;}

/* flagowy kafel i blok wyrozniajacy: pelny ciemny teal zamiast gradientu i czerni */
.cards--feature>:first-child{background:var(--teal-dark);box-shadow:none;color:var(--on-teal-soft);}
.cards--feature>:first-child::before{display:none;}
.cards--feature>:first-child p,.cards--feature>:first-child .tag{color:var(--on-teal-soft);background:none;}
.cards--feature>:first-child .gauge i,.cards--feature>:first-child:hover .gauge i{background:var(--on-teal);}
.cards--feature>:first-child .link-arrow:hover{color:var(--on-teal);}

.banner{background:var(--teal-dark);color:var(--on-teal-soft);padding:clamp(28px,5vw,64px);}
.banner::before{display:none;}
.banner h2{color:var(--on-teal);}
.banner p{color:var(--on-teal-soft);font-size:1rem;}
/* teal na ciemnym teal nie bylby widoczny */
.banner .toner-strip i:nth-child(1){background:#8FD6D1;}

/* --- Pytania --------------------------------------------------------------- */
.faq{border-top-color:var(--line-strong);}
.faq-item{border-bottom-color:var(--line-strong);}
.faq-item summary{font-weight:600;font-size:clamp(1.05rem,1.5vw,1.25rem);letter-spacing:-.015em;padding:22px 0;}
.faq-icon::before,.faq-icon::after,.faq-item[open] .faq-icon::before{background:var(--teal);}
.faq-answer{padding:0 0 24px;font-size:1rem;}

/* --- Wezwanie do kontaktu: do lewej, jak na stronie glownej ----------------- */
.contact-card{
  text-align:left;border:0;background:var(--paper-raised);
  padding:clamp(28px,5.5vw,80px);box-shadow:var(--shadow-soft);
}
.section--raised .contact-card{background:var(--paper);}
.contact-card .toner-strip{width:min(220px,60%);height:6px;margin:0 0 28px;}
.contact-card h2{margin-bottom:18px;}
.contact-card>p{margin:0 0 30px;max-width:60ch;}
.contact-card .cta-row{justify-content:flex-start!important;}
.contact-methods{
  justify-content:flex-start;gap:10px clamp(20px,4vw,56px);
  margin-top:clamp(28px,4vw,48px);padding-top:24px;border-top:1px solid var(--line-strong);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.9rem;
}
.contact-methods a{color:var(--ink);}
.contact-methods svg{display:none;}

/* --- Stopka ---------------------------------------------------------------- */
.site-footer{background:var(--paper-sunken);border-top:0;padding:clamp(48px,6vw,80px) 0 28px;font-size:.94rem;}
.footer-grid{gap:clamp(24px,4vw,64px);margin-bottom:0;}
.footer-grid h3,.footer-grid h4{font-size:1rem;letter-spacing:-.01em;margin-bottom:14px;}
.footer-grid a{color:var(--ink);margin-bottom:0;padding:5px 0;}
.footer-grid a:hover{color:var(--teal-dark);text-decoration:underline;}
.footer-about p{max-width:44ch;font-size:.94rem;}
.footer-about .toner-strip{display:none;}
.footer-qr img{border:0;border-radius:12px;}
.footer-bottom{margin-top:clamp(32px,5vw,56px);border-top-color:var(--line-strong);font-size:.82rem;}

/* --- Zdjecia, mapa, film: bez obwodek, podpis na papierze ------------------ */
.photo{border:0;background:var(--paper-raised);}
.photo figcaption{border-top:0;font-size:.9rem;padding:14px 18px 16px;}
.photo figcaption strong{font-size:1rem;}
.map-figure,.video-figure{border:0;box-shadow:none;}
.map-figure figcaption,.video-figure figcaption{border-top:0;}
.map-link::after{background:var(--ink);color:var(--paper-raised);box-shadow:none;}
.map-link:hover::after{background:var(--teal-dark);}

/* --- Liczby firmy: duze, jak na stronie glownej ---------------------------- */
.gauge-row .stat{background:none;border:0;padding:0;}
.stat-num{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;font-size:clamp(2.2rem,4.6vw,4rem);line-height:.95;letter-spacing:-.06em;word-spacing:-.38em;white-space:nowrap;}
.stat-label{font-size:1rem;color:var(--ink-soft);}
.stat .gauge{height:10px;background:none;box-shadow:none;}

/* --- Karta wlasciciela ------------------------------------------------------ */
.owner{background:var(--paper-raised);border:0;border-radius:var(--radius-lg);padding:clamp(26px,3.4vw,46px);box-shadow:var(--shadow-soft);}
.section--raised .owner{background:var(--paper);}
.owner blockquote{font-family:'Space Grotesk',system-ui,sans-serif;font-style:normal;font-weight:500;font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.32;letter-spacing:-.015em;}
.owner blockquote p:last-child{color:var(--teal-dark);}
.owner-head img{width:56px;height:56px;border-radius:16px;border:0;box-shadow:none;}

/* --- Dane firmy i kontakt --------------------------------------------------- */
.facts{border-top-color:var(--line-strong);}
.facts li{border-bottom-color:var(--line-strong);padding:14px 0;font-size:.96rem;}
.contact-block{border:0;padding:clamp(24px,3vw,36px);}
.section--raised .contact-block{background:var(--paper);}
.contact-big{font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:-.03em;font-weight:500;}

.field label{font-size:.9rem;color:var(--ink);font-weight:500;margin-bottom:8px;}
.field textarea,.field select,
.field input[type="text"],.field input[type="tel"],.field input[type="email"],.field input[type="number"]{
  border-radius:12px;padding:14px 16px;font-size:1rem;background:var(--paper-raised);
}
.section--raised .field textarea,.section--raised .field select,.section--raised .field input{background:var(--paper);}
/* pola w jasnym bloku musza sie od niego odcinac */
.contact-block .field textarea,.contact-block .field select,.contact-block .field input{background:var(--paper);}
.form-status{border-left:0;border-radius:var(--radius);background:var(--paper-raised);padding:18px 22px;}

/* --- Kalkulator druku ------------------------------------------------------- */
.calc{border:0;box-shadow:none;border-radius:var(--radius-lg);padding:clamp(22px,3.4vw,44px);}
.calc-results{border:0;background:var(--paper);border-radius:var(--radius);}
.calc-checks{border-top-color:var(--line-strong);}
.calc-savings{border-top-color:var(--line-strong);}
.result-value{font-size:1.3rem;}
.save-num{font-size:clamp(1.7rem,3.4vw,2.6rem);letter-spacing:-.05em;word-spacing:-.38em;}
.check{font-size:.9rem;}
.check strong{font-size:.98rem;}

/* --- Kreator "czy musze wystawiac KPO" --------------------------------------- */
.kreator .krok{border:0;border-radius:var(--radius-lg);padding:clamp(22px,3vw,38px);}
.kreator .krok-glowa h2{font-size:clamp(1.3rem,2.2vw,1.7rem);}
.kreator .opcja{border-radius:14px;padding:16px 18px;border-color:var(--line-strong);}
.kreator .opcja:hover{background:var(--paper-raised);}
.kreator .opcja[aria-pressed="true"]{background:var(--paper-raised);}
.kreator .postep-tor{height:10px;border:0;border-radius:99px;background:var(--paper-sunken);}
.kreator .postep-wypelnienie{border-radius:99px;}
.kreator .wynik{border-top:0;border-right:0;border-bottom:0;padding:clamp(22px,3vw,36px);}
.kreator .werdykt{font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.03em;}
.kreator .zrodla{border:0;}
.kreator .mit{border-top-color:var(--line-strong);}
.kreator .mit-teza{font-style:normal;}

/* --- Dluga instrukcja: spis, kroki, tabele, uwagi ---------------------------- */
.spis{border:0;border-radius:var(--radius-lg);padding:clamp(22px,3vw,34px);}
.spis h2{font-size:.76rem!important;letter-spacing:.1em;font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;color:var(--teal-dark);}
.spis a{font-size:1rem;padding:9px 10px;margin:0 -10px;}
.kroki>li{border:0;box-shadow:none;padding:clamp(22px,3vw,32px) clamp(20px,3vw,32px) clamp(22px,3vw,32px) 78px;}
.kroki>li::before{border-radius:12px;box-shadow:none;background:var(--teal-dark);color:var(--on-teal);}
.kroki h3{font-size:clamp(1.15rem,1.8vw,1.4rem);}
.kroki li{font-size:.98rem;}
.tabela th,.tabela td{border-bottom-color:var(--line-strong);}
.note{border-radius:0 var(--radius) var(--radius) 0;padding:18px 22px;font-size:.95rem;}
.prose p,.prose li{font-size:1.02rem;}

/* ==========================================================================
   RUCH I ZYWE DETALE, ten sam jezyk co na stronie glownej:
   wejscie naglowka, odslona zdjec, fala paskow tonera po kaflach,
   polysk na pasku-sygnaturze. Kazdy ruch ma zadanie: prowadzi wzrok
   albo potwierdza, ze element reaguje. Klasy .in i .live nadaje site.js
   (.live tylko wtedy, gdy element jest w kadrze).
   ========================================================================== */

/* Oferta: piec uslug = piec kafli, pierwszy (glowna usluga) szerszy i na kolorze */
.cards:has(> :nth-child(5):last-child) > :first-child{
  grid-column:span 2;background:var(--teal-dark);color:var(--on-teal-soft);justify-content:flex-end;
}
.cards:has(> :nth-child(5):last-child) > :first-child h3{color:var(--on-teal);font-size:clamp(1.4rem,2.4vw,2rem);}
.cards:has(> :nth-child(5):last-child) > :first-child p,
.cards:has(> :nth-child(5):last-child) > :first-child .tag{color:var(--on-teal-soft);}
.cards:has(> :nth-child(5):last-child) > :first-child .link-arrow{color:var(--on-teal);}
.cards:has(> :nth-child(5):last-child) > :first-child .gauge{background:rgba(255,255,255,.18);box-shadow:none;}
.cards:has(> :nth-child(5):last-child) > :first-child .gauge i{background:var(--on-teal);}

/* pasek tonera u dolu kafla: pelny pod kursorem, fala co kilka sekund */
.card{overflow:hidden;}
.card::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:5px;pointer-events:none;
  background:var(--teal);clip-path:inset(0 100% 0 0);
}
.cards > .card:nth-child(3n+2)::after{background:var(--magenta);}
.cards > .card:nth-child(3n)::after{background:var(--amber);}
.cards:has(> :nth-child(5):last-child) > :first-child::after,
.cards--feature > :first-child::after{background:#8FD6D1;}

/* cennik i kroki reaguja na kursor jak kafle */
.price,.steps li{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1);}
.price:hover,.steps li:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);}

/* pasek-sygnatura: wiekszy, z polyskiem */
.page-hero .page-mark{width:min(200px,50%);height:6px;border-radius:99px;}
.toner-strip{position:relative;}
.toner-strip::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%);
  transform:translateX(-100%);
}

@media (prefers-reduced-motion:no-preference){
  /* wejscie naglowka podstrony: kolejnosc czytania */
  .page-hero .wrap > *{animation:wejscie .9s cubic-bezier(.16,1,.3,1) both;}
  .page-hero .wrap > :nth-child(2){animation-delay:.06s;}
  .page-hero .wrap > :nth-child(3){animation-delay:.12s;}
  .page-hero .wrap > :nth-child(4){animation-delay:.18s;}
  .page-hero .wrap > :nth-child(5){animation-delay:.24s;}
  .page-hero .page-mark{transform-origin:left;animation-name:rysuj;animation-duration:1.1s;}

  .toner-strip::after{animation:polysk 4.6s cubic-bezier(.4,0,.2,1) 1.4s infinite;}

  /* zdjecia w sekcjach odslaniaja sie od prawej, jak zdjecie busa na stronie glownej */
  .js .reveal .media,.js .reveal .map-figure{clip-path:inset(0 0 0 100%);transition:clip-path 1.2s cubic-bezier(.16,1,.3,1) .15s;}
  .js .reveal.in .media,.js .reveal.in .map-figure{clip-path:inset(0);}
  /* pola formularza i bloki kontaktu reaguja jak kafle */
  .contact-block{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1);}
  .contact-block:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);}
  .media img{transition:transform 1.4s cubic-bezier(.16,1,.3,1);}
  .media:hover img{transform:scale(1.04);}

  /* punktory list rosna po kolei */
  .js .reveal .checklist li::before{transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.16,1,.3,1);}
  .js .reveal.in .checklist li::before{transform:scaleX(1);}
  .js .reveal.in .checklist li:nth-child(2)::before{transition-delay:.08s;}
  .js .reveal.in .checklist li:nth-child(3)::before{transition-delay:.16s;}
  .js .reveal.in .checklist li:nth-child(4)::before{transition-delay:.24s;}
  .js .reveal.in .checklist li:nth-child(5)::before{transition-delay:.32s;}
  .js .reveal.in .checklist li:nth-child(n+6)::before{transition-delay:.4s;}

  /* kreator i instrukcja: wybor i kolejne kroki reaguja na kursor */
  .kreator .opcja{transition:border-color .2s,background .2s,transform .35s cubic-bezier(.16,1,.3,1);}
  .kreator .opcja:hover{transform:translateX(6px);}
  .kreator .krok:not([hidden]){animation:wejscie .6s cubic-bezier(.16,1,.3,1) both;}
  .kreator .wynik:not([hidden]){animation:wejscie .7s cubic-bezier(.16,1,.3,1) both;}
  .kroki>li{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1);}
  .kroki>li:hover{transform:translateX(6px);box-shadow:var(--shadow-soft);}
  .spis a{transition:background .16s,color .16s,padding-left .3s cubic-bezier(.16,1,.3,1);}
  .spis a:hover{padding-left:18px;}
  .calc-results .save-num{transition:color .3s;}

  /* fala po kaflach: rusza po wejsciu sekcji, stoi poza kadrem */
  .cards.in > .card::after{animation:fala 5s linear 1.4s infinite;animation-play-state:paused;}
  .cards.live > .card::after{animation-play-state:running;}
  .cards.in > .card:nth-child(2)::after{animation-delay:1.52s;}
  .cards.in > .card:nth-child(3)::after{animation-delay:1.64s;}
  .cards.in > .card:nth-child(4)::after{animation-delay:1.76s;}
  .cards.in > .card:nth-child(5)::after{animation-delay:1.88s;}
  .cards.in > .card:nth-child(6)::after{animation-delay:2s;}
  .cards.in > .card:nth-child(n+7)::after{animation-delay:2.12s;}
  .cards > .card:hover::after{animation:none;clip-path:inset(0);}
}
@keyframes wejscie{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
@keyframes rysuj{from{opacity:0;transform:scaleX(0);}to{opacity:1;transform:scaleX(1);}}
@keyframes polysk{0%{transform:translateX(-100%);}22%,100%{transform:translateX(100%);}}
@keyframes fala{
  0%{clip-path:inset(0 100% 0 0);}
  8%{clip-path:inset(0);}
  16%,100%{clip-path:inset(0 0 0 100%);}
}

/* --- Mniejsze ekrany -------------------------------------------------------- */
@media (max-width:880px){
  .site-nav{margin-top:0;border-top-color:var(--line);padding:4px 0 16px;}
  .site-nav a{border-bottom-color:var(--line);padding:14px 0;font-size:1.05rem;}
  .site-nav .nav-cta{margin-top:16px;padding:15px 20px;}
}
@media (max-width:620px){
  .cards:has(> :nth-child(5):last-child) > :first-child{grid-column:auto;}
  .contact-methods{flex-direction:column;align-items:flex-start;gap:0;}
  .contact-methods a,.contact-methods span{padding:11px 0;}
  .footer-grid a{padding:11px 0;}
  .cta-row .btn{flex:1 1 auto;}
}