/* ============================================================
   SFERBEST — Kompleksowe Usługi Utrzymania Czystości
   Shared design system
   ============================================================ */

:root{
  /* Brand */
  --brand:        #009ab6;
  --brand-600:    #008aa4;
  --brand-700:    #007f97;
  --brand-800:    #006478;
  --brand-tint:   #e6f6f9;
  --brand-tint-2: #d4eef3;

  /* Neutrals */
  --ink:          #111418;
  --ink-2:        #3a424b;
  --ink-3:        #5d6670;
  --muted:        #8a929b;
  --line:         #e7ecef;
  --line-2:       #eef2f4;
  --surface:      #f5f7f9;
  --surface-2:    #eef2f5;
  --white:        #ffffff;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(17,20,24,.04), 0 2px 8px rgba(17,20,24,.05);
  --shadow:    0 4px 14px rgba(17,20,24,.06), 0 10px 30px rgba(17,20,24,.07);
  --shadow-lg: 0 10px 30px rgba(17,20,24,.08), 0 30px 60px rgba(0,120,140,.10);
  --shadow-brand: 0 10px 24px rgba(0,154,182,.28);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  --container: 1250px;
  --gut: clamp(20px, 5vw, 56px);

  --ease: cubic-bezier(.22,.61,.36,1);

  --ff: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  font-family:var(--ff);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }
