/* ==========================================================================
   Artals — makieta strony głównej
   Kolory i fonty z obecnej strony klienta (Elementor kit): grafit #1E2631,
   #414C56, akcent #FFA72B, jasne tła #F7F8FA / #D3E0E9 / #FFE6C3.
   Font: Figtree (nagłówki 800, tekst 400–500).
   ========================================================================== */

@property --rating { syntax: '<number>'; inherits: false; initial-value: 0; }

:root {
  --ink: #1E2631;
  --ink-2: #414C56;
  --ink-3: #2A3441;
  --ink-deep: #151B23;
  --text: #5E5F60;
  --muted: #6A7078;   /* przyciemniony z #868C94: kontrast 5:1 na bieli (WCAG AA) */
  --accent: #FFA72B;
  --accent-2: #FFB850;
  --accent-soft: #FFE6C3;
  --accent-wash: #FFF5E6;
  --steel: #D3E0E9;
  --steel-soft: #E9F0F5;
  --bg: #F7F8FA;
  --white: #FFFFFF;
  --line: #E4E8EC;
  --line-2: #D5DBE1;
  --danger: #C8372D;

  --font-head: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1360px;
  --gutter: clamp(16px, 3vw, 40px);
  --util-h: 38px;
  --header-h: 82px;
  --section-y: clamp(56px, 6vw, 92px);
  --head-gap: clamp(26px, 3vw, 42px);

  --r-sm: 12px;
  --r: 20px;
  --r-lg: 28px;

  --shadow-sm: 0 1px 2px rgba(30, 38, 49, .05), 0 4px 14px -6px rgba(30, 38, 49, .10);
  --shadow: 0 22px 50px -24px rgba(30, 38, 49, .30);
  --shadow-lg: 0 40px 90px -30px rgba(21, 27, 35, .45);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* ----- Reset / baza ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:not(.motion) { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); font-weight: 800; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--ink); }

.ic { width: 20px; height: 20px; flex: none; }
.ic--flip { transform: scaleX(-1); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link { position: fixed; left: 16px; top: -60px; z-index: 300; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 700; transition: top .3s; }
.skip-link:focus { top: 16px; }

/* ----- Typografia ----- */
.h2 {
  font-size: clamp(30px, 3.3vw, 50px);
  line-height: 1.08;
  letter-spacing: -.024em;
  text-wrap: balance;
}
.h2--light { color: #fff; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); }
.eyebrow--light { color: rgba(255, 255, 255, .72); }
.hero .eyebrow::before { display: none; }
.eyebrow__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.eyebrow__dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 80%, 100% { transform: scale(1.5); opacity: 0; } }

/* Słowo-akcent: „marker” pod dolną częścią tekstu */
.mark {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% .26em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: .04em;
  border-radius: 2px;
}
html.motion .mark { background-size: 0% .26em; transition: background-size 1.1s var(--ease) .2s; }
html.motion .is-marked .mark, html.motion .mark.is-marked { background-size: 100% .26em; }
.accent { color: var(--accent); }

/* ----- Przyciski ----- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: color .45s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.btn .ic { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.btn:hover .ic:not(.ic--flip) { transform: translateX(3px); }
.btn:hover .ic--flip { transform: scaleX(-1) translateX(3px); }
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .55s var(--ease);
}
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn--accent { background: var(--accent); color: var(--ink); }
.btn--accent::before { background: var(--ink); }
.btn--accent:hover { color: #fff; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark::before { background: var(--accent); }
.btn--dark:hover { color: var(--ink); }
.btn--ghost, .btn--outline { border: 1.5px solid var(--line-2); color: var(--ink); background: transparent; }
.btn--ghost::before, .btn--outline::before { background: var(--ink); }
.btn--ghost:hover, .btn--outline:hover { color: #fff; border-color: var(--ink); }
.btn--glass { border: 1.5px solid rgba(255, 255, 255, .34); color: #fff; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--glass::before { background: #fff; }
.btn--glass:hover { color: var(--ink); border-color: #fff; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 100% 2px;
  transition: background-size .5s var(--ease);
}
.link-arrow .ic { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.link-arrow:hover .ic { transform: translateX(4px); }
.link-arrow--light { color: #fff; }

.round-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  color: var(--ink);
  background: #fff;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), opacity .3s;
}
.round-btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.round-btn:disabled { opacity: .35; cursor: default; }
[data-slider-prev] .ic { transform: rotate(180deg); }

/* ==========================================================================
   Loader
   ========================================================================== */
.loader { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: var(--bg); animation: loaderSafety .01s 4s forwards; }
@keyframes loaderSafety { to { opacity: 0; visibility: hidden; } }
html:not(.motion) .loader { display: none; }
.loader__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.loader__mark { width: 96px; overflow: visible; }
.loader__mark path { fill: var(--ink); fill-opacity: 0; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.loader__word { width: 150px; opacity: 0; }

/* ==========================================================================
   Pasek informacyjny
   ========================================================================== */
.utilbar { position: relative; z-index: 52; height: var(--util-h); background: var(--ink); color: rgba(255, 255, 255, .78); font-size: 13px; }
.utilbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.utilbar__ticker { height: var(--util-h); overflow: hidden; }
.utilbar__ticker ul { transition: transform .8s var(--ease); }
.utilbar__ticker li { display: flex; align-items: center; gap: 8px; height: var(--util-h); white-space: nowrap; }
.utilbar__ticker .ic { width: 15px; height: 15px; color: var(--accent); }
.utilbar__links { display: flex; align-items: center; gap: 22px; }
.utilbar__links a { display: inline-flex; align-items: center; gap: 7px; transition: color .3s; }
.utilbar__links a:hover { color: #fff; }
.utilbar__links .ic { width: 15px; height: 15px; color: var(--accent); }
.utilbar__social .ic { color: inherit; width: 16px; height: 16px; }
.utilbar__links .utilbar__social { margin-left: -8px; }
.utilbar__sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .18); }

/* ==========================================================================
   Nagłówek + nawigacja
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid transparent;
  transition: transform .55s var(--ease), border-color .4s, box-shadow .4s, background-color .4s;
}
.header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 10px 30px -22px rgba(30, 38, 49, .35); }
.header.is-hidden { transform: translateY(-100%); }
.header.is-mega { background: #fff; }
.header__inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.header__logo { flex: none; }
.header__logo img { width: 163px; height: auto; }
.header__actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.header__phone { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.header__phone-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); transition: background-color .35s, border-color .35s; }
.header__phone-ic .ic { width: 19px; height: 19px; }
.header__phone:hover .header__phone-ic { background: var(--accent); border-color: var(--accent); }
.header__phone-txt { display: flex; flex-direction: column; line-height: 1.2; }
.header__phone-txt small { font-size: 12px; color: var(--muted); }
.header__phone-txt b { font-family: var(--font-head); font-size: 15.5px; font-weight: 800; }
.header__cta { height: 48px; padding: 0 22px; }
.header__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }

.nav { position: relative; margin-left: 12px; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 13px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  transition: color .3s;
}
.nav__link .ic { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.nav__trigger[aria-expanded="true"] .ic { transform: rotate(180deg); }
.nav__badge { padding: 2px 6px; border-radius: 6px; background: var(--steel-soft); font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--ink-2); }
.nav__line { position: absolute; left: 0; bottom: 2px; width: 1px; height: 2px; border-radius: 2px; background: var(--accent); opacity: 0; transform-origin: left; pointer-events: none; transition: transform .55s var(--ease), opacity .3s; }

.burger { display: none; position: relative; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); }
.burger span { position: absolute; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: #fff; transition: transform .45s var(--ease), opacity .3s; }
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; right: 18px; }
.burger span:nth-child(3) { top: 28px; }

/* ----- Mega menu ----- */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 40px 80px -40px rgba(21, 27, 35, .45);
  visibility: hidden;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease), opacity .35s, visibility 0s .6s;
}
.mega.is-open { visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path .7s var(--ease), opacity .25s, visibility 0s; }
.mega__inner { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .9fr); gap: 32px; padding-block: 28px 30px; }
.mega__label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mega__label span { font-family: var(--font); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.mega__item { display: flex; align-items: center; gap: 14px; padding: 9px; border-radius: 16px; transition: background-color .3s; }
.mega__item img { width: 66px; height: 50px; border-radius: 11px; object-fit: cover; flex: none; transition: transform .5s var(--ease); }
.mega__item span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.mega__item b { font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--ink); }
.mega__item small { font-size: 13px; color: var(--muted); }
.mega__item:hover, .mega__item.is-active { background: var(--bg); }
.mega__item.is-active img { transform: scale(1.06); }
.mega__preview { position: relative; display: block; min-height: 300px; border-radius: 22px; overflow: hidden; background: var(--ink); color: #fff; isolation: isolate; }
.mega__preview-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .6s var(--ease), transform 1.2s var(--ease); }
.mega__preview-media img.is-active { opacity: 1; transform: scale(1); }
.mega__preview::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(14, 19, 26, .85), rgba(14, 19, 26, 0) 55%); }
.mega__preview-body { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.mega__preview-body small { font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--accent); }
.mega__preview-body b { font-family: var(--font-head); font-size: 24px; font-weight: 800; line-height: 1.15; }
.mega__preview-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--font-head); font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .85); }
.mega__preview-cta .ic { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.mega__preview:hover .mega__preview-cta .ic { transform: translate(2px, -2px); }
.mega__works { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.mega__works a { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 14px; transition: background-color .3s; }
.mega__works a:hover { background: var(--bg); }
.mega__works img { width: 64px; height: 48px; border-radius: 10px; object-fit: cover; }
.mega__works span { display: flex; flex-direction: column; line-height: 1.25; }
.mega__works small { font-size: 12px; color: var(--muted); }
.mega__works b { font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--ink); }
.mega__help { padding: 16px 18px; border-radius: 18px; background: var(--accent-wash); border: 1px solid var(--accent-soft); }
.mega__help b { display: block; font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--ink); }
.mega__help p { margin: 2px 0 10px; font-size: 13.5px; line-height: 1.45; }
.mega__help-phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 17px; font-weight: 800; color: var(--ink); }
.mega__help-phone .ic { width: 18px; height: 18px; }
.mega__foot { border-top: 1px solid var(--line); background: var(--bg); font-size: 13.5px; }
.mega__foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 50px; }
.mega__foot span, .mega__foot a { display: inline-flex; align-items: center; gap: 8px; }
.mega__foot .ic { width: 17px; height: 17px; color: var(--ink); }
.mega__foot a { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.mega__foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mega-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(21, 27, 35, .38); opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.mega-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }

