/* Centrum Medyczne Mariodent — styl strony. Domyślny CSS = stan końcowy (bez JS i przy ograniczonym ruchu). */
@font-face { font-family: 'Petrona'; src: url(/fonts/petrona-latin-ext-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Petrona'; src: url(/fonts/petrona-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Petrona'; src: url(/fonts/petrona-latin-ext-wght-italic.woff2) format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Petrona'; src: url(/fonts/petrona-latin-wght-italic.woff2) format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Familjen Grotesk'; src: url(/fonts/familjen-grotesk-latin-ext-wght-normal.woff2) format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Familjen Grotesk'; src: url(/fonts/familjen-grotesk-latin-wght-normal.woff2) format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Azeret Mono'; src: url(/fonts/azeret-mono-latin-ext-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Azeret Mono'; src: url(/fonts/azeret-mono-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

[hidden] { display: none !important; }
:root {
  --malina: #9a0a3c; --malina2: #b8124c; --malina-j: #f7e6ea;
  --grafit: #8c8f94; --atrament: #1b1d22; --tekst: #2b2d33; --szary: #5c5f66;
  --porcelana: #fbfaf7; --szkliwo: #eef1f0; --klisza: #121419; --linia: #dfe2e1;
  --f-h: 'Petrona', Georgia, serif; --f-t: 'Familjen Grotesk', system-ui, sans-serif; --f-m: 'Azeret Mono', ui-monospace, monospace;
  --pasek: 76px; --r: 22px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--pasek) + 16px); }
html, body, main { overflow-x: clip; }
body { margin: 0; background: var(--porcelana); color: var(--tekst); font: 400 clamp(16px, 1.05vw + 8px, 18.5px)/1.6 var(--f-t); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--malina2); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1240px, 100%); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.wrap--waski { width: min(820px, 100%); }
.pomin { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--atrament); color: #fff; padding: 10px 16px; border-radius: 10px; }
.pomin:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 1em; }

