/* =====================================================================
   SZLAKIEM KRÓWKI SZCZECIŃSKIEJ — styles.css
   Landing page marki „Krówka Szczecińska".
   Oparte na Design Systemie (tokeny 1:1 z broszury). Bez build-stepu.
   Sekcje: tokeny → reset → utils → header → hero → sekcje → footer →
           animacje (gated JS) → responsywność.
   ===================================================================== */

/* =========================== 1. TOKENY ============================== */
:root{
  /* Pomarańcz marki (UI) */
  --orange-50:#FDF2E8; --orange-100:#FADFC5; --orange-200:#F6C293;
  --orange-300:#F2A461; --orange-400:#EE8836; --orange-500:#E86A0A;
  --orange-600:#C85908; --orange-700:#A2470A; --orange-800:#7C370B; --orange-900:#5C2A0C;
  /* Neutralne (ciepły grafit) */
  --ink-0:#FFFFFF; --ink-50:#FBFAF8; --ink-100:#F2F1EE; --ink-200:#E4E2DD;
  --ink-300:#C9C6BF; --ink-400:#A6A29A; --ink-500:#7C7871; --ink-600:#57544E;
  --ink-700:#3A3835; --ink-800:#282827; --ink-900:#1A1A19;
  /* Assety marki + akcenty */
  --logo-orange:#ED7E09; --logo-pink:#EA5F85; --mascot-yellow:#FCD382;
  --green-500:#3DA645; --green-600:#2E7E34; --bronze-500:#6A5C4F;
  --patina-500:#2E7B58; --wisteria-500:#8E7A96; --magnolia-500:#E9AEC1;
  --candy-red:#E30613;

  /* Role semantyczne */
  --bg:var(--ink-50); --bg-dark:var(--ink-800); --surface:var(--ink-0);
  --surface-muted:var(--ink-100); --border:var(--ink-300);
  --text:var(--ink-900); --text-muted:var(--ink-500); --on-dark:var(--ink-0);
  --primary:var(--orange-500); --primary-hover:var(--orange-600); --on-primary:#fff;

  /* Typografia */
  --font-display:"Archivo","Arial Black",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fw-reg:400; --fw-med:500; --fw-semi:600; --fw-bold:700; --fw-black:900;
  --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --text-2xl:clamp(1.6rem,1.3rem + 1.4vw,2.25rem);
  --text-3xl:clamp(2.1rem,1.5rem + 2.6vw,3.25rem);
  --text-4xl:clamp(2.8rem,1.8rem + 4.6vw,5rem);
  --text-hero:clamp(2.55rem,1.2rem + 7vw,7.5rem);

  /* Spacing / promienie / cienie */
  --gutter:clamp(1rem,.5rem + 3vw,2.5rem);
  --section-y:clamp(4rem,2rem + 8vw,9rem);
  --container:1200px; --container-wide:1440px;
  --r-md:12px; --r-lg:20px; --r-xl:32px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(26,26,25,.06),0 1px 3px rgba(26,26,25,.08);
  --shadow-md:0 6px 18px rgba(26,26,25,.08),0 2px 5px rgba(26,26,25,.06);
  --shadow-lg:0 22px 48px rgba(26,26,25,.14),0 8px 16px rgba(26,26,25,.08);
  --shadow-orange:0 12px 30px rgba(232,106,10,.32);

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.32s;
}

/* =========================== 2. RESET =============================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Gdy JS steruje smooth-scrollem (Lenis), wyłączamy natywny, by się nie gryzły */
html.lenis{scroll-behavior:auto}
html,body{max-width:100%;overflow-x:hidden} /* twardy zakaz poziomego scrolla */
body{
  font-family:var(--font-body); font-size:var(--text-base); line-height:1.6;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--font-display); line-height:1.05; letter-spacing:-.02em; font-weight:var(--fw-black)}