ul{ list-style:none; padding:0; }
h1,h2,h3,h4{ font-weight:600; line-height:1.12; letter-spacing:-.02em; color:var(--ink); }
:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:6px; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding:clamp(64px,9vw,118px) 0; }
.section--tight{ padding:clamp(48px,6vw,84px) 0; }
.bg-surface{ background:var(--surface); }
.bg-ink{ background:var(--ink); color:var(--white); }
.bg-brand{ background:var(--brand); color:#fff; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-700);
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--brand); border-radius:2px; }
.bg-ink .eyebrow{ color:#5cd2e6; }
.bg-brand .eyebrow{ color:#fff; }
.bg-brand .eyebrow::before, .bg-ink .eyebrow::before{ background:currentColor; }

.h-display{ font-size:clamp(2.3rem,5.4vw,4rem); line-height:1.05; }
.h-1{ font-size:clamp(2rem,4vw,3rem); }
.h-2{ font-size:clamp(1.6rem,3vw,2.3rem); }
.lead{ font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--ink-2); line-height:1.7; }
.muted{ color:var(--ink-3); }
.section-head{ max-width:680px; margin-bottom:clamp(34px,5vw,56px); }
.section-head .lead{ margin-top:16px; }
.section-head--center{ margin-inline:auto; text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:10px 19px; border-radius:var(--r-pill);
  font-weight:600; font-size:.875rem; letter-spacing:.01em;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; }
.btn--primary{ background:var(--brand); color:#fff; box-shadow:var(--shadow-brand); }
.btn--primary:hover{ background:var(--brand-700); transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,154,182,.36); }
.btn--ghost{ background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); }
.btn--ghost:hover{ transform:translateY(-2px); box-shadow:var(--shadow); color:var(--brand-700); }
.btn--outline{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn--outline:hover{ box-shadow:inset 0 0 0 1.5px var(--brand); color:var(--brand-700); transform:translateY(-2px); }
.btn--light{ background:#fff; color:var(--brand-700); }
.btn--light:hover{ background:var(--brand-tint); transform:translateY(-2px); }
.btn--on-dark{ background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28); backdrop-filter:blur(4px); }
.btn--on-dark:hover{ background:rgba(255,255,255,.18); transform:translateY(-2px); }
.btn--lg{ padding:13px 24px; font-size:.92rem; }
.btn--block{ width:100%; }
.btn .arr{ transition:transform .25s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--brand-700);
  font-size:.95rem; transition:gap .2s var(--ease);
}
.link-arrow svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.link-arrow:hover{ gap:12px; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.topbar{
  background:linear-gradient(90deg, #16c0dd 0%, #00a6c4 55%, #009ab6 100%); color:#f3fdff; font-size:.82rem;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.topbar .container{ display:flex; gap:26px; align-items:center; min-height:40px; flex-wrap:wrap; }
.topbar a{ display:inline-flex; align-items:center; gap:7px; color:#f3fdff; transition:color .2s, opacity .2s; }
.topbar a:hover{ color:#fff; opacity:.85; }
.topbar svg{ width:14px; height:14px; color:#fff; }
.topbar .spacer{ margin-left:auto; }
.topbar .topbar-socials{ display:flex; gap:14px; }
.topbar .topbar-socials a{ color:#fff; }

.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck{ box-shadow:var(--shadow-sm); border-bottom-color:var(--line); background:rgba(255,255,255,.94); }
.nav{ display:flex; align-items:center; gap:22px; min-height:78px; flex-wrap:nowrap; }

/* Logo */
.logo{ display:inline-flex; align-items:center; gap:11px; }
.logo .mark{ width:42px; height:42px; flex:none; }
.logo .word{ display:flex; flex-direction:column; line-height:1; }
.logo .word b{ font-size:1.32rem; font-weight:700; letter-spacing:.02em; color:var(--ink); white-space:nowrap; }
.logo .word b i{ color:var(--brand); font-style:normal; }
.logo .word span{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); font-weight:500; margin-top:3px; white-space:nowrap; }

.nav-menu{ display:flex; align-items:center; gap:2px; margin-left:4px; flex-wrap:nowrap; }
.nav-menu a{
  position:relative; padding:10px 12px; border-radius:var(--r-sm); white-space:nowrap;
  font-weight:500; font-size:.94rem; color:var(--ink-2); transition:color .2s, background .2s;
}
.nav-menu a:hover{ color:var(--brand-700); background:var(--brand-tint); }
.nav-menu a.active{ color:var(--brand-700); }
.nav-menu a.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; background:var(--brand); border-radius:2px;
}
/* ---------- Mega menu ---------- */
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-menu a.mega-trigger{ display:inline-flex; align-items:center; gap:5px; }
.mega-caret{ width:14px; height:14px; transition:transform .25s var(--ease); opacity:.7; }
.nav-item.open .mega-trigger{ color:var(--brand-700); background:var(--brand-tint); }
.nav-item.open .mega-caret{ transform:rotate(180deg); }

.mega-panel{
  position:absolute; left:50%; top:100%; transform:translate(-50%,8px);
  width:min(960px, calc(100vw - 32px)); z-index:70;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.mega-panel > .container{ padding:0; max-width:none; }
.nav-item.open .mega-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,12px); }
.mega-inner{
  display:grid; grid-template-columns:.86fr 2fr; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:0 24px 60px -18px rgba(13,32,40,.34), 0 8px 22px -12px rgba(13,32,40,.22);
  padding:10px; overflow:hidden;
}
.mega-aside{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:24px 22px; border-radius:12px;
  background:linear-gradient(165deg, var(--brand-tint) 0%, #fff 78%);
}
.mega-aside h3{ font-size:1.18rem; line-height:1.2; }
.mega-aside p{ font-size:.88rem; color:var(--ink-3); line-height:1.55; margin:0; }
.mega-aside .btn--sm{ margin-top:4px; padding:11px 18px; font-size:.86rem; }
.mega-quote{ font-size:.86rem; font-weight:600; color:var(--brand-700); }
.mega-quote:hover{ color:var(--brand-800); }

.mega-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:6px; }
.mega-card{
  display:flex; align-items:flex-start; gap:12px; padding:13px 13px;
  border-radius:12px; transition:background .18s var(--ease), transform .18s var(--ease);
}
.mega-card:hover{ background:var(--surface); }
.mega-ic{
  flex:none; width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand-700);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.mega-ic svg{ width:22px; height:22px; }
.mega-card:hover .mega-ic{ background:var(--brand); color:#fff; }
.mega-tx{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.mega-tx strong{ font-size:.94rem; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.mega-tx span{ font-size:.8rem; color:var(--ink-3); line-height:1.4; }
@media (max-width: 1040px){ .mega-panel{ display:none; } }

.nav-right{ display:flex; align-items:center; gap:14px; margin-left:auto; }

.lang-toggle{ display:flex; background:var(--surface); border-radius:var(--r-pill); padding:3px; gap:2px; }
.lang-toggle button{ padding:6px 12px; border-radius:var(--r-pill); font-size:.8rem; font-weight:600; color:var(--ink-3); transition:.2s; }
.lang-toggle button.active{ background:#fff; color:var(--brand-700); box-shadow:var(--shadow-sm); }

.nav-toggle{ display:none; width:46px; height:46px; border-radius:12px; background:var(--surface); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.3s var(--ease); margin-inline:auto; position:relative;
}
.nav-toggle span::before{ position:absolute; top:-6px; left:0; }
.nav-toggle span::after{ position:absolute; top:6px; left:0; }
.nav-toggle.open span{ background:transparent; }
.nav-toggle.open span::before{ top:0; transform:rotate(45deg); }
.nav-toggle.open span::after{ top:0; transform:rotate(-45deg); }

/* Mobile drawer */
.mobile-menu{
  position:fixed; inset:0 0 0 auto; width:min(86vw,360px); z-index:100;
  background:#fff; transform:translateX(100%); transition:transform .35s var(--ease);
  display:flex; flex-direction:column; padding:26px; box-shadow:var(--shadow-lg);
  overflow-y:auto;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu .mm-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.mobile-menu .mm-close{ width:44px; height:44px; border-radius:12px; background:var(--surface); font-size:1.4rem; color:var(--ink); }
.mobile-menu nav{ display:flex; flex-direction:column; gap:2px; }
.mobile-menu nav a{ padding:14px 12px; border-radius:12px; font-weight:500; font-size:1.05rem; color:var(--ink-2); }
.mobile-menu nav a:hover, .mobile-menu nav a.active{ background:var(--brand-tint); color:var(--brand-700); }
.mobile-menu .mm-cta{ margin-top:auto; padding-top:20px; }
.overlay{
  position:fixed; inset:0; background:rgba(17,20,24,.42); z-index:90; opacity:0; visibility:hidden; transition:.3s;
  backdrop-filter:blur(2px);
}
.overlay.open{ opacity:1; visibility:visible; }

/* ============================================================
   PLACEHOLDER (swap for real photo)
   ============================================================ */
.ph{
  position:relative; overflow:hidden; background:var(--surface-2);
  background-image:
    repeating-linear-gradient(135deg, rgba(0,154,182,.05) 0 2px, transparent 2px 13px);
  display:flex; align-items:center; justify-content:center;
}
.ph::after{
  content:attr(data-label);
  font-family:"Poppins", monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); background:rgba(255,255,255,.78); padding:6px 12px; border-radius:var(--r-pill);
  box-shadow:var(--shadow-sm); max-width:80%; text-align:center; line-height:1.4; font-weight:500;
}
.ph--brand{ background:linear-gradient(135deg, var(--brand) 0%, var(--brand-800) 100%);
  background-image:linear-gradient(135deg, var(--brand) 0%, var(--brand-800) 100%),
   repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px); }
.ph--brand::after{ color:var(--brand-800); }
.ph--dark{ background:linear-gradient(135deg,#1a2026,#0c1014); }
.ph--dark::after{ background:rgba(255,255,255,.12); color:#dfe6ec; box-shadow:none; }

/* real photo backing for placeholders */
.ph.has-img{ background-image:none; }
.ph.has-img::after{ display:none; }
.ph.has-img{ background-size:cover; background-position:center; background-repeat:no-repeat; }

/* before/after photo layers */
.ba .ba-img{ position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; }
.ba .ba-img.ba-dirty{ filter:sepia(.5) saturate(1.35) brightness(.66) contrast(1.12); }

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{ position:relative; background:var(--brand-800); color:#fff; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; }
.hero-bg .ph{ width:100%; height:100%; z-index:0; }
.hero-bg{ --ov:.6; }
.hero .ph--dark{ background:linear-gradient(135deg,#13a7c3 0%, #047a96 55%, #02617a 100%); }
.hero-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg, rgba(2,58,72,calc(.4 + var(--ov) * .34)) 0%, rgba(0,82,99,calc(.3 + var(--ov) * .3)) 52%, rgba(2,100,120,.4) 100%); }
.hero-inner{ position:relative; z-index:2; padding:clamp(72px,11vw,138px) 0 clamp(56px,8vw,96px); }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:40px; max-width:760px; }
.hero .tag{
  display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); font-size:.82rem; font-weight:500;
  color:#eaf6f8; margin-bottom:24px; backdrop-filter:blur(4px);
}
.hero .tag .dot{ width:8px; height:8px; border-radius:50%; background:#42d77f; box-shadow:0 0 0 4px rgba(66,215,127,.25); }
.hero h1{ color:#fff; text-shadow:0 2px 22px rgba(0,38,48,.45); }
.hero h1 .accent{ color:#c8f5fc; }
.hero .lead{ color:#eef7f9; max-width:560px; margin-top:22px; text-shadow:0 1px 12px rgba(0,38,48,.4); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-trust{ display:flex; align-items:center; gap:14px; margin-top:34px; color:#cfe6ea; font-size:.9rem; }
.hero-trust .stars{ color:#ffc24b; letter-spacing:2px; }

/* Counters */
.counters{ position:relative; z-index:3; }
.counters .container{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);
  margin-top:-54px; background-clip:padding-box;
}
.counter{ background:#fff; padding:30px 26px; text-align:center; }
.counter .num{ font-size:clamp(2rem,3.4vw,2.8rem); font-weight:700; color:var(--brand-700); letter-spacing:-.03em; line-height:1; }
.counter .num .plus{ color:var(--brand); }
.counter .lbl{ margin-top:8px; font-size:.92rem; color:var(--ink-3); font-weight:500; }

/* ============================================================
   SERVICES
   ============================================================ */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }

/* Layout A — image cards */
.svc-card{
  background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  border:1px solid var(--line-2); display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.svc-card .thumb{ aspect-ratio:16/10; position:relative; }
.svc-card .thumb .ph{ position:absolute; inset:0; }
.svc-card .ic{
  position:absolute; left:18px; bottom:-22px; width:54px; height:54px; border-radius:15px;
  background:#fff; display:grid; place-items:center; box-shadow:var(--shadow); color:var(--brand-700);
}
.svc-card .ic svg{ width:26px; height:26px; }
.svc-card .body{ padding:34px 24px 26px; display:flex; flex-direction:column; flex:1; }
.svc-card h3{ font-size:1.18rem; }
.svc-card p{ color:var(--ink-3); font-size:.95rem; margin-top:10px; flex:1; }
.svc-card .link-arrow{ margin-top:18px; }

/* Layout B — icon tiles (no image) */
.svc-grid.layout-icons .svc-card .thumb{ display:none; }
.svc-grid.layout-icons .svc-card{ padding:0; }
.svc-grid.layout-icons .svc-card .body{ padding:32px 28px; }
.svc-grid.layout-icons .svc-card .ic{
  position:static; width:60px; height:60px; border-radius:17px; margin-bottom:20px;
  background:var(--brand-tint); color:var(--brand-700); box-shadow:none;
}
.svc-grid.layout-icons .svc-card:hover .ic{ background:var(--brand); color:#fff; }
.svc-grid.layout-icons .svc-card .ic{ transition:background .3s, color .3s; }

/* Layout C — overlay image cards */
.svc-grid.layout-overlay .svc-card{ border:0; }
.svc-grid.layout-overlay .svc-card .thumb{ aspect-ratio:4/5; }
.svc-grid.layout-overlay .svc-card .thumb .ph::after{ display:none; }
.svc-grid.layout-overlay .svc-card .ic{ left:22px; bottom:auto; top:22px; }
.svc-grid.layout-overlay .svc-card .body{
  position:absolute; inset:auto 0 0 0; padding:26px 24px; color:#fff;
  background:linear-gradient(to top, rgba(8,12,16,.92) 18%, rgba(8,12,16,.5) 60%, transparent);
}
.svc-grid.layout-overlay .svc-card h3{ color:#fff; }
.svc-grid.layout-overlay .svc-card p{ color:rgba(255,255,255,.82); }
.svc-grid.layout-overlay .svc-card .link-arrow{ color:#5cd2e6; }

/* ============================================================
   WHY US
   ============================================================ */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.why-card{
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); padding:32px 28px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.why-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.why-card .ic{
  width:56px; height:56px; border-radius:16px; background:var(--brand-tint); color:var(--brand-700);
  display:grid; place-items:center; margin-bottom:20px;
}
.why-card .ic svg{ width:28px; height:28px; }
.why-card h3{ font-size:1.12rem; }
.why-card p{ color:var(--ink-3); font-size:.94rem; margin-top:10px; }
.bg-ink .why-card{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
.bg-ink .why-card h3{ color:#fff; }
.bg-ink .why-card p{ color:#aeb7be; }
.bg-ink .why-card .ic{ background:rgba(92,210,230,.14); color:#5cd2e6; }

/* ============================================================
   WHY-X  (editorial "why us" — split: photo panel + numbered rows)
   ============================================================ */
.whyx{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(32px,4.5vw,60px); align-items:start; }
.whyx-aside{
  position:sticky; top:100px; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg);
  min-height:480px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff;
}
.whyx-aside .bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
.whyx-aside::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(2,55,68,.18) 0%, rgba(2,55,68,.5) 55%, rgba(2,46,57,.92) 100%); }
.whyx-aside .inner{ position:relative; z-index:2; padding:clamp(28px,3vw,40px); }
.whyx-aside .eyebrow{ color:#bdeef6; }
.whyx-aside h2{ color:#fff; margin-top:14px; font-size:clamp(1.7rem,2.4vw,2.3rem); }
.whyx-aside p{ color:#dCeef2; margin-top:14px; font-size:1.02rem; line-height:1.65; max-width:380px; }
.whyx-aside .stat-row{ display:flex; gap:26px; margin-top:26px; }
.whyx-aside .stat-row .s b{ display:block; font-size:1.9rem; font-weight:700; letter-spacing:-.02em; line-height:1; }
.whyx-aside .stat-row .s span{ font-size:.82rem; color:#bdeef6; margin-top:6px; display:block; }
.whyx-aside .btn{ margin-top:28px; }

.whyx-list{ display:flex; flex-direction:column; }
.whyx-row{
  display:grid; grid-template-columns:auto auto 1fr; gap:20px; align-items:start;
  padding:26px 18px 26px 14px; border-top:1px solid var(--line); border-radius:var(--r);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.whyx-list .whyx-row:last-child{ border-bottom:1px solid var(--line); }
.whyx-row:hover{ background:#fff; box-shadow:var(--shadow); transform:translateX(4px); border-color:transparent; }
.whyx-row .num{ font-size:1.05rem; font-weight:700; color:var(--brand); font-variant-numeric:tabular-nums; padding-top:9px; }
.whyx-row .ic{ width:50px; height:50px; flex:none; border-radius:14px; background:var(--brand-tint); color:var(--brand-700);
  display:grid; place-items:center; transition:background .25s, color .25s; }
.whyx-row:hover .ic{ background:var(--brand); color:#fff; }
.whyx-row .ic svg{ width:25px; height:25px; }
.whyx-row h3{ font-size:1.14rem; }
.whyx-row p{ color:var(--ink-3); font-size:.95rem; margin-top:7px; line-height:1.6; }
@media (max-width:900px){
  .whyx{ grid-template-columns:1fr; }
  .whyx-aside{ position:static; min-height:360px; }
}
@media (max-width:560px){
  .whyx-row{ grid-template-columns:auto 1fr; gap:14px 16px; }
  .whyx-row .num{ grid-column:1; grid-row:1; padding-top:0; }
  .whyx-row .ic{ display:none; }
}

/* ============================================================
   SVC-ROWS  (oferta catalog — index + photo + content + cta)
   ============================================================ */
.svc-rows{ display:flex; flex-direction:column; gap:18px; }
.svc-row{
  display:grid; grid-template-columns:64px 250px 1fr auto; gap:clamp(18px,2.4vw,34px); align-items:center;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); padding:18px 26px 18px 18px;
  box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.svc-row:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:transparent; }
.svc-row .idx{ font-size:1.5rem; font-weight:700; color:var(--brand-tint-2); text-align:center; font-variant-numeric:tabular-nums; transition:color .3s; }
.svc-row:hover .idx{ color:var(--brand); }
.svc-row .pic{ position:relative; aspect-ratio:5/4; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); }
.svc-row .pic .bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .5s var(--ease); }
.svc-row:hover .pic .bg{ transform:scale(1.07); }
.svc-row .pic .ic{ position:absolute; left:12px; bottom:12px; width:44px; height:44px; border-radius:12px;
  background:rgba(255,255,255,.94); display:grid; place-items:center; color:var(--brand-700); box-shadow:var(--shadow-sm); }
.svc-row .pic .ic svg{ width:23px; height:23px; }
.svc-row .meat h3{ font-size:1.28rem; }
.svc-row .meat > p{ color:var(--ink-3); font-size:.96rem; margin-top:8px; max-width:54ch; }
.svc-row .chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.svc-row .chips span{ font-size:.78rem; font-weight:500; color:var(--brand-700); background:var(--brand-tint);
  padding:5px 11px; border-radius:var(--r-pill); white-space:nowrap; }
.svc-row .chips .more{ color:var(--ink-3); background:var(--surface-2); }
.svc-row .go{ width:54px; height:54px; flex:none; border-radius:50%; background:var(--surface); color:var(--brand-700);
  display:grid; place-items:center; transition:background .3s, color .3s, transform .3s; }
.svc-row:hover .go{ background:var(--brand); color:#fff; transform:translateX(3px); }
.svc-row .go svg{ width:22px; height:22px; }
@media (max-width:1024px){
  .svc-row{ grid-template-columns:48px 180px 1fr; }
  .svc-row .go{ display:none; }
}
@media (max-width:680px){
  .svc-row{ grid-template-columns:1fr; gap:14px; padding:16px; position:relative; }
  .svc-row .idx{ position:absolute; top:18px; right:20px; }
  .svc-row .pic{ aspect-ratio:16/9; }
}

/* ============================================================
   BEFORE / AFTER
   ============================================================ */
.ba-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.ba{
  position:relative; aspect-ratio:16/11; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow); user-select:none; touch-action:pan-y; cursor:ew-resize; background:#222;
}
.ba .layer{ position:absolute; inset:0; }
.ba .layer .vis{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.ba .after{ }
.ba .before{ clip-path:inset(0 50% 0 0); }
.ba .badge{
  position:absolute; top:14px; padding:6px 14px; border-radius:var(--r-pill); font-size:.72rem;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; z-index:4; backdrop-filter:blur(4px);
}
.ba .badge.b-after{ right:14px; background:rgba(0,154,182,.92); color:#fff; }
.ba .badge.b-before{ left:14px; background:rgba(17,20,24,.66); color:#fff; }
.ba .handle{
  position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; z-index:5; transform:translateX(-50%);
  box-shadow:0 0 0 1px rgba(0,0,0,.06);
}
.ba .handle .grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px;
  border-radius:50%; background:#fff; box-shadow:var(--shadow); display:grid; place-items:center; color:var(--brand-700);
}
.ba .handle .grip svg{ width:22px; height:22px; }
.ba .cap{ position:absolute; left:0; right:0; bottom:0; z-index:4; padding:18px 18px 16px; color:#fff;
  background:linear-gradient(to top, rgba(8,12,16,.8), transparent); font-size:.95rem; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* synthetic clean / dirty surfaces */
.surf{ position:absolute; inset:0; }
.surf-clean{ background:
   linear-gradient(135deg,#dfeef1,#bfe0e7);
   background-size:cover; }
.surf-clean::after{ content:""; position:absolute; inset:0;
   background:repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 26px),
              repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0 1px, transparent 1px 26px); }
.surf-dirty{ background:linear-gradient(135deg,#8a8170,#5f5848); }
.surf-dirty::after{ content:""; position:absolute; inset:0;
   background:repeating-linear-gradient(90deg, rgba(40,34,24,.45) 0 1px, transparent 1px 26px),
              repeating-linear-gradient(0deg, rgba(40,34,24,.4) 0 1px, transparent 1px 26px),
              radial-gradient(circle at 30% 40%, rgba(30,26,18,.5), transparent 38%),
              radial-gradient(circle at 70% 65%, rgba(30,26,18,.45), transparent 32%);
   filter:contrast(1.05); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tst{ position:relative; }
.tst-track{ display:flex; gap:26px; overflow:hidden; }
.tst-card{
  flex:0 0 calc((100% - 52px)/3); background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:34px 30px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
.tst-card .stars{ color:#ffc24b; letter-spacing:2px; font-size:1.05rem; }
.tst-card blockquote{ font-size:1.04rem; color:var(--ink-2); line-height:1.7; margin:16px 0 22px; flex:1; }
.tst-card .who{ display:flex; align-items:center; gap:13px; }
.tst-card .who .av{ width:46px; height:46px; border-radius:50%; background:var(--brand-tint); color:var(--brand-700);
  display:grid; place-items:center; font-weight:700; }
.tst-card .who b{ display:block; font-size:.96rem; }
.tst-card .who span{ font-size:.84rem; color:var(--ink-3); }
.tst-nav{ display:flex; gap:10px; justify-content:center; margin-top:34px; }
.tst-nav button, .slider-btn{
  width:50px; height:50px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); color:var(--ink);
  display:grid; place-items:center; transition:.2s; border:1px solid var(--line-2);
}
.tst-nav button:hover, .slider-btn:hover{ background:var(--brand); color:#fff; border-color:transparent; transform:translateY(-2px); }
.tst-nav button svg, .slider-btn svg{ width:20px; height:20px; }

/* ============================================================
   BLOG CARDS
   ============================================================ */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.post-card{
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.post-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.post-card .thumb{ aspect-ratio:16/9; position:relative; }
.post-card .thumb .ph{ position:absolute; inset:0; }
.post-card .cat{ position:absolute; top:14px; left:14px; background:#fff; color:var(--brand-700);
  font-size:.74rem; font-weight:600; padding:6px 13px; border-radius:var(--r-pill); box-shadow:var(--shadow-sm); }
.post-card .body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.post-card .meta{ font-size:.82rem; color:var(--muted); display:flex; gap:12px; }
.post-card h3{ font-size:1.14rem; margin:10px 0 0; }
.post-card p{ color:var(--ink-3); font-size:.93rem; margin-top:10px; flex:1; }
.post-card .link-arrow{ margin-top:18px; }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner{ position:relative; overflow:hidden; }
.cta-card{
  position:relative; background:linear-gradient(120deg,var(--brand) 0%, var(--brand-800) 100%);
  border-radius:var(--r-xl); padding:clamp(40px,6vw,72px); color:#fff; overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.cta-card::before{ content:""; position:absolute; right:-60px; top:-60px; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); }
.cta-card::after{ content:""; position:absolute; left:-40px; bottom:-80px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.1), transparent 70%); }
.cta-card .inner{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.cta-card h2{ color:#fff; max-width:620px; }
.cta-card p{ color:rgba(255,255,255,.9); margin-top:12px; max-width:540px; }
.cta-card .actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:#073945; color:#bcd4da; padding-top:clamp(56px,7vw,84px); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:44px; padding-bottom:48px; }
.site-footer .logo .mark{ background:#fff; border-radius:10px; padding:4px; box-sizing:border-box; }
.site-footer .logo .word b{ color:#fff; }
.site-footer .logo .word span{ color:#7c858d; }
.footer-about{ margin-top:20px; font-size:.94rem; line-height:1.7; max-width:340px; }
.footer-col h4{ color:#fff; font-size:1rem; margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:.93rem; color:#a9c8cf; transition:color .2s, padding .2s; }
.footer-col a:hover{ color:#fff; padding-left:4px; }
.footer-contact li{ display:flex; gap:12px; font-size:.93rem; margin-bottom:14px; align-items:flex-start; }
.footer-contact svg{ width:18px; height:18px; color:var(--brand); flex:none; margin-top:2px; }
.footer-socials{ display:flex; gap:10px; margin-top:20px; }
.footer-socials a{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.07); display:grid; place-items:center; transition:.2s; }
.footer-socials a:hover{ background:var(--brand); color:#fff; transform:translateY(-2px); }
.footer-socials svg{ width:18px; height:18px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:24px 0; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.86rem; color:#7fa3aa; }
.footer-bottom a:hover{ color:#fff; }

/* ============================================================
   PAGE HERO (subpages)
   ============================================================ */
.page-hero{ position:relative; background:var(--brand-800); color:#fff; overflow:hidden; }
.page-hero .ph{ position:absolute; inset:0; z-index:0; }
.page-hero .ph--dark{ background:linear-gradient(135deg,#13a7c3 0%, #047a96 55%, #02617a 100%); }
.page-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(2,60,74,.74), rgba(0,86,104,.54) 56%, rgba(20,140,166,.4)); }
.page-hero h1, .page-hero p{ text-shadow:0 2px 18px rgba(0,38,48,.4); }
.page-hero .inner{ position:relative; z-index:2; padding:clamp(58px,8vw,104px) 0 clamp(48px,6vw,80px); max-width:760px; }
.page-hero h1{ color:#fff; margin-top:18px; }
.page-hero p{ color:#c4ccd3; margin-top:18px; max-width:560px; font-size:1.1rem; }
.breadcrumbs{ display:flex; gap:8px; align-items:center; font-size:.86rem; color:#aeb7be; flex-wrap:wrap; }
.breadcrumbs a:hover{ color:#fff; }
.breadcrumbs .sep{ color:#5d6670; }
.breadcrumbs span[aria-current]{ color:#5cd2e6; }

/* ============================================================
   GENERIC CONTENT BLOCKS
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,68px); align-items:center; }
.split .media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3; position:relative; }
.split .media .ph{ position:absolute; inset:0; }
.prose p{ color:var(--ink-2); margin-top:16px; line-height:1.75; }
.prose h2{ margin-top:8px; }
.prose h3{ margin-top:28px; font-size:1.25rem; }
.prose ul.ticks{ display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.prose ul.ticks li{ display:flex; gap:12px; color:var(--ink-2); }
.prose ul.ticks li svg{ width:22px; height:22px; color:var(--brand); flex:none; margin-top:2px; }

.benefit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.benefit{ background:#fff; border:1px solid var(--line-2); border-radius:var(--r); padding:26px 24px; box-shadow:var(--shadow-sm); }
.benefit .ic{ width:48px; height:48px; border-radius:13px; background:var(--brand-tint); color:var(--brand-700); display:grid; place-items:center; margin-bottom:16px; }
.benefit .ic svg{ width:24px; height:24px; }
.benefit h3{ font-size:1.05rem; }
.benefit p{ color:var(--ink-3); font-size:.92rem; margin-top:8px; }

/* Process steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step; }
.step{ position:relative; padding-top:14px; }
.step .n{ font-size:2.6rem; font-weight:700; color:var(--brand-tint-2); line-height:1; letter-spacing:-.04em; }
.step h3{ font-size:1.08rem; margin-top:10px; }
.step p{ color:var(--ink-3); font-size:.92rem; margin-top:8px; }
.bg-ink .step .n{ color:rgba(92,210,230,.3); }
.bg-ink .step h3{ color:#fff; } .bg-ink .step p{ color:#aeb7be; }

/* Gallery */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gallery .cell{ aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; position:relative; box-shadow:var(--shadow-sm); }
.gallery .cell .ph{ position:absolute; inset:0; transition:transform .5s var(--ease); }
.gallery .cell:hover .ph{ transform:scale(1.06); }

/* FAQ */
.faq{ max-width:820px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; text-align:left;
  padding:22px 0; font-weight:600; font-size:1.08rem; color:var(--ink); }
.faq-q .pm{ width:30px; height:30px; flex:none; border-radius:9px; background:var(--brand-tint); color:var(--brand-700);
  display:grid; place-items:center; transition:.3s var(--ease); font-size:1.2rem; }
.faq-item.open .faq-q .pm{ background:var(--brand); color:#fff; transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a .faq-a-in{ padding:0 0 22px; color:var(--ink-2); line-height:1.7; max-width:680px; }

/* Form */
.form-card{ background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); padding:clamp(28px,4vw,44px); box-shadow:var(--shadow); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.86rem; font-weight:500; color:var(--ink-2); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border-radius:12px; border:1.5px solid var(--line); background:var(--white);
  font-family:inherit; font-size:.98rem; color:var(--ink); transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-tint); }
.field textarea{ resize:vertical; min-height:120px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-note{ font-size:.82rem; color:var(--muted); margin-top:8px; }

/* Map */
.map-embed{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); min-height:340px; border:0; width:100%; }

/* Filter chips */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; }
.chip{ padding:10px 20px; border-radius:var(--r-pill); background:#fff; border:1.5px solid var(--line); color:var(--ink-2);
  font-weight:500; font-size:.92rem; transition:.2s; }
.chip:hover{ border-color:var(--brand); color:var(--brand-700); }
.chip.active{ background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:var(--shadow-brand); }

/* case grid */
.case-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.case{ background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.case .case-body{ padding:24px 26px 28px; }
.case .case-body .tagline{ font-size:.8rem; color:var(--brand-700); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.case .case-body h3{ font-size:1.18rem; margin-top:8px; }
.case .case-body p{ color:var(--ink-3); font-size:.94rem; margin-top:10px; }

/* mini list */
.mini-list{ columns:2; column-gap:34px; }
.mini-list li{ break-inside:avoid; display:flex; gap:11px; padding:10px 0; border-bottom:1px solid var(--line-2); color:var(--ink-2); }
.mini-list li svg{ width:20px; height:20px; color:var(--brand); flex:none; margin-top:2px; }

/* logos strip */
.partners{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 40px; opacity:.9; }
.partners .pl{ height:34px; min-width:120px; border-radius:8px; background:var(--surface-2); display:grid; place-items:center;
  color:var(--ink-3); font-weight:600; letter-spacing:.04em; font-size:.86rem; padding:0 18px; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:1; transform:translateY(24px); transition:transform .7s var(--ease); will-change:transform; }
.reveal.in{ transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
.reveal[data-d="5"]{ transition-delay:.4s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   i18n helpers
   ============================================================ */
[data-en]{ }
html[lang="en"] [data-pl-only]{ display:none !important; }
html[lang="pl"] [data-en-only]{ display:none !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .svc-grid, .why-grid, .blog-grid, .benefit-grid, .gallery{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .tst-card{ flex-basis:calc((100% - 26px)/2); }
}
@media (max-width:1024px){
  .nav-menu{ display:none; }
  .nav-toggle{ display:grid; place-items:center; }
  .lang-toggle{ display:none; }
  .nav-right > .btn{ display:none; }
  .split{ grid-template-columns:1fr; }
  .ba-grid{ grid-template-columns:1fr; }
  .case-grid{ grid-template-columns:1fr; }
  .cta-card .inner{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:680px){
  .counters .container{ grid-template-columns:1fr 1fr; }
  .svc-grid, .why-grid, .blog-grid, .benefit-grid, .gallery, .steps{ grid-template-columns:1fr; }
  .tst-card{ flex-basis:100%; }
  .footer-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .mini-list{ columns:1; }
  .topbar .container{ justify-content:center; }
  .topbar .spacer{ display:none; }
  .hero-actions .btn{ flex:1; }
}

/* ============================================================
   COOKIE CONSENT
   ============================================================ */
.cookie-banner{
  position:fixed; left:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); bottom:clamp(14px,3vw,28px);
  max-width:720px; margin-inline:auto; z-index:200;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-lg);
  padding:16px clamp(16px,2.4vw,22px); display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
  transform:translateY(140%); opacity:0; transition:transform .5s var(--ease), opacity .4s var(--ease);
}
.cookie-banner.show{ transform:none; opacity:1; }
.cookie-banner .ck-ic{ width:42px; height:42px; flex:none; border-radius:12px; background:var(--brand-tint);
  color:var(--brand-700); display:grid; place-items:center; }
.cookie-banner .ck-ic svg{ width:22px; height:22px; }
.cookie-banner .ck-txt h4{ font-size:.95rem; }
.cookie-banner .ck-txt p{ font-size:.8rem; color:var(--ink-3); margin-top:3px; line-height:1.5; max-width:58ch; }
.cookie-banner .ck-txt a{ color:var(--brand-700); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.cookie-banner .ck-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.cookie-banner .ck-actions .btn{ padding:9px 15px; font-size:.82rem; }
.btn--link{ background:none; color:var(--ink-3); padding:9px 10px; }
.btn--link:hover{ color:var(--brand-700); }

.cookie-modal{ position:fixed; inset:0; z-index:210; display:grid; place-items:center; padding:20px;
  background:rgba(8,28,34,.5); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:.3s; }
.cookie-modal.show{ opacity:1; visibility:visible; }
.cookie-modal .ck-card{ background:#fff; width:min(560px,100%); max-height:88vh; overflow-y:auto;
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); transform:translateY(16px); transition:transform .35s var(--ease); }
.cookie-modal.show .ck-card{ transform:none; }
.ck-card .ck-head{ padding:26px 28px 18px; border-bottom:1px solid var(--line-2); position:relative; }
.ck-card .ck-head h3{ font-size:1.3rem; }
.ck-card .ck-head p{ font-size:.9rem; color:var(--ink-3); margin-top:8px; line-height:1.55; }
.ck-card .ck-close{ position:absolute; top:20px; right:20px; width:38px; height:38px; border-radius:11px;
  background:var(--surface); color:var(--ink); font-size:1.3rem; display:grid; place-items:center; }
.ck-card .ck-close:hover{ background:var(--brand-tint); color:var(--brand-700); }
.ck-card .ck-body{ padding:10px 28px 8px; }
.ck-opt{ display:grid; grid-template-columns:1fr auto; gap:14px; align-items:start; padding:18px 0; border-bottom:1px solid var(--line-2); }
.ck-opt:last-child{ border-bottom:0; }
.ck-opt h4{ font-size:1rem; }
.ck-opt p{ font-size:.86rem; color:var(--ink-3); margin-top:5px; line-height:1.5; max-width:42ch; }
.ck-opt .badge-on{ font-size:.72rem; font-weight:600; color:var(--brand-700); }
.switch{ position:relative; width:46px; height:27px; flex:none; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .track{ position:absolute; inset:0; background:var(--line); border-radius:999px; transition:background .25s; }
.switch .track::after{ content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease); }
.switch input:checked + .track{ background:var(--brand); }
.switch input:checked + .track::after{ transform:translateX(19px); }
.switch input:disabled + .track{ background:var(--brand-tint-2); cursor:not-allowed; }
.switch input:disabled + .track::after{ background:#fff; }
.ck-card .ck-foot{ padding:18px 28px 26px; display:flex; gap:10px; flex-wrap:wrap; border-top:1px solid var(--line-2); }
.ck-card .ck-foot .btn{ flex:1; min-width:150px; padding:13px 18px; font-size:.9rem; }

.cookie-fab{ position:fixed; left:18px; bottom:18px; z-index:150; width:50px; height:50px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow); color:var(--brand-700); display:grid; place-items:center;
  border:1px solid var(--line-2); transition:transform .25s var(--ease), box-shadow .25s; opacity:0; visibility:hidden; }
.cookie-fab.show{ opacity:1; visibility:visible; }
.cookie-fab:hover{ transform:translateY(-3px) rotate(-8deg); box-shadow:var(--shadow-lg); }
.cookie-fab svg{ width:24px; height:24px; }

/* mobile contact block injected into hamburger drawer */
.mm-contact{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:2px; }
.mm-contact a, .mm-contact span{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:12px;
  font-size:.95rem; color:var(--ink-2); }
.mm-contact a:hover{ background:var(--brand-tint); color:var(--brand-700); }
.mm-contact svg{ width:18px; height:18px; color:var(--brand-700); flex:none; }
.mm-contact .mm-socials{ display:flex; gap:10px; padding:12px 12px 0; }
.mm-contact .mm-socials a{ width:42px; height:42px; padding:0; justify-content:center; border-radius:11px;
  background:var(--surface); color:var(--ink-2); }
.mm-contact .mm-socials a:hover{ background:var(--brand); color:#fff; }

@media (max-width:760px){
  .topbar{ display:none; }
  .cookie-banner{ grid-template-columns:1fr; gap:16px; text-align:left; }
  .cookie-banner .ck-ic{ display:none; }
  .cookie-banner .ck-actions{ justify-content:stretch; }
  .cookie-banner .ck-actions .btn{ flex:1; }
  .cookie-banner .ck-actions .btn--link{ flex-basis:100%; order:3; }
}