/* ----- Menu mobilne ----- */
.drawer { position: fixed; inset: 0; z-index: 120; visibility: hidden; transition: visibility 0s .6s; }
.drawer.is-open { visibility: visible; transition: none; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(21, 27, 35, .5); opacity: 0; transition: opacity .5s var(--ease); }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(430px, 100%); display: flex; flex-direction: column; background: #fff; transform: translateX(100%); transition: transform .6s var(--ease); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer__close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg); }
.drawer__levels { position: relative; flex: 1; overflow: hidden; }
.drawer__level { position: absolute; inset: 0; overflow-y: auto; padding: 14px 20px calc(24px + env(safe-area-inset-bottom)); transform: translateX(100%); visibility: hidden; transition: transform .55s var(--ease), visibility 0s .55s; }
.drawer__level.is-active { transform: none; visibility: visible; transition: transform .55s var(--ease); }
.drawer__level.is-behind { transform: translateX(-30%); visibility: hidden; }
.drawer__nav li { border-bottom: 1px solid var(--line); }
.drawer__nav a, .drawer__nav button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 17px 2px; font-family: var(--font-head); font-size: 21px; font-weight: 800; color: var(--ink); text-align: left; }
.drawer__nav .ic { margin-left: auto; width: 20px; height: 20px; color: var(--muted); }
.drawer__count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--accent); font-size: 12px; font-weight: 800; color: var(--ink); }
.drawer__contact { display: flex; flex-direction: column; gap: 8px; margin: 22px 0 18px; }
.drawer__label { font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.drawer__contact a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg); font-family: var(--font-head); font-weight: 800; color: var(--ink); }
.drawer__contact a span { display: flex; flex-direction: column; line-height: 1.3; }
.drawer__contact small { font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--muted); }
.drawer__back { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 8px; border-radius: 999px; background: var(--bg); font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--ink); }
.drawer__title { margin: 18px 0 10px; font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--ink); }
.drawer__offers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drawer__offers a { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-head); font-size: 14px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.drawer__offers img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding: 20px 0 30px; background: var(--bg); overflow: hidden; }
.hero__grid-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(30, 38, 49, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 38, 49, .055) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 18% 45%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 18% 45%, #000 0%, transparent 75%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  min-height: clamp(540px, calc(100svh - var(--header-h) - var(--util-h) - 50px), 790px);
}
.hero__content { display: flex; flex-direction: column; justify-content: center; padding: 8px 0 12px; }
.hero__title { font-size: clamp(38px, 4.25vw, 64px); line-height: 1.05; letter-spacing: -.028em; text-wrap: balance; }
.hero__lead { margin-top: 18px; max-width: 46ch; font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.6; }

.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 30px; }
.hero-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 76px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 18px 36px -16px rgba(240, 140, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease);
}
.hero-btn__ic { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .38); }
.hero-btn__ic .ic { width: 22px; height: 22px; }
.hero-btn__txt { display: flex; flex-direction: column; padding-right: 12px; line-height: 1.2; }
.hero-btn__txt b { font-family: var(--font-head); font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.hero-btn__txt small { font-size: 13.5px; font-weight: 500; opacity: .78; }
.hero-btn__go { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; transition: background-color .45s var(--ease), color .45s var(--ease); }
.hero-btn__go .ic { transition: transform .45s var(--ease); }
.hero-btn:hover { background: var(--accent-2); box-shadow: 0 22px 44px -16px rgba(240, 140, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .4); }
.hero-btn:hover .hero-btn__go { background: #fff; color: var(--ink); }
.hero-btn:hover .hero-btn__go .ic { transform: translateX(3px); }
/* Delikatny odblask przesuwający się po przycisku */
.hero-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -45%; z-index: -1; width: 32%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); pointer-events: none; }
html.motion .hero-btn::after { animation: sheen 5s ease-in-out 3s infinite; }
@keyframes sheen { 0% { left: -45%; } 28%, 100% { left: 130%; } }
.hero__perks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.hero__perks li { display: inline-flex; align-items: center; gap: 7px; }
.hero__perks .ic { width: 17px; height: 17px; padding: 2px; border-radius: 50%; background: var(--accent-soft); color: var(--ink); }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

.hero__stats { display: flex; gap: clamp(18px, 2.4vw, 36px); margin-top: 28px; }
.hero__stats li { display: flex; flex-direction: column; gap: 2px; padding-left: clamp(18px, 2.4vw, 36px); border-left: 1px solid var(--line-2); }
.hero__stats li:first-child { padding-left: 0; border-left: 0; }
.hero__stats b { font-family: var(--font-head); font-size: clamp(26px, 2.2vw, 32px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.hero__stats small { max-width: 14ch; font-size: 13px; line-height: 1.35; }

.hero__visual { position: relative; display: flex; flex-direction: column; padding-top: 28px; min-width: 0; }
.hero__dim { position: absolute; top: 4px; left: 0; right: 0; height: 14px; border-inline: 1.5px solid var(--ink-2); display: flex; align-items: center; justify-content: center; }
.hero__dim::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, var(--ink-2) 0 6px, transparent 6px 10px); opacity: .55; }
.hero__dim span { position: relative; padding: 0 12px; background: var(--bg); font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }

.hero__media { position: relative; flex: 1; min-height: 460px; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); isolation: isolate; }
.hero__slides, .hero__slide { position: absolute; inset: 0; }
.hero__slide { margin: 0; z-index: 1; clip-path: inset(0 0 0 100%); }
.hero__slide.is-prev { z-index: 1; clip-path: inset(0); }
.hero__slide.is-active { z-index: 2; clip-path: inset(0); }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); user-select: none; }
.hero__slide.is-active img { transform: scale(1); }
html.motion .hero__slide { transition: clip-path 1.25s var(--ease-io); }
html.motion .hero__slide img { transition: transform 8s cubic-bezier(.2, .6, .25, 1); }
html.motion .hero__slide.is-prev img { transform: scale(1.04); transition-duration: 1.3s; }
.hero__shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(to top, rgba(14, 19, 26, .62) 0%, rgba(14, 19, 26, 0) 34%), linear-gradient(to bottom, rgba(14, 19, 26, .28) 0%, rgba(14, 19, 26, 0) 22%); }

