:root {
  --tlo: #FCFAF5;
  --tlo-2: #EDEBE6;
  --tekst: #2D2A2B;
  --tekst-2: #676566;
  --akcent: #0E939F;
  --akcent-2: #0B757F;
  --akcent-tekst: #0A6B74;
  --akcent-h1: #0E939F;
  --liczba: #0A6B74;
  --akcent-em: #111111;
  --akcent-tlo: #BEF8FD;
  --na-akcencie: #111111;
  --duo: #A38320;
  --na-duo: #111111;
  --duo-tlo: #FCF2C7;
  --duo-tekst: #7C6410;
  --trio: #A38320;
  --na-trio: #111111;
  --trio-tlo: #FCF2C7;
  --trio-tekst: #7C6410;
  --kwarto: #0B757F;
  --na-kwarto: #FFFFFF;
  --kwarto-tlo: #BEF7FD;
  --kwarto-tekst: #0A6B74;
  --ciemny: #095F67;
  --na-ciemnym: #FFFFFF;
  --ciemny-linia: #30797F;
  --ciemny-akcent: #BEF8FD;
  --linia: #D9D9D9;
  --akcent-jasny: #23A5B1;
  --akcent-glebszy: #0B737C;
  --duo-jasny: #BD9F40;
  --duo-glebszy: #7F6619;
  --glebia-akcent: linear-gradient(155deg, #23A5B1 0%, #0E939F 48%, #0B737C 100%);
  --glebia-duo: linear-gradient(155deg, #BD9F40 0%, #A38320 48%, #7F6619 100%);
  --glebia-ciemny: linear-gradient(160deg, #095F67 0%, #1A6A72 100%);
  --cta: #0E939F;
  --na-cta: #111111;
  --akcent-pole: #0A6B74;
  --na-akcencie-pole: #FFFFFF;
  --duo-pole: #7C6410;
  --na-duo-pole: #FFFFFF;
  --trio-pole: #7C6410;
  --na-trio-pole: #FFFFFF;
  --kwarto-pole: #0B757F;
  --na-kwarto-pole: #FFFFFF;
  --wash: linear-gradient(165deg, #BEF8FD 0%, #FCFAF5 52%, #EDEBE6 100%);
  --mgla: radial-gradient(60% 55% at 18% 12%, #BEF8FD 0%, transparent 62%), radial-gradient(50% 45% at 84% 16%, #FCFAF5 0%, transparent 58%), radial-gradient(55% 50% at 60% 94%, #FCFAF5 0%, transparent 62%);
  --sekcja-b: #FCFAF5;
  --sekcja-c: #BEF7FD;
  --sekcja-d: #FCFAF5;
  --mgla-mocna: radial-gradient(70% 60% at 14% 10%, #A6D5D6 0%, transparent 64%), radial-gradient(55% 50% at 88% 12%, #D8CAA0 0%, transparent 60%), radial-gradient(60% 55% at 62% 96%, #DED2AD 0%, transparent 64%);
  --font-display: "Marcellus", Georgia, serif;
  --font-tekst: "Lato", system-ui, sans-serif;
  --waga-display: 400;
  --waga-max: 400;
  --font-zmienny: 0;
  --display-odstep: -.02em;
  --display-wersaliki: none;
  --skala: 1.06;
  --promien: 8px;
  --plynnie: cubic-bezier(.22, .61, .36, 1);
  --ruch-dystans: 18px;
  --ruch-czas: .9s;
  --ruch-ilosc: 2;
  --odslona: cubic-bezier(.22, .61, .36, 1);
  --odslona-czas: 1.1s;
  --przejscie: cubic-bezier(.45, 0, .55, 1);
  --promien: 2px;
  --cien-karta: none;
  --linia-grubosc: 1px;
  --gestosc: 1.16;
}
/* system designu: premium - luksus przez pustke: cienkie linie, duze marginesy, szeryfowy naglowek - jubiler, kancelaria, hotel, wnetrza, slub */
body.system-premium { --promien: 2px; }  body.system-premium .karta, body.system-premium .kafelek, body.system-premium .pakiet { box-shadow: none; border: 1px solid color-mix(in oklab, var(--tekst) 14%, transparent); } body.system-premium .sekcja { padding-block: clamp(88px, 11vw, 168px); } body.system-premium .wnetrze { max-width: 1120px; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 400 1.05rem/1.6 var(--font-tekst); overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--waga-display, 700); letter-spacing: var(--display-odstep, -.02em); line-height: 1.08; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(calc(2.8rem * var(--skala, 1)), calc(6.5vw * var(--skala, 1)), calc(6rem * var(--skala, 1))); line-height: 1.02; text-transform: var(--display-wersaliki, none); } h1 em { font-style: normal; color: var(--akcent-h1, var(--akcent)); } h2 { text-transform: var(--display-wersaliki, none); }
h2 { font-size: clamp(calc(1.9rem * var(--skala, 1)), calc(3.6vw * var(--skala, 1)), calc(3rem * var(--skala, 1))); } h3 { font-size: calc(1.3rem * var(--skala, 1)); }
p { margin: 0 0 1em; max-width: 62ch; } a { color: var(--akcent-tekst, var(--akcent)); } p a, li a, address a, td a, .mini a { color: var(--akcent-2); }
.wnetrze { width: min(1180px, 100% - 40px); margin-inline: auto; } .waski { max-width: 820px; }
.sekcja { padding: clamp(64px, 9vw, 120px) 0; } .tlo-2 { background: var(--tlo-2); }
.etykieta { display: inline-block; font: 600 12px/1 var(--font-tekst); letter-spacing: .18em; text-transform: uppercase; color: var(--akcent-tekst, var(--akcent)); margin-bottom: 14px; }
.etykieta::after { content: ""; display: block; width: 34px; height: 2px; margin-top: 10px; background: var(--akcent); transform-origin: left; transform: scaleX(0); transition: transform .7s var(--plynnie) .1s; }
.reveal.widoczny .etykieta::after, .hero-tekst .etykieta::after, .hero-srodek .etykieta::after { transform: scaleX(1); }
.bento-karta .etykieta::after, .pakiet .etykieta::after { display: none; }
.naglowek-sekcji { max-width: 640px; margin-bottom: clamp(28px, 4vw, 48px); } .naglowek-sekcji p { color: var(--tekst-2); margin-top: 12px; }
.mini { font-size: .9rem; color: var(--tekst-2); }
.ikona { width: 30px; height: 30px; color: var(--akcent-h1, var(--akcent)); margin-bottom: 6px; } .ikona.mala { width: 22px; height: 22px; display: inline-block; vertical-align: -5px; margin: 0 8px 0 0; }
.pomin { position: absolute; left: -999px; top: 8px; background: var(--akcent); color: var(--na-akcencie); padding: 8px 12px; z-index: 100; } .pomin:focus { left: 8px; }
header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--tlo) 90%, transparent); backdrop-filter: blur(10px); transition: box-shadow .3s; }
header.przewiniety { box-shadow: 0 8px 28px -14px rgb(0 0 0 / .35); }
.naglowek { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.logo { font: 700 1.35rem/1 var(--font-display); color: var(--tekst); text-decoration: none; letter-spacing: -.02em; }
.menu { display: flex; align-items: center; gap: 22px; } .menu a { color: var(--tekst); text-decoration: none; font-weight: 500; font-size: .98rem; } .menu a:hover { color: var(--akcent-tekst, var(--akcent)); } .menu a.przycisk, .menu a.przycisk:hover { color: var(--menu-przycisk-napis, var(--na-akcencie)); background: var(--menu-przycisk-tlo, var(--akcent)); }
.hamburger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 10px; flex-direction: column; justify-content: center; gap: 5px; } .hamburger span { display: block; height: 2px; background: var(--tekst); border-radius: 2px; }
.przycisk { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: var(--promien); background: var(--cta, var(--akcent)); color: var(--na-cta, var(--na-akcencie)); font: 600 1rem var(--font-tekst); text-decoration: none; border: 0; cursor: pointer; transition: transform .25s var(--plynnie), background .2s, box-shadow .25s; }
.przycisk:hover { background: var(--akcent-glebszy, var(--akcent-2)); transform: translateY(-2px); box-shadow: 0 14px 30px -16px var(--akcent); } .przycisk.maly { padding: 10px 18px; font-size: .92rem; }
.przycisk.drugi { background: transparent; color: var(--akcent-tekst, var(--akcent)); box-shadow: inset 0 0 0 2px var(--akcent); } .przycisk.drugi:hover { background: var(--akcent-tlo); }
.przycisk.odwrotny { background: var(--na-akcencie); color: var(--akcent); } .przycisk.odwrotny:hover { background: var(--tlo); }
.link { color: var(--akcent-tekst, var(--akcent)); font-weight: 600; text-decoration: none; } .link:hover { text-decoration: underline; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 120px); background-image: var(--mgla); background-repeat: no-repeat; }
:is(.hero-obraz, .hero-okno, .hero-karta, .hero-kolaz, .hero-pasy, .hero-blok, .hero-magazyn, .hero-poswiata) :is(.hero .dekor, .hero > .smaczki-tlo) { inset: 0 0 0 auto; width: min(46%, 660px); }
:is(.hero-typo, .hero-plakat, .hero-pole, .hero-pelne, .hero-dwudzielny) :is(.hero .dekor, .hero > .smaczki-tlo) { inset: 0 0 auto 0; height: 22%; }
@media (max-width: 860px) { .hero .dekor, .hero > .smaczki-tlo { inset: auto 0 0 0 !important; width: auto !important; height: 26% !important; } }
.hero .dekor { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .hero > .wnetrze, .hero > .zdjecie-pelne { position: relative; z-index: 1; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: min(60vw, 720px); aspect-ratio: 1; background: radial-gradient(closest-side, var(--akcent-tlo), transparent 72%); pointer-events: none; opacity: .9; }
.hero-siatka { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 80px); align-items: center; position: relative; }
@keyframes wjazdL { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes wjazdP { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes wjazdG { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero-siatka > .hero-tekst { animation: wjazdL .8s var(--plynnie) .05s backwards; transform: translateY(calc(var(--par, 0) * 0.12px)); }
.hero-siatka > .hero-wizual, .hero-siatka > .karta-zaufania { animation: wjazdP .8s var(--plynnie) .18s backwards; transform: translateY(calc(var(--par, 0) * -0.10px)); will-change: transform; }
.hero-tekst .lead { animation: wjazdG .7s var(--plynnie) .35s backwards; } .hero-tekst .cta, .hero-srodek .cta { animation: wjazdG .7s var(--plynnie) .5s backwards; } .hero-srodek .pasek-zaufania { animation: wjazdG .7s var(--plynnie) .65s backwards; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--tekst-2); max-width: 46ch; margin-top: 20px; }
.miejsce-na-zdjecie { position: absolute; left: 12px; top: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: max-content; max-width: min(330px, calc(100% - 24px)); padding: 9px 14px; border-radius: 999px; background: color-mix(in oklab, var(--tlo) 90%, transparent); box-shadow: 0 8px 22px -14px rgb(0 0 0 / .45); color: var(--tekst); font: 600 13px/1.2 var(--font-tekst); }
.miejsce-na-zdjecie svg { flex: none; color: var(--akcent-tekst, var(--akcent)); } .miejsce-na-zdjecie b { font-weight: 700; } .miejsce-na-zdjecie .jak { flex-basis: 100%; font: 400 11.5px/1.3 var(--font-tekst); font-style: normal; color: var(--tekst-2); }
.miejsce-na-zdjecie .chmurka { position: absolute; z-index: -1; border-radius: 999px; background: color-mix(in oklab, var(--duo-tlo) 82%, transparent); pointer-events: none; } .miejsce-na-zdjecie .chmurka-a { width: 64px; height: 26px; left: -18px; top: 54px; box-shadow: 26px -14px 0 -6px color-mix(in oklab, var(--duo-tlo) 82%, transparent), 54px 2px 0 -10px color-mix(in oklab, var(--trio-tlo, var(--duo-tlo)) 82%, transparent); } .miejsce-na-zdjecie .chmurka-b { width: 44px; height: 20px; right: -20px; top: 70px; box-shadow: -18px -10px 0 -5px color-mix(in oklab, var(--akcent-tlo) 82%, transparent); }
@media (max-width: 700px) { .miejsce-na-zdjecie { left: 8px; top: 8px; padding: 7px 11px; font-size: 12px; } .miejsce-na-zdjecie .jak, .miejsce-na-zdjecie .chmurka { display: none; } }
.hero-wizual { position: relative; margin: 0; } .hero-wizual::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--akcent); border-opacity: .5; border-radius: var(--promien); opacity: .45; transform: translate(12px, 12px); z-index: -1; } .hero-wizual .ramka-obrazu { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 600px; border-radius: var(--promien); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .35); }
.karta-plywajaca { position: absolute; left: -24px; bottom: 28px; background: var(--tlo); color: var(--tekst); border: 1px solid var(--linia); border-radius: var(--promien); padding: 14px 18px; box-shadow: 0 24px 48px -24px rgb(0 0 0 / .3); font-size: .95rem; }
.karta-plywajaca b { font: 700 1.6rem/1 var(--font-display); display: block; margin-bottom: 4px; } .karta-plywajaca small { color: var(--tekst-2); }
.hero-srodek { text-align: center; max-width: 880px; position: relative; animation: wjazdG .8s var(--plynnie) .05s backwards; transform: translateY(calc(var(--par, 0) * 0.12px)); } .hero-srodek .lead { margin-inline: auto; } .hero-srodek .cta { justify-content: center; }
.hero::before { translate: calc(var(--mx, 0) * 1px) calc(var(--my, 0) * 1px); transition: translate .7s var(--plynnie); }
.hero-poswiata .hero::before { inset: auto; left: 50%; top: 40%; transform: translate(-50%, -50%); width: min(80vw, 900px); }
.hero-pole .hero { background: var(--ciemny, var(--tekst)); color: var(--na-ciemnym, var(--tlo)); padding: clamp(64px, 9vw, 120px) 0 clamp(56px, 8vw, 104px); } .hero-pole.temperament-powazny .hero, .hero-pole .hero { background-image: var(--glebia-ciemny); } .hero-pole .hero::before { display: none; }
.hero-pole .hero-srodek { text-align: left; max-width: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(32px, 6vw, 96px); align-items: end; } .hero-pole .hero-srodek > .etykieta, .hero-pole .hero-srodek > h1, .hero-pole .hero-srodek > .lead, .hero-pole .hero-srodek > .cta { grid-column: 1; } .hero-pole .hero-srodek .lead { margin-inline: 0; max-width: 52ch; color: inherit; opacity: .86; } .hero-pole .hero-srodek .cta { justify-content: flex-start; }
.hero-pole .hero h1 { color: inherit; max-width: 14ch; } .hero-pole:not(.chrom-brak) .hero h1 em { color: var(--ciemny-akcent, var(--akcent-jasny)); } .hero-pole .hero .etykieta { color: var(--ciemny-akcent, var(--akcent-jasny)); } .hero-pole .hero .etykieta::after { background: var(--ciemny-akcent, var(--akcent-jasny)); }
.hero-pole .pasek-zaufania { grid-column: 2; grid-row: 1 / span 4; margin: 0; padding: 0; border: 0; display: grid; gap: 18px; align-self: end; } .hero-pole .pasek-zaufania li { text-align: left; padding: 14px 0 0; border-top: 1px solid var(--ciemny-linia, rgba(255, 255, 255, .22)); } .hero-pole .pasek-zaufania b { color: var(--ciemny-akcent, var(--akcent-jasny)); } .hero-pole .pasek-zaufania span { color: inherit; opacity: .8; }
.hero-pole .przycisk { background: var(--ciemny-akcent, var(--akcent-jasny)); color: var(--ciemny, var(--tekst)); } .hero-pole .przycisk:hover { background: var(--na-ciemnym, #fff); color: var(--ciemny, var(--tekst)); } .hero-pole .cta .link { color: var(--ciemny-akcent, var(--akcent-jasny)); }
.hero-pole .sygnet { position: absolute; right: clamp(8px, 4vw, 72px); top: 50%; translate: 0 -50%; font: 700 clamp(12rem, 30vw, 26rem)/1 var(--font-display); color: transparent; -webkit-text-stroke: 1px var(--ciemny-linia, rgba(255, 255, 255, .3)); opacity: .6; letter-spacing: -.04em; pointer-events: none; user-select: none; z-index: 0; } .hero-pole .hero-srodek { position: relative; z-index: 1; }
@media (max-width: 900px) { .hero-pole .hero-srodek { grid-template-columns: 1fr; } .hero-pole .pasek-zaufania { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; gap: 0; } .hero-pole .pasek-zaufania li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 12px; padding: 10px 0; } .hero-pole .pasek-zaufania b { font-size: 1.25rem; } .hero-pole .sygnet { display: none; } }
body.hero-blok .hero { padding-block: 0; } .hero-blok .hero::before { display: none; } .hero-blok .hero-siatka { grid-template-columns: 6fr 6fr; gap: 0; align-items: stretch; } .hero-blok .hero-siatka > .hero-tekst { transform: none; }
.hero-blok .hero-blok-tekst { position: relative; background: var(--akcent); color: var(--na-akcencie); padding: clamp(56px, 8vw, 104px) clamp(28px, 5vw, 64px) clamp(56px, 8vw, 104px) 0; isolation: isolate; } .hero-blok .hero-blok-tekst::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: -50vw; background: var(--akcent); z-index: -1; }
.hero-blok .hero-blok-tekst h1, .hero-blok .hero-blok-tekst .lead, .hero-blok .hero-blok-tekst .etykieta { color: var(--na-akcencie); } .hero-blok .hero-blok-tekst h1 em { color: var(--akcent-em, var(--duo-tlo)); } .hero-blok .hero-blok-tekst .lead { opacity: .9; } .hero-blok .hero-blok-tekst .etykieta::after { background: var(--na-akcencie); }
.hero-blok .hero-blok-tekst .przycisk { background: var(--na-akcencie); color: var(--akcent); } .hero-blok .hero-blok-tekst .przycisk:hover { background: var(--tlo); } .hero-blok .hero-blok-tekst .link { color: var(--na-akcencie); text-decoration: underline; text-underline-offset: 4px; }
.hero-blok .hero-blok-wizual { margin: clamp(40px, 6vw, 80px) 0 clamp(40px, 6vw, 80px) -8%; z-index: 1; align-self: center; } .hero-blok .hero-blok-wizual .ramka-obrazu { aspect-ratio: 5 / 4; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .45); } .hero-blok .hero-blok-wizual::before { display: none; } .hero-blok .karta-plywajaca { left: auto; right: -16px; bottom: -22px; }
@media (max-width: 900px) { .hero-blok .hero-blok-tekst { padding-right: 0; } .hero-blok .hero-blok-tekst::before { left: -20px; right: -20px; } .hero-blok .hero-blok-wizual { margin: -24px 0 0; padding-bottom: 40px; } .hero-blok .karta-plywajaca { right: 12px; bottom: 12px; } }
.hero-afisz { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 0 clamp(16px, 3vw, 40px); align-items: start; animation: wjazdG .8s var(--plynnie) .05s backwards; transform: translateY(calc(var(--par, 0) * 0.1px)); }
.hero-afisz .etykieta-pion { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; align-self: end; white-space: nowrap; height: max-content; } .hero-afisz .etykieta-pion::after { display: none; }
.hero-afisz h1 { font-size: clamp(calc(2.6rem * var(--skala, 1)), calc(7.4vw * var(--skala, 1)), calc(6.8rem * var(--skala, 1))); line-height: .96; letter-spacing: -.035em; max-width: 13ch; min-width: 0; overflow-wrap: anywhere; hyphens: auto; } .hero-afisz > *, .hero-afisz .hero-plakat-tresc > * { min-width: 0; }
.hero-afisz .hero-plakat-tresc { display: grid; grid-template-columns: 1fr minmax(260px, 30%); gap: clamp(24px, 4vw, 56px); align-items: end; } .hero-afisz .hero-plakat-bok .lead { margin-top: 0; font-size: clamp(1.02rem, 1.3vw, 1.18rem); } .hero-afisz .hero-plakat-bok .cta { margin-top: 20px; }
.hero-afisz .pasek-plakat { grid-column: 1 / -1; width: 100%; margin-inline: 0; margin-top: clamp(36px, 5vw, 64px); justify-content: space-between; border-top: 2px solid var(--tekst); border-bottom: 1px solid var(--linia); padding: 22px 0; } .hero-afisz .pasek-plakat li { text-align: left; } .hero-afisz .pasek-plakat b { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
@media (max-width: 900px) { .hero-afisz { grid-template-columns: 1fr; } .hero-afisz .etykieta-pion { writing-mode: horizontal-tb; transform: none; align-self: start; white-space: normal; height: auto; } .hero-afisz .hero-plakat-tresc { grid-template-columns: 1fr; } .hero-afisz h1 { max-width: none; } .hero-afisz .pasek-plakat { justify-content: flex-start; gap: 16px 32px; } }
.hero-typo { position: relative; animation: wjazdG .8s var(--plynnie) .05s backwards; transform: translateY(calc(var(--par, 0) * 0.1px)); }
.hero-typo .hero-typo-gora { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 40px); } .hero-typo .pasek-typo { margin: 0; padding: 0; border: 0; justify-content: flex-start; gap: 8px 28px; } .hero-typo .pasek-typo li { text-align: left; } .hero-typo .pasek-typo b { font-size: 1.3rem; }
.hero-typo h1 { font-size: clamp(calc(2.8rem * var(--skala, 1)), calc(9.4vw * var(--skala, 1)), calc(9rem * var(--skala, 1))); line-height: .93; letter-spacing: -.04em; max-width: none; text-wrap: balance; min-width: 0; overflow-wrap: anywhere; hyphens: auto; } .hero-typo h1 em { color: transparent; -webkit-text-stroke: .035em var(--akcent); paint-order: stroke fill; }
.hero-typo .hero-typo-dol { display: grid; grid-template-columns: minmax(0, 54ch) auto; justify-content: space-between; align-items: center; gap: 20px 48px; margin-top: clamp(24px, 4vw, 48px); border-top: 1px solid var(--linia); padding-top: clamp(20px, 3vw, 32px); } .hero-typo .lead { margin-top: 0; } .hero-typo .cta { margin-top: 0; }
@media (max-width: 900px) { .hero-typo .hero-typo-dol { grid-template-columns: 1fr; } .hero-typo h1 { font-size: clamp(2.5rem, 12.5vw, 4.8rem); } .hero-typo h1 em { -webkit-text-stroke-width: .03em; } }
.hero-okno .hero-okno-wizual { position: relative; padding: 7% 9% 0; } .hero-okno .hero-wizual::before { display: none; } .hero-okno .okno-luk { display: block; aspect-ratio: 4 / 5; max-height: 600px; border-radius: 50% 50% var(--promien) var(--promien) / 42% 42% var(--promien) var(--promien); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .35); }
.hero-okno .okno-pierscien { position: absolute; left: 0; right: 0; top: -1%; aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed var(--akcent); opacity: .55; animation: oknoObrot 48s linear infinite; pointer-events: none; } .hero-okno .okno-pierscien::after { content: ""; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--duo); translate: -50% 0; } @keyframes oknoObrot { to { rotate: 360deg; } }
.hero-okno .karta-plywajaca { left: -4%; bottom: 10%; } @media (max-width: 900px) { .hero-okno .hero-okno-wizual { padding: 8% 6% 0; } .hero-okno .karta-plywajaca { left: 12px; } }
.hero-pasy { grid-template-columns: 6fr 6fr; align-items: stretch; gap: clamp(24px, 4vw, 56px); } .hero-pasy .hero-tekst { padding: clamp(40px, 6vw, 80px) 0; align-self: center; }
.hero-pasy .hero-pasy-wizual { position: relative; margin: 0; padding: clamp(32px, 5vw, 64px) 0 clamp(32px, 5vw, 64px) clamp(36px, 7vw, 96px); isolation: isolate; align-self: center; } .hero-pasy .hero-wizual::before { display: none; }
.hero-pasy .hero-pasy-wizual::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -50vw; background: color-mix(in oklab, var(--duo) 26%, var(--tlo)); clip-path: polygon(84px 0, 100% 0, 100% 100%, 0 100%); z-index: -1; }
.hero-pasy .pasy-krawedz { position: absolute; top: 0; bottom: 0; left: 0; width: 110px; clip-path: polygon(84px 0, 96px 0, 12px 100%, 0 100%); overflow: hidden; pointer-events: none; z-index: 0; } .hero-pasy .pasy-krawedz > i { position: absolute; left: 0; right: 0; top: -22px; bottom: 0; background: repeating-linear-gradient(0deg, var(--duo) 0 4px, transparent 4px 22px); opacity: .6; animation: pasyKrawedz 1.6s linear infinite; } @keyframes pasyKrawedz { to { translate: 0 22px; } }
.hero-pasy .ramka-obrazu { display: block; aspect-ratio: 5 / 4; max-height: 520px; border-radius: var(--promien); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .35); position: relative; z-index: 1; } .hero-pasy .karta-plywajaca { left: 8%; bottom: 8%; z-index: 2; }
@media (max-width: 900px) { .hero-pasy { grid-template-columns: 1fr; gap: 8px; } .hero-pasy .hero-tekst { padding: 0 0 24px; } .hero-pasy .hero-pasy-wizual { padding: 28px 0 36px 20px; } .hero-pasy .hero-pasy-wizual::before { left: -20px; right: -20px; clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%); } .hero-pasy .pasy-krawedz { display: none; } .hero-pasy .karta-plywajaca { left: 12px; } }
.hero-kolaz .hero-kolaz-wizual { position: relative; aspect-ratio: 5 / 4; max-height: 560px; margin: 0; } .hero-kolaz .hero-wizual::before { display: none; } .hero-kolaz .kolaz-karta { position: absolute; display: block; border-radius: var(--promien); overflow: hidden; box-shadow: 0 30px 60px -28px rgb(0 0 0 / .45); background: var(--tlo-2); } .hero-kolaz .kolaz-karta img { width: 100%; height: 100%; object-fit: cover; object-position: var(--kadr, 50% 50%); display: block; }
.hero-kolaz .k1 { left: 0; top: 6%; width: 60%; aspect-ratio: 4 / 5; rotate: -5deg; z-index: 1; animation: kolazPlyw 9s ease-in-out infinite alternate; } .hero-kolaz .k2 { right: 0; top: 0; width: 48%; aspect-ratio: 1; rotate: 4deg; z-index: 2; animation: kolazPlyw 11s ease-in-out -3s infinite alternate; }
.hero-kolaz .k3 { right: 6%; bottom: 0; width: 46%; aspect-ratio: 5 / 3; rotate: -2deg; z-index: 3; background: var(--duo); background-image: var(--glebia-duo); color: var(--na-duo); display: grid; align-content: center; gap: 4px; padding: 18px 22px; animation: kolazPlyw 10s ease-in-out -6s infinite alternate; } .hero-kolaz .k3 b { font: 700 clamp(1.8rem, 3.6vw, 3rem)/1 var(--font-display); } .hero-kolaz .k3 small { font-size: .95rem; opacity: .92; } @keyframes kolazPlyw { to { translate: 0 -12px; } }
@media (max-width: 900px) { .hero-kolaz .hero-kolaz-wizual { aspect-ratio: 4 / 3; max-height: 380px; } } @media (prefers-reduced-motion: reduce) { .hero-kolaz .kolaz-karta { animation: none; } }
body.hero-dwudzielny .hero { padding: 0; } .hero-dwudzielny .hero::before { display: none; } .hero > .hero-dwudzielny { position: relative; z-index: 1; display: grid; grid-template-columns: 7fr 5fr; min-height: min(76vh, 720px); }
.hero-dwudzielny .dwudzielny-lewa { position: relative; isolation: isolate; background: var(--akcent); color: var(--na-akcencie); padding: clamp(56px, 9vw, 120px) clamp(48px, 7vw, 96px) clamp(56px, 9vw, 120px) max(24px, calc((100vw - 1180px) / 2)); clip-path: polygon(0 0, 100% 0, calc(100% - clamp(40px, 6vw, 90px)) 100%, 0 100%); display: grid; align-content: center; animation: wjazdL .8s var(--plynnie) .05s backwards; } .hero-dwudzielny .dwudzielny-lewa::after { content: ""; position: absolute; inset: 0; background: var(--glebia-akcent); z-index: -1; }
.hero-dwudzielny .dwudzielny-lewa h1, .hero-dwudzielny .dwudzielny-lewa .etykieta { color: var(--na-akcencie); } .hero-dwudzielny .dwudzielny-lewa .etykieta::after { background: currentColor; } .hero-dwudzielny .dwudzielny-lewa h1 { font-size: clamp(calc(2.6rem * var(--skala, 1)), calc(6vw * var(--skala, 1)), calc(5.6rem * var(--skala, 1))); max-width: 14ch; min-width: 0; overflow-wrap: anywhere; hyphens: auto; } .hero-dwudzielny .dwudzielny-lewa h1 em { color: var(--akcent-em, inherit); font-style: italic; }
.hero-dwudzielny .dwudzielny-prawa { display: grid; align-content: center; gap: 20px; padding: clamp(40px, 6vw, 80px) max(24px, calc((100vw - 1180px) / 2)) clamp(40px, 6vw, 80px) clamp(16px, 3vw, 40px); animation: wjazdP .8s var(--plynnie) .2s backwards; } .hero-dwudzielny .dwudzielny-prawa .lead { margin: 0; } .hero-dwudzielny .dwudzielny-prawa .cta { margin: 0; }
.hero-dwudzielny .pasek-dwudzielny { margin: 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--linia); justify-content: flex-start; gap: 10px 28px; } .hero-dwudzielny .pasek-dwudzielny li { text-align: left; } .hero-dwudzielny .pasek-dwudzielny b { font-size: 1.3rem; } .hero-dwudzielny .dwudzielny-obraz { display: block; aspect-ratio: 16 / 9; max-height: 220px; border-radius: var(--promien); box-shadow: 0 24px 48px -28px rgb(0 0 0 / .4); }
@media (max-width: 900px) { .hero > .hero-dwudzielny { grid-template-columns: 1fr; min-height: 0; } .hero-dwudzielny .dwudzielny-lewa { padding: 48px 20px 56px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%); } .hero-dwudzielny .dwudzielny-prawa { padding: 24px 20px 40px; } }
.hero-wydanie { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(20px, 3vw, 40px) clamp(28px, 5vw, 72px); align-items: start; animation: wjazdG .8s var(--plynnie) .05s backwards; transform: translateY(calc(var(--par, 0) * 0.1px)); } .hero-wydanie.bez-obrazu { grid-template-columns: 1fr; }
.hero-wydanie .magazyn-gora { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 3px solid var(--tekst); border-bottom: 1px solid var(--linia); padding: 12px 0; } .hero-wydanie .magazyn-gora .etykieta { margin: 0; } .hero-wydanie .magazyn-gora .etykieta::after { display: none; } .hero-wydanie .magazyn-nr { font: 400 .85rem var(--font-tekst); letter-spacing: .18em; text-transform: uppercase; color: var(--tekst-2); white-space: nowrap; } :is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) :is(.magazyn-nr, .magazyn-obraz figcaption, .hero .mini, .hero .lead small) { color: inherit; opacity: .82; } :is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) .magazyn-obraz figcaption { border-left-color: var(--hero-akc); }
.hero-wydanie h1 { grid-column: 1; font-size: clamp(calc(2.8rem * var(--skala, 1)), calc(7.2vw * var(--skala, 1)), calc(6.6rem * var(--skala, 1))); line-height: .98; letter-spacing: -.03em; max-width: 14ch; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.hero-wydanie .magazyn-obraz { grid-column: 2; grid-row: 2 / span 2; margin: 0; } .hero-wydanie .magazyn-obraz .ramka-obrazu { display: block; aspect-ratio: 3 / 4; border-radius: 3px; box-shadow: 0 24px 48px -30px rgb(0 0 0 / .4); } .hero-wydanie .magazyn-obraz figcaption { font: 400 .82rem/1.4 var(--font-tekst); color: var(--tekst-2); margin-top: 10px; border-left: 2px solid var(--akcent-h1, var(--akcent)); padding-left: 10px; }
.hero-wydanie .magazyn-dol { grid-column: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); gap: 24px 40px; align-items: start; border-top: 1px solid var(--linia); padding-top: clamp(20px, 3vw, 32px); } .hero-wydanie .magazyn-lead { margin: 0; max-width: none; font-size: clamp(1.02rem, 1.3vw, 1.18rem); } .hero-wydanie .magazyn-lead.dwa-lamy { columns: 2; column-gap: 32px; column-rule: 1px solid var(--linia); } .hero-wydanie .magazyn-lead::first-letter { font: 700 3.2em/.82 var(--font-display); float: left; margin: .05em .12em 0 0; color: var(--akcent-h1, var(--akcent)); }
.hero-wydanie .magazyn-bok { display: grid; gap: 18px; } .hero-wydanie .magazyn-bok .cta { margin: 0; } .hero-wydanie .pasek-magazyn { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: 1fr; gap: 8px; } .hero-wydanie .pasek-magazyn li { display: flex; gap: 10px; align-items: baseline; border-bottom: 1px solid var(--linia); padding-bottom: 8px; text-align: left; } .hero-wydanie .pasek-magazyn b { font-size: 1.2rem; }
@media (max-width: 900px) { .hero-wydanie { grid-template-columns: 1fr; } .hero-wydanie .magazyn-obraz { grid-column: 1; grid-row: auto; } .hero-wydanie .magazyn-obraz .ramka-obrazu { aspect-ratio: 4 / 3; } .hero-wydanie h1 { max-width: none; font-size: clamp(2.4rem, 11vw, 4.2rem); } .hero-wydanie .magazyn-dol { grid-template-columns: 1fr; } .hero-wydanie .magazyn-lead, .hero-wydanie .magazyn-lead.dwa-lamy { columns: 1; } }
.mozaika { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(150px, auto); grid-auto-flow: dense; gap: 16px; } .moz { position: relative; overflow: hidden; isolation: isolate; background: var(--tlo); border: 1px solid var(--linia); border-radius: var(--promien); padding: 28px; display: grid; gap: 10px; align-content: end; transition: transform .35s var(--plynnie), box-shadow .35s; } .moz p { margin: 0; color: var(--tekst-2); }
.moz::after { content: attr(data-nr); position: absolute; right: 12px; top: -16px; font: 800 clamp(5rem, 9vw, 8rem)/1 var(--font-display); letter-spacing: -.04em; color: var(--k-tekst, var(--akcent)); opacity: .09; z-index: -1; pointer-events: none; } .moz:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgb(0 0 0 / .35); } .moz.m-wysoka { grid-row: span 2; } .moz.m-szeroka { grid-column: span 2; }
@media (max-width: 900px) { .mozaika { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .mozaika { grid-template-columns: 1fr; } .moz.m-wysoka, .moz.m-szeroka { grid-row: auto; grid-column: auto; } }
.os-zygzak { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 20px 0; } .os-zygzak::before { top: 0; bottom: 0; left: 50%; right: auto; width: 2px; height: auto; translate: -50% 0; } .os-zygzak li { padding: 22px 26px; background: var(--tlo-2); border-radius: var(--promien); } .os-zygzak li:nth-child(odd) { grid-column: 1; text-align: right; } .os-zygzak li:nth-child(even) { grid-column: 3; } .os-zygzak li::before { top: 22px; left: auto; } .os-zygzak li:nth-child(odd)::before { right: -44px; } .os-zygzak li:nth-child(even)::before { left: -44px; } .sekcja.mocna .os-zygzak li { background: rgb(255 255 255 / .09); }
@media (max-width: 700px) { .os-zygzak { grid-template-columns: 1fr; padding-left: 44px; } .os-zygzak::before { left: 15px; translate: 0; } .os-zygzak li, .os-zygzak li:nth-child(odd), .os-zygzak li:nth-child(even) { grid-column: 1; text-align: left; } .os-zygzak li:nth-child(odd)::before, .os-zygzak li:nth-child(even)::before { left: -44px; right: auto; } }
.rytm-magazynowy .sekcja { padding-block: clamp(80px, 11vw, 150px); } .rytm-magazynowy main { counter-reset: sekcja; } .rytm-magazynowy main > .sekcja { counter-increment: sekcja; } .rytm-magazynowy .naglowek-sekcji { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px 48px; align-items: end; border-top: 2px solid var(--tekst); padding-top: 18px; margin-bottom: clamp(40px, 6vw, 72px); max-width: none; } .rytm-magazynowy .naglowek-sekcji .etykieta { grid-column: 1 / -1; } .rytm-magazynowy .naglowek-sekcji .etykieta::before { content: counter(sekcja, decimal-leading-zero) "  "; font-variant-numeric: tabular-nums; opacity: .7; } .rytm-magazynowy .naglowek-sekcji h2 { grid-column: 1; margin: 0; } .rytm-magazynowy .naglowek-sekcji p { grid-column: 2; margin: 0; max-width: 48ch; }
.rytm-magazynowy .cytaty blockquote { background: transparent; border: 0; border-top: 2px solid var(--akcent-h1, var(--akcent)); border-radius: 0; padding: 20px 0 0; } .rytm-magazynowy .cytaty blockquote p { font: italic 400 clamp(1.25rem, 1.9vw, 1.6rem)/1.4 var(--font-display); } .rytm-magazynowy .sekcja.mocna .naglowek-sekcji { border-top-color: currentColor; } @media (max-width: 900px) { .rytm-magazynowy .naglowek-sekcji { grid-template-columns: 1fr; } .rytm-magazynowy .naglowek-sekcji p { grid-column: 1; } }
.gwarancja { display: flex; align-items: center; gap: 10px; margin: 28px auto 0; max-width: 62ch; padding: 14px 18px; border: 1px dashed var(--linia); border-radius: var(--promien); color: var(--tekst-2); font-size: .98rem; } .gwarancja .ikona { color: var(--akcent-h1, var(--akcent)); flex: none; margin: 0; }
.chrom-zdanie :where(.etykieta) { text-transform: none; letter-spacing: 0; font: 500 .95rem/1.3 var(--font-tekst); color: var(--tekst-2); } .chrom-zdanie :where(.etykieta)::after { width: 22px; height: 1px; opacity: .6; } .chrom-zdanie h1 em { color: inherit; font-style: italic; font-weight: inherit; } .chrom-zdanie :where(.hero-tekst .etykieta, .hero-srodek .etykieta, .hero-wydanie .etykieta, .hero-typo .etykieta) { color: var(--akcent-tekst, var(--akcent)); }
.chrom-zdanie .pasek-zaufania span, .chrom-brak .pasek-zaufania span { text-transform: none; letter-spacing: 0; font-size: .92rem; } .temperament-powazny .hero { background-image: none; }
.chrom-brak .naglowek-sekcji .etykieta, .chrom-brak .wycena .etykieta, .chrom-brak .kontakt-siatka .etykieta, .chrom-brak .o-nas-siatka .etykieta, .chrom-brak .pakiet .etykieta { display: none; } .chrom-brak .naglowek-sekcji { margin-bottom: clamp(24px, 4vw, 44px); } .chrom-brak h1 em { color: inherit; font-style: inherit; } .chrom-brak :where(.etykieta) { text-transform: none; letter-spacing: 0; font: 500 .95rem/1.3 var(--font-tekst); color: var(--tekst-2); } .chrom-brak :where(.etykieta)::after { display: none; } .chrom-brak :where(.hero-tekst .etykieta, .hero-srodek .etykieta, .hero-wydanie .etykieta, .hero-typo .etykieta) { color: var(--akcent-tekst, var(--akcent)); } .chrom-brak .pakiet.polecany { --polecany-etykieta: var(--ciemny-akcent); } .chrom-brak .pakiet.polecany .etykieta { display: inline-block; font-size: .8rem; }
.bez-numerow .lista-num .nr { display: none; } .bez-numerow .lista-num li { grid-template-columns: 1fr; } .bez-numerow .lista-num .ikona.mala { width: 28px; height: 28px; vertical-align: -7px; } .bez-numerow .moz::after { display: none; } .bez-numerow .naglowek-sekcji .etykieta::before, .bez-numerow .naglowek-sekcji::before, .bez-numerow #faq summary::before { content: none !important; } .bez-numerow #faq summary { padding-left: 0; }
.ruch-tryb-cichy .reveal, .ruch-tryb-cichy .naglowek-sekcji.reveal > p, .ruch-tryb-cichy .reveal .ikona, .ruch-tryb-cichy .lista-num li.reveal .nr, .ruch-tryb-cichy .liczby.reveal li { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; clip-path: none !important; } .ruch-tryb-cichy .ramka-obrazu::after { display: none; } .ruch-tryb-cichy .reveal .ikona :is(path, circle, rect, polygon, polyline, line) { stroke-dashoffset: 0 !important; animation: none !important; } .ruch-tryb-cichy .os::before { transform: none !important; }
.wielobarwna { --mocna-tlo: var(--ciemny); --mocna-napis: var(--na-ciemnym); --polecany-etykieta: var(--ciemny-akcent); --menu-przycisk-tlo: var(--duo); --menu-przycisk-napis: var(--na-duo); --k1: var(--akcent); --k2: var(--duo); --k3: var(--trio); --k4: var(--kwarto); --k1-tlo: var(--akcent-tlo); --k2-tlo: var(--duo-tlo); --k3-tlo: var(--trio-tlo); --k4-tlo: var(--kwarto-tlo); --k1-tekst: var(--akcent-tekst); --k2-tekst: var(--duo-tekst); --k3-tekst: var(--trio-tekst); --k4-tekst: var(--kwarto-tekst); --na-k1: var(--na-akcencie); --na-k2: var(--na-duo); --na-k3: var(--na-trio); --na-k4: var(--na-kwarto); }
.wielobarwna :where(.bento-karta, .kafelek, .moz, .os-zygzak li, .lista-num li, .liczby li, .os li, .pakiet, .faq details, .cytaty blockquote):nth-child(4n+1) { --k: var(--k1); --k-tlo: var(--k1-tlo); --k-tekst: var(--k1-tekst); --na-k: var(--na-k1); }
.wielobarwna :where(.bento-karta, .kafelek, .moz, .os-zygzak li, .lista-num li, .liczby li, .os li, .pakiet, .faq details, .cytaty blockquote):nth-child(4n+2) { --k: var(--k2); --k-tlo: var(--k2-tlo); --k-tekst: var(--k2-tekst); --na-k: var(--na-k2); }
.wielobarwna :where(.bento-karta, .kafelek, .moz, .os-zygzak li, .lista-num li, .liczby li, .os li, .pakiet, .faq details, .cytaty blockquote):nth-child(4n+3) { --k: var(--k3); --k-tlo: var(--k3-tlo); --k-tekst: var(--k3-tekst); --na-k: var(--na-k3); }
.wielobarwna :where(.bento-karta, .kafelek, .moz, .os-zygzak li, .lista-num li, .liczby li, .os li, .pakiet, .faq details, .cytaty blockquote):nth-child(4n+4) { --k: var(--k4); --k-tlo: var(--k4-tlo); --k-tekst: var(--k4-tekst); --na-k: var(--na-k4); }
.wielobarwna :where(.bento-karta, .kafelek) { border-top: 6px solid var(--k); background: var(--k-tlo); border-color: transparent; border-top-color: var(--k); } .wielobarwna :where(.bento-karta .ikona, .kafelek .ikona, .moz .ikona, .lista-num .ikona) { color: var(--k-tekst); } .wielobarwna :where(.moz) { background: var(--k-tlo); border-color: transparent; border-top: 6px solid var(--k); } .wielobarwna :where(.os-zygzak li) { background: var(--k-tlo); } .wielobarwna :where(.bento-karta.duza) { --duza-tlo: var(--k); --duza-glebia: none; --na-duza: var(--na-k); border-top-color: transparent; } .wielobarwna :where(.bento-karta.duza .ikona, .bento-karta.duza .etykieta, .bento-karta.duza .link) { color: var(--na-k); } .wielobarwna :where(.bento-karta.duza .etykieta)::after { background: var(--na-k); }
.wielobarwna :where(.lista-num li) { --nr-kolor: var(--k-tekst); } .wielobarwna :where(.liczby li) { background: var(--k-tlo); border-color: transparent; } .wielobarwna .liczby li b { color: var(--k-tekst, var(--liczba)); } .wielobarwna :where(.os li)::before { background: var(--k); color: var(--na-k); box-shadow: 0 0 0 4px var(--k-tlo); }
.wielobarwna :where(.pakiet) { border-top: 6px solid var(--k); } .wielobarwna :where(.pakiet.polecany) { border-top-color: var(--ciemny-akcent); } .wielobarwna :where(.pakiet.polecany .etykieta)::after { background: var(--ciemny-akcent); }
.wielobarwna :where(.cytaty blockquote) { border-left-color: var(--k); } .wielobarwna :where(.faq details) { border-left: 4px solid var(--k); padding-left: 16px; } .wielobarwna :where(.faq summary)::after { color: var(--k-tekst); }
.wielobarwna :where(main > .sekcja) { background: var(--tlo); } .wielobarwna :where(main > .sekcja:nth-of-type(6n+2)) { background: var(--sekcja-b, var(--k2-tlo)); } .wielobarwna :where(main > .sekcja:nth-of-type(6n+4)) { background: var(--sekcja-c, var(--k4-tlo)); } .wielobarwna :where(main > .sekcja:nth-of-type(6n+6)) { background: var(--sekcja-d, var(--k3-tlo)); }
.wielobarwna :where(main > .sekcja:nth-of-type(6n+2) .naglowek-sekcji .etykieta) { color: var(--k2-tekst); } .wielobarwna :where(main > .sekcja:nth-of-type(6n+2) .naglowek-sekcji .etykieta)::after { background: var(--k2-tekst); } .wielobarwna :where(main > .sekcja:nth-of-type(6n+4) .naglowek-sekcji .etykieta) { color: var(--k4-tekst); } .wielobarwna :where(main > .sekcja:nth-of-type(6n+4) .naglowek-sekcji .etykieta)::after { background: var(--k4-tekst); } .wielobarwna :where(main > .sekcja:nth-of-type(6n+6) .naglowek-sekcji .etykieta) { color: var(--k3-tekst); } .wielobarwna :where(main > .sekcja:nth-of-type(6n+6) .naglowek-sekcji .etykieta)::after { background: var(--k3-tekst); }
.wielobarwna :where(.sekcja.mocna .os li)::before { color: var(--ciemny); box-shadow: none; }
.wielobarwna :where(.pasek-cta) { background: var(--duo); background-image: var(--glebia-duo); color: var(--na-duo); } .wielobarwna :where(.pasek-cta .przycisk) { background: var(--ciemny); color: var(--na-ciemnym); } .wielobarwna :where(.tasma) { --tasma-napis: var(--na-trio); background: var(--trio); color: var(--na-trio); border: 0; -webkit-mask-image: none; mask-image: none; } .wielobarwna :where(.tasma-tor span)::before { color: var(--na-trio); }
.wielobarwna :where(.stopka-glowna) { background: var(--ciemny); color: var(--na-ciemnym); } .wielobarwna :where(.stopka-glowna a) { color: var(--na-ciemnym); } .wielobarwna :where(.stopka-glowna .mini, .stopka-glowna .polityka summary) { color: var(--na-ciemnym); opacity: .82; }
.wielobarwna :where(.karta-plywajaca) { border-top: 5px solid var(--k3); }
.wielobarwna :where(.formularz) { border-top: 6px solid var(--k2); } .wielobarwna :where(.wyslij) { background: var(--ciemny); color: var(--na-ciemnym); }
.rytm-luzny .sekcja { padding-block: clamp(88px, 12vw, 168px); } .rytm-luzny .naglowek-sekcji { margin-bottom: clamp(40px, 6vw, 80px); } .rytm-luzny .naglowek-sekcji p, .rytm-luzny .lead { max-width: 50ch; } .rytm-luzny .hero { padding-block: clamp(56px, 7vw, 96px) clamp(72px, 10vw, 140px); }
@media (min-width: 901px) { .rytm-asymetryczny main > .sekcja:nth-of-type(even) .naglowek-sekcji { margin-left: auto; text-align: right; } .rytm-asymetryczny main > .sekcja:nth-of-type(even) .naglowek-sekcji .etykieta::after { margin-left: auto; transform-origin: right; } .rytm-asymetryczny main > .sekcja:nth-of-type(odd) .naglowek-sekcji { padding-left: clamp(0px, 6vw, 96px); } .rytm-asymetryczny main > .sekcja:nth-of-type(even) .cytaty blockquote:nth-child(2) { translate: 0 -24px; } }
.sekcja.mocna { background: var(--mocna-tlo, var(--akcent-2)); color: var(--mocna-napis, var(--na-akcencie)); position: relative; overflow: hidden; } .sekcja.mocna h2, .sekcja.mocna h3, .sekcja.mocna p, .sekcja.mocna .os span, .sekcja.mocna .cytaty footer, .sekcja.mocna .naglowek-sekcji p { color: inherit; } .sekcja.mocna .etykieta { color: var(--mocna-napis, var(--na-akcencie)); opacity: .85; } .sekcja.mocna .etykieta::after { background: var(--mocna-napis, var(--na-akcencie)); }
.sekcja.mocna .os::before { background: rgb(255 255 255 / .28); } .sekcja.mocna .os li::before { background: var(--na-akcencie); color: var(--akcent-2); } .sekcja.mocna .os span { opacity: .82; } .sekcja.mocna .os li { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .22); color: inherit; }
.sekcja.mocna .cytaty blockquote { background: rgb(255 255 255 / .09); border-left-color: var(--ciemny-akcent, var(--duo-tlo)); color: inherit; } .sekcja.mocna .cytaty blockquote::before { display: none; } .sekcja.mocna .cytaty footer { opacity: .8; }
.sekcja.mocna::after { content: ""; position: absolute; right: -10%; top: -30%; width: min(48vw, 560px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / .14), transparent 70%); pointer-events: none; translate: 0 calc(var(--par, 0) * 0.06px); }
.sekcja.pole { background: var(--pole-tlo); color: var(--pole-napis); position: relative; } .sekcja.pole-tint { --pole-tlo: var(--akcent-tlo); --pole-napis: var(--tekst); } .sekcja.pole-akcent { --pole-tlo: var(--akcent-pole, var(--akcent)); --pole-napis: var(--na-akcencie-pole, var(--na-akcencie)); } .sekcja.pole-duo { --pole-tlo: var(--duo-pole, var(--duo)); --pole-napis: var(--na-duo-pole, var(--na-duo)); } .sekcja.pole-trio { --pole-tlo: var(--trio-pole, var(--trio)); --pole-napis: var(--na-trio-pole, var(--na-trio)); } .sekcja.pole-kwarto { --pole-tlo: var(--kwarto-pole, var(--kwarto)); --pole-napis: var(--na-kwarto-pole, var(--na-kwarto)); } .sekcja.pole-ciemny { --pole-tlo: var(--mocna-tlo, var(--akcent-2)); --pole-napis: var(--mocna-napis, var(--na-akcencie)); }
.ruch-twardy .sekcja.pole:not(.pole-tint) .etykieta { background: var(--pole-napis); color: var(--pole-tlo); } .sekcja.pole:not(.pole-tint) b, .sekcja.pole:not(.pole-tint) strong, .sekcja.pole:not(.pole-tint) .os b, .sekcja.pole:not(.pole-tint) h2, .sekcja.pole:not(.pole-tint) h3, .sekcja.pole:not(.pole-tint) p, .sekcja.pole:not(.pole-tint) .naglowek-sekcji p, .sekcja.pole:not(.pole-tint) .os span, .sekcja.pole:not(.pole-tint) .cytaty footer { color: inherit; } .sekcja.pole:not(.pole-tint) .etykieta { color: var(--pole-napis); opacity: 1; } .sekcja.pole:not(.pole-tint) .etykieta::after { background: var(--pole-napis); } .sekcja.pole:not(.pole-tint) h2 em, .sekcja.pole:not(.pole-tint) .naglowek-sekcji h2 em { color: inherit; }
.sekcja.pole:not(.pole-tint):not(.pole-ciemny) .os li::before { background: var(--pole-napis); color: var(--pole-tlo); } .sekcja.pole:not(.pole-tint):not(.pole-ciemny) .os::before { background: color-mix(in oklab, var(--pole-napis) 35%, transparent); } .sekcja.pole:not(.pole-tint):not(.pole-ciemny) .os li { color: inherit; } .sekcja.pole:not(.pole-tint):not(.pole-ciemny) .os-zygzak li { background: color-mix(in oklab, var(--pole-napis) 12%, transparent); }
.sekcja.pole:not(.pole-tint):not(.pole-ciemny) .cytaty blockquote { background: color-mix(in oklab, var(--pole-napis) 10%, transparent); border-left-color: var(--pole-napis); color: inherit; } .sekcja.pole:not(.pole-tint):not(.pole-ciemny) .cytaty blockquote::before { color: var(--pole-napis); opacity: .35; }
.sekcja.pole:not(.pole-tint):not(.pole-ciemny) .przycisk:not(.drugi) { background: var(--pole-napis); color: var(--pole-tlo); } .sekcja.pole:not(.pole-tint):not(.pole-ciemny) .przycisk.drugi { border-color: var(--pole-napis); color: inherit; } .sekcja.pole:not(.pole-tint):not(.pole-ciemny) .link { color: inherit; } .sekcja.pole:not(.pole-tint):not(.pole-ciemny) details { color: var(--tekst); }
.sekcja.pole .bento-karta:not(.duza), .sekcja.pole .kafelek, .sekcja.pole .moz, .sekcja.pole .pakiet:not(.polecany), .sekcja.pole .liczby li, .sekcja.pole .karta-plywajaca { color: var(--tekst); background-color: var(--tlo); } .sekcja.pole .pakiet:not(.polecany) h3, .sekcja.pole .pakiet:not(.polecany) p, .sekcja.pole .pakiet:not(.polecany) li, .sekcja.pole .bento-karta:not(.duza) h3, .sekcja.pole .bento-karta:not(.duza) p, .sekcja.pole .kafelek h3, .sekcja.pole .kafelek p, .sekcja.pole .liczby li b, .sekcja.pole .liczby li span { color: inherit; } .sekcja.pole .liczby li b { color: var(--k-tekst, var(--liczba, var(--akcent-h1))); }
.sekcja.pole-ciemny .pakiet.polecany { background: var(--tlo); color: var(--tekst); outline: 3px solid var(--ciemny-akcent, var(--akcent)); outline-offset: -3px; } .sekcja.pole-ciemny .pakiet.polecany h3, .sekcja.pole-ciemny .pakiet.polecany p, .sekcja.pole-ciemny .pakiet.polecany li, .sekcja.pole-ciemny .pakiet.polecany .cena { color: inherit; } .sekcja.pole-ciemny .pakiet.polecany .etykieta { color: var(--akcent-tekst, var(--akcent)); } .sekcja.pole-ciemny .pakiet.polecany .etykieta::after { background: var(--akcent-tekst, var(--akcent)); }
.sekcja.pole .pakiet:not(.polecany) .przycisk.drugi { border-color: var(--akcent); color: var(--akcent-tekst, var(--akcent)); background: transparent; } .sekcja.pole .pakiet:not(.polecany) .etykieta { color: var(--akcent-tekst, var(--akcent)); }
.sekcja.pole:not(.pole-tint):not(.pole-ciemny) details { border-color: color-mix(in oklab, var(--pole-napis) 30%, transparent); background: transparent; } .sekcja.pole:not(.pole-tint):not(.pole-ciemny) summary, .sekcja.pole:not(.pole-tint):not(.pole-ciemny) details p { color: inherit; } .sekcja.pole:not(.pole-tint):not(.pole-ciemny) .lista-num li { border-color: color-mix(in oklab, var(--pole-napis) 28%, transparent); color: inherit; } .sekcja.pole:not(.pole-tint):not(.pole-ciemny) .lista-num .nr { color: var(--pole-napis); opacity: .7; }
.sekcja.pole:not(.pole-ciemny)::after { content: ""; position: absolute; left: -12%; bottom: -34%; width: min(52vw, 620px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--pole-napis) 16%, transparent), transparent 70%); pointer-events: none; translate: 0 calc(var(--par, 0) * -0.05px); } .sekcja.pole { overflow: hidden; isolation: isolate; } .sekcja.pole > .wnetrze { position: relative; z-index: 1; }
.hero-tlo-mgla .hero { background-image: var(--mgla-mocna); background-size: 100% 100%; } .hero-tlo-tint .hero { background-color: var(--akcent-tlo); background-image: var(--mgla); }
.hero-tlo-wash .hero { background-image: var(--wash); background-size: 100% 100%; } .hero-tlo-wash .hero::before { opacity: .5; }
.hero-tlo-ciemny .hero, .hero-tlo-akcent .hero, .hero-tlo-duo .hero { color: var(--hero-napis); background-image: none; } .hero-tlo-ciemny .hero { --hero-napis: var(--na-ciemnym); --hero-akc: var(--ciemny-akcent, var(--akcent-jasny)); background-color: var(--ciemny); background-image: var(--glebia-ciemny); } .hero-tlo-akcent .hero { --hero-napis: var(--na-akcencie-pole, var(--na-akcencie)); --hero-akc: var(--akcent-em); background-color: var(--akcent-pole, var(--akcent)); } .hero-tlo-duo .hero { --hero-napis: var(--na-duo-pole, var(--na-duo)); --hero-akc: color-mix(in oklab, var(--na-duo-pole, var(--na-duo)) 85%, var(--duo-pole, var(--duo))); background-color: var(--duo-pole, var(--duo)); }
:is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) .hero .etykieta { background: transparent !important; color: var(--hero-akc) !important; padding: 0 !important; }
:is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) .hero :is(h1, .lead, .hero-tekst .lead, .hero-srodek .lead) { color: inherit; } :is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) .hero .lead { opacity: .88; } :is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) .hero h1 em { color: var(--hero-napis); text-decoration: underline; text-decoration-color: var(--hero-akc); text-decoration-thickness: .075em; text-underline-offset: .14em; }   /* 22.09: slowo w h1 na polu koloru bierze kolor NAPISU (zawsze czytelny), a barwa akcentu idzie w podkreslenie */ /* 23.09 (warsztat admina): tryb kinetyczny tnie slowa na inline-block (.slowo > span), a text-decoration NIE schodzi do inline-block - kreska zostawala tylko pod SPACJA miedzy slowami (szary ogryzek pod h1); podkreslenie idzie na kazde slowo */ body.kinetyczny:is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) .hero h1 em { text-decoration: none; } body.kinetyczny:is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) .hero h1 em .slowo > span { text-decoration: underline; text-decoration-color: var(--hero-akc); text-decoration-thickness: .075em; text-underline-offset: .14em; text-decoration-skip-ink: auto; } :is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) .hero .etykieta::after { background: var(--hero-akc); }
:is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) .hero .przycisk:not(.drugi) { background: var(--hero-napis); color: var(--hero-tlo-kolor, var(--tekst)); } .hero-tlo-ciemny .hero .przycisk:not(.drugi) { color: var(--ciemny); } .hero-tlo-akcent .hero .przycisk:not(.drugi) { color: var(--akcent); } .hero-tlo-duo .hero .przycisk:not(.drugi) { color: var(--duo); } :is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) .hero .cta .link { color: var(--hero-akc); } :is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) .hero .pasek-zaufania { border-color: color-mix(in oklab, var(--hero-napis) 25%, transparent); } :is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) .hero .pasek-zaufania b { color: var(--hero-akc); } :is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) .hero .pasek-zaufania span { color: inherit; opacity: .8; }
:is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) .hero .karta-zaufania, :is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) .hero .karta-plywajaca, :is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) .hero .kolaz-karta { color: var(--tekst); } :is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) .hero .dekor { opacity: .5; } :is(.hero-tlo-ciemny, .hero-tlo-akcent, .hero-tlo-duo) .hero::before { opacity: .35; }
.sekcja-manifest { padding: clamp(72px, 10vw, 140px) 0; } .manifest { margin: 0; font: var(--waga-display) clamp(2.1rem, 6.4vw, 6.2rem)/1.06 var(--font-display); letter-spacing: var(--display-odstep); text-wrap: balance; max-width: 22ch; } .manifest em { font-style: italic; color: var(--pole-napis, var(--akcent-h1)); opacity: .85; } .sekcja.pole-tint .manifest em, .sekcja.tlo-2 .manifest em { color: var(--akcent-h1); opacity: 1; } .manifest-podpis { display: block; margin-top: 22px; font: 500 .95rem/1.4 var(--font-tekst); opacity: .8; }
.liczby-wielkie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px 40px; } .liczby-wielkie li { display: grid; gap: 6px; } .liczby-wielkie b { font: var(--waga-display) clamp(3.6rem, 9.5vw, 9rem)/.95 var(--font-display); letter-spacing: -.03em; color: var(--pole-napis, var(--akcent-h1)); } .sekcja:not(.pole) .liczby-wielkie b, .sekcja.pole-tint .liczby-wielkie b { color: var(--akcent-h1); } .sekcja.pole-ciemny .liczby-wielkie b { color: var(--ciemny-akcent, var(--na-ciemnym)); } .liczby-wielkie span { font: 500 1.05rem/1.4 var(--font-tekst); opacity: .85; } .sekcja-liczby { padding: clamp(56px, 8vw, 100px) 0; }
.sekcja-tasma { padding: clamp(28px, 4vw, 48px) 0; } .tasma-wielka { overflow: hidden; white-space: nowrap; } .tasma-wielka-tor { display: inline-flex; gap: clamp(28px, 4vw, 64px); padding-left: clamp(28px, 4vw, 64px); animation: tasmaWielka 42s linear infinite; will-change: transform; } .tasma-wielka span { font: var(--waga-display) clamp(3rem, 8vw, 7.5rem)/1 var(--font-display); letter-spacing: -.02em; text-transform: var(--display-wersaliki); color: var(--pole-napis, var(--tekst)); } .tasma-wielka span.kontur { color: transparent; -webkit-text-stroke: 2px var(--pole-napis, var(--tekst)); } @keyframes tasmaWielka { to { transform: translateX(-50%); } } .tasma-wielka:hover .tasma-wielka-tor { animation-play-state: paused; }
.sekcja-cytat { padding: clamp(72px, 10vw, 140px) 0; } .cytat-wielki { margin: 0; max-width: 24ch; } .cytat-wielki p { margin: 0; font: italic 400 clamp(1.7rem, 4.2vw, 3.6rem)/1.2 var(--font-display); letter-spacing: -.01em; text-wrap: balance; } .cytat-wielki footer { margin-top: 20px; font: 500 1rem/1.4 var(--font-tekst); opacity: .8; } .cytaty-reszta { margin-top: 44px; }
@media (max-width: 700px) { .manifest { max-width: none; } .liczby-wielkie { gap: 18px; } .tasma-wielka span.kontur { -webkit-text-stroke-width: 1.2px; } }
.hero-pelne .hero { padding: 0; } .hero-pelne .hero::before { display: none; }
.zdjecie-pelne { position: relative; min-height: min(92vh, 860px); display: grid; align-items: center; overflow: hidden; padding: clamp(72px, 10vw, 140px) 0; color: #fff; background: #2a2a2a; }
.zdjecie-pelne::before { content: ""; position: absolute; inset: -6%; background: var(--zdjecie) center / cover no-repeat; translate: 0 calc(var(--par, 0) * 0.18px); animation: kenburns 22s ease-out both; will-change: transform; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }
.zdjecie-pelne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.54)); }
.zdjecie-pelne > .wnetrze { position: relative; z-index: 1; } .zdjecie-pelne .lead, .zdjecie-pelne .pasek-zaufania span, .zdjecie-pelne .etykieta { color: rgba(255,255,255,.88); } .zdjecie-pelne h1 { color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,.4); } .zdjecie-pelne h1 em { color: #BEF8FD; } .zdjecie-pelne .pasek-zaufania { border-color: rgba(255,255,255,.25); } .zdjecie-pelne .link { color: #fff; } .zdjecie-pelne .pasek-zaufania b, .zdjecie-pelne .pasek-zaufania strong { color: #BEF8FD; }
.pasek-zaufania { list-style: none; margin: 44px auto 0; padding: 18px 8px; display: flex; justify-content: center; gap: 8px 40px; flex-wrap: wrap; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
.pasek-zaufania b { color: var(--akcent-2); } .pasek-zaufania span { text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; }
.pasek-zaufania li { display: grid; gap: 2px; text-align: center; } .pasek-zaufania b { font: 700 1.7rem/1 var(--font-display); } .pasek-zaufania span { color: var(--tekst-2); font-size: .92rem; }
.karta-zaufania { position: relative; border-radius: var(--promien); overflow: hidden; background-size: cover; background-position: center; min-height: 420px; display: flex; align-items: flex-end; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .35); }
.karta-zaufania-tresc { margin: 18px; background: color-mix(in oklab, var(--tlo) 92%, transparent); backdrop-filter: blur(8px); border-radius: calc(var(--promien) / 1.4); padding: 22px 24px; width: calc(100% - 36px); }
.karta-zaufania.z-zdjeciem { min-height: 460px; } .karta-zaufania.z-zdjeciem .karta-zaufania-tresc { width: auto; max-width: min(290px, 62%); margin: 16px; padding: 14px 18px; } .karta-zaufania.z-zdjeciem .karta-zaufania-tresc li { font-size: .92em; }
.karta-zaufania ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; } .karta-zaufania li { padding-left: 26px; position: relative; font-weight: 500; }
.karta-zaufania li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 3px solid var(--akcent); border-bottom: 3px solid var(--akcent); transform: rotate(-45deg); }
.kinetyczny h1 .slowo { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .18em .14em .12em; margin: 0 -.18em -.14em -.12em; } .kinetyczny h1 .slowo > span { display: inline-block; transform: translateY(110%); transition: transform .9s var(--plynnie); transition-delay: calc(var(--s) * 55ms); }
.kinetyczny h1.start .slowo > span { transform: none; }
.tasma { overflow: hidden; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); padding: 14px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tasma-tor { display: flex; gap: 48px; width: max-content; animation: tasma 28s linear infinite; } .tasma-tor span { font: 600 13px/1 var(--font-tekst); letter-spacing: .16em; text-transform: uppercase; color: var(--tasma-napis, var(--tekst-2)); white-space: nowrap; } .tasma-tor span::before { content: "·"; color: var(--akcent); margin-right: 48px; }
@keyframes tasma { to { transform: translateX(-50%); } }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(190px, auto); gap: 16px; }
.bento-karta { background: var(--tlo); border: 1px solid var(--linia); border-radius: var(--promien); padding: 30px; display: flex; flex-direction: column; gap: 10px; transition: transform .3s var(--plynnie); } .bento-karta:hover { transform: translateY(-4px); }
.bento-karta.duza { grid-column: span 2; grid-row: span 2; background: var(--duza-tlo, var(--akcent)); background-image: var(--duza-glebia, var(--glebia-akcent)); color: var(--na-duza, var(--na-akcencie)); border: 0; justify-content: flex-end; } .bento-karta.duza .etykieta, .bento-karta.duza .link, .bento-karta.duza .ikona { color: inherit; opacity: .9; } .bento-karta.duza h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.bento-karta.szeroka { grid-column: span 2; } .bento-karta p { margin: 0; }
.lista-num { list-style: none; margin: 0; padding: 0; } .lista-num li { display: grid; grid-template-columns: 76px 1fr; gap: 20px; padding: 30px 0; border-top: 1px solid var(--linia); } .lista-num li:last-child { border-bottom: 1px solid var(--linia); }
.lista-num .nr { font: 700 2.4rem/1 var(--font-display); color: var(--nr-kolor, var(--akcent)); letter-spacing: -.03em; } .lista-num h3 { margin-bottom: 6px; } .lista-num p { margin: 0; color: var(--tekst-2); }
.kafelki { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .kafelek { background: var(--tlo); border: 1px solid var(--linia); border-radius: var(--promien); padding: 32px; display: grid; gap: 10px; align-content: start; position: relative; overflow: hidden; transition: transform .3s var(--plynnie), border-color .3s; }
.kafelek::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: var(--akcent-tlo); opacity: .8; transition: transform .4s var(--plynnie); } .kafelek:hover { transform: translateY(-4px); border-color: var(--akcent); } .kafelek:hover::after { transform: scale(1.35); } .kafelek > * { position: relative; z-index: 1; } .kafelek p { margin: 0; color: var(--tekst-2); } .kafelek.szeroki { grid-column: span 2; grid-template-columns: auto 1fr; column-gap: 20px; align-items: start; } .kafelek.szeroki .ikona { grid-row: span 2; width: 40px; height: 40px; }
.o-nas-siatka { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.o-nas-siatka-pelna { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; text-align: left; }
.liczby { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .liczby li { display: grid; gap: 4px; padding: 22px 24px; background: var(--tlo); border: 1px solid var(--linia); border-radius: var(--promien); }
.liczby b { font: 700 clamp(2rem, 3.4vw, 2.8rem)/1 var(--font-display); color: var(--liczba, var(--akcent-h1, var(--akcent))); letter-spacing: -.02em; } .liczby span { color: var(--tekst-2); }
.o-nas-wizual { position: relative; margin: 0; } .o-nas-wizual::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--akcent); border-radius: var(--promien); opacity: .4; transform: translate(10px, 10px); z-index: -1; } .o-nas-wizual .ramka-obrazu { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--promien); }
.o-nas-wizual img.kadr-detal { object-position: 68% 42%; transform-origin: 68% 42%; scale: 1.7; }
.wycena { max-width: 720px; text-align: center; } .wycena h2 { margin-bottom: 12px; } .wycena p { margin-inline: auto; margin-bottom: 24px; }
.os { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: krok; position: relative; }
.os::before { content: ""; position: absolute; top: 15px; left: 0; right: 0; height: 2px; background: var(--linia); }
.os li { position: relative; padding-top: 48px; counter-increment: krok; } .os li::before { content: counter(krok); position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--akcent); color: var(--na-akcencie); font: 700 13px/32px var(--font-tekst); text-align: center; }
.os b { display: block; font: 600 1.2rem/1.2 var(--font-display); margin-bottom: 6px; } .os span { color: var(--tekst-2); }
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; gap: 16px; } .galeria figure { margin: 0; overflow: hidden; border-radius: var(--promien); } .galeria figure.duza { grid-column: span 2; grid-row: span 2; } .galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--plynnie); } .galeria figure:hover img { transform: scale(1.04); }
.cytaty { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .cytaty blockquote { margin: 0; padding: 32px; border-left: 4px solid var(--akcent); background: var(--tlo); border-radius: 0 var(--promien) var(--promien) 0; }
.cytaty p { font: italic 500 clamp(1.15rem, 1.8vw, 1.5rem)/1.35 var(--font-display); margin: 0 0 14px; max-width: none; } .cytaty footer { color: var(--tekst-2); font-size: .95rem; }
.wlasciciel { margin-top: 20px; padding: 18px 20px; border-left: 3px solid var(--akcent); background: var(--tlo); border-radius: 0 var(--promien) var(--promien) 0; } .wlasciciel b { font: 600 1.15rem/1.3 var(--font-display); } .wlasciciel p { margin: 6px 0 0; color: var(--tekst-2); } .wlasciciel ul { margin: 8px 0 0; padding-left: 18px; color: var(--tekst-2); }
.potwierdzenia { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; } .potwierdzenia li { display: flex; gap: 8px; align-items: center; font-weight: 500; } .potwierdzenia .ikona { margin: 0; }
.tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .porownanie { width: 100%; border-collapse: collapse; font-size: .98rem; background: var(--tlo); border: 1px solid var(--linia); border-radius: var(--promien); overflow: hidden; }
.porownanie th, .porownanie td { padding: 13px 16px; border-bottom: 1px solid var(--linia); text-align: left; vertical-align: top; } .porownanie thead th { font: 600 12px/1.2 var(--font-tekst); letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-2); background: var(--tlo-2); } .porownanie tbody th { font-weight: 600; } .porownanie td:nth-child(2) { font-weight: 600; color: var(--akcent-tekst, var(--akcent)); } .porownanie tr:last-child > * { border-bottom: 0; }
.pakiety { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; align-items: stretch; }
.pakiet { border: 1px solid var(--linia); border-radius: var(--promien); padding: 32px 28px; display: grid; gap: 14px; align-content: start; background: var(--tlo); }
.pakiet.polecany { background: var(--ciemny, var(--tekst)); color: var(--na-ciemnym, var(--tlo)); transform: translateY(-10px); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .45); border: 0; } .pakiet.polecany .etykieta { color: var(--polecany-etykieta, var(--akcent-tlo)); }
.pakiet .cena { font: 700 2.6rem/1 var(--font-display); letter-spacing: -.02em; } .pakiet ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; } .pakiet .przycisk { justify-self: start; margin-top: 8px; }
.pakiet.polecany .przycisk { background: var(--akcent); color: var(--na-akcencie); }
details { border-top: 1px solid var(--linia); padding: 6px 0; } details:last-of-type { border-bottom: 1px solid var(--linia); } summary { cursor: pointer; font: 600 1.1rem/1.4 var(--font-display); padding: 14px 32px 14px 0; list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; } summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font-size: 1.5rem; color: var(--akcent-tekst, var(--akcent)); transition: transform .3s; } details[open] summary::after { transform: rotate(45deg); } details p { color: var(--tekst-2); padding-bottom: 12px; }
.pasek-cta { background: var(--akcent); background-image: var(--glebia-akcent); color: var(--na-akcencie); padding: clamp(48px, 7vw, 88px) 0; } .pasek-cta .wnetrze { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: center; } .pasek-cta h2 { color: inherit; } .pasek-cta p { color: inherit; opacity: .88; margin: 8px 0 0; grid-column: 1; } .pasek-cta .przycisk { grid-column: 2; grid-row: 1 / span 2; }
.kontakt-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; } address { font-style: normal; margin-top: 20px; } address p { margin-top: 18px; color: var(--tekst-2); }
.formularz { display: grid; gap: 18px; background: var(--tlo-2); padding: clamp(22px, 3vw, 32px); border-radius: var(--promien); position: relative; }
.formularz .pole { position: relative; } .formularz .pole label { position: absolute; left: 16px; top: 17px; font: 500 1rem/1.2 var(--font-tekst); color: var(--tekst-2); pointer-events: none; transition: transform .22s var(--plynnie), font-size .22s, color .22s, background .22s; transform-origin: left top; padding: 0 4px; margin-left: -4px; }
.formularz .pole input, .formularz .pole textarea { font: inherit; padding: 16px 16px 14px; border: 1.5px solid var(--linia); border-radius: calc(var(--promien) / 1.6); background: var(--tlo); color: var(--tekst); width: 100%; transition: border-color .25s, box-shadow .25s; } .formularz .pole textarea { resize: vertical; min-height: 120px; }
.formularz .pole input:focus-visible, .formularz .pole textarea:focus-visible { outline: 0; border-color: var(--akcent); box-shadow: 0 0 0 4px var(--akcent-tlo); }
.formularz .pole input:focus + label, .formularz .pole textarea:focus + label, .formularz .pole input:not(:placeholder-shown) + label, .formularz .pole textarea:not(:placeholder-shown) + label { transform: translateY(-26px) scale(.8); background: var(--tlo); color: var(--akcent-2); font-weight: 600; }
.formularz .pole.zle input, .formularz .pole.zle textarea { border-color: #C2413A; box-shadow: 0 0 0 4px rgb(194 65 58 / .15); animation: potrzas .4s var(--plynnie); } .formularz .pole.zle label { color: #C2413A; } @keyframes potrzas { 25% { translate: -5px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }
.formularz .zgoda { display: flex; align-items: flex-start; gap: 12px; font-size: .93rem; line-height: 1.45; color: var(--tekst-2); cursor: pointer; position: relative; } .formularz .zgoda a { color: var(--akcent-tekst, var(--akcent)); text-underline-offset: 3px; } .formularz .zgoda input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.formularz .znacznik { flex: none; width: 24px; height: 24px; margin-top: 1px; border: 1.5px solid var(--tekst-2); border-radius: calc(var(--promien) / 2.2); background: var(--tlo); position: relative; transition: background .2s, border-color .2s, transform .2s var(--plynnie); } .formularz .znacznik::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 12px; border: solid var(--na-akcencie); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .25s var(--plynnie); }
.formularz .zgoda input:checked + .znacznik { background: var(--akcent); border-color: var(--akcent); animation: pyk .3s var(--plynnie); } .formularz .zgoda input:checked + .znacznik::after { transform: rotate(45deg) scale(1); } .formularz .zgoda input:focus-visible + .znacznik { box-shadow: 0 0 0 4px var(--akcent-tlo); border-color: var(--akcent); } .formularz .zgoda:hover .znacznik { border-color: var(--akcent); } .formularz .zgoda.zle .znacznik { border-color: #C2413A; box-shadow: 0 0 0 4px rgb(194 65 58 / .15); animation: potrzas .4s var(--plynnie); } @keyframes pyk { 40% { transform: scale(1.18); } }
.formularz .wyslij { justify-content: center; gap: 12px; padding: 16px 28px; font-size: 1.05rem; width: 100%; } .formularz .wyslij .wyslij-ikona { display: inline-flex; transition: transform .3s var(--plynnie); } .formularz .wyslij:hover .wyslij-ikona { transform: translateX(6px); }
.formularz .wyslij.wysylanie { pointer-events: none; opacity: .85; } .formularz .wyslij.wysylanie .wyslij-ikona { animation: leci .7s var(--plynnie) forwards; } @keyframes leci { to { transform: translateX(40px); opacity: 0; } }
.formularz-info { margin: -6px 0 0; } .formularz.wyslany .pole, .formularz.wyslany .zgoda, .formularz.wyslany .wyslij, .formularz.wyslany .formularz-info { display: none; } .formularz-dzieki { margin: 0; padding: 22px; border-radius: calc(var(--promien) / 1.6); background: var(--akcent-tlo); color: var(--tekst); animation: wjazdG .5s var(--plynnie); outline: 0; } .formularz-dzieki b { color: var(--akcent-2); font-family: var(--font-display); font-size: 1.2rem; display: block; margin-bottom: 4px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--akcent-tekst, var(--akcent)); outline-offset: 3px; }
.stopka-glowna { background: var(--ciemny, var(--tekst)); background-image: var(--glebia-ciemny); color: var(--na-ciemnym, var(--tlo)); padding: 48px 0; } .stopka { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; align-items: start; } .stopka-glowna a { color: inherit; } .stopka-glowna .mini { color: inherit; opacity: .75; }
.polityka { border: 0; margin-top: 10px; } .polityka summary { font: 500 .9rem/1.4 var(--font-tekst); padding: 4px 22px 4px 0; opacity: .9; } .polityka summary::after { font-size: 1.1rem; top: 2px; } .polityka p { font-size: .85rem; color: inherit; opacity: .8; max-width: 60ch; }
.reveal { opacity: 0; transform: translateY(var(--ruch-dystans, 18px)) scale(.98); transition: opacity var(--odslona-czas, var(--ruch-czas, .7s)) var(--odslona, var(--plynnie)), transform var(--odslona-czas, var(--ruch-czas, .7s)) var(--odslona, var(--plynnie)); transition-delay: min(calc(var(--i, 0) * 60ms), 300ms); } .reveal.widoczny { opacity: 1; transform: none; }
.reveal-l { transform: translateX(-32px) scale(.98); } .reveal-r { transform: translateX(32px) scale(.98); }
@media (max-width: 900px) { .reveal-l, .reveal-r { transform: translateY(18px) scale(.98); } }
.postep-przewijania { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--akcent); transform-origin: left; transform: scaleX(0); z-index: 60; pointer-events: none; }
.do-gory { position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%; background: var(--akcent); color: var(--na-akcencie); display: grid; place-items: center; box-shadow: 0 14px 30px -14px rgb(0 0 0 / .45); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .35s, transform .35s var(--plynnie), background .2s; z-index: 55; } .do-gory.widoczny { opacity: 1; transform: none; pointer-events: auto; } .do-gory:hover { background: var(--akcent-2); }
.reveal h2 .slowo { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .18em .14em .12em; margin: 0 -.18em -.14em -.12em; } .reveal h2 .slowo > span { display: inline-block; transform: translateY(110%); transition: transform .8s var(--plynnie); transition-delay: calc(var(--s) * 45ms + 80ms); } .reveal.widoczny h2 .slowo > span { transform: none; }
.naglowek-sekcji.reveal > p { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--plynnie) .3s, transform .6s var(--plynnie) .3s; } .naglowek-sekcji.reveal.widoczny > p { opacity: 1; transform: none; }
.reveal .ikona:not(.mala) { opacity: 0; transform: scale(.55) rotate(-10deg); transition: opacity .45s var(--plynnie) .15s, transform .55s var(--plynnie) .15s; } .reveal.widoczny .ikona:not(.mala) { opacity: 1; transform: none; }
.reveal .ikona:not(.mala) :is(path, circle, rect, polygon, polyline, line) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--plynnie) .35s; } .reveal.widoczny .ikona:not(.mala) :is(path, circle, rect, polygon, polyline, line) { stroke-dashoffset: 0; }
.bento-karta, .pakiet, .cytaty blockquote { position: relative; } .bento-karta::before, .pakiet::before, .cytaty blockquote::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 24px 48px -28px rgb(0 0 0 / .4); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: -1; } .bento-karta:hover::before, .pakiet:hover::before, .cytaty blockquote:hover::before { opacity: 1; }
.lista-num li.reveal .nr { opacity: .25; transform: translateX(-14px); transition: opacity .6s var(--plynnie) .15s, transform .6s var(--plynnie) .15s; } .lista-num li.reveal.widoczny .nr { opacity: 1; transform: none; }
.os li.reveal::before { transform: scale(.4); transition: transform .5s var(--plynnie) .2s; } .os li.reveal.widoczny::before { transform: scale(1); } .os::before { transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--plynnie) .1s; } .os:has(li.widoczny)::before { transform: scaleX(1); }
.liczby.reveal li { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--plynnie), transform .5s var(--plynnie); } .liczby.reveal.widoczny li { opacity: 1; transform: none; } .liczby li:nth-child(2) { transition-delay: .12s; } .liczby li:nth-child(3) { transition-delay: .24s; } .liczby li:nth-child(4) { transition-delay: .36s; }
.galeria figure.reveal img { transform: scale(1.12); } .galeria figure.reveal.widoczny img { transform: scale(1); } .galeria figure.reveal.widoczny:hover img { transform: scale(1.05); }
.hero-wizual .ramka-obrazu.widoczny:hover img { transform: scale(1.04); transition-duration: .6s; }
.sekcja.tlo-2 { position: relative; isolation: isolate; overflow: hidden; } .sekcja.tlo-2::before { content: ""; position: absolute; z-index: -1; right: -12%; top: -20%; width: min(50vw, 560px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--akcent-tlo), transparent 70%); opacity: .7; pointer-events: none; transform: translateY(calc(var(--par, 0) * 0.08px)); }
.pakiet { transition: transform .3s var(--plynnie); } .pakiet:hover { transform: translateY(-4px); } .pakiet.polecany:hover { transform: translateY(-14px); }
.cytaty blockquote { transition: transform .3s var(--plynnie); } .cytaty blockquote:hover { transform: translateY(-3px); }
.przycisk { position: relative; overflow: hidden; } .przycisk::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .35), transparent); transform: skewX(-20deg); transition: left .55s var(--plynnie); pointer-events: none; } .przycisk:hover::after { left: 130%; } .przycisk:active { transform: translateY(0) scale(.97); }
.menu a:not(.przycisk) { position: relative; } .menu a:not(.przycisk)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--akcent); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--plynnie); } .menu a:not(.przycisk):hover::after { transform: scaleX(1); transform-origin: left; }
.naglowek { transition: min-height .3s var(--plynnie); } header.przewiniety .naglowek { min-height: 60px; }
details[open] > p { animation: wjazdG .35s var(--plynnie); }
.ruch-twardy .etykieta { background: var(--akcent); color: var(--na-akcencie); padding: 6px 10px; letter-spacing: .22em; } .ruch-twardy .naglowek-sekcji .etykieta::after, .ruch-twardy .hero-tekst .etykieta::after, .ruch-twardy .hero-srodek .etykieta::after { display: none; } .ruch-twardy .bento-karta .etykieta, .ruch-twardy .pakiet .etykieta { background: transparent; color: inherit; padding: 0; }
.ruch-twardy .przycisk { border-radius: 2px; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); padding-inline: 30px; text-transform: uppercase; letter-spacing: .06em; font-size: .92rem; } .ruch-twardy .przycisk:hover { transform: translateY(-2px) skewX(-2deg); }
.ruch-twardy .hero::after { content: ""; position: absolute; top: 0; bottom: 0; right: -6%; width: 42%; background: repeating-linear-gradient(-62deg, transparent 0 26px, var(--akcent) 26px 27px); opacity: .12; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); transform: translateY(calc(var(--par, 0) * -0.06px)); }
.ruch-twardy .hero-siatka { position: relative; z-index: 1; } .ruch-twardy .hero-srodek { position: relative; z-index: 1; }
.ruch-twardy .cytaty blockquote { border-left-width: 8px; border-radius: 0; } .ruch-twardy .os li::before { border-radius: 2px; } .ruch-twardy .liczby b, .ruch-twardy .pasek-zaufania b, .ruch-twardy .karta-plywajaca b { font-size: 2.4rem; letter-spacing: .02em; }
.ruch-twardy .lista-num .nr { font-size: 3rem; opacity: .9; } .ruch-twardy .tasma-tor span { font-weight: 700; letter-spacing: .22em; }
.ruch-spokojny .tasma { display: none; } .ruch-spokojny .hero::before { translate: 0 0; }
.ruch-skoczny .przycisk:hover { transform: translateY(-3px) scale(1.04); } .ruch-skoczny .przycisk:active { transform: scale(.96); }
.ruch-skoczny .bento-karta:hover, .ruch-skoczny .kafelek:hover, .ruch-skoczny .pakiet:hover { transform: translateY(-6px) scale(1.02); } .ruch-skoczny .pakiet.polecany:hover { transform: translateY(-16px) scale(1.02); }
.ruch-skoczny .etykieta { color: var(--duo-tekst, var(--akcent-2)); } .ruch-skoczny .bento-karta .etykieta, .ruch-skoczny .pakiet .etykieta { color: inherit; }
.ruch-skoczny h1 em { display: inline-block; rotate: -1.5deg; } .ruch-skoczny .liczby b, .ruch-skoczny .pasek-zaufania b { font-weight: 800; } .ruch-skoczny .os li::before { width: 38px; height: 38px; font-size: 15px; line-height: 38px; } .ruch-skoczny .os li:nth-child(even)::before { background: var(--duo); color: var(--na-duo); }
.ruch-skoczny .kafelek::after { background: var(--duo-tlo); } .ruch-skoczny .bento-karta.duza { background: linear-gradient(135deg, var(--akcent), var(--akcent-2)); } .ruch-skoczny .cytaty blockquote { border-left-color: var(--duo); } .ruch-skoczny .do-gory { background: var(--duo); color: var(--na-duo); }
.temperament-powazny .hero::before { display: none; } .temperament-powazny .bento-karta:hover, .temperament-powazny .pakiet:hover, .temperament-powazny .cytaty blockquote:hover, .temperament-powazny .kafelek:hover { transform: none; } .temperament-powazny .przycisk::after { display: none; } .temperament-powazny .sekcja.tlo-2::before { display: none; }
.ramka-obrazu { position: relative; overflow: hidden; } .ramka-obrazu::after { content: ""; position: absolute; inset: 0; background: var(--akcent); transform-origin: right; z-index: 2; pointer-events: none; transition: transform 1s var(--plynnie); } .ramka-obrazu img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.3s var(--plynnie); } .ramka-obrazu.widoczny::after { transform: scaleX(0); } .ramka-obrazu.widoczny img { transform: scale(1); }
.hero::before { animation: oddech 14s ease-in-out infinite; } @keyframes oddech { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@media (max-width: 1520px) { .hamburger { display: flex; } .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 20px 20px; background: var(--tlo); border-bottom: 1px solid var(--linia); box-shadow: 0 20px 40px -20px rgb(0 0 0 / .35); } .menu.otwarte { display: flex; } .menu a { padding: 10px 0; font-size: 1.05rem; } }
/* Na bardzo szerokich ekranach chronimy logo przed przelaniem na menu */
@media (min-width: 1521px) {
  .logo { max-width: 42%; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
  .menu { flex: 0 1 auto; min-width: 0; }
}

/* --- Pozioma karuzela zdjęć pod sekcją Zabiegi --- */
.karuzela-zabiegow { position: relative; margin-top: clamp(28px, 4.6vw, 56px); overflow: hidden; -webkit-overflow-scrolling: touch; }
.karuzela-wrap { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(180px, 24vw, 320px); gap: clamp(12px, 2vw, 22px); overflow-x: auto; padding: 4px 0 22px 0; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--akcent) transparent; }
.karuzela-wrap::-webkit-scrollbar { height: 6px; }
.karuzela-wrap::-webkit-scrollbar-track { background: transparent; }
.karuzela-wrap::-webkit-scrollbar-thumb { background: var(--akcent); border-radius: 999px; }
.karuzela-fota { margin: 0; width: 100%; height: 0; padding-bottom: 130%; position: relative; border-radius: 14px; overflow: hidden; background: var(--tlo-2); box-shadow: 0 10px 30px -16px rgba(0,0,0,.2); transform: scale(.98); opacity: .96; transition: transform .35s var(--plynnie), opacity .35s var(--plynnie), box-shadow .35s var(--plynnie); }
.karuzela-fota:hover { transform: scale(1); opacity: 1; box-shadow: 0 16px 38px -18px color-mix(in oklab, var(--akcent) 45%, transparent); }
.karuzela-fota img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
@media (max-width: 720px) {
  .karuzela-wrap { grid-auto-columns: minmax(220px, 74vw); }
  .karuzela-fota { padding-bottom: 140%; }
}
@media (prefers-reduced-motion: reduce) {
  .karuzela-wrap { scroll-behavior: auto; }
}

