/* =========================================================
   WhyTin — Packaging Solution
   Kolory i proporcje zmierzone z projektu whyTin_www_2026.pdf
   (render 1241 px szerokości → wartości przeliczone na %).
   ========================================================= */

:root{
  /* paleta pobrana z projektu */
  --cream:#F8F2E4;
  --red:#EB4445;
  --yellow:#F7D129;
  --cyan:#74D1ED;
  --orange:#F09F33;
  --navy:#273676;
  --ink:#231F20;
  --ink-soft:#5C5651;
  --white:#FFFFFF;

  /* siatka: projekt ma 1440 px, margines treści 72 px = 5% */
  --page:1440px;
  --gutter:clamp(1.25rem, 5vw, 4.5rem); /* max = 72px przy 1440 */
  --radius-pill:999px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  /* żeby kotwice nie chowały się pod przyklejonym nagłówkiem */
  scroll-padding-top:clamp(104px,10vw,142px);
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Montserrat","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:clamp(.95rem,.9rem + .2vw,1.05rem);
  line-height:1.55;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,blockquote,figure{margin:0}
a{color:inherit}

h1,h2,h3{line-height:1.06;letter-spacing:-.025em;font-weight:700}
h1{font-size:clamp(2.6rem,6.1vw,5.6rem)}
h2{font-size:clamp(2rem,5.9vw,5.35rem)}
h3{font-size:clamp(1.05rem,1.92vw,1.73rem);font-weight:700}

.wrap{width:min(100%, var(--page));margin-inline:auto;padding-inline:var(--gutter)}

/* Projekt powstał na płótnie 1440 px, a bloki kolorystyczne i zdjęcia są
   pozycjonowane procentowo. Bez tego ograniczenia na ekranach 2K/4K wszystko
   skalowałoby się w nieskończoność. Poza tą szerokością zostaje kremowe tło. */
.site-header,main{max-width:var(--page);margin-inline:auto}
.site-footer .wrap{max-width:var(--page)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.deco{position:absolute;pointer-events:none;display:block}

:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.split--selling :focus-visible,.split--know :focus-visible,.cta :focus-visible{outline-color:var(--white)}

.skip-link{
  position:absolute;left:1rem;top:-4rem;z-index:100;
  background:var(--ink);color:var(--cream);
  padding:.7rem 1.1rem;border-radius:8px;text-decoration:none;transition:top .15s ease;
}
.skip-link:focus{top:1rem}

/* kropki i znaki zapytania w nagłówkach */
.dot--red{color:var(--red)}
.dot--yellow{color:var(--yellow)}
.dot--cyan{color:var(--cyan)}
.dot--spaced{margin-left:.35em;font-size:.5em;vertical-align:.55em}

/* =========================================================
   NAGŁÓWEK
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--cream);
  transition:box-shadow .2s ease;
}
/* po odjechaniu strony w dół nagłówek dostaje cień, żeby treść
   wyraźnie wsuwała się pod spód */
.site-header.is-stuck{box-shadow:0 8px 22px rgba(35,31,32,.12)}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding-block:1.55rem .9rem;
}

.logo img{width:auto;height:clamp(56px,6.6vw,95px)}

.nav{display:flex;align-items:center;gap:clamp(1.2rem,3.2vw,3.4rem)}
.nav a{
  text-decoration:none;font-size:clamp(.85rem,1vw,1.02rem);font-weight:500;
  padding:.3rem 0;border-bottom:2px solid transparent;
}
.nav a.is-active{font-weight:700}
.nav a:hover{border-bottom-color:var(--red)}

.nav-toggle{display:none;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  display:block;width:24px;height:2.5px;border-radius:2px;background:var(--ink);
  transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle__bars{margin-inline:auto;position:relative}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0}
.nav-toggle__bars::before{top:-7px}
.nav-toggle__bars::after{top:7px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   PRZYCISKI
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:1.5rem;
  padding:.95rem 1.5rem;border-radius:7px;
  font-weight:600;font-size:clamp(.9rem,1vw,1rem);text-decoration:none;
  border:2px solid transparent;
  transition:background-color .15s ease,color .15s ease;
}
.btn--solid{background:var(--red);color:var(--cream)}
.btn--solid:hover{background:#D93A3B}
.btn--ghost{border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--cream)}

/* =========================================================
   HERO   (projekt: y 0–827 z 4841)
   ========================================================= */
.hero{padding-top:clamp(.5rem,2.4vw,2.2rem);padding-bottom:clamp(2rem,5.6vw,5rem)}
.hero__inner{
  display:grid;grid-template-columns:minmax(0,52%) minmax(0,48%);
  gap:clamp(1.5rem,2vw,2rem);align-items:center;
}
.hero__lead{font-size:clamp(1.1rem,1.98vw,1.78rem);font-weight:700;margin-top:1.5rem;line-height:1.35}
.hero__body{margin-top:1.5rem;color:var(--ink-soft);font-size:clamp(.92rem,1.15vw,1.05rem);line-height:1.55}
.actions{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:2rem}

.stats{display:flex;flex-wrap:wrap;gap:clamp(1.6rem,3vw,3.2rem);margin-top:2.5rem}
.stats li{display:flex;align-items:center;gap:.85rem}
.stats__icon{
  width:clamp(42px,3.6vw,52px);aspect-ratio:1;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;
}
.stats__icon--yellow{background:var(--yellow)}
.stats__icon--cyan{background:var(--cyan)}
.stats__icon svg{width:58%;color:var(--ink)}
.stats__label{display:block;font-size:.88rem;color:var(--ink-soft);line-height:1.3}
.stats__label b{display:block;font-size:clamp(1.05rem,1.4vw,1.35rem);font-weight:700;color:var(--ink)}

.hero__art img{width:100%;height:auto}

/* =========================================================
   SEKCJE DWUDZIELNE (kolorowy blok + kremowa strona ze zdjęciami)
   ========================================================= */
.split{position:relative;display:grid;align-items:start}
.split__text{padding-left:var(--gutter);padding-right:clamp(1.25rem,3vw,3rem)}
.split__art{position:relative}
.split .pic{position:absolute;height:auto}
.split__lead{font-weight:700;font-size:clamp(1.05rem,1.92vw,1.73rem)}
.split__body{margin-top:1.5rem;font-size:clamp(.9rem,1.26vw,1.13rem)}

/* --- Nie sprzedajemy puszek: blok czerwony do 52,4% --- */
.split--selling{
  grid-template-columns:52.4% 47.6%;
  background:linear-gradient(90deg,var(--red) 0 52.4%,var(--cream) 52.4%);
  color:var(--cream);
}
.split--selling .split__text{padding-block:clamp(2.5rem,5.2vw,4.6rem) clamp(2.5rem,4vw,3.5rem)}
.split--selling h2{font-size:clamp(2.3rem,6.5vw,5.85rem);line-height:1.15}
.split--selling .split__lead{margin-top:1.8rem}
.checks{margin-top:1.6rem;display:grid;gap:.28rem;font-size:clamp(.92rem,1.3vw,1.17rem)}
.checks li{position:relative;padding-left:1.5rem}
.checks li::before{content:"✓";position:absolute;left:0;top:0;font-weight:400}

.art--selling{aspect-ratio:591/598}
.art--selling .deco--arcs-navy{
  left:0;top:.5%;width:31.3%;height:30.6%;
  background:repeating-radial-gradient(circle at 0 100%,
    var(--navy) 0 4.2%, transparent 4.2% 8.8%);
  -webkit-mask-image:radial-gradient(circle at 0 100%, #000 0 72%, transparent 72.5%);
  mask-image:radial-gradient(circle at 0 100%, #000 0 72%, transparent 72.5%);
}
.art--selling .deco--cyan-band{left:0;right:0;top:81.6%;bottom:0;background:var(--cyan)}
.art--selling .pic--houses{left:35.4%;top:4.2%;width:54.5%;transform:scaleX(-1)}
.art--selling .pic--lantern{left:-11%;top:42%;width:42%}
.art--selling .pic--truck{left:40.6%;top:68.2%;width:45%}

/* --- Efekt WhyTin: blok żółty do 58,4% --- */
.split--effect{
  grid-template-columns:58.4% 41.6%;
  background:linear-gradient(90deg,var(--yellow) 0 58.4%,var(--cream) 58.4%);
}
.split--effect .split__text{padding-block:clamp(2.5rem,4.6vw,4rem) clamp(2.5rem,4vw,3.6rem)}
.split--effect h2{font-size:clamp(2rem,5.9vw,5.35rem)}
.split--effect .split__lead{margin-top:1.5rem;font-size:clamp(1rem,1.7vw,1.53rem)}

.quote{
  position:relative;margin:1.4rem 0 0;
  margin-left:calc(-1 * var(--gutter) + clamp(1rem,3.5vw,3.6rem));
  background:var(--red);color:var(--cream);
  padding:.85rem clamp(3rem,6vw,5rem) 1.1rem clamp(1rem,1.8vw,1.6rem);
  font-size:clamp(1.5rem,3.95vw,3.55rem);font-weight:700;line-height:1.16;
  width:max-content;max-width:120%;
  clip-path:polygon(0 0, calc(100% - 60px) 0, 100% 50%, calc(100% - 60px) 100%, 0 100%);
}
.effect__body{margin-top:1.2rem;font-size:clamp(.9rem,1.24vw,1.12rem);padding-left:clamp(.5rem,1.5vw,1.5rem)}

.art--effect{aspect-ratio:516/460}
.art--effect .deco--cyan-circle{
  left:40.7%;top:0;width:46.5%;aspect-ratio:1;border-radius:50%;background:var(--cyan);
}
.art--effect .pic--hearts{left:9.9%;top:19.6%;width:77.3%}

/* --- Wiemy, jak: blok czerwony do 44,2%, nagłówek ciemny --- */
.split--know{
  grid-template-columns:44.2% 55.8%;
  background:linear-gradient(90deg,var(--red) 0 44.2%,var(--cream) 44.2%);
  color:var(--cream);
}
.split--know .split__text{padding-block:clamp(2.5rem,4.4vw,3.9rem) clamp(2.5rem,4vw,3.5rem)}
.split--know h2{color:var(--ink);font-size:clamp(2rem,5.9vw,5.35rem)}
.know__list{margin-top:1.9rem;display:grid;gap:1.15rem;font-size:clamp(.92rem,1.31vw,1.18rem);font-weight:500}
.know__list li{position:relative;padding-left:2.6rem}
.know__list li::before{
  content:"";position:absolute;left:0;top:.1em;
  width:1.45em;height:1.45em;border-radius:50%;background:var(--cream);
}

.art--know{aspect-ratio:692/481}
.art--know .deco--yellow-circle{
  left:0;top:0;width:69.4%;aspect-ratio:1;border-radius:50%;background:var(--yellow);
}
.art--know .deco--cyan-panel{left:21.8%;right:0;top:0;height:33.7%;background:var(--cyan)}
.art--know .pic--star{left:9.2%;top:12.3%;width:46.2%}
.art--know .pic--tree{left:47.3%;top:41%;width:39%}

/* =========================================================
   DLACZEGO METAL
   ========================================================= */
.metal{
  display:grid;grid-template-columns:41.9% 58.1%;align-items:center;
  padding-block:clamp(2rem,3.5vw,3rem) clamp(2.5rem,4.5vw,4rem);
}
.metal__art{position:relative;aspect-ratio:520/420}
.metal__art .deco--cyan-blob{
  left:0;top:20%;width:100%;height:56%;
  background:var(--cyan);border-radius:0 var(--radius-pill) var(--radius-pill) 0;
}
.metal__art .pic{position:absolute;height:auto}
.metal__art .pic--black{left:13.1%;top:7.1%;width:42.5%}
.metal__art .pic--gold{left:49%;top:19%;width:34.6%}

.metal__text{padding-right:var(--gutter);padding-left:clamp(0rem,3vw,2.9rem)}
.metal__lead{font-weight:700;font-size:clamp(1rem,1.7vw,1.53rem);margin-top:1.5rem}
.metal__body{margin-top:1.4rem;font-size:clamp(.9rem,1.31vw,1.18rem)}
.metal__closing{font-weight:700;margin-top:1.8rem;font-size:clamp(.95rem,1.26vw,1.13rem)}

.tags{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1.9rem}
.tag{
  min-width:clamp(96px,10.4vw,150px);text-align:center;
  padding:.85rem 1rem;border-radius:8px;
  font-weight:600;font-size:clamp(.85rem,1.12vw,1.01rem);
}
.tag--red{background:var(--red);color:var(--cream)}
.tag--yellow{background:var(--yellow);color:var(--ink)}
.tag--cyan{background:var(--cyan);color:var(--ink)}
.tag--orange{background:var(--orange);color:var(--ink)}

/* =========================================================
   JESTEŚMY OTWARCI
   ========================================================= */
.open{position:relative;padding-block:clamp(2.5rem,4vw,3.4rem) clamp(2.5rem,4.5vw,4rem)}
.open .deco--cyan-quarter{
  left:4.8%;top:0;width:12.5%;aspect-ratio:1;
  border-bottom-left-radius:100%;
  background:radial-gradient(circle at 100% 0, transparent 0 46%, var(--cyan) 46% 100%);
}
.open .deco--orange-panel{
  right:0;top:0;width:27.5%;height:clamp(110px,11.5vw,165px);
  background:var(--orange);
}
.open .deco--orange-panel::before{
  content:"";position:absolute;inset:0;
  background:repeating-radial-gradient(circle at 0 100%,
    var(--cream) 0 2.1%, transparent 2.1% 4.9%);
  -webkit-mask-image:radial-gradient(circle at 0 100%, #000 0 40%, transparent 40.5%);
  mask-image:radial-gradient(circle at 0 100%, #000 0 40%, transparent 40.5%);
}
.open__inner{position:relative;z-index:1}
.open h2{text-align:center;font-size:clamp(1.9rem,5.4vw,4.9rem);
  padding-top:clamp(.5rem,1.5vw,1.2rem);padding-right:clamp(0px,11.4vw,164px)}

.open__connector{
  width:100%;height:clamp(24px,3.4vw,42px);margin-top:clamp(1.2rem,2.4vw,2.2rem);
}
.open .open__inner{padding-inline:calc(var(--gutter) + clamp(0rem,1.6vw,1.5rem))}
.open__grid{display:grid;grid-template-columns:195fr 270fr 195fr 343fr;gap:1.05rem;align-items:stretch}
.open__grid li{
  border:1.5px solid var(--red);border-radius:14px;
  padding:1.4rem 1.4rem 1.6rem;
  font-size:clamp(.88rem,1.24vw,1.12rem);line-height:1.45;
}
.open__note{
  margin-top:clamp(1.6rem,2.6vw,2.4rem);text-align:center;
  color:var(--red);font-weight:700;font-size:clamp(1.05rem,2.9vw,2.6rem);
}

/* =========================================================
   JAK PRACUJEMY
   ========================================================= */
.process{position:relative;padding-block:clamp(2rem,3.4vw,3rem) clamp(2.5rem,4.5vw,4rem)}
.process .deco--cyan-bar{left:0;top:0;width:27.2%;height:clamp(64px,7vw,100px);background:var(--cyan)}
.process__head{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(1rem,3vw,3.4rem);
  padding-top:clamp(1.5rem,3.2vw,3rem);
}
.process__head h2{font-size:clamp(1.9rem,5.4vw,4.9rem)}
.squares{display:flex;gap:clamp(.7rem,1.9vw,2rem)}
.squares i{width:clamp(28px,4.2vw,60px);aspect-ratio:1;background:var(--yellow);border-radius:3px}

.steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.8rem);margin-top:clamp(2rem,3.6vw,3.2rem);
  padding-left:clamp(0rem,2.7vw,2.6rem);
}
.step{position:relative;padding-top:clamp(4.2rem,6.4vw,6.2rem)}
.step__num{
  position:absolute;top:0;left:0;
  width:clamp(48px,5.6vw,80px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  font-weight:700;font-size:clamp(1rem,1.5vw,1.4rem);color:var(--ink);
}
.step__num--red{background:var(--red)}
.step__num--yellow{background:var(--yellow)}
.step__num--cyan{background:var(--cyan)}
.step__num--orange{background:var(--orange)}
/* strzałki między krokami */
.step:not(:last-child)::before{
  content:"";position:absolute;left:calc(clamp(48px,5.4vw,78px) + .8rem);
  right:1.6rem;top:calc(clamp(48px,5.4vw,78px) / 2 - 1px);
  height:2px;background:var(--ink);
}
.step:not(:last-child)::after{
  content:"";position:absolute;right:.9rem;
  top:calc(clamp(48px,5.4vw,78px) / 2 - 7px);
  border:7px solid transparent;border-left:11px solid var(--ink);border-right:0;
}
.step h3{margin-top:.2rem}
.step p{margin-top:.6rem;font-size:clamp(.85rem,1.33vw,1.2rem);color:var(--ink-soft);line-height:1.45}

/* =========================================================
   DO KOGO
   ========================================================= */
.audience{position:relative;padding-bottom:clamp(2.5rem,4.5vw,4rem)}
.audience__panel{
  width:59.1%;background:var(--yellow);
  border-radius:0 var(--radius-pill) var(--radius-pill) 0;
  padding-block:clamp(2rem,3.4vw,3rem) clamp(2rem,3.2vw,2.8rem);
}
.audience__text{padding-left:clamp(1.25rem,8vw,7.2rem);padding-right:clamp(1rem,3vw,3rem)}
.audience__text h2{font-size:clamp(1.9rem,5.9vw,5.35rem)}
.audience__lead{font-weight:700;margin-top:.9rem;font-size:clamp(1rem,1.7vw,1.53rem)}

.audience__bottom{padding-left:clamp(1.25rem,8vw,7.2rem);padding-top:clamp(1.6rem,2.6vw,2.4rem)}
.pills{display:flex;flex-wrap:wrap;gap:.95rem;max-width:52%}
.pill{
  background:var(--cream);border-radius:var(--radius-pill);
  border:1.5px solid transparent;
  padding:.8rem 1.9rem;text-align:center;line-height:1.3;
  font-size:clamp(.85rem,1.12vw,1.01rem);font-weight:600;
  min-width:clamp(96px,7.6vw,110px);
}
.pill--cyan{border-color:var(--cyan)}
.pill--red{border-color:var(--red)}
.pill--yellow{border-color:var(--yellow)}
.pill--orange{border-color:var(--orange)}

.audience__photo{
  position:absolute;right:0;top:0;width:41%;
  aspect-ratio:1;border-radius:50%;overflow:hidden;
}
.audience__photo img{width:100%;height:100%;object-fit:cover}

/* =========================================================
   GALERIA (jedyna sekcja spoza projektu PDF)
   ========================================================= */
.gallery{padding-block:clamp(2.5rem,4.5vw,4rem);background:#F2EBDA}
.gallery__head h2{font-size:clamp(1.9rem,4.2vw,3.7rem)}
.gallery__head p{margin-top:.9rem;color:var(--ink-soft);max-width:52ch}

.gallery__filters{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.8rem}
.chip{
  font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
  padding:.6rem 1.4rem;border-radius:var(--radius-pill);
  border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.chip:hover{border-color:var(--red);color:var(--red)}
.chip.is-active{background:var(--red);border-color:var(--red);color:var(--cream)}

.gallery__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:1.1rem;margin-top:1.8rem;
}
.tile[hidden]{display:none}
.tile > button{
  font:inherit;cursor:pointer;width:100%;padding:0;
  border:0;border-radius:14px;overflow:hidden;
  background:var(--white);color:var(--ink);
  display:grid;text-align:left;
  box-shadow:0 1px 2px rgba(35,31,32,.07);
  transition:transform .18s ease,box-shadow .18s ease;
}
.tile > button:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(35,31,32,.15)}

.tile__media{position:relative;display:block;overflow:hidden;background:var(--white)}
.tile img{aspect-ratio:1;object-fit:cover;width:100%;display:block}

/* Warstwa koloru na zdjęciu. `multiply` zamienia białe tło fotografii na kolor
   kafelka i zostawia cień pod puszką. Po najechaniu kursorem warstwa zwija się
   żaluzjowo w dół i odsłania oryginalne zdjęcie. */
.tile__wash{
  position:absolute;inset:0;background:var(--kafel);
  mix-blend-mode:multiply;
  clip-path:inset(0 0 0 0);
  transition:clip-path .55s cubic-bezier(.32,.72,.2,1);
}
.tile > button:hover .tile__wash,
.tile > button:focus-visible .tile__wash{clip-path:inset(100% 0 0 0)}

/* Zdjęcie w scenerii (nie na białym tle) — bez warstwy koloru */
.tile--foto .tile__wash{display:none}

.tile__label{
  display:block;font-size:.88rem;font-weight:600;line-height:1.3;
  padding:.8rem 1rem .95rem;
  background:var(--kafel);color:var(--kafel-napis);
}

/* Paleta kafelków — kolejność dobrana tak, żeby przy siatce 4- i 5-kolumnowej
   żaden kolor nie stykał się sam ze sobą w pionie ani w poziomie. */
.tile{--kafel:var(--yellow);--kafel-napis:var(--ink)}
.tile--c1{--kafel:var(--yellow);--kafel-napis:var(--ink)}
.tile--c2{--kafel:var(--cyan);  --kafel-napis:var(--ink)}
.tile--c3{--kafel:#F2666B;      --kafel-napis:var(--cream)}
.tile--c4{--kafel:var(--orange);--kafel-napis:var(--ink)}
.tile--c5{--kafel:#8FA0D8;      --kafel-napis:var(--ink)}

/* Na ekranach dotykowych nie ma najechania — zdjęcie w oryginale
   pokazuje się po dotknięciu, w powiększeniu. */
@media (hover:none){
  .tile__wash{opacity:.82}
}

.gallery__empty{margin-top:2rem;font-weight:600;color:var(--ink-soft)}

.lightbox{border:0;padding:0;background:transparent;width:min(92vw,780px);max-width:none;color:var(--cream)}
.lightbox::backdrop{background:rgba(35,31,32,.9)}
.lightbox__img{width:100%;max-height:76vh;object-fit:contain;background:var(--cream);border-radius:14px}
.lightbox__caption{margin-top:.9rem;text-align:center;font-weight:600}
.lightbox__close{
  position:absolute;top:-.5rem;right:0;transform:translateY(-100%);
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:var(--cream);color:var(--ink);font-size:1.6rem;line-height:1;
}

/* =========================================================
   CTA — nagłówek ciemny, pasek na całą szerokość
   ========================================================= */
.cta{position:relative;background:var(--red);padding-top:clamp(2.2rem,4vw,3.6rem);overflow:hidden}
.cta .deco--crescent{
  right:0;top:clamp(1.6rem,4.2vw,60px);
  width:34.9%;height:clamp(94px,12.7vw,183px);
  background:var(--cream);border-radius:var(--radius-pill) 0 0 var(--radius-pill);
}
.cta .deco--disc{
  top:clamp(1.6rem,4.2vw,60px);
  width:clamp(94px,12.7vw,183px);aspect-ratio:1;border-radius:50%;background:var(--red);
  /* skrajnie lewe położenie: lewa krawędź koła równa się lewej krawędzi paska */
  right:calc(34.9% - clamp(94px,12.7vw,183px));
  animation:ksiezyc 18s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
@keyframes ksiezyc{
  from{right:calc(34.9% - clamp(94px,12.7vw,183px))}
  to{right:0}
}
/* przy włączonym ograniczeniu animacji koło stoi tam, gdzie w projekcie */
@media (prefers-reduced-motion:reduce){
  .cta .deco--disc{animation:none;right:19.5%}
}

.cta__text{position:relative;z-index:1;padding-left:clamp(1.25rem,8vw,7.2rem)}
.cta__text h2{color:var(--ink);font-size:clamp(1.9rem,5.5vw,5rem)}
.cta__text p{
  margin-top:clamp(1.2rem,2.2vw,2rem);color:var(--cream);
  font-weight:600;font-size:clamp(1rem,1.82vw,1.64rem);line-height:1.6;
}

.cta__bar{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:clamp(1rem,2.8vw,3.2rem);
  margin-top:clamp(1.8rem,3.2vw,2.8rem);
  margin-bottom:clamp(1.2rem,2vw,1.8rem);
  text-decoration:none;
}
.cta__bar-label{
  flex:1 1 auto;background:var(--cream);color:var(--ink);
  border-radius:0 var(--radius-pill) var(--radius-pill) 0;
  padding:clamp(1rem,2vw,1.9rem) clamp(1.5rem,4vw,4rem);
  text-align:right;
  font-weight:700;font-size:clamp(1.4rem,3vw,2.7rem);
  transition:background-color .15s ease,color .15s ease;
}
.cta__bar-circle{
  position:relative;
  flex:0 0 auto;width:clamp(76px,12.5vw,180px);aspect-ratio:1;
  background:var(--cream);color:var(--ink);border-radius:50%;
  display:grid;place-items:center;
  margin-right:clamp(1rem,5vw,5.2rem);
  transition:background-color .15s ease,color .15s ease;
}
.cta__bar-circle svg{width:60%;animation:zacheta 6s ease-in-out infinite}

/* Rozchodzący się pierścień — zwraca uwagę, nie ruszając samym przyciskiem.
   Obie animacje mają ten sam 6-sekundowy cykl: ruch trwa ułamek sekundy,
   resztę czasu przycisk stoi spokojnie. */
.cta__bar-circle::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--cream);opacity:0;
  animation:pierscien 6s ease-out infinite;
  pointer-events:none;
}

@keyframes zacheta{
  0%,72%,100%{transform:translateX(0)}
  78%{transform:translateX(14%)}
  84%{transform:translateX(0)}
  90%{transform:translateX(14%)}
  96%{transform:translateX(0)}
}
@keyframes pierscien{
  0%,70%{transform:scale(1);opacity:0}
  74%{opacity:.6}
  92%,100%{transform:scale(1.45);opacity:0}
}

/* Po najechaniu kursorem zachęta jest już niepotrzebna — strzałka
   przesuwa się w prawo i tam zostaje. */
.cta__bar:hover .cta__bar-circle svg{animation:none;transform:translateX(14%)}
.cta__bar:hover .cta__bar-circle::after{animation:none;opacity:0}
.cta__bar-circle svg{transition:transform .18s ease}

@media (prefers-reduced-motion:reduce){
  .cta__bar-circle svg,.cta__bar-circle::after{animation:none}
}
.cta__bar:hover .cta__bar-label,
.cta__bar:hover .cta__bar-circle{background:var(--ink);color:var(--cream)}

/* =========================================================
   STOPKA
   ========================================================= */
.site-footer{background:var(--ink);color:var(--cream);padding-block:2.2rem}
.footer__inner{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}
.footer__brand{display:inline-block;background:var(--cream);border-radius:12px;padding:.7rem 1rem}
.footer__brand img{width:auto;height:46px}
.footer__contact{display:flex;flex-wrap:wrap;gap:1.5rem 2.2rem;font-size:.95rem}
.footer__contact a{text-decoration:none;border-bottom:1px solid rgba(248,242,228,.35)}
.footer__contact a:hover{border-bottom-color:var(--yellow)}
.footer__legal{font-size:.78rem;opacity:.65;width:100%}

/* =========================================================
   RWD
   ========================================================= */
@media (max-width:1080px){
  .open__grid{gap:.75rem}
  .open__grid li{padding:.95rem}
  .pills{max-width:none}
}

@media (max-width:900px){
  .nav-toggle{display:block}
  .nav{
    position:absolute;left:0;right:0;top:100%;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid rgba(35,31,32,.12);
    box-shadow:0 12px 24px rgba(35,31,32,.12);
    padding:0 var(--gutter);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .25s ease,visibility 0s linear .25s;
  }
  .nav.is-open{
    max-height:min(80vh,26rem);overflow-y:auto;visibility:visible;
    padding-block:.5rem 1rem;transition:max-height .25s ease,visibility 0s;
  }
  .nav a{width:100%;padding:.8rem 0;border-bottom:1px solid rgba(35,31,32,.1)}

  .hero__inner{grid-template-columns:minmax(0,1fr)}
  .hero__art{max-width:520px;margin-inline:auto}
  .hero__lead br,.hero__body br,.split__body br,.know__list br,
  .step p br,.metal__body br,.effect__body br,.cta__text p br{display:none}

  /* sekcje dwudzielne: jednolite tło + zdjęcia pod tekstem */
  .split{grid-template-columns:minmax(0,1fr) !important;background-image:none !important}
  .split--selling{background-color:var(--red)}
  .split--effect{background-color:var(--yellow)}
  .split--know{background-color:var(--red)}
  .split__text{padding-inline:var(--gutter)}
  .split__art{width:100%;max-width:560px;margin-inline:auto}
  .art--selling .deco--cyan-band,
  .art--selling .deco--arcs-navy,
  .art--know .deco--cyan-panel{display:none}
  .split--selling .split__art,.split--know .split__art{background:var(--cream);border-radius:14px}
  .art--selling .pic--lantern{left:0}
  .art--selling .pic--truck{left:46%}

  .quote{margin-left:0;max-width:100%;width:auto;
    clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%);
    padding-right:3rem}

  .metal{grid-template-columns:minmax(0,1fr);gap:2rem}
  .metal__art{max-width:520px}
  .metal__text{padding-inline:var(--gutter)}

  .open .deco--cyan-quarter,.open .deco--orange-panel,.process .deco--cyan-bar{display:none}
  .open__connector{display:none}
  .open__grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem 1.5rem;padding-left:0}
  .step:nth-child(2)::before,.step:nth-child(2)::after{display:none}

  .audience__panel{width:100%;border-radius:0}
  .audience__text,.audience__bottom,.cta__text{padding-left:var(--gutter)}
  .audience__photo{position:static;width:min(320px,72%);margin:2rem auto 0}

  .cta .deco--crescent,.cta .deco--disc{display:none}
  .cta__bar-label{border-radius:var(--radius-pill);text-align:center}
  .cta__bar{padding-inline:var(--gutter)}
  .cta__bar-circle{margin-right:0}
}

@media (max-width:600px){
  .open__grid,.steps,.gallery__grid{grid-template-columns:minmax(0,1fr)}
  .gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .tile > button{padding:.8rem}
  .step{padding-top:0;padding-left:4.2rem;min-height:3.4rem}
  .step::before,.step::after{display:none !important}
  .steps{gap:1.6rem}
  .actions{gap:.8rem}
  .btn{gap:1rem;padding:.8rem 1.2rem}
  .tags .tag{flex:1 1 42%}
  .cta__bar{gap:.8rem}
}

/* =========================================================
   FORMULARZ ZAPYTANIA (okno modalne)
   ========================================================= */
.modal{
  border:0;padding:0;background:transparent;
  width:min(94vw,880px);max-width:none;max-height:92vh;
  color:var(--ink);
}
.modal::backdrop{background:rgba(35,31,32,.78)}
.modal__panel{position:relative}
.modal__body{
  background:var(--cream);border-radius:20px;
  padding:clamp(1.6rem,3.4vw,3rem);
  max-height:92vh;overflow-y:auto;
}
.modal__close{
  position:absolute;top:.85rem;right:.85rem;z-index:2;
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:var(--ink);color:var(--cream);
  font-size:1.7rem;line-height:1;
}
.modal__close:hover{background:var(--red)}

/* Bez JavaScriptu okno nie ma jak się otworzyć, więc formularz
   wyświetla się wtedy jako zwykła sekcja na dole strony. */
html:not(.js) .modal{
  display:block;position:static;max-height:none;
  width:min(100%,var(--page));margin-inline:auto;
  padding:clamp(2.5rem,4.5vw,4rem) var(--gutter);
}
html:not(.js) .modal__body{max-height:none;border-radius:0;padding:0;background:none}
html:not(.js) .modal__close{display:none}

.form-head{max-width:56ch}
.form-head h2{font-size:clamp(1.7rem,3.6vw,2.9rem)}
.form-head{padding-right:3rem}
.form-head p{margin-top:1rem;font-size:clamp(.95rem,1.26vw,1.13rem);color:var(--ink-soft)}

.form{margin-top:clamp(1.8rem,3vw,2.6rem);max-width:960px}
.form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.4rem}
.field{display:grid;gap:.45rem;margin:0}
.field--wide{grid-column:1/-1}
.field label{font-weight:600;font-size:.92rem}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  font:inherit;font-size:1rem;color:var(--ink);
  background:var(--white);
  border:2px solid rgba(35,31,32,.18);border-radius:10px;
  padding:.85rem 1rem;width:100%;
  transition:border-color .15s ease;
}
.field textarea{resize:vertical;min-height:9rem;line-height:1.5}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                   linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 22px) 55%, calc(100% - 15px) 55%;
  background-size:7px 7px, 7px 7px;background-repeat:no-repeat;
  padding-right:2.8rem;
}
.field :is(input,select,textarea):focus{border-color:var(--red);outline:none}
.field :is(input,select,textarea)[aria-invalid="true"]{border-color:var(--red);background:#FDECEC}

.field--check{margin-top:1.4rem}
.field--check label{display:flex;gap:.75rem;align-items:flex-start;
  font-weight:400;font-size:.92rem;line-height:1.5;cursor:pointer}
.field--check input{width:1.25rem;height:1.25rem;flex:0 0 auto;margin-top:.15rem;accent-color:var(--red)}

.form-error{color:var(--red);font-size:.82rem;font-weight:600}

.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 1.8rem;margin-top:1.8rem}
.form-actions .btn{border:0;cursor:pointer;font:inherit;font-weight:600}
.form-note{font-size:.9rem;color:var(--ink-soft)}
.form-note a{font-weight:600}

.form-alert{
  margin-top:1.6rem;padding:1rem 1.25rem;border-radius:10px;
  font-weight:600;font-size:.95rem;
}
.form-alert--ok{background:var(--yellow);color:var(--ink)}
.form-alert--err{background:var(--red);color:var(--cream)}
.form-alert--err a{color:var(--cream)}

@media (max-width:700px){
  .form-grid{grid-template-columns:minmax(0,1fr)}
}