/* ============================================================
   Wspolny silnik wizualny szablonow demo — Eden.Systems
   Motyw kazdej strony ustawia TYLKO zmienne w :root (--acc, --bg itd.),
   reszta (animacje, kwiz, ikony, siatki) jest tu raz.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth}
img,svg,video,table,iframe{max-width:100%}
body{overflow-x:clip;-webkit-font-smoothing:antialiased}

/* --- baner demo (zawsze widoczny, uczciwe oznaczenie) --- */
.demo-banner{text-align:center;padding:9px 16px;font-family:system-ui,sans-serif;
  font-weight:700;font-size:.83rem;position:sticky;top:0;z-index:60;line-height:1.35}
.demo-banner a{text-decoration:underline}
/* separator widoczny tylko na mobile, gdy .long jest ukryte */
.demo-banner .long-sep{display:none}
/* Naglowki przyklejaja sie PONIZEJ banera. Wysokosc banera zmienia sie
   (na telefonie tekst sie zawijal do 3 linii = 72px), wiec nie da sie jej
   zahardkodowac — szablon.js mierzy ja i ustawia --banner-h. */
:root{--banner-h:37px}

/* --- ANIMACJE --------------------------------------------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 var(--ring,rgba(255,255,255,.35))}
  70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes shimmer{0%{background-position:-460px 0}100%{background-position:460px 0}}
@keyframes countUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.anim{opacity:0}
.anim.in{animation:fadeUp .62s cubic-bezier(.22,.75,.3,1) forwards}
.anim.d1.in{animation-delay:.09s}.anim.d2.in{animation-delay:.18s}
.anim.d3.in{animation-delay:.27s}.anim.d4.in{animation-delay:.36s}
.float{animation:floatY 5.5s ease-in-out infinite}
.pulse{animation:pulseRing 2.4s infinite}
@media (prefers-reduced-motion:reduce){
  .anim,.anim.in{opacity:1!important;animation:none!important}
  .float,.pulse{animation:none!important}
  html{scroll-behavior:auto}
}

/* --- IKONY (inline SVG currentColor) ---------------------- */
.ico{width:26px;height:26px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico-lg{width:34px;height:34px}
.ico-badge{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none}

/* --- PASEK ZAUFANIA --------------------------------------- */
.trust{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;margin-top:26px;
  font-family:system-ui,sans-serif;font-size:.84rem;opacity:.92}
.trust-item{display:flex;align-items:center;gap:8px}
.trust-item .ico{width:19px;height:19px}

/* --- OPINIE ----------------------------------------------- */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.review{padding:20px;border-radius:14px;font-family:system-ui,sans-serif}
.review .stars{letter-spacing:2px;font-size:.9rem;margin-bottom:8px}
.review p{font-size:.92rem;margin-bottom:12px;font-style:italic}
.review b{font-size:.84rem;display:block}
.review span{font-size:.78rem;opacity:.7}

/* --- GALERIA ---------------------------------------------- */
.shots{display:grid;gap:12px}
.shots-3{grid-template-columns:repeat(3,1fr)}
.shots-4{grid-template-columns:repeat(4,1fr)}
.shots img{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),filter .45s}
.shots img:hover{transform:scale(1.045)}
.shots figure{overflow:hidden;border-radius:12px;aspect-ratio:1;margin:0}
@media(max-width:720px){.shots-3,.shots-4{grid-template-columns:1fr 1fr}}

/* --- KWIZ (wieloetapowy) ---------------------------------- */
.kwiz{border-radius:18px;padding:clamp(20px,4vw,34px);font-family:system-ui,sans-serif;position:relative;overflow:hidden}
.kwiz-bar{height:5px;border-radius:99px;overflow:hidden;margin-bottom:22px;background:rgba(128,128,128,.22)}
.kwiz-bar i{display:block;height:100%;width:0;border-radius:99px;transition:width .45s cubic-bezier(.3,.8,.3,1)}
.kwiz-step{display:none;animation:fadeIn .4s both}
.kwiz-step.on{display:block}
.kwiz-q{font-size:clamp(1.05rem,2.4vw,1.28rem);font-weight:800;margin-bottom:6px}
.kwiz-hint{font-size:.85rem;opacity:.72;margin-bottom:18px}
.kwiz-opts{display:grid;gap:10px}
.kwiz-opts.two{grid-template-columns:1fr 1fr}
@media(max-width:560px){.kwiz-opts.two{grid-template-columns:1fr}}
.opt{display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:12px;cursor:pointer;
  border:1.5px solid;background:transparent;text-align:left;font:inherit;color:inherit;
  transition:transform .16s,border-color .16s,background .16s;width:100%}