/* --- Karuzela opinii z Booksy w sekcji Opinie (rozszerzona o animacje i Booksy UI) --- */
.karuzela-opinii { position: relative; overflow: hidden; margin-top: clamp(18px, 2.8vw, 34px); -webkit-overflow-scrolling: touch; }
.karuzela-opinii-wrap { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(420px, 100%), 1fr); gap: clamp(16px, 2.4vw, 24px); overflow-x: auto; padding: 8px 0 26px 0; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--duo) transparent; }
.karuzela-opinii-wrap::-webkit-scrollbar { height: 6px; }
.karuzela-opinii-wrap::-webkit-scrollbar-track { background: transparent; }
.karuzela-opinii-wrap::-webkit-scrollbar-thumb { background: var(--duo); border-radius: 999px; }

/* --- Karta opinii z efektami WOW jak w reszcie strony --- */
.opinia-slajd.reveal {
  padding: clamp(20px, 3vw, 32px);
  background: color-mix(in srgb, var(--tlo) 75%, transparent);
  border: 1px solid color-mix(in oklab, var(--duo) 22%, transparent);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translateY(30px);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .4s var(--plynnie),
              border-color .4s var(--plynnie),
              background .4s var(--plynnie),
              opacity .8s var(--plynnie);
}

/* Bezpiecznik: gdy .widoczny, na pewno widoczne */
.opinia-slajd.reveal.widoczny {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Efekt shimmer jak w innych kartach */
.opinia-slajd::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(120deg,
    transparent 0%,
    color-mix(in oklab, var(--duo) 0%, transparent) 20%,
    color-mix(in oklab, var(--duo) 70%, #FFF) 50%,
    color-mix(in oklab, var(--duo) 0%, transparent) 80%,
    transparent 100%);
  background-size: 200% 200%;
  background-position: 100% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--plynnie), background-position .8s var(--plynnie);
  z-index: 2;
}