/* Dostępność: widoczny focus dla nawigacji klawiaturą */
:focus-visible{outline:3px solid var(--orange-400); outline-offset:3px; border-radius:4px}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--ink-900); color:#fff;
  padding:.75rem 1.25rem; z-index:1000; border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ========================= 3. UTILITIES ============================= */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.container-wide{max-width:var(--container-wide)}
.section{padding-block:var(--section-y)}
.eyebrow{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-body);
  font-size:var(--text-sm); font-weight:var(--fw-bold); text-transform:uppercase;
  letter-spacing:.08em; color:var(--orange-600); margin-bottom:1rem}
.eyebrow::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--orange-500); flex:none}
.eyebrow.on-dark{color:var(--orange-400)}
.section-title{font-size:var(--text-3xl); max-width:16ch}
.section-title .o{color:var(--orange-500)}
.section-lead{font-size:var(--text-lg); color:var(--text-muted); max-width:56ch; margin-top:1rem}
.text-o{color:var(--orange-500)}

/* Przyciski */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-body); font-weight:var(--fw-semi); font-size:var(--text-base);
  padding:.95rem 1.75rem; border-radius:var(--r-pill); white-space:nowrap; transition:transform var(--dur) var(--ease),
  background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
  will-change:transform}
.btn-primary{background:var(--primary); color:var(--on-primary); box-shadow:var(--shadow-orange)}
.btn-primary:hover{background:var(--primary-hover); transform:translateY(-3px)}
.btn-ghost{border:1.5px solid var(--border); color:var(--text)}
.btn-ghost:hover{border-color:var(--orange-500); color:var(--orange-600); transform:translateY(-3px)}
.btn-dark{background:#fff; color:var(--ink-900)}
.btn-dark:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.btn-lg{padding:1.1rem 2.2rem; font-size:var(--text-lg)}

/* Sygnatury marki: numerowany bąbel + pinezka */
.badge-num{display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; background:var(--orange-500); color:#fff;
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:1.2rem; flex:none}

/* ========================== 4. HEADER ============================== */
.header{position:fixed; inset:0 0 auto 0; z-index:100; padding-block:.85rem;
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), padding var(--dur) var(--ease)}
.header.scrolled{background:rgba(251,250,248,.85); backdrop-filter:blur(12px);
  box-shadow:var(--shadow-sm); padding-block:.5rem}
.header .container{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.brand img{height:74px; width:auto; transition:height var(--dur) var(--ease)}
.header.scrolled .brand img{height:58px}
.nav{display:flex; align-items:center; gap:2rem}
.nav a{font-weight:var(--fw-med); font-size:var(--text-base); color:var(--ink-700);
  position:relative; padding:.25rem 0; white-space:nowrap}
.nav{flex-shrink:0}
.nav a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--orange-500); transition:width var(--dur) var(--ease)}
.nav a:hover{color:var(--ink-900)}
.nav a:hover::after{width:100%}
/* Link tekstowy CTA w nawigacji (zamiast wypełnionego buttona) */
.nav a.nav__cta{color:var(--orange-600); font-weight:var(--fw-semi)}
.nav a.nav__cta:hover{color:var(--orange-700)}
.header-cta{display:flex; align-items:center; gap:.75rem}
/* Hamburger (mobile) */
.nav-toggle{display:none; width:46px; height:46px; border-radius:12px; border:1.5px solid var(--border);
  align-items:center; justify-content:center}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:""; display:block;
  width:22px; height:2px; background:var(--ink-900); transition:.3s var(--ease); position:relative}
.nav-toggle span::before{position:absolute; top:-7px}
.nav-toggle span::after{position:absolute; top:7px}
.nav-open .nav-toggle span{background:transparent}
.nav-open .nav-toggle span::before{transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle span::after{transform:translateY(-7px) rotate(-45deg)}

/* ============================ 5. HERO ============================== */
.hero{position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:7.5rem; overflow:hidden;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(142,122,150,.28), transparent 55%),
    radial-gradient(90% 80% at 10% 90%, rgba(233,174,193,.25), transparent 55%),
    var(--ink-50);}