.opt:hover{transform:translateY(-2px)}
.opt.sel{font-weight:700}
.opt b{display:block;font-size:.97rem}
.opt small{display:block;font-size:.79rem;opacity:.7;font-weight:400;margin-top:2px}
.kwiz-slider{width:100%;margin:8px 0 4px}
.kwiz-val{font-size:1.5rem;font-weight:800;text-align:center;margin-bottom:6px;animation:countUp .3s both}
.kwiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px;align-items:center}
.kwiz-back{background:none;border:0;cursor:pointer;font:inherit;font-size:.86rem;opacity:.65;padding:8px 0}
.kwiz-back:hover{opacity:1}
.kwiz-next{border:0;cursor:pointer;font:inherit;font-weight:800;padding:13px 28px;border-radius:99px;font-size:.93rem}
.kwiz-next:disabled{opacity:.4;cursor:not-allowed}
/* wynik */
.kwiz-res{display:none;animation:fadeUp .5s both}
.kwiz-res.on{display:block}
.kwiz-price{font-size:clamp(1.9rem,6vw,2.7rem);font-weight:900;line-height:1.1;margin:6px 0 4px}
.kwiz-note{font-size:.83rem;opacity:.75;margin-bottom:20px}
.kwiz-break{border-radius:12px;padding:16px 18px;margin-bottom:20px;font-size:.88rem}
.kwiz-break div{display:flex;justify-content:space-between;padding:5px 0;gap:14px}
.kwiz-break div:not(:last-child){border-bottom:1px solid rgba(128,128,128,.18)}
.kwiz-skel{height:14px;border-radius:6px;margin:9px 0;
  background:linear-gradient(90deg,rgba(128,128,128,.14) 8%,rgba(128,128,128,.28) 18%,rgba(128,128,128,.14) 33%);
  background-size:900px 100%;animation:shimmer 1.15s linear infinite}

/* --- FAQ --------------------------------------------------- */
.faq details{border-radius:12px;padding:0 18px;margin-bottom:9px;border:1px solid}
.faq summary{cursor:pointer;font-weight:700;padding:15px 0;list-style:none;font-size:.96rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;font-weight:400;font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details p{padding:0 0 15px;margin:0;font-size:.92rem;opacity:.85}

/* --- POMOCNICZE ------------------------------------------- */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:55;padding:11px 16px;
  display:none;justify-content:space-between;align-items:center;gap:12px;font-family:system-ui,sans-serif}
.sticky-cta b{font-size:.88rem}
.sticky-cta a{padding:11px 20px;border-radius:99px;font-weight:800;font-size:.85rem;text-decoration:none;white-space:nowrap}
@media(max-width:760px){.sticky-cta{display:flex}body{padding-bottom:74px}}

/* ==========================================================
   MOBILE — poprawki po audycie na 360 px
   ========================================================== */
@media(max-width:760px){
  /* 1. Baner: skracamy tresc, zeby nie zajmowal 3 linii (bylo 72px) */
  .demo-banner{font-size:.74rem;padding:7px 12px;line-height:1.3}
  .demo-banner .long{display:none}
  .demo-banner .long-sep{display:inline}

  /* 2. Naglowek: numer telefonu rozjezdzal sie na 3 linie i rozpychal header.
        Na telefonie zostaje logo + jeden przycisk CTA. Telefon jest i tak
        w sekcji kontaktowej oraz w sticky CTA na dole. */
  .nav{height:auto!important;min-height:56px;padding:9px 0;gap:10px}
  .nav-tel{display:none!important}
  .logo{font-size:1.08rem!important;gap:7px}
  .logo .ico,.logo .ico-lg{width:22px;height:22px}
  .nav-cta{padding:9px 15px;font-size:.78rem;white-space:nowrap}

  /* 3. Hero: mniej powietrza, tekst nie przykleja sie do krawedzi */
  .hero{padding-top:26px!important;padding-bottom:30px!important}
  h1{font-size:clamp(1.6rem,7.2vw,2.1rem)!important;line-height:1.18!important}
  .hero-sub{font-size:.96rem!important}
  .btn-row .btn{width:100%;justify-content:center}
  .trust{gap:8px 16px;font-size:.79rem}

  /* 4. Sekcje i naglowki sekcji */
  section{padding:34px 0!important}
  h2{font-size:clamp(1.3rem,5.6vw,1.6rem)!important}
  .sec-t{margin-bottom:24px}

  /* 5. Galerie: 2 kolumny zamiast 3-4, zeby zdjecia nie byly znaczkami */
  .shots-3,.shots-4{grid-template-columns:1fr 1fr!important;gap:9px}

  /* 6. Kwiz: wieksze pola dotykowe */
  .kwiz{padding:20px 16px}
  .opt{padding:14px 14px}
  .kwiz-next{padding:14px 22px;font-size:.9rem}
  .kwiz-opts.two{grid-template-columns:1fr!important}

  /* 7. Sticky CTA: tekst nie moze sie zawijac */
  .sticky-cta b{font-size:.8rem;line-height:1.25}
  .sticky-cta a{padding:11px 16px;font-size:.8rem}
}

@media(max-width:380px){
  .demo-banner{font-size:.7rem}
  .nav-cta{padding:8px 12px;font-size:.74rem}
  .logo{font-size:1rem!important}
  .shots-3,.shots-4{gap:7px}
}