/* =========================================================
   MIKEY GARAGE – Strona główna
   Paleta: głęboka czerń · grafit / szczotkowana stal · metaliczna burgundowa czerwień
   ========================================================= */
:root{
  --black:#060607;
  --black-2:#030304;
  --graphite:#15171a;
  --graphite-2:#0b0c0e;
  --steel:#24272c;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);

  --text:#ecebe8;
  --text-strong:#f6f5f3;
  --muted:#b3b6bd;
  --muted-2:#8e929a;

  --red:#9b1b26;
  --red-hi:#c4313f;
  --red-text:#e2535f;
  --red-grad:linear-gradient(180deg,#c9343f 0%,#9b1b26 52%,#650e18 100%);
  --chrome:linear-gradient(180deg,#ffffff 0%,#e6e8eb 38%,#9ca1aa 72%,#e9eaed 100%);
  /* bardzo subtelne ziarno (SVG noise) – zamiast pionowych linii */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --font-head:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --nav-h:72px;
  --gutter:16px;
  --max:1200px;
  --r-s:6px;
  --r-m:12px;
  --r-l:18px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:640px){ :root{ --gutter:24px; } }
@media (min-width:1024px){ :root{ --gutter:32px; --nav-h:80px; } }

/* ---------- Reset / baza ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }
body{
  margin:0; background:var(--black); color:var(--text);
  font:400 1rem/1.7 var(--font-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.menu-open{ overflow:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-family:var(--font-head); color:var(--text-strong); line-height:1.1; letter-spacing:-.02em; text-wrap:balance; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
svg{ flex-shrink:0; }
:focus-visible{ outline:2px solid #f0b6bc; outline-offset:3px; border-radius:4px; }

.container{ width:100%; max-width:calc(var(--max) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); }
.skip-link{
  position:absolute; left:var(--gutter); top:-80px; z-index:300;
  padding:12px 18px; border-radius:var(--r-s); background:var(--text-strong); color:var(--black);
  font:600 .9375rem var(--font-head); text-decoration:none;
}
.skip-link:focus{ top:12px; }

/* ---------- Przyciski ---------- */
.btn{
  --h:54px;
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--h); padding:0 28px; border-radius:var(--r-s);
  border:1px solid transparent; cursor:pointer; white-space:nowrap; text-decoration:none;
  font:600 .9375rem/1 var(--font-head); letter-spacing:.01em;
  transition:transform .3s var(--ease), box-shadow .35s var(--ease), background-color .3s, border-color .3s, color .3s;
}
.btn-primary{
  color:#fff; background:var(--red-grad); border-color:rgba(255,140,150,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 28px -12px rgba(196,49,63,.65);
}
/* refleks światła przesuwający się po przycisku */
.btn-primary::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .8s var(--ease);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 18px 40px -14px rgba(196,49,63,.9);
}
.btn-primary:hover::after{ transform:translateX(120%); }
.btn-ghost{
  color:var(--text-strong); background:rgba(255,255,255,.02); border-color:rgba(200,204,211,.36);
}
.btn-ghost:hover{ transform:translateY(-2px); background:rgba(255,255,255,.07); border-color:rgba(232,234,238,.75); }
.btn-sm{ --h:44px; padding:0 20px; font-size:.875rem; }
.btn svg{ width:18px; height:18px; }

.link-arrow{
  display:inline-flex; align-items:center; gap:10px; padding:6px 0;
  font:600 .9375rem/1.2 var(--font-head); color:var(--text-strong); text-decoration:none;
  border-bottom:1px solid rgba(196,49,63,.65);
  transition:border-color .3s, color .3s;
}
.link-arrow svg{ width:18px; height:18px; transition:transform .35s var(--ease); }
.link-arrow:hover{ border-color:var(--red-hi); }
.link-arrow:hover svg{ transform:translateX(5px); }

/* ---------- Nawigacja (sticky) ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  background:rgba(6,6,7,.84);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:background-color .4s, border-color .4s;
}
/* przezroczysta nad sekcją Hero, dopóki nie przewiniesz */
.js .nav:not(.is-scrolled):not(.is-menu-open){
  background:linear-gradient(180deg,rgba(6,6,7,.55),rgba(6,6,7,0));
  border-bottom-color:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:100%; }
.nav-logo{ display:block; flex-shrink:0; }
.nav-logo img{ height:50px; width:auto; }
@media (min-width:1024px){ .nav-logo img{ height:58px; } }

.nav-links{ display:none; }
@media (min-width:1024px){
  .nav-links{ display:flex; align-items:center; gap:2px; margin-left:auto; }
}
.nav-links > li > a{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:12px 14px; color:#d6d8dc; text-decoration:none;
  font:500 .9375rem/1 var(--font-head); transition:color .25s;
}
.nav-links > li > a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px;
  background:var(--red-hi); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav-links > li > a:hover{ color:#fff; }
.nav-links > li > a:hover::after,
.nav-links > li > a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-links .chev{ width:14px; height:14px; transition:transform .3s var(--ease); }

.has-sub{ position:relative; }
.has-sub::before{ content:""; position:absolute; top:100%; left:0; right:0; height:12px; } /* mostek dla hover */
.sub{
  position:absolute; top:calc(100% + 10px); left:-6px; min-width:330px; padding:8px;
  background:rgba(14,15,18,.98); border:1px solid var(--line-2); border-radius:var(--r-m);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .25s, transform .25s var(--ease), visibility .25s;
}
.has-sub:hover .sub,
.has-sub:focus-within .sub{ opacity:1; visibility:visible; transform:none; }
.has-sub:hover .chev,
.has-sub:focus-within .chev{ transform:rotate(180deg); }
.sub a{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 14px; border-radius:8px; color:#d6d8dc; text-decoration:none;
  font:500 .9375rem/1.3 var(--font-body); transition:background-color .2s, color .2s;
}
.sub a:hover{ background:rgba(255,255,255,.05); color:#fff; }
.tag-new{
  padding:4px 7px 3px; border-radius:4px; background:rgba(196,49,63,.16);
  color:#f2a4ab; font:700 .625rem/1 var(--font-head); letter-spacing:.1em;
}

.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-phone{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2);
  color:#fff; text-decoration:none; transition:border-color .3s, background-color .3s;
}
.nav-phone:hover{ border-color:var(--red-hi); background:rgba(196,49,63,.12); }
.nav-phone svg{ width:18px; height:18px; color:var(--red-text); }
.nav-phone-num{ display:none; }
@media (min-width:1200px){
  .nav-phone{ width:auto; padding:0 14px 0 4px; border-color:transparent; border-radius:var(--r-s); }
  .nav-phone:hover{ background:transparent; border-color:transparent; }
  .nav-phone-num{ display:inline; font:600 .9375rem/1 var(--font-head); }
}
.nav-cta{ display:none; }
@media (min-width:640px){ .nav-cta{ display:inline-flex; } }

.nav-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 12px; cursor:pointer;
  background:transparent; border:1px solid var(--line-2); border-radius:50%;
}
.nav-toggle span{ display:block; height:1.5px; border-radius:2px; background:#fff; transition:transform .35s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
@media (min-width:1024px){ .nav-toggle{ display:none; } }

/* Dropdown „Lokalizacje” – dwie kolumny: Warszawa / Okolice */
.nav-sub-btn{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:12px 14px; border:0; background:transparent; cursor:pointer;
  color:#d6d8dc; font:500 .9375rem/1 var(--font-head); transition:color .25s;
}
.nav-sub-btn::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px;
  background:var(--red-hi); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav-sub-btn:hover,
.has-sub.is-open .nav-sub-btn{ color:#fff; }
.nav-sub-btn:hover::after,
.has-sub.is-open .nav-sub-btn::after{ transform:scaleX(1); }
.has-sub.is-open .sub{ opacity:1; visibility:visible; transform:none; }
.has-sub.is-open .chev{ transform:rotate(180deg); }
.sub--areas{
  left:50%; margin-left:-340px; width:680px; min-width:0; padding:20px 12px 14px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 8px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(155,27,38,.14), transparent 70%),
    rgba(14,15,18,.98);
}
.sub--areas .sub-group + .sub-group{ border-left:1px solid var(--line); padding-left:8px; }
.sub-group-title{
  margin:0 0 6px; padding:0 14px 10px; border-bottom:1px solid var(--line);
  color:var(--muted-2); font:600 .8125rem/1.2 var(--font-head);
}
.sub--areas a{ position:relative; padding:9px 14px 9px 18px; }
.sub--areas a::before{
  content:""; position:absolute; left:7px; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:50%;
  background:var(--red-hi); opacity:0; transition:opacity .2s;
}
.sub--areas a:hover::before,
.sub--areas a:focus-visible::before{ opacity:1; }

/* Akordeon „Lokalizacje” w menu mobilnym (natywny <details>, działa bez JS) */
.mm-acc summary{
  display:flex; align-items:center; justify-content:space-between; padding:16px 0;
  cursor:pointer; list-style:none;
  font:700 1.5rem/1.2 var(--font-head); letter-spacing:-.02em; color:var(--text-strong);
}
.mm-acc summary::-webkit-details-marker{ display:none; }
.mm-acc summary .chev{ width:22px; height:22px; color:var(--red-text); transition:transform .3s var(--ease); }
.mm-acc[open] summary .chev{ transform:rotate(180deg); }
.mm-acc-body{ padding-bottom:14px; }
.mm-acc-title{ margin:8px 0 4px; color:var(--muted-2); font:600 .8125rem/1.2 var(--font-head); }
.mm-acc-body .mm-sub{ display:grid; grid-template-columns:1fr 1fr; column-gap:12px; padding:0 0 10px; }
.mm-acc-body .mm-sub a{ padding:9px 0; border-left:0; font-size:1rem; }
/* zagnieżdżone sekcje: Prawy Brzeg / Lewy Brzeg / Okolice */
.mm-acc--sub{ border-top:1px solid var(--line); }
.mm-acc--sub summary{ padding:14px 0; font:600 1.0625rem/1.3 var(--font-head); letter-spacing:0; color:#e4e5e8; }
.mm-acc--sub summary .chev{ width:18px; height:18px; margin-left:auto; }
.mm-count{
  margin-left:10px; margin-right:12px; padding:3px 8px; border-radius:99px;
  background:rgba(255,255,255,.06); color:var(--muted-2); font:600 .75rem/1 var(--font-head);
}

/* ---------- Menu mobilne ---------- */
.mobile-menu{
  position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; z-index:99;
  overflow-y:auto; overscroll-behavior:contain;
  padding:12px var(--gutter) calc(40px + env(safe-area-inset-bottom));
  background:var(--black);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .3s, transform .35s var(--ease), visibility .3s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; transform:none; }
@media (min-width:1024px){ .mobile-menu{ display:none; } }
.mm-list > li{ border-bottom:1px solid var(--line); }
.mm-list > li > a{
  display:block; padding:16px 0; text-decoration:none;
  font:700 1.5rem/1.2 var(--font-head); letter-spacing:-.02em; color:var(--text-strong);
}
.mm-sub{ padding:0 0 14px; }
.mm-sub a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0 10px 16px; border-left:1px solid var(--line-2);
  color:var(--muted); text-decoration:none; font-size:1rem;
}
.mm-sub a:hover{ color:#fff; }
.mm-cta{ width:100%; margin-top:28px; }
.mm-contact{ margin-top:24px; display:grid; gap:6px; color:var(--muted); font-size:.9375rem; }
.mm-contact a{ font:700 1.25rem/1.3 var(--font-head); color:#fff; text-decoration:none; }

/* ---------- HERO ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100svh;
  padding-top:calc(var(--nav-h) + 40px);
  background:
    radial-gradient(120% 70% at 50% 118%, rgba(155,27,38,.42) 0%, rgba(101,14,24,.16) 38%, transparent 66%),
    radial-gradient(90% 55% at 50% -5%, #202227 0%, transparent 72%),
    linear-gradient(180deg,#0e0f11 0%,#070708 58%,var(--black) 100%);
}
.hero-media{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
/* delikatne ziarno + bordowa poświata przy krawędziach */
.hero-media::before{
  content:""; position:absolute; inset:0;
  background:
    var(--noise),
    radial-gradient(40% 50% at 0% 60%, rgba(155,27,38,.14), transparent 70%),
    radial-gradient(40% 50% at 100% 60%, rgba(155,27,38,.14), transparent 70%);
  background-size:180px 180px, auto, auto;
}
/* przyciemnienie dla czytelności tekstu (działa też na wideo) */
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 45% at 50% 52%, rgba(6,6,7,.55), transparent 75%),
    linear-gradient(180deg,rgba(6,6,7,.15) 0%,rgba(6,6,7,0) 35%,rgba(6,6,7,.55) 82%,var(--black) 100%);
}
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.6; }

