/* ============================================================
   Bestclean24 — Sprzątanie po zgonie Łódź
   Unikalny system wizualny: deep navy + bursztyn, serif H1/H2
   ============================================================ */

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,ul,ol,address{margin:0}
ul,ol{padding:0;list-style:none}
img,picture,svg{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
address{font-style:normal}

/* ---------- TOKENS ---------- */
:root{
  --navy-900:#0a1422;
  --navy-800:#0e1a2b;
  --navy-700:#142336;
  --navy-600:#1c2f48;
  --ink:#1a2535;
  --paper:#f6f1ea;
  --paper-2:#ece4d8;
  --line:#d8cdb9;
  --amber:#c98c3c;
  --amber-2:#e0a96d;
  --amber-soft:#f3dfbf;
  --danger:#a83232;
  --white:#ffffff;

  --radius:14px;
  --radius-sm:8px;
  --shadow-1:0 1px 2px rgba(15,25,45,.06), 0 8px 24px rgba(15,25,45,.08);
  --shadow-2:0 4px 12px rgba(15,25,45,.10), 0 18px 40px rgba(15,25,45,.14);

  --font-serif:"Cormorant Garamond","Georgia",serif;
  --font-sans:"Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;

  --container:1180px;
}

/* ---------- GLOBAL ---------- */
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,28px);
}

h1,h2,h3{
  font-family:var(--font-serif);
  font-weight:600;
  color:var(--navy-800);
  letter-spacing:-.01em;
  line-height:1.18;
}
h1{font-size:clamp(2rem, 4.6vw, 3.4rem)}
h2{font-size:clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom:.65em}
h3{font-size:1.15rem;line-height:1.35;margin:.4em 0}

p{margin:0 0 1em}
strong{color:var(--navy-800)}

.eyebrow{
  display:inline-block;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--amber);
  font-weight:600;
  margin-bottom:.75em;
}
.eyebrow--center{display:block;text-align:center}
.eyebrow--light{color:var(--amber-2)}

.section{padding:clamp(56px,7vw,96px) 0}
.section--alt{background:var(--paper-2)}
.section--dark{background:var(--navy-800);color:#e9e1d3}
.section--dark h2,.section--dark h3{color:#fff}
.section__lead{font-size:1.06rem;max-width:75ch;margin:0 0 2em}

.skip-link{
  position:absolute;left:-9999px;
}
.skip-link:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:10000;border-radius:6px}

/* ---------- TOP RIBBON ---------- */
.ribbon{
  background:var(--navy-900);
  color:var(--amber-soft);
  font-size:.85rem;
  padding:8px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.ribbon__pulse{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--amber-2);
  box-shadow:0 0 0 0 rgba(224,169,109,.6);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(224,169,109,.6)}
  70%{box-shadow:0 0 0 10px rgba(224,169,109,0)}
  100%{box-shadow:0 0 0 0 rgba(224,169,109,0)}
}
.ribbon__phone{color:#fff;font-weight:700;letter-spacing:.02em}
.ribbon__phone:hover{color:var(--amber-2)}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(246,241,234,.92);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  display:flex;align-items:center;gap:24px;
  padding-block:14px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand__mark{
  display:grid;place-items:center;
  width:36px;height:36px;border-radius:9px;
  background:var(--navy-800);color:var(--amber-2);
  font-family:var(--font-serif);font-weight:700;font-size:22px;
}
.brand__name{font-family:var(--font-serif);font-size:1.25rem;font-weight:700;color:var(--navy-800)}
.brand__name span{color:var(--amber)}
.brand__city{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;
  background:var(--amber-soft);color:var(--navy-800);
  padding:3px 8px;border-radius:4px;
}
.nav{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
.nav a{
  font-size:.94rem;font-weight:500;color:var(--navy-700);
  border-bottom:1px solid transparent;padding-block:4px;
  transition:border-color .15s,color .15s;
}
.nav a:hover{color:var(--amber);border-color:var(--amber)}

.btn-phone--header{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--navy-800);color:#fff;
  padding:10px 16px;border-radius:999px;font-weight:600;font-size:.95rem;
}
.btn-phone--header:hover{background:var(--amber);color:var(--navy-900)}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;border-radius:999px;
  font-weight:600;font-size:1rem;
  border:1.5px solid transparent;
  transition:transform .12s ease, box-shadow .15s, background .15s, color .15s;
  text-align:center;line-height:1.1;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--amber);color:var(--navy-900);box-shadow:var(--shadow-1)}
.btn--primary:hover{background:var(--amber-2);box-shadow:var(--shadow-2)}
.btn--ghost{background:transparent;color:var(--navy-800);border-color:var(--navy-800)}
.btn--ghost:hover{background:var(--navy-800);color:var(--paper)}
.btn--xl{padding:18px 28px;font-size:1.1rem}
.btn--block{display:flex;width:100%}

