:root {
  --color-primary: #13333a;
  --color-primary-light: #1f4f58;
  --color-primary-dark: #0b2025;
  --color-accent: #35a06b;
  --color-accent-dark: #288155;
  --color-accent2: #2f8fd6;
  --color-ink: #0b0f17;
}

:root {
  --navy: var(--color-primary);
  --navy-d: var(--color-primary-dark);
  --navy-l: var(--color-primary-light);
  --accent: var(--color-accent);
  --accent-d: var(--color-accent-dark);
  --ink: #171410;
  --bg: #FBFAF8;            /* cieple off-white zamiast sterylnej bieli */
  --soft: #F4F1EC;          /* cieplejszy "papier" */
  --line: #E7E2DA;          /* cieple hairline'y */
  --muted: #6E675D;
  --wrap: 1240px;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.22,.68,.36,1);
  --shadow: 0 18px 44px -22px rgba(23,20,16,.18);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:'Manrope',system-ui,sans-serif; color:var(--ink); background:var(--bg); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; }
h1,h2,h3 { margin:0; font-family:var(--font-display); font-weight:560; letter-spacing:-.012em; line-height:1.05; font-variation-settings:"opsz" 60; }
p { margin:0; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 32px; }
.wrap--narrow { max-width:820px; }
::selection { background:color-mix(in srgb,var(--accent) 25%, transparent); }

/* --- buttons: rzemieslnicze, letter-spaced, bez pigulki --- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:.86rem; letter-spacing:.09em; text-transform:uppercase; padding:16px 28px; border-radius:8px; border:1px solid transparent; cursor:pointer; transition:transform .3s var(--ease), background .25s, box-shadow .3s var(--ease), color .25s, border-color .25s; }
.btn--lg { padding:19px 36px; font-size:.92rem; }
.btn--block { width:100%; }
.btn--solid { background:var(--accent); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.12); }
.btn--solid:hover { background:var(--accent-d); transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 16px 32px -12px color-mix(in srgb,var(--accent) 55%,transparent); }
.btn--outline { background:transparent; border-color:rgba(255,255,255,.45); color:#fff; }
.btn--outline:hover { background:rgba(255,255,255,.1); border-color:#fff; }
.btn--white { background:#fff; color:var(--navy); box-shadow:0 1px 2px rgba(0,0,0,.15); }
.btn--white:hover { transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(0,0,0,.35); }

/* --- sticky call --- */
.sticky-call { position:fixed; bottom:16px; left:16px; right:16px; z-index:90; display:none; align-items:center; justify-content:center; gap:8px; background:var(--accent); color:#fff; font-weight:700; padding:15px; border-radius:10px; box-shadow:0 14px 34px -12px rgba(0,0,0,.4); }

/* ============ HERO (full-bleed, asymetryczna typografia) ============ */
.hero { position:relative; min-height:100vh; display:flex; flex-direction:column; color:#fff; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; z-index:-2; background:var(--hero-img) center/cover no-repeat; }
.hero::after { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,16,26,.55) 0%, rgba(10,16,26,.25) 35%, rgba(10,16,26,.65) 100%); }