.hero__inner{display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center; width:100%}
.hero__eyebrow{color:var(--orange-600)}
.hero h1{font-size:var(--text-hero); margin:.4rem 0 1rem; overflow-wrap:break-word; hyphens:auto}
.hero h1 .o{color:var(--orange-500)}
.hero__sub{font-size:var(--text-xl); color:var(--ink-700); max-width:40ch; font-weight:var(--fw-med)}
.hero__actions{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem}
.hero__meta{display:flex; gap:1.75rem; margin-top:2.5rem; flex-wrap:wrap}
.hero__meta div{display:flex; flex-direction:column}
.hero__meta b{font-family:var(--font-display); font-size:var(--text-2xl); color:var(--orange-500); line-height:1}
.hero__meta span{font-size:var(--text-sm); color:var(--text-muted)}
.hero__visual{position:relative; display:flex; justify-content:center}
.hero__visual .disc{position:absolute; inset:8% 6%; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, #fff, rgba(255,255,255,0) 70%);
  box-shadow:var(--shadow-lg); z-index:0}
.hero__fig{position:relative; z-index:1; max-height:66svh; width:auto;
  filter:drop-shadow(0 30px 40px rgba(26,26,25,.28))}
/* dekoracyjne bąble szlaku wokół bohatera */
.hero__pin{position:absolute; z-index:2; width:46px; height:46px}
.scroll-cue{position:absolute; left:50%; bottom:1.5rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.4rem; color:var(--text-muted);
  font-size:var(--text-sm); letter-spacing:.05em}
.scroll-cue .mouse{width:24px; height:38px; border:2px solid var(--ink-400); border-radius:14px; position:relative}
.scroll-cue .mouse::after{content:""; position:absolute; left:50%; top:7px; width:4px; height:8px;
  background:var(--ink-400); border-radius:2px; transform:translateX(-50%); animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:1; top:7px}70%{opacity:0; top:18px}100%{opacity:0}}

/* ========================= 6. O PROJEKCIE ========================== */
.about__grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,4vw,4.5rem); align-items:center}
.about__body p{margin-top:1rem; color:var(--ink-700)}
.about__body p:first-of-type{margin-top:1.5rem}
.about__media{position:relative; display:flex; align-items:center; justify-content:center}
.about__candy{position:relative; z-index:2; width:100%; max-width:520px; margin-inline:auto;
  filter:drop-shadow(0 24px 34px rgba(26,26,25,.22))}
.about__blob{position:absolute; inset:8% 4%; background:var(--orange-50); border-radius:46% 54% 60% 40%; z-index:1}

/* ========================== KATALOG =============================== */
.catalog{background:var(--ink-100)}
.catalog__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4.5rem); align-items:center}
.catalog__media img{width:100%; border-radius:var(--r-lg); box-shadow:var(--shadow-lg)}
.catalog__cta{display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; margin-top:2rem}
.catalog__hint{font-size:var(--text-sm); color:var(--text-muted)}

/* ========================= 7. STATYSTYKI =========================== */
.stats{background:var(--ink-900); color:var(--on-dark)}
.stats .eyebrow{color:var(--orange-400)}
.stats__grid{display:grid; grid-template-columns:repeat(5,1fr); gap:2rem; margin-top:2.5rem}
.stat{border-left:2px solid rgba(255,255,255,.14); padding-left:1.1rem}
.stat .num{font-family:var(--font-display); font-weight:var(--fw-black);
  font-size:clamp(2.2rem,1.4rem + 2.6vw,3.4rem); color:var(--orange-500); line-height:1;
  letter-spacing:-.02em}
.stat .cap{margin-top:.6rem; font-size:var(--text-sm); color:rgba(255,255,255,.7)}