/* Hotspoty */
.hotspots { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hotspot { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
.hotspot.is-visible { opacity: 1; visibility: visible; transition: opacity .6s var(--ease) .5s; }
.hotspot__dot { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); transition: background-color .3s, color .3s, transform .4s var(--ease); }
.hotspot__dot .ic { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.hotspot__dot::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); animation: ring 2.6s var(--ease) infinite; }
@keyframes ring { 0% { transform: scale(.7); opacity: 1; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
.hotspot.is-open .hotspot__dot, .hotspot__dot:hover { background: var(--accent); }
.hotspot.is-open .hotspot__dot .ic { transform: rotate(45deg); }
.hotspot__card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  width: 230px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.hotspot__card b { display: block; margin-bottom: 2px; font-family: var(--font-head); font-size: 14px; font-weight: 800; color: var(--ink); }
.hotspot.is-open .hotspot__card { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.hotspot--below .hotspot__card { bottom: auto; top: calc(100% + 14px); transform: translate(-50%, -8px); }
.hotspot--below.is-open .hotspot__card { transform: translate(-50%, 0); }
.hotspot--left .hotspot__card { left: auto; right: -12px; transform: translate(0, 8px); }
.hotspot--left.is-open .hotspot__card { transform: none; }
.hotspot--right .hotspot__card { left: -12px; transform: translate(0, 8px); }
.hotspot--right.is-open .hotspot__card { transform: none; }

.hero__badge { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 18px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .35); line-height: 1.25; }
.hero__badge b { display: block; font-family: var(--font-head); font-size: 14px; font-weight: 800; color: var(--ink); }
.hero__badge small { font-size: 12px; color: var(--muted); }
.hero__badge-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent); color: var(--ink); }
.hero__badge-ic .ic { width: 19px; height: 19px; }
.hero__badge--measure { top: 20px; left: 20px; }
.hero__badge--pl { top: 20px; right: 20px; padding-left: 14px; }
.hero__flag { width: 26px; height: 18px; border-radius: 4px; background: linear-gradient(#fff 50%, #DC143C 50%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
html.motion [data-float] { animation: bob 6s ease-in-out infinite; }
html.motion .hero__badge--pl[data-float] { animation-delay: -3s; }
@keyframes bob { 50% { transform: translateY(-7px); } }

.hero__tabs { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 6; display: flex; gap: 6px; padding: 6px; border-radius: 20px; background: rgba(18, 24, 32, .5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .14); }
.hero__tab { position: relative; flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px 16px; border-radius: 14px; color: rgba(255, 255, 255, .66); text-align: left; transition: background-color .4s, color .4s; }
.hero__tab:hover { color: #fff; }
.hero__tab.is-active { background: rgba(255, 255, 255, .1); color: #fff; }
.hero__tab-num { font-family: var(--font-head); font-size: 12px; font-weight: 800; color: var(--accent); }
.hero__tab-label { overflow: hidden; font-family: var(--font-head); font-size: 14px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.hero__tab-bar { position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.hero__tab-bar i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.hero__tab.is-active .hero__tab-bar i { transform: scaleX(1); }
html.motion .hero__tab.is-active .hero__tab-bar i { animation: heroBar var(--hero-dur, 7s) linear forwards; }
html.motion .hero__media.is-paused .hero__tab.is-active .hero__tab-bar i { animation-play-state: paused; }
@keyframes heroBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__tab-link { display: grid; place-items: center; flex: none; width: 52px; border-radius: 14px; background: #fff; color: var(--ink); transition: background-color .35s; }
.hero__tab-link .ic { transition: transform .4s var(--ease); }
.hero__tab-link:hover { background: var(--accent); }
.hero__tab-link:hover .ic { transform: translate(2px, -2px); }

@media (min-width: 1024px) and (max-height: 840px) {
  .hero { padding: 16px 0 20px; }
  .hero__grid { min-height: calc(100svh - var(--header-h) - var(--util-h) - 36px); }
  .hero .eyebrow { margin-bottom: 10px; }
  .hero__title { font-size: clamp(36px, min(4.25vw, 6.6vh), 64px); }
  .hero__lead { margin-top: 12px; font-size: 16px; }
  .hero__cta { margin-top: 22px; }
  .hero-btn { height: 66px; padding: 0 10px; }
  .hero-btn__ic, .hero-btn__go { width: 46px; height: 46px; }
  .hero__perks { margin-top: 14px; }
  .hero__stats { margin-top: 18px; }
  .hero__stats b { font-size: 26px; }
  .hero__media { min-height: 0; }
}

/* Stany początkowe intro (tylko gdy działa GSAP) */
html.motion [data-hero-in], html.motion [data-hero-title] { opacity: 0; }
html.motion .hero__visual { opacity: 0; }

/* ==========================================================================
   Atuty
   ========================================================================== */
.usp { background: #fff; border-bottom: 1px solid var(--line); }
.usp__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.usp__item { display: flex; align-items: center; gap: 16px; padding: 28px clamp(18px, 2vw, 28px); border-left: 1px solid var(--line); }
.usp__item:first-child { padding-left: 0; border-left: 0; }
.usp__ic { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--bg); color: var(--ink); transition: background-color .4s, transform .5s var(--ease); }
.usp__ic .ic { width: 24px; height: 24px; }
.usp__item:hover .usp__ic { background: var(--accent); transform: rotate(-6deg); }
.usp__item p { display: flex; flex-direction: column; line-height: 1.35; }
.usp__item b { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--ink); }
.usp__item small { margin-top: 3px; font-size: 14px; }

/* ==========================================================================
   Sekcje — wspólne
   ========================================================================== */
.section { padding-block: var(--section-y); }
.section-head { margin-bottom: var(--head-gap); }
/* Sekcje o tym samym tle co poprzednia — bez podwójnej przerwy */
.works { padding-top: calc(var(--section-y) * .4); }
.section-head--split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 24px 48px; align-items: end; }
.section-head__text { max-width: 48ch; font-size: 16.5px; }
html.motion [data-split]:not(.is-split) { opacity: 0; }
html.motion [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px); }

/* ==========================================================================
   Oferta: potrzeby + bento
   ========================================================================== */
.needs { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; margin-bottom: 24px; }
.needs > * { min-width: 0; }
.needs__label { font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--ink); }
.needs__chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 13px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: 14.5px; font-weight: 600; color: var(--ink); transition: background-color .35s var(--ease), border-color .35s, color .35s; }
.chip .ic { width: 18px; height: 18px; color: var(--ink-2); transition: color .35s; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip[aria-pressed="true"] .ic { color: var(--accent); }
.needs__result { grid-column: 2; grid-row: 1; text-align: right; font-size: 14px; color: var(--muted); }
.needs__result b { color: var(--ink); }

.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 18.5vw, 272px); gap: 16px; }
.tile { position: relative; display: block; border-radius: 24px; overflow: hidden; background: var(--ink); color: #fff; isolation: isolate; transition: opacity .5s var(--ease), filter .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); }
.tile--xl { grid-column: span 2; grid-row: span 2; }
.tile--wide { grid-column: span 2; }
.tile__media { position: absolute; inset: 0; z-index: -2; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(14, 19, 26, .88) 0%, rgba(14, 19, 26, .3) 42%, rgba(14, 19, 26, 0) 68%); transition: opacity .5s; }
.tile:hover .tile__media img { transform: scale(1.025); }
.tile__top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tile__num { padding: 5px 11px; border-radius: 999px; background: rgba(18, 24, 32, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.tile__match { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 8px; border-radius: 999px; background: var(--accent); color: var(--ink); font-family: var(--font-head); font-size: 12px; font-weight: 800; opacity: 0; transform: translateY(-6px) scale(.9); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.tile__match .ic { width: 14px; height: 14px; }
.tile__body { position: absolute; left: 22px; right: 76px; bottom: 20px; display: flex; flex-direction: column; }
.tile__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tile__tags span { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12px; font-weight: 600; }
.tile__title { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.tile--xl .tile__title { font-size: clamp(26px, 2.5vw, 36px); }
.tile__text { display: block; max-height: 0; overflow: hidden; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .82); opacity: 0; transition: max-height .6s var(--ease), margin-top .6s var(--ease), opacity .45s; }
.tile:hover .tile__text, .tile:focus-visible .tile__text, .tile--xl .tile__text { max-height: 7.5em; margin-top: 6px; opacity: 1; }
.tile--xl .tile__text { max-width: 44ch; font-size: 15.5px; }
.tile__arrow { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--ink); transition: background-color .35s, transform .5s var(--ease); }
.tile__arrow .ic { transition: transform .45s var(--ease); }
.tile:hover .tile__arrow { background: var(--accent); }
.tile:hover .tile__arrow .ic { transform: translate(2px, -2px); }
.bento.is-filtering .tile:not(.is-match) { opacity: .32; filter: grayscale(1); }
.bento.is-filtering .tile.is-match { box-shadow: 0 0 0 3px var(--accent), 0 24px 50px -24px rgba(255, 167, 43, .6); }
.bento.is-filtering .tile.is-match .tile__match { opacity: 1; transform: none; }

/* ==========================================================================
   Realizacje: zakładki + slider
   ========================================================================== */
.slider__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.tabs { position: relative; display: inline-flex; padding: 5px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.tabs__btn { position: relative; z-index: 1; height: 42px; padding: 0 18px; border-radius: 999px; font-family: var(--font-head); font-size: 14.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; transition: color .4s var(--ease); }
.tabs__btn sup { margin-left: 3px; font-size: 12px; color: var(--muted); transition: color .4s; }
.tabs__btn.is-active { color: #fff; }
.tabs__btn.is-active sup { color: var(--accent); }
.tabs__pill { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--ink); transition: transform .55s var(--ease), width .55s var(--ease); }
.slider__nav { display: flex; align-items: center; gap: 10px; }
.slider__count { margin-right: 8px; font-family: var(--font-head); font-size: 14.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.slider__count b { color: var(--ink); font-weight: 800; }
.slider__viewport { overflow: hidden; cursor: grab; border-radius: 4px; }
.slider__viewport.is-dragging { cursor: grabbing; }
.slider__viewport:focus-visible { outline-offset: 6px; }
.slider__container { display: flex; margin-left: -18px; touch-action: pan-y pinch-zoom; }
.work { flex: 0 0 33.3333%; min-width: 0; padding-left: 18px; }
.work__link { display: block; }
.work__media { position: relative; aspect-ratio: 4 / 3.05; border-radius: 22px; overflow: hidden; background: var(--steel-soft); }
.work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); user-select: none; -webkit-user-drag: none; }
.work__link:hover .work__media img { transform: scale(1.05); }
.work__type { position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--font-head); font-size: 12px; font-weight: 800; color: var(--ink); }
.work__go { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--accent); color: var(--ink); transform: scale(0) rotate(-45deg); transition: transform .5s var(--ease); }
.work__link:hover .work__go, .work__link:focus-visible .work__go { transform: none; }
.work__body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 4px 0; }
.work__title { display: flex; align-items: center; gap: 8px; font-size: 21px; letter-spacing: -.02em; }
.work__title .ic { width: 18px; height: 18px; color: var(--accent); }
.work__cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--muted); transition: color .3s; }
.work__cta .ic { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.work__link:hover .work__cta { color: var(--ink); }
.work__link:hover .work__cta .ic { transform: translateX(3px); }
.slider__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 30px; }
.slider__progress { position: relative; flex: 1; max-width: 460px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.slider__progress span { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(.3); transition: transform .2s linear; }
.slider.is-native .slider__viewport { overflow-x: auto; scroll-snap-type: x mandatory; }
.slider.is-native .work { scroll-snap-align: start; }

/* ==========================================================================
   O nas
   ========================================================================== */
.about { background: var(--bg); }
.about__box { position: relative; padding-top: var(--section-y); background: var(--ink); color: #fff; overflow: hidden; }
.about__box::before { content: ''; position: absolute; top: -20%; right: -10%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 167, 43, .14), transparent); pointer-events: none; }
.about__inner { position: relative; }
.about__head { max-width: 860px; }
.about__words { max-width: 1060px; margin: 22px 0 clamp(40px, 5vw, 68px); font-family: var(--font-head); font-size: clamp(21px, 2.15vw, 32px); font-weight: 700; line-height: 1.34; letter-spacing: -.018em; color: #fff; }
html.motion .about__words .w { opacity: .18; }
.about__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr) minmax(0, .7fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.about__img { border-radius: 24px; overflow: hidden; background: var(--ink-3); }
.about__img img { width: 100%; height: 100%; object-fit: cover; }
.about__img--a { aspect-ratio: 870 / 1000; }
.about__img--b { aspect-ratio: 4 / 5; }
.about__why { padding-bottom: 6px; }
.about__why-title { margin-bottom: 12px; font-size: 24px; color: #fff; letter-spacing: -.02em; }
.about__why > p { font-size: 16px; color: rgba(255, 255, 255, .72); }
.about__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0 24px; }
.about__stats li { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .16); }
.about__stats b { font-family: var(--font-head); font-size: clamp(32px, 3vw, 46px); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: #fff; }
.about__stats i { font-style: normal; color: var(--accent); }
.about__stats small { font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .6); }
.about__places { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-bottom: 28px; }
.about__places li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.4; color: rgba(255, 255, 255, .82); }
.about__places .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.about__places span { display: flex; flex-direction: column; }
.about__places small { font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }

