/* === MOTYWY: LIGHT (domyślny) + DARK ===================== */
:root{
  color-scheme: light dark;

  /* LIGHT — ivory/beige */
  --bg:#F3F1EC; --surface:#F8F7F3; --card:#FFFFFF; --text:#111;
  --muted:#5C667A; --line:#E3E0D8; --heading:#1B2C57; --accent:#0E3A8A;

  --radius:14px; --radius-lg:18px; --shadow:0 20px 60px rgba(0,0,0,.12);
  --container:1200px;

  --font-display:"Playfair Display", ui-serif, Georgia, serif;
  --font:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;

  /* iOS 100vh */
  --vh: 1vh;

  /* kolor kafelka pod logo (zawsze jasny) */
  --brand-tile:#E9ECEF;

  /* easing pomocnicze */
  --ease-spring: cubic-bezier(.22,1,.36,1);
  --ease-soft:   cubic-bezier(.16,.84,.44,1);
}
:root[data-theme="dark"]{
  --bg:#0B1324; --surface:#111A2C; --card:#0F172A; --text:#E8ECF2;
  --muted:#AAB3C2; --line:#1F2A44; --heading:#9BB1FF; --accent:#7EA2FF;
  --shadow:0 20px 60px rgba(0,0,0,.35);
  --brand-tile:#E9ECEF;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B1324; --surface:#111A2C; --card:#0F172A; --text:#E8ECF2;
    --muted:#AAB3C2; --line:#1F2A44; --heading:#9BB1FF; --accent:#7EA2FF;
    --shadow:0 20px 60px rgba(0,0,0,.35);
    --brand-tile:#E9ECEF;
  }
}

/* === BAZA ================================================ */
*{box-sizing:border-box}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.6;
  max-width:100%;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

.container{width:min(100%,var(--container));margin-inline:auto;padding-inline:16px}
.section{padding:56px 0}
.section-sm{padding:28px 0}

.header-inner{min-height:64px;display:flex;align-items:center;gap:16px}
.nav{display:flex;gap:16px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a{opacity:.9;border-radius:999px;padding:4px 3px}
.nav a[aria-current="page"], .nav a:hover{opacity:1;background: color-mix(in oklab, var(--card) 12%, transparent)}

.badge{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--muted);font-size:.9rem;background:var(--surface)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow)}

.grid{display:grid;gap:16px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

.kpi{font-weight:800;font-size:clamp(1.4rem,1rem + 2vw,2rem)}
.muted{color:var(--muted)}

.footer{border-top:1px solid var(--line);background: color-mix(in oklab, var(--bg) 85%, transparent)}
.footer-grid{display:grid;gap:16px;grid-template-columns:1fr auto}
.flex{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

.hero{min-height:52svh;display:grid;place-items:center;text-align:center}
.hero h1{font-family:var(--font-display);font-size:clamp(36px,2.6vw,56px);margin:8px 0;color:var(--heading)}
.hero p{max-width:820px;margin-inline:auto}

/* === PRZYCISKI ========================================== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:#111;font-weight:700;cursor:pointer;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,0,0,.14)}
.btn:active{transform:translateY(0) scale(.98);box-shadow:0 6px 14px rgba(0,0,0,.12)}
.btn:focus-visible{outline:2px solid color-mix(in oklab, var(--accent) 60%, transparent);outline-offset:2px}

.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 3px 10px color-mix(in oklab, var(--accent) 25%, transparent)}
.btn.primary:hover{box-shadow:0 18px 36px color-mix(in oklab, var(--accent) 32%, transparent)}
.btn.secondary{background:transparent;color:var(--text);border-color:var(--line);padding:8px 12px}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}

/* === HAMBURGER ========================================== */
.nav-toggle{display:none;margin-left:auto;background:transparent;border:0;padding:12px;cursor:pointer}
.nav-toggle span{
  position:relative;display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:background .25s ease
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";position:absolute;left:0;width:24px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s ease,opacity .25s ease
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.nav-toggle:hover span,
.nav-toggle:hover span::before,
.nav-toggle:hover span::after{background:color-mix(in oklab, var(--text) 80%, transparent)}
@media (max-width:900px){
  .nav .pc{display:none !important}
  .nav .btn.secondary.pc{display:none !important}
  .nav-toggle{display:inline-flex}
}
body.nav-open{overflow:hidden}

/* === MOBILE MENU ======================================== */
#mobileNav[hidden], #mobileMenu[hidden]{display:none}
.mobile-menu{position:fixed;inset:0;z-index:90}
.mobile-menu__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity .25s ease;backdrop-filter:blur(2px)}
.mobile-menu__panel{
  position:absolute;inset:0;display:flex;flex-direction:column;
  background:color-mix(in oklab, var(--bg) 82%, #0000);
  backdrop-filter:blur(14px) saturate(140%);
  transform:translateY(-6%);opacity:0;transition:transform .28s ease,opacity .28s ease;border-bottom:1px solid var(--line)
}
.mobile-menu.open .mobile-menu__backdrop{opacity:1}
.mobile-menu.open .mobile-menu__panel{transform:none;opacity:1}
.mobile-menu__panel::before{
  content:"";position:absolute;inset:0 0 auto 0;height:42px;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));mix-blend-mode:soft-light
}
.mobile-menu__top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.mobile-menu__top .logo-link img{height:28px;width:auto;display:block}
.mobile-menu__close{background:transparent;border:1px solid color-mix(in oklab, var(--line) 70%, transparent);border-radius:10px;padding:8px;cursor:pointer}
.mobile-menu__nav{display:flex;flex-direction:column;gap:0;padding:6px 16px 14px}
.mobile-menu__nav a{display:block;padding:14px 6px;font-size:1.05rem;font-weight:600;color:var(--text);border-bottom:1px solid color-mix(in oklab, var(--line) 60%, transparent)}
.mobile-menu__nav a.btn{margin-top:8px;border-radius:12px;border:1px solid var(--line)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* === LOGO TILE ========================================== */
.header .logo-link{
  display:inline-grid;place-items:center;
  width:72px;height:72px;border-radius:16px;
  background:var(--brand-tile);
  border:1px solid color-mix(in oklab, #000 6%, var(--brand-tile));
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  transition:transform .22s var(--ease-spring), box-shadow .22s ease, background .22s ease;
  overflow:hidden;background-clip:padding-box;
}
.header .logo-link .vitrio{display:block;width:92%;height:auto;transition:transform .22s var(--ease-spring)}
.header .logo-link:hover{transform:translateY(-1px);box-shadow:0 16px 36px rgba(0,0,0,.24)}
.header .logo-link:hover .vitrio{transform:scale(1.06)}
@media (max-width:900px){
  .header .logo-link{width:60px;height:60px;border-radius:14px}
  .header .logo-link .vitrio{width:90%}
}

.footer .vitrio_nb{width:80px;height:80px;padding:8px;border-radius:14px;box-shadow:none}

/* === UNIWERSALNE KAFLE + HOVER =========================== */
.card,
.home-card,
.case-card,
.offer-card,
.home-portfolio .teaser-card{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
  will-change: transform;
}
.card:hover, .home-card:hover, .case-card:hover, .offer-card:hover,
.home-portfolio .teaser-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

/* === HERO — szkic (.hero--lines) ======================== */
:root{ --hero-lines-light: url("../img/hero-lines-light.webp"); --hero-lines-dark: url("../img/hero-lines-dark.webp"); --hero-lines-min-h: clamp(560px, 64svh, 900px); --hero-lines-pos-y: 57%; }
.hero--lines{
  position:relative;background:var(--bg);
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  width:100vw;max-width:100vw;min-height:var(--hero-lines-min-h);
  overflow:hidden;isolation:isolate
}
.hero--lines .hero-content{position:relative;z-index:1}
.hero--lines .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:transparent !important}
.hero--lines .hero-bg::before{
  content:"";position:absolute;inset:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center var(--hero-lines-pos-y);mask-position:center var(--hero-lines-pos-y);
  -webkit-mask-size:100% auto;mask-size:100% auto;filter:contrast(1.12) saturate(.92);opacity:.24;transition:opacity .25s ease
}
[data-theme="light"] .hero--lines .hero-bg::before{ -webkit-mask-image:var(--hero-lines-light); mask-image:var(--hero-lines-light); background:linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.32)); opacity:.20; }
[data-theme="dark"]  .hero--lines .hero-bg::before{ -webkit-mask-image:var(--hero-lines-dark);  mask-image:var(--hero-lines-dark);  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.42)); opacity:.28; }
@media (max-width:768px){
  :root{ --hero-lines-min-h: clamp(520px, 60svh, 820px); --hero-lines-pos-y:60%; }
  .hero--lines .hero-bg::before{opacity:.18}
}