.opinia-slajd:hover::before {
  opacity: 1;
  background-position: 0% 0%;
}

/* Efekt 3D podnoszenia przy hoverze */
.opinia-slajd:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 30px 70px -30px color-mix(in oklab, var(--akcent) 50%, transparent),
    0 0 0 1px color-mix(in oklab, var(--duo) 35%, transparent),
    inset 0 1px 0 0 color-mix(in oklab, var(--duo) 18%, #FFF);
  border-color: color-mix(in oklab, var(--duo) 55%, transparent);
  background: color-mix(in srgb, var(--tlo) 92%, transparent);
}

/* Dekoracyjny cytat w rogu */
.opinia-slajd::after {
  content: "„";
  position: absolute;
  right: 16px;
  top: 4px;
  font: 700 5.2rem/1 var(--font-display, serif);
  color: color-mix(in oklab, var(--duo) 30%, transparent);
  pointer-events: none;
  z-index: 0;
  animation: cytatPlynie 4s ease-in-out infinite alternate;
}

@keyframes cytatPlynie {
  0% { transform: translateY(0); opacity: .3; }
  100% { transform: translateY(-6px); opacity: .5; }
}

/* --- Gwiazdki oceny z animacją wejścia --- */
.opinia-gwiazdki {
  display: flex;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.opinia-gwiazdka {
  font-size: 1.1rem;
  color: var(--duo);
  opacity: 0;
  transform: scale(0) rotate(-40deg);
}

.opinia-slajd.widoczny .opinia-gwiazdka {
  animation: gwiazdkaWjazd .5s cubic-bezier(.34, 1.56, .64, 1) forwards;
  animation-delay: calc(var(--i, 0) * .08s + .2s);
}

@keyframes gwiazdkaWjazd {
  0% { opacity: 0; transform: scale(0) rotate(-40deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* --- Tekst opinii --- */
.opinia-slajd p {
  margin: 0;
  font: 500 clamp(.98rem, 1.08vw, 1.08rem)/1.7 var(--font-tekst, sans-serif);
  color: var(--tekst);
  position: relative;
  z-index: 1;
}

/* --- Stopka opinii z avatarem i danymi --- */
.opinia-stopka {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
  position: relative;
  z-index: 1;
}

.opinia-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--akcent), color-mix(in oklab, var(--akcent) 70%, var(--duo)));
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 1.1rem/1 var(--font-tekst);
  color: #FFF;
  flex-shrink: 0;
  box-shadow:
    0 6px 18px -8px color-mix(in oklab, var(--akcent) 50%, transparent),
    0 0 0 2px color-mix(in oklab, var(--duo) 25%, #FFF);
}

.opinia-dane {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.opinia-imie {
  font: 700 1rem/1.2 var(--font-tekst);
  color: var(--tekst);
}

.opinia-usluga {
  font: 500 .86rem/1.2 var(--font-tekst);
  color: var(--tekst-2);
}

/* --- Badge "opinia z Booksy" --- */
.opinia-booksy {
  position: absolute;
  top: 16px;
  right: 16px;
  font: 600 .76rem/1 var(--font-tekst);
  color: color-mix(in oklab, var(--duo-tekst, #6B5407) 80%, var(--tekst));
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 5px 12px;
  background: color-mix(in oklab, var(--duo-tlo) 60%, var(--tlo));
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--duo) 28%, transparent);
  position: relative;
  z-index: 3;
}

@media (max-width: 720px) {
  .karuzela-opinii-wrap { grid-auto-columns: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .karuzela-opinii-wrap { scroll-behavior: auto; }
  .opinia-slajd, .opinia-gwiazdka, .opinia-slajd::after { animation: none !important; transition: none !important; }
}
@media (max-width: 900px) { .hero-siatka, .o-nas-siatka, .kontakt-siatka, .cytaty, .kafelki { grid-template-columns: 1fr; } .karta-plywajaca { left: 12px; } .kafelek.szeroki { grid-column: auto; grid-template-columns: 1fr; } .kafelek.szeroki .ikona { grid-row: auto; } .bento { grid-template-columns: 1fr 1fr; } .bento-karta.duza { grid-column: span 2; grid-row: auto; } .os { grid-template-columns: 1fr 1fr; } .os::before { display: none; } .pakiety { grid-template-columns: 1fr; } .pakiet.polecany { transform: none; } .stopka { grid-template-columns: 1fr; } .galeria { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; } .galeria figure.duza { grid-column: span 2; grid-row: span 1; } .pasek-cta .wnetrze { grid-template-columns: 1fr; } .pasek-cta .przycisk { grid-column: 1; grid-row: auto; justify-self: start; } }
@media (max-width: 600px) { .bento { grid-template-columns: 1fr; } .bento-karta.duza, .bento-karta.szeroka { grid-column: auto; } .os { grid-template-columns: 1fr; } .lista-num li { grid-template-columns: 52px 1fr; } .hero-wizual .ramka-obrazu { aspect-ratio: 4 / 3; } .galeria { grid-template-columns: 1fr; } .galeria figure.duza { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .ramka-obrazu::after { transform: scaleX(0); } .ramka-obrazu img { transform: none; } .kinetyczny h1 .slowo > span, .reveal h2 .slowo > span { transform: none; transition: none; } .naglowek-sekcji.reveal > p, .reveal .ikona:not(.mala), .lista-num li.reveal .nr, .liczby.reveal li { opacity: 1; transform: none; } .os li.reveal::before, .os::before, .galeria figure.reveal img, .hero-siatka > .hero-tekst, .hero-siatka > .hero-wizual, .hero-siatka > .karta-zaufania, .hero-srodek, .sekcja.tlo-2::before { transform: none; } .zdjecie-pelne::before { translate: none; transform: none; } .hero::before { translate: none; } .reveal .ikona:not(.mala) :is(path, circle, rect, polygon, polyline, line) { stroke-dashoffset: 0; } .postep-przewijania { display: none; } *, *::before, *::after { animation: none !important; transition: none !important; } }
/* ===== DODATKI DESIGNERSKIE (dodatki.js): podkreslenie-markerem, ikony-w-kolkach, karty-pasek-gorny, przycisk-obwodka-obrot, ramka-duo, kwiatki-rosna, sekcje-kropki, kropki-nawigacji, pierscien-napis ===== */
/* smaczki: kontener */
.smaczki-tlo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; container-type: size; } .smaczek { position: absolute; display: block; } @keyframes smObrot { to { rotate: 360deg; } } @media (prefers-reduced-motion: reduce) { .smaczki-tlo { display: none !important; } }
/* dodatek: podkreslenie-markerem - Slowo zaznaczone markerem */
h1 em { background: linear-gradient(transparent 58%, color-mix(in oklab, var(--duo) 26%, transparent) 58% 92%, transparent 92%); background-size: 0% 100%; background-repeat: no-repeat; animation: marker .8s var(--plynnie) 1.1s forwards; padding: 0 .06em; margin: 0 -.06em; } @keyframes marker { to { background-size: 100% 100%; } }
/* dodatek: ikony-w-kolkach - Ikony w kolorowych kolkach */
.bento-karta .ikona:not(.mala), .kafelek .ikona:not(.mala) { width: 54px; height: 54px; padding: 13px; border-radius: 50%; background: var(--akcent-tlo); transition: background .35s, color .35s, transform .55s var(--plynnie) .15s, opacity .45s var(--plynnie) .15s; } .bento-karta:hover .ikona:not(.mala), .kafelek:hover .ikona:not(.mala) { background: var(--akcent); color: var(--na-akcencie); } .bento-karta.duza .ikona:not(.mala) { background: rgb(255 255 255 / .18); color: inherit; }
/* dodatek: karty-pasek-gorny - Pasek koloru na gorze karty */
.bento-karta:not(.duza), .kafelek, .pakiet { overflow: hidden; position: relative; } .bento-karta:not(.duza)::after, .kafelek::before, .pakiet::after { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 42px; background: var(--akcent); transition: width .5s var(--plynnie); border-radius: 0 0 4px 0; } .bento-karta:nth-child(even)::after, .kafelek:nth-child(even)::before, .pakiet:nth-child(even)::after { background: var(--duo); } .bento-karta:not(.duza):hover::after, .kafelek:hover::before, .pakiet:hover::after { width: 100%; }
/* dodatek: przycisk-obwodka-obrot - Obracajaca sie obwodka */
@property --kat { syntax: "<angle>"; initial-value: 0deg; inherits: false; } .hero .cta .przycisk { overflow: visible; isolation: isolate; } .hero .cta .przycisk::after { display: none; } .hero .cta .przycisk::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; background: conic-gradient(from var(--kat), var(--akcent), var(--duo), var(--akcent)); z-index: -1; animation: obwodka 4s linear infinite; } @keyframes obwodka { to { --kat: 360deg; } }
/* dodatek: ramka-duo - Kolorowy blok za zdjeciem */
.hero-wizual::before, .o-nas-wizual::before { border: 0; background: var(--duo-tlo); opacity: 1; transform: translate(18px, 18px); }
/* dodatek: kwiatki-rosna - Kwiatki wyrastaja w rogu hero */
.sm-kwiat { bottom: 0; left: calc(3% + var(--n, 0) * clamp(28px, 3.6cqw, 54px)); width: clamp(24px, 3.2cqw, 46px); transform-origin: bottom center; animation: kwiatRosnie 1.6s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(.4s + var(--n, 0) * .25s); } .sm-kwiat svg { width: 100%; height: auto; display: block; overflow: visible; } .sm-kwiat .lod { stroke: var(--akcent-2); stroke-width: 3; stroke-linecap: round; } .sm-kwiat .lisc { fill: var(--akcent-2); opacity: .85; } .sm-kwiat .pl { fill: var(--duo); } .sm-kwiat.kw-b .pl { fill: var(--trio); } .sm-kwiat.kw-b { width: clamp(18px, 2.6cqw, 36px); } .sm-kwiat .sr { fill: var(--akcent); } .sm-kwiat .glowka { animation: kwiatKolysze 5s ease-in-out infinite alternate; animation-delay: calc(var(--n, 0) * -1.3s); } @keyframes kwiatRosnie { from { transform: scaleY(0) scaleX(.6); } } @keyframes kwiatKolysze { from { rotate: -8deg; } to { rotate: 8deg; } }
/* dodatek: sekcje-kropki - Kropki w tle sekcji naprzemiennych */
.sekcja.tlo-2::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--akcent) 1px, transparent 1.3px); background-size: 30px 30px; opacity: .12; translate: 0 calc(var(--par, 0) * 0.04px); pointer-events: none; }
/* dodatek: kropki-nawigacji - Kropki nawigacji z boku */
@media (min-width: 1200px) { .kropki { position: fixed; right: 22px; top: 50%; translate: 0 -50%; display: grid; gap: 12px; z-index: 40; } .kropki a { width: 10px; height: 10px; border-radius: 50%; background: var(--linia); display: block; transition: background .3s, transform .3s var(--plynnie); } .kropki a.aktywna { background: var(--akcent); transform: scale(1.4); } .kropki a:hover { background: var(--akcent-2); } }
/* dodatek: pierscien-napis - Napis krazy po okregu (pieczec) */
.sm-napis { right: clamp(12px, 4vw, 64px); bottom: clamp(12px, 3vw, 40px); width: clamp(96px, 12vw, 150px); aspect-ratio: 1; } .sm-napis svg { width: 100%; height: 100%; display: block; overflow: visible; animation: smObrot 26s linear infinite; } .sm-napis text { font: 700 15px/1 var(--font-tekst, sans-serif); letter-spacing: .14em; text-transform: uppercase; fill: var(--akcent); } .sm-napis b { position: absolute; inset: 36%; border-radius: 50%; background: var(--duo); opacity: .9; } @media (max-width: 700px) { .sm-napis { width: 84px; right: 10px; bottom: 10px; } }
/* ===== TEKSTURY SEKCJI (tekstury.js): papier w manifest, len w kontakt ===== */
/* tekstura papier (ziarno 408804, 1505 B) */
:where(#manifest){position:relative;isolation:isolate}
:is(#manifest):not(.tlo-2)::before,:is(#manifest).tlo-2:not(.mocna):not(.pole)::after{content:"";position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;border-radius:0;z-index:-1;pointer-events:none;transform:none;translate:none;animation:none;filter:none;mix-blend-mode:normal;--tx:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='4' seed='922' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0 0 0 -.19' result='n'/%3E%3CfeFlood flood-color='%23000'/%3E%3CfeComposite in2='n' operator='in'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='241' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.4 0 0 0 -1.9' result='n'/%3E%3CfeFlood flood-color='%23000'/%3E%3CfeComposite in2='n' operator='in'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3Cpath d='M57 171q-8 11.2 -12.1 24.4M248 135q8.3 10.5 21.6 12.2M279 84q-7.7 -2.4 -10 5.3M255 310q-13.7 -.1 -26.9 4M292 252q-7.6 8.3 -18.8 10.1M238 245q13.2 .3 23.5 8.6M196 261q4.8 6.1 11.9 2.9M113 303q7.8 9.4 18.6 15.3M171 270q6.7 4.2 11.9 10M212 282q-1.4 4.9 -1.7 10.1M131 39q-5.6 10.5 -.5 21.2M105 240q-5.6 5 -11.9 .8M252 294q-4.5 9.7 -.2 19.5M136 235q-2.7 7.8 2.8 13.9M88 291q-1.1 11.8 7 20.5M97 284q6.4 .2 10.7 4.9' fill='none' stroke='%23000' stroke-width='.7' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E");background:currentColor;opacity:.083;-webkit-mask-image:var(--tx),linear-gradient(transparent, black min(64px, 18%), black calc(100% - min(64px, 18%)), transparent);mask-image:var(--tx),linear-gradient(transparent, black min(64px, 18%), black calc(100% - min(64px, 18%)), transparent);-webkit-mask-size:340px 340px,100% 100%;mask-size:340px 340px,100% 100%;-webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-composite:source-in;mask-composite:intersect}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){:where(#manifest){view-timeline:--tx-ex9a block}:is(#manifest):not(.tlo-2)::before,:is(#manifest).tlo-2:not(.mocna):not(.pole)::after{animation:tekstura-dryf linear both;animation-timeline:--tx-ex9a}}}
/* tekstura len (ziarno 88974, 1026 B) */
:where(#kontakt){position:relative;isolation:isolate}
:is(#kontakt):not(.tlo-2)::before,:is(#kontakt).tlo-2:not(.mocna):not(.pole)::after{content:"";position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;border-radius:0;z-index:-1;pointer-events:none;transform:none;translate:none;animation:none;filter:none;mix-blend-mode:normal;--tx:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cfilter id='h' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.038 .91' numOctaves='2' seed='701' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.4 0 0 0 -1.85' result='n'/%3E%3CfeFlood flood-color='%23000'/%3E%3CfeComposite in2='n' operator='in'/%3E%3C/filter%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.04 .044' numOctaves='2' seed='195' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.2 0 0 0 -1.8' result='n'/%3E%3CfeFlood flood-color='%23000'/%3E%3CfeComposite in2='n' operator='in'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23v)' opacity='.7'/%3E%3C/svg%3E");background:currentColor;opacity:.083;-webkit-mask-image:var(--tx),linear-gradient(transparent, black min(64px, 18%), black calc(100% - min(64px, 18%)), transparent);mask-image:var(--tx),linear-gradient(transparent, black min(64px, 18%), black calc(100% - min(64px, 18%)), transparent);-webkit-mask-size:260px 260px,100% 100%;mask-size:260px 260px,100% 100%;-webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-composite:source-in;mask-composite:intersect}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){:where(#kontakt){view-timeline:--tx-4fw9 block}:is(#kontakt):not(.tlo-2)::before,:is(#kontakt).tlo-2:not(.mocna):not(.pole)::after{animation:tekstura-dryf linear both;animation-timeline:--tx-4fw9}}}
@keyframes tekstura-dryf{from{transform:translate3d(0,-12px,0)}to{transform:translate3d(0,12px,0)}}

@media (prefers-reduced-motion: reduce) { .hero .dekor, .kursor, .poswiata-kursora, .przewin { display: none !important; } .sekcja { scale: 1 !important; opacity: 1 !important; } .liczby b { --lk-kat: 320deg; } .cytaty blockquote p::before { --gw: 100%; } .ramka-obrazu img, .galeria figure img { --zal: 100%; clip-path: none !important; } .hero .lead { --ml: 120%; } .formularz .pole label { transition: none; } }
/* pomysl modelu */
.wypowiedzi-siatka{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px}.wypowiedz-karta{background:var(--tlo-2);padding:40px 36px;border-radius:var(--promien);position:relative;border:1px solid transparent;transition:border-color .4s var(--plynnie)}.wypowiedz-karta:hover{border-color:var(--duo-tekst, var(--duo))}.wypowiedz-tekst{font-family:var(--font-display);font-size:clamp(1.1rem,1.8vw,1.5rem);line-height:1.5;color:var(--tekst);font-style:italic;margin:0 0 16px}.wypowiedz-autor{font-family:var(--font-tekst);font-size:0.9rem;color:var(--tekst-2);letter-spacing:.04em}@media(max-width:768px){.wypowiedzi-siatka{grid-template-columns:1fr}}

/* --- Złote i kwiatowe akcenty dekoracyjne --- */
.hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--duo), var(--akcent), var(--duo)); z-index: 2; }
.etykieta::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--duo); margin-right: 8px; vertical-align: middle; }
.naglowek-sekcji h2 { position: relative; display: inline-block; }
.naglowek-sekcji h2::after { content: ""; display: block; width: 60px; height: 3px; background: var(--duo); margin-top: 12px; border-radius: 2px; transform-origin: left; transform: scaleX(0); transition: transform .7s var(--plynnie) .2s; }
.reveal.widoczny .naglowek-sekcji h2::after { transform: scaleX(1); }
details summary { position: relative; padding-left: 24px; }
details summary::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 2px; background: var(--duo); transform: translateY(-50%); transition: width .3s var(--plynnie); }
details[open] summary::before { width: 24px; }
.sekcja.pole { position: relative; overflow: hidden; }
.sekcja.pole::before { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--duo) 18%, transparent) 0%, transparent 70%); opacity: .6; pointer-events: none; top: -100px; right: -80px; }
.sekcja.pole::after { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--akcent) 12%, transparent) 0%, transparent 65%); opacity: .5; pointer-events: none; bottom: -70px; left: -50px; }
@media (max-width: 768px) { .sekcja.pole::before, .sekcja.pole::after { display: none; } }