.marquee { display: flex; margin-top: clamp(44px, 5vw, 72px); padding-block: 24px 28px; border-top: 1px solid rgba(255, 255, 255, .1); overflow: hidden; white-space: nowrap; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__group span { font-family: var(--font-head); font-size: clamp(22px, 2.5vw, 36px); font-weight: 800; letter-spacing: -.02em; color: rgba(255, 255, 255, .92); }
.marquee__group i { width: 12px; height: 12px; margin: 0 30px; background: var(--accent); transform: rotate(45deg); flex: none; }
html:not(.motion) .marquee { flex-wrap: wrap; white-space: normal; }

/* ==========================================================================
   Opinie: scena opinii + „Za co nas chwalą”
   ========================================================================== */
.reviews { position: relative; overflow: hidden; background: linear-gradient(180deg, #FFF8EE 0%, #FFF0DB 100%); }
.reviews__deco { position: absolute; top: 24px; right: -70px; color: rgba(255, 167, 43, .13); pointer-events: none; }
.reviews__deco .ic { width: 440px; height: 440px; }
.reviews .wrap { position: relative; }
.reviews__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

.testi { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.testi__label { margin-bottom: 14px; font-family: var(--font-head); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.testi__label span { font-family: var(--font); font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.praise-list { display: flex; flex-direction: column; gap: 6px; }
.praise { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 16px 9px 9px; border-radius: 16px; border: 1px solid transparent; text-align: left; transition: background-color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), transform .5s var(--ease); }
.praise__ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: rgba(30, 38, 49, .06); color: var(--ink-2); transition: background-color .45s, color .45s; }
.praise__ic .ic { width: 16px; height: 16px; }
.praise__txt { flex: 1; font-family: var(--font-head); font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.praise small { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.praise:hover { background: rgba(255, 255, 255, .65); }
.praise.is-current { background: #fff; border-color: rgba(255, 167, 43, .4); box-shadow: 0 8px 20px -14px rgba(30, 38, 49, .4); }
.praise.is-current .praise__ic { background: var(--accent); color: var(--ink); }
.praise.is-focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 12px 26px -16px rgba(30, 38, 49, .5); transform: translateX(6px); }

.testi__stage { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 3vw, 44px); border-radius: 32px; background: #fff; box-shadow: 0 44px 90px -44px rgba(140, 84, 12, .38), 0 2px 6px rgba(30, 38, 49, .05); }
.testi__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.testi__count { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.testi__count b { color: var(--ink); }
.testi__q { width: 52px; height: 52px; margin: 18px 0 8px; color: var(--accent); }
.testi__quotes { display: grid; }
.testi__quote { grid-area: 1 / 1; margin: 0; font-family: var(--font-head); font-size: clamp(21px, 2vw, 29px); font-weight: 600; line-height: 1.45; letter-spacing: -.01em; color: var(--ink); opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.testi__quote.is-active { opacity: 1; visibility: visible; transition: opacity .6s var(--ease) .05s; }
.testi__quote mark { color: inherit; border-radius: 3px; background: linear-gradient(var(--accent-soft), var(--accent-soft)) no-repeat 0 92% / 0% .5em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1s var(--ease); }
.testi__quote.is-lit mark { background-size: 100% .5em; }
.testi__quote mark.is-focus { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% .5em; }
.testi__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.testi__authors { display: flex; gap: 6px; min-width: 0; }
.testi__author { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 16px 13px 8px; border-radius: 16px; text-align: left; opacity: .55; transition: background-color .45s var(--ease), opacity .45s; }
.testi__author:hover { opacity: 1; }
.testi__author.is-active { opacity: 1; background: var(--bg); }
.testi__avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--steel); font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--ink); transition: background-color .45s, color .45s; }
.testi__author.is-active .testi__avatar { background: var(--ink); color: var(--accent); }
.testi__who { display: flex; flex-direction: column; line-height: 1.25; }
.testi__who b { font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--ink); }
.testi__who small { font-size: 12px; color: var(--muted); }
.testi__bar { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; opacity: 0; transition: opacity .3s; }
.testi__bar i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(1); transform-origin: left; }
.testi__author.is-active .testi__bar { opacity: 1; }
.testi.is-running .testi__author.is-active .testi__bar i { animation: heroBar var(--testi-dur, 9s) linear forwards; }
.testi.is-paused .testi__author.is-active .testi__bar i { animation-play-state: paused; }
.testi__nav { display: flex; flex: none; gap: 8px; }
.round-btn--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.round-btn--dark:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.stars {
  --rating: 5;
  display: inline-block;
  width: 110px;
  height: 20px;
  background: linear-gradient(90deg, var(--accent) calc(var(--rating) / 5 * 100%), var(--line) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='m10 .8 2.8 5.8 6.3.8-4.6 4.4 1.1 6.3L10 15.1l-5.6 3 1.1-6.3L.9 7.4l6.3-.8z'/%3E%3C/svg%3E") 0 0 / 22px 20px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='m10 .8 2.8 5.8 6.3.8-4.6 4.4 1.1 6.3L10 15.1l-5.6 3 1.1-6.3L.9 7.4l6.3-.8z'/%3E%3C/svg%3E") 0 0 / 22px 20px repeat-x;
  transition: --rating 1.4s var(--ease);
}

/* ==========================================================================
   Proces
   ========================================================================== */
.process { background: var(--bg); }
.steps { position: relative; }
.steps__track { position: absolute; top: 28px; left: 28px; right: 28px; height: 2px; background: var(--line-2); }
.steps__track span { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
html:not(.motion) .steps__track span { transform: none; }
.steps__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); }
.step__dot { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2); color: var(--ink); transition: background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), transform .6s var(--ease); }
.step__dot .ic { width: 24px; height: 24px; }
.step.is-active .step__dot, html:not(.motion) .step__dot { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.step.is-active .step__dot { transform: scale(1.06); }
.step__num { display: block; margin: 22px 0 8px; font-family: var(--font-head); font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--muted); }
.step__title { margin-bottom: 8px; font-size: 20px; letter-spacing: -.015em; }
.step p { font-size: 15px; }

/* ==========================================================================
   Konfigurator + wycena
   ========================================================================== */