/* === PROGRESS BAR ======================================= */
.progress{position:fixed;inset:0 0 auto 0;height:3px;background:#fff3;transform-origin:0 50%;z-index:100}



/* =========================================================
   VITRIO FIX PACK — UI + Sticky Hero + karty + cookies
   ========================================================= */

/* 0) Ogólne „bezpieczniki” */
html, body { overflow-x: hidden; }
:root { --header-h: 80px; } /* JS nadpisze */

/* 1) HEADER — większe logo, sticky, ładny hover-logo */
.header{
  position: sticky; top: 0; z-index: 2000;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px) saturate(140%);
}
.header, .header * { transform: none !important; } /* żeby sticky nie ginął */
.header .logo-link{
  display:inline-grid; place-items:center;
  width:78px; height:78px; border-radius:16px;
  background:var(--brand-tile);
  border:1px solid color-mix(in oklab, #000 6%, var(--brand-tile));
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  transition:transform .22s var(--ease-spring), box-shadow .22s ease;
  overflow:hidden;
}
.header .logo-link .vitrio{ width:92%; height:auto; display:block; transition:transform .22s var(--ease-spring); }
.header .logo-link:hover{ transform:translateY(-1px); box-shadow:0 16px 36px rgba(0,0,0,.24); }
.header .logo-link:hover .vitrio{ transform:scale(1.06); }

@media (max-width:900px){
  .header .logo-link{ width:64px; height:64px; }
  .header .logo-link .vitrio{ width:90%; }
}

/* 2) Apple-like theme switch (estetyczny suwak) */
.theme-switch{ position:relative; display:inline-block; width:52px; height:30px; vertical-align:middle; }
.theme-switch input{ opacity:0; width:0; height:0; }
.theme-switch .slider{
  position:absolute; inset:0; border-radius:30px;
  background: linear-gradient(180deg, #e5e7eb, #cbd5e1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
  transition: background .25s ease, box-shadow .25s ease;
}
.theme-switch .slider::before{
  content:""; position:absolute; width:24px; height:24px; left:3px; top:3px;
  border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25);
  transform: translateX(0); transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.theme-switch input:checked + .slider{
  background: linear-gradient(180deg, #4b5563, #1f2937);
}
.theme-switch input:checked + .slider::before{
  transform: translateX(22px);
}



/* 4) Sekcja „Wirtualny spacer – Kuula” nie jest spłaszczona */
.ratio-16x9{
  position:relative; width:100%;
  aspect-ratio:16/9; /* klucz, zamiast padding-top hacku */
  border-radius:12px; overflow:hidden; background:#000;
}
.ratio-16x9 iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* 5) Odstępy po hero → portfolio (redukcja „dziury”) */
.home-portfolio{ padding-top: 28px; } /* było 56px w .section, robimy lżej */

/* 6) Teasery portfolio – „kwadratowe” 2025 look + hover */
.home-portfolio .teaser-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
@media (max-width:980px){ .home-portfolio .teaser-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .home-portfolio .teaser-grid{ grid-template-columns:1fr; } }

.home-portfolio .teaser-card{
  position:relative; overflow:hidden; border-radius:16px;
  background:var(--card); border:1px solid var(--line);
  padding:12px; transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.home-portfolio .teaser-card:hover{ transform: translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,.14); }

/* całe pole klikalne */
.home-portfolio .teaser-card .card-overlay{
  position:absolute; inset:0; z-index:5; border-radius:inherit;
}

/* kwadratowe media */
.home-portfolio .teaser-media{
  position:relative; width:100%; aspect-ratio:1 / 1; overflow:hidden; border-radius:12px; margin-bottom:10px;
}
.home-portfolio .teaser-media img,
.home-portfolio .teaser-media iframe,
.home-portfolio .teaser-media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; display:block;
}

/* 7) „Co robimy” — też całe kafle klikalne */
.services .home-card{ position:relative; }
.services .home-card .card-overlay{ position:absolute; inset:0; z-index:5; border-radius:inherit; }

/* 8) Footer — kafelek logo jak w headerze (zaokrąglenie) */
.footer .vitrio_nb{
  display:inline-grid; place-items:center;
  width:80px; height:80px; padding:8px; border-radius:14px;
  background:var(--brand-tile);
  border:1px solid color-mix(in oklab, #000 6%, var(--brand-tile));
}

/* 9) Cookie banner — ładny, wycentrowany, ponad contentem */
.cookie-banner{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  z-index: 99999; border:1px solid var(--line);
  background: color-mix(in oklab, var(--card) 92%, var(--bg));
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  border-radius: 14px; padding: 0; width: min(920px, calc(100vw - 24px));
}
.cookie-banner .cookie-inner{
  max-width: 100%; margin:0; padding:14px 16px;
  display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.cookie-banner.hidden{ display:none !important; }

/* 10) Polityka prywatności — TOC sticky + hover kafli */
.policy-wrap{ grid-template-columns:260px 1fr; gap:18px; align-items:start; }
.policy-toc{ position:sticky; top: calc(var(--header-h) + 20px); }
.policy-wrap, .policy-toc, .policy-content{ overflow: visible !important; } /* żeby sticky nie ginęło */

.policy-content .card{
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:clamp(16px,2vw,22px);
  transition: transform .22s ease, box-shadow .22s ease;
}
.policy-content .card:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.18); }

/* 11) Oferta / Case Studies — współczesny grid kart */
.offer-page .cards-grid,
.case-page  .cards-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:none;
}
@media (max-width:1080px){
  .offer-page .cards-grid, .case-page .cards-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .offer-page .cards-grid, .case-page .cards-grid{ grid-template-columns:1fr; }
}
.offer-page .card, .case-page .card{
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:16px; overflow:hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.offer-page .card:hover, .case-page .card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  border-color: transparent;
}