/* ---------- typografia ---------- */
.h2 { font: 700 clamp(30px, 3.6vw + 8px, 64px)/1.04 var(--f-h); letter-spacing: -.025em; color: var(--atrament); text-wrap: balance; }
.h2 em, .start__h em, .podglowa__h em, .stopka__haslo em, .start__haslo em { font-style: italic; font-weight: 400; color: var(--malina); }
.h2 span { display: block; }
.h2--m { font-size: clamp(28px, 2.4vw + 10px, 46px); }
.h3 { font: 700 clamp(21px, 1vw + 14px, 28px)/1.2 var(--f-h); margin: 1.6em 0 .5em; color: var(--atrament); }
.etyk { font: 500 12.5px/1.2 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--malina); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.etyk::before { content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.etyk--jasna { color: #ffd6e2; }
.sek { padding: clamp(72px, 9vw, 140px) 0; position: relative; }
.sek--szkliwo { background: var(--szkliwo); }
.sek--roz { background: var(--malina-j); }
.sek--klisza { background: var(--klisza); color: #d7dbe0; }
.sek--klisza .h2 { color: #fff; }
.sek--klisza .h2 em { color: #ff8db0; }
.sek--klisza .etyk { color: #ff8db0; }
.sek--malina { background: var(--malina); color: #fbe9ef; }
.sek--malina .h2 { color: #fff; }
.sek__gl { max-width: 780px; margin-bottom: clamp(36px, 4vw, 60px); }
.sek__opis { margin-top: 18px; color: var(--szary); font-size: 1.06em; max-width: 640px; }
.sek__dalej { margin-top: clamp(32px, 4vw, 54px); display: flex; gap: 12px; flex-wrap: wrap; }
.link { color: var(--malina); font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* ---------- przyciski ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 16px; text-decoration: none; border: 2px solid transparent; background: transparent; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s; white-space: nowrap; }
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:active { transform: scale(.97); }
.btn--malina { background: var(--malina); color: #fff; }
.btn--malina:hover { background: var(--malina2); }
.btn--ciemny { background: var(--atrament); color: #fff; }
.btn--ciemny:hover { background: #33363d; }
.btn--obrys-c { border-color: var(--atrament); color: var(--atrament); }
.btn--obrys-c:hover { background: var(--atrament); color: #fff; }
.btn--jasny { background: #fff; color: var(--atrament); }
.btn--jasny:hover { background: var(--malina-j); }
.btn--obrys { border-color: rgba(255, 255, 255, .7); color: #fff; }

/* ---------- nawigacja ---------- */
.nav { position: fixed; z-index: 50; top: 12px; left: 12px; right: 12px; height: 64px; display: flex; align-items: center; gap: 18px; padding: 0 10px 0 18px; border-radius: 999px; background: rgba(251, 250, 247, .86); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 rgba(27, 29, 34, .06), 0 10px 30px -18px rgba(27, 29, 34, .35); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.znak { width: 50px; height: 26px; display: block; }
.logo__t { display: flex; flex-direction: column; line-height: 1; }
.logo__t b { font: 700 15px/1 var(--f-t); letter-spacing: .12em; color: var(--malina); }
.logo__t small { font: 500 10px/1.4 var(--f-t); letter-spacing: .16em; text-transform: uppercase; color: var(--grafit); margin-top: 3px; }
.nav__menu { display: flex; gap: 4px; margin-left: auto; }
.nav__menu a { padding: 9px 13px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--tekst); transition: background .2s; }
.nav__menu a:hover { background: rgba(154, 10, 60, .07); }
.nav__menu a[aria-current] { color: var(--malina); background: var(--malina-j); }
.jez { display: flex; gap: 2px; list-style: none; margin: 0; padding: 3px; border-radius: 999px; background: var(--szkliwo); }
.jez a { display: grid; place-items: center; min-width: 36px; height: 32px; padding: 0 6px; border-radius: 999px; font: 600 12.5px/1 var(--f-m); text-decoration: none; color: var(--szary); }
.jez a[aria-current] { background: #fff; color: var(--malina); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.nav__cta { min-height: 46px; padding: 0 20px; font-size: 15px; }
.nav__burger { display: none; width: 48px; height: 48px; margin-left: auto; border-radius: 50%; border: 0; background: var(--atrament); cursor: pointer; position: relative; flex: none; }
.nav__burger span { position: absolute; left: 14px; right: 14px; height: 2px; background: #fff; border-radius: 2px; transition: transform .35s, top .35s; }
.nav__burger span:first-child { top: 19px; } .nav__burger span:last-child { top: 27px; }
.nav__burger[aria-expanded="true"] span:first-child { top: 23px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { top: 23px; transform: rotate(-45deg); }
.menu-m { position: fixed; inset: 0; z-index: 45; background: var(--porcelana); padding: calc(var(--pasek) + 30px) 24px 30px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; clip-path: circle(0% at calc(100% - 46px) 44px); transition: clip-path .55s cubic-bezier(.7, 0, .2, 1); }
.menu-m.is-open { clip-path: circle(150% at calc(100% - 46px) 44px); }
.menu-m__linki { list-style: none; margin: 0; padding: 0; }
.menu-m__linki a { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; font: 700 clamp(30px, 8.5vw, 44px)/1.1 var(--f-h); text-decoration: none; color: var(--atrament); border-bottom: 1px solid var(--linia); }
.menu-m__linki a[aria-current] { color: var(--malina); }
.menu-m__linki small { font: 500 12px var(--f-m); color: var(--malina); }
.menu-m.is-open .menu-m__linki li { animation: wjazd .5s both cubic-bezier(.2, .8, .2, 1); }
.menu-m.is-open .menu-m__linki li:nth-child(2) { animation-delay: .04s; } .menu-m.is-open .menu-m__linki li:nth-child(3) { animation-delay: .08s; } .menu-m.is-open .menu-m__linki li:nth-child(4) { animation-delay: .12s; } .menu-m.is-open .menu-m__linki li:nth-child(5) { animation-delay: .16s; } .menu-m.is-open .menu-m__linki li:nth-child(6) { animation-delay: .2s; }
@keyframes wjazd { from { opacity: 0; translate: 0 24px; } }
.menu-m__dol { display: grid; gap: 14px; justify-items: start; margin-top: 30px; }
.menu-m__jez-t { margin: 0; font: 500 12px var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--szary); }
.jez--m a { min-width: 52px; height: 42px; font-size: 14px; }
html.menu-otwarte { overflow: hidden; }

/* status otwarcia */
.status { margin: 0; font: 500 13px/1.3 var(--f-m); display: inline-flex; align-items: center; gap: 8px; color: var(--szary); }
.status:empty { display: none; }
.status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #c2c5ca; flex: none; }
.status.is-otwarte::before { background: #1f9d5b; box-shadow: 0 0 0 0 rgba(31, 157, 91, .5); animation: puls 2s infinite; }
@keyframes puls { 70% { box-shadow: 0 0 0 9px rgba(31, 157, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 157, 91, 0); } }
.status--duzy { font-size: 14px; color: #fff; }

/* ---------- START: okno w kształcie zęba rozrasta się przewijaniem ---------- */
.start { position: relative; background: var(--porcelana); }
.start__scena { position: relative; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--pasek) + 40px) 0 40px; }
.start__okno { position: absolute; inset: 0; }
.start__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; }
.start__cien { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 12, 16, .25), rgba(18, 12, 16, 0) 35%, rgba(25, 6, 14, .82)); }
.start__blask, .start__chipy, .start__hint { display: none; }
.start__intro { position: relative; z-index: 3; width: min(1240px, 100%); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); color: #fff; }
.start__intro .etyk { color: #ffd6e2; }
.start__h { font: 700 clamp(38px, 5vw + 6px, 88px)/.98 var(--f-h); letter-spacing: -.035em; max-width: 13ch; text-wrap: balance; }
.start__h span, .start__h em { display: block; }
.start__intro .start__h em { color: #ffd6e2; }
.start__lead { max-width: 520px; margin: 22px 0 0; color: rgba(255, 255, 255, .9); }
.start__przyc { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 16px; }
.start__intro .btn--obrys-c { border-color: #fff; color: #fff; }
.start__intro .status { color: #fff; }
.start__po { display: none; }

/* stan animowany (JS + .astart) */
html.astart .start { height: 260svh; }
html.astart .start__scena { position: sticky; top: 0; height: 100svh; min-height: 0; padding: 0; display: block; }
html.astart .start__okno, html.astart .start__blask { -webkit-mask: url(/img/zab.svg) no-repeat; mask: url(/img/zab.svg) no-repeat; -webkit-mask-size: var(--mw, 40vw) var(--mh, 42vw); mask-size: var(--mw, 40vw) var(--mh, 42vw); -webkit-mask-position: var(--mx, 70%) var(--my, 55%); mask-position: var(--mx, 70%) var(--my, 55%); }
html.astart .start__cien { opacity: var(--f, 0); }
html.astart .start__foto { inset: auto; object-position: 62% 38%; }
html.astart .start__blask { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .05) 56%, transparent 62%) 0 0 / 300% 100% no-repeat; background-position: 100% 0; animation: blask 2.4s .5s cubic-bezier(.5, 0, .2, 1) both; opacity: calc(1 - var(--f, 0)); }
@keyframes blask { to { background-position: 0 0; } }
html.astart .start__okno::after { content: ''; position: absolute; inset: 0; background: rgba(154, 10, 60, .06); opacity: calc(1 - var(--f, 0)); pointer-events: none; }
html.astart .start__chipy { display: block; list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: calc(1 - var(--g, 0) * 2.2); }
.start__chipy li { position: absolute; padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: 0 14px 30px -16px rgba(27, 29, 34, .45); font: 600 14px/1 var(--f-t); color: var(--atrament); white-space: nowrap; display: flex; align-items: center; gap: 9px; translate: calc(var(--dx, 0) * var(--g, 0) * 1px) calc(var(--dy, 0) * var(--g, 0) * 1px); animation: chip .8s calc(.9s + var(--i) * .18s) cubic-bezier(.2, .9, .3, 1.2) both; }
.start__chipy li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--malina); }
@keyframes chip { from { opacity: 0; scale: .6; } }
.start__chipy li:nth-child(1) { left: var(--c1x, 52%); top: var(--c1y, 30%); --dx: -300; --dy: -120; }
.start__chipy li:nth-child(2) { left: var(--c2x, 86%); top: var(--c2y, 46%); --dx: 300; --dy: 0; }
.start__chipy li:nth-child(3) { left: var(--c3x, 55%); top: var(--c3y, 74%); --dx: -260; --dy: 160; }
html.astart .start__intro { position: absolute; left: 0; right: 0; top: 50%; translate: calc(var(--g, 0) * -60px) -50%; color: var(--atrament); opacity: calc(1 - var(--g, 0) * 2.4); visibility: var(--iv, visible); }
html.astart .start__intro .etyk { color: var(--malina); }
html.astart .start__intro .start__h { max-width: 11ch; font-size: clamp(38px, 4.4vw + 6px, 82px); }
html.astart .start__intro .start__h em { color: var(--malina); }
html.astart .start__intro .start__lead { color: var(--szary); max-width: 440px; }
html.astart .start__intro .btn--obrys-c { border-color: var(--atrament); color: var(--atrament); }
html.astart .start__intro .btn--obrys-c:hover { background: var(--atrament); color: #fff; }
html.astart .start__intro .status { color: var(--szary); }
html.astart .start__hint { display: flex; position: absolute; left: 0; right: 0; bottom: 3.5svh; justify-content: center; align-items: center; gap: 10px; font: 500 12px var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--szary); opacity: calc(1 - var(--g, 0) * 4); margin: 0; pointer-events: none; }
.mysz { width: 20px; height: 30px; border: 2px solid currentColor; border-radius: 11px; position: relative; }
.mysz::after { content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: kolko 1.8s infinite; }
@keyframes kolko { 0% { opacity: 0; translate: 0 -2px; } 40% { opacity: 1; } 100% { opacity: 0; translate: 0 9px; } }
html.astart .start__po { display: block; position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(28px, 8svh, 90px); width: min(1240px, 100%); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); color: #fff; opacity: var(--po, 0); translate: 0 calc((1 - var(--po, 0)) * 40px); visibility: hidden; }
html.astart .start.is-po .start__po { visibility: visible; }
.start__haslo { font: 700 clamp(30px, 3vw + 12px, 60px)/1.02 var(--f-h); letter-spacing: -.03em; margin-bottom: 6px; }
.start__haslo em { color: #ffd6e2; }
.start__haslo span, .start__haslo em { display: block; }

/* ---------- wstęp ---------- */
.wstep__t { font: 600 clamp(26px, 2.4vw + 12px, 50px)/1.18 var(--f-h); letter-spacing: -.02em; color: var(--atrament); max-width: 26ch; margin: 0 0 clamp(48px, 6vw, 90px); }
html.anim .wstep__t .sl { opacity: .16; transition: opacity .35s; }
html.anim .wstep__t .sl.is-on { opacity: 1; }
.odczyty { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.odczyty li { background: #fff; border: 1px solid var(--linia); border-radius: var(--r); padding: 22px 22px 24px; display: grid; gap: 8px; align-content: start; }
.odczyty__nr { font: 500 11px var(--f-m); color: var(--grafit); letter-spacing: .1em; }
.odczyty b { font: 700 clamp(40px, 3vw + 14px, 64px)/1 var(--f-h); color: var(--malina); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.odczyty li > span:last-child { color: var(--szary); font-size: .95em; line-height: 1.4; }

/* ---------- wjazdy ---------- */
html.anim [data-in] { opacity: 0; translate: 0 34px; transition: opacity .8s cubic-bezier(.2, .8, .2, 1), translate .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
html.anim [data-in].is-in { opacity: 1; translate: 0 0; }

/* ---------- ramka w kształcie zęba ---------- */
.zab { aspect-ratio: 1 / 1.04; -webkit-mask: url(/img/zab.svg) center / 100% 100% no-repeat; mask: url(/img/zab.svg) center / 100% 100% no-repeat; background: var(--linia); overflow: hidden; }
.zab img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- usługi ---------- */
.uslugi__uklad { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.uslugi__fotki { position: sticky; top: calc(var(--pasek) + 40px); aspect-ratio: 1 / 1.04; }
.uslugi__fk { position: absolute; inset: 0; opacity: 0; scale: .94; transition: opacity .5s, scale .7s cubic-bezier(.2, .8, .2, 1); }
.uslugi__fk.is-akt { opacity: 1; scale: 1; }
.uslugi__fk .zab { width: 100%; height: 100%; }
.uslugi__fknr { position: absolute; right: 4%; top: 4%; font: 700 clamp(48px, 5vw, 88px)/1 var(--f-m); color: var(--malina); letter-spacing: -.06em; mix-blend-mode: multiply; }
.uslugi__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linia); }
.usl a { display: grid; grid-template-columns: 64px 1fr 40px; gap: 18px; align-items: center; padding: 24px 6px; border-bottom: 1px solid var(--linia); text-decoration: none; transition: background .3s, padding .3s; }
.usl__nr { font: 600 15px var(--f-m); color: var(--malina); width: 52px; height: 52px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50% 50% 44% 44% / 40% 40% 60% 60%; transition: background .3s, color .3s; }
.usl__foto { display: none; }
.usl__n { display: block; font: 700 clamp(21px, 1.2vw + 12px, 30px)/1.15 var(--f-h); color: var(--atrament); letter-spacing: -.01em; }
.usl__k { display: block; color: var(--szary); margin-top: 4px; font-size: .95em; line-height: 1.45; }
.usl__s { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--malina); transition: background .3s, color .3s, translate .3s; }
.usl__s svg { width: 20px; }
.usl.is-akt .usl__nr, .usl a:hover .usl__nr { background: var(--malina); color: #fff; border-color: var(--malina); }
.usl a:hover .usl__s { background: var(--malina); color: #fff; translate: 4px 0; }
.usl a:hover { background: rgba(255, 255, 255, .6); }

/* ---------- mikroskop / lupa ---------- */
.mikro__uklad { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.mikro__tekst p { color: #b9bec6; }
.mikro__mini { width: 150px; margin-top: 28px; border-radius: 18px; overflow: hidden; border: 1px solid #2a2e35; }
.mikro__fig { margin: 0; }
.mikro__rtg { position: relative; border-radius: 26px; overflow: hidden; background: #000; border: 1px solid #2a2e35; }
.mikro__rtg > img { width: 100%; filter: contrast(1.1); }
.lupa { position: absolute; left: var(--lx, 50%); top: var(--ly, 55%); width: clamp(120px, 15vw, 210px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(154, 10, 60, .55), 0 20px 50px rgba(0, 0, 0, .6); overflow: hidden; pointer-events: none; }
.lupa__obraz { position: absolute; inset: 0; background-repeat: no-repeat; filter: contrast(1.15) brightness(1.08); }
.lupa__krzyz::before, .lupa__krzyz::after { content: ''; position: absolute; background: rgba(255, 141, 176, .8); }
.lupa__krzyz::before { left: 50%; top: 30%; bottom: 30%; width: 1px; }
.lupa__krzyz::after { top: 50%; left: 30%; right: 30%; height: 1px; }
.lupa__odczyt { position: absolute; left: 50%; bottom: 12%; translate: -50% 0; font: 600 11px var(--f-m); color: #fff; background: var(--malina); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.mikro__fig figcaption { margin-top: 14px; font: 400 13px/1.5 var(--f-m); color: #8f959e; }

/* ---------- przed / po ---------- */
.przedpo__uklad { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.przedpo__tekst p { color: var(--szary); }
.porownaj { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 2 / 1; background: #222; touch-action: pan-y; user-select: none; }
.porownaj img { width: 100%; height: 100%; object-fit: cover; }
.porownaj__po { position: absolute; inset: 0; }
.porownaj__przed { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.porownaj__e { position: absolute; top: 14px; font: 600 12px var(--f-m); letter-spacing: .12em; text-transform: uppercase; background: rgba(255, 255, 255, .92); color: var(--atrament); padding: 7px 11px; border-radius: 999px; pointer-events: none; }
.porownaj__e--l { left: 14px; } .porownaj__e--p { right: 14px; background: var(--malina); color: #fff; }
.porownaj__uchwyt { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; }
.porownaj__uchwyt i { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #dfe3e6 60%, #b9bfc4); box-shadow: 0 6px 20px rgba(0, 0, 0, .35), inset 0 0 0 3px #fff; }
.porownaj__uchwyt i::before, .porownaj__uchwyt i::after { content: ''; position: absolute; top: 50%; width: 0; height: 0; border: 6px solid transparent; translate: 0 -50%; }
.porownaj__uchwyt i::before { left: 9px; border-right-color: var(--malina); }
.porownaj__uchwyt i::after { right: 9px; border-left-color: var(--malina); }
.porownaj__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.porownaj__range:focus-visible + * { outline: none; }
.porownaj:has(.porownaj__range:focus-visible) { outline: 3px solid var(--malina2); outline-offset: 3px; }

/* ---------- kolornik ---------- */
.wybiel { background: linear-gradient(180deg, var(--porcelana), #fff); }
.wybiel__uklad { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.wybiel__tekst > p { color: var(--szary); }
.wybiel__odczyt { display: flex; align-items: baseline; gap: 14px; font: 500 13px var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--szary) !important; margin: 26px 0 8px; }
.wybiel__odczyt b { font: 700 clamp(46px, 4vw + 10px, 80px)/1 var(--f-m); color: var(--malina); letter-spacing: -.04em; text-transform: none; }
.wybiel__uwaga { font-size: 14px; }
.kolornik { position: relative; padding: 30px 26px 40px; background: #fff; border-radius: 30px; border: 1px solid var(--linia); box-shadow: 0 30px 60px -40px rgba(27, 29, 34, .4); }
.kolornik__tabs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px 8px; }
.kolornik__tab { display: grid; justify-items: center; gap: 8px; transition: translate .45s cubic-bezier(.2, .9, .3, 1.2); }
.kolornik__tab i { width: 100%; aspect-ratio: 1 / 1.7; border-radius: 40% 40% 48% 48% / 22% 22% 60% 60%; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 80%, #8a6a40)); box-shadow: inset 0 -6px 10px rgba(120, 90, 50, .12), 0 2px 0 rgba(0, 0, 0, .04); position: relative; }
.kolornik__tab i::before { content: ''; position: absolute; left: 38%; right: 38%; top: -14px; height: 16px; background: #c9ccd0; border-radius: 3px 3px 0 0; }
.kolornik__tab b { font: 600 11.5px var(--f-m); color: var(--szary); }
.kolornik__tab.is-akt { translate: 0 -14px; }
.kolornik__tab.is-akt b { color: #fff; background: var(--malina); padding: 2px 6px; border-radius: 999px; }
.kolornik__tab.is-akt i { box-shadow: 0 0 0 3px var(--malina), 0 14px 22px -10px rgba(154, 10, 60, .6); }
.kolornik__wsk { position: absolute; left: 26px; right: 26px; bottom: 18px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #f4efe3, #bba684); }

/* ---------- dzieci ---------- */
.dzieci { overflow: hidden; }
.dzieci__uklad { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 5vw, 80px); align-items: center; position: relative; z-index: 1; }
.dzieci__foto { position: relative; max-width: 520px; }
.dzieci__kaczka { position: absolute; right: -6%; bottom: -4%; width: 34%; border-radius: 22px; overflow: hidden; border: 6px solid #fff; rotate: 7deg; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .35); }
.dzieci__tekst > p { color: var(--szary); }
.dzieci__sny-t { font: 500 12px var(--f-m) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--malina) !important; margin-top: 26px; }
.dzieci__sny { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.dzieci__sny li { padding: 8px 15px; border-radius: 999px; background: #fff; font-weight: 600; font-size: 15px; color: var(--atrament); }
.bable { position: absolute; inset: 0; pointer-events: none; }
.bable span { position: absolute; bottom: -60px; left: calc(6% + var(--i) * 16%); padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .9); font: italic 400 15px var(--f-h); color: var(--malina); opacity: 0; white-space: nowrap; }
html.anim .bable span { animation: babel 16s linear infinite; animation-delay: calc(var(--i) * -2.7s); }
@keyframes babel { 0% { opacity: 0; translate: 0 0; } 10% { opacity: 1; } 50% { translate: 18px -50vh; } 85% { opacity: .7; } 100% { opacity: 0; translate: -10px -95vh; } }

/* ---------- zespół ---------- */
.zespol__lista { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; align-items: stretch; }
.osoba { background: #fff; border: 1px solid var(--linia); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; }
.osoba__foto { aspect-ratio: 4 / 3.4; background: var(--malina-j); position: relative; overflow: hidden; }
.osoba__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.osoba__mono { position: absolute; inset: 0; display: grid; place-items: center; font: italic 400 clamp(70px, 8vw, 130px)/1 var(--f-h); color: var(--malina); background: radial-gradient(circle at 30% 20%, #fff, var(--malina-j) 70%); }
.osoba--glowna .osoba__mono { background: radial-gradient(circle at 30% 20%, #c8285e, var(--malina) 70%); color: #fff; }
.osoba__t { padding: 22px 24px 26px; }
.osoba__t h3 { font: 700 23px/1.2 var(--f-h); color: var(--atrament); }
.osoba__rola { font: 500 12px/1.4 var(--f-m) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--malina); margin: 8px 0 12px !important; }
.osoba__t p { color: var(--szary); margin: 0; font-size: .96em; }

/* ---------- opinie ---------- */
.opinie__lista { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.opinie__lista li { background: #fff; border-radius: 28px; padding: clamp(26px, 3vw, 40px); position: relative; }
.opinie__lista li::before { content: '„'; position: absolute; top: -10px; right: 26px; font: 700 120px/1 var(--f-h); color: var(--malina-j); }
.opinie__lista blockquote { margin: 0; }
.opinie__lista blockquote p { font: italic 400 clamp(21px, 1.2vw + 12px, 28px)/1.35 var(--f-h); color: var(--atrament); position: relative; }
.opinie__kto { margin: 0; font-weight: 700; color: var(--malina); }
.opinie__kto span { font-weight: 400; color: var(--szary); }

/* ---------- karta upominkowa ---------- */
.karta__uklad { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.karta__foto { border-radius: 28px; overflow: hidden; rotate: -2.5deg; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); border: 8px solid #fff; }
.karta__tekst p { color: #fbe1ea; }
.karta__optus { font-weight: 600; color: #fff !important; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .12); display: inline-block; }

/* ---------- porady ---------- */
.porady__lista { display: grid; gap: 12px; }
.porada { background: #fff; border: 1px solid var(--linia); border-radius: 24px; overflow: hidden; transition: box-shadow .3s; }
.porada[open] { box-shadow: 0 24px 50px -36px rgba(27, 29, 34, .5); }
.porada summary { display: grid; grid-template-columns: 92px 1fr 46px; gap: 20px; align-items: center; padding: 14px 18px 14px 14px; cursor: pointer; list-style: none; }
.porada summary::-webkit-details-marker { display: none; }
.porada__foto { width: 92px; height: 92px; border-radius: 18px; overflow: hidden; background: var(--szkliwo); }
.porada__foto img { width: 100%; height: 100%; object-fit: cover; }
.porada__h { display: block; font: 700 clamp(19px, .8vw + 13px, 25px)/1.2 var(--f-h); color: var(--atrament); }
.porada__w { display: block; color: var(--szary); font-size: .93em; line-height: 1.45; margin-top: 4px; }
.porada__plus { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--szkliwo); color: var(--malina); transition: rotate .35s, background .3s; }
.porada__plus svg { width: 20px; }
.porada[open] .porada__plus { rotate: 45deg; background: var(--malina); color: #fff; }
.porada__p { margin: 0; padding: 4px 28px 26px 126px; display: grid; gap: 8px; list-style: none; counter-reset: p; }
.porada__p li { position: relative; padding-left: 38px; counter-increment: p; }
.porada__p li::before { content: counter(p, decimal-leading-zero); position: absolute; left: 0; top: 2px; font: 600 12px var(--f-m); color: var(--malina); }

/* ---------- kontakt ---------- */
.tel-wielki { margin: 0 0 clamp(30px, 4vw, 54px); }
.tel-wielki a { font: 700 clamp(46px, 9vw, 150px)/.95 var(--f-h); letter-spacing: -.045em; color: var(--malina); text-decoration: none; white-space: nowrap; }
.tel-wielki a:hover { color: var(--malina2); }
.tel-sredni a { font: 700 clamp(30px, 3vw + 10px, 50px)/1 var(--f-h); color: var(--malina); text-decoration: none; letter-spacing: -.03em; }
.komunikat { background: var(--malina); color: #fff; padding: 14px 18px; border-radius: 16px; font-weight: 600; }
.kontakt__uklad { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(26px, 4vw, 60px); align-items: start; }
.dane { margin: 0; display: grid; gap: 22px; }
.dane dt { display: flex; align-items: center; gap: 10px; font: 500 12px var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--szary); margin-bottom: 6px; }
.dane dt svg { width: 17px; height: 17px; color: var(--malina); }
.dane dd { margin: 0; font-size: 1.08em; color: var(--atrament); }
.dane dd a:not(.link) { text-decoration: none; font-weight: 600; }
.godz { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 2px; max-width: 360px; }
.godz li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 12px; border-radius: 10px; }
.godz li.is-dzis { background: var(--malina-j); color: var(--malina); font-weight: 700; }
.godz b { font: 500 .95em var(--f-m); }
.godz--maly { font-size: 14px; }
.godz--maly li { padding: 3px 8px; }
.kontakt__prawa { display: grid; gap: 18px; }
.mapa { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 3; background: #dde2e0; border: 1px solid var(--linia); }
.mapa iframe { width: 100%; height: 100%; border: 0; pointer-events: none; filter: saturate(.85); }
.mapa.is-aktywna iframe { pointer-events: auto; }
.mapa__zaslona { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; }
.mapa__zaslona::after { content: attr(data-t); position: absolute; left: 50%; bottom: 16px; translate: -50% 0; background: rgba(27, 29, 34, .85); color: #fff; font: 600 13px var(--f-t); padding: 8px 14px; border-radius: 999px; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.mapa:hover .mapa__zaslona::after, .mapa__zaslona:focus-visible::after { opacity: 1; }
.mapa.is-aktywna .mapa__zaslona { display: none; }
.nfz { background: #fff; border-radius: 22px; padding: 22px 24px; border: 1px solid var(--linia); }
.nfz__t { font: 700 21px/1.2 var(--f-h); color: var(--atrament); margin-bottom: 8px; }
.nfz > p { color: var(--szary); font-size: .95em; }
.nfz__g { font: 500 12px var(--f-m) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--malina) !important; margin-bottom: 6px !important; }

/* ---------- podstrony ---------- */
.podglowa { position: relative; background: var(--szkliwo); padding: calc(var(--pasek) + clamp(50px, 7vw, 100px)) 0 clamp(70px, 8vw, 120px); }
.podglowa__w { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.podglowa--foto .podglowa__w { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.podglowa__h { font: 700 clamp(36px, 4.4vw + 8px, 82px)/1 var(--f-h); letter-spacing: -.035em; color: var(--atrament); max-width: 17ch; text-wrap: balance; }
.podglowa__wstep { margin-top: 22px; font-size: 1.12em; color: var(--szary); max-width: 620px; }
.podglowa__zab { max-width: 380px; width: 100%; justify-self: end; }
.podglowa__luk { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 40px; fill: var(--porcelana); }
.podglowa__przyc { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.okruszki { font: 500 13px var(--f-m); color: var(--szary); margin-bottom: 26px; }
.okruszki a { color: var(--malina); }
.nr404 { font: 700 clamp(90px, 16vw, 220px)/.9 var(--f-m); color: var(--malina); letter-spacing: -.06em; margin: 0 0 12px; }
.oferta__uklad { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.spis { position: sticky; top: calc(var(--pasek) + 30px); }
.spis__t { font: 500 12px var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--szary); }
.spis ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.spis a { display: flex; gap: 12px; align-items: baseline; padding: 7px 10px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.3; }
.spis a span { font: 600 12px var(--f-m); color: var(--malina); }
.spis a:hover, .spis a.is-akt { background: var(--malina-j); color: var(--malina); }
.oferta__lista { display: grid; gap: clamp(60px, 7vw, 110px); }
.oferta__el { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 54px); align-items: start; scroll-margin-top: calc(var(--pasek) + 30px); }
.oferta__foto { position: relative; }
.oferta__nr { position: absolute; left: -6px; bottom: -14px; font: 700 clamp(40px, 4vw, 70px)/1 var(--f-m); color: var(--malina); letter-spacing: -.06em; background: var(--porcelana); padding: 2px 10px; border-radius: 16px; }
.oferta__lead { font: italic 400 clamp(20px, 1vw + 13px, 26px)/1.35 var(--f-h); color: var(--malina); margin: 14px 0 16px; }
.oferta__t > p { color: var(--szary); }
.oferta__zt { font: 500 12px var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--atrament); margin: 26px 0 12px; }
.oferta__z { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.oferta__z li { padding: 10px 14px 10px 36px; background: var(--szkliwo); border-radius: 14px; position: relative; font-size: .95em; line-height: 1.4; }
.oferta__z li::before { content: ''; position: absolute; left: 14px; top: 16px; width: 9px; height: 9px; border-radius: 3px 3px 5px 5px; background: var(--malina); }
.dwie { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.blok { background: #fff; border: 1px solid var(--linia); border-radius: 28px; padding: clamp(26px, 3vw, 44px); }
.blok > p { color: var(--szary); margin-top: 14px; }
.blok .oferta__z { grid-template-columns: 1fr; }
.kroki { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.kroki li { background: #fff; border-radius: 22px; padding: 22px; }
.kroki span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--malina); color: #fff; font: 700 16px var(--f-m); margin-bottom: 14px; }
.kroki p { margin: 0; font-size: .95em; line-height: 1.45; }
.historia__t { font: 500 clamp(22px, 1.5vw + 12px, 34px)/1.4 var(--f-h); color: var(--atrament); max-width: 34ch; margin-bottom: clamp(40px, 5vw, 70px); }
.sprzet__lista { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sprzet__lista li { background: #1b1e24; border-radius: 24px; overflow: hidden; border: 1px solid #2a2e35; }
.sprzet__lista img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.sprzet__lista h3 { font: 700 21px/1.2 var(--f-h); color: #fff; padding: 18px 20px 6px; }
.sprzet__lista p { padding: 0 20px 20px; margin: 0; color: #aab0b9; font-size: .93em; }
.gal { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gal li:nth-child(5n + 1) { grid-row: span 2; }
.gal__b { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 20px; overflow: hidden; cursor: zoom-in; background: var(--szkliwo); }
.gal__b img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: scale .6s cubic-bezier(.2, .8, .2, 1); }
.gal__b:hover img { scale: 1.05; }
.praca .h2 { margin-bottom: 18px; }
.polityka p { color: var(--szary); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(12, 13, 16, .94); display: grid; place-items: center; padding: 60px 70px; }
.lightbox__f { margin: 0; max-width: 100%; max-height: 100%; }
.lightbox__f img { max-height: calc(100svh - 140px); width: auto; border-radius: 18px; }
.lightbox.is-wejscie img { animation: wyskok .45s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes wyskok { from { scale: .88; opacity: 0; } }
.lightbox figcaption { color: #ccc; text-align: center; margin-top: 10px; }
.lightbox__x, .lightbox__s { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.lightbox__x { top: 16px; right: 16px; }
.lightbox__s--p { left: 14px; top: 50%; translate: 0 -50%; } .lightbox__s--n { right: 14px; top: 50%; translate: 0 -50%; }
.lightbox__x:hover, .lightbox__s:hover { background: var(--malina); }

/* ---------- formularz ---------- */
.zapis { background: var(--porcelana); }
.form-uklad { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.form-uklad__opis p { color: var(--szary); }
.form { position: relative; background: #fff; border: 1px solid var(--linia); border-radius: 30px; padding: clamp(22px, 3vw, 40px); }
.form__siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pole { display: grid; gap: 6px; align-content: start; border: 0; margin: 0; padding: 0; min-width: 0; }
.pole--cale { grid-column: 1 / -1; }
.pole__e { font-weight: 600; font-size: 15px; color: var(--atrament); padding: 0; }
.pole__e small { font-weight: 400; color: var(--szary); }
.pole input, .pole select, .pole textarea { width: 100%; min-height: 52px; padding: 12px 15px; border: 1.5px solid #cfd4d3; border-radius: 14px; background: var(--porcelana); font-size: 16px; transition: border-color .2s, background .2s; }
.pole textarea { resize: vertical; min-height: 110px; }
.pole input:focus, .pole select:focus, .pole textarea:focus { border-color: var(--malina); background: #fff; outline: none; box-shadow: 0 0 0 4px rgba(154, 10, 60, .12); }
.pole__b { font-size: 13.5px; color: #b0102a; font-weight: 600; min-height: 0; }
.pole__b:empty { display: none; }
.pole.is-blad input, .pole.is-blad textarea { border-color: #b0102a; background: #fff6f7; }
.pora__op { display: flex; flex-wrap: wrap; gap: 8px; }
.pora__op label { cursor: pointer; }
.pora__op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pora__op span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #cfd4d3; font-weight: 600; font-size: 15px; transition: background .2s, border-color .2s, color .2s; }
.pora__op input:checked + span { background: var(--malina); border-color: var(--malina); color: #fff; }
.pora__op input:focus-visible + span { outline: 3px solid var(--malina2); outline-offset: 2px; }
.zgoda { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin: 20px 0 6px; font-size: 14.5px; color: var(--szary); cursor: pointer; }
.zgoda input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--malina); }
.zgoda .pole__b { grid-column: 2; }
.zgoda.is-blad span:first-of-type { color: #b0102a; }
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__blad { color: #b0102a; font-weight: 600; margin: 10px 0; min-height: 0; }
.form__blad:empty { display: none; }
.form__wyslij { margin-top: 12px; width: 100%; }
.form__ok { position: absolute; inset: 0; background: #fff; border-radius: 30px; display: grid; place-content: center; justify-items: center; text-align: center; padding: 30px; gap: 6px; animation: wyskok .5s cubic-bezier(.2, .9, .3, 1.2); }
.form__ok-i { width: 70px; height: 70px; border-radius: 50%; background: var(--malina); color: #fff; display: grid; place-items: center; font-size: 34px; margin-bottom: 10px; }
.form__ok h3 { font: 700 34px var(--f-h); color: var(--atrament); }
.form__ok p { color: var(--szary); max-width: 40ch; }

/* ---------- stopka ---------- */
.stopka { background: var(--atrament); color: #c5c8ce; padding: clamp(60px, 7vw, 100px) 0 0; position: relative; }
.diag { display: grid; gap: 10px; margin-bottom: clamp(40px, 5vw, 70px); }
.diag__r { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; }
.diag__z { display: grid; justify-items: center; gap: 6px; }
.diag__z i { width: 70%; height: 30px; border: 1.5px solid #4a4e57; border-radius: 40% 40% 45% 45% / 30% 30% 70% 70%; transition: background .3s, border-color .3s; }
.diag__z--m i { width: 92%; border-radius: 30% 30% 40% 40% / 30% 30% 60% 60%; }
.diag__z--p i { width: 80%; }
.diag__z--dol { grid-auto-flow: row; }
.diag__z--dol i { order: 2; border-radius: 45% 45% 40% 40% / 70% 70% 30% 30%; }
.diag__z b { font: 500 10.5px var(--f-m); color: #6e737c; }
.diag__z.is-usl i { border-color: var(--malina2); background: rgba(184, 18, 76, .25); }
.diag__z.is-usl b { color: #ff8db0; }
.stopka__haslo { font: 700 clamp(32px, 4vw + 8px, 76px)/1 var(--f-h); letter-spacing: -.035em; color: #fff; margin: 0 0 clamp(40px, 5vw, 70px); }
.stopka__haslo em { color: #ff8db0; display: block; }
.stopka__kol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding-bottom: 50px; border-bottom: 1px solid #33363d; }
.stopka__h { font: 500 12px var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: #ff8db0; margin-bottom: 14px; }
.stopka__kol p { font-size: 15.5px; }
.stopka a { color: #eef0f3; text-decoration: none; }
.stopka a:hover { color: #ff8db0; }
.stopka__linki { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 15.5px; }
.stopka .godz li.is-dzis { background: rgba(184, 18, 76, .3); color: #fff; }
.stopka .status { color: #c5c8ce; }
.stopka__social a { display: inline-flex; align-items: center; gap: 8px; }
.stopka__social svg { width: 22px; height: 22px; }
.stopka__dol { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; padding-bottom: 26px; font-size: 13.5px; }
.stopka__dol p { margin: 0; }
.m-only { display: none; }
.made-by { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; transition: color .3s; color: #c5c8ce !important; }
.made-by:hover { color: #ff8db0 !important; }
.made-by img { height: 1.75rem; width: auto; display: block; animation: logo-shine 5s ease-in-out infinite; }
.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) {
  .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; }
}
.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: -0.5rem 0; border-radius: 999px; color: #c5c8ce !important; }
.to-top:hover { color: #ff8db0 !important; }
.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; }
@keyframes fly-up { 0% { transform: translateY(6px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }

/* dolny pasek (telefon) */
.dolny { display: none; }

/* ---------- tablet ---------- */
@media (max-width: 1180px) {
  .nav__menu a { padding: 9px 9px; font-size: 14.5px; }
  .nav__cta span { display: none; }
  .nav__cta { padding: 0 14px; }
}
@media (max-width: 980px) {
  :root { --pasek: 70px; }
  .nav { height: 58px; top: 8px; left: 8px; right: 8px; padding: 0 5px 0 14px; }
  .nav__menu, .jez--nav, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .uslugi__uklad, .mikro__uklad, .przedpo__uklad, .wybiel__uklad, .dzieci__uklad, .karta__uklad, .kontakt__uklad, .form-uklad, .oferta__uklad, .oferta__el { grid-template-columns: minmax(0, 1fr); }
  .uslugi__fotki { display: none; }
  .usl a { grid-template-columns: 74px 1fr 32px; gap: 14px; padding: 16px 0; }
  .usl__nr { position: absolute; width: 38px; height: 38px; font-size: 12.5px; background: var(--porcelana); margin: -6px 0 0 -6px; z-index: 1; }
  .usl a { position: relative; }
  .usl__foto { display: block; width: 74px; height: 74px; border-radius: 20px; overflow: hidden; grid-column: 1; grid-row: 1; }
  .usl__foto img { width: 100%; height: 100%; object-fit: cover; }
  .usl__tekst { grid-column: 2; }
  .usl__s { grid-column: 3; width: 32px; height: 32px; }
  .odczyty { grid-template-columns: 1fr 1fr; }
  .zespol__lista { grid-template-columns: minmax(0, 1fr); }
  .osoba { display: grid; grid-template-columns: 40% 1fr; }
  .osoba__foto { aspect-ratio: auto; min-height: 220px; }
  .opinie__lista { grid-template-columns: minmax(0, 1fr); }
  .spis { position: static; }
  .spis ol { grid-template-columns: 1fr 1fr; }
  .oferta__foto { max-width: 360px; }
  .podglowa--foto .podglowa__w { grid-template-columns: minmax(0, 1fr); }
  .podglowa__zab { justify-self: start; max-width: 240px; }
  .kroki { grid-template-columns: 1fr 1fr; }
  .sprzet__lista { grid-template-columns: 1fr 1fr; }
  .dwie { grid-template-columns: minmax(0, 1fr); }
  .stopka__kol { grid-template-columns: 1fr 1fr; }
  .dzieci__foto { max-width: 400px; }
}
/* ---------- telefon ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .sek { padding: 64px 0; }
  .h2 { font-size: clamp(28px, 8.4vw, 40px); }
  .etyk { font-size: 11.5px; margin-bottom: 14px; }
  .btn { min-height: 50px; padding: 0 20px; font-size: 15.5px; }
  .logo__t small { font-size: 9px; }
  .znak { width: 44px; height: 23px; }
  html.astart .start__intro { top: calc(var(--pasek) + 2.5svh); translate: 0 0; text-align: center; }
  html.astart .start__intro .etyk { justify-content: center; margin-bottom: 10px; }
  html.astart .start__intro .start__h { margin: 0 auto; max-width: 14ch; font-size: clamp(31px, 8.6vw, 40px); }
  html.astart .start__intro .start__lead, html.astart .start__intro .start__przyc, html.astart .start__intro .status { display: none; }
  .start__chipy li { font-size: 12.5px; padding: 8px 12px; }
  .start__haslo { font-size: clamp(30px, 8.6vw, 40px); }
  .start__przyc .btn { flex: 1 1 auto; }
  .wstep__t { font-size: clamp(23px, 6.6vw, 30px); }
  .odczyty { gap: 10px; }
  .odczyty li { padding: 16px; }
  .odczyty b { font-size: 36px; }
  .usl__n { font-size: 19px; }
  .usl__k { font-size: 14px; }
  .porownaj { aspect-ratio: 1.6 / 1; border-radius: 20px; }
  .kolornik { padding: 22px 14px 32px; border-radius: 22px; }
  .kolornik__tabs { gap: 14px 5px; }
  .kolornik__tab b { font-size: 9.5px; }
  .kolornik__wsk { left: 14px; right: 14px; }
  .osoba { grid-template-columns: minmax(0, 1fr); }
  .osoba__foto { aspect-ratio: 4 / 3.2; min-height: 0; }
  .porada summary { grid-template-columns: 64px 1fr 40px; gap: 12px; padding: 10px 12px 10px 10px; }
  .porada__foto { width: 64px; height: 64px; border-radius: 14px; }
  .porada__w { display: none; }
  .porada__plus { width: 38px; height: 38px; }
  .porada__p { padding: 6px 18px 22px; }
  .tel-wielki a { font-size: clamp(40px, 12.4vw, 60px); }
  .form__siatka { grid-template-columns: minmax(0, 1fr); }
  .form { border-radius: 22px; }
  .oferta__z { grid-template-columns: minmax(0, 1fr); }
  .spis ol { grid-template-columns: minmax(0, 1fr); }
  .kroki, .sprzet__lista, .gal { grid-template-columns: 1fr 1fr; }
  .kroki li { padding: 16px; }
  .podglowa__h { font-size: clamp(32px, 9.4vw, 46px); }
  .podglowa__wstep { font-size: 1em; }
  .stopka__kol { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .diag__z i { height: 18px; }
  .diag__z b { font-size: 7.5px; }
  .diag__r { gap: 2px; }
  .stopka__dol { flex-wrap: wrap; padding-bottom: 96px; }
  .stopka__dol > p:first-child { width: 100%; }
  .stopka__tworca { flex: 1; }
  .m-only { display: inline; } .d-only { display: none; }
  .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; }
  .dolny { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; position: fixed; z-index: 40; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 6px; border-radius: 22px; background: rgba(27, 29, 34, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); translate: 0 140%; transition: translate .5s cubic-bezier(.2, .9, .3, 1.2); }
  .dolny.is-widoczny { translate: 0 0; }
  .dolny a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: 16px; color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 600; }
  .dolny a svg { width: 20px; height: 20px; }
  .dolny .dolny__glowny { background: var(--malina); flex-direction: row; gap: 8px; font-size: 15px; }
  .lightbox { padding: 60px 8px; }
  .lightbox__s { top: auto; bottom: 16px; translate: 0 0; }
  .bable span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.osoba__foto:has(.osoba__mono) { aspect-ratio: 16 / 7; }
@media (max-width: 980px) { .osoba__foto:has(.osoba__mono) { aspect-ratio: auto; min-height: 160px; } }
@media (max-width: 640px) { .bable { display: none; } .osoba__foto:has(.osoba__mono) { aspect-ratio: 16 / 7; min-height: 0; } }
html.astart .start__hint { pointer-events: none; }
.osoba__tyt { font: 500 .62em var(--f-t); color: var(--szary); letter-spacing: .02em; }
.bable span { left: auto; right: calc(2% + (var(--i) % 3) * 5%); font-size: 14px; }
html.anim .bable span { animation-duration: 20s; animation-delay: calc(var(--i) * -3.3s); }
/* kontrast (WCAG AA) */
.logo__t small, .odczyty__nr { color: #6b6e74; }
.diag__z b { color: #9aa0a8; }
.bable span { color: var(--malina); background: rgba(255, 255, 255, .85); }
html.anim .bable span { --op: 1; }
/* zespół bez zdjęć: jednolite karty z inicjałami */
.zespol__lista--bez .osoba__foto { aspect-ratio: auto; min-height: 0; background: none; padding: 26px 24px 0; overflow: visible; }
.zespol__lista--bez .osoba__mono { position: static; display: grid; width: 92px; height: 92px; border-radius: 50% 50% 44% 44% / 42% 42% 58% 58%; font-size: 42px; background: var(--malina-j); }
.zespol__lista--bez .osoba--glowna .osoba__mono { background: var(--malina); color: #fff; }
.zespol__lista--bez { grid-template-columns: repeat(3, 1fr); }
.zespol__lista--bez .osoba { display: flex; flex-direction: column; }
/* kontakt: szybkie akcje i NFZ jako rozwijana ramka */
.kontakt__akcje { display: flex; flex-wrap: wrap; gap: 10px; margin: -14px 0 clamp(30px, 4vw, 50px); }
.nfz summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; }
.nfz summary::-webkit-details-marker { display: none; }
.nfz .nfz__t { margin: 0; }
.nfz[open] summary { margin-bottom: 12px; }
.nfz[open] .porada__plus { rotate: 45deg; background: var(--malina); color: #fff; }
@media (max-width: 980px) {
  .zespol__lista--bez { grid-template-columns: minmax(0, 1fr); }
  .zespol__lista--bez .osoba { display: grid; grid-template-columns: 92px 1fr; gap: 0 16px; padding: 22px 20px; }
  .zespol__lista--bez .osoba__foto { padding: 0; }
  .zespol__lista--bez .osoba__mono { width: 72px; height: 72px; font-size: 32px; }
  .zespol__lista--bez .osoba__t { padding: 0; }
}
@media (max-width: 640px) {
  .mikro__mini { display: none; }
  .stopka__godz { display: none; }
  .kontakt__akcje { display: grid; grid-template-columns: 1fr 1fr; margin-top: -8px; }
  .kontakt__akcje .btn { padding: 0 12px; font-size: 14.5px; }
  .kontakt__akcje .btn--malina { grid-column: 1 / -1; }
  .kontakt .dane { gap: 16px; }
  .kontakt .dane > div:nth-child(3) dd a.link { display: none; }
  .kontakt .godz { max-width: none; background: #fff; border-radius: 18px; padding: 8px; }
  .kontakt .mapa { aspect-ratio: 1.3 / 1; }
}
html.astart .start__okno, html.astart .start__okno * { pointer-events: none; }