/* --- Poszerzony pasek nagłówka (miejsce dla logo i menu) --- */
header#gora .naglowek { width: min(1320px, 100% - 32px); }
@media (min-width: 1025px) {
  .logo { flex: 0 0 auto; max-width: 46%; }
  .menu { flex: 1 1 auto; justify-content: flex-end; }
}
@media (max-width: 1024px) {
  .logo { max-width: calc(100% - 64px); font-size: 1.02rem; line-height: 1.25; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
}
@media (min-width: 1025px) and (max-width: 1240px) {
  .logo { font-size: .92rem; max-width: 40%; }
  .menu { gap: 8px; }
  .menu a { font-size: .8rem; }
  .naglowek { gap: 14px; }
}

/* --- Naprawa rozjechanego nagłówka: krótkie logo i przerwy --- */
.logo { white-space: nowrap; flex: 0 1 auto; min-width: 0; max-width: 42%; font-size: clamp(.95rem, 1.35vw, 1.2rem); overflow: hidden; text-overflow: ellipsis; }
.menu { gap: clamp(10px, 1.6vw, 22px); }
.menu a { white-space: nowrap; font-size: clamp(.82rem, 1vw, .95rem); }
@media (max-width: 1024px) { .logo { max-width: calc(100% - 64px); font-size: 1.05rem; white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; hyphens: auto; } }
@media (max-width: 480px) { .logo { font-size: .95rem; -webkit-line-clamp: 2; } }
.naglowek { gap: 12px; }
.hero .etykieta { max-width: 100%; overflow-wrap: anywhere; }

/* --- Galeria: kafle ozdobne (SVG) --- */
.galeria figure { position: relative; }
.galeria figure img[src$=".svg"] { width: 100%; height: 100%; object-fit: cover; }

/* --- Grafiki kroków w sekcji "Jak pracujemy" --- */
.os-zygzak .krok-grafika { width: clamp(84px, 10vw, 120px); height: auto; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: color-mix(in oklab, var(--tlo) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--duo) 35%, transparent); }
@media (prefers-reduced-motion: no-preference) { .reveal .krok-grafika { opacity: 0; translate: 0 12px; transition: opacity .7s var(--plynnie), translate .7s var(--plynnie); transition-delay: calc(var(--i, 0) * .12s + .15s); } .reveal.widoczny .krok-grafika { opacity: 1; translate: 0 0; } }

