/* Syrenka Dental (projc18) — „Lusterko”. Rozha One + Be Vietnam Pro + Fragment Mono.
   Paleta: morski turkus z logo, głęboka toń, piasek wiślany, biel; brąz pomnika Syrenki tylko w drobiazgach. */
@import url(/fonts/fonts.css);

:root {
  --morze: #2f8088;
  --morze-c: #1f5f66;
  --morze-j: #d9ecea;
  --ton: #0f2a2e;
  --ton-2: #163a3f;
  --piasek: #f4efe7;
  --piasek-2: #ebe3d6;
  --bialy: #fff;
  --tusz: #13282b;
  --szary: #5b6b6d;
  --braz: #b5793f;
  --linia: rgba(19, 40, 43, .14);
  --cien: 0 24px 60px -28px rgba(15, 42, 46, .45);
  --r: 22px;
  --w: min(1240px, 100% - 2 * var(--m));
  --m: clamp(18px, 4.4vw, 48px);
  --nag: 76px;
  --f-tyt: 'Rozha One', 'Times New Roman', serif;
  --f-tekst: 'Be Vietnam Pro', system-ui, sans-serif;
  --f-mono: 'Fragment Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.22, .8, .25, 1);
}
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nag) + 20px); }
html, body, main, .stopka { overflow-x: clip; }
body { margin: 0; font: 400 clamp(15.5px, .3vw + 14.4px, 17.5px)/1.65 var(--f-tekst); color: var(--tusz); background: var(--piasek); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--morze-c); text-underline-offset: .18em; }
a:hover { color: var(--morze); }
:focus-visible { outline: 3px solid var(--braz); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; line-height: 1.08; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.w { width: var(--w); margin-inline: auto; }
.w--waska { width: min(760px, 100% - 2 * var(--m)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.szary { color: var(--szary); }
.srodek { text-align: center; margin-top: 2.4rem; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ton); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }
main:focus { outline: none; }

/* typografia */
.etyk { font: 400 12.5px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--morze-c); margin-bottom: 1.1rem; display: flex; align-items: center; gap: .6em; }
.etyk::before { content: ''; width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; box-shadow: inset 0 0 0 4px var(--piasek), inset 0 0 0 11px currentColor; flex: none; transform: scale(.72); }
.tyt { font: 400 clamp(34px, 4.6vw + 10px, 76px)/1.02 var(--f-tyt); letter-spacing: -.012em; margin-bottom: .45em; text-wrap: balance; }
.tyt em { font-style: normal; color: var(--morze); display: block; }
.tyt span { display: block; }

/* przyciski */
.btn { display: inline-flex; align-items: center; gap: .7em; min-height: 52px; padding: .7em .8em .7em 1.4em; border-radius: 999px; font: 600 15.5px/1.2 var(--f-tekst); text-decoration: none; border: 1.5px solid transparent; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); cursor: pointer; }
.btn__i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); flex: none; transition: transform .35s var(--ease); }
.btn__i svg { width: 17px; height: 17px; }
.btn:hover .btn__i { transform: translateX(3px); }
.btn--morze { background: var(--morze); color: #fff; }
.btn--morze:hover { background: var(--morze-c); color: #fff; }
.btn--kontur { border-color: var(--tusz); color: var(--tusz); }
.btn--kontur .btn__i { background: var(--tusz); color: var(--piasek); }
.btn--kontur:hover { background: var(--tusz); color: var(--piasek); }
.btn--kontur:hover .btn__i { background: var(--piasek); color: var(--tusz); }
.btn--bialy { background: #fff; color: var(--ton); }
.btn--bialy .btn__i { background: var(--morze); color: #fff; }
.btn--bialy:hover { background: var(--morze-j); color: var(--ton); }
.btn--jasny-kontur { border-color: rgba(255, 255, 255, .7); color: #fff; }
.btn--jasny-kontur:hover { background: #fff; color: var(--ton); }
.btn--maly { min-height: 44px; padding: .45em .55em .45em 1.1em; font-size: 14.5px; }
.btn--maly .btn__i { width: 30px; height: 30px; }

/* status otwarcia */
.status { display: inline-flex; align-items: center; gap: .6em; font: 400 13.5px/1.3 var(--f-mono); color: var(--szary); margin: 0; }
.status__kropka { width: 10px; height: 10px; border-radius: 50%; background: var(--szary); flex: none; }
.status.is-otwarte .status__kropka { background: #2fa36b; box-shadow: 0 0 0 0 rgba(47, 163, 107, .5); animation: puls 2.2s infinite; }
.status.is-zamkniete .status__kropka { background: var(--braz); }
@keyframes puls { 70% { box-shadow: 0 0 0 9px rgba(47, 163, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 163, 107, 0); } }

/* ---------- nagłówek ---------- */
.nag { position: fixed; z-index: 60; top: 10px; left: 10px; right: 10px; transition: transform .45s var(--ease); }
.nag__w { display: flex; align-items: center; gap: 18px; height: 62px; padding: 0 10px 0 16px; border-radius: 999px; background: rgba(250, 247, 242, .82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 30px -18px rgba(15, 42, 46, .35); max-width: 1320px; margin: 0 auto; }
.anim .nag { animation: nagWjazd .9s var(--ease) .15s both; }
@keyframes nagWjazd { from { transform: translateY(-120%); } }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--morze); margin-right: auto; }
.logo__znak { width: 25px; height: 37px; flex: none; transition: transform .6s var(--ease); }
.logo:hover .logo__znak { transform: rotate(-6deg) scale(1.06); }
.logo__t { display: flex; flex-direction: column; line-height: 1; }
.logo__t b { font: 400 22px/1 var(--f-tyt); color: var(--morze); letter-spacing: -.01em; }
.logo__t b i { font-style: normal; color: var(--tusz); }
.logo__t small { font: 400 10px/1.2 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--szary); margin-top: 4px; }
.nag__nav { display: none; }
.nag__nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nag__nav a { display: block; padding: 9px 14px; border-radius: 999px; text-decoration: none; color: var(--tusz); font-weight: 500; font-size: 15px; transition: background .25s, color .25s; }
.nag__nav a:hover { background: var(--morze-j); color: var(--morze-c); }
.nag__nav a[aria-current] { background: var(--tusz); color: var(--piasek); }
.nag__prawo { display: flex; align-items: center; gap: 10px; }
.jez { display: flex; list-style: none; margin: 0; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(19, 40, 43, .06); }
.jez a { display: block; min-width: 38px; padding: 7px 8px; text-align: center; border-radius: 999px; font: 400 12.5px/1 var(--f-mono); color: var(--tusz); text-decoration: none; }
.jez a[aria-current] { background: #fff; color: var(--morze-c); box-shadow: 0 2px 8px -3px rgba(15, 42, 46, .35); }
.jez--nag { display: none; }
.nag__tel { display: none; }
.nag__cta { display: none; }
.burger { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px 0 16px; border: 0; border-radius: 999px; background: var(--tusz); color: var(--piasek); font: 500 14.5px/1 var(--f-tekst); cursor: pointer; }
.burger__k { width: 30px; height: 30px; border-radius: 50%; background: var(--morze); display: grid; place-content: center; gap: 4px; }
.burger__k i { display: block; width: 14px; height: 2px; background: #fff; border-radius: 2px; transition: transform .35s var(--ease); }
.burger[aria-expanded="true"] .burger__k i:first-child { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__k i:last-child { transform: translateY(-3px) rotate(-45deg); }
@media (min-width: 1100px) {
  .nag__nav { display: block; }
  .burger { display: none; }
  .nag__cta { display: inline-flex; }
  .jez--nag { display: flex; }
}
@media (min-width: 1320px) { .nag__tel { display: inline-flex; align-items: center; gap: 6px; font: 400 14px/1 var(--f-mono); color: var(--tusz); text-decoration: none; padding: 0 6px; } .nag__tel svg { width: 16px; height: 16px; color: var(--morze); } }

/* menu na telefonie */
.menu-tel { position: fixed; inset: 0; z-index: 55; background: var(--piasek); overflow-y: auto; padding: calc(var(--nag) + 20px) var(--m) 30px; }
.menu-tel.is-otwarte { animation: menuKolo .55s var(--ease) both; }
@keyframes menuKolo { from { clip-path: circle(0 at calc(100% - 50px) 40px); } to { clip-path: circle(150% at calc(100% - 50px) 40px); } }
.menu-tel__w { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; min-height: 100%; }
.menu-tel ol { list-style: none; margin: 0 0 24px; padding: 0; }
.menu-tel li { border-bottom: 1px solid var(--linia); }
.menu-tel.is-otwarte li { animation: wjazdL .5s var(--ease) both; animation-delay: calc(.08s + var(--i) * .045s); }
@keyframes wjazdL { from { opacity: 0; transform: translateY(18px); } }
.menu-tel ol a { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; font: 400 clamp(30px, 8.6vw, 44px)/1.1 var(--f-tyt); color: var(--tusz); text-decoration: none; }
.menu-tel ol a small { font: 400 12px/1 var(--f-mono); color: var(--morze); letter-spacing: .1em; }
.menu-tel ol a[aria-current] { color: var(--morze); }
.menu-tel__jez { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.menu-tel__jez p { margin: 0; font: 400 12.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--szary); }
.menu-tel__btn { display: grid; gap: 10px; margin-bottom: 18px; }
.menu-tel__btn .btn { justify-content: space-between; }
.menu-tel__adr { font-size: 14px; color: var(--szary); margin-top: auto; }
html.menu-otwarte { overflow: hidden; }
@media (min-width: 1100px) { .menu-tel { display: none !important; } }

/* ---------- START: lusterko ---------- */
.start { position: relative; background: var(--piasek); }
.start__scena { position: relative; height: 100svh; min-height: 620px; overflow: hidden; --p: 0;
  --cx: 50%; --cy: 71%; --r0: min(37vw, 20svh); --dx: 0px; --dy: 30svh; }
.anim-lusterko .start { height: 250svh; }
.anim-lusterko .start__scena { position: sticky; top: 0; }
.start__foto { position: absolute; inset: 0; z-index: 1;
  clip-path: circle(calc(var(--r0) + var(--p) * 125vmax) at calc(var(--cx) + (50% - var(--cx)) * var(--p)) calc(var(--cy) + (50% - var(--cy)) * var(--p))); }
.start__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fxt) var(--fy);
  transform: translate(calc((1 - var(--p)) * var(--dx)), calc((1 - var(--p)) * var(--dy))) scale(calc(1.06 - var(--p) * .06)); transform-origin: 50% 50%; }
.start__ciemno { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 30, 33, .2), rgba(10, 30, 33, .74)); opacity: calc(var(--p) * 1.6 - .5); }
.start__lustro { visibility: visible; position: absolute; z-index: 2; left: var(--cx); top: var(--cy); width: 0; height: 0; pointer-events: none;
  opacity: calc(1 - var(--p) * 4); }
.start__rama { position: absolute; left: 50%; top: 50%; width: calc(2 * var(--r0) + 22px); height: calc(2 * var(--r0) + 22px); translate: -50% -50%; border-radius: 50%;
  scale: calc(1 + var(--p) * 2.4);
  background: conic-gradient(from 210deg, #e9eef0, #a9b6b9 18%, #fdfefe 30%, #8e9da1 46%, #eef3f4 62%, #9eabae 78%, #f7fafa 92%, #e9eef0);
  -webkit-mask: radial-gradient(circle, transparent calc(var(--r0) - 1px), #000 var(--r0)); mask: radial-gradient(circle, transparent calc(var(--r0) - 1px), #000 var(--r0));
  box-shadow: 0 30px 60px -20px rgba(15, 42, 46, .55), 0 0 0 1px rgba(15, 42, 46, .12); }
.start__blik { position: absolute; left: 50%; top: 50%; width: calc(2 * var(--r0)); height: calc(2 * var(--r0)); translate: -50% -50%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .45), transparent 42%), linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .38) 46%, transparent 54%) 0 0 / 260% 100% no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 -18px 40px -20px rgba(0, 0, 0, .35); }
.anim .start__blik { animation: blik 6s ease-in-out 1.2s infinite; }
@keyframes blik { 0%, 55% { background-position: 0 0, 120% 0; } 85%, 100% { background-position: 0 0, -40% 0; } }
.start__raczka { position: absolute; left: 0; top: 0; width: calc(var(--r0) * 2.4); height: 22px; transform-origin: 0 50%;
  rotate: 48deg; translate: calc(var(--p) * 24vw) calc(-50% + var(--p) * 24vw); }
.start__raczka::before { content: ''; position: absolute; left: calc(var(--r0) + 8px); right: 0; top: 50%; height: 20px; translate: 0 -50%; border-radius: 3px 999px 999px 3px;
  background: linear-gradient(180deg, #f5f8f9, #a9b6b9 45%, #7e8d91 55%, #dfe6e8); box-shadow: 0 10px 22px -10px rgba(15, 42, 46, .6); }
.start__raczka::after { content: ''; position: absolute; left: calc(var(--r0) + 2px); width: 26px; top: 50%; height: 11px; translate: 0 -50%; border-radius: 3px; background: linear-gradient(180deg, #e9eef0, #8e9da1); }
.start__raczka-napis { position: absolute; left: calc(var(--r0) + 44px); top: 50%; translate: 0 -50%; display: flex; align-items: center; gap: 6px; font: 400 8.5px/1 var(--f-mono); letter-spacing: .28em; color: rgba(31, 95, 102, .75); white-space: nowrap; z-index: 1; }
.start__raczka-znak { width: 7px; height: 10px; rotate: 90deg; }
.start__tekst { position: absolute; z-index: 3; left: var(--m); right: var(--m); top: calc(var(--nag) + 26px);
  opacity: calc(1 - var(--p) * 4); translate: 0 calc(var(--p) * -60px); }
.start__tekst .etyk { margin-bottom: .8rem; }
.start__h { font: 400 clamp(40px, 11.2vw, 104px)/.98 var(--f-tyt); letter-spacing: -.02em; margin: 0 0 .32em; text-wrap: balance; }
.start__h span, .start__h em { display: block; }
.start__h em { font-style: normal; color: var(--morze); }
.start__opis { max-width: 34em; color: #33494c; font-size: clamp(15px, 1.1vw + 10px, 19px); margin-bottom: 1.2rem; }
.start__btn { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1.1rem; }
.start__po { position: absolute; z-index: 3; left: var(--m); right: var(--m); bottom: calc(14svh + env(safe-area-inset-bottom)); color: #fff; visibility: hidden;
  opacity: calc((var(--p) - .58) * 3.2); translate: 0 calc((1 - var(--p)) * 60px); }
.start.is-po .start__po { visibility: visible; }
.start.is-dalej .start__tekst { visibility: hidden; }
.start.is-dalej .start__przewin, .start.is-dalej .start__lustro { visibility: hidden; }
.start__po-h { font: 400 clamp(38px, 7vw + 6px, 104px)/1 var(--f-tyt); letter-spacing: -.02em; max-width: 12ch; margin-bottom: .3em; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.start__po-p { max-width: 30em; font-size: clamp(15px, 1vw + 11px, 19px); opacity: .92; }
.start__przewin { pointer-events: none; position: absolute; z-index: 3; left: 50%; bottom: 16px; translate: -50% 0; display: none; flex-direction: column; align-items: center; gap: 6px; font: 400 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--szary); margin: 0; opacity: calc(1 - var(--p) * 6); }
.anim-lusterko .start__przewin { display: flex; }
.start__mysz { width: 22px; height: 34px; border: 1.5px solid currentColor; border-radius: 12px; display: grid; justify-content: center; padding-top: 6px; }
.start__mysz i { width: 3px; height: 7px; border-radius: 2px; background: currentColor; animation: kolko 1.8s ease-in-out infinite; }
@keyframes kolko { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(9px); opacity: 0; } 100% { opacity: 0; } }
/* wejście startu */
.anim .start__tekst > * { animation: wjazdG .9s var(--ease) both; }
.anim .start__tekst > :nth-child(2) { animation-delay: .1s; }
.anim .start__tekst > :nth-child(3) { animation-delay: .2s; }
.anim .start__tekst > :nth-child(4) { animation-delay: .3s; }
.anim .start__tekst > :nth-child(5) { animation-delay: .4s; }
@keyframes wjazdG { from { opacity: 0; transform: translateY(26px); } }
.anim .start__foto img { animation: fotoWjazd 1.4s var(--ease) both; }
@keyframes fotoWjazd { from { opacity: 0; filter: blur(12px); } }
.anim .start__lustro > * { animation: lustroWjazd 1.3s var(--ease) .1s both; }
@keyframes lustroWjazd { from { opacity: 0; } }
/* telefon: tekst u góry, lusterko niżej; mało miejsca — status i drugi przycisk chowamy */
@media (max-width: 699px) {
  .start__h { font-size: clamp(38px, 11.6vw, 56px); }
  .start__po-h { font-size: clamp(42px, 12vw, 60px); }
  .start__opis { font-size: 14.5px; margin-bottom: .9rem; max-width: 30em; }
  .start__btn .btn--kontur { display: none; }
  .status--start { display: none; }
  .start__scena { --cy: 73%; }
}
@media (max-height: 700px) and (max-width: 699px) { .start__opis { display: none; } .start__scena { --cy: 70%; --r0: min(28vw, 15svh); } }
@media (min-width: 700px) {
  .start__scena { --cx: 72%; --cy: 55%; --r0: min(19vw, 30svh); --dx: 11vw; --dy: 15svh; }
  .start__foto img { object-position: var(--fx) var(--fy); }
  .start__tekst { top: 50%; translate: 0 calc(-50% - var(--p) * 60px); right: auto; width: min(50vw, 640px); }
  .start__h { font-size: clamp(46px, 5.6vw, 100px); }
  .start__po { bottom: 15svh; }
  .start__ciemno { background: linear-gradient(90deg, rgba(10, 30, 33, .78), rgba(10, 30, 33, .15) 65%), linear-gradient(180deg, transparent 50%, rgba(10, 30, 33, .4)); }
}
@media (min-width: 700px) and (max-width: 1099px) { .start__scena { --cx: 74%; --cy: 64%; --r0: min(21vw, 22svh); --dx: 13vw; --dy: 24svh; } .start__tekst { top: calc(var(--nag) + 30px); translate: 0 calc(var(--p) * -60px); width: 62vw; } }

/* ---------- sekcje ogólne ---------- */
section { position: relative; }
.wjazd { }
.anim .wjazd { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * .08s); }
.anim .wjazd.is-in { opacity: 1; transform: none; }

/* fakty */
.fakty { background: var(--ton); color: #e6f0ef; padding: clamp(34px, 5vw, 60px) 0; }
.fakty__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
.fakty__l li { display: flex; flex-direction: column; gap: 6px; padding-left: 16px; border-left: 2px solid var(--morze); }
.fakty__l b { font: 400 clamp(24px, 2.4vw + 8px, 40px)/1 var(--f-tyt); color: #fff; }
.fakty__l span { font-size: 14px; color: #b4cac8; line-height: 1.45; }
@media (min-width: 900px) { .fakty__l { grid-template-columns: repeat(4, 1fr); } }

/* linia do uśmiechu */
.linia { padding: clamp(80px, 11vw, 150px) 0; --p: 0; }
.linia__w { display: grid; gap: 40px; }
.linia__opis { max-width: 30em; color: #33494c; }
.linia__tabl { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 18px 10px 10px; border-radius: 12px; background: var(--ton); color: #fff; }
.linia__m { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: var(--morze); font: 700 24px/1 var(--f-tekst); }
.linia__tabl span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.linia__tabl b { font-weight: 600; font-size: 17px; }
.linia__tabl small { font: 400 11.5px/1.3 var(--f-mono); opacity: .7; letter-spacing: .06em; }
.linia__l { list-style: none; margin: 0; padding: 0 0 0 46px; position: relative; display: grid; gap: clamp(30px, 4vw, 54px); }
.linia__tor { position: absolute; left: 15px; top: 14px; bottom: 14px; width: 6px; border-radius: 6px; background: var(--piasek-2); }
.linia__tor::before { content: ''; position: absolute; inset: 0 0 auto; height: calc(var(--p) * 100%); border-radius: 6px; background: var(--morze); }
.linia__poc { position: absolute; left: 50%; top: calc(var(--p) * 100%); width: 26px; height: 40px; translate: -50% -50%; border-radius: 13px; background: var(--ton); border: 3px solid var(--piasek); box-shadow: 0 6px 16px -6px rgba(15, 42, 46, .6); }
.linia__poc::after { content: ''; position: absolute; left: 50%; top: 7px; width: 10px; height: 6px; translate: -50% 0; border-radius: 3px; background: #9ed6d1; box-shadow: 0 16px 0 #9ed6d1; }
.linia__st { position: relative; padding: 4px 0 0; }
.linia__kolo { position: absolute; left: -46px; top: 2px; width: 36px; height: 36px; border-radius: 50%; background: var(--piasek); border: 5px solid var(--piasek-2); transition: border-color .4s, background .4s, transform .4s var(--ease); }
.linia__st.is-akt .linia__kolo { border-color: var(--morze); background: #fff; transform: scale(1.08); }
.linia__nr { font: 400 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--szary); margin-bottom: 8px; }
.linia__st h3 { font: 400 clamp(24px, 1.6vw + 14px, 34px)/1.1 var(--f-tyt); margin-bottom: 8px; transition: color .4s; }
.linia__st.is-akt h3 { color: var(--morze-c); }
.linia__st > p:last-child { color: #33494c; max-width: 32em; }
html:not(.anim-linia) .linia__poc { display: none; }
html:not(.anim-linia) .linia__tor::before { height: 100%; }
html:not(.anim-linia) .linia__kolo { border-color: var(--morze); }
@media (min-width: 900px) { .linia__w { grid-template-columns: 5fr 6fr; gap: 6vw; } .linia__nag { position: sticky; top: calc(var(--nag) + 50px); align-self: start; } }

/* oferta */
.uslugi { background: #fff; padding: clamp(80px, 10vw, 140px) 0; border-radius: 44px 44px 0 0; }
.uslugi__nag { display: grid; gap: 4px; margin-bottom: 26px; }
.uslugi__nag > p { max-width: 36em; color: #33494c; }
@media (min-width: 900px) { .uslugi__nag { grid-template-columns: 1fr 1fr; align-items: end; column-gap: 6vw; } .uslugi__nag > p { margin-bottom: 1.6em; } }
.tyt--bez { margin-bottom: .2em; }
.filtry { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.filtr { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--linia); background: #fff; color: var(--tusz); font: 500 14.5px/1 var(--f-tekst); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.filtr:hover { border-color: var(--morze); color: var(--morze-c); }
.filtr[aria-pressed="true"] { background: var(--morze); border-color: var(--morze); color: #fff; }
.uslugi__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .uslugi__l { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .uslugi__l { grid-template-columns: repeat(4, 1fr); } }
.usl a { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; color: #fff; text-decoration: none; background: var(--ton); isolation: isolate; }
.usl__foto, .usl__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.usl__foto img { transition: transform 1s var(--ease); }
.usl__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 30, 33, 0) 35%, rgba(10, 30, 33, .88)); transition: opacity .4s; }
.usl__t { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; display: flex; flex-direction: column; gap: 4px; z-index: 1; }
.usl__nr { font: 400 11px/1 var(--f-mono); letter-spacing: .12em; opacity: .75; }
.usl__t b { font: 400 clamp(19px, 1vw + 12px, 26px)/1.08 var(--f-tyt); }
.usl__kr { font-size: 13px; line-height: 1.4; opacity: .88; }
@media (hover: hover) and (min-width: 700px) {
  .usl__kr { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s; }
  .usl a:hover .usl__kr, .usl a:focus-visible .usl__kr { max-height: 6em; opacity: .92; }
  .usl a:hover .usl__foto img { transform: scale(1.06); }
}
@media (max-width: 699px) { .usl__kr { display: none; } .usl a { aspect-ratio: 4 / 5; } .usl__t { padding: 12px; } }
.usl.is-ukryta { display: none; }

/* diagnostyka */
.diag { background: var(--ton); color: #dfeceb; padding: clamp(80px, 10vw, 140px) 0; overflow: hidden; --p: 0; }
.diag .etyk { color: #8fd0ca; }
.diag .etyk::before { box-shadow: inset 0 0 0 4px var(--ton), inset 0 0 0 11px currentColor; }
.diag .tyt { color: #fff; }
.diag .tyt em { color: #8fd0ca; }
.diag__w { display: grid; gap: 40px; }
.diag__tekst > p { max-width: 32em; color: #b4cac8; }
.diag__foto { margin: 26px 0 0; width: min(280px, 70%); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 10px rgba(143, 208, 202, .12), 0 0 0 11px rgba(143, 208, 202, .35); }
.diag__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.diag__karty { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; perspective: 1400px; }
.diag__k { display: grid; grid-template-columns: 38% 1fr; border-radius: var(--r); overflow: hidden; background: var(--ton-2); border: 1px solid rgba(143, 208, 202, .2); }
.diag__kfoto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) contrast(1.05); }
.diag__kt { padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.diag__nr { font: 400 11px/1 var(--f-mono); letter-spacing: .14em; color: #8fd0ca; }
.diag__kt b { font: 400 26px/1.05 var(--f-tyt); color: #fff; }
.diag__kt > span:not(.diag__nr):not(.diag__cena) { font-size: 14.5px; color: #b4cac8; }
.diag__cena { margin-top: auto; align-self: flex-start; font: 400 13px/1 var(--f-mono); padding: 7px 10px; border-radius: 999px; background: rgba(143, 208, 202, .15); color: #c9ecea; }
@media (min-width: 900px) {
  .diag__w { grid-template-columns: 5fr 6fr; align-items: center; gap: 6vw; }
  .anim .diag__k { transform-origin: 50% 100%; transform: translateY(calc((1 - var(--p)) * (var(--i) * 70px + 40px))) rotateX(calc((1 - var(--p)) * 24deg)); opacity: calc(.35 + var(--p) * .65); }
}

/* zespół — identyfikatory */
.zespol { padding: clamp(80px, 10vw, 140px) 0; background: var(--piasek); }
.zespol__nag { text-align: center; max-width: 780px; margin: 0 auto 40px; }
.zespol__nag .etyk { justify-content: center; }
.zespol__nag > p { color: #33494c; }
.zespol__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
@media (min-width: 760px) { .zespol__l { grid-template-columns: repeat(3, 1fr); gap: 34px 20px; } }
@media (min-width: 1150px) { .zespol__l { grid-template-columns: repeat(5, 1fr); } }
.ident { position: relative; display: flex; flex-direction: column; align-items: center; }
.ident__smycz { width: 14px; height: 34px; background: repeating-linear-gradient(180deg, var(--morze) 0 6px, var(--morze-c) 6px 12px); border-radius: 2px; position: relative; }
.ident__smycz::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 26px; height: 14px; translate: -50% 0; border-radius: 4px; background: linear-gradient(180deg, #e9eef0, #8e9da1); }
.ident__k { width: 100%; margin-top: 8px; background: #fff; border-radius: 18px; padding: 14px 14px 18px; text-align: center; box-shadow: var(--cien); transition: transform .5s var(--ease), box-shadow .5s; transform-origin: 50% -40px; }
.ident:hover .ident__k { transform: rotate(-1.4deg) translateY(-4px); }
.ident__gora { display: flex; align-items: center; justify-content: center; gap: 6px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px dashed var(--linia); font: 400 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--morze-c); }
.ident__znak { width: 10px; height: 15px; color: var(--morze); }
.ident__foto { display: block; width: min(150px, 78%); aspect-ratio: 5 / 6; margin: 0 auto 12px; border-radius: 12px; overflow: hidden; background: var(--piasek-2); }
.ident__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ident__tyt { font: 400 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--szary); margin-bottom: 6px; }
.ident h3 { font: 400 clamp(18px, .8vw + 13px, 22px)/1.1 var(--f-tyt); margin-bottom: 8px; }
.ident__spec { font-size: 13px; line-height: 1.4; color: #33494c; margin-bottom: 10px; }
.ident__jez { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; margin: 0; }
.ident__jez span { font: 400 10.5px/1 var(--f-mono); padding: 5px 7px; border-radius: 6px; background: var(--morze-j); color: var(--morze-c); }
.zespol--pelny .zespol__l { grid-template-columns: 1fr; gap: 30px; max-width: 980px; margin: 0 auto; }
.zespol--pelny .ident { flex-direction: row; align-items: stretch; }
.zespol--pelny .ident__smycz { display: none; }
.zespol--pelny .ident__k { display: grid; grid-template-columns: 1fr; text-align: left; padding: 22px; }
.zespol--pelny .ident__gora, .zespol--pelny .ident__jez { justify-content: flex-start; }
.zespol--pelny .ident__foto { margin: 0 0 14px; width: 150px; }
.ident__opis { font-size: 15px; color: #33494c; margin-top: 12px; }
@media (min-width: 760px) {
  .zespol--pelny .ident__k { grid-template-columns: 170px 1fr; column-gap: 28px; padding: 26px; }
  .zespol--pelny .ident__gora { grid-column: 1 / -1; }
  .zespol--pelny .ident__foto { grid-row: 2 / span 5; width: 170px; }
}
.wartosci { padding: 0 0 clamp(70px, 9vw, 120px); }
.wartosci ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.wartosci li { background: #fff; border-radius: var(--r); padding: 26px; }
.wartosci li span { font: 400 12px/1 var(--f-mono); color: var(--morze); letter-spacing: .14em; }
.wartosci h2 { font: 400 26px/1.1 var(--f-tyt); margin: 10px 0 8px; }
@media (min-width: 800px) { .wartosci ul { grid-template-columns: repeat(3, 1fr); } }
.praca { padding: 0 0 clamp(70px, 9vw, 120px); }
.praca .w { background: var(--morze-j); border-radius: var(--r); padding: clamp(24px, 4vw, 48px); }

/* ceny */
.ceny { background: #fff; padding: clamp(80px, 10vw, 140px) 0; }
.ceny__w { display: grid; gap: 30px; }
.ceny__nag > p { color: #33494c; max-width: 26em; }
@media (min-width: 900px) { .ceny__w { grid-template-columns: 4fr 6fr; gap: 6vw; align-items: start; } .ceny__nag { position: sticky; top: calc(var(--nag) + 50px); } }
.ceny__l, .cennik__l { list-style: none; margin: 0; padding: 0; }
.cena { display: flex; align-items: baseline; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--linia); }
.cena__n { flex: 0 1 auto; min-width: 0; }
.cena__n small { display: block; font: 400 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--szary); margin-top: 3px; }
.cena__k { flex: 1 1 24px; min-width: 18px; border-bottom: 2px dotted rgba(19, 40, 43, .25); translate: 0 -4px; }
.cena__c { flex: none; font: 400 15px/1.3 var(--f-mono); color: var(--morze-c); white-space: nowrap; text-align: right; max-width: 52%; white-space: normal; }
.ceny__l .cena__c { font-size: 16px; }

/* udogodnienia */
.komfort { padding: clamp(80px, 10vw, 140px) 0; background: var(--piasek); }
.komfort__l { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.komfort__l li { background: #fff; border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.komfort__ik { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--morze-j); color: var(--morze-c); margin-bottom: 6px; }
.komfort__ik svg { width: 24px; height: 24px; }
.komfort__l b { font: 400 21px/1.1 var(--f-tyt); }
.komfort__l span:last-child { font-size: 14px; color: var(--szary); }
@media (max-width: 599px) { .komfort__l { grid-template-columns: 1fr; } .komfort__l li { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; padding: 16px; } .komfort__ik { grid-row: span 2; margin: 0; } }
@media (min-width: 900px) { .komfort__l { grid-template-columns: repeat(3, 1fr); gap: 16px; } .komfort__l li { padding: 28px; } }

/* opinie */
.opinie { padding: clamp(70px, 9vw, 120px) 0; background: #fff; }
.opinie__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.opinie__l li { background: var(--piasek); border-radius: var(--r); padding: 26px; }
@media (min-width: 900px) { .opinie__l { grid-template-columns: repeat(3, 1fr); } }

/* pytania */
.pytania { padding: clamp(80px, 10vw, 140px) 0; background: #fff; }
.pytania__w { display: grid; gap: 30px; }
@media (min-width: 900px) { .pytania__w { grid-template-columns: 4fr 6fr; gap: 6vw; align-items: start; } }
.pytania--pelne { background: var(--piasek); padding-top: 20px; }
.pytania--pelne .faq { max-width: 860px; margin: 0 auto; }
.faq__p { border-bottom: 1px solid var(--linia); }
.faq__p summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer; font: 500 clamp(16px, .4vw + 14px, 19px)/1.35 var(--f-tekst); }
.faq__p summary::-webkit-details-marker { display: none; }
.faq__i { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--morze-j); color: var(--morze-c); transition: transform .4s var(--ease), background .3s; }
.faq__i svg { width: 18px; height: 18px; }
.faq__p[open] .faq__i { transform: rotate(45deg); background: var(--morze); color: #fff; }
.faq__o { padding: 0 54px 22px 0; color: #33494c; }
.faq__p[open] .faq__o { animation: wjazdG .5s var(--ease); }

/* kontakt */
.kontakt { padding: clamp(80px, 10vw, 140px) 0; background: var(--piasek); }
.kontakt__w { display: grid; gap: 34px; }
.kontakt__tel { display: block; font: 400 clamp(46px, 7.6vw + 10px, 112px)/1 var(--f-tyt); letter-spacing: -.02em; color: var(--tusz); text-decoration: none; margin: .1em 0 .1em; white-space: nowrap; }
.kontakt__tel:hover { color: var(--morze); }
.kontakt__tel2 { display: inline-block; font: 400 clamp(22px, 2vw + 12px, 36px)/1 var(--f-tyt); color: var(--morze-c); text-decoration: none; margin-bottom: 1rem; }
.kontakt__tekst { color: #33494c; max-width: 30em; }
.kontakt__btn { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.4rem; }
.status--kontakt { margin-top: .4rem; }
.komunikat { background: #fff3e2; border-left: 4px solid var(--braz); padding: 12px 16px; border-radius: 10px; }
.kontakt__prawa { display: grid; gap: 14px; }
.kontakt__karta { background: #fff; border-radius: var(--r); padding: clamp(22px, 3vw, 34px); }
.kontakt__karta h3 { font: 400 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--morze-c); margin: 0 0 10px; }
.kontakt__karta p + h3, .kontakt__karta ul + h3 { margin-top: 22px; }
.dojazd { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.dojazd li { display: flex; align-items: center; gap: 10px; }
.dojazd span { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font: 700 13px/1 var(--f-tekst); color: #fff; flex: none; }
.dojazd__m { background: var(--morze); }
.dojazd__b { background: var(--braz); }
.dojazd__p { background: #3d6bb3; }
.godz { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.godz li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; margin: 0 -10px; border-radius: 8px; }
.godz li span:last-child { font-family: var(--f-mono); font-size: 14px; }
.godz li.is-dzis { background: var(--morze-j); font-weight: 600; color: var(--morze-c); }
.mapa { position: relative; border-radius: var(--r); overflow: hidden; height: 300px; background: var(--piasek-2); }
.mapa iframe { width: 100%; height: 100%; border: 0; pointer-events: none; filter: saturate(.7); }
.mapa.is-aktywna iframe { pointer-events: auto; }
.mapa__zaslona { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: end center; padding-bottom: 16px; }
.mapa__zaslona span { background: rgba(15, 42, 46, .85); color: #fff; padding: 9px 14px; border-radius: 999px; font-size: 13.5px; }
@media (hover: hover) { .mapa__zaslona span { opacity: 0; transition: opacity .3s; } .mapa__zaslona:hover span, .mapa__zaslona:focus-visible span { opacity: 1; } }
.mapa.is-aktywna .mapa__zaslona { display: none; }
@media (min-width: 1000px) { .kontakt__w { grid-template-columns: 6fr 5fr; gap: 5vw; align-items: start; } }

/* ---------- podstrony ---------- */
.pn { padding: calc(var(--nag) + clamp(46px, 7vw, 90px)) 0 clamp(40px, 6vw, 80px); background: var(--piasek); }
.pn__w { display: grid; gap: 30px; align-items: center; }
.pn h1 { font: 400 clamp(38px, 5.4vw + 8px, 92px)/1 var(--f-tyt); letter-spacing: -.015em; margin-bottom: .35em; text-wrap: balance; }
.pn__wstep { max-width: 36em; font-size: clamp(16px, .6vw + 13px, 19px); color: #33494c; }
.pn__lustro { position: relative; width: min(300px, 62vw); aspect-ratio: 1; justify-self: center; }
.pn__foto { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 11px #dfe6e8, 0 0 0 12px rgba(15, 42, 46, .15), 0 30px 60px -24px rgba(15, 42, 46, .5); }
.pn__foto img { width: 100%; height: 100%; object-fit: cover; }
.pn__raczka { position: absolute; left: 82%; top: 82%; width: 64%; height: 14px; border-radius: 3px 999px 999px 3px; transform-origin: 0 50%; rotate: 45deg; background: linear-gradient(180deg, #f5f8f9, #a9b6b9 45%, #7e8d91 55%, #dfe6e8); z-index: -1; }
.anim .pn__lustro { animation: lustroWjazd 1s var(--ease) both, pnKolo 1.2s var(--ease) both; }
@keyframes pnKolo { from { transform: scale(.85) rotate(-8deg); } }
.anim .pn__t > * { animation: wjazdG .8s var(--ease) both; }
.anim .pn__t > :nth-child(2) { animation-delay: .08s; }
.anim .pn__t > :nth-child(3) { animation-delay: .16s; }
@media (min-width: 900px) { .pn__w { grid-template-columns: 1fr auto; gap: 6vw; } .pn__lustro { width: clamp(220px, 22vw, 330px); margin-right: 60px; } }
@media (max-width: 899px) { .pn__lustro { display: none; } }

.spis { position: sticky; top: calc(var(--nag) + 12px); z-index: 20; padding: 8px 0; }
.spis ul { list-style: none; margin: 0; padding: 6px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 26px -18px rgba(15, 42, 46, .5); }
.spis ul::-webkit-scrollbar { display: none; }
.spis a { display: block; white-space: nowrap; padding: 9px 14px; border-radius: 999px; font-size: 14px; color: var(--tusz); text-decoration: none; }
.spis a:hover, .spis a.is-akt { background: var(--tusz); color: var(--piasek); }
.of { padding: clamp(50px, 7vw, 100px) 0; }
.of:nth-child(even) { background: #fff; }
.of__w { display: grid; gap: 30px; align-items: center; }
.of__foto { margin: 0; border-radius: 30px; overflow: hidden; aspect-ratio: 4 / 3; }
.of__foto img { width: 100%; height: 100%; object-fit: cover; }
.of__nr { font: 400 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--morze); margin-bottom: 12px; }
.of h2 { font: 400 clamp(32px, 3vw + 14px, 58px)/1.02 var(--f-tyt); margin-bottom: 14px; }
.of__kr { font-size: clamp(17px, .6vw + 14px, 21px); color: var(--morze-c); }
.of__t > p { color: #33494c; }
.of h3 { font: 400 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--szary); margin: 24px 0 12px; }
.of__z { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.of__z li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--morze-j); color: var(--morze-c); font-size: 14px; }
.of__z svg { width: 15px; height: 15px; }
.of__btn { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
@media (min-width: 900px) { .of__w { grid-template-columns: 5fr 6fr; gap: 6vw; } .of:nth-child(even) .of__foto { order: 2; } .of__foto { aspect-ratio: 4 / 5; } }

/* cennik */
.cennik { padding-bottom: clamp(60px, 8vw, 110px); }
.cennik__pasek { position: sticky; top: calc(var(--nag) + 10px); z-index: 20; padding: 6px 0 10px; }
.cennik__pasek .w { display: grid; gap: 8px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 22px; padding: 8px; box-shadow: 0 10px 30px -20px rgba(15, 42, 46, .5); }
.cennik__szukaj { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 16px; background: var(--piasek); }
.cennik__szukaj svg { width: 18px; height: 18px; color: var(--szary); flex: none; }
.cennik__szukaj input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--tusz); }
.cennik__szukaj input:focus { outline: none; }
.cennik__szukaj:focus-within { box-shadow: 0 0 0 2px var(--morze); }
.cennik__zakl { min-width: 0; }
.cennik__zakl ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.cennik__zakl ul::-webkit-scrollbar { display: none; }
.cennik__zakl a { display: block; white-space: nowrap; padding: 9px 13px; border-radius: 999px; font-size: 13.5px; color: var(--tusz); text-decoration: none; }
.cennik__zakl a:hover { background: var(--morze-j); }
.cennik__zakl a.is-akt { background: var(--morze); color: #fff; }
@media (min-width: 1000px) { .cennik__pasek .w { grid-template-columns: 330px 1fr; align-items: center; } }
.cennik__w { max-width: 980px; }
.cennik__data { font: 400 12.5px/1 var(--f-mono); color: var(--szary); margin: 24px 0 0; }
.cennik__kat { padding-top: 40px; scroll-margin-top: calc(var(--nag) + 140px); }
.cennik__kat h2 { font: 400 clamp(28px, 2vw + 16px, 44px)/1.05 var(--f-tyt); margin-bottom: 10px; }
.cennik__uwaga { background: var(--morze-j); color: var(--morze-c); border-radius: 14px; padding: 14px 18px; font-size: 14.5px; }
.cennik__l .cena { padding: 13px 0; }
.cennik__brak { padding: 40px 0; font-size: 18px; text-align: center; }
.cennik mark { background: #ffe7b8; color: inherit; border-radius: 3px; }

/* formularz */
.form-s { padding: clamp(70px, 9vw, 120px) 0; background: #fff; scroll-margin-top: var(--nag); }
.form-s__w { display: grid; gap: 30px; }
.form-s__t > p { color: #33494c; max-width: 30em; }
.form-s__tel { display: flex; align-items: center; gap: 10px; font: 400 26px/1 var(--f-tyt); }
.form-s__tel svg { width: 22px; height: 22px; color: var(--morze); }
.form-s__tel a { color: var(--tusz); text-decoration: none; }
@media (min-width: 950px) { .form-s__w { grid-template-columns: 4fr 7fr; gap: 6vw; } }
.form { display: grid; gap: 16px; }
@media (min-width: 700px) { .form { grid-template-columns: 1fr 1fr; } .pole--cale, .pole--pora { grid-column: 1 / -1; } }
.pole { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; margin: 0; padding: 0; }
.pole label, .pole legend { font-weight: 500; font-size: 14.5px; padding: 0; }
.pole input:not([type=checkbox]):not([type=radio]), .pole select, .pole textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--linia); border-radius: 14px; background: var(--piasek); font: inherit; font-size: 16px; color: var(--tusz); transition: border-color .25s, background .25s; }
.pole textarea { resize: vertical; min-height: 110px; }
.pole input:focus, .pole select:focus, .pole textarea:focus { outline: none; border-color: var(--morze); background: #fff; }
.pole.is-blad input, .pole.is-blad textarea { border-color: #b4402c; background: #fff6f3; }
.pole__blad { margin: 0; color: #a2321f; font-size: 13.5px; }
.pora { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pora label { position: relative; }
.pora input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pora span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--linia); cursor: pointer; font-size: 14.5px; font-weight: 400; transition: background .25s, border-color .25s, color .25s; }
.pora input:checked + span { background: var(--morze); border-color: var(--morze); color: #fff; }
.pora input:focus-visible + span { outline: 3px solid var(--braz); outline-offset: 2px; }
.zgoda { display: flex; gap: 12px; align-items: flex-start; font-weight: 400 !important; font-size: 14px !important; color: #33494c; cursor: pointer; }
.zgoda input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--morze); }
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__dol { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; }
.form__stan { margin: 0; font-size: 15px; }
.form__stan.is-ok { background: var(--morze-j); color: var(--morze-c); padding: 14px 18px; border-radius: 14px; font-weight: 500; }
.form__stan.is-blad { color: #a2321f; }
.wejscie-foto { padding: 0 0 clamp(60px, 8vw, 110px); background: #fff; }
.wejscie-foto figure { margin: 0; border-radius: 30px; overflow: hidden; position: relative; }
.wejscie-foto img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.wejscie-foto figcaption { position: absolute; left: 16px; bottom: 16px; background: rgba(15, 42, 46, .85); color: #fff; padding: 8px 14px; border-radius: 999px; font: 400 12.5px/1.3 var(--f-mono); }
.tekst { padding: 0 0 clamp(60px, 8vw, 110px); }
.tekst h2 { font: 400 28px/1.1 var(--f-tyt); margin: 1.6em 0 .5em; }

/* 404 */
.e404 { padding: calc(var(--nag) + 80px) 0 120px; text-align: center; }
.e404 .etyk { justify-content: center; }
.e404__lustro { width: 150px; height: 150px; margin: 0 auto 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 10px #dfe6e8, var(--cien); }
.e404__znak { width: 46px; height: 68px; color: var(--morze); transform: scaleX(-1); }
.e404__btn { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* powiększanie zdjęć */
.lb-btn { all: unset; display: block; position: relative; width: 100%; height: 100%; cursor: zoom-in; }
.lb-btn:focus-visible { outline: 3px solid var(--braz); outline-offset: 3px; }
.lb-btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.lb-btn:hover img { transform: scale(1.04); }
.lb-btn__i { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--ton); }
.lb-btn__i svg { width: 20px; height: 20px; }
.lb { position: fixed; inset: 0; z-index: 120; background: rgba(8, 22, 24, .94); display: grid; place-items: center; padding: 70px 16px 40px; }
.lb.is-otwarte .lb__f { animation: lbWjazd .45s var(--ease); }
@keyframes lbWjazd { from { opacity: 0; transform: scale(.94); } }
.lb__f { margin: 0; max-width: min(1200px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lb__f img { max-height: calc(100svh - 150px); width: auto; max-width: 100%; border-radius: 14px; }
.lb__f figcaption { color: #dfeceb; font: 400 13px/1.3 var(--f-mono); letter-spacing: .06em; text-align: center; }
.lb__x, .lb__n { position: absolute; width: 50px; height: 50px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.lb__x:hover, .lb__n:hover { background: var(--morze); }
.lb__x { top: 14px; right: 14px; }
.lb__x svg { width: 24px; height: 24px; rotate: 45deg; }
.lb__n { top: 50%; right: 14px; translate: 0 -50%; }
.lb__n--p { right: auto; left: 14px; }
.lb__n--p svg { rotate: 180deg; }
.lb__n svg { width: 22px; height: 22px; }
@media (max-width: 699px) { .lb__n { top: auto; bottom: 14px; translate: none; } }
html.lb-otwarte { overflow: hidden; }

/* ---------- stopka ---------- */
.stopka { background: var(--ton); color: #c7d8d6; padding-top: clamp(70px, 9vw, 120px); --p: 0; }
.stopka a { color: #fff; }
.stopka__gora { display: grid; gap: 22px; padding-bottom: 46px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.stopka__haslo { font: 400 clamp(34px, 4.4vw + 10px, 74px)/1.02 var(--f-tyt); color: #fff; margin: 0; }
.stopka__haslo em { font-style: normal; color: #8fd0ca; display: block; }
.stopka__btn { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 900px) { .stopka__gora { grid-template-columns: 1fr auto; align-items: end; } }
.stopka__kol { display: grid; grid-template-columns: 1fr; gap: 30px; padding: 46px 0; font-size: 15px; }
.stopka__kol h2 { font: 400 11.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: #8fd0ca; margin: 0 0 12px; }
.stopka__kol p + h2 { margin-top: 20px; }
.stopka__kol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stopka__kol a { text-decoration: none; }
.stopka__kol a:hover { text-decoration: underline; }
.godz--stopka li { padding: 3px 0; margin: 0; }
.godz--stopka li.is-dzis { background: none; color: #8fd0ca; }
.stopka__soc { display: flex; gap: 8px; }
.stopka__soc a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); }
.stopka__soc a:hover { background: var(--morze); }
.stopka__soc svg { width: 20px; height: 20px; }
@media (min-width: 700px) { .stopka__kol { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1050px) { .stopka__kol { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
@media (max-width: 699px) { .stopka__godz { display: none; } }
.stopka__rtg { font-size: 13px; margin: 0 0 20px; }
.stopka__rtg a { display: inline-flex; gap: 8px; align-items: center; color: #9fb7b5; text-decoration: none; }
.stopka__rtg a:hover { color: #fff; }
.stopka__rtg svg { width: 18px; height: 18px; flex: none; }
.stopka__nazwa { display: flex; align-items: flex-end; justify-content: center; gap: 1.4vw; padding: 0 var(--m); color: rgba(143, 208, 202, .95); overflow: hidden; }
.stopka__znak { width: 7vw; height: 10.3vw; flex: none; margin-bottom: 2.4vw; opacity: calc(var(--p) * 1.3); translate: 0 calc((1 - var(--p)) * 30px); }
.stopka__litery { display: flex; font: 400 clamp(40px, 11.2vw, 196px)/1.08 var(--f-tyt); letter-spacing: -.03em; white-space: nowrap; padding-bottom: .12em; overflow: hidden; }
.stopka__litery span { display: inline-block; translate: 0 calc(max(0, 1 - var(--p) * 1.6 + var(--i) * .04) * 105%); }
html:not(.anim) .stopka__litery span, html:not(.anim) .stopka__znak { translate: none; opacity: 1; }
.stopka__dol { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 0 calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: #9fb7b5; }
.stopka__dol p { margin: 0; }
.stopka__tworca { display: flex; align-items: center; gap: 14px; }
@media (max-width: 699px) { .stopka__dol { flex-direction: column-reverse; align-items: stretch; padding-bottom: calc(92px + env(safe-area-inset-bottom)); } .stopka__tworca { justify-content: space-between; } }

/* podpis Bogate Ananasy (1:1 jak na stronie WDK) */
.m-only { display: none; }
@media (max-width: 767px) { .m-only { display: inline; } .d-only { display: none; } }
.made-by { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; transition: color .3s; color: #fff; }
.made-by:hover { color: #f0c36b; }
.made-by img { height: 1.75rem; width: auto; display: block; }
.logo-wrap { position: relative; top: -3px; z-index: 1; display: block; transform-origin: 50% 50%; animation: logo-spin 5s ease-in-out infinite; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .made-by:hover .logo-wrap { animation: logo-spin-loop 1.6s linear infinite; }
  .made-by:hover img { animation: logo-shine-loop 1.6s ease-in-out infinite; }
  .made-by:hover .glint { animation: logo-glint-loop 1.6s linear infinite; }
}
.made-by img { animation: logo-shine 5s ease-in-out infinite; }
.glint { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url(/img/site/bogate-ananasy-logo.webp) center / contain no-repeat; mask: url(/img/site/bogate-ananasy-logo.webp) center / contain no-repeat; background: linear-gradient(115deg, transparent 35%, rgba(255, 246, 200, .95) 50%, transparent 65%) 0 0 / 300% 100% no-repeat; mix-blend-mode: screen; animation: logo-glint 5s ease-in-out infinite; }
@keyframes logo-spin { 0%, 80% { transform: perspective(200px) rotateY(0); } 100% { transform: perspective(200px) rotateY(360deg); } }
@keyframes logo-spin-loop { from { transform: perspective(200px) rotateY(0); } to { transform: perspective(200px) rotateY(360deg); } }
@keyframes logo-shine-loop { 0%, 100% { filter: brightness(1.25) saturate(1.2) drop-shadow(0 0 2px rgba(255, 210, 90, .45)); } 50% { filter: brightness(1.7) saturate(1.35) drop-shadow(0 0 5px rgba(255, 210, 90, .8)); } }
@keyframes logo-glint-loop { 0% { background-position: 100% 0; opacity: 1; } 100% { background-position: 0 0; opacity: 1; } }
@keyframes logo-shine { 0%, 80%, 100% { filter: none; } 90% { filter: brightness(1.6) saturate(1.3) drop-shadow(0 0 4px rgba(255, 210, 90, .7)); } }
@keyframes logo-glint { 0%, 80% { background-position: 100% 0; opacity: 0; } 82% { opacity: 1; } 98% { background-position: 0 0; opacity: 1; } 100% { background-position: 0 0; opacity: 0; } }
.to-top { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -.5rem 0; border-radius: 999px; color: #fff; transition: color .3s; }
.to-top:hover { color: #f0c36b; }
.to-top path { animation: fly-up 1.6s cubic-bezier(.4, 0, .2, 1) infinite; }
.to-top path:nth-child(2) { animation-delay: .2s; }
.to-top path:nth-child(3) { animation-delay: .4s; }
.to-top:hover path { animation-duration: .9s; }
@media (max-width: 767px) { .to-top path { animation-duration: 2.6s; } .to-top path:nth-child(2) { animation-delay: .35s; } .to-top path:nth-child(3) { animation-delay: .7s; } }
@keyframes fly-up { 0% { transform: translateY(6px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }

/* dolny pasek akcji (telefon) */
.pasek-akcji { position: fixed; z-index: 50; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 6px; padding: 6px; border-radius: 22px; background: rgba(15, 42, 46, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .6); transform: translateY(calc(100% + 30px)); transition: transform .55s cubic-bezier(.2, .9, .3, 1.2); visibility: hidden; }
.pasek-akcji.is-widoczny { transform: none; visibility: visible; }
.pasek-akcji a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border-radius: 16px; color: #dfeceb; text-decoration: none; font-size: 12px; font-weight: 500; text-align: center; line-height: 1.15; }
.pasek-akcji a svg { width: 19px; height: 19px; }
.pasek-akcji__glowny { background: var(--morze); color: #fff !important; }
@media (min-width: 900px) { .pasek-akcji { display: none; } }
html.menu-otwarte .pasek-akcji { visibility: hidden; }

/* ruch ograniczony */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .logo-wrap, .made-by img, .glint, .to-top path { animation: none !important; }
  .glint { opacity: 0; }
}