/* Odbicie liniowych lamp LED studia – zapalają się przy wejściu na stronę */
.hero-lights{
  position:absolute; left:0; right:0; top:0; height:min(36%,320px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 35%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 35%,transparent 100%);
  opacity:.5;
  animation:lights-on 1.8s linear .15s both;
}
/* rzędy lamp w perspektywie: im bliżej, tym dłuższe i grubsze */
.hero-lights span{
  position:absolute; left:50%; border-radius:99px; transform:translateX(-50%);
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.95) 14%,rgba(255,255,255,.95) 86%,transparent 100%);
  box-shadow:0 0 18px 3px rgba(255,255,255,.22), 0 0 60px 14px rgba(220,225,235,.08);
}
.hero-lights span:nth-child(1){ top:30%; width:18%; height:2px; }
.hero-lights span:nth-child(2){ top:44%; width:28%; height:2px; }
.hero-lights span:nth-child(3){ top:60%; width:42%; height:3px; }
.hero-lights span:nth-child(4){ top:78%; width:60%; height:4px; }
.hero-lights span:nth-child(5){ top:98%; width:84%; height:5px; }
@media (max-width:639px){
  .hero-lights{ top:calc(var(--nav-h) - 8px); height:92px; }
  .hero-lights span:nth-child(1){ top:22%; width:34%; }
  .hero-lights span:nth-child(2){ top:52%; width:50%; }
  .hero-lights span:nth-child(3){ top:86%; width:70%; }
  .hero-lights span:nth-child(4),
  .hero-lights span:nth-child(5){ display:none; }
}
@keyframes lights-on{
  0%{ opacity:0; }  8%{ opacity:.42; } 12%{ opacity:.04; } 19%{ opacity:.46; }
  23%{ opacity:.12; } 34%{ opacity:.5; } 100%{ opacity:.5; }
}
/* powolny przesuw światła inspekcyjnego po „lakierze” */
.hero-sweep{
  position:absolute; inset:-30% -60%;
  background:linear-gradient(100deg,transparent 43%,rgba(255,255,255,.05) 48.5%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.05) 51.5%,transparent 57%);
  transform:translateX(-55%);
  animation:sweep 12s cubic-bezier(.45,0,.2,1) 2s infinite;
}
@keyframes sweep{ 0%{ transform:translateX(-55%); } 50%,100%{ transform:translateX(55%); } }

.hero-inner{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding-block:32px 56px;
}
.hero-title{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.hero-eyebrow{
  margin:0; display:inline-flex; align-items:center; gap:14px;
  font:600 .8125rem/1.4 var(--font-head); letter-spacing:.06em; color:var(--red-text);
}
.hero-eyebrow::before,
.hero-eyebrow::after{ content:""; width:28px; height:1px; background:linear-gradient(90deg,transparent,var(--red-hi)); }
.hero-eyebrow::after{ transform:scaleX(-1); }
@media (max-width:539px){
  .hero-eyebrow{ letter-spacing:.03em; font-size:.75rem; }
  .hero-eyebrow::before,.hero-eyebrow::after{ display:none; }
}
.hero-headline{
  display:block; margin:0; max-width:12ch;
  font:800 clamp(2.75rem,11vw,7.5rem)/.98 var(--font-head); letter-spacing:-.045em;
  color:var(--text-strong);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-headline{ background:var(--chrome); -webkit-background-clip:text; background-clip:text; color:transparent; }
}
.hero-sub{
  max-width:60ch; margin-top:28px; color:var(--muted);
  font-size:clamp(1rem,1.5vw,1.1875rem); line-height:1.65;
}
.hero-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; width:100%; margin-top:38px; }
.hero-ctas .btn{ flex:1 1 240px; max-width:280px; }
@media (max-width:539px){ .hero-ctas .btn{ max-width:none; } }

/* Pasek zaufania */
.trust{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line); padding-block:22px 26px;
}
.trust li{
  display:flex; flex-direction:column; align-items:center; gap:10px; padding-inline:6px;
  text-align:center; color:#cfd2d7; font:500 .8125rem/1.35 var(--font-head);
}
.trust svg{ width:22px; height:22px; color:var(--red-text); }
@media (min-width:768px){
  .trust li{ flex-direction:row; justify-content:center; text-align:left; gap:12px; font-size:.9375rem; }
  .trust li + li{ border-left:1px solid var(--line); }
}

/* jedna orkiestrowana sekwencja wejścia */
.hero-eyebrow,.hero-headline,.hero-sub,.hero-ctas,.trust{ animation:rise 1s var(--ease) both; }
.hero-eyebrow{ animation-delay:.55s; }
.hero-headline{ animation-delay:.7s; }
.hero-sub{ animation-delay:.9s; }
.hero-ctas{ animation-delay:1.05s; }
.trust{ animation-delay:1.25s; }
/* bez opacity:0 – tekst Hero widoczny od pierwszej klatki (LCP) */
@keyframes rise{ from{ transform:translateY(16px); } to{ transform:none; } }

/* ---------- Sekcje: wspólne ---------- */
.section{ position:relative; padding-block:clamp(80px,11vw,150px); }
.section-title{ font-size:clamp(2rem,4.4vw,3.25rem); font-weight:700; }
.section-head{ max-width:760px; margin-bottom:clamp(40px,6vw,64px); }
.section-lead{ margin-top:20px; max-width:60ch; color:var(--muted); font-size:clamp(1rem,1.5vw,1.125rem); }

/* ---------- O NAS ---------- */
.about{ background:var(--black); }
.about-grid{ display:grid; gap:48px; align-items:center; }
@media (min-width:960px){ .about-grid{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:80px; } }
.about-media{
  position:relative; margin:0; overflow:hidden; aspect-ratio:4/3; border-radius:var(--r-l);
  background:
    var(--noise),
    radial-gradient(70% 50% at 70% 18%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(80% 60% at 10% 100%, rgba(155,27,38,.22), transparent 70%),
    linear-gradient(155deg,#1f2126 0%,#121417 55%,#0a0b0d 100%);
  box-shadow:0 0 0 1px var(--line), 0 40px 80px -36px rgba(0,0,0,.95), 0 30px 120px -50px rgba(155,27,38,.45);
}
@media (min-width:960px){ .about-media{ aspect-ratio:4/5; } }
.about-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.about-media::after{ /* refleks światła inspekcyjnego */
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.06) 47%,transparent 56%);
}
.placeholder-note{
  position:absolute; inset:auto 20px 20px 20px; z-index:1;
  color:var(--muted-2); font-size:.8125rem; line-height:1.5;
}
.about-text{ display:grid; gap:18px; margin-top:28px; max-width:62ch; color:var(--muted); }
.about-text p:last-child{ color:var(--text-strong); font-weight:500; }
.pillars{ display:grid; gap:24px; margin-top:44px; max-width:62ch; }
.pillar{ position:relative; padding-left:22px; }
.pillar::before{ content:""; position:absolute; left:0; top:3px; bottom:3px; width:2px; border-radius:2px; background:var(--red-grad); }
.pillar h3{ font-size:1.0625rem; font-weight:700; letter-spacing:-.01em; margin-bottom:6px; }
.pillar p{ color:var(--muted-2); font-size:.9375rem; line-height:1.65; }
@media (min-width:1200px){ .pillar p{ color:#a2a6ad; } }
.stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
  margin-top:44px; padding-top:28px; border-top:1px solid var(--line);
}
.stat-num{
  display:block; font:800 clamp(1.75rem,4vw,2.75rem)/1 var(--font-head); letter-spacing:-.03em; color:#fff;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .stat-num{ background:var(--chrome); -webkit-background-clip:text; background-clip:text; color:transparent; }
}
.stat-label{ display:block; margin-top:10px; color:var(--muted-2); font-size:.8125rem; line-height:1.4; }
.about-cta{ margin-top:36px; }

/* ---------- USŁUGI ---------- */
.services{ background:linear-gradient(180deg,var(--black) 0%,var(--graphite-2) 22%,var(--graphite-2) 78%,var(--black) 100%); }
/* Link tekstowy ze strzałką – używany też w kartach artykułów (Wiedza) */
.card-link{
  display:inline-flex; align-items:center; gap:10px; margin-top:8px; padding:6px 0;
  font:600 .9375rem/1.2 var(--font-head); color:var(--text-strong); text-decoration:none;
  border-bottom:1px solid rgba(196,49,63,.65);
}
.card-link::before{ content:""; position:absolute; inset:0; z-index:1; } /* cała karta klikalna */
.card-link svg{ width:18px; height:18px; transition:transform .35s var(--ease); }

.badge{
  position:absolute; top:20px; left:20px; z-index:2;
  padding:7px 11px 6px; border-radius:4px;
  background:var(--red-grad); color:#fff;
  font:700 .6875rem/1 var(--font-head); letter-spacing:.14em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 20px -8px rgba(196,49,63,.85);
}

/* Baner doradczy */
.advice{
  display:flex; flex-direction:column; align-items:flex-start; gap:22px;
  margin-top:16px; padding:28px; border-radius:var(--r-m); border:1px solid var(--line-2);
  background:linear-gradient(90deg,rgba(155,27,38,.16) 0%,rgba(255,255,255,.015) 65%);
}
.advice-text{ max-width:64ch; color:var(--muted); }
.advice-text strong{ display:block; margin-bottom:4px; color:var(--text-strong); font:700 1.125rem/1.4 var(--font-head); }
@media (min-width:900px){
  .advice{ flex-direction:row; align-items:center; justify-content:space-between; padding:32px 40px; }
}

/* ---------- PROCES ---------- */
.process{ background:var(--graphite-2); border-block:1px solid var(--line); }
.steps{ position:relative; display:grid; margin-top:clamp(40px,6vw,64px); }
.step{ position:relative; padding:0 0 40px 68px; }
.step:last-child{ padding-bottom:0; }
.step::before{ /* pionowa linia na mobile */
  content:""; position:absolute; left:22px; top:46px; bottom:-2px; width:1px;
  background:linear-gradient(180deg,rgba(196,49,63,.6),rgba(255,255,255,.08));
}
.step:last-child::before{ display:none; }
.step-num{
  position:absolute; left:0; top:-6px;
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:var(--graphite-2); border:1px solid rgba(196,49,63,.7);
  font:700 .875rem/1 var(--font-head); color:#fff; letter-spacing:.02em;
}
.step h3{ font-size:1.1875rem; font-weight:700; margin-bottom:10px; }
.step p{ color:var(--muted); font-size:.9375rem; line-height:1.65; max-width:46ch; }
@media (min-width:960px){
  .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px; }
  .steps::before{ /* pozioma linia na desktopie */
    content:""; position:absolute; top:23px; left:23px; right:0; height:1px;
    background:linear-gradient(90deg,rgba(196,49,63,.75),rgba(255,255,255,.08));
  }
  .step{ padding:0; }
  .step::before{ display:none; }
  .step-num{ position:relative; top:0; margin-bottom:30px; }
}

/* ---------- DLA KOGO ---------- */
.audience{ background:var(--black-2); }
.audience-title{ font-size:clamp(2.5rem,7.4vw,5.25rem); font-weight:800; letter-spacing:-.045em; line-height:1; max-width:12ch; }
.audience-cols{ display:grid; gap:32px; margin-top:clamp(40px,6vw,64px); }
@media (min-width:900px){ .audience-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px; } }
.audience-cols p{ padding-top:24px; font-size:clamp(1.0625rem,1.6vw,1.3125rem); line-height:1.6; }
.audience-no{ color:var(--muted-2); border-top:1px solid var(--line-2); }
.audience-yes{ color:var(--text-strong); border-top:2px solid var(--red-hi); }