.hero__nav { position:relative; z-index:3; padding-top:26px; }
.hero__nav-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { font-weight:800; font-size:1.4rem; letter-spacing:-.03em; color:#fff; }
.hero__links { display:flex; gap:34px; }
.hero__links a { font-weight:500; font-size:.98rem; color:rgba(255,255,255,.9); transition:color .2s; }
.hero__links a:hover { color:#fff; }
.hero__phone { font-weight:700; font-size:1rem; font-variant-numeric:tabular-nums; color:#fff; padding:10px 20px; border:1px solid rgba(255,255,255,.4); border-radius:8px; transition:.25s; }
.hero__phone:hover { background:#fff; color:var(--navy); }

/* wielka asymetryczna typografia serif - jeden naglowek lewo-gora, drugi prawo-dol */
.hero__stage { position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:center; max-width:var(--wrap); width:100%; margin:0 auto; padding:40px 32px; }
.hero__big { font-size:clamp(3rem, 8.5vw, 7.4rem); font-weight:520; letter-spacing:-.015em; line-height:.99; text-shadow:0 2px 34px rgba(0,0,0,.38); font-variation-settings:"opsz" 120; }
.hero__big em { font-style:italic; font-weight:440; }
.hero__big--tl { align-self:flex-start; }
.hero__br { align-self:flex-end; text-align:right; max-width:min(560px, 90%); margin-top:clamp(20px,5vw,60px); }
.hero__big--br { margin-bottom:22px; }
.hero__sub { font-size:1.1rem; color:rgba(255,255,255,.88); margin-bottom:30px; max-width:42ch; margin-left:auto; line-height:1.7; }
.hero__cta { display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap; }

.hero__trust { position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.16); background:rgba(8,13,22,.42); backdrop-filter:blur(8px); }
/* kropki przed punktami (jak pure-style - decyzja Kamila 06.07) */
.hero__trust-inner { display:flex; flex-wrap:wrap; gap:14px 40px; padding:20px 32px; justify-content:center; }
.hero__trust span { font-weight:600; font-size:.95rem; color:rgba(255,255,255,.92); position:relative; padding-left:24px; }
.hero__trust span::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:14px; height:14px; border-radius:50%; background:var(--accent); }

/* nav mobile */
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span { width:26px; height:2px; background:#fff; border-radius:2px; transition:.3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mnav { display:none; flex-direction:column; gap:2px; padding:12px 32px 20px; }
.mnav a:not(.btn){ padding:13px 4px; color:#fff; font-weight:500; border-bottom:1px solid rgba(255,255,255,.15); }
.mnav .btn { margin-top:12px; }
.mnav.open { display:flex; }

/* ============ BLOCKS: zroznicowany rytm, nie "equal spacing everywhere" ============ */
body { counter-reset: sec; }
/* jasne sekcje: tlo "rysunek techniczny" - siatka instalacyjna wylaniajaca sie z naroznika
   + poswiata w kolorze marki. Widoczne, ale nie walczy z trescia (maska wygasza ku srodkowi). */
.block { position:relative; z-index:0; padding:clamp(76px,10vw,150px) 0; background:
  radial-gradient(1150px 620px at 90% -8%, color-mix(in srgb,var(--accent) 10%, transparent), transparent 60%),
  radial-gradient(950px 540px at -10% 108%, color-mix(in srgb,var(--navy) 7%, transparent), transparent 58%),
  var(--bg); }
.block:not(.block--dark)::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb,var(--navy) 11%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--navy) 11%, transparent) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(1250px 780px at 88% -6%, #000 0%, rgba(0,0,0,.5) 42%, transparent 72%);
  mask-image:radial-gradient(1250px 780px at 88% -6%, #000 0%, rgba(0,0,0,.5) 42%, transparent 72%); }
.block--soft:not(.block--dark)::before {
  -webkit-mask-image:radial-gradient(1250px 780px at 10% -6%, #000 0%, rgba(0,0,0,.5) 42%, transparent 72%);
  mask-image:radial-gradient(1250px 780px at 10% -6%, #000 0%, rgba(0,0,0,.5) 42%, transparent 72%); }
.block--dark { padding:clamp(90px,12vw,180px) 0; }
.block--split { padding:clamp(64px,8vw,120px) 0; }
.block--soft { background:
  radial-gradient(1000px 560px at 8% -8%, color-mix(in srgb,var(--accent) 11%, transparent), transparent 60%),
  radial-gradient(950px 540px at 108% 108%, color-mix(in srgb,var(--navy) 7%, transparent), transparent 58%),
  var(--soft); }
.block--dark { background:linear-gradient(180deg, var(--navy) 0%, color-mix(in srgb,#000 14%, var(--navy)) 100%); color:#fff; }
.head { max-width:720px; margin-bottom:clamp(44px,6.5vw,84px); }
/* eyebrow: editorial index "01 — USLUGI" + hairline */
.eyebrow { display:inline-flex; align-items:center; gap:14px; font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; }
.eyebrow::before { counter-increment:sec; content:counter(sec, decimal-leading-zero); font-family:var(--font-display); font-weight:500; font-style:italic; font-size:.95rem; letter-spacing:.02em; color:color-mix(in srgb,var(--ink) 45%, transparent); }
.eyebrow::after { content:""; width:52px; height:1px; background:color-mix(in srgb,var(--accent) 55%, transparent); }
.block--dark .eyebrow::before, .eyebrow--light::before { color:rgba(255,255,255,.45); }
.eyebrow--light { color:var(--accent); }
.h2 { font-size:clamp(2.1rem,4.6vw,3.5rem); font-weight:540; }
.h2--light { color:#fff; }
.lead { font-size:1.12rem; color:var(--muted); margin-top:20px; line-height:1.75; max-width:56ch; }
.lead--light { color:rgba(255,255,255,.78); }
.ticks { list-style:none; padding:0; margin:28px 0 32px; display:grid; gap:14px; }
.ticks li { position:relative; padding-left:32px; font-weight:500; }
.ticks li::before { content:""; position:absolute; left:2px; top:7px; width:11px; height:11px; transform:rotate(45deg); background:transparent; box-shadow:inset 0 0 0 1.5px var(--accent); }

/* uslugi - ciemne karty, PIERWSZA featured (lamie "identical cards") */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.svc { position:relative; display:flex; flex-direction:column; padding:36px 32px 30px; min-height:260px; overflow:hidden; z-index:0;
  background:color-mix(in srgb,#000 22%, var(--navy)); border:1px solid rgba(255,255,255,.08); border-radius:14px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); }
.svc::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.svc:hover { transform:translateY(-8px); background:color-mix(in srgb,#000 12%, var(--navy)); border-color:rgba(255,255,255,.16); box-shadow:0 30px 60px -30px rgba(0,0,0,.7); }
.svc:hover::before { transform:scaleX(1); }
/* featured: pierwsza usluga szersza, z akcentowa poswiata */
.svc:first-child { grid-column:span 2; background:linear-gradient(120deg, color-mix(in srgb,var(--accent) 14%, color-mix(in srgb,#000 22%, var(--navy))) 0%, color-mix(in srgb,#000 24%, var(--navy)) 55%); border-color:color-mix(in srgb,var(--accent) 28%, transparent); }
.svc:first-child .svc__title { font-size:1.7rem; max-width:18ch; }
.svc:first-child .svc__desc { max-width:44ch; }
.svc__no { position:absolute; top:28px; right:30px; font-family:var(--font-display); font-style:italic; font-size:.95rem; font-weight:500; color:rgba(255,255,255,.4); letter-spacing:.04em; }
.svc__no::after { content:attr(data-n); position:absolute; top:-26px; right:-12px; font-family:var(--font-display); font-size:5.6rem; font-weight:500; line-height:1; color:#fff; opacity:.05; z-index:-1; transition:opacity .35s var(--ease), transform .35s var(--ease); }
.svc:hover .svc__no::after { opacity:.09; transform:scale(1.05); }
/* ikona: hairline-ring zamiast kolorowego chipa */
.svc__icon { display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:50%; margin-bottom:22px;
  border:1px solid color-mix(in srgb,var(--accent) 45%, transparent); color:var(--accent); background:transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
.svc__icon svg { width:26px; height:26px; }
.svc:hover .svc__icon { background:var(--accent); border-color:var(--accent); color:#fff; transform:scale(1.06); }
.svc__title { font-size:1.34rem; font-weight:550; color:#fff; margin:0 0 10px; letter-spacing:-.01em; }
.svc__desc { color:rgba(255,255,255,.6); font-size:.97rem; line-height:1.6; }
.svc__more { display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:22px; font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.8); transition:color .25s; }
.svc__more::after { content:"\2192"; display:inline-block; transition:transform .3s var(--ease); }
.svc:hover .svc__more { color:var(--accent); }
.svc:hover .svc__more::after { transform:translateX(6px); }

/* split - naprzemienne obraz/tekst, ramka architektoniczna */
.split { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(44px,6.5vw,88px); align-items:center; }
.split__media { position:relative; border-radius:12px; overflow:visible; }
.split__media img { width:100%; height:100%; min-height:440px; object-fit:cover; border-radius:12px; box-shadow:var(--shadow); position:relative; z-index:1; }
.split__media::before { content:""; position:absolute; inset:18px -18px -18px 18px; border:1px solid color-mix(in srgb,var(--accent) 40%, transparent); border-radius:12px; z-index:0; }
.split__media::after { content:""; position:absolute; left:-14px; bottom:-14px; width:96px; height:96px; background:color-mix(in srgb,var(--accent) 12%, transparent); border-radius:10px; z-index:0; }

/* proces: wielka serifowa numeracja zamiast chipow */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(28px,4.5vw,56px); }
.step { position:relative; padding-top:22px; }
.step::before { content:""; position:absolute; top:0; left:2px; width:44px; height:1px; background:color-mix(in srgb,var(--accent) 60%, transparent); }
.step__no { display:block; font-family:var(--font-display); font-style:italic; font-size:3.2rem; font-weight:450; line-height:1; color:var(--accent); margin-bottom:16px; background:none; width:auto; height:auto; border-radius:0; }
.step__title { font-size:1.4rem; font-weight:550; color:#fff; margin-bottom:10px; }
.step__desc { color:rgba(255,255,255,.68); line-height:1.7; }

/* galeria: ostrzejsze radiusy + hairline */
.gal { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:250px; gap:14px; }
.gal__item { position:relative; margin:0; border-radius:10px; overflow:hidden; box-shadow:0 12px 30px -18px rgba(23,20,16,.25); }
.gal__item::after { content:""; position:absolute; inset:0; border-radius:10px; box-shadow:inset 0 0 0 1px rgba(23,20,16,.07); pointer-events:none; }
.gal__item img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gal__item:hover img { transform:scale(1.05); }
.gal__item--big { grid-column:span 2; grid-row:span 2; }

/* opinie: serif italic, edytorialny cudzyslow, hairline zamiast ciezkich cieni */
.quotes { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; align-items:start; }
.quote { position:relative; margin:0; background:#fff; border:1px solid var(--line); border-radius:12px; padding:30px 34px 34px; box-shadow:0 10px 30px -22px rgba(23,20,16,.2); }
/* cudzyslow w przeplywie (nie absolute) - nigdy nie nachodzi na tekst */
.quote::before { content:"\201E"; display:block; font-family:var(--font-display); font-size:3.6rem; font-weight:500; line-height:.5; margin-bottom:1.1rem; color:color-mix(in srgb,var(--accent) 55%, transparent); }
.quote p { font-family:var(--font-display); font-style:italic; font-size:1.22rem; font-weight:460; line-height:1.5; letter-spacing:0; }
.quote cite { display:flex; align-items:center; gap:12px; margin-top:22px; color:var(--muted); font-style:normal; font-weight:600; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; }
.quote cite::before { content:""; width:26px; height:1px; background:var(--accent); }

/* pasek awaryjny */
.emergency { background:linear-gradient(100deg, var(--accent) 0%, var(--accent-d) 100%); color:#fff; padding:clamp(44px,6vw,68px) 0; }
.emergency__inner { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.emergency__tag { display:inline-block; font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; border:1px solid rgba(255,255,255,.45); padding:6px 14px; border-radius:6px; margin-bottom:12px; background:none; }
.emergency__text { font-family:var(--font-display); font-size:clamp(1.35rem,2.7vw,2rem); font-weight:520; letter-spacing:0; max-width:30ch; }

/* faq: serifowe pytania */
.faq { display:grid; gap:10px; }
.faq__item { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; transition:box-shadow .25s, border-color .25s; }
.faq__item[open] { box-shadow:0 14px 34px -24px rgba(23,20,16,.3); border-color:color-mix(in srgb,var(--accent) 35%, var(--line)); }
.faq__item summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 28px; cursor:pointer; font-family:var(--font-display); font-weight:550; font-size:1.18rem; letter-spacing:-.005em; list-style:none; }
.faq__item summary::-webkit-details-marker { display:none; }
.faq__i { position:relative; width:16px; height:16px; flex-shrink:0; }
.faq__i::before,.faq__i::after { content:""; position:absolute; background:var(--accent); border-radius:2px; transition:.3s var(--ease); }
.faq__i::before { top:7px; left:0; width:16px; height:2px; }
.faq__i::after { top:0; left:7px; width:2px; height:16px; }
.faq__item[open] .faq__i::after { transform:rotate(90deg); opacity:0; }
.faq__a { padding:0 28px 26px; }
.faq__a p { color:var(--muted); line-height:1.75; max-width:62ch; }

/* kontakt: serifowy numer telefonu jako centralny element */
.contact { display:grid; grid-template-columns:1fr 1fr; gap:clamp(44px,6.5vw,88px); align-items:center; }
.contact__phone { display:block; font-family:var(--font-display); font-size:clamp(2.2rem,4.4vw,3.2rem); font-weight:520; color:#fff; letter-spacing:-.01em; margin:14px 0 6px; font-variant-numeric:tabular-nums; transition:color .25s; }
.contact__phone:hover { color:var(--accent); }
.contact__mail { display:block; color:rgba(255,255,255,.82); font-weight:500; margin-bottom:16px; }
.contact__addr { color:rgba(255,255,255,.55); font-size:.9rem; letter-spacing:.02em; }
.contact__form { display:grid; gap:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13); border-radius:14px; padding:34px; backdrop-filter:blur(6px); }
.contact__form input,.contact__form textarea { padding:15px 18px; border:1px solid rgba(255,255,255,.18); border-radius:8px; font:inherit; background:rgba(255,255,255,.07); color:#fff; }
.contact__form input::placeholder,.contact__form textarea::placeholder { color:rgba(255,255,255,.5); }
.contact__form input:focus,.contact__form textarea:focus { outline:none; border-color:var(--accent); background:rgba(255,255,255,.12); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%, transparent); }

/* footer */
.foot { background:color-mix(in srgb,#000 30%, var(--navy)); color:rgba(255,255,255,.7); padding:64px 0; border-top:1px solid rgba(255,255,255,.07); }
.foot__inner { display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; align-items:flex-start; }
.foot__inner > div:first-child p { max-width:52ch; font-size:.92rem; line-height:1.7; color:rgba(255,255,255,.55); }
.brand--foot { color:#fff; margin-bottom:10px; font-size:1.5rem; }
.foot__meta { display:flex; flex-direction:column; gap:8px; text-align:right; }
.foot__meta a { color:rgba(255,255,255,.85); font-weight:600; transition:color .2s; }
.foot__meta a:hover { color:var(--accent); }
.foot__meta span { font-size:.82rem; letter-spacing:.06em; color:rgba(255,255,255,.4); margin-top:6px; }

/* --- podstrona uslugi --- */
.btn--dark { background:var(--navy); color:#fff; }
.btn--dark:hover { background:var(--navy-d); transform:translateY(-2px); }
.svc-nav { border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); }
.svc-nav__inner { display:flex; align-items:center; justify-content:space-between; height:74px; gap:20px; }
.brand--dark { color:var(--navy); }
.svc-nav__links { display:flex; gap:30px; }
.svc-nav__links a { color:var(--muted); font-weight:500; font-size:.95rem; }
.svc-nav__links a:hover { color:var(--ink); }
.svc-hero { padding:clamp(50px,7vw,90px) 0 clamp(40px,5vw,60px); background:var(--soft); }
/* przycisk powrotu (widoczny, nie strzalka przegladarki) */
.svc-back { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy); padding:10px 16px; border:1px solid var(--line); border-radius:9px; background:#fff; margin-bottom:20px; transition:.2s var(--ease); }
.svc-back svg { transition:transform .25s var(--ease); }
.svc-back:hover { border-color:var(--accent); color:var(--accent); }
.svc-back:hover svg { transform:translateX(-3px); }
.crumbs { font-size:.85rem; color:var(--muted); margin-bottom:22px; }
@media (max-width:820px){
  /* na mobile linki nav znikaja -> przycisk powrotu musi byc wyrazny i pelnej szerokosci */
  .svc-back { display:flex; justify-content:center; width:100%; padding:14px; font-size:.85rem; background:var(--navy); color:#fff; border-color:var(--navy); }
  .svc-back:hover { background:var(--navy-d); color:#fff; }
  .crumbs { display:none; }
}
.crumbs a:hover { color:var(--accent); }
.svc-hero__title { font-size:clamp(2.2rem,5vw,3.4rem); margin-bottom:18px; max-width:16ch; }
.svc-hero__lead { font-size:1.15rem; color:var(--muted); max-width:60ch; margin-bottom:26px; }
.svc-grid2 { display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(40px,5vw,64px); align-items:start; }
.svc-card { background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:32px; position:sticky; top:98px; }
.svc-card__phone { font-family:var(--font-display); font-variant-numeric:tabular-nums; }
.svc-card h3 { font-size:1.35rem; margin-bottom:8px; }
.svc-card > p { color:var(--muted); margin-bottom:18px; }
.svc-card__phone { display:block; font-size:1.7rem; font-weight:800; color:var(--navy); letter-spacing:-.02em; }
.svc-card__mail { display:block; color:var(--muted); font-size:.92rem; margin:4px 0 18px; }
@media (max-width:820px){ .svc-grid2 { grid-template-columns:1fr; } .svc-card { position:static; } .svc-nav__links { display:none; } }

/* reveal */
.js-anim .reveal { opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js-anim .reveal.in { opacity:1; transform:none; }

/* responsive */
@media (max-width:980px){
  .split,.contact { grid-template-columns:1fr; }
  .split__media { order:-1; }
  .gal { grid-template-columns:repeat(2,1fr); grid-auto-rows:190px; }
  .svc-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .hero__links,.hero__phone { display:none; }
  .nav-toggle { display:flex; }
  .sticky-call { display:flex; }
  body { padding-bottom:78px; }
  .hero__br { text-align:left; max-width:100%; }
  .hero__sub { margin-left:0; }
  .hero__cta { justify-content:flex-start; }
  .hero__big--br { margin-top:10px; }
  .hero__trust-inner { gap:10px 24px; }
  .svc-grid { grid-template-columns:1fr; }
  .svc:first-child { grid-column:auto; }
  .svc:first-child .svc__title { font-size:1.4rem; }
  .foot__meta { text-align:left; }
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; scroll-behavior:auto;} .js-anim .reveal{opacity:1;transform:none;} }

/* ============================================================
   CINEMATIC LAYER — premium motion (czysty CSS/JS)
   DNA przeniesione z portfolio-demos:
   settle spring -> cubic-bezier(.22,1,.36,1)
   glide expo-out -> cubic-bezier(.16,1,.3,1)
   entry: blur(10px)+y28 -> focus -> settle
   ============================================================ */
:root{
  --settle: cubic-bezier(.22,1,.36,1);
  --glide: cubic-bezier(.16,1,.3,1);
  --expo: cubic-bezier(.16,1,.3,1);
}

/* --- CINEMATIC HERO: parallax tlo (JS ustawia --sy) + powolny zoom + wjazd --- */
.hero::before{
  transform: scale(1.12) translateY(var(--hero-sy, 0px));
  transition: transform .1s linear;
  will-change: transform;
  animation: heroZoom 18s var(--glide) forwards;
}
@keyframes heroZoom{
  from{ transform: scale(1.16) translateY(var(--hero-sy,0px)); }
  to  { transform: scale(1.06) translateY(var(--hero-sy,0px)); }
}
/* cinematyczny wjazd tekstu hero (blur->focus->settle, warstwowo) */
.js-anim .hero__big--tl,
.js-anim .hero__br,
.js-anim .hero__trust-inner > *{
  opacity:0; transform:translateY(30px); filter:blur(12px);
  animation: heroIn 1.1s var(--settle) forwards;
}
.js-anim .hero__big--tl{ animation-delay:.15s; }
.js-anim .hero__br{ animation-delay:.42s; }
.js-anim .hero__trust-inner > *{ animation:heroIn .9s var(--settle) forwards; }
.js-anim .hero__trust-inner > *:nth-child(1){ animation-delay:.70s; }
.js-anim .hero__trust-inner > *:nth-child(2){ animation-delay:.82s; }
.js-anim .hero__trust-inner > *:nth-child(3){ animation-delay:.94s; }
@keyframes heroIn{ to{ opacity:1; transform:none; filter:blur(0); } }

/* subtelny gradient-scrim + ziarnisty vignette dla glebi */
.hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(6,10,18,.5) 100%),
    radial-gradient(110% 90% at 88% 78%, rgba(6,10,18,.42), transparent 55%),
    radial-gradient(90% 60% at 15% 90%, color-mix(in srgb,var(--accent) 20%, transparent), transparent 60%); }

/* scroll-hint — subtelna strzalka w dol, w prawym rogu (nie nachodzi na pasek trust) */
.hero__scroll{ position:absolute; right:32px; bottom:96px; z-index:2; width:24px; height:24px; opacity:.5;
  border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg);
  animation:scrollArrow 1.8s var(--settle) infinite; }
@keyframes scrollArrow{ 0%{opacity:0;transform:rotate(45deg) translate(-4px,-4px)} 50%{opacity:.6} 100%{opacity:0;transform:rotate(45deg) translate(4px,4px)} }
@media (max-width:720px){ .hero__scroll{ display:none; } }

/* --- REVEAL: staged blur->focus->settle (zastepuje zwykly fade z pure-style) --- */
.js-anim .reveal{ opacity:0; transform:translateY(34px); filter:blur(10px);
  transition: opacity .9s var(--settle), transform .9s var(--settle), filter .9s var(--settle); }
.js-anim .reveal.in{ opacity:1; transform:none; filter:blur(0); }
/* stagger: dzieci w siatce wjezdzaja kolejno */
.js-anim .svc-grid .reveal.in{ transition-delay: calc(var(--i, 0) * 80ms); }
.js-anim .quotes .reveal.in,
.js-anim .gal .reveal.in{ transition-delay: calc(var(--i, 0) * 70ms); }

/* --- PHYSICS HOVER: karty uslug z cursor-tilt (JS ustawia --rx/--ry) --- */
.svc{ transform-style:preserve-3d; transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ly,0px)); transition: transform .3s var(--settle), background .35s var(--settle), box-shadow .35s var(--settle), border-color .35s var(--settle); }
.svc__icon, .svc__title, .svc__desc, .svc__more{ transform:translateZ(24px); }
.svc__no{ transform:translateZ(12px); }
/* delikatny glare podazajacy za kursorem */
.svc::after{ content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none; opacity:0; transition:opacity .35s var(--settle);
  background:radial-gradient(120px 120px at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.10), transparent 60%); }
.svc:hover::after{ opacity:1; }

/* --- ANIMOWANY LICZNIK (data-count) w trust/o-nas --- */
.stat-num{ font-variant-numeric:tabular-nums; }

/* --- SMOOTH SCROLL: klasa dodawana przez JS (Lenis-like) --- */
html.has-smooth{ scroll-behavior:auto; }

/* --- MAGNETIC CTA: glowne przyciski lekko ciagnie do kursora (JS --mx/--my) --- */
.btn--solid.btn--lg, .btn--white.btn--lg{ transition: transform .25s var(--settle), background .25s, box-shadow .3s var(--settle); }
.btn--mag{ transform:translate(var(--mx,0), var(--my,0)); }

/* sekcje wjezdzajace dostaja tez subtelny podjazd tla */
.block{ position:relative; }

@media (prefers-reduced-motion:reduce){
  .hero::before{ animation:none; transform:scale(1.05); }
  .js-anim .hero__big--tl,.js-anim .hero__br,.js-anim .hero__trust-inner>*{ animation:none; opacity:1; transform:none; filter:none; }
  .svc{ transform:none; }
  .hero__scroll{ display:none; }
}