/* ========================== 8. GALERIA ============================= */
.gallery__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem}
.fig-card{position:relative; background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md); overflow:hidden; transition:transform var(--dur) var(--ease),
  box-shadow var(--dur) var(--ease)}
.fig-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.fig-card__ph{position:relative; aspect-ratio:1/1; background:
   radial-gradient(circle at 50% 42%, var(--ink-0), var(--ink-100) 78%); overflow:hidden}
.fig-card__ph img{position:absolute; inset:8% 10% auto 10%; width:80%; height:84%;
  object-fit:contain; object-position:bottom center; transition:transform .5s var(--ease)}
.fig-card:hover .fig-card__ph img{transform:scale(1.06) rotate(-1deg)}
.fig-card__ph .badge-num{position:absolute; top:12px; left:12px; width:38px; height:38px; font-size:1.05rem;
  box-shadow:var(--shadow-sm)}
.fig-card__txt{padding:1rem 1.2rem 1.3rem}
.fig-card__txt h3{font-size:var(--text-lg); font-weight:var(--fw-bold); letter-spacing:-.01em}
.fig-card__loc{display:flex; align-items:center; gap:.35rem; color:var(--orange-600);
  font-weight:var(--fw-semi); font-size:var(--text-sm); margin-top:.35rem}
.fig-card__loc svg{width:14px; height:14px; flex:none}

/* ============================ 9. SZLAK ============================= */
.trail{background:var(--ink-800); color:var(--on-dark); position:relative; overflow:hidden}
.trail .eyebrow{color:var(--orange-400)}
.trail__head{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap}
.trail__map{position:relative; margin-top:3rem}
.trail__map svg{width:100%; height:auto; overflow:visible}
.trail__path{fill:none; stroke:var(--orange-500); stroke-width:3; stroke-linecap:round; stroke-dasharray:10 13}
.trail__pin{fill:var(--orange-500)}
.trail__pin-dot{fill:#fff}
.trail__note{margin-top:2rem; color:rgba(255,255,255,.7); max-width:52ch}

/* =========================== 10. AR =============================== */
.ar__grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,4vw,4rem); align-items:center}
/* Osadzony, interaktywny prototyp aplikacji (iframe z ar.html) */
.ar__demo{justify-self:center; width:100%; display:flex; justify-content:center}
.ar__frame{width:min(430px,100%); height:min(880px,86vh); border:0; background:transparent;
  display:block}
.ar__features{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:2rem}
.feature{background:var(--surface); border:1px solid var(--ink-200); border-radius:var(--r-md); padding:1.25rem}
.feature .ic{width:40px; height:40px; border-radius:10px; background:var(--orange-50); color:var(--orange-600);
  display:flex; align-items:center; justify-content:center; margin-bottom:.75rem}
.feature h3{font-size:var(--text-base); font-weight:var(--fw-bold)}
.feature p{font-size:var(--text-sm); color:var(--text-muted); margin-top:.3rem}

/* ========================= 11. PODCAST ============================ */
.podcast{background:var(--orange-50)}
.podcast__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem}
.ep{display:flex; flex-direction:column; background:var(--surface); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-md); transition:transform var(--dur) var(--ease)}
.ep:hover{transform:translateY(-5px)}
.ep__thumb{aspect-ratio:16/9; position:relative; background:linear-gradient(135deg,var(--ink-800),var(--ink-600));
  display:flex; align-items:center; justify-content:center; overflow:hidden}
/* zdjęcie kadru w tle miniatury */
.ep__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.ep:hover .ep__img{transform:scale(1.05)}
/* przyciemnienie pod kontrolką, by pomarańczowy „play" był czytelny */
.ep__thumb::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(26,26,25,.15),rgba(26,26,25,.42))}
.ep__thumb .play{position:relative; z-index:2; width:60px; height:60px; border-radius:50%;
  background:var(--orange-500); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-orange)}