/* 12) Naprawy drobiazgów wizualnych */
.section{ padding: 48px 0; }             /* odrobina ciaśniej globalnie */
.hero{ min-height: 50svh; }              /* bez „odklejania” hero */
.footer{ padding-top: 24px; }            /* więcej powietrza ponad stopką */

/* ==== HERO VIDEO: full-bleed + sticky pin + cover + skala ==== */


/* --- HERO VIDEO --- */
.video-hero{
  position: relative;
  height: 240vh;                      /* długość „pustego scrolla” */
  width: 100vw; max-width: 100vw;
  margin: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.video-hero__pin{
  position: sticky !important;
  top: var(--header-h) !important;
  height: calc(100vh - var(--header-h)) !important;
  overflow: hidden !important;
  background: #000;                   /* tło pod iframe, gdyby mignęło */
  z-index: 0;
}
.video-hero__media{
  position: relative !important;
  width: 100% !important; height: 100% !important;
  transform-origin: 50% 50% !important;
  transform: scale(var(--scale,1)) translateZ(0) !important;
  will-change: transform;
}
/* IFRAME centrowane i skalowane przez JS (żadnych width:100% tutaj!) */
.video-hero__media iframe{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  border: 0;
  background: #000;
}

/* ======= HOTFIX: sticky + hero pin + brak pasów ======= */

/* 1) Usuń blokady sticky z przodków (overflow/contain) */
html, body{
  overflow-y: visible !important;   /* istotne dla sticky w FF */
}
@supports (overflow: clip){
  html, body{ overflow-x: clip !important; } /* zamiast hidden */
}
:where(html, body, main, .video-hero){ contain: none !important; }



/* 3) Sekcja hero – pełna szerokość + „pusty scroll” */
:root{ --header-h: 80px; } /* JS nadpisze realną wartością */
.video-hero{
  position: relative;
  height: 240vh;               /* długość pustego scrolla */
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}

/* Pin przyklejony pod headerem */
.video-hero__pin{
  position: sticky !important;
  top: var(--header-h) !important;
  height: calc(100vh - var(--header-h)) !important;
  overflow: hidden !important;
  background: #f3f1ec;
  z-index: 0;
}

/* Wrapper skaluje się w scrollu (JS zmienia --scale) */
.video-hero__media{
  position: relative !important;
  width: 100% !important; height: 100% !important;
  transform-origin: 50% 50% !important;
  transform: scale(var(--scale,1)) translateZ(0) !important;
  will-change: transform;
}

/* UWAGA: iframe nie dostaje width/height z CSS – robi to JS */
.video-hero__media iframe{
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  border: 0 !important;
  background: #f3f1ec !important;
}
/* === HEADER LOGO – delikatne odbicie na hover/focus === */
@keyframes vitr-bump {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-2px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

.header .logo-link{
  will-change: transform;
  transition: box-shadow .22s ease;
}
.header .logo-link:hover,
.header .logo-link:focus-visible{
  animation: vitr-bump 360ms var(--ease-spring);
  box-shadow: 0 16px 36px rgba(0,0,0,.24);
  outline: none;
}

/* === VIDEO HERO – tło zgodne z motywem + pewny cover === */
/* UWAGA: to nadpisuje wszelkie wcześniejsze "background:#000" itp. */
.video-hero__pin{
  background: var(--bg) !important;   /* jasny: #F3F1EC, ciemny: #0B1324 */
  transition: background .25s ease;   /* ładne przejście przy zmianie motywu */
}

/* żeby nigdy nie było pasów – iframe zawsze "cover" */
.video-hero__media iframe{
  object-fit: cover !important;
  background: transparent !important; /* nic nie przebija */
}

/* === HEADER LOGO – efekt hover taki sam jak kafle === */
.header .logo-link{
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
  will-change: transform;
}

.header .logo-link:hover,
.header .logo-link:focus-visible{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  outline: none;
}
/* === 1) Sticky-safe, ale NIE psuje hovera logo === */
/* Zamiast blokować transform WSZYSTKIM, wykluczamy samo logo */
.header :not(.logo-link):not(.logo-link *){
  transform: none !important;
}

/* === 2) Logo w headerze – taki sam hover jak kafle (odskok + cień) === */
.header .logo-link{
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
  will-change: transform;
  border: 0;                /* usuwa "otoczkę" */
}
.header .logo-link:hover,
.header .logo-link:focus-visible{
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  outline: none;
}

/* === 3) Logo w footerze – bez obwódki + opcjonalny ten sam hover === */
/* Wersja bez kafelka (najprościej usunąć obwódkę): */
.footer .vitrio_nb{
  display:inline-block;
  border:0;                 /* usuwa "otoczkę" */
  background: transparent;  /* bez kafelka pod spodem */
  border-radius:16px;       /* nadal ładnie zaokrąglone */
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.footer .vitrio_nb:hover{ transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.14); }

/* Jeśli jednak chcesz kafelek jak w headerze – podmień powyższy blok na ten:
.footer .vitrio_nb{
  display:inline-grid; place-items:center;
  width:80px; height:80px; padding:8px; border-radius:16px;
  background: var(--brand-tile);
  border: 0;                             
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.footer .vitrio_nb:hover{ transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
*/

/* === 4) Tło pod wideo zależne od motywu (gdybyś jeszcze nie miał) === */
:root{ --video-bg: #F3F1EC; }              /* jasny */
:root[data-theme="dark"]{ --video-bg:#0B1324; }  /* ciemny */
.video-hero__pin{ background: var(--video-bg) !important; }
/* === Oferta & Case Studies – karty w gridzie 2025 look === */
.offer-page .cards-grid,
.case-page  .cards-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
  max-width:1200px;
  margin:0 auto;
}

@media (max-width:1080px){
  .offer-page .cards-grid,
  .case-page  .cards-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}
@media (max-width:640px){
  .offer-page .cards-grid,
  .case-page  .cards-grid{
    grid-template-columns:1fr;
  }
}

/* same karty */
.offer-page .cards-grid .card,
.case-page  .cards-grid .card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:clamp(18px, 2vw, 24px);
  box-shadow:var(--shadow);
  transition:transform .22s ease, box-shadow .22s ease;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.offer-page .cards-grid .card:hover,
.case-page  .cards-grid .card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0,0,0,.14);
}

/* ikona na górze */
.offer-page .cards-grid .card .icon,
.case-page  .cards-grid .card .icon{
  font-size:2rem;
  margin-bottom:8px;
}
/* === Oferta & Case Studies — prostokątne karty pod sobą === */
.offer-page .cards-grid,
.case-page .cards-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}