/* Kafel kroku w ciemnej sekcji: jaśniejsze tło pod grafiką i tekstem */
.os-zygzak li { background: color-mix(in srgb, var(--tlo) 92%, transparent); color: var(--tekst); }
.os-zygzak li b { color: var(--tekst); }
.os-zygzak li span { color: var(--tekst-2); }
.os-zygzak .krok-grafika { background: color-mix(in srgb, var(--duo-tlo) 55%, #FFFFFF); }
@media (max-width: 860px) { .os-zygzak .krok-grafika { margin-inline: auto; } .os-zygzak li { text-align: center; } }

/* --- Zabiegi: karty usług z grafikami (zamiast biednej listy numerowanej) --- */
.lista-uslug { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: clamp(18px, 2.4vw, 28px); list-style: none; padding: 0; margin: clamp(28px, 4vw, 44px) 0 0; }
.lista-uslug li { position: relative; display: grid; grid-template-columns: clamp(150px, 34%, 220px) 1fr; gap: clamp(12px, 1.8vw, 20px); align-items: start; padding: clamp(16px, 2vw, 22px); background: color-mix(in srgb, var(--tlo) 55%, #FFFFFF); border: 1px solid color-mix(in oklab, var(--duo) 22%, transparent); border-radius: 18px; overflow: hidden; transition: translate .35s var(--plynnie), box-shadow .35s var(--plynnie), border-color .35s var(--plynnie); }
.lista-uslug li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--akcent), var(--duo)); opacity: 0; transition: opacity .35s var(--plynnie); }
.lista-uslug li:hover, .lista-uslug li:focus-within { translate: 0 -4px; box-shadow: 0 18px 40px -18px color-mix(in oklab, var(--akcent) 45%, transparent); border-color: color-mix(in oklab, var(--duo) 55%, transparent); }
.lista-uslug li:hover::before, .lista-uslug li:focus-within::before { opacity: 1; }
.usluga-grafika { width: 100%; height: auto; border-radius: 12px; align-self: center; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--duo) 30%, transparent); }
.usluga-tresc { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.usluga-tresc h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.usluga-tresc h3::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--duo); box-shadow: 0 0 0 3px color-mix(in oklab, var(--duo) 25%, transparent); }
.usluga-tresc p { margin: 0; font-size: clamp(.9rem, 1vw, .98rem); line-height: 1.55; color: var(--tekst-2); }
.usluga-stopka { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.cena-plakietka { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--duo-tekst, #6B5407); background: linear-gradient(120deg, color-mix(in oklab, var(--duo) 22%, #FFFDF5), color-mix(in oklab, var(--duo) 38%, #FFF6DE)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--duo) 45%, transparent); }
.link-maly { font-size: .85rem; font-weight: 700; color: var(--akcent); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--akcent) 40%, transparent); transition: color .25s var(--plynnie), border-color .25s var(--plynnie); }
.link-maly:hover, .link-maly:focus-visible { color: var(--duo); border-color: var(--duo); }
@media (max-width: 640px) { .lista-uslug li { grid-template-columns: 1fr; } .usluga-grafika { max-width: 240px; margin-inline: auto; } .usluga-tresc { text-align: center; } .usluga-tresc h3 { justify-content: center; } .usluga-stopka { justify-content: center; } }
@media (prefers-reduced-motion: no-preference) { .lista-uslug .reveal { opacity: 0; translate: 0 16px; transition: opacity .7s var(--plynnie), translate .7s var(--plynnie); transition-delay: calc(var(--i, 0) * .1s); } .lista-uslug .reveal.widoczny { opacity: 1; translate: 0 0; } }

