/* Wyprane3City — hero strony glownej: szesc scen z maska wodna (prototyp Szefa v3, 16.09.2026).
   Klasy z prefiksem scn*, bo motyw ma wlasne .eyebrow/.lead/.actions.
   Rozmiary tekstu i ikon podniesione wzgledem prototypu (tam 7-13 px). */
.scn{--scn-cyan:#29d3ff;--scn-white:#f6f9fc;--scn-muted:#c1d0dd;--scn-ease:cubic-bezier(.22,.8,.18,1);--scn-dock:96px;--scn-y:-50%;
  position:relative;isolation:isolate;overflow:hidden;height:100vh;height:100svh;min-height:680px;max-height:1100px;background:#06172b;color:var(--scn-white);font-family:Manrope,system-ui,sans-serif}
.scn *{box-sizing:border-box}
.scn button,.scn a{color:inherit;font:inherit;text-decoration:none}
.scn button{border:0;background:none;margin:0}
.scnStage{position:absolute;inset:0 0 var(--scn-dock);overflow:hidden}
.scnStack,.scnLayer,.scnLayer img,.scnGlow,.scnShade{position:absolute;inset:0;width:100%;height:100%}
.scnStack{z-index:0;background:#061a31}
.scnLayer{margin:0;opacity:0;visibility:hidden;clip-path:circle(0 at 72% 56%);will-change:clip-path,opacity,transform;transform:scale(1.025)}
.scnLayer img{max-width:none;object-fit:cover;object-position:center;filter:saturate(1.05) contrast(1.03);transform:scaleX(-1) scale(1.01);-webkit-user-drag:none;pointer-events:none}
.scnLayer.is-current{opacity:1;visibility:visible;clip-path:circle(170% at 72% 56%);z-index:1}
.scnLayer.is-entering{opacity:1;visibility:visible;z-index:3;animation:scn-reveal 1.05s var(--scn-ease) forwards}
.scnLayer.is-entering.is-back{animation-name:scn-reveal-back}
.scnLayer.is-leaving{opacity:1;visibility:visible;z-index:2;animation:scn-leave 1.05s var(--scn-ease) forwards}
.scnLayer.is-current img{animation:scn-breathe 8s ease-in-out infinite alternate}
.scnGlow{z-index:4;pointer-events:none;background:radial-gradient(circle at 63% 52%,#18c9ff30,transparent 31%),radial-gradient(circle at 14% 42%,#0a78dc21,transparent 32%);mix-blend-mode:screen}
.scnShade{z-index:5;pointer-events:none;background:linear-gradient(90deg,transparent 0 36%,#03102080 53%,#020a18d9 76%,#010712f5 100%),linear-gradient(0deg,#020b18bb 0%,transparent 30%),radial-gradient(ellipse at center,transparent 52%,#02091588 100%)}

/* pasek zaufania motywu wchodzi ujemnym marginesem na hero — tu zaslonilby dock */
.scn+.trustStrip{margin-top:0!important}

/* okragly przycisk kontaktu motywu (fixed, prawy dolny rog) wisialby na docku — podnosi sie nad niego,
   dopoki dock jest na ekranie (klase ustawia scena.js) */
.floatingContact{transition:transform .2s,bottom .3s cubic-bezier(.22,.8,.18,1)}
.scnDockWidoczny .floatingContact{bottom:114px}
@media (max-width:1100px){.scnDockWidoczny .floatingContact{bottom:106px}}
/* telefon: nad dockiem wchodzilby na „Zadzwon teraz" — chowa sie, hero ma wlasne przyciski kontaktu */
@media (max-width:760px){.floatingContact{transition:transform .2s,opacity .25s,visibility .25s}.scnDockWidoczny .floatingContact{opacity:0;visibility:hidden;pointer-events:none}}

/* --- tekst sceny --- */
.scnCopy{position:absolute;z-index:12;right:clamp(64px,7vw,124px);top:52%;width:min(560px,38vw);transform:translateY(var(--scn-y));will-change:transform,opacity}
.scnCopy.is-out{animation:scn-copy-out .22s ease forwards}
.scnCopy.is-in{animation:scn-copy-in .58s var(--scn-ease) forwards}
.scnEyebrow{margin:0;color:#d9e5ef;font-size:13px;font-weight:800;letter-spacing:.16em;line-height:1.4;text-transform:uppercase}
.scn .scnTitle{margin:20px 0 22px;color:var(--scn-white);font:900 clamp(64px,5.6vw,98px)/.88 'Barlow Condensed',sans-serif;letter-spacing:-.02em;text-transform:uppercase;text-shadow:0 9px 34px #000b}
.scn .scnTitle span{color:var(--scn-cyan)}
.scnLead{max-width:32em;margin:0;color:var(--scn-muted);font-size:17px;line-height:1.6}
.scnActions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.scn .scnPrimary,.scn .scnSecondary{min-height:56px;padding:0 24px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:14px;font-size:15px;font-weight:800;letter-spacing:.01em;white-space:nowrap;transition:transform .25s var(--scn-ease),box-shadow .25s,border-color .25s}
.scnPrimary{background:linear-gradient(135deg,#0788f4,#075dc9);border:1px solid #43caff;box-shadow:0 10px 28px #0078e856}
.scnPrimary b{font-size:20px;line-height:1}
.scnSecondary{border:1px solid #ffffff38;background:#0a1c31d9}
.scnPrimary:hover,.scnSecondary:hover{transform:translateY(-2px)}
.scnPrimary:hover{box-shadow:0 14px 34px #0078e87a}
.scnSecondary:hover{border-color:#3ad9ff9c}

/* --- hotspoty --- */
.scnHotspots{position:absolute;z-index:14;inset:0;pointer-events:none}
.scnHotspot{position:absolute;min-height:58px;padding:0 36px 0 12px;display:flex;align-items:center;gap:12px;border:1px solid #ffffff2d!important;border-radius:12px;background:linear-gradient(145deg,#0c213ae8,#07111feb)!important;box-shadow:0 10px 30px #0008,inset 0 1px #ffffff12;color:#eef6fc;pointer-events:auto;cursor:pointer;transition:transform .25s var(--scn-ease),border-color .25s}
.scnHotspot::before{content:"";position:absolute;top:-2px;right:14px;width:22px;height:2px;background:var(--scn-cyan);box-shadow:0 0 12px var(--scn-cyan)}
.scnHotspot:hover,.scnHotspot:focus-visible{transform:translateY(-4px);border-color:#3ad9ff9c!important}
.scnHotspot b{font:700 17px/1.1 'Barlow Condensed',sans-serif;letter-spacing:.02em;white-space:nowrap}
.scnHotspotIcon{width:38px;height:38px;flex:none;display:grid;place-items:center;border:1px solid #2ed7ff75;border-radius:50%;background:#0c6fa82b}
.scnHotspotIcon svg{width:19px;height:19px;fill:none;stroke:var(--scn-cyan);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.scnHotspot i{position:absolute;right:10px;bottom:9px;width:4px;height:4px;border-radius:50%;background:#7b8fa2;box-shadow:7px 0 #7b8fa2}
.scnHotspotA{left:18%;top:27%}.scnHotspotB{left:37%;top:17%}.scnHotspotC{left:34%;top:53%}

/* --- kropki scen i podpowiedz --- */
.scnDots{position:absolute;z-index:17;right:22px;top:50%;transform:translateY(-50%);padding:12px 9px;display:flex;flex-direction:column;gap:9px;border-radius:16px;background:#06111fb8}
.scnDots button{width:10px;height:10px;padding:0;border-radius:50%;background:#ffffff33;cursor:pointer;transition:height .25s,background .25s}
.scnDots button.is-active{height:26px;border-radius:8px;background:linear-gradient(var(--scn-cyan),#087ee7)}
/* COPY-FLAG: podpowiedz „Przeciagnij lub przewin" nieaktualna od 16.09 (sceny tylko na klik) — ukryta, tekst w HTML nietkniety */
.scnHint{display:none!important;position:absolute;z-index:16;left:4%;bottom:16px;margin:0;color:#a9bccb;font-size:12px;letter-spacing:.02em}

/* --- dock --- (16.09: kafelek z telefonem usuniety na zyczenie Szefa; reguly .scnDockContact zostaja nieszkodliwe) */
.scnDock{position:absolute;z-index:30;left:0;right:0;bottom:0;height:var(--scn-dock);padding:9px 14px;display:grid;grid-template-columns:repeat(6,minmax(110px,1fr));gap:7px;background:#080d17f2;border-top:1px solid #32cfff4f;box-shadow:0 -10px 35px #0008;-webkit-backdrop-filter:blur(17px);backdrop-filter:blur(17px)}
.scnDockItem,.scnDockContact{position:relative;border:1px solid #ffffff20!important;border-radius:12px;background:linear-gradient(180deg,#141b29e8,#0b101ae8)!important;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;cursor:pointer;transition:border-color .25s}
.scnDockItem b,.scnDockContact b{font:800 15px/1.05 'Barlow Condensed',sans-serif;letter-spacing:.03em;text-align:center}
.scnDockItem i{position:absolute;left:27%;right:73%;bottom:6px;height:2px;background:var(--scn-cyan);box-shadow:0 0 8px #28d6ff;transition:right .3s var(--scn-ease)}
.scnDockItem:hover i,.scnDockItem.is-active i{right:27%}
.scnDockItem.is-active{background:linear-gradient(180deg,#12253c,#0b1421)!important;border-color:#28caff4d!important}
.scnDockItem:hover{border-color:#28caff4d!important}
.scnDockContact small{color:#93a9bb;font-size:12px;line-height:1}
.scnDockContact b{font-size:19px}
.scnDock svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--scn-cyan);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px #24cfff66);transition:transform .25s var(--scn-ease),stroke .25s}
.scnDockItem:hover svg,.scnDockItem.is-active svg{transform:translateY(-2px) scale(1.05);stroke:#83edff}
.scnDockContact svg{width:23px;height:23px}
.scn button:focus-visible,.scn a:focus-visible{outline:2px solid var(--scn-cyan);outline-offset:3px}

/* --- przejscie wodne --- */
.scnWater{position:absolute;z-index:7;left:70%;top:56%;width:140vmax;height:140vmax;pointer-events:none;transform:translate(-50%,-50%) scale(0);opacity:0}
.scnWaterCore,.scnWaterRing{position:absolute;inset:0;border-radius:50%}
.scnWaterCore{background:radial-gradient(circle,transparent 0 18%,#20d3ff55 23%,#087ee7a8 31%,#064b9e66 43%,transparent 56%)}
.scnWaterRing{border:clamp(10px,2vw,30px) solid #55e6ff8c;box-shadow:0 0 50px #00aaff88,inset 0 0 70px #0078ff66}
.scnRingA{inset:12%;opacity:.62}.scnRingB{inset:23%;opacity:.38}
.scnBubbles{position:absolute;inset:25%;border-radius:50%;background:radial-gradient(circle at 12% 45%,#b5f4ff 0 4px,transparent 5px),radial-gradient(circle at 30% 17%,#b5f4ff 0 7px,transparent 8px),radial-gradient(circle at 78% 28%,#b5f4ff 0 5px,transparent 6px),radial-gradient(circle at 67% 82%,#b5f4ff 0 9px,transparent 10px)}
.scn.is-transitioning .scnWater{animation:scn-water 1.05s var(--scn-ease) forwards}
.scn.is-backward .scnWater{left:55%;animation-name:scn-water-back}

@keyframes scn-reveal{0%{clip-path:circle(0 at 72% 56%);transform:scale(1.045)}100%{clip-path:circle(170% at 72% 56%);transform:scale(1.025)}}
@keyframes scn-reveal-back{0%{clip-path:circle(0 at 55% 56%);transform:scale(1.045)}100%{clip-path:circle(180% at 55% 56%);transform:scale(1.025)}}
@keyframes scn-leave{to{filter:brightness(.7)}}
@keyframes scn-water{0%{transform:translate(-50%,-50%) scale(0);opacity:0}18%{opacity:.92}58%{opacity:.7}100%{transform:translate(-50%,-50%) scale(1.04);opacity:0}}
@keyframes scn-water-back{0%{transform:translate(-50%,-50%) scale(0);opacity:0}18%{opacity:.92}58%{opacity:.7}100%{transform:translate(-50%,-50%) scale(1.08);opacity:0}}
@keyframes scn-copy-out{to{opacity:0;transform:translateY(var(--scn-y)) translateX(24px)}}
@keyframes scn-copy-in{0%{opacity:0;transform:translateY(var(--scn-y)) translateX(35px)}100%{opacity:1;transform:translateY(var(--scn-y)) translateX(0)}}
@keyframes scn-breathe{to{transform:scaleX(-1) scale(1.032) translate3d(.25%,.1%,0)}}

@media (max-width:1280px){.scn .scnTitle{font-size:clamp(58px,5.4vw,78px)}.scnLead{font-size:16px}.scnHotspot b{font-size:16px}}
@media (max-width:1100px){
  .scn{--scn-dock:88px}
  .scnDock{grid-template-columns:repeat(6,1fr)}
  .scnDockContact{display:none!important}
  .scnCopy{right:6vw;width:44vw}
  .scnHotspotC{display:none}
  .scnHotspotA{left:6%}.scnHotspotB{left:30%;top:16%}
}
/* telefon: tekst schodzi na dol kadru, gradient tylko pod nim */
@media (max-width:760px){
  .scn{--scn-dock:76px;--scn-y:0px;min-height:640px}
  .scnLayer img{object-position:61% 30%}
  .scnShade{background:linear-gradient(0deg,#020b18f2 0%,#020b18d6 34%,#020b1873 52%,transparent 66%),linear-gradient(180deg,#020b1866 0%,transparent 20%)}
  .scnCopy{left:20px;right:20px;top:auto;bottom:24px;width:auto}
  .scn .scnTitle{margin:12px 0 14px;font-size:clamp(46px,12.8vw,62px)}
  .scnEyebrow{font-size:11.5px;letter-spacing:.13em}
  .scnLead{font-size:15px;line-height:1.5}
  .scnActions{margin-top:20px;gap:10px;flex-wrap:nowrap}
  .scn .scnPrimary,.scn .scnSecondary{min-height:50px;padding:0 16px;font-size:14.5px;gap:10px}
  .scnPrimary{flex:1.35}.scnSecondary{flex:1}
  .scnHotspot{min-height:50px;padding:0 30px 0 9px;gap:9px}
  .scnHotspot b{font-size:15px}
  .scnHotspotIcon{width:32px;height:32px}.scnHotspotIcon svg{width:16px;height:16px}
  .scnHotspotA{left:16px;top:104px}.scnHotspotB{left:16px;top:164px}
  .scnDots{right:10px;top:30%;padding:10px 7px;gap:8px}
  .scnDots button{width:8px;height:8px}.scnDots button.is-active{height:22px}
  .scnHint{display:none}
  .scnDock{padding:7px 6px;gap:4px}
  .scnDockItem{border-radius:9px;gap:5px;padding:0 2px}
  .scnDockItem b{font-size:12.5px;letter-spacing:0;white-space:nowrap}
  .scnDock svg{width:21px;height:21px}
  .scnDockItem i{bottom:4px}
  .scnWater{left:64%}
}
@media (max-width:380px){
  .scn .scnTitle{font-size:44px}
  .scnLead{font-size:14px}
  .scn .scnPrimary,.scn .scnSecondary{padding:0 12px;font-size:13.5px}
  .scnDockItem b{font-size:11px}
}
@media (max-height:760px) and (min-width:761px){.scn .scnTitle{font-size:clamp(52px,4.8vw,72px)}.scnActions{margin-top:22px}}
@media (prefers-reduced-motion:reduce){.scn *{animation-duration:.01ms!important;animation-iteration-count:1!important}.scnLayer.is-entering{clip-path:circle(180% at 70% 56%)}.scnWater{display:none}}