.ep__thumb .yt{position:absolute; z-index:2; bottom:10px; right:10px; font-size:.7rem; font-weight:600; color:#fff;
  background:rgba(0,0,0,.55); padding:3px 8px; border-radius:6px}
.ep__body{padding:1.1rem 1.25rem 1.4rem}
.ep__eyebrow{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--orange-600); font-weight:700}
.ep__body h3{font-size:var(--text-lg); font-weight:var(--fw-bold); margin:.3rem 0 .5rem}
.ep__body p{font-size:var(--text-sm); color:var(--text-muted)}
.ep__link{margin-top:.9rem; font-weight:var(--fw-semi); color:var(--orange-600); display:inline-flex; gap:.35rem; align-items:center}

/* ========================== 12. DLA KOGO =========================== */
.aud__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem}
.aud{background:var(--surface); border:1px solid var(--ink-200); border-radius:var(--r-lg);
  padding:1.75rem; transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
  box-shadow var(--dur) var(--ease)}
.aud:hover{transform:translateY(-5px); border-color:var(--orange-200); box-shadow:var(--shadow-md)}
.aud__ic{width:52px; height:52px; border-radius:14px; background:var(--orange-500); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem}
.aud__ic svg{width:26px; height:26px}
.aud h3{font-size:var(--text-xl); font-weight:var(--fw-bold)}
.aud p{color:var(--text-muted); margin-top:.5rem; font-size:var(--text-base)}
.aud ul{margin-top:1rem; display:flex; flex-direction:column; gap:.5rem}
.aud li{display:flex; gap:.6rem; font-size:var(--text-sm); color:var(--ink-700)}
.aud li svg{width:18px; height:18px; color:var(--green-500); flex:none; margin-top:2px}

/* =========================== 13. KOSZTY =========================== */
.costs__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center}
.cost-table{display:flex; flex-direction:column; gap:.75rem; margin-top:1.5rem}
.cost-row{display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:var(--surface); border:1px solid var(--ink-200); border-radius:var(--r-md); padding:1.1rem 1.4rem}
.cost-row .label{font-weight:var(--fw-semi)}
.cost-row .label small{display:block; font-weight:400; color:var(--text-muted); font-size:.8rem; margin-top:.2rem}
.cost-row .amount{font-family:var(--font-display); font-weight:var(--fw-black);
  font-size:var(--text-xl); color:var(--ink-900); white-space:nowrap}

/* =========================== 14. CYTAT ============================ */
.quote{background:var(--ink-900); color:var(--on-dark)}
.quote__inner{max-width:60ch}
.quote .mark{font-family:var(--font-display); font-weight:var(--fw-black); color:var(--orange-500);
  font-size:5rem; line-height:.5}
.quote blockquote{font-family:var(--font-display); font-weight:var(--fw-bold);
  font-size:var(--text-2xl); line-height:1.25; letter-spacing:-.01em; margin-top:1rem}
.quote blockquote .o{color:var(--orange-500)}
.quote cite{display:block; margin-top:1.5rem; font-style:normal; color:rgba(255,255,255,.6); font-size:var(--text-sm)}

/* ============================ 15. CTA ============================= */
.cta-final{position:relative; text-align:center; overflow:hidden;
  background:linear-gradient(135deg,var(--orange-500),var(--orange-600));}
