/* bartus-zieleniec.com — Centrum Szkolenia Ski & Snow Bartuś (Rimset, 2026-10).
   Kolory z logo: granat #3947A4 + żółty #FCEF03; krój Barlow / Barlow Condensed z własnego serwera (assets/fonty). */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonty/barlow-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonty/barlow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonty/barlow-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonty/barlow-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonty/barlow-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonty/barlow-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonty/barlow-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonty/barlow-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonty/barlow-condensed-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonty/barlow-condensed-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonty/barlow-condensed-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonty/barlow-condensed-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonty/barlow-condensed-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonty/barlow-condensed-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --granat: #3947a4;          /* z logo */
  --granat-ciemny: #2a3487;
  --noc: #171d55;             /* stopka, pasek po przewinieciu */
  --noc-2: #10154a;
  --zolty: #fcef03;           /* z logo */
  --zolty-2: #f2e200;
  --tekst: #1b2042;
  --tekst-2: #4a5072;
  --tekst-3: #7a7f99;
  --linia: #e2e6f0;
  --snieg: #f2f5fa;
  --lod: #e8eefb;
  --czerwony: #e5484d;
  --cien: 0 24px 60px -28px rgba(23, 29, 85, .45);
  --f-tyt: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-tekst: "Barlow", system-ui, sans-serif;
  --pasek-h: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: #fff; color: var(--tekst-2); font: 400 17px/1.65 var(--f-tekst); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--tekst); font-family: var(--f-tyt); font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--zolty); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.szer { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.ik { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ik-pelna { fill: currentColor; stroke: none; }

/* ---------- przyciski ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 2px solid transparent; border-radius: 6px;
  font: 700 18px/1 var(--f-tyt); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.btn .ik { width: 20px; height: 20px; }
.btn-zolty { background: var(--zolty); color: var(--noc); }
.btn-zolty:hover { background: #fff; }
.btn-granat { background: var(--granat); color: #fff; }
.btn-granat:hover { background: var(--noc); }
.btn-obrys { border-color: var(--granat); color: var(--granat); background: transparent; }
.btn-obrys:hover { background: var(--granat); color: #fff; }
.btn-jasny { border-color: rgba(255, 255, 255, .75); color: #fff; background: rgba(16, 21, 74, .22); backdrop-filter: blur(4px); }
.btn-jasny:hover { background: var(--zolty); border-color: var(--zolty); color: var(--noc); }

/* przycisk z numerem telefonu (jak dzis: bialy obrys, duze cyfry) */
.btn-tel { display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px 13px; border: 2px solid #fff; border-radius: 6px; color: #fff;
  background: rgba(16, 21, 74, .28); backdrop-filter: blur(4px); text-decoration: none; white-space: nowrap; font: 700 32px/1 var(--f-tyt); letter-spacing: .04em;
  transition: background-color .2s, color .2s, border-color .2s; }
.btn-tel .ik { width: 24px; height: 24px; color: var(--zolty); transition: color .2s; }
.btn-tel:hover { background: var(--zolty); border-color: var(--zolty); color: var(--noc); }
.btn-tel:hover .ik { color: var(--noc); }

/* ---------- naglowek ---------- */
.naglowek { position: fixed; inset: 0 0 auto; z-index: 50; color: #fff; transition: background-color .3s, box-shadow .3s; }
.naglowek::before { content: ""; position: absolute; inset: 0 0 -60px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 21, 74, .62), rgba(16, 21, 74, 0)); transition: opacity .3s; }
/* logo z lewej, menu na środku strony, kamera z prawej */
.naglowek .szer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: 96px; transition: height .3s; }
.naglowek .logo { justify-self: start; }
.logo { flex: none; display: block; width: 112px; height: 112px; margin-top: 46px; border-radius: 50%; transition: width .3s, height .3s, margin .3s;
  filter: drop-shadow(0 8px 18px rgba(8, 12, 50, .35)); }
.logo img { width: 100%; height: 100%; }
.menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px clamp(18px, 2.3vw, 34px); margin: 0; padding: 0; list-style: none; }
.menu a { position: relative; display: block; padding: 10px 0; color: #fff; text-decoration: none; font: 600 18px/1 var(--f-tyt); letter-spacing: .12em; text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(8, 12, 50, .35); transition: color .2s; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; border-radius: 2px; background: var(--zolty); transform: scaleX(0);
  transform-origin: left; transition: transform .25s; }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: var(--zolty); }
.naglowek-prawa { justify-self: end; display: flex; align-items: center; gap: 12px; }
.kamera-pill { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 16px; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 999px;
  color: #fff; text-decoration: none; font: 600 15px/1 var(--f-tyt); letter-spacing: .12em; text-transform: uppercase; transition: background-color .2s, color .2s; }
.kamera-pill:hover { background: #fff; color: var(--noc); }
/* sama ikona — obok „Zapisz się” menu zostaje na środku strony */
.kamera-pill { position: relative; width: 40px; padding: 0; justify-content: center; }
.kamera-pill .ik { width: 20px; height: 20px; }
.kamera-pill .kropka-live { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; }
.zapisy-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--zolty); color: var(--noc);
  text-decoration: none; white-space: nowrap; font: 700 15px/1 var(--f-tyt); letter-spacing: .12em; text-transform: uppercase; transition: background-color .2s; }