/* --- Orbitalna galeria zdjęć krążąca wokół sekcji "Jak pracujemy" --- */
#proces { position: relative; overflow: hidden; }
.orbital-galerii { position: absolute; inset: -8vw -4vw auto -4vw; aspect-ratio: 4/3; pointer-events: none; z-index: 0; }
.orbital-fota { position: absolute; width: clamp(48px, 5.5vw, 82px); height: clamp(48px, 5.5vw, 82px); left: 50%; top: 50%; border-radius: 50%; padding: 2px; background: linear-gradient(135deg, var(--duo), var(--akcent)); opacity: .9; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tlo) 40%, transparent), 0 8px 24px -8px rgba(0,0,0,.25); transform: translate(-50%, -50%) rotate(calc(var(--f, 0) / 5 * 360deg)) translateY(calc(-60vh * var(--s, 1))); }
.orbital-fota img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: var(--tlo-2); }
@media (prefers-reduced-motion: no-preference) {
  .orbital-galerii { animation: orbita-obrot 60s linear infinite; }
  .orbital-fota { animation: orbita-anty 60s linear infinite; }
  @keyframes orbita-obrot { to { transform: rotate(360deg); } }
  @keyframes orbita-anty { to { transform: translate(-50%, -50%) rotate(calc(var(--f, 0) / 11 * 360deg - 360deg)) translateY(calc(-38vh * var(--s, 1))); } }
}
@media (max-width: 900px) {
  .orbital-galerii { inset: -18vw -14vw -22vw -14vw; }
  .orbital-fota { width: clamp(36px, 8vw, 56px); height: clamp(36px, 8vw, 56px); transform: translate(-50%, -50%) rotate(calc(var(--f, 0) / 5 * 360deg)) translateY(calc(-26vh * var(--s, 1))); }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes orbita-anty { to { transform: translate(-50%, -50%) rotate(calc(var(--f, 0) / 11 * 360deg - 360deg)) translateY(calc(-26vh * var(--s, 1))); } }
  }
}
@media (max-width: 560px) {
  .orbital-galerii { inset: -24vw -20vw -30vw -20vw; }
  .orbital-fota { width: clamp(30px, 9.5vw, 44px); height: clamp(30px, 9.5vw, 44px); opacity: .78; transform: translate(-50%, -50%) rotate(calc(var(--f, 0) / 5 * 360deg)) translateY(calc(-22vh * var(--s, 1))); }
  .orbital-fota img { object-fit: cover; }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes orbita-anty { to { transform: translate(-50%, -50%) rotate(calc(var(--f, 0) / 11 * 360deg - 360deg)) translateY(calc(-22vh * var(--s, 1))); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .orbital-galerii, .orbital-fota { animation: none !important; }
}
#proces { position: relative; overflow: hidden; }
#proces .wnetrze, #proces .os { position: relative; z-index: 2; }
.orbital-galerii { z-index: 0; }
.orbital-fota { transform: translate(-50%, -50%) rotate(calc(var(--f, 0) / 5 * 360deg)) translateY(calc(-38vh * var(--s, 1))); }

/* --- Orbitalna galeria przed/po krążąca wokół sekcji "Zabiegi" --- */
#oferta { position: relative; overflow: hidden; padding-bottom: clamp(80px, 14vw, 140px); }
.orbital-galerii-zabiegow { position: absolute; inset: auto -6vw -18vw -6vw; aspect-ratio: 16/9; pointer-events: none; z-index: 0; }
.orbital-fota-z { position: absolute; width: clamp(54px, 8vw, 90px); height: clamp(54px, 8vw, 90px); left: 50%; top: 50%; border-radius: 14px; padding: 3px; background: linear-gradient(135deg, var(--akcent), var(--duo)); opacity: .75; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tlo) 45%, transparent), 0 16px 42px -16px rgba(0,0,0,.28); transform: translate(-50%, -50%) rotate(calc(var(--f, 0) / 8 * 360deg)) translateY(calc(-32vh * var(--s, 1))); }
.orbital-fota-z img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; background: var(--tlo-2); }
@media (prefers-reduced-motion: no-preference) {
  .orbital-galerii-zabiegow { animation: orbita-obrot-z 76s linear infinite; }
  .orbital-fota-z { animation: orbita-anty-z 76s linear infinite; }
  @keyframes orbita-obrot-z { to { transform: rotate(360deg); } }
  @keyframes orbita-anty-z { to { transform: translate(-50%, -50%) rotate(calc(var(--f, 0) / 8 * 360deg - 360deg)) translateY(calc(-32vh * var(--s, 1))); } }
}
@media (max-width: 900px) {
  .orbital-galerii-zabiegow { inset: auto -10vw -24vw -10vw; }
  .orbital-fota-z { width: clamp(42px, 9vw, 72px); height: clamp(42px, 9vw, 72px); transform: translate(-50%, -50%) rotate(calc(var(--f, 0) / 8 * 360deg)) translateY(calc(-26vh * var(--s, 1))); }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes orbita-anty-z { to { transform: translate(-50%, -50%) rotate(calc(var(--f, 0) / 8 * 360deg - 360deg)) translateY(calc(-26vh * var(--s, 1))); } }
  }
}
@media (max-width: 560px) {
  .orbital-galerii-zabiegow { inset: auto -12vw -32vw -12vw; }
  .orbital-fota-z { width: clamp(36px, 10vw, 58px); height: clamp(36px, 10vw, 58px); opacity: .65; transform: translate(-50%, -50%) rotate(calc(var(--f, 0) / 8 * 360deg)) translateY(calc(-20vh * var(--s, 1))); }
  .orbital-fota-z img { object-fit: cover; }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes orbita-anty-z { to { transform: translate(-50%, -50%) rotate(calc(var(--f, 0) / 8 * 360deg - 360deg)) translateY(calc(-20vh * var(--s, 1))); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .orbital-galerii-zabiegow, .orbital-fota-z { animation: none !important; }
}

/* --- Placeholdery dla galerii (zdjecia z Booksy) --- */
.galeria-info { font-size: .98rem; color: var(--tekst-2); opacity: .9; }
.galeria .placeholder-fota { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 16px; border-radius: var(--promien); background: color-mix(in oklab, var(--duo-tlo) 48%, var(--tlo)); border: 2px dashed color-mix(in oklab, var(--duo) 45%, transparent); }
.galeria .placeholder-fota p { margin: 0 0 4px; font: 600 clamp(.85rem, 1.1vw, 1rem)/1.2 var(--font-tekst); color: var(--duo-tekst, #6B5407); }
.galeria .placeholder-fota span { font-size: clamp(.78rem, 0.9vw, .86rem); color: var(--tekst-2); opacity: .9; }
.orbital-fota .placeholder-fota, .orbital-fota-z .placeholder-fota { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; width: 100%; height: 100%; border-radius: 8px; background: color-mix(in oklab, var(--duo-tlo) 55%, var(--tlo)); border: 1px dashed color-mix(in oklab, var(--duo) 40%, transparent); }
.orbital-fota .placeholder-fota p, .orbital-fota-z .placeholder-fota p { margin: 0; font: 600 .7rem/1 var(--font-tekst); color: var(--duo-tekst, #6B5407); }
#oferta .wnetrze, #oferta .naglowek-sekcji, #oferta .lista-uslug { position: relative; z-index: 3; }

/* =============== MAKSYMALNE EFEKTY WOW DLA KOSMETOLOGII =============== */

/* --- Plynna pozniejsza po cursie --- */
@media (prefers-reduced-motion: no-preference) {
  .wow-efekty { cursor: none; }
  .poswiata-kursora {
    position: fixed;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--duo) 18%, transparent) 0%, transparent 70%);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity .6s var(--plynnie);
  }
  .wow-efekty .poswiata-kursora { opacity: 1; }
}

/* --- Animowane tlo hero z wzorem organicznym --- */
.wow-efekty .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 80%, color-mix(in oklab, var(--akcent) 8%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 80% 20%, color-mix(in oklab, var(--duo) 12%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 50%, color-mix(in oklab, var(--akcent) 4%, transparent) 0%, transparent 70%);
  z-index: 0;
  animation: tloPlynie 22s ease-in-out infinite alternate;
}
@keyframes tloPlynie {
  0% { transform: scale(1) rotate(0deg); filter: blur(0px); }
  50% { transform: scale(1.08) rotate(3deg); filter: blur(4px); }
  100% { transform: scale(1.04) rotate(-2deg); filter: blur(2px); }
}

/* --- Zlota poświata wokół kart w hero --- */
.wow-efekty .hero-kolaz-wizual::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle, color-mix(in oklab, var(--duo) 25%, transparent) 0%, transparent 65%);
  z-index: -1;
  opacity: .6;
  animation: poswiataPulsuje 4s ease-in-out infinite;
  filter: blur(20px);
}
@keyframes poswiataPulsuje {
  0%, 100% { opacity: .4; transform: scale(.92); }
  50% { opacity: .7; transform: scale(1.08); }
}

/* --- Magnetyczny hover na wszystkich kartach --- */
@media (prefers-reduced-motion: no-preference) {
  .wow-efekty .pakiet,
  .wow-efekty .lista-uslug li,
  .wow-efekty .galeria figure,
  .wow-efekty .os li,
  .wow-efekty .porownanie tbody tr,
  .wow-efekty details,
  .wow-efekty .wypowiedz-karta,
  .wow-efekty .cytaty blockquote {
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1),
                box-shadow .4s var(--plynnie),
                border-color .4s var(--plynnie),
                background .4s var(--plynnie);
  }

  /* --- Podniesienie karty o 3D efekt --- */
  .wow-efekty .pakiet:hover,
  .wow-efekty .lista-uslug li:hover,
  .wow-efekty .wypowiedz-karta:hover,
  .wow-efekty .cytaty blockquote:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow:
      0 40px 80px -30px color-mix(in oklab, var(--akcent) 45%, transparent),
      0 0 0 1px color-mix(in oklab, var(--duo) 35%, transparent),
      inset 0 1px 0 0 color-mix(in oklab, var(--duo) 20%, #FFF);
  }

  /* --- Zlota ramka przy hoverze z efektem "shimmer" --- */
  .wow-efekty .pakiet::before,
  .wow-efekty .lista-uslug li::before,
  .wow-efekty .galeria figure::before,
  .wow-efekty .wypowiedz-karta::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(120deg,
      transparent 0%,
      color-mix(in oklab, var(--duo) 0%, transparent) 25%,
      color-mix(in oklab, var(--duo) 65%, #FFF) 50%,
      color-mix(in oklab, var(--duo) 0%, transparent) 75%,
      transparent 100%);
    background-size: 200% 200%;
    background-position: 100% 100%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s var(--plynnie), background-position .8s var(--plynnie);
    z-index: 2;
  }

  .wow-efekty .pakiet:hover::before,
  .wow-efekty .lista-uslug li:hover::before,
  .wow-efekty .galeria figure:hover::before,
  .wow-efekty .wypowiedz-karta:hover::before {
    opacity: 1;
    background-position: 0% 0%;
  }
}