.section--dark .btn--ghost{color:#fff;border-color:#fff}
.section--dark .btn--ghost:hover{background:#fff;color:var(--navy-900)}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  isolation:isolate;
  color:#f4ead7;
  min-height:min(86vh, 720px);
  display:flex;align-items:flex-end;
  padding:90px 0 70px;
  overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__overlay{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,20,34,.35) 0%, rgba(10,20,34,.72) 55%, rgba(10,20,34,.92) 100%),
    radial-gradient(80% 60% at 70% 30%, rgba(201,140,60,.18), transparent 70%);
}
.hero__content{position:relative}
.hero h1{color:#fff;max-width:18ch}
.hero .lead{font-size:1.12rem;max-width:62ch;margin:18px 0 26px;color:#eadfc8}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__chips{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;
}
.hero__chips li{
  font-size:.85rem;letter-spacing:.02em;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  padding:6px 12px;border-radius:999px;
  color:#f4ead7;
}

/* ---------- TRUST RIBBON ---------- */
.trust{background:var(--navy-800);color:#e9e1d3;padding:28px 0}
.trust__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  text-align:center;
}
.trust__item strong{
  display:block;font-family:var(--font-serif);font-size:1.7rem;
  color:var(--amber-2);margin-bottom:4px;
}
.trust__item span{font-size:.9rem;color:#bdb09a}

/* ---------- USLUGI ---------- */
.services{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px;
}
.service{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;position:relative;
  transition:transform .18s ease, box-shadow .18s;
}
.service:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.service__num{
  position:absolute;top:18px;right:22px;
  font-family:var(--font-serif);font-size:1.6rem;color:var(--amber);
  letter-spacing:.05em;font-weight:700;
}
.service h3{margin-top:.2em;padding-right:50px}
.service p{font-size:.97rem;color:#3b475a;margin:0}

/* ---------- SITUATION ---------- */
.section--situation{background:linear-gradient(180deg,var(--paper) 0%, #efe5d3 100%)}
.situation{display:grid;grid-template-columns:1.55fr .9fr;gap:48px;align-items:start}
.situation__list{margin-top:18px;display:grid;gap:10px}
.situation__list li{
  display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;
  font-size:1rem;
}
.situation__list span{color:var(--amber);font-weight:700}
.situation__card{
  background:var(--navy-800);color:#f4ead7;border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow-2);
  position:sticky;top:88px;
}
.situation__card h3{color:#fff;font-size:1.35rem}
.situation__card p{font-size:.95rem;color:#dcd1b6;margin-bottom:18px}

/* ---------- PROCES ---------- */
.process{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  counter-reset:step;margin-top:8px;
}
.process__step{
  background:#fff;border-radius:var(--radius);
  border:1px solid var(--line);
  padding:24px;position:relative;
  border-top:3px solid var(--amber);
}
.process__num{
  display:inline-block;font-family:var(--font-serif);font-size:1.4rem;
  color:var(--amber);font-weight:700;letter-spacing:.05em;margin-bottom:6px;
}
.process__step h3{margin-bottom:6px}
.process__step p{font-size:.96rem;color:#3b475a;margin:0}

/* ---------- DEZ ---------- */
.dez{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.dez__layers{display:grid;gap:14px;margin-top:18px}
.dez__layer{
  display:grid;grid-template-columns:48px 1fr;gap:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-sm);
  padding:16px 18px;
}
.dez__badge{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--amber);color:var(--navy-900);
  font-family:var(--font-serif);font-weight:700;font-size:1.25rem;
}
.dez__layer h3{margin:0 0 4px 0;color:#fff}
.dez__layer p{margin:0;font-size:.95rem;color:#cbc1ad}
.dez__photo img{border-radius:var(--radius);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.dez__photo figcaption{
  margin-top:10px;color:#a89980;font-size:.85rem;text-align:center;
}

/* ---------- GALLERY ---------- */
.gallery{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.gallery__item{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-1);
  border:1px solid var(--line);
  transition:transform .18s, box-shadow .18s;
}
.gallery__item:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.gallery__item img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery__item figcaption{padding:14px 16px}
.gallery__tag{
  display:inline-block;background:var(--amber-soft);color:var(--navy-800);
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;padding:4px 10px;border-radius:4px;margin-bottom:8px;
}
.gallery__item figcaption span:last-child{display:block;font-size:.93rem;color:#3b475a}

/* ---------- DZIELNICE ---------- */
.districts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.district{
  background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--amber);
  border-radius:var(--radius-sm);
  padding:22px 22px;
}
.district h3{margin:0 0 6px}
.district p{margin:0;font-size:.95rem;color:#3b475a}

/* ---------- TRUST BLOCK ---------- */
.section--trust{background:var(--paper-2)}
.trust-block{display:grid;grid-template-columns:1.55fr .9fr;gap:48px;align-items:start}
.trust-block__list{display:grid;gap:12px;margin-top:8px}
.trust-block__list li{
  padding-left:22px;position:relative;font-size:1rem;
}
.trust-block__list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:10px;height:10px;border-radius:2px;background:var(--amber);
  transform:rotate(45deg);
}
.trust-block__card{
  background:#fff;border-radius:var(--radius);
  border:1px solid var(--line);
  padding:28px;display:grid;gap:14px;
  box-shadow:var(--shadow-1);
}
.trust-block__hours{
  margin:0;text-align:center;font-size:.88rem;
  color:#3b475a;letter-spacing:.02em;
}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:840px;margin:0 auto}
.faq{display:grid;gap:10px;margin-top:18px}
.faq__item{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:0;
}
.faq__item summary{
  list-style:none;cursor:pointer;
  padding:18px 56px 18px 22px;
  font-weight:600;color:var(--navy-800);
  position:relative;font-size:1.02rem;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";position:absolute;right:22px;top:50%;
  transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;
  background:var(--amber-soft);color:var(--navy-800);
  display:grid;place-items:center;font-weight:700;font-size:1.1rem;
  transition:transform .2s, background .2s;
}
.faq__item[open] summary::after{content:"–";background:var(--amber);color:#fff}
.faq__item p{padding:0 22px 20px;color:#3b475a;font-size:.97rem;margin:0}

/* ---------- CTA FINAŁ ---------- */
.cta-final{
  background:
    linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color:#f4ead7;padding:clamp(48px,6vw,80px) 0;
}
.cta-final__inner{
  display:grid;grid-template-columns:1.4fr auto;gap:36px;align-items:center;
}
.cta-final h2{color:#fff;margin-bottom:.4em}
.cta-final p{margin:0;color:#d6cab2}

/* ---------- STOPKA ---------- */
.site-footer{background:var(--navy-900);color:#bcb19a}
.site-footer__grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;
  padding:56px 0 32px;
}
.site-footer h3{color:#fff;font-size:1rem;margin-bottom:12px}
.site-footer__about{font-size:.92rem;line-height:1.65;margin-top:14px}
.site-footer__list li{font-size:.93rem;padding:3px 0}
.brand--footer .brand__name{color:#fff}
.brand--footer .brand__name span{color:var(--amber-2)}
.site-footer address a{color:#fff}
.site-footer address a:hover{color:var(--amber-2)}
.footer-phone{
  display:inline-block;font-weight:700;font-size:1.05rem;
  margin-top:4px;letter-spacing:.02em;
}
.footer-hours{display:inline-block;margin-top:4px;font-size:.85rem;color:#867b67}
.site-footer__bar{
  border-top:1px solid rgba(255,255,255,.08);
  padding:18px 0;font-size:.82rem;text-align:center;color:#867b67;
}

/* ---------- MOBILE STICKY CTA ---------- */
.mobile-cta{
  display:none;
  position:fixed;left:12px;right:12px;bottom:12px;z-index:200;
  background:var(--amber);color:var(--navy-900);
  align-items:center;justify-content:center;gap:10px;
  padding:14px 16px;border-radius:999px;font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.mobile-cta:hover{background:var(--amber-2)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .services,.process,.gallery,.districts{grid-template-columns:repeat(2,1fr)}
  .trust__grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .situation,.dez,.trust-block{grid-template-columns:1fr;gap:32px}
  .situation__card{position:static}
  .cta-final__inner{grid-template-columns:1fr;text-align:left}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:28px}
}

@media (max-width: 720px){
  body{font-size:16px}
  .nav{display:none}
  .btn-phone--header span{display:none}
  .btn-phone--header{padding:10px;width:42px;height:42px;border-radius:50%}
  .services,.process,.gallery,.districts{grid-template-columns:1fr}
  .hero{min-height:auto;padding:64px 0 56px}
  .hero h1{max-width:none}
  .hero__chips{margin-top:20px}
  .section{padding:54px 0}
  .mobile-cta{display:flex}
  body{padding-bottom:84px}
  .trust__grid{grid-template-columns:repeat(2,1fr)}
  .site-footer__grid{grid-template-columns:1fr}
}

/* ---------- PRINT ---------- */
@media print{
  .ribbon,.mobile-cta,.site-header,.nav,.btn{display:none!important}
  body{background:#fff;color:#000}
  .section{padding:24px 0;page-break-inside:avoid}
}

/* ---------- ACCESSIBILITY ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}