.quote { background: var(--bg); }
.cfg { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px); align-items: start; }
.cfg__stage { position: sticky; top: 104px; }
.cfg__preview { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--steel-soft); border: 1px solid var(--line); aspect-ratio: 760 / 500; }
.cfg__svg { width: 100%; height: 100%; }
.cfg__mode { position: absolute; top: 14px; right: 14px; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); }
.cfg__mode button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px; font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--ink-2); transition: background-color .35s, color .35s; }
.cfg__mode .ic { width: 16px; height: 16px; }
.cfg__mode button.is-active { background: var(--ink); color: #fff; }
.cfg__summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; min-height: 31px; }
.cfg__summary span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); animation: chipIn .45s var(--ease); }
.cfg__summary i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
@keyframes chipIn { from { opacity: 0; transform: translateY(6px); } }
.cfg__note { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.cfg__note .ic { width: 16px; height: 16px; }

/* Scena SVG — kolory dnia i wieczoru (zabudowa w perspektywie, wzorowana na realizacjach) */
.cfg__svg {
  --sky1: #BCD5E7; --sky2: #EEF4F8; --tree: #B3C5AF; --tree2: #A1B69D;
  --hw: #F2F2EF; --cp-f: #3B4249; --cp-t: #5A626A; --wood: #BD8A5C; --wood-line: rgba(92, 52, 22, .16);
  --win1: #7D93A3; --win2: #3F4D58; --wfr: #2E343A;
  --lawn: #B6CB9F; --gravel: #DDDAD3; --stone: #F4F3EF; --thuja: #6E8E63; --thuja-d: #5B7A52;
  --sl-t: #DFE0DC; --sl-f: #C3C4C0; --sl-s: #AEAFAB; --tile: rgba(110, 116, 122, .22);
  --fu-t: #4A5158; --fu-f: #3B4147; --fu-s: #30353A; --ch-t: #E9E5DD; --ch-f: #D3CEC4; --ch-s: #BDB7AC; --wd-t: #C99C6C; --wd-f: #A97F55; --wd-s: #94704B;
  --pot-t: #E5E0D7; --pot-f: #D3CDC2; --pot-s: #BEB7AB; --leaf: #7E9D6B; --leaf-d: #6A895A; --trunk: #6B5A48;
  --glass: rgba(214, 234, 246, .2); --glass-side: rgba(214, 234, 246, .34); --glass-glare: .6;
  --joint: rgba(255, 255, 255, .85); --joint-d: rgba(30, 38, 49, .22); --fabric: rgba(50, 56, 62, .84);
  --pill: #fff; --pill-line: #E4E8EC; --pill-txt: #1E2631; --dim: #414C56;
}
.cfg__svg[data-mode="night"] {
  --sky1: #0D1520; --sky2: #26364B; --tree: #1A2530; --tree2: #151E28;
  --hw: #2D3640; --cp-f: #11161B; --cp-t: #1A2027; --wood: #46321F; --wood-line: rgba(0, 0, 0, .25);
  --win1: #F3C47F; --win2: #B87A40; --wfr: #12161B;
  --lawn: #1A251F; --gravel: #2B2E31; --stone: #393C40; --thuja: #1D2A21; --thuja-d: #17221B;
  --sl-t: #3A3B3D; --sl-f: #2A2B2D; --sl-s: #232426; --tile: rgba(0, 0, 0, .28);
  --fu-t: #1F2428; --fu-f: #1A1E22; --fu-s: #15181B; --ch-t: #45423D; --ch-f: #3A3733; --ch-s: #312F2B; --wd-t: #4B3B2C; --wd-f: #3B2E23; --wd-s: #33281F;
  --pot-t: #46433E; --pot-f: #3B3833; --pot-s: #33302C; --leaf: #26352A; --leaf-d: #1F2C23; --trunk: #2A241D;
  --glass: rgba(120, 140, 166, .12); --glass-side: rgba(140, 160, 186, .2); --glass-glare: .14;
  --joint: rgba(255, 255, 255, .3); --joint-d: rgba(0, 0, 0, .3); --fabric: rgba(26, 30, 34, .9);
  --pill: rgba(20, 27, 36, .82); --pill-line: rgba(255, 255, 255, .16); --pill-txt: #fff; --dim: rgba(255, 255, 255, .6);
}
.cfg__svg[data-mode="night"][data-led="1"] {
  --fu-t: #3E352C; --fu-f: #332B24; --fu-s: #2A241E; --ch-t: #C7AE8C; --ch-f: #A88F70; --ch-s: #8E785D; --wd-t: #A07A53; --wd-f: #7E5E40; --wd-s: #6B4F35;
  --pot-t: #917E67; --pot-f: #736350; --pot-s: #5E5141; --leaf: #4E5C3B; --leaf-d: #404D31; --trunk: #4A3C2C;
  --glass: rgba(255, 214, 160, .1); --glass-side: rgba(255, 214, 160, .16);
}
.cfg__svg * { transition: fill .7s var(--ease), stroke .7s var(--ease), opacity .6s var(--ease), stop-color .8s var(--ease); }
.cfg__svg .sky1 { stop-color: var(--sky1); }
.cfg__svg .sky2 { stop-color: var(--sky2); }
.cfg__svg .sky1-fill { fill: var(--sky1); }
.cfg__svg .win1 { stop-color: var(--win1); }
.cfg__svg .win2 { stop-color: var(--win2); }
.cfg__svg .tree { fill: var(--tree); }
.cfg__svg .tree2 { fill: var(--tree2); }
.cfg__svg .hw { fill: var(--hw); }
.cfg__svg .cp-f { fill: var(--cp-f); }
.cfg__svg .cp-t, .cfg__svg .cp-s { fill: var(--cp-t); }
.cfg__svg .wood { fill: var(--wood); }
.cfg__svg .wood-line { stroke: var(--wood-line); }
.cfg__svg .wfr { fill: var(--wfr); }
.cfg__svg .wfr-l { stroke: var(--wfr); }
.cfg__svg .lawn { fill: var(--lawn); }
.cfg__svg .gravel { fill: var(--gravel); }
.cfg__svg .stone { fill: var(--stone); }
.cfg__svg .thuja { fill: var(--thuja); }
.cfg__svg .thuja-d { fill: var(--thuja-d); }
.cfg__svg .sl-t { fill: var(--sl-t); }
.cfg__svg .sl-f { fill: var(--sl-f); }
.cfg__svg .sl-s { fill: var(--sl-s); }
.cfg__svg .tile { stroke: var(--tile); }
.cfg__svg .fu-t { fill: var(--fu-t); }
.cfg__svg .fu-f { fill: var(--fu-f); }
.cfg__svg .fu-s { fill: var(--fu-s); }
.cfg__svg .ch-t { fill: var(--ch-t); }
.cfg__svg .ch-f { fill: var(--ch-f); }
.cfg__svg .ch-s { fill: var(--ch-s); }
.cfg__svg .wd-t { fill: var(--wd-t); }
.cfg__svg .wd-f { fill: var(--wd-f); }
.cfg__svg .wd-s { fill: var(--wd-s); }
.cfg__svg .pot-t { fill: var(--pot-t); }
.cfg__svg .pot-f { fill: var(--pot-f); }
.cfg__svg .pot-s { fill: var(--pot-s); }
.cfg__svg .leaf { fill: var(--leaf); }
.cfg__svg .leaf-d { fill: var(--leaf-d); }
.cfg__svg .trunk { stroke: var(--trunk); stroke-linecap: round; }
/* Profile aluminiowe: czoło, bok w cieniu, góra w świetle */
.cfg__svg .fr-f { fill: var(--frame, #383E42); }
.cfg__svg .fr-s { fill: var(--frame-d, #272B2E); }
.cfg__svg .fr-t { fill: var(--frame-l, #575C60); }
.cfg__svg .fr-line { stroke: var(--frame, #383E42); }
.cfg__svg .fr-hl { stroke: rgba(255, 255, 255, .2); }
.cfg__svg .glass { fill: var(--glass); }
.cfg__svg .glass--side { fill: var(--glass-side); }
.cfg__svg .glass-glare { opacity: var(--glass-glare); }
.cfg__svg .joint { stroke: var(--joint); }
.cfg__svg .joint-d { stroke: var(--joint-d); }
.cfg__svg .handle { stroke: #1A1E23; stroke-linecap: round; }
.cfg__svg .roof-glass { fill: var(--roof-fill); }
.cfg__svg .roof-lines { opacity: var(--roof-lines, 0); }
.cfg__svg .roof-line { stroke: rgba(255, 255, 255, .5); }
.cfg__svg .glare { opacity: var(--glare, .5); }
.cfg__svg .glare-a { fill: #fff; fill-opacity: .42; }
.cfg__svg .glare-b { fill: #fff; fill-opacity: .3; }
.cfg__svg .sh-roof { fill: #22303B; opacity: var(--roof-shadow, .08); }
.cfg__svg .sh-solid { fill: #22303B; opacity: .17; }
.cfg__svg .walls { opacity: 0; }
.cfg__svg[data-walls="sliding"] .walls--sliding, .cfg__svg[data-walls="fixed"] .walls--fixed { opacity: 1; }
.cfg__svg[data-walls="none"] .walls-any { opacity: 0; }
.cfg__svg .fabric { fill: var(--fabric); }
.cfg__svg .blind { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: transform 1.1s var(--ease); }
.cfg__svg[data-zip="1"] .blind { transform: scaleY(1); }
.cfg__svg .zip-box { opacity: 0; }
.cfg__svg[data-zip="1"] .zip-box { opacity: 1; }
.cfg__svg .led, .cfg__svg .led-glow { opacity: 0; }
.cfg__svg[data-led="1"][data-mode="night"] .led, .cfg__svg[data-led="1"][data-mode="night"] .led-glow { opacity: 1; }
.cfg__svg .led-floor { fill: rgba(255, 196, 120, .2); }
.cfg__svg .auto-badge { opacity: 0; }
.cfg__svg[data-auto="1"] .auto-badge { opacity: 1; }
.cfg__svg .badge { fill: #fff; stroke: #E4E8EC; }
.cfg__svg .badge-txt { font-family: Figtree, sans-serif; font-size: 11.5px; font-weight: 800; fill: #1E2631; }
.cfg__svg .night-only { opacity: 0; }
.cfg__svg[data-mode="night"] .night-only { opacity: 1; }
.cfg__svg[data-mode="night"] .day-only { opacity: 0; }
.cfg__svg .dim-line { stroke: var(--dim); }
.cfg__svg .dim-pill { fill: var(--pill); stroke: var(--pill-line); }
.cfg__svg .dim-txt { font-family: Figtree, sans-serif; font-size: 12px; font-weight: 800; fill: var(--pill-txt); }
.cfg__svg[data-dims="0"] .dims { opacity: 0; }

/* Podobne realizacje pod podglądem + powiększenie zdjęcia */
.cfg__real { margin-top: 16px; }
.cfg__real-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 9px; font-size: 13px; color: var(--muted); }
.cfg__real-head b { font-family: var(--font-head); font-size: 14px; font-weight: 800; color: var(--ink); }
.cfg__real-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cfg__real-item { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; padding: 0; border-radius: 14px; background: var(--steel-soft); cursor: zoom-in; animation: realIn .6s var(--ease) both; }
.cfg__real-item:nth-child(2) { animation-delay: .07s; }
.cfg__real-item:nth-child(3) { animation-delay: .14s; }
.cfg__real-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.cfg__real-item:hover img { transform: scale(1.05); }
.cfg__real-item:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }
@keyframes realIn { from { opacity: 0; transform: translateY(8px); } }
.lb { padding: 0; border: 0; border-radius: 18px; background: #0F141A; max-width: min(94vw, 1100px); max-height: 90vh; overflow: hidden; box-shadow: 0 30px 80px rgba(8, 12, 18, .45); }
.lb[open] { animation: lbIn .5s var(--ease); }
.lb::backdrop { background: rgba(14, 19, 25, .74); }
.lb img { display: block; width: auto; height: auto; max-width: min(94vw, 1100px); max-height: 90vh; }
.lb__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: 0 4px 14px rgba(8, 12, 18, .25); }
.lb__close .ic { width: 18px; height: 18px; }
.lb__close:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }
@keyframes lbIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }

.cfg__panel { padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.cfg__progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; }
.cfg__progress li { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 3px solid var(--line); font-family: var(--font-head); font-size: 13.5px; font-weight: 700; color: var(--muted); transition: color .4s, border-color .4s; }
.cfg__progress span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); font-size: 12px; font-weight: 800; transition: background-color .4s, color .4s; }
.cfg__progress li.is-active { color: var(--ink); border-color: var(--ink); }
.cfg__progress li.is-active span { background: var(--ink); color: #fff; }
.cfg__progress li.is-done { color: var(--ink); border-color: var(--accent); }
.cfg__progress li.is-done span { background: var(--accent); color: var(--ink); }
.cfg__steps { position: relative; }
.cfg__step { min-width: 0; margin: 0; padding: 0; border: 0; display: none; }
.cfg__step.is-active { display: block; animation: stepIn .55s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(14px); } }
.cfg__step.is-back { animation-name: stepBack; }
@keyframes stepBack { from { opacity: 0; transform: translateX(-14px); } }

.opt { margin-bottom: 22px; }
.opt__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 10px; font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--ink); }
.opt__label small { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--muted); }
.opt__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.opt-card, .swatch, .toggle, .check { position: relative; cursor: pointer; }
.opt-card input, .swatch input, .toggle input, .check input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.opt-card > span { display: flex; flex-direction: column; gap: 1px; height: 100%; padding: 13px 14px; border-radius: 16px; border: 1.5px solid var(--line); transition: border-color .3s, background-color .3s, box-shadow .3s; }
.opt-card .ic { width: 26px; height: 26px; margin-bottom: 8px; color: var(--ink-2); transition: color .3s; }
.opt-card__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; margin-bottom: 10px; border-radius: 10px; object-fit: cover; background: var(--steel-soft); }
.opt-card b { font-family: var(--font-head); font-size: 14px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.opt-card small { font-size: 12.5px; color: var(--muted); }
.opt-card:hover > span { border-color: var(--line-2); }
.opt-card input:checked + span { border-color: var(--ink); background: var(--bg); box-shadow: inset 0 0 0 1px var(--ink); }
.opt-card input:checked + span .ic { color: var(--ink); }
.opt-card input:focus-visible + span, .swatch input:focus-visible + .swatch__chip, .toggle input:focus-visible ~ .toggle__sw, .check input:focus-visible + .check__box { outline: 2.5px solid var(--accent); outline-offset: 3px; }

.opt__swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.opt__swatches--roof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.swatch__chip { width: 100%; height: 46px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--c, #ccc); transition: box-shadow .3s, border-color .3s, transform .4s var(--ease); }
.swatch__chip--clear { background: linear-gradient(135deg, rgba(196, 222, 238, .75), rgba(255, 255, 255, .95) 55%, rgba(196, 222, 238, .7)); }
.swatch__chip--milk { background: linear-gradient(135deg, #F4F6F7, #E3E8EB); }
.swatch__chip--graphite { background: linear-gradient(135deg, #59626B, #2E343B 60%, #4B535B); }
.swatch__chip--poly { background: repeating-linear-gradient(90deg, #D9E8F2 0 5px, #F0F6FA 5px 10px); }
.swatch__name { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.swatch input:checked + .swatch__chip { border-color: var(--ink); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.swatch--round .swatch__chip { width: 38px; height: 38px; border-radius: 50%; border-color: rgba(0, 0, 0, .12); }
.swatch--round:hover .swatch__chip { transform: scale(1.08); }
.opt__more { font-size: 13px; color: var(--muted); }

.opt__toggles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.toggle { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 8px 6px; padding: 12px 12px 13px 14px; border-radius: 16px; border: 1.5px solid var(--line); transition: border-color .3s, background-color .3s; }
.toggle__ic { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg); color: var(--ink-2); transition: background-color .3s, color .3s; }
.toggle__ic .ic { width: 19px; height: 19px; }
.toggle__txt { grid-column: 1 / -1; grid-row: 2; font-family: var(--font-head); font-size: 13.5px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.toggle__sw { grid-column: 2; grid-row: 1; position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--line-2); transition: background-color .35s; }
.toggle__sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .4s var(--ease); }
.toggle:has(input:checked) { border-color: var(--ink); background: var(--bg); }
.toggle input:checked ~ .toggle__sw { background: var(--ink); }
.toggle input:checked ~ .toggle__sw::after { transform: translateX(16px); }
.toggle input:checked ~ .toggle__ic { background: var(--accent); color: var(--ink); }

.cfg__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.cfg__hint { font-size: 13px; color: var(--muted); }

.range { margin-bottom: 20px; }
.range__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.range__top label { font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--ink); }
.range__top output { padding: 4px 11px; border-radius: 10px; background: var(--bg); font-family: var(--font-head); font-size: 17px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.range input[type="range"] { --p: 50%; width: 100%; height: 26px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.range input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--ink) var(--p), var(--line) var(--p)); }
.range input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--ink) var(--p), var(--line) var(--p)); }
.range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 4px 10px rgba(30, 38, 49, .25); transition: transform .3s var(--ease); }
.range input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 4px 10px rgba(30, 38, 49, .25); }
.range input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.range input[type="range"]:focus-visible { outline: none; }
.range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255, 167, 43, .45); }
.range__scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--muted); }
.range.is-disabled { opacity: .45; pointer-events: none; }
.area { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; padding: 14px 16px; border-radius: 16px; background: var(--accent-wash); border: 1px solid var(--accent-soft); font-size: 13.5px; transition: opacity .4s; }
.area span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.area b { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.area__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent); color: var(--ink); }
.area.is-disabled { opacity: .45; }

.check { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.check__box { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; border: 1.5px solid var(--line-2); background: #fff; color: #fff; transition: background-color .3s, border-color .3s; }
.check__box .ic { width: 14px; height: 14px; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s var(--ease); }
.check input:checked + .check__box { background: var(--ink); border-color: var(--ink); }
.check input:checked + .check__box .ic { opacity: 1; transform: none; }
.check--consent { margin: 6px 0 4px; font-size: 13px; color: var(--text); }
.check__more { font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.check__full a { text-decoration: underline; }
.is-invalid-consent .check__box { border-color: var(--danger); }

.field { position: relative; margin-bottom: 12px; }
.field input, .field textarea { display: block; width: 100%; height: 58px; padding: 24px 16px 8px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-size: 16px; color: var(--ink); outline: 0; transition: border-color .3s, box-shadow .3s; }
.field textarea { height: auto; min-height: 128px; padding-top: 28px; resize: vertical; line-height: 1.5; }
.field label { position: absolute; left: 17px; top: 18px; font-size: 15.5px; color: var(--muted); pointer-events: none; transform-origin: left top; transition: transform .3s var(--ease), color .3s; }
.field input:focus, .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255, 167, 43, .2); }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.78); color: var(--ink-2); font-weight: 600; }
.field__err { display: none; margin-top: 6px; font-size: 12.5px; color: var(--danger); }
.field.is-invalid input { border-color: var(--danger); }
.field.is-invalid .field__err { display: block; }
.field__err--consent { margin: 0 0 4px 34px; }
.is-invalid-consent + .field__err--consent { display: block; }
.field__help { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.cfg__done { padding: 10px 4px 4px; text-align: center; animation: stepIn .6s var(--ease); }
.cfg__done-ic { display: grid; place-items: center; width: 76px; height: 76px; margin: 6px auto 18px; border-radius: 50%; background: var(--accent); color: var(--ink); }
.cfg__done-ic .ic { width: 36px; height: 36px; }
.cfg__done h3 { font-size: 26px; letter-spacing: -.02em; }
.cfg__done > p { max-width: 42ch; margin: 10px auto 0; }
.cfg__done-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 22px 0; padding: 16px 18px; border-radius: 16px; background: var(--bg); font-size: 14px; text-align: left; }
.cfg__done-list dt { color: var(--muted); }
.cfg__done-list dd { font-weight: 600; color: var(--ink); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { background: #fff; }
.faq__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 84px); align-items: start; }
.faq__aside { position: sticky; top: 110px; }
.contact-card { margin-top: 30px; padding: 24px 26px 10px; border-radius: 24px; background: var(--ink); color: #fff; }
.contact-card__title { margin-bottom: 6px; font-family: var(--font-head); font-size: 18px; font-weight: 800; }
.contact-card li { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.contact-card li:first-child { border-top: 0; }
.contact-card small { font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.contact-card a { display: inline-flex; align-items: center; gap: 9px; width: fit-content; font-size: 15.5px; font-weight: 600; transition: color .3s; }
.contact-card a .ic { width: 17px; height: 17px; color: rgba(255, 255, 255, .55); }
.contact-card a:hover { color: var(--accent); }
.faq__list { border-top: 1px solid var(--line-2); }
.qa { border-bottom: 1px solid var(--line-2); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; list-style: none; cursor: pointer; font-family: var(--font-head); font-size: clamp(17px, 1.5vw, 20px); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa__ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line-2); background: #fff; transition: background-color .4s, border-color .4s, color .4s, transform .5s var(--ease); }
.qa__ic .ic { width: 18px; height: 18px; }
.qa[open] .qa__ic { background: var(--ink); border-color: var(--ink); color: var(--accent); transform: rotate(45deg); }
.qa summary:hover .qa__ic { border-color: var(--ink); }
.qa__body { overflow: hidden; }
.qa__body p { max-width: 64ch; padding: 0 60px 26px 0; font-size: 16px; line-height: 1.7; }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta { padding-block: 0 calc(var(--section-y) * .8); background: #fff; }
.cta__box { position: relative; display: flex; align-items: center; min-height: 440px; border-radius: 32px; overflow: hidden; color: #fff; isolation: isolate; background: var(--ink); }
.cta__bg { position: absolute; left: 0; top: -12%; z-index: -2; width: 100%; height: 124%; object-fit: cover; }
.cta__box::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 24, 32, .92) 0%, rgba(18, 24, 32, .62) 52%, rgba(18, 24, 32, .2) 100%); }
.cta__content { max-width: 760px; padding: clamp(32px, 5.5vw, 76px); }
.cta__title { font-size: clamp(32px, 3.8vw, 56px); line-height: 1.07; letter-spacing: -.026em; color: #fff; text-wrap: balance; }
.cta__content > p { max-width: 52ch; margin-top: 16px; font-size: 18px; color: rgba(255, 255, 255, .8); }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 30px; }
.cta__phone { display: inline-flex; align-items: center; gap: 12px; margin-left: 10px; }
.cta__phone .ic { width: 22px; height: 22px; color: var(--accent); }
.cta__phone span { display: flex; flex-direction: column; font-family: var(--font-head); font-size: 19px; font-weight: 800; line-height: 1.2; }
.cta__phone small { font-family: var(--font); font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .6); }

/* ==========================================================================
   Stopka
   ========================================================================== */
.footer { padding-top: clamp(52px, 5.5vw, 76px); background: var(--ink-deep); color: rgba(255, 255, 255, .66); font-size: 15px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; }
.footer__brand img { width: 163px; }
.footer__brand > p { max-width: 40ch; margin: 22px 0 20px; line-height: 1.65; }
.footer__places { display: flex; flex-direction: column; gap: 12px; }
.footer__places li { display: flex; gap: 10px; line-height: 1.45; }
.footer__places .ic { width: 19px; height: 19px; margin-top: 2px; color: var(--accent); }
.footer__places b { display: block; font-family: var(--font-head); font-size: 13px; font-weight: 800; color: #fff; }
.footer__social { display: flex; gap: 10px; margin-top: 22px; }
.footer__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); color: #fff; transition: background-color .35s, color .35s, border-color .35s; }
.footer__social a:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.footer__social .ic { width: 18px; height: 18px; }
.footer__title { margin-bottom: 16px; font-family: var(--font-head); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.footer__links li + li { margin-top: 10px; }
.footer__links a { background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 0 1.5px; padding-bottom: 2px; transition: color .3s, background-size .45s var(--ease); }
.footer__links a:hover { color: #fff; background-size: 100% 1.5px; }
.footer__contact > div + div { margin-top: 16px; }
.footer__contact dt { margin-bottom: 4px; font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.footer__contact dd a { display: block; color: #fff; transition: color .3s; }
.footer__contact dd a:hover { color: var(--accent); }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: clamp(40px, 4.5vw, 56px); padding-top: 22px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; color: rgba(255, 255, 255, .5); }
.footer__bottom a:hover { color: #fff; }

/* ==========================================================================
   Pływające: kontakt, do góry, pasek mobilny, toast
   ========================================================================== */
.fab { position: fixed; right: 24px; bottom: 24px; z-index: 70; transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s; }
.fab.is-away { opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity .4s var(--ease), transform .5s var(--ease), visibility 0s .5s; }
.fab__btn { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 22px 0 18px; border-radius: 999px; background: var(--accent); color: var(--ink); box-shadow: var(--shadow-lg); font-family: var(--font-head); font-size: 15px; font-weight: 700; transition: padding .55s var(--ease), background-color .35s, gap .55s var(--ease); }
.fab__btn .ic { width: 22px; height: 22px; color: var(--ink); }
.fab__label { max-width: 160px; overflow: hidden; white-space: nowrap; transition: max-width .55s var(--ease), opacity .35s; }
.fab.is-compact .fab__btn { padding: 0 18px; gap: 0; }
.fab.is-compact .fab__label, .fab.is-open .fab__label { max-width: 0; opacity: 0; }
.fab.is-open .fab__btn { padding: 0 18px; gap: 0; }
.fab__ic-close { display: none; }
.fab.is-open .fab__ic-open { display: none; }
.fab.is-open .fab__ic-close { display: block; }
.fab__btn:hover { background: var(--accent-2); }
.fab__panel { position: absolute; right: 0; bottom: 72px; width: 330px; padding: 18px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); transform-origin: bottom right; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.94); transition: opacity .35s var(--ease), transform .5s var(--ease), visibility 0s .5s; }
.fab.is-open .fab__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .5s var(--ease); }
.fab__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fab__head img { width: 40px; padding: 8px; border-radius: 12px; background: var(--bg); box-sizing: content-box; }
.fab__head p { display: flex; flex-direction: column; line-height: 1.3; }
.fab__head b { font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--ink); }
.fab__head small { font-size: 13px; color: var(--muted); }
.fab__list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.fab__list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg); font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--ink); transition: background-color .3s; }
.fab__list a:hover { background: var(--accent-wash); }
.fab__list .ic { width: 18px; height: 18px; color: var(--ink-2); }
.fab__list span { display: flex; flex-direction: column; line-height: 1.25; }
.fab__list small { font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--muted); }
.fab .btn { height: 48px; }