.offer-page .cards-grid .card,
.case-page .cards-grid .card {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 22px 20px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}

.offer-page .cards-grid .card:hover,
.case-page .cards-grid .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  border-color: transparent;
}
/* Alternatywa: zamień KAŻDEGO bezpośredniego potomka na kartę */
.case-page .case-list > *{
  position: relative;
  padding: clamp(16px, 2.2vw, 22px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform .22s var(--ease-soft), box-shadow .22s var(--ease-soft), border-color .22s var(--ease-soft);
}
.case-page .case-list > *:hover,
.case-page .case-list > *:focus-within{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  border-color: transparent;
}
/* ===== CASE STUDIES — pionowe prostokątne karty ===== */
.case-page .cs-list,
.case-page .case-list,
.case-page .cards-grid,
.case-page .cs-grid{
  display: grid;
  grid-template-columns: 1fr;       /* zawsze jedna kolumna */
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}

.case-page .cs-list > *,
.case-page .case-list > *,
.case-page .cards-grid > *,
.case-page .cs-grid > *{
  position: relative;
  padding: clamp(16px, 2.2vw, 22px);
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform .22s cubic-bezier(.22,1,.36,1),
              box-shadow .22s ease,
              border-color .22s ease;
}

.case-page .cs-list > *:hover,
.case-page .case-list > *:hover,
.case-page .cards-grid > *:hover,
.case-page .cs-grid > *:hover,
.case-page .cs-list > *:focus-within,
.case-page .case-list > *:focus-within,
.case-page .cards-grid > *:focus-within,
.case-page .cs-grid > *:focus-within{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  border-color: transparent;
}

.case-page .cs-list h3,
.case-page .case-list h3,
.case-page .cards-grid h3,
.case-page .cs-grid h3{
  margin: 0 0 6px;
  color: var(--heading);
  font-size: 1.15rem;
}

.case-page .cs-list p,
.case-page .case-list p,
.case-page .cards-grid p,
.case-page .cs-grid p{ margin: 0; }

.case-page .cs-list p + p,
.case-page .case-list p + p,
.case-page .cards-grid p + p,
.case-page .cs-grid p + p{ margin-top: 8px; }
/* === CASE STUDIES — karty pod sobą === */
.case-page .stats-tiles{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:980px;
  margin:0 auto;
}

.case-page .stats-tile{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:clamp(18px,2.2vw,24px);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.case-page .stats-tile:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(0,0,0,.14);
  border-color:transparent;
}

.case-page .stats-tile h2{
  margin:0 0 10px;
  line-height:1.25;
  color:#000;
  font-weight:700;
}

.case-page .stats-tile p{ margin:0 0 8px; }
.case-page .stats-tile p.muted{ color:var(--muted); }
/* === PORTFOLIO — layout & wygląd (dopinka tylko dla /portfolio) ============ */

/* Pasek filtrów */
.portfolio .filters,
.container.section .filters{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin: 8px 0 18px;
}
.portfolio .filters .btn,
.container.section .filters .btn{ padding:8px 12px; border-radius:999px; }
.portfolio .filters .btn.active,
.container.section .filters .btn.active{
  background:var(--accent); border-color:var(--accent); color:#fff;
}

/* Spójne nagłówki sekcji portfolio */
.portfolio-section > h2{
  margin: 24px 0 12px;
  font-family: var(--font-display);
  color: var(--heading);
}

/* --- MASONRY (wizualizacje/foto/rzuty-3d + drony renderowane JS-em) --- */
.portfolio-masonry{
  columns: 3 320px;            /* 3 kolumny; min szer. kafla 320px */
  column-gap: 16px;
}
@media (max-width:1080px){ .portfolio-masonry{ columns: 2 300px; } }
@media (max-width:640px){  .portfolio-masonry{ columns: 1 100%; } }

/* Pojedynczy kafel (u Ciebie .item jest <figure>) */
.portfolio-masonry .item{
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display:block; margin:0 0 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease;
}
.portfolio-masonry .item:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  border-color: transparent;
}

