/* ============================================================
   INNER HOME — Moment Wyboru  |  Design system (shared)
   Vibe: Editorial Luxury (warm cream, espresso, terracotta, sage)
   Używany przez index.html (lander) i oferta.html (strona 2).
   ============================================================ */
:root{
  /* Palette */
  --cream:        #F7F1E7;
  --cream-deep:   #EFE6D6;
  --paper:        #FBF7EF;
  --espresso:     #2E2620;
  --espresso-soft:#4A4036;
  --ink-muted:    #6F6557;
  --bark:         #9A6B34;   /* logo brown */
  --bark-deep:    #7E5527;
  --terracotta:   #BC6A45;
  --sage:         #8B9A7B;
  --sage-deep:    #6E7D60;
  --gold:         #C49A4A;
  --line:         rgba(46,38,32,0.12);
  --line-soft:    rgba(46,38,32,0.07);

  /* Type */
  --serif: Georgia, "Gelasio", "Times New Roman", serif;
  --sans:  "Plus Jakarta Sans", system-ui, sans-serif;

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  /* Layout */
  --maxw: 1120px;
  --rad: 28px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  color:var(--espresso);
  background:var(--cream);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
}

/* Paper grain overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:1;
  opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:2; }

/* Accessibility: visible focus */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--bark); outline-offset:3px; border-radius:6px;
}

/* ---------- Typography ---------- */
h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.08; letter-spacing:-0.01em; }
h1{ font-size:clamp(1.9rem, 4.4vw, 3.2rem); font-optical-sizing:auto; }
h2{ font-size:clamp(2rem, 4.4vw, 3.3rem); }
h3{ font-size:clamp(1.4rem, 2.4vw, 1.9rem); }
.serif-it{ font-style:italic; }
.lead{ font-size:clamp(1.15rem,1.7vw,1.35rem); color:var(--espresso-soft); }