.zapisy-pill .ik { width: 17px; height: 17px; }
.zapisy-pill:hover { background: #fff; }
.kropka-live { width: 9px; height: 9px; border-radius: 50%; background: var(--czerwony); box-shadow: 0 0 0 0 rgba(229, 72, 77, .7); animation: puls 1.8s infinite; }
@keyframes puls { 70% { box-shadow: 0 0 0 8px rgba(229, 72, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } }
.ikona-btn { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; border: 0; border-radius: 50%; cursor: pointer; text-decoration: none; }
.ikona-btn.tel { background: var(--zolty); color: var(--noc); }
.ikona-btn.burger { background: rgba(255, 255, 255, .14); color: #fff; }
.burger .ik-x, .burger[aria-expanded="true"] .ik-menu { display: none; }
.burger[aria-expanded="true"] .ik-x { display: block; }

.naglowek.przewiniety, .naglowek.otwarte { background: var(--noc); box-shadow: 0 10px 30px -14px rgba(8, 12, 50, .6); }
.naglowek.przewiniety::before, .naglowek.otwarte::before { opacity: 0; }
.naglowek.przewiniety .szer { height: var(--pasek-h); }
.naglowek.przewiniety .logo, .naglowek.otwarte .logo { width: 58px; height: 58px; margin-top: 0; }

/* menu na telefonie */
.panel { position: fixed; inset: var(--pasek-h) 0 0; z-index: 49; display: flex; flex-direction: column; gap: 28px; padding: 26px 24px 40px; overflow-y: auto;
  background: var(--noc); color: #fff; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s; }
.panel.otwarte { transform: none; opacity: 1; visibility: visible; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li a { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #fff;
  text-decoration: none; font: 700 30px/1 var(--f-tyt); letter-spacing: .04em; text-transform: uppercase; }
.panel li a[aria-current="page"] { color: var(--zolty); }
.panel li a .ik { color: rgba(255, 255, 255, .45); }
.panel-tel { display: grid; gap: 10px; }
.panel-tel b { font: 600 14px/1 var(--f-tyt); letter-spacing: .16em; text-transform: uppercase; color: var(--zolty); }
.panel-tel .btn-tel { justify-content: center; font-size: 28px; }

/* ---------- hero (start) ---------- */
.hero { position: relative; height: 100svh; min-height: 640px; max-height: 960px; overflow: hidden; color: #fff; background: var(--noc); }
.slajd { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.slajd.aktywny { opacity: 1; }
.slajd img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 8s linear; }
.slajd.aktywny img { transform: scale(1); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(16, 21, 74, .38) 0%, rgba(16, 21, 74, .12) 38%, rgba(16, 21, 74, .58) 100%),
              radial-gradient(70% 55% at 50% 52%, rgba(16, 21, 74, .32), rgba(16, 21, 74, 0)); }
.hero-tresc { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 90px 24px 70px; }
.nad { display: inline-flex; align-items: center; gap: 14px; margin: 0; font: 600 17px/1.2 var(--f-tyt); letter-spacing: .22em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 12px rgba(8, 12, 50, .5); }
.nad::before, .nad::after { content: ""; width: 34px; height: 3px; border-radius: 2px; background: var(--zolty); }
.hero-tytul { margin: 20px 0 34px; color: var(--zolty); font-weight: 800; font-size: clamp(58px, 8.6vw, 124px); line-height: .9; letter-spacing: .005em;
  text-shadow: 0 6px 40px rgba(8, 12, 50, .45); }
.telefony { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.hero-formularz { margin-top: 20px; min-height: 58px; padding: 0 30px; font-size: 20px; }
.hero-strz { position: absolute; z-index: 3; top: 50%; width: 58px; height: 58px; margin-top: -29px; display: grid; place-items: center; border: 1.5px solid rgba(255, 255, 255, .7);
  border-radius: 50%; background: rgba(16, 21, 74, .25); color: #fff; cursor: pointer; transition: background-color .2s, color .2s; }
.hero-strz:hover { background: #fff; color: var(--noc); }
.hero-strz.lewa { left: 40px; } .hero-strz.prawa { right: 40px; }
.kropki { position: absolute; z-index: 3; left: 50%; bottom: 112px; display: flex; gap: 10px; transform: translateX(-50%); }
.kropki button { width: 34px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .5); cursor: pointer; transition: background-color .2s, width .3s; }
.kropki button[aria-current="true"] { width: 54px; background: var(--zolty); }

/* ---------- fakty pod hero ---------- */
.fakty { position: relative; z-index: 5; margin-top: -78px; }
.fakty-karta { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: 16px; box-shadow: var(--cien); }
.fakt { display: flex; gap: 16px; align-items: flex-start; padding: 28px 26px; }
.fakt + .fakt { border-left: 1px solid var(--linia); }
.fakt-ik { flex: none; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--zolty); color: var(--noc); }
.fakt strong { display: block; margin-bottom: 4px; color: var(--granat); font: 700 27px/1 var(--f-tyt); text-transform: uppercase; letter-spacing: .01em; }
.fakt div > span { display: block; font-size: 14.5px; line-height: 1.45; color: var(--tekst-2); }

/* ---------- sekcje ---------- */
.sekcja { padding: 104px 0; }
.sekcja.snieg { background: var(--snieg); }
.nad-tytul { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--granat); font: 700 16px/1 var(--f-tyt); letter-spacing: .2em; text-transform: uppercase; }
.nad-tytul::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--zolty); box-shadow: 0 0 0 .5px rgba(57, 71, 164, .15); }
.tytul { font-size: clamp(38px, 4.4vw, 58px); color: var(--noc); }
.tytul em { font-style: normal; color: var(--granat); }
.glowa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.glowa p { max-width: 520px; margin: 0; font-size: 17.5px; }

/* ---------- kafle: 2 duze u gory + 3 pod spodem (5 w rzedzie bylo za ciasno) ---------- */
.kafle { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 48px; }
.kafel { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; grid-column: span 2; min-height: 400px;
  border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none; background: var(--noc); }
.kafel:nth-child(-n+2) { grid-column: span 3; min-height: 480px; }
.kafel img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.kafel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 21, 74, 0) 30%, rgba(16, 21, 74, .62) 58%, rgba(16, 21, 74, .95) 100%); }
.kafel::after { content: ""; position: absolute; left: 0; top: 0; height: 5px; width: 100%; background: var(--zolty); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.kafel:hover img { transform: scale(1.06); }
.kafel:hover::after { transform: scaleX(1); }
.kafel-tresc { padding: 30px 30px 28px; }
.kafel h3 { margin: 0 0 12px; color: #fff; font-size: 36px; }
.kafel:nth-child(-n+2) h3 { font-size: 46px; }
.kafel p { max-width: 480px; margin: 0 0 18px; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 8px rgba(8, 12, 50, .45); }
.kafel:nth-child(-n+2) p { font-size: 17px; }
.wiecej { display: inline-flex; align-items: center; gap: 8px; color: var(--zolty); font: 700 15px/1 var(--f-tyt); letter-spacing: .14em; text-transform: uppercase; }
.wiecej .ik { width: 18px; height: 18px; transition: transform .2s; }
.kafel:hover .wiecej .ik { transform: translateX(4px); }

/* ---------- o szkole ---------- */
.dwie { display: grid; grid-template-columns: 1.02fr 1fr; gap: 72px; align-items: center; }
.kolaz { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 560px; }
.kolaz img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.kolaz img:first-child { grid-row: span 2; }
.plakietka { position: absolute; left: -22px; bottom: 34px; display: grid; place-items: center; width: 138px; height: 138px; border-radius: 50%; background: var(--zolty);
  color: var(--noc); text-align: center; box-shadow: var(--cien); transform: rotate(-8deg); }
.plakietka b { display: block; font: 800 44px/.9 var(--f-tyt); }
.plakietka span { display: block; font: 700 14px/1.1 var(--f-tyt); letter-spacing: .12em; text-transform: uppercase; }
.lista-ok { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 12px; }
.lista-ok li { display: flex; gap: 12px; align-items: flex-start; color: var(--tekst); font-weight: 500; }
.lista-ok .ik { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--lod); color: var(--granat); stroke-width: 2.6; }
.ceny-skrot { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 30px; }
.cena-chip { display: flex; flex-direction: column; gap: 4px; min-width: 200px; padding: 14px 18px; border: 1px solid var(--linia); border-radius: 12px; background: #fff; }
.cena-chip small { font-size: 13.5px; color: var(--tekst-3); }
.cena-chip b { color: var(--noc); font: 700 28px/1 var(--f-tyt); }
.przyciski { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- warunki na stoku: kamera + wyciagi ---------- */
.warunki { position: relative; overflow: hidden; padding: 100px 0; background: var(--noc); color: rgba(255, 255, 255, .82); }
.warunki::before { content: ""; position: absolute; right: -180px; top: -200px; width: 620px; height: 620px; border-radius: 50%; background: var(--granat); opacity: .35; }
.warunki .szer { position: relative; }
.warunki .tytul, .warunki h3 { color: #fff; }
.warunki .nad-tytul { color: var(--zolty); }
.warunki .tytul em { color: var(--zolty); }
.warunki-siatka { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; margin-top: 44px; align-items: start; }
.kamera { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; text-decoration: none; color: #fff; }
.kamera img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.kamera:hover img { transform: scale(1.04); }
.kamera::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 21, 74, .1), rgba(16, 21, 74, .75)); }
.live { position: absolute; z-index: 2; left: 18px; top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 6px; border-radius: 6px; background: var(--czerwony);
  color: #fff; font: 700 14px/1 var(--f-tyt); letter-spacing: .16em; }
.live .kropka-live { background: #fff; }
.graj { position: absolute; z-index: 2; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; display: grid; place-items: center; border-radius: 50%;
  background: var(--zolty); color: var(--noc); box-shadow: 0 0 0 10px rgba(252, 239, 3, .25); transition: transform .2s; }
.kamera:hover .graj { transform: scale(1.08); }
.graj .ik { width: 34px; height: 34px; margin-left: 4px; }
.kamera-podpis { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.kamera-podpis b { font: 700 28px/1 var(--f-tyt); text-transform: uppercase; }
.kamera-podpis span { font-size: 14.5px; opacity: .85; }
.wyciagi { display: grid; gap: 12px; }
.wyciag { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 12px; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1); }
.znak { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; background: var(--zolty); color: var(--noc); font: 800 24px/1 var(--f-tyt); }
.wyciag h3, .wyciag h2 { margin-bottom: 6px; font-size: 24px; }
.wyciag-dane { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.wyciag-dane span { display: inline-flex; align-items: center; gap: 6px; }
.wyciag-dane .ik { width: 16px; height: 16px; color: var(--zolty); }
.wyciag-dane .nie { color: rgba(255, 255, 255, .4); }
.trudnosc { display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1 var(--f-tyt); letter-spacing: .1em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.trudnosc i { width: 12px; height: 12px; border-radius: 50%; background: #37bcec; }
.skipass { display: flex; gap: 14px; align-items: center; margin-top: 18px; padding: 16px 18px; border-radius: 12px; border: 1px dashed rgba(252, 239, 3, .5); font-size: 15px; }
.skipass .ik { color: var(--zolty); width: 26px; height: 26px; }
.skipass b { color: #fff; }

/* ---------- instagram ---------- */
.insta { padding: 90px 0 0; text-align: center; }
.insta-ik { width: 54px; height: 54px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 16px; color: #fff;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.hasztagi { margin: 0; font: 700 clamp(30px, 3.6vw, 46px)/1.1 var(--f-tyt); color: var(--noc); text-transform: lowercase; }
.hasztagi span { color: var(--granat); }
.insta p { margin: 12px 0 34px; font-size: 18px; }
.insta p a { color: var(--granat); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--zolty); }
.pasmo { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.insta-widzet { padding-bottom: 72px; }
.insta-widzet iframe { display: block; width: 100%; min-height: 200px; border: 0; overflow: hidden; }
.pasmo a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; }
.pasmo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s, filter .3s; }
.pasmo a:hover img { transform: scale(1.07); filter: brightness(.7); }

/* ---------- mapa ---------- */
.mapa { position: relative; height: 470px; background: #e5e9ef; }
.mapa iframe { width: 100%; height: 100%; border: 0; filter: saturate(.85); }
.mapa .szer { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: flex-end; }
.mapa-karta { pointer-events: auto; width: 360px; padding: 28px; border-radius: 16px; background: #fff; box-shadow: var(--cien); }
.mapa-karta img { width: 64px; height: 64px; margin-bottom: 14px; }
.mapa-karta h2 { font-size: 27px; color: var(--noc); margin-bottom: 8px; }
.mapa-karta p { margin: 0 0 18px; font-size: 16px; }
.mapa-karta .btn { width: 100%; }

/* ---------- stopka ---------- */
.stopka { background: var(--noc); color: rgba(255, 255, 255, .74); font-size: 15.5px; }
.stopka-gora { display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; gap: 40px; align-items: start; padding: 68px 0 56px; }
.stopka-logo, .social { align-self: center; }
.stopka h2 { margin-bottom: 14px; color: var(--zolty); font-size: 21px; letter-spacing: .08em; }
.stopka a { text-decoration: none; }
.stopka a:hover { color: var(--zolty); }
.stopka .tel { display: block; color: #fff; font: 600 21px/1.35 var(--f-tyt); letter-spacing: .03em; }
.stopka small { display: block; margin-bottom: 8px; font-size: 13.5px; color: rgba(255, 255, 255, .55); }
.stopka .stopka-formularz { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--zolty); font-weight: 600; }
.stopka .stopka-formularz:hover { color: #fff; }
.stopka-formularz .ik { width: 18px; height: 18px; }
.stopka-logo img { width: 128px; height: 128px; }
.social { display: flex; gap: 10px; justify-content: flex-end; }
.social a { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; transition: background-color .2s, color .2s; }
.social a:hover { background: var(--zolty); color: var(--noc); }
.stopka-dol { padding: 18px 0; background: var(--noc-2); font-size: 13.5px; color: rgba(255, 255, 255, .55); }
.stopka-dol .szer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.stopka-dol a { color: rgba(255, 255, 255, .8); }

/* staly pasek "zapisy" na telefonie */
.pasek-tel { display: none; }

/* ---------- podstrona ---------- */
.podhero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 560px; padding: 170px 0 64px; color: #fff; background: var(--noc); overflow: hidden; }
.podhero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.podhero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(16, 21, 74, .86) 0%, rgba(16, 21, 74, .55) 45%, rgba(16, 21, 74, .1) 100%), linear-gradient(0deg, rgba(16, 21, 74, .5), rgba(16, 21, 74, 0) 45%); }
.okruszki { display: flex; gap: 10px; margin: 0 0 16px; font: 600 15px/1 var(--f-tyt); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.okruszki a { color: #fff; text-decoration: none; }
.okruszki a:hover { color: var(--zolty); }
.podhero h1 { color: #fff; font-weight: 800; font-size: clamp(54px, 7.4vw, 100px); line-height: .9; }
.podhero-lead { max-width: 620px; margin: 18px 0 30px; font-size: 19px; color: rgba(255, 255, 255, .9); }
.cta-wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; }
.cta-wiersz > b { margin-right: 6px; color: var(--zolty); font: 700 19px/1 var(--f-tyt); letter-spacing: .16em; text-transform: uppercase; }
.cta-wiersz .btn-tel { font-size: 27px; padding: 12px 22px 11px; }

.zakladki { position: sticky; top: var(--pasek-h); z-index: 30; background: #fff; border-bottom: 1px solid var(--linia); }
.zakladki .szer { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.zakladki a { flex: none; padding: 20px 16px 17px; border-bottom: 3px solid transparent; color: var(--tekst-2); text-decoration: none; font: 600 17px/1 var(--f-tyt);
  letter-spacing: .12em; text-transform: uppercase; }
.zakladki a:hover, .zakladki a[aria-current="true"] { color: var(--noc); border-bottom-color: var(--zolty); }
.zakladki .btn { margin: 8px 0 8px auto; min-height: 44px; padding: 0 18px; border: 0; color: #fff; font-size: 16px; }
.zakladki .btn:hover { color: #fff; }

.sezon { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 7px 12px 6px; border-radius: 6px; background: var(--zolty); color: var(--noc);
  font: 700 16px/1 var(--f-tyt); letter-spacing: .1em; vertical-align: middle; }
.cennik { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 44px; }
.karta-ceny { display: flex; flex-direction: column; padding: 30px 30px 26px; border: 1px solid var(--linia); border-radius: 16px; background: #fff; }
.karta-ceny h3 { font-size: 34px; color: var(--noc); }
.karta-ceny .lead { margin: 8px 0 14px; color: var(--granat); font-weight: 600; }
.karta-ceny .opis { font-size: 15.5px; }
.tabela { width: 100%; margin-top: auto; border-collapse: collapse; }
.tabela th { padding: 0 0 10px; font: 600 13.5px/1.2 var(--f-tyt); letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-3); text-align: right; }
.tabela th:first-child { text-align: left; }
.tabela td { padding: 13px 0; border-top: 1px solid var(--linia); color: var(--tekst); font-weight: 500; }
.tabela td + td { width: 118px; text-align: right; white-space: nowrap; }
.tabela .std { color: var(--noc); font: 700 26px/1 var(--f-tyt); }
.tabela .part { color: var(--granat); font: 600 22px/1 var(--f-tyt); }
.tabela small { font-size: 13px; font-weight: 400; color: var(--tekst-3); }
.przypisy { margin: 12px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--tekst-3); }
.karta-ceny.ciemna { position: relative; isolation: isolate; overflow: hidden; border: 0; color: rgba(255, 255, 255, .85); background: var(--noc); }
.karta-ceny.ciemna > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.karta-ceny.ciemna::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 21, 74, .45), rgba(16, 21, 74, .95) 62%); }
.karta-ceny.ciemna h3 { color: #fff; }
.karta-ceny.ciemna .lead { color: var(--zolty); }
.karta-ceny.ciemna .tabela td { color: #fff; border-color: rgba(255, 255, 255, .2); }
.karta-ceny.ciemna .tabela th { color: rgba(255, 255, 255, .6); }
.karta-ceny.ciemna .std { color: var(--zolty); }
.karta-ceny.ciemna .part { color: #fff; }
.metka { align-self: flex-start; margin-bottom: auto; padding: 7px 12px 6px; border-radius: 6px; background: var(--zolty); color: var(--noc); font: 700 14px/1 var(--f-tyt); letter-spacing: .14em; text-transform: uppercase; }
.karta-ceny.ciemna h3 { margin-top: 150px; }
.uwaga-ceny { display: flex; gap: 10px; align-items: center; margin: 18px 0 0; font-size: 15px; color: var(--tekst-3); }
.uwaga-ceny .ik { color: var(--granat); }

.kroki { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; counter-reset: krok; }
.krok { position: relative; padding: 26px 24px; border-radius: 16px; background: #fff; border: 1px solid var(--linia); }
.krok-nr { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 50%; background: var(--granat); color: #fff; font: 800 22px/1 var(--f-tyt); }
.krok.zolty .krok-nr { background: var(--zolty); color: var(--noc); }
.krok h3 { margin-bottom: 10px; font-size: 25px; color: var(--noc); }
.krok p { margin: 0; font-size: 15.5px; }
.krok a { color: var(--granat); font-weight: 600; text-decoration: none; white-space: nowrap; }

.mozaika { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 12px; margin-top: 46px; }
.mozaika img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.mozaika img:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.tekst-2kol { columns: 2; column-gap: 56px; margin-top: 30px; }
.tekst-2kol p { break-inside: avoid; }

.harmonijka { margin-top: 36px; border-top: 1px solid var(--linia); }
.harmonijka details { border-bottom: 1px solid var(--linia); }
.harmonijka summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 4px; cursor: pointer; list-style: none; color: var(--noc);
  font: 700 25px/1.1 var(--f-tyt); text-transform: uppercase; }
.harmonijka summary::-webkit-details-marker { display: none; }
.harmonijka summary .ik { flex: none; width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--lod); color: var(--granat); transition: transform .25s; }
.harmonijka details[open] summary .ik { transform: rotate(180deg); }
.harmonijka ol { margin: 0 0 30px; padding-left: 22px; font-size: 15.5px; columns: 2; column-gap: 48px; }
.harmonijka li { margin-bottom: 10px; break-inside: avoid; }

.pas-cta { padding: 64px 0; background: var(--zolty); color: var(--noc); }
.pas-cta .szer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.pas-cta h2 { color: var(--noc); font-size: clamp(34px, 4vw, 52px); }
.pas-cta p { margin: 8px 0 0; font-size: 17px; }
.pas-cta .btn-tel { border-color: var(--noc); background: var(--noc); color: #fff; }
.pas-cta .btn-tel:hover { background: #fff; color: var(--noc); }

/* ---------- wypozyczalnia ---------- */
.cennik-wyp { grid-template-columns: 1.2fr 1fr; align-items: start; }
.cennik-bok { display: grid; gap: 22px; }
.tabela-dni td + td { width: 130px; }
.tabela-dni .kolejny td { border-top-width: 2px; }
.tabela-dni .kolejny td:first-child { color: var(--granat); font-weight: 600; }
.karta-ceny.ciemna.dodatek h3 { margin-top: 26px; }
.dodatek-cena { margin: 12px 0 0; color: rgba(255, 255, 255, .8); }
.dodatek-cena b { margin-right: 6px; color: var(--zolty); font: 700 46px/1 var(--f-tyt); }
.krok-nr .ik { width: 22px; height: 22px; }

/* ---------- apartament ---------- */
.fakty-karta.w-tresci { margin-bottom: 76px; border: 1px solid var(--linia); box-shadow: none; }
.apt-uklad { display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: start; }
.udogodnienia { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 30px 0 0; padding: 0; }
.udogodnienia li { display: flex; align-items: center; gap: 14px; color: var(--tekst); font-weight: 500; line-height: 1.35; }
.udogodnienia .ik { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--lod); color: var(--granat); }
.karta-rez { position: sticky; top: calc(var(--pasek-h) + 84px); padding: 30px; border-radius: 16px; background: var(--noc); color: rgba(255, 255, 255, .82); box-shadow: var(--cien); }
.karta-rez h3 { margin-bottom: 12px; color: #fff; font-size: 34px; }
.karta-rez p { font-size: 16px; }
.karta-rez ul { list-style: none; display: grid; gap: 10px; margin: 0 0 24px; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .15); }
.karta-rez li { display: flex; align-items: center; gap: 12px; color: #fff; }
.karta-rez li .ik { width: 20px; height: 20px; color: var(--zolty); }
.karta-rez .btn { width: 100%; }
.karta-rez small { display: block; margin-top: 14px; font-size: 14px; text-align: center; }
.karta-rez small a { color: #fff; }
.btn-tel.mail { font-size: 25px; letter-spacing: .02em; }
.galeria-apt { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; grid-auto-flow: dense; gap: 12px; margin-top: 44px; }
.galeria-apt a { display: block; overflow: hidden; border-radius: 12px; cursor: zoom-in; }
.galeria-apt img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.galeria-apt a:hover img { transform: scale(1.05); }
.galeria-apt a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.galeria-apt a:nth-child(3) { grid-row: span 2; }
.galeria-apt a:nth-child(5) { grid-column: span 2; }
.spacer-ramka { margin-top: 44px; aspect-ratio: 16 / 8; border-radius: 16px; overflow: hidden; background: var(--snieg); }
.spacer-ramka iframe { display: block; width: 100%; height: 100%; border: 0; }
.podpis-spacer { margin: 12px 0 0; font-size: 14px; color: var(--tekst-3); }
.podpis-spacer a { color: var(--granat); }
.obok { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.obok-karta { display: block; overflow: hidden; border: 1px solid var(--linia); border-radius: 14px; background: #fff; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.obok-karta:hover { box-shadow: var(--cien); transform: translateY(-3px); }
.obok-karta img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.obok-karta span { display: block; padding: 16px 18px 18px; font-size: 15px; color: var(--tekst-2); }
.obok-karta b { display: block; margin-bottom: 6px; color: var(--noc); font: 700 25px/1 var(--f-tyt); text-transform: uppercase; }

/* powiekszenie zdjec */
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: 96px 1fr 96px; align-items: center; background: rgba(10, 13, 40, .95); }
.lightbox[hidden] { display: none; }
.lightbox figure { display: grid; justify-items: center; gap: 14px; margin: 0; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 120px); border-radius: 8px; }
.lightbox figcaption { color: rgba(255, 255, 255, .8); font-size: 15px; text-align: center; }
.lb-strz, .lb-zamknij { justify-self: center; display: grid; place-items: center; width: 54px; height: 54px; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer; transition: background-color .2s, color .2s; }
.lb-strz:hover, .lb-zamknij:hover { background: #fff; color: var(--noc); }
.lb-zamknij { position: absolute; top: 20px; right: 20px; }

/* ---------- wyciagi ---------- */
.raport-stan { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 9px 14px 8px; border-radius: 999px; background: #e6f6ec; color: #1d7a3e;
  font: 600 15px/1 var(--f-tyt); letter-spacing: .1em; text-transform: uppercase; }
.raport-stan .kropka-live { flex: none; background: #22a052; animation: none; }
.bez-lamania { white-space: nowrap; }
.raport-stan.zamkniety { background: #fdecec; color: #b42318; }
.raport-stan.zamkniety .kropka-live { background: #e5484d; }
.podpis-kamera .raport-stan { margin: 0 0 0 10px; font-size: 13px; }
.wyciagi-karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 44px; }
.wyciag-karta { padding: 26px 26px 22px; border: 1px solid var(--linia); border-radius: 16px; background: #fff; }
.wyciag-glowa { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; margin-bottom: 20px; }
.wyciag-glowa h3 { color: var(--noc); font-size: 28px; }
.wyciag-glowa p { margin: 5px 0 0; font-size: 14.5px; line-height: 1.3; color: var(--tekst-3); }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px 6px; border-radius: 999px; background: #e6f6ec; color: #1d7a3e;
  font: 700 13px/1 var(--f-tyt); letter-spacing: .1em; text-transform: uppercase; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #22a052; }
.wyciag-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin: 0; padding: 18px 0; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
.wyciag-dl dt { margin-bottom: 6px; color: var(--tekst-3); font: 600 13px/1 var(--f-tyt); letter-spacing: .12em; text-transform: uppercase; }
.wyciag-dl dd { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--noc); font: 700 22px/1.1 var(--f-tyt); }
.kropka-trasy { width: 12px; height: 12px; border-radius: 50%; background: #37bcec; }
.wyciag-cechy { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: 14.5px; color: var(--tekst); }
.wyciag-cechy span { display: inline-flex; align-items: center; gap: 7px; }
.wyciag-cechy .ik { width: 18px; height: 18px; color: var(--granat); }
.wyciag-cechy .nie, .wyciag-cechy .nie .ik { color: var(--tekst-3); }
.warunki .glowa p { color: rgba(255, 255, 255, .8); }
.kamera-ramka { position: relative; margin-top: 44px; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0b0f33; }
.kamera-ramka iframe { display: block; width: 100%; height: 100%; border: 0; }
.podpis-kamera { margin: 12px 0 0; font-size: 14px; color: rgba(255, 255, 255, .6); }

/* ---------- kontakt ---------- */
.kontakt-karty { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.kontakt-karta { display: flex; flex-direction: column; padding: 26px 24px 22px; border: 1px solid var(--linia); border-radius: 16px; background: #fff; }
.kontakt-karta .fakt-ik { margin-bottom: 18px; }
.kontakt-karta h3 { margin-bottom: 8px; color: var(--noc); font-size: 28px; }
.kontakt-karta small { display: block; margin: 12px 0 4px; font-size: 13.5px; color: var(--tekst-3); }
.kontakt-karta .tel { display: block; color: var(--noc); font: 700 25px/1.3 var(--f-tyt); letter-spacing: .02em; text-decoration: none; }
.kontakt-karta .tel:hover { color: var(--granat); }
.kontakt-karta .mail { color: var(--granat); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.godziny { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 14.5px; color: var(--tekst-2); }
.godziny .ik { width: 18px; height: 18px; color: var(--granat); }
.kontakt-karta .wiecej { margin-top: auto; padding-top: 22px; color: var(--granat); }
.adres { display: flex; gap: 14px; align-items: flex-start; margin: 24px 0; padding: 18px 20px; border: 1px solid var(--linia); border-radius: 14px; background: #fff; }
.adres .ik { width: 26px; height: 26px; color: var(--granat); }
.adres b { display: block; color: var(--noc); font: 700 24px/1.15 var(--f-tyt); text-transform: uppercase; }
.social-wiersz { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.social-wiersz a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--linia); border-radius: 999px; background: #fff; color: var(--noc);
  font-weight: 600; font-size: 15px; text-decoration: none; transition: border-color .2s; }
.social-wiersz a:hover { border-color: var(--granat); }
.social-wiersz .ik { width: 20px; height: 20px; color: var(--granat); }
.kolaz.jedno { display: block; }
.kolaz.jedno img { height: 100%; }
.dane-firm { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--linia); font-size: 14.5px; color: var(--tekst-3); }
.dane-firm b { display: block; margin-bottom: 4px; color: var(--tekst); font-weight: 600; }


/* ---------- strona (poza makietą) ---------- */
.skok:focus { position: fixed; z-index: 200; left: 12px; top: 12px; width: auto; height: auto; clip: auto; padding: 10px 16px; border-radius: 6px; background: var(--zolty); color: var(--noc); font-weight: 600; }
.z-kropka { display: inline-flex; align-items: center; gap: 12px; }
.stopka p { margin: 0 0 12px; }
.stopka .mail { display: block; margin-top: 10px; color: #fff; overflow-wrap: anywhere; }
.stopka small.odstep { margin-top: 12px; }
.po-tytule { margin-top: 22px; }
.po-skipass { margin-top: 18px; }
.sekcja.krotsza { padding-top: 80px; }
.przyciski.srodek { justify-content: center; }
.status.nieczynny { background: #fdecec; color: #b42318; }
.status.nieczynny i { background: #e5484d; }

/* granatowy pas z tytułem (kamera, klauzula, 404) */
.podhero.mini { min-height: 0; padding: 150px 0 56px; background: radial-gradient(90% 140% at 100% 0%, var(--granat) 0%, var(--noc) 62%); }
.podhero.mini::before { display: none; }

/* galeria */
.filtry { display: flex; flex-wrap: wrap; gap: 10px; }
.filtry button { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 1.5px solid var(--linia); border-radius: 999px; background: #fff;
  color: var(--noc); font: 700 16px/1 var(--f-tyt); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: border-color .2s, background-color .2s; }
.filtry button span { color: var(--tekst-3); font-weight: 600; letter-spacing: 0; }
.filtry button:hover { border-color: var(--granat); }
.filtry button[aria-pressed="true"] { border-color: var(--noc); background: var(--noc); color: #fff; }
.filtry button[aria-pressed="true"] span { color: var(--zolty); }
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; grid-auto-flow: dense; gap: 12px; margin-top: 32px; }
.galeria a { display: block; overflow: hidden; border-radius: 12px; cursor: zoom-in; background: var(--snieg); }
.galeria a[hidden] { display: none; }
.galeria a.pion { grid-row: span 2; }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.galeria a:hover img { transform: scale(1.05); }

/* kamera */
.kamera-sekcja { padding-top: 64px; }
.kamera-sekcja .kamera-ramka { margin-top: 0; box-shadow: var(--cien); }
.kamera-sekcja .podpis-kamera { color: var(--tekst-3); }
.podpis-kamera a { color: inherit; }
.kamera-pod { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; margin-top: 48px; }
.wyciagi.jasne .wyciag { background: var(--snieg); border-color: var(--linia); }
.wyciagi.jasne h2 { color: var(--noc); }
.wyciagi.jasne .wyciag-dane { color: var(--tekst-2); }
.wyciagi.jasne .wyciag-dane .ik { color: var(--granat); }
.wyciagi.jasne .trudnosc { color: var(--noc); }
.skipass.jasny { margin: 0 0 20px; border-color: var(--granat); color: var(--tekst-2); }
.skipass.jasny .ik { color: var(--granat); }
.skipass.jasny b { color: var(--noc); }

/* klauzula informacyjna */
.dokument .szer { max-width: 860px; }
.dokument article + article { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--linia); }
.dokument h2 { margin-bottom: 16px; color: var(--noc); font-size: clamp(26px, 3vw, 34px); }
.dokument ol { margin: 0; padding-left: 22px; }
.dokument li { margin-bottom: 8px; }


/* ---------- 404: drogowskaz na stoku ---------- */
.e404 { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 100svh; padding: 150px 0 90px; overflow: hidden; color: #fff; background: var(--noc); }
.e404 > img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
.e404::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(16, 21, 74, .92) 0%, rgba(16, 21, 74, .62) 55%, rgba(16, 21, 74, .4) 100%); }
.e404-snieg, .e404-snieg::after { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(3px 3px at 20px 30px, #fff 50%, transparent 55%), radial-gradient(2px 2px at 80px 120px, rgba(255, 255, 255, .9) 50%, transparent 55%),
    radial-gradient(2.5px 2.5px at 150px 60px, #fff 50%, transparent 55%), radial-gradient(1.5px 1.5px at 190px 170px, rgba(255, 255, 255, .8) 50%, transparent 55%),
    radial-gradient(2px 2px at 110px 200px, #fff 50%, transparent 55%);
  background-size: 220px 220px; animation: snieg 10s linear infinite; opacity: .75; }
.e404-snieg::after { content: ""; background-size: 340px 340px; animation-duration: 16s; opacity: .55; }
@keyframes snieg { to { background-position: 40px 220px, -30px 220px, 20px 220px, -20px 220px, 30px 220px; } }
.e404-siatka { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.e404 .nad-tytul { color: var(--zolty); }
.e404 h1 { color: #fff; font-weight: 800; font-size: clamp(54px, 7vw, 104px); line-height: .9; }
.e404 h1 em { font-style: normal; color: var(--zolty); }
.e404-tekst > p:not(.nad-tytul) { max-width: 520px; margin: 22px 0 30px; font-size: 19px; color: rgba(255, 255, 255, .9); }
.drogowskaz { position: relative; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 340px; padding-bottom: 70px;
  filter: drop-shadow(0 14px 22px rgba(8, 12, 50, .45)); }
.slup { position: absolute; z-index: -1; left: 50%; top: 70px; bottom: 0; width: 18px; margin-left: -9px; border-radius: 4px;
  background: linear-gradient(90deg, #4b3a2c, #8a6a4e 45%, #3e2f24); }
.znak-trasy { display: grid; place-items: center; align-content: center; width: 136px; height: 136px; margin-bottom: 8px; border: 11px solid var(--czerwony); border-radius: 50%;
  background: #fff; color: var(--noc); text-align: center; }
.znak-trasy b { font: 800 46px/.9 var(--f-tyt); }
.znak-trasy span { font: 700 13px/1 var(--f-tyt); letter-spacing: .16em; text-transform: uppercase; color: var(--tekst-3); }
.tablica { display: flex; flex-direction: column; justify-content: center; width: 280px; min-height: 68px; padding: 10px 48px 10px 22px; background: var(--zolty); color: var(--noc);
  text-decoration: none; clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%); transform: translateX(46px) rotate(-3deg);
  transition: transform .25s, background-color .2s; }
.tablica.lewo { padding: 10px 22px 10px 48px; text-align: right; clip-path: polygon(30px 0, 100% 0, 100% 100%, 30px 100%, 0 50%); transform: translateX(-46px) rotate(3deg); }
.tablica b { font: 800 29px/1 var(--f-tyt); letter-spacing: .02em; text-transform: uppercase; }
.tablica small { margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--tekst-2); }
.tablica:hover, .tablica:focus-visible { background: #fff; transform: translateX(58px) rotate(0); outline: 0; }
.tablica.lewo:hover, .tablica.lewo:focus-visible { transform: translateX(-58px) rotate(0); }

/* baner zgody na statystyki */
.zgoda { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin-left: auto; padding: 20px 22px; border-radius: 14px; background: var(--noc);
  color: rgba(255, 255, 255, .88); font-size: 15px; box-shadow: var(--cien); }
.zgoda[hidden] { display: none; }
.zgoda p { margin: 0; }
.zgoda b { display: block; margin-bottom: 4px; color: #fff; font: 700 20px/1.1 var(--f-tyt); text-transform: uppercase; letter-spacing: .04em; }
.zgoda a { color: var(--zolty); }
.zgoda-przyciski { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.zgoda .btn { min-height: 44px; font-size: 16px; }
.link { padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .8); font: inherit; text-decoration: underline; cursor: pointer; }
.link:hover { color: var(--zolty); }


/* ---------- szkółka: oferta 2026/2027 ---------- */
.legenda { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 28px 0 0; font-size: 14.5px; color: var(--tekst-2); }
.legenda span { display: inline-flex; align-items: center; gap: 8px; }
.legenda span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--noc); }
.legenda .part::before { background: var(--granat); opacity: .55; }
.cennik-szkola { align-items: start; margin-top: 22px; }
.cennik-szkola .tabela { margin-top: 8px; }
.karta-ceny h3 + .opis { margin-top: 12px; }
.produkty { display: grid; margin: 4px 0 0; }
.produkt { display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; align-items: start; padding: 16px 0; border-top: 1px solid var(--linia); }
.produkt-nazwa b { display: block; color: var(--noc); font: 700 22px/1.1 var(--f-tyt); letter-spacing: .02em; text-transform: uppercase; }
.produkt-nazwa span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--tekst-3); }
.produkt-ceny { display: grid; justify-items: end; gap: 2px; text-align: right; }
.produkt-ceny .std { color: var(--noc); font: 700 26px/1 var(--f-tyt); }
.produkt-ceny .part { color: var(--granat); font: 600 19px/1.1 var(--f-tyt); }
.produkt p { grid-column: 1 / -1; margin: 4px 0 0; font-size: 15px; }
.zasady-pakietu { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--lod); font-size: 14.5px; color: var(--tekst); }
.zasady-pakietu .ik { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--granat); }
.przypis { margin: 12px 0 0; font-size: 13.5px; color: var(--tekst-3); }

.grupy-bartusia { position: relative; overflow: hidden; background: var(--noc); color: rgba(255, 255, 255, .84); }
.grupy-bartusia::before { content: ""; position: absolute; left: -160px; bottom: -220px; width: 560px; height: 560px; border-radius: 50%; background: var(--granat); opacity: .3; }
.grupy-bartusia .szer { position: relative; }
.grupy-bartusia .nad-tytul { color: var(--zolty); }
.grupy-bartusia .tytul { color: #fff; }
.grupy-bartusia .tytul em { color: var(--zolty); }
.grupy-bartusia .glowa p { color: rgba(255, 255, 255, .85); }
.gb-siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.gb-kol { padding: 26px 24px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; background: rgba(255, 255, 255, .05); font-size: 15.5px; }
.gb-kol h3 { margin-bottom: 14px; color: #fff; font-size: 25px; }
.gb-kol p { margin: 0 0 12px; }
.gb-kol b { color: #fff; }
.gb-kroki { margin: 0; padding: 0; list-style: none; counter-reset: gb; display: grid; gap: 12px; }
.gb-kroki li { position: relative; padding-left: 42px; counter-increment: gb; }
.gb-kroki li::before { content: counter(gb); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--zolty); color: var(--noc); font: 800 16px/1 var(--f-tyt); }
.gb-uwaga { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0 !important; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); color: #fff; }
.gb-uwaga .ik { flex: none; width: 20px; height: 20px; color: var(--zolty); }
.gb-cennik { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: center; margin-top: 18px; padding: 28px; border-radius: 16px; background: #fff; color: var(--tekst-2); }
.gb-ceny { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gb-cena { display: flex; flex-direction: column; gap: 3px; padding: 18px 16px; border-radius: 12px; background: var(--snieg); }
.gb-cena span { color: var(--noc); font: 700 19px/1.1 var(--f-tyt); text-transform: uppercase; letter-spacing: .03em; }
.gb-cena b { margin-top: 8px; color: var(--noc); font: 800 34px/1 var(--f-tyt); }
.gb-cena small { font-size: 13.5px; color: var(--tekst-3); }
.gb-opis p { margin: 0 0 10px; font-size: 15.5px; }
.gb-opis b { color: var(--noc); }
.gb-zglos { padding-top: 10px; border-top: 1px solid var(--linia); }
.gb-opis .przyciski { margin-top: 14px; }
.gb-opis .btn-jasny { border-color: var(--granat); color: var(--granat); background: transparent; backdrop-filter: none; }
.gb-opis .btn-jasny:hover { background: var(--granat); color: #fff; }

.akademia { align-items: start; }
.akademia-foto { position: relative; height: 100%; min-height: 420px; }
.akademia-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.akademia-foto .metka { position: absolute; left: 18px; top: 18px; }
.akademia-fakty { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0; }
.akademia-fakty li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--linia); color: var(--tekst); font-weight: 500; }
.akademia-fakty .ik { width: 18px; height: 18px; color: var(--granat); }
.akademia-h3 { margin: 6px 0 12px; color: var(--noc); font-size: 24px; }
.turnusy { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 26px; padding: 0; }
.turnusy li { padding: 11px 10px 10px; border-radius: 10px; background: var(--noc); color: #fff; text-align: center; font: 700 19px/1 var(--f-tyt); letter-spacing: .03em; }

.info-lista { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; margin: 34px 0 0; padding: 0; }
.info-lista li { display: flex; gap: 14px; align-items: flex-start; color: var(--tekst); }
.info-lista .ik { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: var(--lod); color: var(--granat); }
.info-lista a { color: var(--granat); }
.waska { max-width: 760px; }
.odstep-gora { margin-top: 84px; }
.waska-szer { max-width: 900px; }
.faq summary { font-size: 22px; text-transform: none; letter-spacing: 0; }
.faq-odp p { margin: 0 0 24px; max-width: 760px; }
.faq-odp a { color: var(--granat); }

/* ---------- własne kolory podstrony: <body class="motyw-bar"> (uklad_gora(..., motyw: 'motyw-bar')) ----------
   Ski Bar: ciemna zieleń jak szyldy baru („Kebab & Grill”, „Pizza & Café”, na zdjęciach w słońcu ok. #157e5d), żółty z logo zostaje.
   Pasek menu, stopka i mapa — granatowe jak cała strona. */
.motyw-bar main { --granat: #1f6e4f; --granat-ciemny: #17573e; --noc: #13372a; --lod: #e3f1ea; --snieg: #f3f8f5; }
/* zdjęcie Ski Baru: szyldy i okna są nisko — kadr niżej, inaczej na szerokim ekranie widać sam dach */
.motyw-bar .podhero > img { object-position: center 80%; }
.motyw-bar .podhero::before { background: linear-gradient(90deg, rgba(19, 55, 42, .9) 0%, rgba(19, 55, 42, .58) 45%, rgba(19, 55, 42, .12) 100%), linear-gradient(0deg, rgba(19, 55, 42, .5), rgba(19, 55, 42, 0) 45%); }


/* ---------- formularz zapisów ---------- */
.zapisy-sekcja .glowa p a, .pas-cta p a { color: inherit; font-weight: 600; }
.zapisy { margin-top: 40px; padding: 34px; border: 1px solid var(--linia); border-radius: 18px; background: #fff; box-shadow: 0 18px 40px -30px rgba(23, 29, 85, .4); }
.zapisy fieldset { min-width: 0; margin: 0 0 28px; padding: 0; border: 0; }
.zapisy legend { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 0; color: var(--noc); font: 700 24px/1 var(--f-tyt); text-transform: uppercase; }
.zapisy legend span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--zolty); color: var(--noc); font-size: 18px; }
.siatka-pol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
.pole { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pole[hidden] { display: none; }
.pole.szerokie { grid-column: 1 / -1; }
.pole > label, .pole .etykieta { color: var(--tekst); font-size: 15px; font-weight: 600; }
.pole small { font-size: 13px; font-weight: 400; color: var(--tekst-3); }
.zapisy input[type="text"], .zapisy input[type="tel"], .zapisy input[type="email"], .zapisy input[type="number"], .zapisy input[type="date"], .zapisy select, .zapisy textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid #cfd5e3; border-radius: 10px; background: #fff; color: var(--tekst); font: 500 16px/1.3 var(--f-tekst);
  transition: border-color .2s, box-shadow .2s; }
.zapisy textarea { min-height: 96px; resize: vertical; }
.zapisy input:focus, .zapisy select:focus, .zapisy textarea:focus { outline: 0; border-color: var(--granat); box-shadow: 0 0 0 3px rgba(57, 71, 164, .16); }
.zapisy .z-bledem input, .zapisy .z-bledem select, .zapisy .z-bledem textarea { border-color: var(--czerwony); }
.blad { margin: 0; color: #b42318; font-size: 14px; font-weight: 600; }
.wybory { display: flex; flex-wrap: wrap; gap: 10px; }
.wybor { display: inline-flex; align-items: center; gap: 10px; color: var(--tekst); font-weight: 500; cursor: pointer; }
.wybory .wybor { flex: 1 1 140px; min-height: 50px; padding: 0 18px; border: 1.5px solid #cfd5e3; border-radius: 10px; transition: border-color .2s, background-color .2s; }
.wybory .wybor:has(input:checked) { border-color: var(--granat); background: var(--lod); color: var(--noc); }
.zapisy input[type="radio"], .zapisy input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--granat); }
.zgoda-pole { align-items: flex-start; }
.zgoda-pole span { font-size: 14.5px; font-weight: 400; line-height: 1.5; color: var(--tekst-2); }
.zgoda-pole a, .zapisy .przypis a { color: var(--granat); }
.zapisy-stopka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding-top: 24px; border-top: 1px solid var(--linia); }
.zapisy-stopka .pole { flex: 1 1 420px; }
.zapisy-stopka .btn { min-height: 56px; padding: 0 30px; font-size: 19px; }
.zapisy-bledy { display: flex; gap: 10px; align-items: center; margin: 0 0 22px; padding: 14px 16px; border-radius: 12px; background: #fdecec; color: #b42318; font-weight: 600; }
.zapisy-bledy .ik { color: #b42318; }
.ukryte { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zapisy-ok { display: flex; gap: 18px; margin-top: 40px; padding: 30px; border: 2px solid #22a052; border-radius: 18px; background: #fff; }
.zapisy-ok > .ik { flex: none; width: 52px; height: 52px; padding: 12px; border-radius: 50%; background: #e6f6ec; color: #1d7a3e; stroke-width: 2.6; }
.zapisy-ok h3 { margin-bottom: 10px; color: var(--noc); font-size: 30px; }
.zapisy-ok a:not(.btn) { color: var(--granat); }
.karta-ceny .wiecej { margin-top: 18px; color: var(--granat); }
.akademia .btn-granat { margin-top: 6px; }

/* ---------- wirtualny spacer: zasłona, ramka wczytuje się po kliknięciu ---------- */
.spacer-zaslona { position: relative; display: grid; place-items: center; }
.spacer-zaslona > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); }
.spacer-start { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 34px; border-radius: 16px;
  background: rgba(16, 21, 74, .55); backdrop-filter: blur(4px); color: #fff; text-align: center; text-decoration: none; }
.spacer-start .ik { width: 60px; height: 60px; padding: 13px; border-radius: 50%; background: var(--zolty); color: var(--noc); transition: transform .4s; }
.spacer-start:hover .ik { transform: rotate(-40deg); }
.spacer-start b { font: 700 26px/1 var(--f-tyt); text-transform: uppercase; letter-spacing: .03em; }
.spacer-start small { color: rgba(255, 255, 255, .8); font-size: 14px; }
.spacer-uwaga { position: absolute; left: 16px; right: 16px; bottom: 12px; margin: 0; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .85); }
.spacer-uwaga a { color: var(--zolty); }

/* ---------- tablet ---------- */
@media (max-width: 1180px) {
  .menu, .kamera-pill { display: none; }
  .ikona-btn { display: inline-flex; }
  .naglowek .szer { height: var(--pasek-h); }
  .logo { width: 84px; height: 84px; margin-top: 34px; }
  .kafle { gap: 16px; }
  .kafel { min-height: 380px; }
  .kafel:nth-child(-n+2) { min-height: 420px; }
  .kafel-tresc { padding: 24px 22px 22px; }
  .kafel h3 { font-size: 30px; }
  .kafel:nth-child(-n+2) h3 { font-size: 38px; }
  .kafel p, .kafel:nth-child(-n+2) p { font-size: 15px; }
  .fakty-karta { grid-template-columns: repeat(2, 1fr); }
  .fakt:nth-child(3) { border-left: 0; }
  .fakt:nth-child(n+3) { border-top: 1px solid var(--linia); }
  .dwie, .warunki-siatka { grid-template-columns: 1fr; gap: 48px; }
  .kolaz { height: 480px; }
  .stopka-gora { grid-template-columns: 1fr 1fr; }
  .stopka-logo { grid-row: 1; grid-column: 1 / -1; }
  .social { justify-content: flex-start; }
  .kroki { grid-template-columns: repeat(2, 1fr); }
  .zakladki { top: var(--pasek-h); }
  .cennik-wyp { grid-template-columns: 1fr 1fr; }
  .apt-uklad { grid-template-columns: 1fr; gap: 40px; }
  .karta-rez { position: static; }
  .obok { grid-template-columns: repeat(2, 1fr); }
  .kontakt-karty { grid-template-columns: repeat(2, 1fr); }
  .galeria { grid-template-columns: repeat(3, 1fr); }
  .kamera-pod { grid-template-columns: 1fr; gap: 28px; }
  .e404-siatka { grid-template-columns: 1fr; gap: 56px; }
  .gb-siatka { grid-template-columns: 1fr; }
  .gb-cennik { grid-template-columns: 1fr; }
  .akademia-foto { min-height: 360px; }
  .drogowskaz { justify-self: start; margin-left: 60px; }
  .kolaz.jedno { height: 420px; }
}

/* ---------- telefon ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .szer { width: calc(100% - 32px); }
  .naglowek .szer { gap: 12px; }
  .logo { width: 72px; height: 72px; margin-top: 30px; }
  .naglowek.przewiniety .logo, .naglowek.otwarte .logo { width: 50px; height: 50px; }
  .hero { min-height: 600px; height: 92svh; }
  .hero-tresc { padding: 100px 16px 120px; }
  .nad { font-size: 13px; letter-spacing: .16em; gap: 10px; }
  .nad::before, .nad::after { display: none; }
  .hero-tytul { margin: 16px 0 26px; }
  .telefony { flex-direction: column; width: 100%; max-width: 330px; gap: 12px; }
  .btn-tel { justify-content: center; font-size: 30px; }
  .hero-strz { display: none; }
  .kropki { bottom: 96px; }
  .fakty { margin-top: -64px; }
  .fakty-karta { grid-template-columns: 1fr 1fr; }
  .fakt { flex-direction: column; gap: 10px; padding: 20px 16px; }
  .fakt-ik { width: 42px; height: 42px; }
  .fakt strong { font-size: 23px; }
  .fakt div > span { font-size: 13.5px; }
  .sekcja { padding: 72px 0; }
  .glowa p { font-size: 16px; }
  .kafle { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .kafel, .kafel:nth-child(-n+2) { grid-column: auto; min-height: 340px; }
  .kafel h3, .kafel:nth-child(-n+2) h3 { font-size: 32px; }
  .kolaz { height: 380px; grid-template-columns: 1.3fr 1fr; }
  .plakietka { left: auto; right: 10px; bottom: -26px; width: 112px; height: 112px; }
  .plakietka b { font-size: 36px; }
  .cena-chip { min-width: 0; flex: 1 1 140px; }
  .przyciski .btn { flex: 1 1 100%; }
  .warunki { padding: 72px 0; }
  .wyciag { grid-template-columns: 48px 1fr; padding: 14px; }
  .wyciag .status { grid-column: 2; justify-self: start; }  /* pod opisem, nie w wąskiej kolumnie znaku — inaczej tło nie obejmuje napisu */
  .znak { width: 48px; height: 48px; font-size: 21px; }
  .trudnosc { grid-column: 2; }
  .kamera-podpis span { display: none; }
  .insta { padding-top: 72px; }
  .hasztagi span { display: block; }
  .pasmo { grid-template-columns: repeat(3, 1fr); }
  .mapa { height: auto; display: flex; flex-direction: column; padding-bottom: 32px; background: var(--snieg); }
  .mapa iframe { height: 300px; }
  .mapa .szer { position: relative; margin-top: -48px; }
  .mapa-karta { width: 100%; padding: 24px 22px; }
  .stopka-gora { grid-template-columns: 1fr; gap: 30px; padding: 56px 0 40px; text-align: center; justify-items: center; }
  .stopka .social { justify-content: center; }
  .stopka-dol .szer { flex-direction: column; align-items: center; text-align: center; }
  .stopka-logo img { width: 104px; height: 104px; }
  .stopka-dol { padding-bottom: 92px; }
  .pasek-tel { position: fixed; inset: auto 0 0; z-index: 45; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--noc); box-shadow: 0 -10px 30px -12px rgba(8, 12, 50, .5); }
  .pasek-tel b { color: var(--zolty); font: 700 14px/1.05 var(--f-tyt); letter-spacing: .1em; text-transform: uppercase; }
  .pasek-tel a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border-radius: 6px; background: var(--zolty); color: var(--noc);
    text-decoration: none; font: 700 20px/1 var(--f-tyt); letter-spacing: .03em; }
  .pasek-tel a + a { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .6); }
  .pasek-tel .ik { width: 17px; height: 17px; }
  .pasek-tel a:first-child { padding: 0 10px; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
  .zapisy-pill { display: none; }
  .hero-formularz { width: 100%; max-width: 330px; margin-top: 12px; }
  .raport-stan { align-items: flex-start; border-radius: 14px; line-height: 1.35; padding: 9px 14px; }
  .raport-stan .kropka-live { margin-top: 5px; }
  .podpis-kamera .raport-stan { display: flex; width: fit-content; margin: 10px 0 0; }

  .podhero { min-height: 0; padding: 130px 0 40px; }
  .podhero::before { background: linear-gradient(0deg, rgba(16, 21, 74, .92) 10%, rgba(16, 21, 74, .35) 100%); }
  .podhero-lead { font-size: 17px; margin-bottom: 24px; }
  .cta-wiersz > b { width: 100%; font-size: 16px; }
  .cta-wiersz .btn-tel { flex: 1 1 140px; justify-content: center; gap: 8px; font-size: 23px; padding: 12px 6px; }
  .cta-wiersz .btn-tel .ik { width: 20px; height: 20px; }
  .zakladki .btn { display: none; }
  .zakladki a { padding: 17px 12px 14px; font-size: 16px; }
  .cennik { grid-template-columns: 1fr; margin-top: 32px; gap: 16px; }
  .karta-ceny { padding: 24px 20px 20px; }
  .karta-ceny h3 { font-size: 30px; }
  .tabela td + td { width: 82px; }
  .tabela .std { font-size: 23px; }
  .tabela .part { font-size: 20px; }
  .karta-ceny.ciemna h3 { margin-top: 110px; }
  .kroki { grid-template-columns: 1fr; gap: 12px; }
  .krok { display: grid; grid-template-columns: 46px 1fr; gap: 0 16px; padding: 20px 18px; }
  .krok-nr { grid-row: span 2; margin: 0; }
  .mozaika { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .tekst-2kol, .harmonijka ol { columns: 1; }
  .harmonijka summary { font-size: 21px; padding: 20px 2px; }
  .pas-cta .btn-tel { flex: 1 1 100%; justify-content: center; }
  .pasek-tel.jeden { grid-template-columns: auto 1fr; }
  .cennik-wyp { grid-template-columns: 1fr; }
  .tabela-dni td + td { width: 92px; }
  .dodatek-cena b { font-size: 40px; }
  .btn-tel.mail { font-size: 20px; }
  .cta-wiersz .btn-tel.mail { flex: 1 1 100%; }
  .fakty-karta.w-tresci { margin-bottom: 48px; }
  .udogodnienia { grid-template-columns: 1fr; gap: 12px; }
  .karta-rez { padding: 24px 20px; }
  .galeria-apt { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 8px; margin-top: 32px; }
  .spacer-ramka { aspect-ratio: 4 / 5; margin-top: 32px; }
  .obok { gap: 10px; margin-top: 32px; }
  .obok-karta span { padding: 12px 12px 14px; font-size: 13.5px; }
  .obok-karta b { font-size: 20px; }
  .lightbox { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; padding: 70px 12px 20px; }
  .lightbox figure { grid-column: 1 / -1; grid-row: 1; }
  .lightbox img { max-height: calc(100vh - 220px); }
  .lb-strz { grid-row: 2; }
  .lb-zamknij { top: 14px; right: 14px; }
  .wyciagi-karty { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .wyciag-karta { padding: 20px 18px 18px; }
  .wyciag-glowa { grid-template-columns: 48px 1fr auto; gap: 12px; }
  .wyciag-glowa h3 { font-size: 24px; }
  .wyciag-dl dd { font-size: 20px; }
  .kamera-ramka { margin-top: 32px; }
  .kontakt-karty { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .kolaz.jedno { height: 300px; }
  .dane-firm { grid-template-columns: 1fr; margin-top: 44px; }
  .galeria { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 8px; margin-top: 24px; }
  .filtry { gap: 8px; }
  .filtry button { min-height: 42px; padding: 0 14px; font-size: 15px; }
  .podhero.mini { padding: 120px 0 40px; }
  .e404 { padding: 120px 0 60px; }
  .produkt-nazwa b { font-size: 20px; }
  .produkt-ceny .std { font-size: 23px; }
  .gb-cennik { padding: 20px 16px; }
  .zapisy { margin-top: 28px; padding: 22px 16px; }
  .siatka-pol { grid-template-columns: 1fr; gap: 14px; }
  .zapisy legend { font-size: 21px; }
  .zapisy-stopka .btn { width: 100%; }
  .zapisy-ok { flex-direction: column; padding: 22px 18px; }
  .zapisy-ok h3 { font-size: 25px; }
  .spacer-start { padding: 20px 22px; }
  .spacer-start b { font-size: 22px; }
  .gb-ceny { grid-template-columns: 1fr; }
  .gb-cena { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .gb-cena b { margin: 0 0 0 auto; font-size: 28px; }
  .gb-cena small:last-child { display: none; }
  .turnusy { grid-template-columns: 1fr 1fr; }
  .info-lista { grid-template-columns: 1fr; }
  .akademia-foto { min-height: 260px; }
  .faq summary { font-size: 19px; }
  .odstep-gora { margin-top: 60px; }
  .e404-tekst > p:not(.nad-tytul) { font-size: 17px; }
  .drogowskaz { justify-self: center; width: 280px; margin-left: 0; }
  .tablica { width: 236px; min-height: 60px; transform: translateX(28px) rotate(-3deg); }
  .tablica.lewo { transform: translateX(-28px) rotate(3deg); }
  .tablica b { font-size: 25px; }
  .zgoda { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .kamera-sekcja { padding-top: 32px; }
  .kamera-sekcja .kamera-ramka { margin-left: -16px; margin-right: -16px; border-radius: 0; }
  .cta-wiersz .btn { flex: 1 1 140px; }
}