/* Media wewnątrz kafla */
.portfolio-masonry .item img,
.portfolio-masonry .item video{
  display:block; width:100%; height:auto; object-fit:cover; border:0;
}
.portfolio-masonry .item iframe{
  display:block; width:100%; height:auto; border:0;
  aspect-ratio: 16 / 9;        /* pilnowanie proporcji dla osadzonych playerów */
}

/* Podpis pod miniaturą (jeśli występuje) */
.portfolio-masonry .item figcaption{ padding:12px 14px; }
.portfolio-masonry .item h3{ margin:0 0 6px; font-size:1rem; color:var(--heading); }
.portfolio-masonry .item p{ margin:0; font-size:.95rem; color:var(--muted); }

/* — VR: dwie kolumny (zgodnie z Twoim HTML) — */
.portfolio-section[data-section="vr"] .vr-columns{
  display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start;
}
.portfolio-section[data-section="vr"] .vr-col{ display:flex; flex-direction:column; gap:18px; }
@media (max-width:1080px){
  .portfolio-section[data-section="vr"] .vr-columns{ grid-template-columns:1fr; }
}

/* Karty VR (u Ciebie to <article class="card portfolio-item">) */
.portfolio-section[data-section="vr"] .card{
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.portfolio-section[data-section="vr"] .card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  border-color: transparent;
}

/* Wideo/iframe w kartach VR — stabilne 16:9 */
.portfolio-section .ratio-16x9{
  position:relative; width:100%; aspect-ratio:16/9;
  overflow:hidden; border-radius:12px; background:#000;
}
.portfolio-section .ratio-16x9 iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}

/* Drobne kosmetyki ogólne tej podstrony */
.breadcrumbs{ opacity:.9; }
.container.section{ padding-top: 40px; }     /* mniej powietrza u góry */
.footer{ margin-top: 20px; }                 /* nie przyklejaj stopki do treści */



/* ==== FORMULARZE (kontakt) – poprawa kontrastu w light/dark ==== */
input, textarea, select {
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

input:focus, textarea:focus, select:focus {
  outline: 2px solid color-mix(in oklab, var(--accent) 60%, transparent);
  outline-offset: 2px;
}
/* ==== 1) HEADER: łagodny, elegancki hover logo ==== */
/* zero skalowania, tylko subtelny „odskok” jak na kaflach */
.header .logo-link{
  transition: transform .22s var(--ease-soft), box-shadow .22s ease;
  will-change: transform;
}
.header .logo-link:hover{
  transform: translateY(-3px);             /* było zbyt agresywne – teraz delikatne */
  box-shadow: 0 10px 24px rgba(0,0,0,.14); /* spójne z kartami */
}
/* nie podbijamy już obrazka wewnątrz – brak skali = mniej „agresywnie” */
.header .logo-link .vitrio{ transition: none; }

/* ==== 2) POLITYKA: TOC sticky tylko na desktopie; na mobile u góry, bez sticky ==== */
/* desktop – zostaje jak było */
@media (min-width: 901px){
  .policy-toc{
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }
}

/* mobile – TOC na górze sekcji, NIE podąża za scroll-em */
@media (max-width: 900px){
  .policy-wrap{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "toc"
      "content";
    gap: 16px;
  }
  .policy-toc{
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 0 10px 0;
  }
  /* na wszelki wypadek wyłączamy wszelkie klasy typu .is-sticky */
  .is-sticky.policy-toc{ position: static !important; top: auto !important; }
}
/* LOGO w header – bez otoczki, delikatny hover */
.header .logo-link{
  display:inline-grid;
  place-items:center;
  width:78px;
  height:78px;
  border-radius:16px;
  background:#FFF;
  /* brak border */
  box-shadow:0 6px 18px rgba(0,0,0,.12); /* delikatniejszy cień */
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease;
  overflow:hidden;
}

.header .logo-link .vitrio{
  width:92%;
  height:auto;
  display:block;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}

/* Hover – subtelne odbicie */
.header .logo-link:hover{
  transform:translateY(-2px); /* tylko lekko do góry */
  box-shadow:0 12px 28px rgba(0,0,0,.18); /* cień trochę mocniejszy */
}

.header .logo-link:hover .vitrio{
  transform:scale(1.03); /* delikatne powiększenie */
}

/* Na mobile logo ciut mniejsze */
@media (max-width:900px){
  .header .logo-link{ width:64px; height:64px; }
  .header .logo-link .vitrio{ width:90%; }
}
/* Usuń domyślną niebieską otoczkę z logo-link */
.header .logo-link:focus,
.footer .vitrio_nb:focus {
  outline: none !important;
  box-shadow: 0 0 0 0 transparent !important;
}

/* Dodaj własny delikatny efekt focus (np. cień) */
.header .logo-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 40%, transparent);
  border-radius: 16px;
  transition: box-shadow .25s ease;
}
/* ==== Mobile drawer: czytelny CTA w dark mode ==== */
@media (max-width: 900px){
  /* Gdy motyw ustawiony ręcznie na dark */
  [data-theme="dark"] .mobile-menu__nav a.btn,
  /* Gdy systemowy dark (użytkownik nie wymusił light) */
  :root:not([data-theme="light"]) .mobile-menu__nav a.btn{
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 700;
    box-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 28%, transparent);
  }
  [data-theme="dark"] .mobile-menu__nav a.btn:hover,
  :root:not([data-theme="light"]) .mobile-menu__nav a.btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 12px 28px color-mix(in oklab, var(--accent) 38%, transparent);
  }
  [data-theme="dark"] .mobile-menu__nav a.btn:active,
  :root:not([data-theme="light"]) .mobile-menu__nav a.btn:active{
    transform: translateY(0) scale(.98);
    box-shadow: 0 6px 16px color-mix(in oklab, var(--accent) 28%, transparent);
  }
}
/* === Scroll-to-top (mobile-only, elegant) =================== */
:root{
  /* kolory automatycznie spójne z motywem */
  --top-btn-bg: color-mix(in oklab, var(--card) 96%, var(--bg));
  --top-btn-border: color-mix(in oklab, var(--line) 85%, transparent);
  --top-btn-icon: color-mix(in oklab, var(--text) 92%, transparent);
  --top-btn-shadow: 0 10px 24px rgba(0,0,0,.16);
  --top-btn-shadow-hover: 0 16px 36px rgba(0,0,0,.22);
}