.to-top { position: fixed; right: 28px; bottom: 96px; z-index: 69; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .4s var(--ease), transform .5s var(--ease), visibility 0s .5s; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .4s var(--ease), transform .5s var(--ease); }
.to-top .ic { width: 18px; height: 18px; }
.to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top__ring circle { fill: none; stroke-width: 2.5; }
.to-top__ring circle:first-child { stroke: var(--line); }
.to-top__ring circle:last-child { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 138.23; stroke-dashoffset: 138.23; }
.to-top:hover { background: var(--ink); color: #fff; }

.mbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 68; display: none; grid-template-columns: 1fr 1.5fr; gap: 8px; padding: 7px; border-radius: 20px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 40px -14px rgba(21, 27, 35, .4); border: 1px solid var(--line); transform: translateY(140%); transition: transform .6s var(--ease); }
.mbar.is-visible { transform: none; }
.mbar a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 14px; font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--ink); }
.mbar .ic { width: 18px; height: 18px; }
.mbar__call { background: var(--bg); }
.mbar__cta { background: var(--accent); }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 150; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: min(580px, calc(100% - 32px)); padding: 14px 12px 14px 14px; border-radius: 20px; background: var(--ink); color: #fff; box-shadow: var(--shadow-lg); overflow: hidden; opacity: 0; visibility: hidden; transform: translate(-50%, 30px); transition: opacity .4s var(--ease), transform .6s var(--ease), visibility 0s .6s; }
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .4s var(--ease), transform .6s var(--ease); }
.toast__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 167, 43, .16); color: var(--accent); }
.toast__icon .ic { width: 22px; height: 22px; }
.toast__body strong { display: block; font-family: var(--font-head); font-size: 15px; font-weight: 800; line-height: 1.3; }
.toast__body p { margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .75); }
.toast__close { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: rgba(255, 255, 255, .7); transition: background-color .3s, color .3s; }
.toast__close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.toast__close .ic { width: 18px; height: 18px; }
.toast__timer { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.toast.is-visible .toast__timer { animation: toastTimer var(--toast-dur, 5s) linear forwards; }
@keyframes toastTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ==========================================================================
   RWD
   ========================================================================== */
@media (max-width: 1340px) {
  .header__phone-txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }   /* ukryty wizualnie, czytnik ekranu dalej czyta numer */
  .nav__link { padding: 0 11px; }
}
@media (max-width: 1180px) {
  .nav, .mega, .mega-backdrop { display: none; }
  .burger { display: block; }
  .header__inner { gap: 16px; }
  .header__phone-txt { display: flex; }
}
@media (max-width: 1100px) {
  .hero__tab { flex: 0 0 64px; }
  .hero__tab.is-active { flex: 1 1 auto; }
  .hero__tab:not(.is-active) .hero__tab-label { display: none; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero__badge--pl { display: none; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--xl { grid-row: span 2; }
  .usp__grid { grid-template-columns: repeat(2, 1fr); }
  .usp__item { padding: 22px 20px; }
  .usp__item:nth-child(3) { padding-left: 0; border-left: 0; }
  .usp__item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .about__img--b { display: none; }
  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .steps__track { display: none; }
  .footer__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
  .footer__col--contact { grid-column: 1 / -1; }
  .footer__contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .footer__contact > div + div { margin-top: 0; }
}
@media (max-width: 1023px) {
  :root { --header-h: 72px; }
  .header__logo img { width: 140px; }
  .hero__grid { grid-template-columns: 1fr; min-height: 0; gap: 26px; }
  .hero__content { padding: 14px 0 0; }
  .hero__title { font-size: clamp(36px, 6.4vw, 56px); }
  .hero__media { min-height: 0; flex: none; aspect-ratio: 4 / 3.2; }
  .section-head--split { grid-template-columns: 1fr; gap: 14px; }
  .cfg { grid-template-columns: 1fr; }
  .cfg__stage { position: relative; top: 0; }
  .faq__grid { grid-template-columns: 1fr; }
  .faq__aside { position: static; }
  .testi { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .testi__praise, .testi__stage { min-width: 0; }
  .praise-list { flex-direction: row; overflow-x: auto; width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; scrollbar-width: none; }
  .praise-list::-webkit-scrollbar { display: none; }
  .praise { flex: none; width: auto; padding: 7px 14px 7px 7px; background: rgba(255, 255, 255, .55); }
  .praise small { display: none; }
  .praise__txt { font-size: 15px; white-space: nowrap; }
  .praise.is-focus { transform: none; }
  .reviews__deco .ic { width: 300px; height: 300px; }
  .work { flex-basis: 50%; }
}
@media (max-width: 767px) {
  :root { --util-h: 36px; --header-h: 66px; }
  body { font-size: 15.5px; }
  .utilbar__links { display: none; }
  .utilbar__ticker { width: 100%; }
  .utilbar__ticker li { overflow: hidden; text-overflow: ellipsis; }
  .utilbar__inner { gap: 12px; }
  .utilbar__ticker li { font-size: 12px; }
  .header__cta { display: none; }
  .header__phone-txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .header__logo img { width: 128px; }
  .header__phone-ic { width: 46px; height: 46px; }
  .hero { padding-top: 16px; }
  .hero__title { font-size: clamp(33px, 9.6vw, 44px); }
  .hero__cta { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 24px; }
  .hero-btn { width: 100%; height: 70px; }
  .hero-btn__txt { flex: 1; min-width: 0; }
  .hero-btn__txt small { font-size: 12.5px; }
  .hero__perks { gap: 8px 14px; font-size: 13.5px; }
  .hero__stats { gap: 14px; }
  .hero__stats li { padding-left: 14px; }
  .hero__stats b { font-size: 25px; }
  .hero__stats small { font-size: 12px; }
  .hero__visual { padding-top: 0; }
  .hero__dim { display: none; }
  .hero__media { aspect-ratio: 4 / 4.4; border-radius: 24px; }
  .hero__badge--measure { top: 12px; left: 12px; padding: 7px 12px 7px 7px; }
  .hero__badge-ic { width: 32px; height: 32px; border-radius: 10px; }
  .hero__badge b { font-size: 13px; }
  .hero__tabs { left: 10px; right: 10px; bottom: 10px; padding: 5px; gap: 4px; }
  .hero__tab { padding: 11px 12px 15px; }
  .hero__tab:not(.is-active) { flex-basis: 52px; }
  .hero__tab-label { font-size: 13.5px; }
  .hero__tab-link { width: 44px; }
  .hotspot__card { width: 200px; }
  .usp__grid { grid-template-columns: 1fr; }
  .usp__item, .usp__item:nth-child(3) { padding: 16px 0; border-left: 0; }
  .usp__item + .usp__item { border-top: 1px solid var(--line); }
  .usp__ic { width: 46px; height: 46px; }
  .needs { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .needs__result { grid-column: 1; grid-row: 3; text-align: left; font-size: 13px; }
  .needs__chips { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .needs__chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  /* Oferta: kompaktowa siatka 2 kolumny zamiast 8 wysokich kafelków */
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 168px; gap: 10px; }
  .tile { border-radius: 20px; }
  .tile--xl, .tile--wide { grid-column: 1 / -1; grid-row: auto; }
  .tile--xl { grid-row: span 2; }
  .tile__top { top: 12px; left: 12px; right: 12px; }
  .tile__body { left: 14px; right: 14px; bottom: 14px; }
  .tile:not(.tile--xl):not(.tile--wide) .tile__body { right: 14px; }
  .tile__title { font-size: 17px; }
  .tile--xl .tile__title { font-size: 26px; }
  .tile__tags { margin-bottom: 8px; }
  .tile:not(.tile--xl) .tile__tags, .tile:not(.tile--xl) .tile__text { display: none; }
  .tile--xl .tile__body { right: 64px; }
  .tile--xl .tile__text { max-height: 7.5em; margin-top: 6px; opacity: 1; font-size: 14px; }
  .tile__arrow { top: 12px; right: 12px; bottom: auto; width: 36px; height: 36px; }
  .tile__arrow .ic { width: 16px; height: 16px; }
  .tile--xl .tile__arrow { top: auto; bottom: 14px; width: 44px; height: 44px; }
  .tile__match { display: none; }
  /* FAQ: najpierw pytania, karta kontaktowa pod nimi */
  .faq__grid { gap: 0; }
  .faq__aside { display: contents; }
  .faq__list { order: 2; margin-top: 8px; }
  .contact-card { order: 3; margin-top: 28px; }
  .slider__bar { flex-direction: column; align-items: stretch; }
  .slider__bar > * { min-width: 0; max-width: 100%; }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs__btn { padding: 0 14px; font-size: 13.5px; }
  .slider__nav { justify-content: flex-end; }
  .slider__count { margin-right: auto; }
  .work { flex-basis: 86%; padding-left: 14px; }
  .slider__container { margin-left: -14px; }
  .slider__foot { flex-direction: column; align-items: flex-start; gap: 18px; }
  .slider__progress { width: 100%; max-width: none; }
  .about__grid { grid-template-columns: 1fr; }
  .about__img--a { aspect-ratio: 4 / 3.4; }
  .about__stats { gap: 10px; }
  .about__stats b { font-size: 34px; }
  .steps__list { grid-template-columns: 1fr; row-gap: 0; }
  .step { display: grid; grid-template-columns: 58px 1fr; column-gap: 18px; padding-bottom: 28px; position: relative; }
  .step::before { content: ''; position: absolute; left: 28px; top: 60px; bottom: 0; width: 2px; background: var(--line-2); }
  .step:last-child::before { display: none; }
  .step__dot { grid-row: span 3; }
  .step__num { margin: 4px 0 4px; }
  .opt__cards, .opt__toggles { grid-template-columns: 1fr; }
  .opt-card > span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; }
  .opt-card .ic { grid-row: span 2; margin: 0; }
  .opt-card__img { grid-row: span 2; width: 84px; margin: 0; border-radius: 8px; }
  .cfg__svg .tag { transform: scale(1.65); }
  .toggle { grid-template-columns: auto 1fr auto; grid-template-rows: auto; align-items: center; gap: 12px; padding: 10px 12px; }
  .toggle__txt { grid-column: 2; grid-row: 1; }
  .toggle__sw { grid-column: 3; }
  .opt__swatches--roof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .cfg__nav .btn { padding: 0 18px; }
  .cfg__mode span { display: none; }
  .cfg__mode button { padding: 0 10px; }
  .cfg__preview { aspect-ratio: 760 / 560; }
  .testi__stage { padding: 22px 20px; border-radius: 26px; }
  .testi__q { width: 40px; height: 40px; margin: 12px 0 6px; }
  .testi__quote { font-size: 20px; }
  .testi__nav { display: none; }
  .testi__author { padding-right: 10px; }
  .testi__author:not(.is-active) .testi__who { display: none; }
  .testi__author:not(.is-active) { padding: 8px 8px 13px; }
  .qa summary { padding: 20px 0; }
  .qa__body p { padding-right: 0; }
  .cta__box { min-height: 0; border-radius: 26px; }
  .cta__box::after { background: linear-gradient(180deg, rgba(18, 24, 32, .7), rgba(18, 24, 32, .92)); }
  .cta__actions .btn { width: 100%; }
  .cta__phone { margin: 6px 0 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__contact { grid-template-columns: 1fr; }
  .footer__bottom { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .fab { display: none; }
  .mbar { display: grid; }
  .to-top { right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); width: 46px; height: 46px; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .hero__stats small { max-width: 11ch; }
  .tabs__btn sup { display: none; }
}

@media (hover: none) {
  .tile__text { max-height: 7.5em; margin-top: 6px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ===== Poprawki SEO/UX (pakiet strona-artals-seo, 2026-10-17) ===== */
html.no-loader .loader { display: none; }
.cfg__error { margin: 0 0 4px; padding: 12px 14px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--danger) 9%, #fff); color: var(--danger); font-size: 14px; line-height: 1.45; }
.cfg__error:focus { outline: none; }
.cfg__error a { color: inherit; font-weight: 600; white-space: nowrap; }
.btn.is-loading { opacity: .6; cursor: progress; }

/* ===== Konfigurator 3D (Three.js, assets/js/konfigurator-3d.js) ===== */
.cfg3d { position: absolute; inset: 0; }
.cfg__preview.is-3d .cfg__svg { visibility: hidden; }
.cfg3d canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; outline: none; -webkit-tap-highlight-color: transparent; }
.cfg3d canvas:active { cursor: grabbing; }
.cfg3d__dim { position: absolute; left: 0; top: 0; padding: 6px 11px; border-radius: 999px; background: #fff; color: var(--ink); font-family: var(--font-head); font-size: 13px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 2px 10px rgba(30, 38, 49, .18); pointer-events: none; will-change: transform; }
.cfg3d__badge { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); font-family: var(--font-head); font-size: 13px; font-weight: 800; color: var(--ink); }
.cfg3d__hint { position: absolute; left: 14px; bottom: 14px; margin: 0; padding: 7px 12px; border-radius: 999px; background: rgba(21, 27, 35, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.2; pointer-events: none; transition: opacity .6s var(--ease); }
.cfg3d.is-touched .cfg3d__hint { opacity: 0; }
.cfg3d__dim[hidden], .cfg3d__badge[hidden] { display: none; }
@media (max-width: 600px) {
  .cfg3d__dim { padding: 5px 9px; font-size: 12px; }
  .cfg3d__badge { height: 30px; font-size: 12px; }
  .cfg3d__hint { font-size: 12px; }
}

/* ===== Dostępność (18.10.2026) ===== */
.hero__tablist { display: contents; }   /* rola tablist tylko dla zakładek, link obok zostaje poza nią */
.footer__links a { display: inline-block; padding-top: 2px; padding-bottom: 4px; }   /* cel dotyku min. 24 px */
.footer__bottom a { display: inline-block; padding-block: 2px; }

/* ==========================================================================
   Bezpłatna wycena: zapowiedź na stronie głównej (konfigurator jest na bezplatna-wycena/)
   ========================================================================== */
.quote-teaser__inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.quote-teaser__media { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--steel-soft); box-shadow: var(--shadow); aspect-ratio: 1400 / 917; isolation: isolate; }
.quote-teaser__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.quote-teaser__media:hover img, .quote-teaser__media:focus-visible img { transform: scale(1.03); }
.quote-teaser__badge { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: rgba(21, 27, 35, .8); color: #fff; font-size: 14px; font-weight: 600; }
.quote-teaser__badge .ic { width: 18px; height: 18px; color: var(--accent); }
.quote-teaser__lead { max-width: 46ch; margin-top: 18px; font-size: 16.5px; }
.quote-teaser__steps { display: grid; gap: 14px; margin: 26px 0 30px; padding: 0; list-style: none; counter-reset: krok; }
.quote-teaser__steps li { display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; counter-increment: krok; }
.quote-teaser__steps li::before { content: counter(krok); grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--ink); font-size: 14px; font-weight: 800; }
.quote-teaser__steps b, .quote-teaser__steps span { grid-column: 2; }
.quote-teaser__steps b { color: var(--ink); font-size: 16px; line-height: 1.3; }
.quote-teaser__steps span { color: var(--muted); font-size: 14.5px; }
.quote-teaser__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.quote-teaser__call { padding-block: 10px; color: var(--muted); font-size: 15px; text-decoration: none; }
.quote-teaser__call b { color: var(--ink); }
@media (max-width: 899px) {
  .quote-teaser__inner { grid-template-columns: minmax(0, 1fr); }
  .quote-teaser__media { order: 2; }
}

/* Strona bezpłatnej wyceny: konfigurator od razu pod nagłówkiem, bez dolnego paska (formularz jest na ekranie) */
html[data-page="wycena"] main > .section:first-child { padding-top: clamp(28px, 3.5vw, 52px); }
html[data-page="wycena"] .mbar { display: none; }
@media (max-width: 767px) {
  html[data-page="wycena"] .footer__bottom { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  html[data-page="wycena"] .to-top { bottom: calc(16px + env(safe-area-inset-bottom)); }
}