/* ---------- WIEDZA I PORADY ---------- */
.knowledge{ background:linear-gradient(180deg,var(--black-2) 0%,var(--graphite-2) 100%); border-top:1px solid var(--line); }
.knowledge-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 40px; margin-bottom:clamp(40px,6vw,64px); }
.knowledge-head .section-title{ max-width:24ch; }
.posts{ display:grid; gap:20px; }
@media (min-width:720px){ .posts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .posts{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } }
.post{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-m); border:1px solid var(--line); background:var(--graphite);
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.post:hover,
.post:focus-within{
  transform:translateY(-4px); border-color:rgba(196,49,63,.5);
  box-shadow:0 34px 60px -34px rgba(0,0,0,.95);
}
.post-media{ position:relative; margin:0; aspect-ratio:16/10; overflow:hidden; }
.post-media-fill{
  position:absolute; inset:0;
  background:
    var(--photo, none),
    var(--noise),
    radial-gradient(70% 70% at 85% 0%, rgba(155,27,38,.30), transparent 70%),
    linear-gradient(160deg,#202227 0%,#121417 60%,#0a0b0d 100%);
  background-size:cover, 180px 180px, auto, auto; background-position:center;
  transition:transform 1s var(--ease);
}
.post-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.post:hover .post-media-fill,
.post:hover .post-media img{ transform:scale(1.05); }
.post-body{ display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:12px; padding:26px 26px 28px; }
.post-topic{ color:var(--red-text); font:600 .8125rem/1.3 var(--font-head); }
.post-title{ font-size:1.25rem; font-weight:700; line-height:1.25; letter-spacing:-.015em; }
.post-excerpt{ color:var(--muted); font-size:.9375rem; line-height:1.65; }
.post .card-link{ margin-top:auto; padding-top:12px; }
.post:hover .card-link svg{ transform:translateX(5px); }

/* ---------- OBSZAR DZIAŁANIA + siatka lokalizacji (lokalne SEO) ---------- */
.footer-areas{ display:grid; gap:24px; margin-top:28px; }
@media (min-width:720px){ .footer-areas{ grid-template-columns:1fr 1.5fr; } .footer-areas-col:last-child{ grid-column:1 / -1; } }
@media (min-width:1080px){ .footer-areas{ grid-template-columns:1fr 1.5fr 2fr; gap:40px; } .footer-areas-col:last-child{ grid-column:auto; } }
.footer-areas-title{ margin-bottom:10px; font:600 .8125rem/1.3 var(--font-head); letter-spacing:0; color:#a7abb2; }
.footer-areas ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 16px; }
.footer-areas-col:first-child ul{ grid-template-columns:1fr; }
@media (max-width:719px){ .footer-areas-col:first-child ul{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.footer-areas a{ display:inline-block; padding:3px 0; color:#80848c; font-size:.8125rem; text-decoration:none; transition:color .2s; }
.footer-areas a:hover{ color:#fff; }
.service-area{ margin-top:48px; padding-top:28px; border-top:1px solid var(--line); }
.service-area-title{ margin-bottom:10px; font:600 .875rem/1.3 var(--font-head); letter-spacing:0; color:#c9ccd2; }
.service-area p{ max-width:110ch; color:#80848c; font-size:.8125rem; line-height:1.75; }
.service-area strong{ color:#a7abb2; font-weight:500; }

/* ---------- FINAŁOWE CTA ---------- */
.final{
  text-align:center; border-top:1px solid var(--line);
  background:
    radial-gradient(70% 90% at 50% 105%, rgba(155,27,38,.36), transparent 70%),
    var(--black);
}
.final .section-title{ max-width:20ch; margin-inline:auto; }
.final-text{ max-width:56ch; margin:24px auto 0; color:var(--muted); font-size:clamp(1rem,1.5vw,1.125rem); }
.final-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:38px; }
.final-ctas .btn{ flex:1 1 220px; max-width:260px; }
@media (max-width:539px){ .final-ctas .btn{ max-width:none; } }

/* ---------- STOPKA ---------- */
.footer{ background:#040405; border-top:1px solid var(--line); padding-top:clamp(56px,8vw,88px); color:var(--muted); }
.footer-grid{ display:grid; gap:40px; }
@media (min-width:720px){ .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr 1fr; gap:48px; } }
.footer-logo img{ width:150px; height:auto; }
.footer-brand p{ margin-top:18px; max-width:34ch; font-size:.9375rem; line-height:1.6; }
.footer-h{ margin-bottom:16px; font:700 .9375rem/1.3 var(--font-head); letter-spacing:0; color:var(--text-strong); }
.footer address{ font-style:normal; line-height:1.75; }
.footer-tel{ display:inline-block; margin-top:10px; font:700 1.25rem/1.3 var(--font-head); color:var(--text-strong); text-decoration:none; transition:color .25s; }
.footer-tel:hover{ color:var(--red-text); }
.footer-hours{ display:grid; gap:4px; line-height:1.6; }
.footer-hours strong{ color:var(--text-strong); font-weight:600; }
.footer-links{ display:grid; gap:10px; }
.footer-links a{ text-decoration:none; transition:color .25s; }
.footer-links a:hover{ color:#fff; }
.socials{ display:flex; gap:10px; margin-top:24px; }
.socials a{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line-2); color:#d6d8dc; transition:border-color .3s, color .3s, background-color .3s;
}
.socials a:hover{ border-color:var(--red-hi); color:#fff; background:rgba(196,49,63,.12); }
.socials svg{ width:18px; height:18px; }

.footer-map{ position:relative; margin-top:56px; }
.map-frame{
  overflow:hidden; border-radius:var(--r-m); border:1px solid var(--line);
  background:var(--graphite); height:340px;
}
.map-frame iframe{
  display:block; width:100%; height:100%; border:0;
  filter:grayscale(1) invert(.92) contrast(.9) brightness(.92); /* ciemny wygląd mapy */
}
.map-route{ position:absolute; right:calc(var(--gutter) + 16px); bottom:16px; }
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  margin-top:28px; padding-block:24px; border-top:1px solid var(--line);
  color:#73777f; font-size:.8125rem;
}
@media (max-width:1023px){ .footer{ padding-bottom:76px; } } /* miejsce na dolny pasek CTA */

/* ---------- Dolny pasek CTA (mobile) ---------- */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; gap:10px; padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(6,6,7,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .4s var(--ease);
}
.mobile-bar.is-visible{ transform:none; }
body.menu-open .mobile-bar{ transform:translateY(110%); }
.mobile-bar .btn{ --h:50px; }
.mobile-bar .btn-primary{ flex:1; }
.mobile-bar .btn-ghost{ padding:0 18px; }
@media (min-width:1024px){ .mobile-bar{ display:none; } }

/* ---------- Ograniczony ruch ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .hero-sweep{ display:none; }
  .hero-lights,.hero-eyebrow,.hero-headline,.hero-sub,.hero-ctas,.trust{ animation:none; }
  *,*::before,*::after{ transition-duration:.01ms !important; }
}


/* =========================================================
   PODSTRONY – wspólne elementy
   ========================================================= */
.page-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:calc(var(--nav-h) + clamp(48px,7vw,88px)) 0 clamp(48px,6vw,80px);
  border-bottom:1px solid var(--line);
  background:
    var(--noise),
    radial-gradient(60% 80% at 100% 0%, rgba(155,27,38,.24), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(155,27,38,.10), transparent 70%),
    linear-gradient(180deg,#101114 0%,var(--black) 100%);
  background-size:180px 180px, auto, auto, auto;
}
.breadcrumbs ol{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 22px; padding:0; list-style:none; font:500 .8125rem/1.4 var(--font-head); color:var(--muted-2); }
.breadcrumbs li + li::before{ content:"/"; margin-right:6px; color:#4c4f55; }
.breadcrumbs a{ color:var(--muted); text-decoration:none; transition:color .2s; }
.breadcrumbs a:hover{ color:#fff; }
.breadcrumbs [aria-current]{ color:var(--red-text); }
.page-title{ max-width:24ch; font-size:clamp(2.1rem,5.2vw,3.75rem); font-weight:800; letter-spacing:-.035em; line-height:1.05; }
.page-lead{ max-width:64ch; margin-top:22px; color:var(--muted); font-size:clamp(1.0625rem,1.6vw,1.1875rem); line-height:1.65; }
.page-hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.page-hero-ctas .btn{ flex:0 1 auto; }
@media (max-width:539px){ .page-hero-ctas .btn{ flex:1 1 100%; } }
.badge-inline{
  display:inline-block; margin-bottom:18px; padding:7px 11px 6px; border-radius:4px;
  background:var(--red-grad); color:#fff; font:700 .6875rem/1 var(--font-head); letter-spacing:.14em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 20px -8px rgba(196,49,63,.85);
}

/* treść + boczna karta kontaktowa */
.page-body{ padding-block:clamp(56px,8vw,104px); }
.page-layout{ display:grid; gap:48px; }
@media (min-width:1080px){ .page-layout{ grid-template-columns:minmax(0,1fr) 340px; gap:72px; align-items:start; } }
.prose{ max-width:72ch; color:var(--muted); font-size:1.0625rem; line-height:1.75; }
.prose > * + *{ margin-top:18px; }
.prose h2{ margin-top:56px; font-size:clamp(1.5rem,3vw,2.125rem); font-weight:700; letter-spacing:-.025em; line-height:1.15; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin-top:32px; font-size:1.25rem; font-weight:700; }
.prose strong{ color:var(--text-strong); font-weight:600; }
.prose a{ color:var(--text-strong); text-decoration:underline; text-decoration-color:rgba(196,49,63,.7); text-underline-offset:3px; }
.prose a:hover{ text-decoration-color:var(--red-hi); }
.prose ul{ display:grid; gap:10px; }
.prose ul li{ position:relative; padding-left:22px; }
.prose ul li::before{ content:""; position:absolute; left:0; top:.8em; width:10px; height:2px; background:var(--red-hi); }
.prose ol.steps-list{ counter-reset:st; display:grid; gap:20px; }
.prose ol.steps-list > li{ counter-increment:st; position:relative; padding-left:56px; min-height:40px; }
.prose ol.steps-list > li::before{
  content:counter(st,decimal-leading-zero); position:absolute; left:0; top:-2px;
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(196,49,63,.7); color:#fff; font:700 .8125rem/1 var(--font-head);
}
.prose .note{ padding:18px 20px; border-left:2px solid var(--red-hi); border-radius:0 var(--r-s) var(--r-s) 0; background:rgba(255,255,255,.03); }

.aside-card{
  padding:28px; border-radius:var(--r-m); border:1px solid var(--line-2);
  background:
    var(--noise),
    radial-gradient(70% 60% at 100% 0%, rgba(155,27,38,.22), transparent 70%),
    linear-gradient(160deg,#17191c 0%,#0d0e10 100%);
  background-size:180px 180px, auto, auto;
}
@media (min-width:1080px){ .aside-card{ position:sticky; top:calc(var(--nav-h) + 24px); } }
.aside-card h2{ font-size:1.25rem; font-weight:700; }
.aside-card p{ margin-top:12px; color:var(--muted); font-size:.9375rem; line-height:1.6; }
.aside-card .btn{ width:100%; margin-top:22px; }
.aside-card .aside-tel{ display:block; margin-top:16px; font:700 1.25rem/1.3 var(--font-head); color:#fff; text-decoration:none; }
.aside-card .aside-meta{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted-2); font-size:.875rem; line-height:1.6; }

/* FAQ */
.faq{ margin-top:56px; max-width:72ch; }
.faq h2{ font-size:clamp(1.5rem,3vw,2.125rem); font-weight:700; letter-spacing:-.025em; margin-bottom:20px; }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0;
  cursor:pointer; list-style:none; color:var(--text-strong); font:600 1.0625rem/1.4 var(--font-head);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; flex-shrink:0; width:10px; height:10px; margin-right:4px;
  border-right:2px solid var(--red-text); border-bottom:2px solid var(--red-text);
  transform:rotate(45deg) translateY(-3px); transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg) translateY(-3px); }
.faq details p{ padding:0 0 22px; color:var(--muted); line-height:1.75; }

/* powiązane usługi */
.related{ margin-top:64px; }
.related h2{ font-size:1.375rem; font-weight:700; margin-bottom:18px; }
.related-grid{ display:grid; gap:12px; }
@media (min-width:640px){ .related-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.related-card{
  position:relative; display:flex; flex-direction:column; gap:6px; padding:20px 22px;
  border:1px solid var(--line); border-radius:var(--r-m); background:var(--graphite);
  text-decoration:none; transition:border-color .3s, transform .4s var(--ease);
}
.related-card:hover{ border-color:rgba(196,49,63,.55); transform:translateY(-2px); }
.related-card strong{ color:var(--text-strong); font:700 1.0625rem/1.3 var(--font-head); }
.related-card span{ color:var(--muted-2); font-size:.875rem; line-height:1.5; }
.related-card .tag-new{ position:absolute; top:18px; right:18px; }

/* formularz konsultacji */
.form{ display:grid; gap:18px; max-width:720px; }
.form-row{ display:grid; gap:18px; }
@media (min-width:640px){ .form-row{ grid-template-columns:1fr 1fr; } }
.field{ display:grid; gap:8px; }
.field label{ color:var(--text-strong); font:600 .875rem/1.3 var(--font-head); }
.field .hint{ color:var(--muted-2); font-size:.8125rem; }
.field input,.field select,.field textarea{
  width:100%; min-height:50px; padding:12px 14px; border-radius:var(--r-s);
  border:1px solid var(--line-2); background:#101114; color:var(--text);
  font:400 1rem/1.4 var(--font-body); transition:border-color .2s, box-shadow .2s;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--red-hi); box-shadow:0 0 0 3px rgba(196,49,63,.2); }
.field input[type=file]{ padding:12px; }
.consent{ display:flex; gap:12px; align-items:flex-start; color:var(--muted); font-size:.875rem; line-height:1.55; }
.consent input{ width:18px; height:18px; margin-top:2px; accent-color:var(--red-hi); flex-shrink:0; }
.form .btn{ justify-self:start; }
.form-status{ padding:16px 18px; border-radius:var(--r-s); border:1px solid rgba(196,49,63,.5); background:rgba(196,49,63,.1); color:var(--text-strong); }

/* realizacje – siatka miejsc na zdjęcia */
.gallery{ display:grid; gap:16px; }
@media (min-width:720px){ .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .gallery{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.gallery-item{ overflow:hidden; border-radius:var(--r-m); border:1px solid var(--line); background:var(--graphite); }
.gallery-media{
  aspect-ratio:4/3;
  background:
    var(--noise),
    radial-gradient(70% 70% at 85% 0%, rgba(155,27,38,.28), transparent 70%),
    linear-gradient(160deg,#202227 0%,#121417 60%,#0a0b0d 100%);
  background-size:180px 180px, auto, auto;
}
.gallery-body{ padding:20px 22px 24px; }
.gallery-body h3{ font-size:1.0625rem; font-weight:700; }
.gallery-body p{ margin-top:8px; color:var(--muted-2); font-size:.875rem; line-height:1.55; }

/* artykuł */
.article-meta{ margin-top:18px; color:var(--muted-2); font:500 .875rem/1.4 var(--font-head); }
.knowledge--page{ border-top:0; }

/* przy nieparzystej liczbie kart ostatnia zajmuje cały wiersz – bez „dziury” w siatce */
@media (min-width:640px){ .related-grid > :last-child:nth-child(odd){ grid-column:1 / -1; } }


/* =========================================================
   POLOT + WYDAJNOŚĆ
   ========================================================= */
:root{ --ease-soft:cubic-bezier(.25,1,.5,1); }

/* ---------- Scroll reveal ----------
   Animujemy tylko opacity i właściwość `translate` (warstwa kompozytora = 60 FPS).
   `translate` nie koliduje z `transform` używanym w efektach hover kart.
   Ukrycie działa tylko z JS (klasa .js w <html>), więc bez JS treść jest zawsze widoczna. */
.js .reveal{
  opacity:0; translate:0 30px;
  transition:opacity .8s var(--ease-soft) var(--reveal-delay,0s), translate .8s var(--ease-soft) var(--reveal-delay,0s);
}
.js .reveal.active{ opacity:1; translate:0 0; }

/* elementy, które mają też własne przejścia hover – łączymy listy przejść */
.js .gr-card.reveal,
.js .post.reveal,
.js .gallery-item.reveal{
  transition:
    opacity .8s var(--ease-soft) var(--reveal-delay,0s),
    translate .8s var(--ease-soft) var(--reveal-delay,0s),
    transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}

/* ---------- Kaskada (staggering) ---------- */
.stagger > .reveal:nth-child(1){ --reveal-delay:.1s; }
.stagger > .reveal:nth-child(2){ --reveal-delay:.2s; }
.stagger > .reveal:nth-child(3){ --reveal-delay:.3s; }
.stagger > .reveal:nth-child(4){ --reveal-delay:.4s; }
.stagger > .reveal:nth-child(5){ --reveal-delay:.5s; }
.stagger > .reveal:nth-child(6){ --reveal-delay:.6s; }
@media (max-width:719px){ /* na telefonie karty są jedna pod drugą – krótsza kaskada */
  .stagger > .reveal:nth-child(n){ --reveal-delay:.08s; }
}

@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; translate:none; transition:none; }
}

/* ---------- Poświata LED (hover) ---------- */
.btn-primary{ will-change:transform, box-shadow; }
.btn-primary:hover,
.btn-primary:focus-visible{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 0 0 1px rgba(255,120,130,.35),
    0 12px 32px -10px rgba(196,49,63,.85),
    0 0 46px -6px rgba(196,49,63,.55);
}

/* ---------- Pasek przewijania ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#060607; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#2a2c31,#1c1e22);
  border-radius:10px; border:2px solid #060607;
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#7a1a22,#4e0f16); }
::-webkit-scrollbar-corner{ background:#060607; }
/* Firefox (i przeglądarki bez ::-webkit-scrollbar) */
@supports not selector(::-webkit-scrollbar){
  html{ scrollbar-width:thin; scrollbar-color:#2a2c31 #060607; }
}

/* ---------- FAQ na stronie głównej + płynne rozwijanie <details> ---------- */
.home-faq{ background:var(--black); border-top:1px solid var(--line); }
.faq--home{ max-width:860px; margin:0 auto; }
.faq--home .section-title{ margin-bottom:28px; }
:root{ interpolate-size:allow-keywords; } /* pozwala animować wysokość do „auto” (Chrome/Edge) */
.faq details::details-content{
  block-size:0; overflow:hidden;
  transition:block-size .45s var(--ease-soft), content-visibility .45s allow-discrete;
}
.faq details[open]::details-content{ block-size:auto; }
.faq summary{ transition:color .2s; }
.faq summary:hover{ color:#fff; }
.faq details[open] summary{ color:#fff; }

/* ---------- Opinie z Google (karty generowane przez JS) ---------- */
.reviews{ background:linear-gradient(180deg,var(--black-2) 0%,var(--black) 100%); border-top:1px solid var(--line); }
.reviews-head{ text-align:center; margin-inline:auto; }
.reviews-head .section-lead{ margin-inline:auto; }
.gr-summary{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px; margin-top:24px; }
.gr-summary[hidden]{ display:none; }
.gr-avg{ font:800 2.25rem/1 var(--font-head); color:#fff; letter-spacing:-.03em; }
.gr-count{ color:var(--muted); font-size:.9375rem; }
.gr-stars{ position:relative; display:inline-block; line-height:0; }
.gr-stars svg{ width:18px; height:18px; margin-right:2px; }
.gr-summary .gr-stars svg{ width:22px; height:22px; }
.gr-stars-base svg{ fill:#33363c; }
.gr-stars-fill{ position:absolute; inset:0 auto 0 0; overflow:hidden; white-space:nowrap; }
.gr-stars-fill svg{ fill:#e5b24a; }
.gr-grid{ display:grid; gap:16px; min-height:260px; }
@media (min-width:960px){ .gr-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.gr-card{
  display:flex; flex-direction:column; gap:16px; margin:0; padding:28px;
  background:#15171a; border:1px solid var(--line); border-radius:var(--r-m);
  transition:opacity .8s var(--ease-soft) var(--reveal-delay,0s), translate .8s var(--ease-soft) var(--reveal-delay,0s),
             transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.gr-card:not(.gr-skeleton):hover{
  transform:translateY(-4px); border-color:rgba(196,49,63,.5);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.95), 0 20px 70px -30px rgba(196,49,63,.45);
}
.gr-text{
  margin:0; color:var(--text); font-size:.9688rem; line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
}
.gr-head{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }
.gr-avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; background:#25282e; flex-shrink:0; }
.gr-avatar--initial{ display:grid; place-items:center; color:#fff; font:700 1rem var(--font-head); }
.gr-who{ display:grid; gap:2px; }
.gr-name{ color:#fff; font:700 .9375rem/1.3 var(--font-head); text-decoration:none; }
a.gr-name:hover{ text-decoration:underline; text-decoration-color:var(--red-hi); }
.gr-time{ color:var(--muted-2); font-size:.8125rem; }
.gr-skeleton{ min-height:260px; background:linear-gradient(100deg,#15171a 30%,#1c1f23 50%,#15171a 70%); background-size:300% 100%; animation:gr-shimmer 1.6s linear infinite; }
@keyframes gr-shimmer{ to{ background-position:-150% 0; } }
@media (prefers-reduced-motion:reduce){ .gr-skeleton{ animation:none; } }
.gr-grid.is-fallback{ display:block; min-height:0; }
.gr-fallback{ padding:40px 24px; text-align:center; border:1px dashed var(--line-2); border-radius:var(--r-m); color:var(--muted); }
.gr-fallback p{ margin-bottom:16px; font-size:1.0625rem; }
.gr-source{ margin-top:18px; text-align:center; color:var(--muted-2); font-size:.8125rem; }
.gr-cta-wrap{ display:flex; justify-content:center; margin-top:24px; }

/* ---------- WhatsApp ---------- */
.btn-wa svg{ width:18px; height:18px; color:#7fd8a0; }
.btn-wa:hover{ border-color:rgba(127,216,160,.6); }
.mobile-bar .btn-wa,
.mobile-bar .btn-ghost{ padding:0 15px; }
.final-ctas .btn{ max-width:290px; }

/* ---------- Zdjęcie w sekcji O nas ---------- */
.about-media{ aspect-ratio:4/5; } /* pionowe zdjęcie: twarz + polerka w kadrze także na telefonie */
.about-media img{ object-position:60% 40%; }
.about-media::after{ background:linear-gradient(180deg,transparent 60%,rgba(6,6,7,.35) 100%); } /* delikatne domknięcie dołu zdjęcia */

/* =========================================================
   HERO: emblemat marki + nagłówek ze szczotkowanego aluminium
   ========================================================= */
.hero-brand-emblem{
  position:relative; display:flex; justify-content:center; margin-bottom:24px;
  animation:rise 1s var(--ease) .35s both;
}
/* bordowa poświata za logo – zwykły gradient (tańszy niż filtr blur) */
.hero-brand-emblem::before{
  content:""; position:absolute; z-index:-1; left:50%; top:50%;
  width:150%; height:170%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(155,27,38,.34), rgba(155,27,38,.10) 55%, transparent 100%);
  pointer-events:none;
}
.hero-brand-emblem img{
  width:clamp(150px, 15vw, 190px); height:auto;
  filter:drop-shadow(0 15px 35px rgba(0,0,0,.8)); /* jeden statyczny cień – bez animacji filtra */
}
@media (max-width:767px){ .hero-brand-emblem{ margin-bottom:18px; } .hero-brand-emblem img{ width:136px; } }

/* Szczotkowane aluminium: [1] refleks światła, [2] drobne poziome rysy szczotkowania, [3] gradient stali jak maska w logo */
.hero-headline{
  background-image:
    linear-gradient(100deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #ffffff 0%, #e6e9ef 24%, #b0b5be 46%, #8a919e 55%, #5a606b 61%, #8a919e 70%, #d3d7de 86%, #f4f5f7 100%);
  background-size:250% 100%, 100% 100%, 100% 100%;
  background-position:160% 0, 0 0, 0 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.6));
  animation:rise 1s var(--ease) .7s both, metal-sweep 1.9s cubic-bezier(.45,0,.2,1) 1.7s both;
}
@keyframes metal-sweep{
  from{ background-position:160% 0, 0 0, 0 0; }
  to{ background-position:-60% 0, 0 0, 0 0; }
}

/* Na stronie głównej małe logo w menu pojawia się dopiero po przewinięciu – na starcie gra emblemat w Hero */
.nav-logo{ transition:opacity .4s var(--ease); }
.js .page-home .nav:not(.is-scrolled):not(.is-menu-open) .nav-logo:not(:focus-visible){ opacity:0; pointer-events:none; }

@media (prefers-reduced-motion:reduce){
  .hero-brand-emblem{ animation:none; }
  .hero-headline{ animation:none; }
}

/* Światła LED zostają nad emblematem – nie przecinają logo */
.page-home .hero-lights span:nth-child(n+3){ display:none; }
@media (max-width:639px){ .page-home .hero-lights span:nth-child(n+3){ display:none; } }
@media (max-width:767px){ /* na telefonie bez rys szczotkowania – przy dużym zagęszczeniu pikseli wyglądałyby jak linie */
  .hero-headline{
    background-image:
      linear-gradient(100deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%),
      linear-gradient(180deg, #ffffff 0%, #e6e9ef 24%, #b0b5be 46%, #8a919e 55%, #5a606b 61%, #8a919e 70%, #d3d7de 86%, #f4f5f7 100%);
    background-size:250% 100%, 100% 100%;
    background-position:160% 0, 0 0;
    animation:rise 1s var(--ease) .7s both, metal-sweep-m 1.9s cubic-bezier(.45,0,.2,1) 1.7s both;
  }
}
@keyframes metal-sweep-m{ from{ background-position:160% 0, 0 0; } to{ background-position:-60% 0, 0 0; } }
@media (prefers-reduced-motion:reduce){ .hero-headline{ animation:none !important; } }

/* H1 strony głównej: dwa wiersze („Auto Detailing & PDR” / „Warszawa-Wawer”) zamiast trzech,
   żeby przyciski zostały na pierwszym ekranie. Rozmiar liczony od szerokości okna. */
.hero-headline{ max-width:none; font-size:clamp(1.5rem,min(7.4vw,7.8vh),5.5rem); line-height:1.02; text-wrap:wrap; }
.nowrap{ white-space:nowrap; }
.hero-headline .nowrap{ display:block; } /* „Warszawa-Wawer” zawsze w drugim wierszu */
/* na niskich ekranach laptopów emblemat i odstępy zmniejszają się razem z wysokością okna */
@media (min-width:768px){
  .page-home .hero-inner{ padding-top:clamp(0px, 2vh, 32px); }
  .page-home .hero-brand-emblem img{ width:clamp(180px, 30vh, 300px); }
  .page-home .hero-brand-emblem{ margin-bottom:clamp(10px, 2vh, 24px); }
  .page-home .hero-title{ gap:clamp(12px, 2vh, 22px); }
  .page-home .hero-sub{ max-width:68ch; margin-top:clamp(16px, 3vh, 28px); }
  .page-home .hero-ctas{ margin-top:clamp(22px, 4vh, 38px); }
}
@media (max-width:767px){
  .page-home .hero-inner{ padding-top:clamp(0px, 2vh, 32px); }
  .page-home .hero-brand-emblem img{ width:clamp(130px, 24vh, 200px); }
  .page-home .hero-brand-emblem{ margin-bottom:8px; }
  .page-home .hero-title{ gap:14px; }
  .page-home .hero-sub{ margin-top:14px; line-height:1.55; }
  .page-home .hero-ctas{ margin-top:20px; }
}

/* ---------- Artykuł: zdjęcie w treści ---------- */
.prose .article-figure{ margin:8px 0 36px; }
.prose .article-figure img{ display:block; width:100%; height:auto; border-radius:var(--r-m); border:1px solid var(--line); }
.prose .article-figure figcaption{ margin-top:10px; color:var(--muted-2); font-size:.8125rem; line-height:1.5; }

/* ---------- Wiedza: najnowszy artykuł jako szeroka karta (na komputerze 1 + 3 zamiast 3 + 1) ---------- */
@media (min-width:1080px){
  .knowledge--page .post:first-child{ grid-column:1 / -1; flex-direction:row; }
  .knowledge--page .post:first-child .post-media{ flex:0 0 56%; aspect-ratio:auto; min-height:360px; }
  .knowledge--page .post:first-child .post-body{ justify-content:center; padding:40px 44px; }
  .knowledge--page .post:first-child .post-title{ font-size:1.625rem; }
  .knowledge--page .post:first-child .card-link{ margin-top:8px; }
}

/* plakietka NOWOŚĆ nie nachodzi na dłuższy tytuł karty powiązanej usługi */
.related-card .tag-new ~ strong{ padding-right:92px; }

/* ---------- Menu „Usługi”: trzy filary w jednym panelu (dziedziczy wygląd panelu „Lokalizacje”) ---------- */
.sub--services{ left:-6px; margin-left:0; width:min(800px, calc(100vw - 48px)); }
.sub--services .sub-group-title{ color:#c9ccd2; }
.sub--services .sub-all{
  grid-column:1 / -1; justify-content:center; margin-top:10px; padding:13px 14px 12px;
  border-top:1px solid var(--line); border-radius:0 0 8px 8px;
  color:var(--muted); font:600 .875rem/1.2 var(--font-head);
}
.sub--services .sub-all::before{ display:none; }
.sub--services .sub-all:hover{ color:#fff; }
/* menu mobilne: dłuższe nazwy usług w jednej kolumnie */
.mm-acc-body .mm-sub--services{ grid-template-columns:1fr; }
@media (max-width:1199px){ .sub--services{ left:-80px; width:760px; } }
/* strzałka obraca się tylko przy grupie, która jest faktycznie rozwinięta (dotyczy też „Lokalizacji”) */
.mm-acc:not([open]) > summary .chev{ transform:none; }
.mm-acc[open] > summary .chev{ transform:rotate(180deg); }
/* karty, do których prowadzi menu: +30px wyrównuje przesunięcie animacji .reveal, żeby karta nie chowała się pod paskiem */
#detailing-wnetrza, #regeneracja-detale{ scroll-margin-top:30px; }
/* Wiedza: siatka 6-kolumnowa – zwykła karta zajmuje 2 kolumny (3 w rzędzie).
   Gdy w ostatnim rzędzie zostają 2 karty, każda zajmuje połowę szerokości, żeby nie było „dziury”. */
@media (min-width:1080px){
  .knowledge--page .posts{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .knowledge--page .post{ grid-column:span 2; }
  .knowledge--page .post:first-child{ grid-column:1 / -1; }
  .knowledge--page .posts:has(> .post:last-child:nth-child(3n)) > .post:nth-last-child(-n+2){ grid-column:span 3; }
}

/* =========================================================
   USŁUGI – układ „Editorial / Z-Pattern”
   Bez kart i ramek: czerń tła, duże kadry wtopione w tło, minimalna typografia.
   ========================================================= */
.services{ background:var(--black); }
.editorial{
  display:flex; flex-direction:column; gap:clamp(72px, 9vw, 136px);
  margin-top:clamp(48px, 7vw, 88px);
}
.editorial-row{
  position:relative; display:flex; align-items:center; gap:clamp(32px, 5vw, 88px);
}
.editorial-row:nth-child(even){ flex-direction:row-reverse; } /* Z-pattern: zdjęcia naprzemiennie lewo / prawo */

/* kadr: zdjęcie od krawędzi do krawędzi, zaokrąglenie, cienki obrys, głęboki cień i winieta u dołu */
.editorial-media{
  position:relative; flex:0 0 50%; margin:0; aspect-ratio:16 / 10; overflow:hidden;
  border-radius:18px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95);
}
.editorial-media img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:scale .8s ease;
}
/* obrys (inset) + winieta – nad zdjęciem, żeby nie zasłoniło ich <img> */
.editorial-media::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  background:linear-gradient(180deg, transparent 55%, rgba(6,6,7,.75) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.editorial-row:hover .editorial-media img,
.editorial-row:focus-within .editorial-media img{ scale:1.03; }
/* miejsce na zdjęcie, dopóki go nie ma: ciemny grafit z delikatną czerwoną poświatą */
.editorial-media--placeholder{
  background:
    radial-gradient(60% 70% at 70% 30%, rgba(155,27,38,.22), transparent 70%),
    var(--noise),
    linear-gradient(160deg, #17191d 0%, #0d0e12 60%, #060607 100%);
  background-size:auto, 180px 180px, auto;
}

/* typografia */
.editorial-content{ isolation:isolate; flex:1; padding-block:28px; } /* bez position: link pokrywa cały wiersz */
.editorial-num{
  display:block; margin:0 0 6px -.04em;
  font:800 6.5rem/.9 var(--font-head); letter-spacing:-.06em;
  color:#fff; opacity:.07; pointer-events:none; user-select:none;
}
.editorial-label{
  display:flex; align-items:center; gap:12px; margin:0 0 18px;
  font:500 .75rem/1 ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  letter-spacing:.16em; text-transform:uppercase; color:#7a7a83;
}
.editorial-label .badge-inline{ margin:0; }
.editorial-title{
  margin:0 0 16px; color:#fff;
  font:700 clamp(1.875rem, 3.4vw, 3rem)/1.05 var(--font-head); letter-spacing:-.035em;
}
.editorial-text{ max-width:40ch; margin:0; color:#a1a1aa; font-size:1.0625rem; line-height:1.65; }
.editorial-link{
  display:inline-flex; align-items:center; gap:10px; margin-top:28px; padding:6px 0;
  color:#e4e4e7; font:600 .9375rem/1.2 var(--font-head); text-decoration:none;
  transition:color .4s ease;
}
.editorial-link::before{ content:""; position:absolute; inset:0; z-index:1; } /* cały wiersz klikalny */
.editorial-link svg{ width:18px; height:18px; color:var(--red-text); transition:transform .4s ease; }
.editorial-row:hover .editorial-link,
.editorial-row:focus-within .editorial-link{ color:#fff; }
.editorial-row:hover .editorial-link svg,
.editorial-row:focus-within .editorial-link svg{ transform:translateX(4px); }
.editorial-link:focus-visible{ outline:2px solid var(--red-hi); outline-offset:6px; border-radius:2px; }

/* mobile: zdjęcie nad tekstem, duży oddech między usługami */
@media (max-width:768px){
  .editorial{ gap:72px; }
  .editorial-row,
  .editorial-row:nth-child(even){ flex-direction:column; align-items:stretch; gap:8px; }
  .editorial-media{ flex:none; width:100%; }
  .editorial-content{ padding-block:8px 0; }
  .editorial-num{ font-size:5rem; }
  .editorial-link{ margin-top:22px; }
}
@media (prefers-reduced-motion:reduce){
  .editorial-row:hover .editorial-media img,
  .editorial-row:focus-within .editorial-media img{ scale:none; }
}

/* =========================================================
   LIFTING STRONY GŁÓWNEJ: filary, bento, eyebrows, timeline, dyptyk, concierge
   ========================================================= */

/* ---------- Mikro-nagłówki nad H2 (jak .hero-eyebrow, z linią z lewej) ---------- */
.section-eyebrow{
  display:flex; align-items:center; gap:14px; margin:0 0 18px;
  font:600 .75rem/1.3 var(--font-head); letter-spacing:.18em; text-transform:uppercase; color:var(--red-text);
}
.section-eyebrow::before{ content:""; flex:none; width:28px; height:1px; background:linear-gradient(90deg,transparent,var(--red-hi)); }
.reviews-head .section-eyebrow{ justify-content:center; }
.reviews-head .section-eyebrow::after{ content:""; flex:none; width:28px; height:1px; background:linear-gradient(90deg,var(--red-hi),transparent); }

/* ---------- Nagłówki H2: czysta, ostra biel (chrom zostaje tylko na H1 w Hero i liczbach .stat-num) ---------- */
.section-title,
.audience-title{ color:var(--text-strong); }

/* ---------- USŁUGI: dwa filary (editorial) ---------- */
.editorial--pillars{ margin-top:clamp(40px,6vw,72px); }
/* refleks światła przesuwający się po kadrze przy najechaniu */
.editorial-media::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.10) 50%,transparent 65%);
  translate:-110% 0; transition:translate 1.4s cubic-bezier(.25,1,.5,1);
}
.editorial-row:hover .editorial-media::after,
.editorial-row:focus-within .editorial-media::after{ translate:110% 0; }
/* metaliczno-bordowy znacznik NOWOŚĆ */
.badge-metal{
  display:inline-block; padding:6px 10px 5px; border-radius:4px;
  font:700 .625rem/1 var(--font-head); letter-spacing:.16em; color:#fff;
  background:linear-gradient(135deg,#4d0d14 0%,#8e1a25 38%,#d25560 50%,#8e1a25 62%,#3f0a10 100%);
  background-size:220% 100%; background-position:100% 0;
  border:1px solid rgba(255,170,178,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px -10px rgba(196,49,63,.9);
  transition:background-position 1.2s ease;
}
.editorial-row:hover .badge-metal{ background-position:0 0; }

/* ---------- USŁUGI: bento 2×2 z fotografią w tle ---------- */
.bento{ display:grid; gap:16px; margin-top:clamp(72px,9vw,128px); }
@media (min-width:720px){ .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){
  .bento{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; }
  .bento-card:nth-child(1){ grid-column:span 7; }
  .bento-card:nth-child(2){ grid-column:span 5; }
  .bento-card:nth-child(3){ grid-column:span 5; }
  .bento-card:nth-child(4){ grid-column:span 7; }
}
.bento-card{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:flex-end; min-height:360px;
  background:#060607; border:1px solid rgba(255,255,255,.08); border-radius:var(--r-m);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.js .bento-card.reveal{
  transition:
    opacity .8s var(--ease-soft) var(--reveal-delay,0s),
    translate .8s var(--ease-soft) var(--reveal-delay,0s),
    transform .5s ease, border-color .5s ease, box-shadow .5s ease;
}
@media (min-width:1080px){ .bento-card{ min-height:420px; } }
.bento-img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
  transition:scale 1s ease;
}
/* wielowarstwowe przyciemnienie zdjęcia */
.bento-card::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,6,7,.2) 0%, rgba(6,6,7,.88) 70%, #060607 100%);
}
/* moduł bez zdjęcia: ciemny gradient studyjny z teksturą */
.bento-card--studio{
  background:
    radial-gradient(45% 55% at 92% 6%, rgba(255,214,218,.10), transparent 70%),
    radial-gradient(70% 75% at 85% 10%, rgba(155,27,38,.42), transparent 68%),
    radial-gradient(60% 60% at 0% 100%, rgba(90,14,22,.35), transparent 70%),
    var(--noise), var(--noise),
    linear-gradient(155deg,#1b1d22 0%,#121317 45%,#0a0a0d 100%);
  background-size:auto, auto, auto, 180px 180px, 120px 120px, auto;
  background-position:0 0, 0 0, 0 0, 0 0, 37px 61px, 0 0;
}
.bento-card--studio::before{ background:linear-gradient(180deg, transparent 30%, rgba(6,6,7,.75) 100%); }
.bento-card:hover,
.bento-card:focus-within{
  transform:translateY(-4px); border-color:rgba(220,38,38,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 30px 60px -36px rgba(0,0,0,.95);
}
.bento-card:hover .bento-img,
.bento-card:focus-within .bento-img{ scale:1.04; }
.bento-body{ display:flex; flex-direction:column; align-items:flex-start; padding:28px; }
@media (min-width:1080px){ .bento-body{ padding:36px 36px 32px; } }
.bento-index{
  margin:0 0 14px; font:500 .75rem/1 ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  letter-spacing:.16em; text-transform:uppercase; color:#8b8b94;
}
.bento-num{ color:#d4d4d8; }
.bento-title{ margin:0 0 10px; color:#fff; font:700 clamp(1.5rem,2.2vw,1.875rem)/1.15 var(--font-head); letter-spacing:-.025em; }
.bento-text{ max-width:44ch; margin:0; color:#b4b4bc; font-size:.9688rem; line-height:1.6; }
.bento-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:4px 0;
  color:#e4e4e7; font:600 .875rem/1.2 var(--font-head); text-decoration:none; transition:color .4s ease;
}
.bento-link::before{ content:""; position:absolute; inset:0; z-index:1; } /* cały moduł klikalny */
.bento-link svg{ width:16px; height:16px; color:var(--red-text); transition:transform .4s ease; }
.bento-card:hover .bento-link, .bento-card:focus-within .bento-link{ color:#fff; }
.bento-card:hover .bento-link svg, .bento-card:focus-within .bento-link svg{ transform:translateX(4px); }
.bento-link:focus-visible{ outline:2px solid var(--red-hi); outline-offset:4px; border-radius:2px; }
@media (max-width:719px){ .bento-card{ min-height:320px; } .bento-body{ padding:24px; } }

/* ---------- Baner „Concierge” ---------- */
.advice--concierge{
  position:relative; overflow:hidden; gap:24px; margin-top:clamp(56px,7vw,88px);
  padding:32px 28px; border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(155,27,38,.20), transparent 60%),
    linear-gradient(180deg,#0e0f13 0%,#08090b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
/* poświata LED na górnej krawędzi */
.advice--concierge::before{
  content:""; position:absolute; top:0; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,120,130,.9),transparent);
  box-shadow:0 0 18px 2px rgba(196,49,63,.55), 0 0 60px 6px rgba(196,49,63,.25);
}
.advice-icon{
  flex:none; display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  color:var(--red-text); border:1px solid rgba(196,49,63,.45);
  background:radial-gradient(circle at 50% 35%, rgba(196,49,63,.28), rgba(196,49,63,.04) 70%);
  box-shadow:0 0 30px -6px rgba(196,49,63,.6);
}
.advice-icon svg{ width:26px; height:26px; }
.advice--concierge .advice-text{ flex:1; }
.advice-actions{ display:flex; flex-wrap:wrap; gap:12px; }
@media (min-width:900px){
  .advice--concierge{ padding:36px 40px; gap:32px; }
  .advice-actions{ flex-wrap:nowrap; }
}
@media (max-width:539px){ .advice-actions, .advice-actions .btn{ width:100%; } }

/* ---------- PROCES: timeline inżynieryjny ---------- */
.steps{ gap:0; }
.steps::before{ display:none; }
.step{ padding:28px 0 32px; border-top:1px solid var(--line); }
.step::before{ display:none; }
.step::after{ /* bordowy akcent na górnej krawędzi, zapalany przy najechaniu */
  content:""; position:absolute; top:-1px; left:0; width:100%; height:1px;
  background:linear-gradient(90deg,var(--red-hi),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .6s ease;
}
.step:hover::after{ transform:scaleX(1); }
.step-num{
  position:relative; top:auto; left:auto; display:block; width:auto; height:auto; margin:0 0 18px;
  border:0; border-radius:0; background:none;
  font:800 4.5rem/1 var(--font-head); letter-spacing:-.05em;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .step-num{
    background-image:linear-gradient(180deg,rgba(255,255,255,.12) 0%,transparent 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  }
  .step-num::after{ /* bordowa wersja numeru – płynnie wyłania się przy najechaniu */
    content:attr(data-n); position:absolute; inset:0;
    background-image:linear-gradient(180deg,rgba(220,38,38,.55) 0%,rgba(220,38,38,0) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    opacity:0; transition:opacity .5s ease;
  }
  .step:hover .step-num::after{ opacity:1; }
}
.step h3{ margin-bottom:10px; }
@media (min-width:720px) and (max-width:959px){
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; }
}
@media (min-width:960px){
  .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid var(--line); }
  .step{ padding:36px 28px 8px; border-top:0; border-left:1px solid var(--line); }
  .step:first-child{ border-left:0; padding-left:0; }
  .step::after{ top:-1px; }
  .step-num{ margin-bottom:26px; }
}

/* ---------- DLA KOGO: dyptyk ---------- */
.audience-cols{ gap:16px; }
@media (min-width:900px){ .audience-cols{ gap:20px; } }
.audience-no,
.audience-yes{ position:relative; overflow:hidden; padding:36px 32px 40px; border-radius:var(--r-m); }
@media (min-width:900px){ .audience-no, .audience-yes{ padding:48px 44px 52px; } }
.audience-cols .audience-no p,
.audience-cols .audience-yes p{ padding-top:0; }
.audience-h{ margin:0 0 16px; font:700 clamp(1.25rem,2vw,1.625rem)/1.25 var(--font-head); letter-spacing:-.02em; }
.audience-no{ background:#090a0c; border:1px solid rgba(255,255,255,.05); color:#7c8089; }
.audience-no .audience-h{ color:var(--muted-2); }
.audience-yes{
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(155,27,38,.30), transparent 65%),
    #060607;
  border:1px solid rgba(255,255,255,.08); border-top:2px solid var(--red-hi);
  color:var(--text-strong);
}
.audience-yes .audience-h{ color:#fff; }
.audience-list{ display:grid; gap:12px; margin:26px 0 0; padding:0; list-style:none; }
.audience-list li{ display:flex; align-items:center; gap:12px; font:600 1rem/1.4 var(--font-head); color:#e9eaed; }
.audience-list svg{
  flex:none; width:22px; height:22px; padding:4px; border-radius:50%;
  color:#fff; background:var(--red-grad); box-shadow:0 0 16px -4px rgba(196,49,63,.8);
}

@media (prefers-reduced-motion:reduce){
  .bento-card:hover, .bento-card:focus-within{ transform:none; }
  .bento-card:hover .bento-img{ scale:none; }
  .editorial-row:hover .editorial-media::after{ translate:-110% 0; }
}

/* =========================================================
   DROPDOWN „USŁUGI”: gęste czarne szkło – treść pod spodem (zdjęcia sekcji Editorial) nie przebija
   ========================================================= */
.sub,
.sub--areas,
.sub--services{
  z-index:200;
  background:
    var(--noise),
    radial-gradient(120% 70% at 50% 118%, rgba(155,27,38,.2) 0%, rgba(14,15,18,.98) 50%),
    rgba(10,11,13,.985);
  background-size:180px 180px, auto, auto;
  -webkit-backdrop-filter:blur(24px) saturate(160%);
          backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--line);
  border-top:2px solid var(--red-hi);
  box-shadow:0 34px 70px -24px rgba(0,0,0,.95), 0 -10px 30px -18px rgba(196,49,63,.45);
}
.sub-group{ padding-bottom:14px; }

/* Usługi: więcej „światła” między kadrem a tekstem na desktopie */
@media (min-width:1080px){ .editorial-row{ gap:96px; } }
/* panel „Usługi” wyśrodkowany pod przyciskiem (po usunięciu „Lokalizacji” przycisk przesunął się w prawo) */
.sub--services{ left:50%; width:800px; margin-left:-400px; }
@media (max-width:1199px){ .sub--services{ left:50%; width:760px; margin-left:-380px; } }
/* Wiedza: gdy w ostatnim rzędzie zostaje 1 karta (np. 20 artykułów), wyświetla się szeroko – jak karta otwierająca */
@media (min-width:1080px){
  .knowledge--page .posts:has(> .post:last-child:nth-child(3n+2)) > .post:last-child{ grid-column:1 / -1; flex-direction:row-reverse; }
  .knowledge--page .posts:has(> .post:last-child:nth-child(3n+2)) > .post:last-child .post-media{ flex:0 0 56%; aspect-ratio:auto; min-height:360px; }
  .knowledge--page .posts:has(> .post:last-child:nth-child(3n+2)) > .post:last-child .post-body{ justify-content:center; padding:40px 44px; }
  .knowledge--page .posts:has(> .post:last-child:nth-child(3n+2)) > .post:last-child .post-title{ font-size:1.625rem; }
}

/* =========================================================
   STRONY LOKALNE: blok .local-district-context
   ========================================================= */
.local-district-context{
  margin:48px 0 8px; padding:32px 28px;
  border:1px solid rgba(255,255,255,.07); border-radius:var(--r-m);
  background:linear-gradient(180deg,#0e0f13 0%,#0a0b0e 100%);
}
@media (min-width:720px){ .local-district-context{ padding:40px 40px 36px; } }
.local-district-context h2{ margin:0 0 18px; font-size:clamp(1.375rem,2.4vw,1.75rem); letter-spacing:-.02em; color:#fff; }
.local-district-context > p{ margin:0 0 16px; color:var(--muted); font-size:1rem; line-height:1.75; max-width:68ch; }
.ldc-contact{
  margin-top:26px; padding:22px 22px 22px 24px; border-left:2px solid var(--red-hi);
  background:rgba(155,27,38,.08); border-radius:0 var(--r-s) var(--r-s) 0;
}
.ldc-contact p{ margin:0 0 16px; color:#e4e5e8; font-size:.9688rem; line-height:1.65; }
.ldc-actions, .article-cta-actions{ display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:539px){ .ldc-actions .btn, .article-cta-actions .btn{ width:100%; } }

/* =========================================================
   ARTYKUŁY: końcowy box .article-cta-box
   ========================================================= */
.article-cta-box{
  position:relative; overflow:hidden; margin:56px 0 8px; padding:34px 28px;
  border:1px solid rgba(255,255,255,.08); border-radius:var(--r-m);
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(155,27,38,.18), transparent 60%),
    linear-gradient(180deg,#0e0f13 0%,#08090b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.article-cta-box::before{
  content:""; position:absolute; top:0; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,120,130,.85),transparent);
  box-shadow:0 0 16px 2px rgba(196,49,63,.45);
}
@media (min-width:720px){ .article-cta-box{ padding:40px 44px; } }
.article-cta-box h2{ margin:0 0 12px; font-size:clamp(1.375rem,2.4vw,1.75rem); letter-spacing:-.02em; color:#fff; }
.article-cta-box p{ margin:0 0 24px; max-width:56ch; color:var(--muted); line-height:1.65; }
/* długie przyciski (WhatsApp) nie mogą rozpychać kolumny treści na telefonie */
.page-content{ min-width:0; }
@media (max-width:539px){ .ldc-actions .btn, .article-cta-actions .btn{ white-space:normal; text-align:center; } }
@media (max-width:539px){
  .local-district-context{ padding:26px 18px; }
  .ldc-contact{ padding:18px 16px; }
  .article-cta-box{ padding:30px 20px; }
}

/* ---------- Social media: menu mobilne, panel boczny, Realizacje ---------- */
.mm-socials{ display:flex; gap:10px; margin-top:18px; }
.mm-socials a{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--line-2); border-radius:var(--r-s); color:#e4e5e8; font:600 .875rem/1 var(--font-head); text-decoration:none; }
.mm-socials svg{ width:18px; height:18px; color:var(--red-text); }
.aside-social{ margin-top:14px; color:var(--muted-2); font-size:.875rem; }
.aside-social a{ color:#e4e5e8; }
.social-banner{ display:flex; flex-direction:column; gap:18px; margin-bottom:32px; padding:24px 26px; border:1px solid var(--line); border-left:2px solid var(--red-hi); border-radius:var(--r-m); background:#0e0f13; }
.social-banner p{ margin:0; color:var(--muted); max-width:70ch; }
.social-banner p strong{ color:#fff; }
.social-banner-actions{ display:flex; flex-wrap:wrap; gap:12px; }
@media (min-width:900px){ .social-banner{ flex-direction:row; align-items:center; justify-content:space-between; } }
/* Realizacje: prawdziwe zdjęcia */
.gallery-media--photo{ position:relative; margin:0; aspect-ratio:4/3; overflow:hidden; background:#0d0e12; }
.gallery-media--photo img{ display:block; width:100%; height:100%; object-fit:cover; transition:scale .8s ease; }
.gallery-item:hover .gallery-media--photo img{ scale:1.03; }
.gallery + .social-banner{ margin:40px 0 0; }

/* ---------- Podgląd zdjęć (lightbox) ---------- */
.gallery-zoom{ display:block; width:100%; height:100%; cursor:zoom-in; }
.gallery-zoom:focus-visible{ outline:2px solid var(--red-hi); outline-offset:-2px; }
.lb-open, .lb-open body{ overflow:hidden; }
.lightbox{
  position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center;
  padding:56px 64px; background:rgba(4,4,5,.94);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.lightbox[hidden]{ display:none; }
.lb-figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; max-width:100%; max-height:100%; }
.lb-img{ display:block; max-width:100%; max-height:calc(100vh - 150px); max-height:calc(100dvh - 150px); width:auto; height:auto; border-radius:8px; box-shadow:0 30px 80px -30px #000; }
.lb-cap{ color:#e4e5e8; font:600 .9375rem/1.4 var(--font-head); text-align:center; }
.lb-count{ position:absolute; top:18px; left:22px; color:var(--muted); font:500 .8125rem/1 var(--font-head); }
.lightbox button{
  position:absolute; display:grid; place-items:center; width:48px; height:48px; padding:0;
  border:1px solid var(--line-2); border-radius:50%; background:rgba(14,15,18,.85); color:#fff;
  font:400 2rem/1 var(--font-head); cursor:pointer; transition:border-color .2s, background-color .2s;
}
.lightbox button:hover{ border-color:var(--red-hi); background:rgba(155,27,38,.35); }
.lb-close{ top:14px; right:16px; font-size:1.75rem; }
.lb-prev{ left:12px; top:50%; translate:0 -50%; }
.lb-next{ right:12px; top:50%; translate:0 -50%; }
@media (max-width:719px){
  .lightbox{ padding:60px 8px 72px; }
  .lb-prev, .lb-next{ top:auto; bottom:14px; translate:none; }
  .lb-prev{ left:calc(50% - 60px); } .lb-next{ right:calc(50% - 60px); }
}


/* =========================================================
   AUDYT 11.2026: dostępność, tabele, odpowiedzi, autor, wydajność
   ========================================================= */
.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; }
/* na telefonie bez rozmycia pod paskami – mniej pracy przy przewijaniu */
@media (max-width:1023px){
  .nav, .js .nav.is-scrolled, .mobile-bar{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  .js .nav.is-scrolled, .nav.is-menu-open, .mobile-bar{ background:rgba(6,6,7,.97); }
}
/* zwięzła odpowiedź pod pytaniem */
.prose .answer{ margin:0 0 18px; padding:14px 18px; border-left:2px solid var(--red-hi); background:rgba(255,255,255,.035); border-radius:0 10px 10px 0; color:var(--text-strong); }
/* tabele porównawcze */
.table-wrap{ margin:26px 0 30px; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02); }
.prose table{ width:100%; min-width:520px; border-collapse:collapse; font-size:.9375rem; line-height:1.5; }
.prose caption{ caption-side:top; text-align:left; padding:14px 18px 6px; font:600 .875rem/1.4 var(--font-head); color:var(--text-strong); }
.prose th, .prose td{ padding:12px 18px; text-align:left; vertical-align:top; border-top:1px solid var(--line); }
.prose thead th{ border-top:0; font:600 .8125rem/1.3 var(--font-head); letter-spacing:.02em; color:#c9ccd2; background:rgba(255,255,255,.03); }
.prose tbody th{ font-weight:600; color:var(--text-strong); width:28%; }
.prose td{ color:var(--text); }
.prose .table-note{ margin-top:-14px; font-size:.8125rem; color:#8a8e96; }
/* ramka autora */
.author-box{ display:flex; gap:16px; align-items:flex-start; margin:36px 0 0; padding:20px 22px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); }
.author-avatar{ flex:0 0 52px; height:52px; border-radius:50%; display:grid; place-items:center; font:800 1.125rem/1 var(--font-head); color:#fff; background:linear-gradient(145deg,#2a2b30,#121316); border:1px solid rgba(255,255,255,.12); }
.author-box p{ margin:0; font-size:.9375rem; }
.author-box .author-name{ font:700 1rem/1.3 var(--font-head); color:var(--text-strong); margin-bottom:4px; }
.author-box a{ color:var(--text-strong); }
/* cennik „od” */
.price-from{ display:inline-flex; align-items:baseline; gap:8px; margin:18px 0 0; padding:8px 14px; border:1px solid rgba(255,255,255,.12); border-radius:999px; font-size:.9375rem; color:#c9ccd2; }
.price-from strong{ font:700 1.0625rem/1 var(--font-head); color:#fff; }
.price-list{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.price-list li{ display:flex; justify-content:space-between; gap:16px; padding:12px 18px; border-top:1px solid var(--line); }
.price-list li:first-child{ border-top:0; }
.price-list strong{ color:#fff; white-space:nowrap; }
/* strona Dojazd */
.area-grid{ display:grid; gap:18px; margin-top:22px; }
@media (min-width:720px){ .area-grid{ grid-template-columns:1fr 1fr; } }
.area-card{ padding:20px 22px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); }
.area-card h3{ margin:0 0 8px; font:700 1.0625rem/1.3 var(--font-head); color:var(--text-strong); }
.area-card p{ margin:0 0 10px; font-size:.9375rem; }
.area-card .area-links{ display:flex; flex-wrap:wrap; gap:8px 16px; font-size:.875rem; }
.footer-areas-more{ margin-top:14px; font-size:.875rem; }
.footer-areas-more a{ color:#c9ccd2; }
/* formularz – wiadomość po wysłaniu */
.form-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
/* cele dotykowe w stopce i okruszkach */
@media (max-width:719px){ .footer-links a, .breadcrumbs a{ display:inline-block; padding:4px 0; } }
.price-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.price-pills .price-from{ margin:0; }
/* Przeczytaj też */
.read-more{ margin:40px 0 0; padding:24px 26px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.02); }
.read-more h2{ margin:0 0 12px; font-size:1.125rem; }
.read-more ul{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.read-more a{ color:var(--text-strong); text-decoration:underline; text-decoration-color:rgba(255,255,255,.25); text-underline-offset:3px; }
.read-more a:hover{ text-decoration-color:var(--red-hi); }

@media (max-width:719px){ .prose table{ min-width:440px; font-size:.875rem; } .prose th, .prose td{ padding:10px 12px; } }
.area-sections h2{ margin:44px 0 0; } .area-sections h2:first-child{ margin-top:28px; }
.prices{ margin-top:56px; }
.form-alt{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin:0 0 28px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); font-size:.9375rem; }
.footer-bottom a{ color:inherit; }

/* ===== CENNIK (cennik.html) ===== */
@property --pc-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

/* --- Hero --- */
.page-hero--center .container{ text-align:center; }
.page-hero--center .breadcrumbs ol{ justify-content:center; }
.page-hero--center .page-title{ margin-left:auto; margin-right:auto; }
.page-hero--center .page-lead{ max-width:48rem; margin-left:auto; margin-right:auto; }
.page-hero--lux{ position:relative; overflow:hidden; isolation:isolate; padding-bottom:clamp(56px,7vw,88px); }
.page-hero--lux::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 55% at 50% 18%, rgba(155,27,38,.30), transparent 70%),
    radial-gradient(40% 30% at 50% 0%, rgba(255,255,255,.07), transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(75% 80% at 50% 30%, #000 30%, transparent 85%);
          mask-image:radial-gradient(75% 80% at 50% 30%, #000 30%, transparent 85%);
}
.page-hero--lux::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(196,49,63,.7) 30%, rgba(255,255,255,.55) 50%, rgba(196,49,63,.7) 70%, transparent);
  box-shadow:0 0 18px 1px rgba(196,49,63,.45);
}
.page-hero--lux .page-title{
  background:linear-gradient(180deg,#ffffff 0%,#f1f1f3 42%,#a9aeb6 78%,#e8e9ec 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));
}

/* logo */
.lux-emblem{ position:relative; width:clamp(190px,22vw,280px); margin:6px auto 0; }
.lux-emblem-img{ position:relative; z-index:1; display:block; width:100%; height:auto;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(196,49,63,.25)); }
.lux-emblem-glow{ position:absolute; inset:-30% -25%; z-index:0; border-radius:50%;
  background:radial-gradient(closest-side, rgba(196,49,63,.42), rgba(155,27,38,.14) 55%, transparent 75%);
  filter:blur(8px); animation:lux-pulse 6s ease-in-out infinite; }
.lux-emblem-sheen{ position:absolute; inset:0; z-index:2; pointer-events:none;
  -webkit-mask:url(img/logo-mikey-garage-emblem-560.webp) center/contain no-repeat;
          mask:url(img/logo-mikey-garage-emblem-560.webp) center/contain no-repeat;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.08) 54%, transparent 62%) -160% 0/220% 100% no-repeat;
  animation:lux-sheen 7s cubic-bezier(.4,0,.2,1) 1.2s infinite; mix-blend-mode:screen; }
@keyframes lux-pulse{ 0%,100%{ opacity:.75; scale:1; } 50%{ opacity:1; scale:1.06; } }
@keyframes lux-sheen{ 0%{ background-position:-160% 0; } 28%,100%{ background-position:160% 0; } }

/* ornament: linia – romb – linia */
.lux-ornament{ display:flex; align-items:center; justify-content:center; gap:14px; margin:26px auto 22px; }
.lux-ornament span{ width:clamp(48px,9vw,110px); height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45)); }
.lux-ornament span:last-child{ background:linear-gradient(90deg,rgba(255,255,255,.45),transparent); }
.lux-ornament i{ width:7px; height:7px; rotate:45deg; background:var(--red-hi); box-shadow:0 0 12px 2px rgba(196,49,63,.65); }

/* --- Lista cen --- */
.pricing-page{ position:relative; padding:clamp(48px,7vw,80px) 0 clamp(64px,9vw,110px);
  background:radial-gradient(50% 40% at 0% 30%, rgba(155,27,38,.08), transparent 70%), radial-gradient(45% 40% at 100% 70%, rgba(255,255,255,.035), transparent 70%); }
.pricing-page > .container{ max-width:calc(64rem + 2 * var(--gutter)); }
.pc-list{ list-style:none; margin:0; padding:0; display:grid; gap:22px; }
@media (min-width:768px){ .pc-list{ gap:28px; } }
.pc{
  --mx:50%; --my:0%;
  position:relative; isolation:isolate; padding:26px 28px 26px;
  background:linear-gradient(150deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.012) 38%, rgba(0,0,0,0) 60%), linear-gradient(180deg,#141518,#0d0e10);
  border-radius:16px; scroll-margin-top:calc(var(--nav-h) + 24px);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 24px 48px -28px rgba(0,0,0,.95);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.js .pc.reveal{ transition:opacity .8s var(--ease-soft), translate .8s var(--ease-soft), transform .5s var(--ease), box-shadow .5s var(--ease); }
/* ramka „szczotkowany metal”: jaśniejsza u góry z lewej */
.pc::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg, rgba(255,255,255,.28), rgba(255,255,255,.06) 30%, rgba(255,255,255,.04) 70%, rgba(196,49,63,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition:opacity .4s;
}
/* duża cyfra w tle (przycięta do kafelka) */
.pc-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; border-radius:inherit; pointer-events:none; }
.pc-ghost{ position:absolute; right:-6px; bottom:-42px; font:800 9rem/1 var(--font-head); letter-spacing:-.06em; color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.045); transition:-webkit-text-stroke-color .5s; }
.pc:hover .pc-ghost{ -webkit-text-stroke-color:rgba(196,49,63,.18); }
.pc:hover{ transform:translateY(-4px); box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 34px 60px -30px rgba(0,0,0,1), 0 0 0 1px rgba(196,49,63,.35), 0 18px 50px -24px rgba(196,49,63,.45); }
@media (hover:hover) and (pointer:fine){
  .pc{ background:radial-gradient(420px circle at var(--mx) var(--my), rgba(196,49,63,.0), transparent 60%), linear-gradient(150deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.012) 38%, rgba(0,0,0,0) 60%), linear-gradient(180deg,#141518,#0d0e10); }
  .pc:hover{ background:radial-gradient(420px circle at var(--mx) var(--my), rgba(196,49,63,.16), transparent 60%), linear-gradient(150deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 38%, rgba(0,0,0,0) 60%), linear-gradient(180deg,#16171a,#0e0f11); }
}
.pc-head{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
@media (min-width:768px){ .pc-head{ flex-direction:row; justify-content:space-between; align-items:center; gap:24px; } }
.pc-title{ display:flex; align-items:center; gap:14px; }
.pc-no{ flex:0 0 auto; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(196,49,63,.45); background:radial-gradient(circle at 30% 25%, rgba(196,49,63,.28), rgba(196,49,63,.04) 70%);
  color:#f3c7cb; font:700 .6875rem/1 var(--font-head); letter-spacing:.06em; box-shadow:0 0 16px -4px rgba(196,49,63,.6); }
.pc-name{ margin:0; font:700 clamp(1.125rem,1.7vw,1.3125rem)/1.35 var(--font-head); letter-spacing:-.015em; }
.pc-name a{ color:#fff; text-decoration:none; background:linear-gradient(90deg,var(--red-hi),rgba(196,49,63,0)) 0 100%/0 1px no-repeat; padding-bottom:2px; transition:background-size .5s var(--ease); }
.pc-name a:hover,.pc-name a:focus-visible{ background-size:100% 1px; }
.pc-price{ margin:0; white-space:nowrap; display:flex; align-items:baseline; gap:6px; padding-left:48px; }
@media (min-width:768px){ .pc-price{ padding-left:0; } }
.pc-od{ font:600 .75rem/1 var(--font-head); letter-spacing:.16em; text-transform:uppercase; color:var(--red-text); }
.pc-cur{ font:600 1rem/1 var(--font-head); color:#c9ccd2; }
.nw{ white-space:nowrap; }
.pc-amt{ font:800 clamp(1.625rem,2.6vw,2rem)/1 var(--font-head); letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#ffffff 0%,#eceef1 45%,#9ea3ab 80%,#dfe1e5 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pc-rule{ display:block; height:1px; margin:16px 0 14px 48px; background:linear-gradient(90deg, rgba(196,49,63,.55), rgba(255,255,255,.10) 35%, transparent); }
.pc-note{ position:relative; margin:0; padding-left:48px; max-width:62rem; color:#a9adb5; font-size:.9375rem; line-height:1.7; }

/* wyróżniona pozycja: obracająca się ramka */
.pc--featured{ margin-top:10px;
  background:radial-gradient(80% 120% at 100% 0%, rgba(196,49,63,.18), transparent 60%), linear-gradient(180deg,#1a1416,#100c0e);
  box-shadow:0 30px 70px -30px rgba(196,49,63,.55), 0 1px 0 rgba(255,255,255,.08) inset; }
.pc--featured::before{ padding:1.5px;
  background:conic-gradient(from var(--pc-angle), #c4313f, #ffb3ba 12%, #c4313f 24%, #5a0c14 50%, #c4313f 76%, #ffffff 88%, #c4313f);
  animation:pc-spin 8s linear infinite; }
.pc--featured .pc-ghost{ -webkit-text-stroke-color:rgba(255,180,186,.12); }
@keyframes pc-spin{ to{ --pc-angle:360deg; } }
.pc--featured .pc-note{ color:#d6d8dc; }
.pc-badge{ position:absolute; top:-13px; right:24px; z-index:2; overflow:hidden; padding:6px 14px; border-radius:999px;
  background:linear-gradient(180deg,#d93a48,#9b1b26); color:#fff; font:700 .6875rem/1.2 var(--font-head); letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 6px 20px -4px rgba(196,49,63,.7), 0 1px 0 rgba(255,255,255,.35) inset; }
.pc-badge::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) -150% 0/200% 100% no-repeat; animation:lux-sheen 5s ease-in-out 2s infinite; }

/* --- Konsultacja na dole --- */
.pc-contact{ position:relative; isolation:isolate; overflow:hidden; margin-top:clamp(56px,8vw,88px); padding:clamp(36px,5vw,56px) clamp(22px,4vw,48px);
  text-align:center; border-radius:22px;
  background:radial-gradient(70% 90% at 50% 120%, rgba(196,49,63,.30), transparent 65%), linear-gradient(180deg,#131417,#0b0c0e);
  box-shadow:0 40px 90px -40px rgba(0,0,0,1); }
.pc-contact::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 45%, rgba(196,49,63,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.pc-contact .lux-ornament{ margin:0 auto 20px; }
.pc-contact-title{ margin:0 0 14px; font:800 clamp(1.5rem,2.6vw,2rem)/1.2 var(--font-head); letter-spacing:-.025em;
  background:linear-gradient(180deg,#fff,#b9bdc4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pc-contact p{ max-width:36rem; margin:0 auto 28px; color:#b3b6bd; font-size:.9375rem; line-height:1.7; }
.btn-sheen{ position:relative; overflow:hidden; }
.btn-sheen::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%) -150% 0/200% 100% no-repeat; transition:background-position .9s var(--ease); }
.btn-sheen:hover::after{ background-position:150% 0; }

@media (max-width:539px){
  .pc{ padding:22px 18px; }
  .pc-ghost{ font-size:6.5rem; bottom:-20px; }
  .pc-price,.pc-note{ padding-left:0; }
  .pc-rule{ margin-left:0; }
  .pc-contact .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .lux-emblem-glow,.lux-emblem-sheen,.pc--featured::before,.pc-badge::after{ animation:none; }
  .pc:hover{ transform:none; }
}

/* --- Odnośniki do cennika na innych stronach --- */
.price-link{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; padding:10px 18px; border-radius:999px;
  border:1px solid rgba(196,49,63,.45); background:linear-gradient(180deg,rgba(196,49,63,.16),rgba(196,49,63,.04));
  color:#fff; font:600 .9375rem/1 var(--font-head); text-decoration:none; transition:border-color .3s, background .3s, gap .3s; }
.price-link svg{ width:16px; height:16px; color:var(--red-text); transition:translate .3s var(--ease); }
.price-link:hover{ border-color:var(--red-hi); background:linear-gradient(180deg,rgba(196,49,63,.28),rgba(196,49,63,.08)); }
.price-link:hover svg{ translate:3px 0; }
.price-list--links li{ padding:0; }
.price-list--links a{ display:flex; justify-content:space-between; align-items:center; gap:16px; width:100%; padding:13px 18px; color:#e9eaed; text-decoration:none; transition:background .25s, color .25s; }
.price-list--links a:hover{ background:rgba(196,49,63,.08); color:#fff; }
.pl-go{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; color:var(--red-text); font:600 .8125rem/1 var(--font-head); letter-spacing:.02em; }
.pl-go svg{ width:15px; height:15px; transition:translate .3s var(--ease); }
.price-list--links a:hover .pl-go svg{ translate:3px 0; }
.prices-all{ margin-top:20px; }
.prices h2{ margin:0 0 12px; }
/* gradientowy tekst: zapas na ogonki i dolne części liter (ę, ą, j, y, p), żeby nie były ucinane */
.page-hero--lux .page-title{ padding:.08em .04em .26em; margin-bottom:-.2em; }
.pc-contact-title{ padding-bottom:.22em; margin-bottom:calc(14px - .22em); }
.pc-amt{ padding:.06em 0 .14em; }
@media (max-width:767px){
  .pc-title{ flex-wrap:wrap; row-gap:10px; }
  .pc-name{ flex:1 1 calc(100% - 48px); min-width:0; }
  .pc-tag{ margin-left:48px; }
}
.pc-tag{ display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); color:#d9dbe0;
  font:600 .6875rem/1 var(--font-head); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }

/* --- Pakiet Sprzedażowy (szeroka karta pakietu) --- */
.pc--package{ margin-top:18px; padding:clamp(28px,3.4vw,40px) clamp(22px,3.4vw,40px);
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(255,255,255,.07), transparent 55%),
    radial-gradient(60% 80% at 100% 100%, rgba(196,49,63,.16), transparent 60%),
    linear-gradient(180deg,#17181b,#0c0d0f);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 40px 90px -40px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,.04); }
.pc--package::before{ padding:1.5px;
  background:conic-gradient(from var(--pc-angle), rgba(255,255,255,.75), rgba(255,255,255,.12) 18%, #c4313f 32%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.6) 68%, #7a121c 84%, rgba(255,255,255,.75));
  animation:pc-spin 14s linear infinite; }
.pc--package .pc-ghost{ font-size:12rem; bottom:-52px; -webkit-text-stroke-color:rgba(255,255,255,.05); }
.pc--package .pc-name{ font-size:clamp(1.25rem,2.1vw,1.625rem); letter-spacing:-.02em; }
.pc--package .pc-amt{ font-size:clamp(1.875rem,3vw,2.375rem); }
.pk-lead{ color:#d3d5da; font-size:1rem; }
.pk-grid{ display:grid; gap:28px; margin-top:26px; padding-left:48px; }
@media (min-width:900px){ .pk-grid{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:40px; } }
.pk-label{ margin:0 0 14px; font:600 .75rem/1.2 var(--font-head); letter-spacing:.18em; text-transform:uppercase; color:var(--red-text); }
.pk-scope{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.pk-scope li{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; align-items:start; color:#c3c6cc; font-size:.9375rem; line-height:1.6; }
.pk-scope svg{ width:22px; height:22px; padding:4px; margin-top:1px; border-radius:50%; color:#fff;
  background:radial-gradient(circle at 30% 25%, rgba(196,49,63,.55), rgba(155,27,38,.25)); box-shadow:0 0 0 1px rgba(196,49,63,.5), 0 0 14px -3px rgba(196,49,63,.7); }
.pk-col--tiers{ align-self:start; padding:22px 22px 20px; border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.09);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset; }
.pk-tiers{ list-style:none; margin:0; padding:0; }
.pk-tiers li{ display:flex; flex-direction:column; gap:5px; padding:13px 0; border-top:1px solid rgba(255,255,255,.08); }
.pk-tiers li:first-child{ border-top:0; padding-top:2px; }
.pk-tier-name{ color:#a9adb5; font-size:.875rem; }
.pk-tier-price{ font:700 1.25rem/1.2 var(--font-head); letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff,#b9bdc4); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.1em; }
.pk-foot{ margin:16px 0 0; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); color:#8e929a; font-size:.8125rem; line-height:1.6; }
.pk-foot em{ font-style:italic; }
@media (max-width:539px){ .pk-grid{ padding-left:0; } .pc--package .pc-ghost{ font-size:8rem; bottom:-30px; } .pk-col--tiers{ padding:18px 16px; } }
@media (prefers-reduced-motion:reduce){ .pc--package::before{ animation:none; } }

/* --- Strona główna: szeroki moduł Pakietu Sprzedażowego --- */
.bento-card--wide{ grid-column:1 / -1; }
.bento-card--wide .bento-img{ object-position:70% 55%; }
@media (max-width:719px){
  .bento-card--wide{ min-height:460px; }
  .bento-card--wide .bento-img{ height:62%; object-position:65% 50%; }
  .bento-card--wide::before{ background:linear-gradient(180deg, rgba(6,6,7,0) 0%, rgba(6,6,7,.35) 30%, rgba(6,6,7,.92) 52%, #060607 62%); }
}
@media (min-width:720px){
  .bento-card--wide{ align-items:center; min-height:380px; }
  .bento-card--wide::before{ background:linear-gradient(90deg, #060607 0%, rgba(6,6,7,.92) 34%, rgba(6,6,7,.35) 66%, rgba(6,6,7,.1) 100%); }
  .bento-card--wide .bento-body{ max-width:560px; }
}
.bento-card--wide::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.35), rgba(255,255,255,.05) 35%, rgba(196,49,63,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* ===== Mapa Google na kliknięcie (bez ładowania Google przy wejściu na stronę) ===== */
.map-load{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  width:100%; height:100%; padding:24px; border:0; cursor:pointer; text-align:center;
  color:#e4e5e8; font:inherit;
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(196,49,63,.14), transparent 70%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/28px 28px,
    var(--graphite);
  transition:background-color .3s;
}
.map-load svg{ width:34px; height:34px; color:var(--red-text); transition:transform .3s var(--ease); }
.map-load-title{ font:700 1.0625rem/1.2 var(--font-head); color:#fff; }
.map-load-note{ max-width:36ch; color:var(--muted); font-size:.875rem; line-height:1.5; }
.map-load:hover svg, .map-load:focus-visible svg{ transform:translateY(-3px); }
.map-load:focus-visible{ outline:2px solid var(--red-hi); outline-offset:-4px; }
@media (max-width:639px){ .map-load{ padding-bottom:64px; } }

/* ===== Animacje w pętli zatrzymane, gdy element jest poza ekranem ===== */
.is-off, .is-off::before, .is-off::after, .is-off *, .is-off *::before, .is-off *::after{ animation-play-state:paused !important; }

/* Galeria: liczba dodatkowych zdjęć auta (otwierają się strzałkami w podglądzie) */
.gallery-more{ position:absolute; right:12px; bottom:12px; z-index:2; padding:6px 11px; border-radius:999px; pointer-events:none;
  background:rgba(6,6,7,.78); border:1px solid rgba(255,255,255,.18); color:#fff; font:600 .75rem/1 var(--font-head); letter-spacing:.04em;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
/* Pakiet Sprzedażowy na stronie głównej: zdjęcie w prawej części karty, tekst na ciemnym tle po lewej */
@media (min-width:720px){
  .bento-card--wide{ min-height:440px; }
  .bento-card--wide .bento-img{ left:auto; right:0; width:62%; object-position:40% 62%; }
  .bento-card--wide::before{ background:linear-gradient(90deg, #060607 0%, #060607 30%, rgba(6,6,7,.55) 46%, rgba(6,6,7,.08) 70%, rgba(6,6,7,0) 100%); }
}
@media (min-width:720px){
  .bento-card--wide .bento-img{ -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 28%); mask-image:linear-gradient(90deg, transparent 0%, #000 28%); }
}