/* ---------- Sections ---------- */
section{ padding:clamp(48px,8vw,100px) 0; position:relative; scroll-margin-top:clamp(20px,4vw,32px); }
.section-dark{ background:var(--espresso); color:var(--cream); }
.section-deep{ background:var(--cream-deep); }
.center{ text-align:center; }
.measure{ max-width:680px; }
.measure-narrow{ max-width:560px; }
.mx-auto{ margin-left:auto; margin-right:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--sans); font-weight:600; font-size:1.02rem;
  color:#FBF7EF; background:var(--terracotta);
  padding:20px 30px; border-radius:999px;
  border:none; cursor:pointer;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background .4s var(--ease);
  box-shadow:0 14px 30px -12px rgba(188,106,69,0.6);
  position:relative;
}
.btn:hover{ transform:translateY(-2px); background:#A95B38; box-shadow:0 22px 44px -14px rgba(188,106,69,0.7); }
.btn:active{ transform:scale(0.985); }
.btn .ico{
  width:34px; height:34px; border-radius:999px;
  background:rgba(255,255,255,0.18);
  display:grid; place-items:center;
  transition:transform .5s var(--ease);
}
.btn:hover .ico{ transform:translateX(3px); }
.btn .ico svg{ width:16px; height:16px; }
.btn-lg{ font-size:1.1rem; padding:23px 36px; }

/* ---------- Gated CTA (odblokowane po 15 min wideo) ---------- */
.lock-hidden{ display:none !important; }
@keyframes ctaIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.cta-unlocked{ animation:ctaIn .7s var(--ease) both; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:18px; left:0; right:0; z-index:50;
  display:flex; justify-content:center;
  transition:transform .5s var(--ease);
}
.nav-inner{
  display:flex; align-items:center; gap:34px;
  background:rgba(251,247,239,0.78);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line-soft);
  border-radius:999px;
  padding:9px 10px 9px 24px;
  box-shadow:0 12px 40px -18px rgba(46,38,32,0.4);
  position:relative;
}
.nav-inner.solo{ padding:9px 22px; }
.nav-brand{ display:flex; align-items:center; gap:11px; font-family:var(--serif); font-size:1.18rem; letter-spacing:-0.01em; }
.nav-brand img{ height:38px; width:auto; }
.nav-links{ display:flex; gap:22px; font-size:0.92rem; color:var(--espresso-soft); }
.nav-links a{ transition:color .3s var(--ease); }
.nav-links a:hover{ color:var(--terracotta); }
.nav-cta{
  display:inline-flex; align-items:center; height:42px;
  font-size:0.9rem; font-weight:600; color:#FBF7EF; background:var(--terracotta);
  padding:0 20px; border-radius:999px; transition:background .4s var(--ease);
}
.nav-cta:hover{ background:#A95B38; }

/* Lander: szersza pigułka — max 500px, na mobile pełna szerokość z marginesem 16px */
.nav-wide{ width:min(300px, calc(100% - 32px)); justify-content:center; }
.nav-wide:has(.nav-cta:not(.lock-hidden)){ justify-content:space-between; }

/* Auto-chowanie menu: znika przy scrollu w dół, wraca przy scrollu w górę */
.nav.is-hidden{ transform:translateY(-160%); }

/* Chevron toggle + rozsuwany 2. rząd menu (mobile / wąskie ekrany) */
.nav-toggle{
  display:none; height:42px; flex:none; cursor:pointer;
  align-items:center; gap:6px; padding:0 16px;
  font-family:var(--sans); font-size:0.92rem; font-weight:600; color:var(--espresso-soft);
  background:rgba(46,38,32,0.05); border:1px solid var(--line-soft);
  border-radius:999px; transition:background .3s var(--ease);
}
.nav-toggle:hover{ background:rgba(46,38,32,0.09); }
.nav-toggle svg{ width:15px; height:15px; stroke:var(--espresso); fill:none; stroke-width:2.2; transition:transform .35s var(--ease); }
.nav.open .nav-toggle svg{ transform:rotate(180deg); }

/* pigułka, która rozsuwa się w dół na drugi rząd — bez przerwy, pełna szerokość */
.nav-inner.nav-collapsible{ flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; }
.nav-collapsible .nav-row{ display:flex; align-items:center; gap:34px; padding:9px 10px 9px 24px; width:100%; }
.nav-expand{
  display:flex; flex-direction:column;
  max-height:0; overflow:hidden;
  border-top:1px solid transparent;
  transition:max-height .42s var(--ease), border-color .3s var(--ease);
}
.nav.open .nav-expand{ border-top-color:var(--line-soft); }
.nav-expand a{
  padding:13px 24px; font-size:1rem; color:var(--espresso-soft);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nav-expand a:hover{ background:rgba(46,38,32,0.05); color:var(--terracotta); }

/* ---------- Hero ---------- */
.hero{
  padding-top:clamp(86px,11vw,116px);
  padding-bottom:clamp(36px,5vw,56px);
  background:
    radial-gradient(120% 90% at 50% -10%, #FCF8F0 0%, var(--cream) 45%, var(--cream-deep) 100%);
  text-align:center;
}
.hero h1{ margin:16px auto 0; max-width:20ch; }
.hero .lead{ margin:26px auto 0; max-width:600px; }
.hero-emph{ color:var(--bark-deep); }
.hero-kicker{ font-family:var(--serif); font-weight:500; font-size:clamp(0.95rem,1.6vw,1.25rem); color:var(--terracotta); letter-spacing:0.01em; }
.hero-sub{ font-family:var(--serif); font-weight:400; font-size:clamp(1rem,1.5vw,1.2rem); color:var(--espresso-soft); margin:16px auto 0; max-width:42ch; line-height:1.4; }

/* ---------- VSL player (bez przewijania) ---------- */
.video-wrap{ max-width:800px; margin:clamp(22px,3vw,36px) auto 0; }
.vsl{
  position:relative; aspect-ratio:16/9; width:100%;
  border-radius:var(--rad); overflow:hidden;
  background:linear-gradient(150deg,#34291f 0%,#4a3a2a 55%,#5d4830 100%);
  box-shadow:0 40px 90px -45px rgba(46,38,32,0.55);
}
.vsl iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* warstwa przechwytująca kliknięcia — blokuje interakcję z playerem YT (brak seeku) */
.vsl-capture{ position:absolute; inset:0; z-index:3; cursor:pointer; }
.vsl-poster{ position:absolute; inset:0; z-index:4; display:grid; place-items:center; cursor:pointer; }
.vsl-poster::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 60% at 50% 45%, rgba(196,154,74,0.22), transparent 70%);
}
.play{
  position:relative; z-index:2;
  width:88px; height:88px; border-radius:999px;
  background:rgba(251,247,239,0.92);
  display:grid; place-items:center;
  box-shadow:0 18px 50px -16px rgba(0,0,0,0.6);
  transition:transform .5s var(--ease);
}
.vsl-poster:hover .play{ transform:scale(1.07); }
.play svg{ width:30px; height:30px; margin-left:5px; fill:var(--espresso); }
.video-label{
  position:absolute; bottom:20px; left:0; right:0; z-index:2;
  color:rgba(251,247,239,0.82); font-size:0.86rem; letter-spacing:0.03em;
}
/* dolny pasek sterowania: play/pauza + głośność (BEZ paska postępu) */
.vsl-controls{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:flex; align-items:center; gap:14px; padding:14px 18px;
  background:linear-gradient(transparent, rgba(0,0,0,0.55));
  opacity:0; transition:opacity .3s var(--ease); pointer-events:none;
}
.vsl.playing .vsl-controls, .vsl.playing:hover .vsl-controls{ opacity:1; pointer-events:auto; }
.vsl-btn{ background:none; border:none; cursor:pointer; color:#fff; width:34px; height:34px; display:grid; place-items:center; }
.vsl-btn svg{ width:22px; height:22px; fill:#fff; }
.vsl-vol{ width:96px; accent-color:var(--terracotta); cursor:pointer; }
.vsl-time{ margin-left:auto; color:rgba(255,255,255,0.85); font-size:0.8rem; font-variant-numeric:tabular-nums; }

.hero-cta{ margin-top:clamp(22px,3.5vw,34px); display:flex; flex-direction:column; align-items:center; }
.cta-pair{ display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; }
.cta-link{ font-weight:600; font-size:1rem; color:var(--sage-deep); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; transition:color .3s var(--ease); }
.cta-link:hover{ color:var(--terracotta); }

.trust-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px;
  margin-top:30px; font-size:0.9rem; color:var(--ink-muted);
}
.trust-row span{ display:inline-flex; align-items:center; gap:8px; }
.trust-row svg{ width:17px; height:17px; stroke:var(--sage-deep); }

/* ---------- Reveal animation ---------- */
/* Treść jest domyślnie widoczna; chowamy ją do animacji TYLKO gdy działa JS (klasa .js na <html>).
   Dzięki temu bez JS / w podglądzie bez skryptów strona nie jest pusta. */
.js .reveal{ opacity:0; transform:translateY(34px); filter:blur(6px);
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; filter:blur(0); }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

/* ---------- Generic helpers ---------- */
.stack > * + *{ margin-top:1.1em; }
.kicker{ font-size:0.82rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--bark-deep); font-weight:600; }
.section-dark .kicker{ color:var(--gold); }

/* Czego się nauczysz — lista z kwiatkiem */
.learn-list{ max-width:760px; margin:clamp(40px,6vw,56px) auto 0; }
.learn{ display:flex; gap:18px; align-items:flex-start; padding:22px 4px; border-top:1px solid var(--line-soft); }
.learn:first-child{ border-top:none; }
.learn-ico{ flex:none; width:30px; height:30px; color:var(--bark); margin-top:3px; }
.learn-ico svg{ width:100%; height:100%; }
.learn p{ font-size:1.05rem; line-height:1.6; color:var(--espresso-soft); margin:0; }
.learn strong{ color:var(--espresso); font-weight:500; }

/* ---------- Tekst na ciemnym tle (section-dark) ---------- */
.section-dark p{ color:rgba(251,247,239,0.82); }
.section-dark strong{ color:#fff; }
.section-dark em{ color:var(--gold); font-style:italic; }

/* ---------- Autorka ---------- */
.author{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:54px; align-items:start; }
.author-collage{ position:relative; display:grid; grid-template-columns:0.96fr 1.04fr; gap:14px; align-items:stretch; }
.cc-right{ order:-1; }                                  /* trójka zdjęć na lewą stronę */
.cc-col{ display:flex; flex-direction:column; gap:14px; min-height:0; }
.cc-col .ph{ overflow:hidden; border-radius:18px; background:#e7ddcd; border:1px solid rgba(46,38,32,0.06); box-shadow:0 22px 48px -34px rgba(46,38,32,0.5); }
.cc-col .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.cc-right .ph{ aspect-ratio:5/4; }                      /* prawa kolumna wyznacza wysokość */
.cc-left .ph-main{ flex:1 1 0; min-height:0; }          /* natura - wypełnia do wysokości prawej, przycinana */
.cc-left .ph-w3{ flex:0 0 auto; aspect-ratio:446/436; } /* warsztaty-3 - bez przycięcia */
.cc-left .ph-w3 img{ object-fit:contain; }
.author-text h2{ color:var(--espresso); }
.author-sign{ font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--gold)!important; }

/* ---------- Dla kogo — przełącznik JEST / NIE JEST ---------- */
.kogo-head{
  text-align:center; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:10px 14px; margin-bottom:clamp(26px,4vw,38px);
  font-size:clamp(1.7rem,3.4vw,2.5rem);
}
.seg{ display:inline-flex; background:var(--cream-deep); border:1px solid var(--line); border-radius:999px; padding:4px; }
.seg-btn{
  font-family:var(--sans); font-size:0.95rem; font-weight:600; color:var(--ink-muted);
  background:transparent; border:none; cursor:pointer; padding:9px 20px; border-radius:999px;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.seg-btn[aria-pressed="true"][data-val="jest"]{ background:var(--espresso); color:var(--cream); }
.seg-btn[aria-pressed="true"][data-val="nie"]{ background:var(--paper); color:var(--espresso); box-shadow:inset 0 0 0 1px var(--line); }

/* ---------- Cena (bazowy styl ceny — używany przez kartę zakupu) ---------- */
.price-now{ font-family:var(--serif); font-size:4.4rem; line-height:1; color:var(--terracotta); }

/* ---------- Formularz zakupu (#zakup) ---------- */
.order-card{
  max-width:400px; margin:48px auto 0;
  background:var(--paper); color:var(--espresso);
  border:1px solid var(--line-soft); border-radius:calc(var(--rad) + 6px);
  padding:clamp(24px,3.5vw,34px);
  box-shadow:0 50px 90px -42px rgba(0,0,0,0.55);
}
.order-head{ text-align:center; }
.order-head .kicker{ display:block; }
.order-price{ margin-top:8px; }
.order-card .price-now{ font-size:clamp(2.8rem,7vw,3.8rem); line-height:1; }
.order-price .cur{ font-size:0.42em; margin-left:0.08em; vertical-align:0.5em; }
.order-incl{ list-style:none; max-width:320px; margin:18px auto 6px; padding:18px 0 2px; border-top:1px solid var(--line-soft); display:grid; gap:10px; }
.order-incl li{ display:flex; gap:10px; align-items:center; font-size:0.9rem; color:var(--espresso-soft); }
.order-incl-ico{ flex:none; width:21px; height:21px; border-radius:50%; background:var(--sage); color:#fff; display:grid; place-items:center; }
.order-incl-ico svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; }
.order-form{ display:grid; gap:14px; margin-top:24px; }
.field label{ display:block; font-size:0.82rem; font-weight:600; color:var(--ink-muted); margin-bottom:6px; }
.field input{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--espresso);
  padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--paper);
  transition:border-color .3s var(--ease);
}
.field input:focus{ outline:none; border-color:var(--bark); }
.order-card .btn{ width:100%; justify-content:center; margin-top:10px; }

/* ---------- Gwarancja ---------- */
.guarantee{
  max-width:760px; margin:40px auto 0; display:flex; gap:26px; align-items:center;
  background:rgba(251,247,239,0.06); border:1px solid rgba(251,247,239,0.14);
  border-radius:var(--rad); padding:30px 34px;
}
.guarantee-seal{ flex:none; width:64px; height:64px; color:var(--gold); }
.guarantee-seal svg{ width:100%; height:100%; }
.guarantee h3{ color:var(--cream); margin-bottom:8px; }
.guarantee p{ font-size:0.96rem; }

/* ---------- FAQ ---------- */
.faq{ max-width:720px; margin:48px auto 0; }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:24px 4px;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--serif); font-size:1.2rem; color:var(--espresso);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq-ico{ flex:none; position:relative; width:18px; height:18px; }
.faq-ico::before,.faq-ico::after{ content:""; position:absolute; background:var(--bark); transition:transform .4s var(--ease); }
.faq-ico::before{ top:8px; left:0; width:18px; height:2px; }
.faq-ico::after{ left:8px; top:0; width:2px; height:18px; }
.faq details[open] .faq-ico::after{ transform:scaleY(0); }
.faq details p{ padding:0 4px 26px; color:var(--ink-muted); max-width:60ch; }

/* ---------- Disclaimer ---------- */
.disclaimer{ padding:clamp(10px,1.6vw,18px) 0 clamp(48px,7vw,80px); background:var(--cream-deep); }
.disclaimer p:not(.kicker){ font-size:0.92rem; color:var(--ink-muted); line-height:1.7; text-align:center; }

/* ---------- Footer ---------- */
.footer{ background:var(--espresso); color:var(--cream); padding:64px 0 150px; text-align:center; }
.footer-inner{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.footer .nav-brand img{ height:52px; width:auto; }
.footer-links{ display:flex; gap:20px; flex-wrap:wrap; justify-content:center; font-size:0.86rem; color:rgba(251,247,239,0.7); }
.footer-links a{ transition:color .3s var(--ease); }
.footer-links a:hover{ color:var(--gold); }
.footer-fine{ color:rgba(251,247,239,0.4); font-size:0.82rem; margin-top:6px; }
.footer-slim{ padding:40px 0 56px; }

/* ---------- Sticky CTA ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  background:rgba(251,247,239,0.9); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line-soft);
  transform:translateY(120%); transition:transform .6s var(--ease);
  box-shadow:0 -16px 40px -24px rgba(46,38,32,0.5);
}
.sticky-cta.show{ transform:translateY(0); }
.sticky-cta .sticky-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 24px; }
.sticky-text{ display:flex; flex-direction:column; line-height:1.25; }
.sticky-text strong{ font-family:var(--serif); font-size:1.15rem; }
.sticky-text span{ font-size:0.84rem; color:var(--ink-muted); }
.sticky-btn{ padding:14px 24px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  body{ font-size:17px; }
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-inner.nav-collapsible{ width:min(92vw,460px); border-radius:26px; }
  .nav-collapsible .nav-row{ justify-content:space-between; gap:12px; padding-left:10px; }
  .nav.open .nav-expand{ max-height:320px; }
  .hero{ padding-top:96px; }
  .author{ grid-template-columns:1fr; gap:30px; }
  .author-media{ max-width:500px; margin:0 auto; }
}
@media (max-width:560px){
  .wrap{ padding:0 18px; }
  .hero{ padding-top:80px; padding-bottom:26px; }
  .hero h1{ max-width:100%; margin-top:12px; }
  .hero-sub{ max-width:100%; margin-top:12px; }
  .trust-row{ margin-top:20px; }
  .nav{ top:10px; }
  .nav-inner{ padding:8px 8px 8px 16px; gap:14px; }
  .nav-brand{ font-size:1rem; }
  .brand-text{ display:none; }
  .nav-cta{ padding:0 16px; }
  .nav-collapsible .nav-row{ padding:8px 10px; gap:10px; }
  .btn{ width:100%; justify-content:center; }
  .hero-cta .btn{ width:100%; }
  .guarantee{ flex-direction:column; text-align:center; }
  /* Kolaż -> przewijany pasek zdjęć (duże i czytelne na wąskich ekranach) */
  .author-media{ max-width:none; margin-left:-18px; margin-right:-18px; }
  .author-collage{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:6px 18px 38px; }
  .author-collage::-webkit-scrollbar{ display:none; }
  .cc-col{ display:contents; }
  .author-collage .ph{ flex:0 0 80%; aspect-ratio:5/4; scroll-snap-align:center; box-shadow:0 18px 34px -22px rgba(46,38,32,0.5); }
  .author-collage .ph-main{ order:1; }   /* natura na koniec paska (tylko mobile) */
  .cc-left .ph-w3 img{ object-fit:cover; }
  .sticky-text strong{ font-size:1rem; }
  .sticky-cta .sticky-btn{ width:auto; padding:13px 22px; }
  .footer{ padding:44px 0 96px; }
  .footer .nav-brand img{ height:44px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .btn, .nav, .sticky-cta, .vsl-controls{ transition:none !important; }
  .cta-unlocked{ animation:none !important; }
}

/* ---------- Dla kogo — dwa boxy + przełącznik JEST/NIE + auto-fit ---------- */
.kogo-x{ max-width:760px; margin:0 auto; }
.kgrid{ display:flex; gap:20px; align-items:stretch; max-width:640px; margin:0 auto; }
.kbox{
  position:relative; flex:1; aspect-ratio:2/3; cursor:pointer; container-type:inline-size;
  border-radius:22px; padding:clamp(26px,4.5vw,44px) clamp(20px,3vw,28px) clamp(22px,3.5vw,34px);
  display:flex; flex-direction:column;
  transition:filter .45s var(--ease), opacity .45s var(--ease), box-shadow .45s var(--ease);
}
.kbox--jest{ background:var(--espresso); color:var(--cream); }
.kbox--nie{ background:var(--paper); color:var(--espresso); box-shadow:inset 0 0 0 1px var(--line-soft); }
.kogo-x[data-state="jest"] .kbox--nie .ksub,
.kogo-x[data-state="jest"] .kbox--nie .klist2,
.kogo-x[data-state="nie"] .kbox--jest .ksub,
.kogo-x[data-state="nie"] .kbox--jest .klist2{ filter:blur(3px); opacity:.4; }
.kogo-x[data-state="jest"] .kbox--jest{ box-shadow:0 30px 60px -36px rgba(46,38,32,0.7); }
.kogo-x[data-state="nie"] .kbox--nie{ box-shadow:0 26px 54px -38px rgba(46,38,32,0.4), inset 0 0 0 1px var(--line-soft); }
.kbg{ position:absolute; inset:0; border-radius:inherit; background-position:center; background-repeat:no-repeat; background-size:70%; pointer-events:none; transition:opacity .45s var(--ease); }
.kbox--jest .kbg{ opacity:.11; filter:brightness(1.55) saturate(.9); }
.kbox--nie .kbg{ opacity:.08; }
.kogo-x[data-state="nie"] .kbox--jest .kbg{ opacity:.55; }
.kogo-x[data-state="jest"] .kbox--nie .kbg{ opacity:.4; }
.kfit{ position:relative; z-index:1; font-size:clamp(1rem,5cqi,1.12rem); }
.ksub{ font-family:var(--serif); font-style:italic; font-size:1.2em; margin-bottom:1.3em; text-align:center; transition:filter .45s var(--ease), opacity .45s var(--ease); }
.klist2{ list-style:none; margin:0; padding:0; transition:filter .45s var(--ease), opacity .45s var(--ease); }
.klist2 li{ display:flex; gap:0.7em; align-items:flex-start; padding:0.82em 0; font-size:0.92em; border-top:1px solid rgba(247,241,231,0.14); }
.kbox--nie .klist2 li{ border-top-color:rgba(46,38,32,0.1); }
.klist2 li:first-child{ border-top:none; }
.kdot{ flex:none; width:1.45em; height:1.45em; border-radius:50%; display:grid; place-items:center; margin-top:0.1em; }
.kdot svg{ width:0.85em; height:0.85em; stroke:#fff; stroke-width:2.5; fill:none; }
.kbox--jest .kdot{ background:var(--sage); }
.kbox--nie .kdot{ background:var(--terracotta); }
@media (max-width:640px){
  .kgrid{ flex-direction:column; align-items:center; }
  .kbox{ aspect-ratio:auto; width:100%; max-width:300px; padding-top:42px; }
  .ksub{ margin-bottom:24px; }
  .kogo-x[data-state="jest"] .kbox--nie,
  .kogo-x[data-state="nie"] .kbox--jest{ display:none; }
}

/* ---------- Półka modułów (12 tomów, hover + karuzela) ---------- */
.mshelf{ position:relative; max-width:1000px; margin:0 auto; padding:0 2px; }
.mshelf::before, .mshelf::after{ content:""; position:absolute; top:0; bottom:0; width:54px; z-index:4; pointer-events:none; }
.mshelf::before{ left:0; background:linear-gradient(90deg, var(--cream) 28%, rgba(247,241,231,0)); }
.mshelf::after{ right:0; background:linear-gradient(270deg, var(--cream) 28%, rgba(247,241,231,0)); }
.mshelf-vp{ overflow:hidden; }
.mtrack{ position:relative; display:flex; gap:6px; overflow-x:auto; scroll-behavior:auto; scrollbar-width:none; padding:16px 50px; }
.mtrack::-webkit-scrollbar{ display:none; }
.mspine{ flex:0 0 auto; width:58px; height:340px; position:relative; z-index:1; border:none; padding:0; cursor:pointer; border-radius:8px 8px 0 0; overflow:hidden; will-change:width; box-shadow:inset -3px 0 8px rgba(0,0,0,.2), 0 12px 26px -12px rgba(46,38,32,.5); }
.mspine.is-open{ z-index:3; }
.mspine-bg{ position:absolute; inset:0; background:var(--c); }
.mrail{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:18px 6px 16px; transition:opacity .45s var(--ease); color:var(--txt); }
.mspine.is-open .mrail{ opacity:0; }
.mrail .mnum{ font-family:var(--serif); font-size:16px; color:var(--num); }
.mrail .mvt{ writing-mode:vertical-rl; font-family:var(--serif); font-size:14px; white-space:nowrap; max-height:212px; overflow:hidden; }
.mrail .mflower{ width:22px; height:22px; color:var(--num); opacity:.85; }
.mopen{ position:absolute; inset:0; background:var(--paper); padding:30px 26px 26px; display:flex; flex-direction:column; justify-content:center; opacity:0; transition:opacity .55s .2s var(--ease); min-width:var(--openw, 243px); }
.mspine.is-open .mopen{ opacity:1; }
.mopen .mlabel{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--bark); margin:0 0 10px; }
.mopen h3{ font-family:var(--serif); font-size:1.5rem; color:var(--espresso); margin:0 0 14px; line-height:1.12; }
.mopen p{ font-size:1rem; color:var(--espresso-soft); line-height:1.55; margin:0; }
.mopen .mlogo-b{ position:absolute; bottom:18px; left:0; right:0; text-align:center; }
.mopen .mflower{ width:28px; height:28px; color:var(--bark); opacity:.8; }
.marrow{ position:absolute; top:0; bottom:0; z-index:5; width:58px; border:none; background:transparent; cursor:pointer; display:grid; place-items:center; color:var(--espresso-soft); }
.marrow .ico{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:rgba(251,247,239,.72); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); display:grid; place-items:center; opacity:.5; transition:opacity .25s var(--ease), background .25s var(--ease), color .25s var(--ease), transform .35s var(--ease); }
.marrow:hover .ico{ opacity:1; background:var(--paper); color:var(--espresso); transform:scale(1.08); }
.marrow:focus-visible{ outline:none; }
.marrow:focus-visible .ico{ outline:3px solid var(--bark); outline-offset:2px; opacity:1; }
.marrow svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; }
.marrow-l{ left:0; } .marrow-r{ right:0; }
.mshelf-base{ height:14px; max-width:900px; margin:6px auto 0; border-radius:0 0 16px 16px; background:linear-gradient(var(--bark-deep),#553a1c); box-shadow:0 14px 28px -14px rgba(46,38,32,.5); }
@media (max-width:600px){
  .mspine{ height:300px; width:50px; }
  .mopen{ padding:26px 20px 22px; }
  .mopen h3{ font-size:1.3rem; }
  .mtrack{ padding:14px 42px; }
  .mshelf::before, .mshelf::after{ width:22px; }
}

/* ---------- Sticky CTA na bardzo wąskich ekranach (<540px): sam wyśrodkowany przycisk ---------- */
@media (max-width:540px){
  .sticky-text strong{ font-size:0.95rem; }
  .sticky-text span{ font-size:0.8rem; }
  .sticky-cta .sticky-inner{ gap:12px; padding:10px 16px; }
  .sticky-cta .sticky-btn{ width:auto; flex:0 0 auto; }
}

/* Gdy "Moment Wyboru" zaczyna się łamać (~320px) - chowamy dolną linijkę */
@media (max-width:320px){
  .sticky-text span{ display:none; }
}

/* Poniżej 300px: sam wyśrodkowany przycisk */
@media (max-width:300px){
  .sticky-text{ display:none; }
  .sticky-cta .sticky-inner{ justify-content:center; }
}