/* --- Glowny przycisk: elegancki, z zlotym blaskiem --- */
.wow-efekty .przycisk {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--akcent), color-mix(in oklab, var(--akcent) 85%, var(--duo)));
  border: none;
  box-shadow:
    0 8px 30px -12px color-mix(in oklab, var(--akcent) 70%, transparent),
    0 0 0 1px color-mix(in oklab, var(--akcent) 35%, transparent),
    inset 0 1px 0 0 color-mix(in oklab, var(--duo) 40%, #FFF);
  transition: all .4s cubic-bezier(.34, 1.56, .64, 1);
}

.wow-efekty .przycisk::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in oklab, var(--duo) 45%, #FFF) 50%,
    transparent);
  transition: left .9s cubic-bezier(.34, 1.56, .64, 1);
}

.wow-efekty .przycisk:hover::before {
  left: 100%;
}

.wow-efekty .przycisk:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow:
    0 20px 50px -20px color-mix(in oklab, var(--akcent) 80%, transparent),
    0 0 40px -10px color-mix(in oklab, var(--duo) 50%, transparent),
    0 0 0 1px color-mix(in oklab, var(--duo) 45%, transparent);
  letter-spacing: .03em;
}

/* --- Zlote wzory dekoracyjne w rogach sekcji --- */
.wow-efekty .sekcja {
  position: relative;
  overflow: visible;
}