#scrollToTopBtn{
  position: fixed;
  right: 14px;
  bottom: 18px;
  z-index: 4000;
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--top-btn-bg);
  border: 1px solid var(--top-btn-border);
  box-shadow: var(--top-btn-shadow);
  color: var(--top-btn-icon);
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(6px) saturate(140%);
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, opacity .2s ease;
  opacity: 0; pointer-events: none; /* domyślnie ukryty */
}
#scrollToTopBtn svg{ display:block; fill: currentColor; }

#scrollToTopBtn.is-visible{
  opacity: 1; pointer-events: auto;
}
#scrollToTopBtn:active{ transform: translateY(1px) scale(.98); }
#scrollToTopBtn:hover{ box-shadow: var(--top-btn-shadow-hover); }

/* delikatna fala jak na kaflach – bardzo subtelna */
#scrollToTopBtn{ transform: translateY(0); }
#scrollToTopBtn:hover{ transform: translateY(-3px); }

/* tylko MOBILE – na desktopie ukryty */
@media (min-width: 901px){
  #scrollToTopBtn{ display:none !important; }
}
/* ===== CENNIK VR 360 – SCOPE ===== */
.pricing-vr360{
  --card-bg: var(--card);
  --card-line: var(--line);
  --accent: var(--accent);
  --muted: var(--muted);
  margin: 40px auto;
  width: min(100%, var(--container));
  padding-inline: 16px;
}
.pricing-vr360__head{ text-align:center; margin-bottom: 18px; }
.pricing-vr360__head h2{ margin:0 0 6px; color: var(--heading); }
.pricing-vr360__head .muted{ color: var(--muted); }

.pricing-vr360__group{ margin: 26px 0; }
.pricing-vr360__group > h3{
  margin: 0 0 12px;
  color: var(--heading);
  font-size: clamp(1.05rem, .9rem + .6vw, 1.25rem);
}

.pricing-vr360__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.pricing-vr360__grid.-packages{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pricing-vr360__grid.-extras{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1080px){
  .pricing-vr360__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pricing-vr360__grid.-packages,
  .pricing-vr360__grid.-extras{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .pricing-vr360__grid,
  .pricing-vr360__grid.-packages,
  .pricing-vr360__grid.-extras{ grid-template-columns: 1fr; }
}

.pricing-vr360__card{
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pricing-vr360__card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  border-color: transparent;
}

.pricing-vr360__card .badge{
  position:absolute;
  top: 12px; right: 12px;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  border-radius: 999px;
  font-weight: 700;
  padding: 3px 10px;
  font-size: .82rem;
}

.pricing-vr360__card h4{
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--heading);
}
.pricing-vr360__card .price{
  margin: 8px 0 12px;
  font-size: 1rem;
}
.pricing-vr360__card .price strong{
  font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem);
}

.pricing-vr360__card .list{
  margin: 0; padding: 0 0 0 1.1em;
  color: var(--muted);
}
.pricing-vr360__card .list li{ margin: 6px 0; }

.pricing-vr360__card p.muted{ color: var(--muted); margin: 6px 0 0; }

.pricing-vr360__foot{
  text-align:center;
  margin-top: 18px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items:center;
}
.pricing-vr360__foot .muted{ color: var(--muted); }
/* ====================== CENNIK — WIZUALIZACJE ====================== */
.pricing-viz{--pv-gap:16px}
.pricing-viz__header{max-width:900px;margin:0 auto 18px}
.pricing-viz__eyebrow{
  display:inline-block;padding:6px 10px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);color:var(--muted);font-weight:600;font-size:.9rem
}
.pricing-viz__header h2{margin:10px 0 6px;color:var(--heading);font-family:var(--font-display)}
.pricing-viz__lead{margin:0;color:var(--muted)}

.pricing-viz__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--pv-gap)
}
@media (max-width:1200px){ .pricing-viz__grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px) { .pricing-viz__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px) { .pricing-viz__grid{grid-template-columns:1fr} }

.pricing-viz__card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s ease, border-color .24s ease
}
.pricing-viz__card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.14);border-color:transparent}

.pricing-viz__card--accent{
  background: color-mix(in oklab, var(--card) 80%, var(--accent) 6%);
  border:1px solid color-mix(in oklab, var(--accent) 26%, var(--line));
}
.pricing-viz__badge{
  align-self:flex-start;margin-top:-2px;margin-bottom:-6px;
  padding:4px 8px;border-radius:999px;background: color-mix(in oklab, var(--accent) 18%, transparent);
  color:#fff;font-weight:700;font-size:.85rem
}

.pricing-viz__card-top h3{margin:0 0 6px;color:var(--heading)}
.pricing-viz__desc{margin:0;color:var(--muted);font-size:.98rem}

.pricing-viz__price{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.pricing-viz__num{font-weight:800;font-size:1.6rem}
.pricing-viz__vat{color:var(--muted);font-size:.95rem}

.pricing-viz__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.pricing-viz__list li{
  position:relative;padding-left:22px
}
.pricing-viz__list li::before{
  content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;border-radius:50%;
  background: color-mix(in oklab, var(--accent) 60%, transparent)
}

.pricing-viz__note{
  font-size:.92rem;color:var(--muted);background: color-mix(in oklab, var(--card) 90%, transparent);
  border:1px dashed var(--line);border-radius:12px;padding:10px
}

.pricing-viz__cta{margin-top:auto;display:flex;gap:8px}
.pricing-viz__foot{max-width:900px;margin:14px auto 0}
/* CENNIK – dopinki pod istniejący system */
#cennik h2, #cennik h3 { margin: 0 0 8px; }
#cennik .card > p { margin: 8px 0 0; }

#cennik .list-tight { 
  margin: 8px 0 0 18px; 
}
#cennik .list-tight li { 
  margin: 6px 0; 
}