.cta-final h2{color:#fff; font-size:var(--text-4xl); max-width:18ch; margin-inline:auto}
.cta-final p{color:rgba(255,255,255,.9); font-size:var(--text-lg); max-width:52ch; margin:1rem auto 2rem}
.cta-final .btn-dark{background:#fff}

/* =========================== 16. FOOTER =========================== */
.footer{background:var(--ink-900); color:rgba(255,255,255,.7); padding-block:3.5rem 2rem}
.footer__top{display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-start}
.footer__brand img{height:76px; width:auto; margin-bottom:1rem}
/* width:auto zachowuje proporcje (bez tego atrybuty width/height z HTML zniekształcały logo) */
/* wersja logo dla stopki (Logotyp_Krowka.png) ma własną białą otoczkę i biały ® */
.footer__brand p{max-width:42ch; font-size:var(--text-sm)}
/* tekst pod logotypem — wiersze jeden pod drugim, ostatni jako tagline */
.footer__tagline{line-height:1.75}
.footer__tagline em{display:inline-block; margin-top:.35rem; font-style:italic;
  font-weight:var(--fw-med); color:var(--orange-400)}
.footer__cols{display:flex; gap:3rem; flex-wrap:wrap}
.footer__col h4{font-family:var(--font-body); font-size:var(--text-sm); text-transform:uppercase;
  letter-spacing:.08em; color:#fff; margin-bottom:.9rem}
.footer__col a{display:block; padding:.25rem 0; font-size:var(--text-sm); transition:color .2s}
.footer__col a:hover{color:var(--orange-400)}
.footer__bottom{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:var(--text-sm)}

/* ==================== 17. ANIMACJE (gated JS) =====================
   Stany startowe ukrywamy TYLKO gdy działa JS i użytkownik nie prosił
   o ograniczenie ruchu. Bez JS / z reduced-motion treść jest widoczna. */
html.js:not(.reduced) [data-reveal]{opacity:0; transform:translateY(28px)}
html.js:not(.reduced) [data-reveal="left"]{transform:translateX(-32px)}
html.js:not(.reduced) [data-reveal="scale"]{transform:scale(.94)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  html.js [data-reveal]{opacity:1 !important; transform:none !important}
}

/* ====================== 18. RESPONSYWNOŚĆ ========================= */
@media (max-width:1024px){
  .stats__grid{grid-template-columns:repeat(3,1fr); row-gap:2.25rem}
  .gallery__grid{grid-template-columns:repeat(3,1fr)}
  .aud__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  /* Nawigacja mobilna: panel wysuwany */
  .nav-toggle{display:flex}
  .nav{position:fixed; inset:0 0 0 auto; width:min(320px,86vw); flex-direction:column;
    align-items:flex-start; justify-content:center; gap:1.5rem; padding:2rem 2rem 4rem;
    background:var(--ink-0); box-shadow:var(--shadow-lg); transform:translateX(105%);
    transition:transform .4s var(--ease); z-index:99}
  .nav-open .nav{transform:translateX(0)}
  .nav a{font-size:var(--text-xl)}
  .header-cta .btn:not(.nav-toggle){display:none} /* CTA w headerze chowamy, jest w menu */
  .nav .btn{display:inline-flex; width:100%}
  .hero__inner,.about__grid,.ar__grid,.costs__grid,.catalog__grid{grid-template-columns:1fr}
  .catalog__media{order:-1} /* obraz katalogu nad tekstem na mobile */
  .hero__visual{order:-1; margin-bottom:1rem}
  .hero__fig{max-height:44svh}
  .gallery__grid{grid-template-columns:repeat(2,1fr)}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .podcast__grid,.aud__grid{grid-template-columns:1fr}
  .about__mascot{width:44%}
}
@media (max-width:520px){
  /* Telefon: wszystko w jednej kolumnie, przyciski na całą szerokość */
  .gallery__grid,.stats__grid{grid-template-columns:1fr}
  .hero__actions,.cta-final .btn,.hero__actions .btn{width:100%}
  .hero__actions .btn{width:100%}
  .btn{width:100%}
  .header-cta .nav-toggle{width:46px} /* wyjątek: hamburger nie na całą szerokość */
  .hero__meta{gap:1.25rem}
  .brand img{height:58px} /* logo nieco mniejsze na telefonie */
  .header.scrolled .brand img{height:50px}
  .fig-card__ph .badge-num{width:34px; height:34px; font-size:.95rem}
  .cost-row{flex-direction:column; align-items:flex-start; gap:.5rem}
}