.wow-efekty .sekcja::before,
.wow-efekty .sekcja::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--duo) 8%, transparent) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, color-mix(in oklab, var(--akcent) 5%, transparent) 0%, transparent 55%);
  opacity: .7;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

.wow-efekty .sekcja::before {
  top: -60px;
  right: -40px;
  animation: wzorOrbit1 18s linear infinite;
}

.wow-efekty .sekcja::after {
  bottom: -50px;
  left: -30px;
  animation: wzorOrbit2 22s linear infinite reverse;
  width: 140px;
  height: 140px;
}

@keyframes wzorOrbit1 {
  0% { transform: rotate(0deg) translateX(10px); }
  100% { transform: rotate(360deg) translateX(10px); }
}

@keyframes wzorOrbit2 {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.15); opacity: .5; }
  100% { transform: rotate(360deg) scale(1); }
}

/* --- Ukrycie dekoracji dla ciemnej sekcji, zeby nie zepsuly efektu --- */
.wow-efekty .sekcja.pole-ciemny::before,
.wow-efekty .sekcja.pole-ciemny::after {
  display: none;
}

/* --- Animowany gradient na manifest i pasek CT --- */
.wow-efekty .sekcja-manifest,
.wow-efekty #pasek-cta {
  position: relative;
  background-size: 200% 200%;
  animation: gradientPrzesuwa 12s ease infinite;
}

@keyframes gradientPrzesuwa {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Podswietlenie slow kluczowych w tekscie --- */
.wow-efekty .manifest,
.wow-efekty .hero h1 em,
.wow-efekty .naglowek-sekcji h2 {
  position: relative;
  text-shadow:
    0 0 40px color-mix(in oklab, var(--duo) 30%, transparent),
    0 2px 4px color-mix(in oklab, var(--tekst) 15%, transparent);
}

/* --- Zwiekszony kontrast i animacja dla liczb (ocena 5,0, 83 opinie) --- */
.wow-efekty .liczby b {
  position: relative;
  background: linear-gradient(135deg, var(--duo), color-mix(in oklab, var(--duo) 70%, var(--akcent)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px color-mix(in oklab, var(--duo) 40%, transparent));
}

/* --- Mikro-interakcje: ikony w kolkach obracaja sie --- */
@media (prefers-reduced-motion: no-preference) {
  .wow-efekty .bento-karta:hover .ikona:not(.mala),
  .wow-efekty .kafelek:hover .ikona:not(.mala),
  .wow-efekty .lista-num li:hover .nr .ikona {
    transform: rotate(12deg) scale(1.12);
  }

  /* --- Galeria: zdjecia lekko powiekszaja sie z subtelnym blaskiem --- */
  .wow-efekty .galeria figure {
    overflow: hidden;
  }
  .wow-efekty .galeria figure:hover {
    transform: scale(1.04);
    box-shadow:
      0 30px 60px -25px color-mix(in oklab, var(--akcent) 55%, transparent),
      0 0 0 1px color-mix(in oklab, var(--duo) 30%, transparent);
    z-index: 10;
  }
  .wow-efekty .galeria figure:hover .placeholder-fota {
    box-shadow: inset 0 0 30px color-mix(in oklab, var(--duo) 25%, transparent);
  }
}

/* --- Subtelny efekt "oddychania" dla obrazu w hero --- */
.wow-efekty .kolaz-karta.k2 img {
  animation: oddychanieObrazu 6s ease-in-out infinite;
}
@keyframes oddychanieObrazu {
  0%, 100% { transform: scale(1); filter: saturate(1); }
  50% { transform: scale(1.03); filter: saturate(1.12) contrast(1.03); }
}

/* --- Tasma: wieksza przezroczystosc i efekt glow --- */
.wow-efekty .tasma {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--akcent) 6%, var(--tlo)),
    color-mix(in oklab, var(--duo) 10%, var(--tlo)),
    color-mix(in oklab, var(--akcent) 6%, var(--tlo)));
  box-shadow:
    0 1px 0 0 color-mix(in oklab, var(--linia) 60%, transparent),
    0 -1px 0 0 color-mix(in oklab, var(--linia) 60%, transparent),
    inset 0 0 30px color-mix(in oklab, var(--duo) 8%, transparent);
}

/* --- Efekt glassmorphism dla paska naglowka przy przewijaniu --- */
.wow-efekty header.przewiniety .naglowek {
  background: color-mix(in oklab, var(--tlo) 88%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 4px 40px -20px color-mix(in oklab, var(--tekst) 40%, transparent),
    0 1px 0 0 color-mix(in oklab, var(--linia) 60%, transparent);
}

/* --- FAQ: wieksza animacja przy otwieraniu --- */
.wow-efekty details[open] {
  background: color-mix(in oklab, var(--duo-tlo) 45%, var(--tlo));
  border-color: color-mix(in oklab, var(--duo) 55%, transparent);
  box-shadow:
    0 8px 30px -15px color-mix(in oklab, var(--duo) 35%, transparent),
    inset 0 1px 0 0 color-mix(in oklab, var(--duo) 20%, #FFF);
}

/* --- Drobny efekt fade-in dla wszystkich elementow przy ladowaniu --- */
.wow-efekty .hero-tekst {
  animation: wjazdTekstHero 1s cubic-bezier(.34, 1.56, .64, 1) .2s backwards;
}
.wow-efekty .hero-kolaz-wizual {
  animation: wjazdObrazHero 1.2s cubic-bezier(.34, 1.56, .64, 1) .4s backwards;
}
@keyframes wjazdTekstHero {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes wjazdObrazHero {
  from { opacity: 0; transform: translateX(40px) scale(.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* --- Zwiekszenie predkosci animacji reveal dla wiekszego dynamizmu --- */
@media (prefers-reduced-motion: no-preference) {
  .wow-efekty .reveal {
    transition-duration: .8s;
    transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
  }
  .wow-efekty .reveal.widoczny {
    transition-delay: calc(var(--i, 0) * .08s);
  }
}

/* --- Zlote linie ozdobne nad/pod sekcjami --- */
.wow-efekty .sekcja > .wnetrze::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--duo), color-mix(in oklab, var(--duo) 40%, transparent));
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--plynnie), opacity .4s var(--plynnie);
}

.wow-efekty .sekcja:has(.naglowek-sekcji.widoczny) > .wnetrze::before {
  opacity: 1;
  transform: scaleX(1);
}

/* --- Dostosowania dla mobilnych --- */
@media (max-width: 900px) {
  .wow-efekty .poswiata-kursora { display: none; }
  .wow-efekty { cursor: auto; }
  .wow-efekty .sekcja::before,
  .wow-efekty .sekcja::after {
    width: 100px;
    height: 100px;
    opacity: .4;
  }
  .wow-efekty .pakiet:hover,
  .wow-efekty .lista-uslug li:hover {
    transform: translateY(-4px);
  }
}

/* =============== DODATKOWE WZORY I ANIMACJE DLA SEKCJI OPINII =============== */

/* Animowane tlo pod opiniami */
#opinie {
  position: relative;
  overflow: hidden;
}

#opinie::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 60% 40% at 15% 70%, color-mix(in oklab, var(--akcent) 10%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 30%, color-mix(in oklab, var(--duo) 14%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 50% 50%, color-mix(in oklab, var(--akcent) 5%, transparent) 0%, transparent 70%);
  z-index: -1;
  opacity: 0.8;
  animation: opinieTloPlynie 28s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes opinieTloPlynie {
  0% { transform: scale(1) rotate(0deg) translate(0, 0); filter: blur(0px); }
  33% { transform: scale(1.06) rotate(2deg) translate(8px, -4px); filter: blur(3px); }
  66% { transform: scale(1.04) rotate(-1deg) translate(-4px, 6px); filter: blur(1px); }
  100% { transform: scale(1.08) rotate(1.5deg) translate(4px, -2px); filter: blur(4px); }
}

/* Dekoracyjne wzory w rogach sekcji */
#opinie::after,
#opinie .wnetrze::before,
#opinie .wnetrze::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* Wzor w rogu gornym prawym */
#opinie::after {
  top: 40px;
  right: 40px;
  width: 140px;
  height: 140px;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--duo) 20%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, color-mix(in oklab, var(--akcent) 12%, transparent) 0%, transparent 60%);
  opacity: 0.6;
  animation: opinieWzorOrbita1 24s linear infinite;
}

/* Wzor w rogu dolnym lewym */
#opinie .wnetrze::before {
  bottom: 60px;
  left: 20px;
  width: 100px;
  height: 100px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--duo) 16%, transparent) 0%, transparent 50%);
  opacity: 0.5;
  animation: opinieWzorOrbita2 30s linear infinite reverse;
}

/* Wzor w rogu dolnym prawym */
#opinie .wnetrze::after {
  bottom: 40px;
  right: 60px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 40%, color-mix(in oklab, var(--akcent) 18%, transparent) 0%, transparent 55%);
  opacity: 0.45;
  animation: opinieWzorOddychanie 4.5s ease-in-out infinite alternate;
}

@keyframes opinieWzorOrbita1 {
  0% { transform: rotate(0deg) translateX(12px) scale(1); }
  50% { transform: rotate(180deg) translateX(-8px) scale(1.12); opacity: 0.35; }
  100% { transform: rotate(360deg) translateX(12px) scale(1); }
}

@keyframes opinieWzorOrbita2 {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.18); opacity: 0.3; }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes opinieWzorOddychanie {
  0% { transform: scale(0.9); opacity: 0.35; }
  100% { transform: scale(1.15); opacity: 0.65; }
}

/* Animowane pojawianie sie gwiazdek jedna po drugiej */
.opinia-gwiazdki {
  display: flex;
  gap: 4px;
}

.opinia-gwiazdki .opinia-gwiazdka {
  opacity: 0;
  transform: scale(0) rotate(-120deg);
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1),
              opacity .4s var(--plynnie);
}

/* Gdy karta jest widoczna, animujemy gwiazdki jedna po drugiej */
.opinia-slajd.widoczny .opinia-gwiazdka:nth-child(1) {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition-delay: .2s;
}

.opinia-slajd.widoczny .opinia-gwiazdka:nth-child(2) {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition-delay: .35s;
}

.opinia-slajd.widoczny .opinia-gwiazdka:nth-child(3) {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition-delay: .5s;
}

.opinia-slajd.widoczny .opinia-gwiazdka:nth-child(4) {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition-delay: .65s;
}

.opinia-slajd.widoczny .opinia-gwiazdka:nth-child(5) {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition-delay: .8s;
}

/* Efekt hover na gwiazdki - sekwencyjny pojaw */
@media (prefers-reduced-motion: no-preference) {
  .opinia-slajd:hover .opinia-gwiazdka {
    color: var(--duo);
    filter: drop-shadow(0 0 8px color-mix(in oklab, var(--duo) 50%, transparent));
    transition-delay: 0s !important;
    animation: gwiazdkaPulse 1s ease-in-out infinite alternate;
  }

  .opinia-slajd:hover .opinia-gwiazdka:nth-child(1) { animation-delay: 0s; }
  .opinia-slajd:hover .opinia-gwiazdka:nth-child(2) { animation-delay: .08s; }
  .opinia-slajd:hover .opinia-gwiazdka:nth-child(3) { animation-delay: .16s; }
  .opinia-slajd:hover .opinia-gwiazdka:nth-child(4) { animation-delay: .24s; }
  .opinia-slajd:hover .opinia-gwiazdka:nth-child(5) { animation-delay: .32s; }
}

@keyframes gwiazdkaPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}

/* Kolor gwiazdek */
.opinia-gwiazdka {
  color: var(--duo);
}

/* Animowany avatar przy hoverze */
.opinia-avatar {
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .4s var(--plynnie),
              background .4s var(--plynnie),
              color .4s var(--plynnie);
}

.opinia-slajd:hover .opinia-avatar {
  transform: scale(1.12) rotate(5deg);
  box-shadow: 0 8px 24px -10px color-mix(in oklab, var(--duo) 50%, transparent);
  background: linear-gradient(135deg, var(--duo), var(--akcent));
  color: var(--na-duo, #FFF);
}

/* Efekt oddychania dla aktywnej karty */
@media (prefers-reduced-motion: no-preference) {
  .opinia-slajd.widoczny {
    animation: opiniaOddychanie 3.5s ease-in-out infinite alternate;
    animation-delay: 1s;
  }
}

@keyframes opiniaOddychanie {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-4px) scale(1.01); }
}

/* Zapewniamy, ze zawartosc jest nad wzorami */
#opinie .naglowek-sekcji,
#opinie .karuzela-opinii,
#opinie .opinie-podsumowanie {
  position: relative;
  z-index: 2;
}