/* Delikatne pudełko na cenę */
#cennik .price-box{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: none;
}
/* Cennik dronów – drobne dopinki */
#cennik-drony h2, #cennik-drony h3 { margin: 0 0 8px; }
#cennik-drony ul, #cennik-drony ol { margin: 8px 0 0 18px; }
#cennik-drony li { margin: 6px 0; }
#cennik-drony .card .kpi { font-size: 1.6rem; font-weight: 700; }
/* Cennik – Materiały promocyjne (drobne wyrównania) */
#cennik-materialy-promocyjne h2,
#cennik-materialy-promocyjne h3 { margin: 0 0 8px; }
#cennik-materialy-promocyjne ul,
#cennik-materialy-promocyjne ol { margin: 8px 0 0 18px; }
#cennik-materialy-promocyjne li { margin: 6px 0; }
#cennik-materialy-promocyjne .card .kpi { font-weight: 800; font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); }
/* Cennik: mocniejsza hierarchia nagłówków sekcji */
.pricing-head h1{
  font-family: var(--font-display);
  font-size: clamp(32px, 3.2vw, 48px);
  color: var(--heading);
}

.pricing-section > .flex h2{
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 40px);  /* było ~24–32 */
  color: var(--heading);
  margin: 0;                            /* trzyma w jednej linii z przyciskiem */
}

/* Podnagłówki wewnątrz kart zostawiamy subtelniejsze */
.pricing-section .card h3{
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
  color: var(--text);
}

/* Delikatnie większy tytuł „kafelków” (Do 60 m², itp.), ale wciąż niżej od h2 */
.pricing-section .card h4{
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: .1px;
}

/* Odstęp nad blokami kart po tytule sekcji, żeby nie zlewało się z pakietami */
.pricing-section .pricing-cards,
.pricing-section .pricing-grid{
  margin-top: 18px;
}
/* === Cennik: czytelniejsze nagłówki === */
#cennik h1, #cennik-drony h1, #cennik-materialy-promocyjne h1, #cennik-fotografia h1{
  font-size: clamp(28px, 2.8vw, 40px);
  margin: 0 0 8px;
  color: var(--heading);
}
#cennik h2, #cennik-drony h2, #cennik-materialy-promocyjne h2, #cennik-fotografia h2{
  font-size: clamp(22px, 2.2vw, 30px);
  margin: 0 0 6px;
  color: var(--heading);
}
#cennik h3, #cennik-drony h3, #cennik-materialy-promocyjne h3, #cennik-fotografia h3{
  font-size: clamp(18px, 1.6vw, 22px);
  margin: 0 0 6px;
}

/* listy „zbite” w cenniku */
.list-tight{ margin: 0 0 12px 18px; padding:0; }
.list-tight > li{ margin: 4px 0; }

/* HERO wideo – tło per motyw */
:root{ --hero-video-bg: #F3F1EC; }                /* jasny */
:root[data-theme="dark"]{ --hero-video-bg: #0B1324; }  /* ciemny */
.video-hero__pin{ background: var(--hero-video-bg); }

/* IFRAME w hero – bez czarnych pasów (rozmiar nadaje JS) */
.video-hero__media iframe{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:block; border:0; background:#000;
}

/* === HEADER (final) – sticky + lekki „odskok” logo, bez niebieskiej otoczki === */
.header{
  position: sticky; top: 0; z-index: 3000;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(6px)){
  .header{ backdrop-filter: blur(6px) saturate(140%); }
}
/* ważne dla sticky: nie psuj transformem elementów w headerze, ale pozwól logo na hover */
.header :not(.logo-link):not(.logo-link *){ transform: none !important; }

/* kafelek logo */
.header .logo-link{
  display:inline-grid; place-items:center;
  width:72px; height:72px; border-radius:16px;
  background:#FFF;
  border:0;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
  overflow:hidden;
}
.header .logo-link .vitrio{ width:92%; height:auto; display:block; }

.header .logo-link:hover,
.header .logo-link:focus-visible{
  transform: translateY(-2px);   /* łagodny odskok */
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  outline: none;
}

/* focus – delikatny ring zgodny z motywem */
.header .logo-link:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 40%, transparent);
}

@media (max-width:900px){
  .header .logo-link{ width:64px; height:64px; }
  .header .logo-link .vitrio{ width:90%; }
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
/* już masz to dla portfolio-masonry, ale upewniamy się: */
.portfolio-masonry .item{
  break-inside: avoid;
  display:block;
  margin:0 0 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease;
}
.portfolio-masonry .item:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
  border-color: transparent;
}

.portfolio-masonry .item .ratio-16x9{
  position:relative; width:100%; aspect-ratio:16/9;
  overflow:hidden; background:#000;
}
.portfolio-masonry .item .ratio-16x9 iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block;
}

/* podpisy pod kaflami (spójnie z innymi działami) */
.portfolio-masonry .item figcaption{ padding:12px 14px; }
.portfolio-masonry .item figcaption h3{ margin:0 0 6px; color:var(--heading); }
.portfolio-masonry .item figcaption p{ margin:0; color:var(--muted); }
/* Wszystkie kafle w portfolio */
.portfolio-masonry .item {
  break-inside: avoid;
  display: block;
  margin: 0 0 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform .22s cubic-bezier(.22,1,.36,1), 
              box-shadow .22s ease, 
              border-color .22s ease;
}

/* Hover efekt */
.portfolio-masonry .item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
  border-color: transparent;
}

/* Obrazki wewnątrz kafli */
.portfolio-masonry .item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.portfolio-masonry .item img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Nagłówki sekcji portfolio wyrównane do siatki */
.portfolio-section > h2{
  max-width: var(--container);
  margin: 24px auto 12px;
  padding: 0 16px;
}

/* Siatka kafli wycentrowana i nie „na całą ścianę” */
.portfolio-masonry{
  width: min(100%, var(--container));
  margin: 0 auto;                 /* centrowanie */
  column-gap: 16px;
}

/* Upewniamy się, że obrazki/iframe ładnie wchodzą w kafel */
.portfolio-masonry .item{
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.portfolio-masonry .item img,
.portfolio-masonry .item iframe{
  display:block; width:100%; height:auto; border:0;
}
/* Sekcja */
.tech-stack { text-align:center; }

/* Siatka logotypów */
.tool-logos{
  display:grid;
  grid-template-columns:repeat(4,minmax(140px,1fr));
  gap:18px;
  padding:0; margin:18px 0 0; list-style:none;
}

.tool{
  background:#fff;               /* dostosuj do motywu */
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:22px;
  display:grid; place-items:center;
  transition:transform .2s ease, box-shadow .2s ease;
}

.tool img{
  max-width:160px;               /* ujednolicenie szerokości */
  max-height:44px;               /* ujednolicenie wysokości */
  width:auto; height:auto;
  object-fit:contain;
}

/* Hover */
.tool:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
}

/* Responsywność */
@media (max-width: 900px){
  .tool-logos{ grid-template-columns:repeat(2,minmax(160px,1fr)); }
}
@media (max-width: 480px){
  .tool-logos{ grid-template-columns:1fr; }
}

/* (Opcjonalnie) wersja mono – spójny look na różnym tle */
/*
.tool img{ filter:grayscale(1) contrast(1.05); opacity:.9; }
.tool:hover img{ filter:none; opacity:1; }
*/
.tool img[src*="assets/img/logo_3dvista_white_140.png"] {
  background: black; /* żeby nie zlewał się z cieniem */
  border: 1px solid #000;
  border-radius: 6px;       /* zaokrąglenie dopasuj */
  padding: 4px;             /* żeby tekst nie dotykał krawędzi */
  box-shadow: 0 0 6px rgba(0,0,0,.15);
}
/* nakładka może przykrywać wszystko – przesuń ją pod mini-pano */
.card { position: relative; }
.card .card-overlay { position:absolute; inset:0; z-index:1; }

/* mini panorama ponad nakładką, interaktywna */
#pano { position: relative; z-index: 2; }
.card { position: relative; }
.card .card-overlay { position:absolute; inset:0; z-index:1; }
#pano { position: relative; z-index: 2; } /* viewer nad overlayem */
/* karta jest linkiem – overlay nie może przykrywać mini panoramy */
.card { position: relative; }
.card .card-overlay { position: absolute; inset: 0; z-index: 1; }

/* mini panorama nad overlayem + w pełni interaktywna */
#pano { position: relative; z-index: 2; }
#pano, #pano * { pointer-events: auto !important; }

/* najprościej: wyłącz overlay w całej karcie (jeśli ok) */
/* .card .card-overlay { pointer-events: none; } */
/* karta jest linkiem na całości – niech overlay NIE przykrywa mini panoramy */
.card{ position: relative; }
.card .card-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;               /* pod spodem */
}

/* mini panorama ma priorytet i pełną interaktywność */
#pano{
  position: relative;
  z-index: 2;               /* nad overlayem */
}
#pano, #pano *{
  pointer-events: auto !important;
}
/* tylko w karcie z mini-panorama – overlay ma nie przejmować eventów */
.home-card--pano .card-overlay {
  pointer-events: none;         /* karta przestaje być „cała klikalna” */
}

/* viewer ma być nad wszystkim i interaktywny */
#pano {
  position: relative;
  z-index: 2;
}
#pano, #pano * {
  pointer-events: auto !important;
}
/* szybki placeholder tła (mini) */
#pano{
  background: #f4f4f4 center/cover no-repeat url('/assets/pano/dom-emila-mini.webp');
  border-radius: 10px;
  overflow: hidden;
  min-height: 200px;
}

/* overlay karty nie może przykrywać viewer’a */
.home-card--pano .card-overlay { pointer-events: none; }
#pano, #pano * { pointer-events: auto !important; }
/* upewnij się, że karta ma kontekst pozycjonowania */
.card { position: relative; }

/* TYLKO w karcie z mini panoramą overlay ma nie łapać eventów */
.home-card--pano .card-overlay{
  position: absolute;   /* nadal zakrywa całą kartę wizualnie */
  inset: 0;
  z-index: 1;           /* ale pod panoramą */
  pointer-events: none; /* i nie przejmuje klików/dragów */
}

/* mini-panorama zawsze nad overlayem i interaktywna */
#pano{
  position: relative;
  z-index: 2;
}
#pano, #pano *{
  pointer-events: auto !important;
}
#pano{
  background:#f4f4f4 center/cover no-repeat url('/assets/pano/dom-emila-mini.webp');
  border-radius:10px;
  overflow:hidden;
}
/* tylko ta karta: overlay nie łapie klików */
.home-card--pano .card-overlay{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;                /* <-- kluczowe */
}

/* viewer ponad overlayem + przejmuje gesty */
#pano{
  position:relative; z-index:2;
  touch-action:none;                  /* pomaga na mobile/Edge */
}
#pano, #pano *{ pointer-events:auto !important; }
.home-card--dron {
  position: relative;
  background-image: url("/assets/img/tło.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  border: none;
  overflow: hidden;
}

.home-card--dron::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* delikatne przyciemnienie dla czytelności tekstu */
  z-index: 0;
}

.home-card--dron h3,
.home-card--dron p,
.home-card--dron a {
  position: relative;
  z-index: 1;
  color: #fff;
}
/* Styl przycisku "Oferta" na karcie Dron / FPV */
.home-card--dron .btn.ghost {
  background: rgba(255, 255, 255, 0.15); /* półprzezroczyste tło */
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: #fff;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

/* Efekt po najechaniu */
.home-card--dron .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: #fff;
  transform: scale(1.05);
}
/* --- KARTA PROMO (tekst + obraz sprzętu) --- */
.home-card--promo {
  position: relative;
  /* Zapas miejsca na grafikę – rośnie wraz z szerokością karty */
  padding-bottom: clamp(140px, 28vw, 240px);
  overflow: hidden;
}

/* Obraz: responsywny i wycentrowany */
.home-card--promo .promo-img {
  position: absolute;
  left: 50%;
  bottom: 70px;                     /* trzyma obraz przy dolnej krawędzi */
  transform: translateX(-50%);
  width: clamp(220px, 122%, 460px);  /* skaluje się z kartą */
  height: auto;                     /* zachowanie proporcji */
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
  transition: transform .4s ease, opacity .3s ease;
}

/* Delikatny podjazd na hover */
.home-card--promo:hover .promo-img {
  transform: translateX(-50%) scale(1.03);
}

/* Mobile – więcej miejsca na obraz i odrobinę mniejsza szerokość */
@media (max-width: 640px) {
  .home-card--promo {
    padding-bottom: clamp(180px, 42vw, 280px);
  }
  .home-card--promo .promo-img {
    bottom: 12px;
    width: clamp(220px, 82%, 420px);
  }
}