/* ---- Základ ---- */
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial,
    sans-serif;
  color: #0b1324;
}
html {
  scroll-behavior: auto;
} /* JS animuje sám */

body {
  background: #fff;
}

.hero,
.section,
.savings,
.coupons {
  min-height: 0;
}

:root {
  /* Jemně dolaď dle potřeby */
  --phone-width: min(350px, 86vw);
  --phone-top: clamp(32px, 7vw, 72px);
  --cyan: #cb3478;
  --blue: #b3257a;
  --blueDark: #64103c;
}

@media (max-width: 768px) {
  :root {
    --phone-width: min(240px, 86vw) !important;
    --phone-top: clamp(130px, 7vw, 72px) !important;
  }
  .hero-fade {
    top: 370px !important;
  }
}

/* ========== NAVBAR ========== */
    header.navbar{
      position: fixed;
      inset: 0 0 auto 0;            /* top:0; left:0; right:0 */
      z-index: 1000;
      background: transparent !important;
      transform: translateY(0);
      opacity: 1;
      transition: transform .18s ease-in, opacity .18s ease-out;
      will-change: transform, opacity;
    }
    /* skrytý stav */
    header.navbar.is-hidden{ transform: translateY(-100%); opacity: 0; }

    /* řádek s obsahem */
    .container.nav-container{
      display: flex;
      align-items: center;
      gap: 10px;                    /* mezera mezi sousedy */
      padding: 20px 40px;
      background: transparent !important;
    }

    /* stejné kapsle pro logo i CTA */
    .nav-logo,
    .nav-cta{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 48px;
      padding: 0 20px;
      border-radius: 9999px;
      line-height: 1;
      box-sizing: border-box;
    }

    /* logo zůstane vlevo… */
    .nav-logo{ 
      background:#60224D; 
      margin-right: auto; /* Toto posune vše za logem doprava */
    }
    .nav-logo img{ 
      max-height:18px; 
      width:auto; 
      display:block; 
    }

    /* vzhled CTA + mezera mezi nimi */
    .nav-cta{
      background:#ffd7ab;
      color:#60224d;
      text-decoration:none;
      font-weight:600;
      transition: background .2s ease;
      white-space: nowrap; /* Zabrání zalomení textu */
    }
    .nav-cta:hover{ background:#F1CCA2; }
    .nav-cta.btn--whatsapp:hover{ background:#20B95A; }
    /* mezera mezi dvěma tlačítky */
    .nav-cta + .nav-cta{ margin-left:10px; }

    /* ======= Mobil (≤768px) ======= */
    @media (max-width:768px){
      .container.nav-container{
        padding: 20px 10px;
        gap: 0px;
      }
      .nav-logo,
      .nav-cta{
        height: 42px;
        padding: 0 16px;
      }
      .nav-logo img{ max-height:16px; }
      .nav-cta + .nav-cta{ margin-left:8px; }
      
      /* Pro velmi malé obrazovky upravíme velikost textu */
      @media (max-width: 360px) {
        .nav-cta {
          font-size: 14px;
          padding: 0 12px;
        }
      }
    }


:root {
  --brand: #740052; /* tvoje primární */
  --brand-2: #922b6c; /* druhý odstín */
  --shadow-lg: 0 22px 70px rgba(15, 23, 42, 0.16);
}

/* Obecné styly pro sekce */
.hero, .community, .savings, .coupons, .whatsapp, .whoami, .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

/* Ujistěte se, že obsahové bloky jsou správně vycentrované */
.hero__content, .community__content, .savings__content, 
.coupons__content, .wa__content, .who__content, .step__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: var(--hero-max-w, 1100px);
  padding: 0 20px;
}

/* ===== HERO (Chrochtík + procenta) ===== */
:root {
  --hero-max-w: 980px;
  --hero-scene-w: clamp(640px, 62vw, 1080px);
  --hero-scene-h: clamp(220px, 30vw, 420px);
  --hero-gap: clamp(8px, 1.6vh, 16px);

  /* brand / text */
  --brand1: #b74b8a;
  --brand2: #873766;
  --brand3: #642951;
  --ink-weak: #5b6b84;

  /* CTA */
  --cta1: #ff7a18;
  --cta2: #ff4458;
}

.hero {
  position: relative;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(24px, 4vh, 48px) 20px;
  background: #fff;
}

/* Obrázková scéna (Chrochtík + %) */
.hero-visual {
  position: relative;
  width: var(--hero-scene-w);
  height: var(--hero-scene-h);
  margin: 0 auto var(--hero-gap);
  pointer-events: none;
}
.hero-pig {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
}
.hero-percent {
  position: absolute;
  top: 45%;
  width: clamp(130px, 15vw, 230px);
  height: auto;
  filter: drop-shadow(0 14px 40px rgba(15, 23, 42, 0.18));
  animation: floatY 6s ease-in-out infinite;
  will-change: transform;
}
.hero-percent--left {
  left: 18%;
  animation-duration: 6.4s;
  animation-delay: 0.15s;
}
.hero-percent--right {
  right: 12%;
  animation-duration: 5.8s;
  animation-delay: 0.55s;
}

.hero-percent--left {
  width: 150px !important;
}
.hero-percent--right {
  width: 250px !important;
  top: 35%;
}

@media (max-width: 768px) {
  .hero-percent--left {
    width: 80px !important;
    left: 5% !important;
  }
  .hero-percent--right {
    width: 110px !important;
    right: 5% !important;
  }
}

/* Tablety: 769px až 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-percent--left {
    left: 6% !important;
    width: 140px !important;
  }
  .hero-percent--right {
    right: 0% !important;
    width: 200px !important;
  }
  .hero-pig {
  position: absolute;
  left: 50%;
  top: -50px;
  transform: translateX(-50%);
  height: 150%;
  width: auto;
}
}

@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-percent {
    animation: none;
  }
}

/* --- Text pod fadem --- */
.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--hero-max-w);
  margin-top: 0;
}

/* Mobile drobnosti – fade začne o kousek dřív */
@media (max-width: 768px) {
  :root {
    --hero-scene-h: clamp(200px, 40vw, 320px);
    --hero-fade-top: calc(var(--hero-scene-h) * 0.58);
  }
}

/* Textový blok */
.hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--hero-max-w);
  margin-top: 0; /* vizuál je těsně nad textem */
}
.hero__title {
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  font-size: clamp(40px, 8vw, 96px);
  background: linear-gradient(
    90deg,
    var(--brand1) 0%,
    var(--brand2) 60%,
    var(--brand3) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.big-title {
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(40px, 14vw, 96px);
  background: linear-gradient(
    90deg,
    var(--brand1) 0%,
    var(--brand2) 60%,
    var(--brand3) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitle {
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(20px, 4vw, 60px);
  background: linear-gradient(
    90deg,
    var(--brand1) 0%,
    var(--brand2) 60%,
    var(--brand3) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  margin: 8px auto 22px;
  max-width: 680px;
  color: var(--ink-weak);
  font-size: clamp(16px, 1.9vw, 18px);
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.85);
}

/* CTA tlačítko */
.btn,
.btn.btn--cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.05rem 1.6rem;
  border-radius: 999px;
  border: 0;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, var(--cta1), var(--cta2));
  text-decoration: none;

  transition: transform 0.15s ease;
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}

/* Mobile tweaks */
@media (max-width: 768px) {
  :root {
    --hero-scene-h: clamp(200px, 40vw, 320px);
  }
  .hero-percent {
    top: 4%;
    width: clamp(100px, 22vw, 170px);
  }
  .hero__title {
    font-size: clamp(36px, 14vw, 64px);
  }
  .big-title {
    font-size: clamp(36px, 12vw, 150px);
  }
}

/* ========= ZLEVNITO / KOMUNITA ========= */
:root {
  --community-w: clamp(620px, 68vw, 1080px);
  --community-h: clamp(260px, 36vw, 460px);
  --brand-violet-1: #b74b8a;
  --brand-violet-2: #873766;
  --brand-violet-3: #642951;
}

/* Rozvržení sekce */
.community {
  justify-content: center;
  text-align: center;
  padding: clamp(40px, 6vh, 80px) 20px;
}

/* Scéna s prasetem a avataremi */
.community-stage {
  position: relative;
  width: var(--community-w);
  height: var(--community-h);
  margin: 0 auto clamp(16px, 2.8vh, 22px);
  pointer-events: none;
}

.community-pig {
  position: absolute;
  left: 50%;
  top: 75px;
  transform: translateX(-50%);
  height: 90%;
  width: auto;
  z-index: 2;
}

/* Avatary */
.community-avatar {
  --size: 96px; /* default velikost – přepisují modifikátory */
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.16);
  border: 8px solid #fff;
  z-index: 3;
  animation: communityFloat 6.6s ease-in-out infinite;
  will-change: transform;
}

/* Rozmístění (laděno dle náhledu) */
.av-top {
  --size: clamp(68px, 8vw, 120px);
  top: -5%;
  left: 40%;
  transform: translateX(-50%);
  animation-duration: 6.2s;
}
.av-left-sm {
  --size: clamp(64px, 7vw, 86px);
  top: 30%;
  left: 22%;
  animation-duration: 6.8s;
}
.av-right-sm {
  --size: clamp(64px, 7vw, 86px);
  top: 15%;
  right: 25%;
  animation-duration: 6.9s;
  animation-delay: 0.25s;
}
.av-left-lg {
  --size: clamp(96px, 12vw, 140px);
  bottom: -10%;
  left: 24%;
  animation-duration: 7.2s;
  animation-delay: 0.1s;
}
.av-right-lg {
  --size: clamp(96px, 12vw, 140px);
  bottom: 15%;
  right: 20%;
  animation-duration: 7s;
  animation-delay: 0.35s;
}



@keyframes communityFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .community-avatar {
    animation: none;
  }
}

/* Nadpis + text */
.community-title {
  font-size: clamp(40px, 8vw, 96px);
  line-height: 1;
  font-weight: 900;
  margin: 0 0 8px;
  background: linear-gradient(
    90deg,
    var(--brand-violet-1) 0%,
    var(--brand-violet-2) 60%,
    var(--brand-violet-3) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.community .section__lead {
  margin: 0 auto;
  max-width: 720px;
}

/* ------- Mobilní doladění ------- */
@media (max-width: 768px) {
  :root {
    --community-w: min(94vw, 720px);
    --community-h: clamp(240px, 52vw, 360px);
  }
  
  .community {
      padding-top: 20vh;
  }
  .community-stage {
    margin-bottom: 10px;
  }
  .community-pig {
    height: 100%;
    top: -0%;
  }
  .av-top {
    top: -30%;
    left: 30%;
    --size: clamp(90px, 13vw, 120px);
  }
  .av-left-sm {
    top: 20%;
    left: 8%;
    --size: clamp(56px, 12vw, 82px);
  }
  .av-right-sm {
    top: 10%;
    right: 14%;
    --size: clamp(56px, 12vw, 82px);
  }
  .av-left-lg {
    bottom: -12%;
    left: 5%;
    --size: clamp(78px, 24vw, 120px);
  }
  .av-right-lg {
    bottom: -0%;
    right: 3%;
    --size: clamp(78px, 24vw, 120px);
  }
  .community-title {
    font-size: clamp(32px, 12vw, 72px);
  }
}

/* ------- Tablet doladění ------- */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --community-w: min(94vw, 720px);
    --community-h: clamp(240px, 52vw, 360px);
  }
  .community-stage {
    margin-bottom: 10px;
  }
  .community-pig {
    height: 100%;
    top: -0%;
  }
  .av-top {
    top: -30%;
    left: 36%;
    --size: clamp(90px, 13vw, 120px);
  }
  .av-left-sm {
    top: 15%;
    left: 12%;
    --size: clamp(56px, 12vw, 95px);
  }
  .av-right-sm {
    top: -2%;
    right: 17%;
    --size: clamp(56px, 12vw, 82px);
  }
  .av-left-lg {
    bottom: -12%;
    left: 13%;
    --size: clamp(78px, 24vw, 140px);
  }
  .av-right-lg {
    bottom: 20%;
    right: 11%;
    --size: clamp(78px, 24vw, 130px);
  }
  .community-title {
    font-size: clamp(32px, 14vw, 72px);
  }
}

/* extra úzké telefony */
@media (max-width: 380px) {
  :root {
    --community-h: clamp(220px, 56vw, 320px);
  }
  .av-top {
    top: -8%;
  }
}

/* Fullscreen sekce + CSS snap fallback */
html {
  scroll-snap-type: y mandatory; /* když JS nebude, aspoň snapne */
}
.screen {
  min-height: 100vh; /* fallback */
  min-height: 110dvh; /* přesná výška na mobilech */
  scroll-snap-align: start;
}

/* Hero a další sekce opravdu na celou výšku */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Nepovinné: zabraň “gumičkovému” přesahu mezi sekcemi */
body {
  overscroll-behavior-y: contain;
}

/* vypni nativní smooth pro jistotu – snap se postará sám */
html {
  scroll-behavior: auto;
}

/* tělo nescrolluje, scrolluje jen kontejner */
html,
body {
  height: 100%;
}
body {
  overflow: hidden;
}

/* full-screen scroller */
/* scroller */
.snap-container {
  height: 100svh; /* stabilní výška na mobilech */
  overflow-y: auto;
  scroll-snap-type: y mandatory; /* vždy ukončí na snap bodě */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* každá obrazovková sekce */
.screen {
  height: 100svh; /* fixní výška sekce = 1 „stránka“ */
  scroll-snap-align: center; /* ⬅️ skončí vždy UPROSTŘED */
  scroll-snap-stop: always; /* nepřeskočí víc sekcí naráz */
}

/* volitelné: skryj vertikální scrollbar na desktopu */
.snap-container::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* =========================
   MOBILE OVERRIDES (≤768px)
   ========================= */
@media (max-width: 768px) {
  /* viewport výška – stabilnější na iOS */
  .snap-container {
    height: 100svh;
  }

  /* menší vnitřní odsazení */
  .hero {
    padding: 16px 16px 32px;
  }

  /* scéna je širší, ale nižší – sedí těsně nad textem */
  :root {
    --hero-scene-w: min(96vw, 640px);
    --hero-scene-h: clamp(200px, 52vw, 320px);
  }
  .hero-visual {
    width: var(--hero-scene-w);
    height: var(--hero-scene-h);
    margin-bottom: 10px;
  }

  /* prase trochu menší, ať nepřetéká */
  .hero-pig {
    height: 160%;
    top: -75px;
  }

  /* procenta blíž k nadpisu a o chlup menší */
  .hero-percent {
    top: 34%;
    width: clamp(92px, 24vw, 150px);
  }
  .hero-percent--left {
    left: 2.5%;
  }
  .hero-percent--right {
    right: 2.5%;
  }

  /* typografie a CTA */
  .hero__title {
    font-size: clamp(32px, 14vw, 72px);
    line-height: 1.06;
    margin-bottom: 8px;
  }
  .hero__lead {
    font-size: 15.5px;
    margin-bottom: 18px;
  }
  .btn {
    padding: 0.95rem 1.4rem;
  }
}

/* ještě těsnější layout na extra malých (≤380px) */
@media (max-width: 380px) {
  :root {
    --hero-scene-h: clamp(190px, 56vw, 280px);
  }
  .hero-percent {
    top: 36%;
    width: clamp(86px, 26vw, 132px);
  }
  .hero-fade {
    top: calc(var(--hero-scene-h) * 0.62) !important;
  }
}

/* ===== Sekce: Tisíce korun ===== */
:root {
  --sav-max-w: 1100px;
  --sav-scene-w: clamp(560px, 62vw, 920px);
  --sav-scene-h: clamp(280px, 40vw, 520px);
}

.savings {
  position: relative;
  justify-content: center;
  text-align: center;
  padding: clamp(24px, 4vh, 48px) 20px;
}

/* Obrázková scéna */
.savings-visual {
  position: relative;
  width: var(--sav-scene-w);
  height: var(--sav-scene-h);
  pointer-events: none;
  margin: 0 auto clamp(8px, 1.6vh, 14px);
}
.savings-pig {
  position: absolute;
  left: 50%;
  top: 25px;
  transform: translateX(-50%);
  height: 100%;
  width: auto;

}

/* Poletující mince */
.coin {
  position: absolute;
  width: clamp(40px, 6vw, 78px);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(15, 23, 42, 0.18));
  animation: coinFloat 6.4s ease-in-out infinite,
    coinTilt 3.2s ease-in-out infinite;
  will-change: transform;
}
@keyframes coinFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}
@keyframes coinTilt {
  0%,
  100% {
    rotate: 0deg;
  }
  50% {
    rotate: -8deg;
  }
}
/* rozmístění kolem prasátka */
.coin--1 {
  left: 22%;
  top: 20%;
  animation-delay: 0.1s;
}
.coin--2 {
  left: 15%;
  top: 70%;
  animation-delay: 0.5s;
}
.coin--3 {
  right: 30%;
  top: -3%;
  animation-delay: 0.9s;
}
.coin--4 {
  right: 22%;
  top: 60%;
  animation-delay: 0.3s;
}

/* Tablety: 769px až 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .coin--1 {
    left: 20% !important;
  }
  .coin--2 {
    left: 12% !important;
  }
  .coin--3 {
    right: 25% !important;
  }
  .coin--4 {
    right: 18% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coin {
    animation: none;
  }
}

/* Text */
.savings__content {
  position: relative;
  z-index: 2;
  max-width: var(--sav-max-w);
}
.savings__title {
  margin: 0 0 8px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.03;
  font-size: clamp(40px, 8vw, 96px);
  background: linear-gradient(
    90deg,
    var(--brand1) 0%,
    var(--brand2) 60%,
    var(--brand3) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.savings__lead {
  margin: 6px auto 0;
  max-width: 740px;
  color: var(--ink-weak);
  font-size: clamp(16px, 1.8vw, 18px);
}

/* Mobile tweaks */
@media (max-width: 768px) {
  :root {
    --sav-scene-w: min(92vw, 640px);
    --sav-scene-h: clamp(240px, 52vw, 360px);
  }
  .savings {
      padding-top: 20vh;
  }
  .coin {
    width: clamp(34px, 8vw, 60px);
  }
  .savings-fade {
    top: calc(var(--sav-scene-h) * 0.68);
    filter: blur(10px);
  }
  .savings__title {
    font-size: clamp(32px, 12vw, 72px);
  }

  .savings-pig {
    position: absolute;
    left: 50%;
    top: -30px;
    transform: translateX(-50%);
    height: 120%;
    width: auto;
  }
  .coin--1 {
    left: 20%;
    top: 10%;
    animation-delay: 0.1s;
  }
  .coin--2 {
    left: 15%;
    top: 60%;
    animation-delay: 0.5s;
  }
  .coin--3 {
    right: 25%;
    top: -10%;
    animation-delay: 0.9s;
  }
  .coin--4 {
    right: 20%;
    top: 50%;
    animation-delay: 0.3s;
  }
}

/* ===== Sekce: Slevové kódy ===== */
:root {
  --cpn-scene-w: clamp(620px, 62vw, 1040px);
  --cpn-scene-h: clamp(260px, 36vw, 460px);
}

.coupons {
  position: relative;
  justify-content: center;
  text-align: center;
  padding: clamp(24px, 4vh, 48px) 20px;
}

/* obrazová scéna */
.coupons-visual {
  position: relative;
  width: var(--cpn-scene-w);
  height: var(--cpn-scene-h);
  margin: 0 auto clamp(8px, 1.6vh, 14px);
  pointer-events: none;
  z-index: 0;
}
/* kupony za prasetem */
.coupon {
  position: absolute;

  width: clamp(140px, 16vw, 240px);
  height: auto;
  z-index: 0; /* behind pig */
  filter: drop-shadow(0 14px 40px rgba(15, 23, 42, 0.16));
  animation: floatY 6.2s ease-in-out infinite;
  will-change: transform;
}
.coupon--left {
  left: 21%;
  top: 25%;
  transform: rotate(-10deg);
  animation-duration: 6.6s;
  animation-delay: 0.2s;
  width: 180px;
}
.coupon--right {
  right: 20%;
  top: 12%;
  transform: rotate(10deg);
  animation-duration: 5.8s;
  animation-delay: 0.6s;
  width: 280px;
}

/* Tablety: 769px až 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .coupon--left {
    left: 10% !important;
    width: 180px !important;
  }
  .coupon--right {
    right: 9% !important;
    width: 240px !important;
  }
}

/* prase před kupony */
.coupons-pig {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  z-index: 1;
  filter: drop-shadow(0 22px 70px rgba(15, 23, 42, 0.14));
}

/* jemné vznášení (sdílené s jinými sekcemi) */
@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .coupon {
    animation: none;
  }
}

/* text */
.coupons__content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
}
.coupons__title {
  margin: 0 0 8px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.03;
  font-size: clamp(40px, 8vw, 96px);
  background: linear-gradient(
    90deg,
    var(--brand1) 0%,
    var(--brand2) 60%,
    var(--brand3) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.coupons__lead {
  margin: 6px auto 0;
  max-width: 740px;
  color: var(--ink-weak);
  font-size: clamp(16px, 1.8vw, 18px);
}

/* mobilní doladění */
@media (max-width: 768px) {
  :root {
    --cpn-scene-w: min(92vw, 640px);
    --cpn-scene-h: clamp(240px, 52vw, 360px);
  }
  
  .coupons {
      padding-top: 20vh;
  }
  .coupon {
    top: 26%;
    width: clamp(110px, 22vw, 170px);
  }
  .coupon--left {
    left: 3.5%;
  }
  .coupon--right {
    right: 3.5%;
  }
  .coupons__title {
    font-size: clamp(32px, 12vw, 72px);
  }
  .coupons-pig {
    position: absolute;
    left: 50%;
    top: -30px;
    transform: translateX(-50%);
    height: 120%;
    width: auto;
    z-index: 1;
  }
  .coupon--left {
    left: 8%;
    top: 20%;
    transform: rotate(-10deg);
    animation-duration: 6.6s;
    animation-delay: 0.2s;
    width: 100px;
  }
  .coupon--right {
    right: 8%;
    top: 10%;
    transform: rotate(10deg);
    animation-duration: 5.8s;
    animation-delay: 0.6s;
    width: 150px;
  }
}

/* CTA skupina: mobil = pod sebou, desktop = vedle sebe */
.cta-group {
  display: flex;
  flex-direction: column; /* mobil */
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
}
@media (min-width: 900px) {
  .cta-group {
    flex-direction: row;
  }
}

/* Sekundární tlačítko */
.btn--secondary {
  background: #ffd3ed;
  color: #60224d; /* nebo var(--brand1) pokud používáš */
}
.btn--secondary:hover {
  background: rgb(255, 199, 233);
}

/* ===== Sekce: Jsem na WhatsAppu ===== */
:root {
  --wa-scene-w: clamp(620px, 62vw, 1040px);
  --wa-scene-h: clamp(260px, 36vw, 460px);
}

.whatsapp {
  position: relative;
  justify-content: center;
  text-align: center;
  padding: clamp(24px, 4vh, 48px) 20px;
  background: #fff;
}

/* Scéna (bubliny + prase) */
.wa-visual {
  position: relative;
  width: var(--wa-scene-w);
  height: var(--wa-scene-h);
  margin: 0 auto clamp(8px, 1.6vh, 14px);
  pointer-events: none;
  z-index: 0;
}

/* bubliny – jemné vznášení, jsou ZA prasetem */
.wa-bubble {
  position: absolute;
  height: auto;
  z-index: 0;
  filter: drop-shadow(0 14px 40px rgba(15, 23, 42, 0.16));
  animation: floatY 6.2s ease-in-out infinite;
  will-change: transform;
}
.wa-bubble--left {
  top: 35%;
  left: 22%;
  width: 150px;
  transform: rotate(-2deg);
  animation-duration: 6.6s;
  animation-delay: 0.2s;
}
.wa-bubble--right {
  top: 5%;
  width: 250px;
  right: 12%;
  transform: rotate(2deg);
  animation-duration: 5.8s;
  animation-delay: 0.6s;
}

/* Tablety: 769px až 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .wa-bubble--left {
    left: 18% !important;
    width: 120px !important;
  }
  .wa-bubble--right {
    right: 15% !important;
    width: 180px !important;
  }
}

/* prase před bublinami */
.wa-pig {
  position: absolute;
  left: 50%;
  top: 85px;
  transform: translateX(-50%);
  height: 120%;
  width: auto;
  z-index: 1;
  
}

/* Text */
.wa__content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
}
.wa__title {
  margin: 0 0 8px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.03;
  font-size: clamp(40px, 8vw, 96px);
  background: linear-gradient(
    90deg,
    var(--brand1) 0%,
    var(--brand2) 60%,
    var(--brand3) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wa__lead {
  margin: 6px auto 0;
  max-width: 740px;
  color: var(--ink-weak);
  font-size: clamp(16px, 1.8vw, 18px);
}

/* Mobilní doladění */
@media (max-width: 768px) {
  :root {
    --wa-scene-w: min(92vw, 640px);
    --wa-scene-h: clamp(240px, 52vw, 360px);
  }
  .wa__title {
    font-size: clamp(32px, 12vw, 72px);
  }

  .wa-bubble {
    top: 22%;
    width: clamp(120px, 24vw, 180px);
  }
  .wa-bubble--left {
    top: 35%;
    left: 8%;
    width: 80px;
  }
  .wa-bubble--right {
    top: 5%;
    width: 100px;
    right: 1%;
  }

  .wa-pig {
    position: absolute;
    left: 49%;
    top: 15px;
    transform: translateX(-50%);
    height: 140%;
    width: auto;
    z-index: 1;
  }
}

/* WhatsApp varianta tlačítka */

.btn--whatsapp {
  background: #24d166;

  gap: 0.55rem;
}
.btn--whatsapp .wa-icon {
  width: 1.2em;
  height: 1.2em;
  color: #fff;
  flex: 0 0 auto;
  display: inline-block;
}
.btn--whatsapp:hover {
  filter: brightness(1.05);
}
.btn--whatsapp:focus-visible {
  outline: 3px solid rgba(37, 211, 102, 0.45);
  outline-offset: 2px;
}

/* menší ikonka na úzkých mobilech */
@media (max-width: 480px) {
  .btn--whatsapp .wa-icon {
    width: 1.05em;
    height: 1.05em;
  }
}

/* ===== Sekce: Jsem Chrochtík ===== */
:root {
  --who-scene-w: clamp(620px, 62vw, 1040px);
  --who-scene-h: clamp(260px, 36vw, 460px);
}

.whoami {
  position: relative;
  justify-content: center;
  text-align: center;
  padding: clamp(24px, 4vh, 48px) 20px;
  background: #fff;
}

/* scéna (otazníky za prasetem) */
.who-visual {
  position: relative;
  width: var(--who-scene-w);
  height: var(--who-scene-h);
  margin: 0 auto clamp(8px, 1.6vh, 14px);
  pointer-events: none;
  z-index: 0;
}
.who-q {
  position: absolute;
  height: auto;
  z-index: 0;
  filter: drop-shadow(0 14px 40px rgba(15, 23, 42, 0.16));
  animation: whoFloat 6.2s ease-in-out infinite;
  will-change: transform;
}
.who-q--left {
  left: 15%;
  top: 25%;
  width: 160px;
  --rot: 8deg; /* místo transform: rotate() */
  animation-duration: 6.6s;
  animation-delay: 0.2s;
}
.who-q--right {
  right: 20%;
  top: 30%;
  width: 120px;
  --rot: -15deg; /* místo transform: rotate() */
  animation-duration: 5.8s;
  animation-delay: 0.6s;
}

/* Tablety: 769px až 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .who-q--left {
    left: 12% !important;
    width: 130px !important;
  }
  .who-q--right {
    right: 15% !important;
    width: 100px !important;
  }
}

.who-pig {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  z-index: 1;
  
}

/* nová animace, která skládá translate + rotate */
@keyframes whoFloat {
  0%,
  100% {
    transform: translateY(0) rotate(var(--rot, 0deg));
  }
  50% {
    transform: translateY(-12px) rotate(var(--rot, 0deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .who-q {
    animation: none;
  }
}

/* text */
.who__content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
}
.who__title {
  margin: 0 0 8px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.03;
  font-size: clamp(40px, 8vw, 96px);
  background: linear-gradient(
    90deg,
    var(--brand1) 0%,
    var(--brand2) 60%,
    var(--brand3) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.who__lead {
  margin: 6px auto 0;
  max-width: 740px;
  color: var(--ink-weak);
  font-size: clamp(16px, 1.8vw, 18px);
}

/* mobil */
@media (max-width: 768px) {
  :root {
    --who-scene-w: min(92vw, 640px);
    --who-scene-h: clamp(240px, 52vw, 360px);
  }
  .who-q {
    top: 22%;
    width: clamp(120px, 24vw, 180px);
  }
  .who-q--left {
    left: 5%;
    top: 10%;
    width: 90px;
    --rot: 8deg; /* místo transform: rotate() */
    animation-duration: 6.6s;
    animation-delay: 0.2s;
  }
  .who-q--right {
    right: 12%;
    top: 20%;
    width: 60px;
    --rot: -15deg; /* místo transform: rotate() */
    animation-duration: 5.8s;
    animation-delay: 0.6s;
  }
  .who-fade {
    top: calc(var(--who-scene-h) * 0.66);
    filter: blur(10px);
  }
  .who__title {
    font-size: clamp(34px, 12vw, 72px);
  }

  .who-pig {
    position: absolute;
    left: 50%;
    top: -50px;
    transform: translateX(-50%);
    height: 120%;
    width: auto;
    z-index: 1;
  }
}

/* ===== Krok 1: Zadej obchod ===== */
:root {
  --step-scene-w: clamp(620px, 62vw, 1040px);
  --step-scene-h: clamp(240px, 34vw, 440px);
}

.step {
  position: relative;
  justify-content: center;
  text-align: center;
  padding: clamp(24px, 4vh, 48px) 20px;
  background: #fff;
}

/* obrazová scéna */
.step-visual {
  position: relative;
  width: var(--step-scene-w);
  height: var(--step-scene-h);
  margin: 0 auto clamp(10px, 1.8vh, 16px);
  pointer-events: none;
  z-index: 0;
}

/* velké číslo */
.step-num {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  height: 80%;
  width: auto;
  z-index: 1; /* před bublinami */
  
}

/* bubliny – jemné vznášení, jsou ZA číslem */
.step-bubble {
  position: absolute;

  height: auto;
  z-index: 0;
  filter: drop-shadow(0 14px 40px rgba(15, 23, 42, 0.16));
  animation: stepFloat 6.2s ease-in-out infinite;
  will-change: transform;
}
.step-bubble--left {
  left: 25%;
  width: 150px;
  top: 42%;
  transform: rotate(-4deg);
  animation-duration: 6.6s;
  animation-delay: 0.2s;
}
.step-bubble--right {
  right: 18%;
  width: 250px;
  transform: rotate(4deg);
  animation-duration: 5.8s;
  animation-delay: 0.6s;
}

@keyframes stepFloat {
  0%,
  100% {
    transform: translateY(0) rotate(var(--rot, 0deg));
  }
  50% {
    transform: translateY(-10px) rotate(var(--rot, 0deg));
  }
}

/* text */
.step__content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
}
.step__title {
  margin: 0 0 8px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.03;
  font-size: clamp(36px, 8vw, 96px);
  background: linear-gradient(
    90deg,
    var(--brand1) 0%,
    var(--brand2) 60%,
    var(--brand3) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step__lead {
  margin: 6px auto 0;
  max-width: 720px;
  color: var(--ink-weak);
  font-size: clamp(16px, 1.8vw, 18px);
}

/* mobil */
@media (max-width: 768px) {
  :root {
    --step-scene-w: min(92vw, 640px);
    --step-scene-h: clamp(220px, 52vw, 340px);
  }
  .step-bubble {
    top: 28%;
    width: clamp(100px, 24vw, 160px);
  }
  .step-bubble--left {
    left: 10%;
    width: 80px;
    top: 45%;
  }
  .step-bubble--right {
    top: 10%;
    right: 6%;
    width: 130px;
  }
  .step__title {
    font-size: clamp(32px, 12vw, 64px);
  }
}

/* tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --step-scene-w: min(92vw, 640px);
    --step-scene-h: clamp(220px, 52vw, 340px);
  }
  .step-bubble {
    top: 28%;
    width: clamp(100px, 24vw, 160px);
  }
  .step-bubble--left {
    left: 10%;
    width: 140px;
    top: 35%;
  }
  .step-bubble--right {
    top: -10%;
    right: 4%;
    width: 240px;
  }
  .step__title {
    font-size: clamp(32px, 12vw, 64px);
  }
}

/* ===== Krok 2 ===== */
:root {
  --s2-scene-w: clamp(620px, 62vw, 1040px);
  --s2-scene-h: clamp(240px, 34vw, 440px);
}

.step--two {
  position: relative;
  justify-content: center;
  text-align: center;
  padding: clamp(24px, 4vh, 48px) 20px;
  background: #fff;
}

/* obrazová scéna */
.step2-visual {
  position: relative;
  width: var(--s2-scene-w);
  height: var(--s2-scene-h);
  margin: 0 auto clamp(10px, 1.8vh, 16px);
  pointer-events: none;
  z-index: 0;
}

/* velké číslo */
.s2-num {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  height: 80%;
  width: auto;
  z-index: 1;
  
}

/* bubliny – za číslem, jemné vznášení */
.s2-bubble {
  position: absolute;
  z-index: 0;
  height: auto;
  filter: drop-shadow(0 14px 40px rgba(15, 23, 42, 0.16));
  animation: s2Float 6.2s ease-in-out infinite;
  will-change: transform;
}
.s2-bubble--left {
  left: 25%;
  top: 35%;
  width: 230px;
  animation-duration: 6.6s;
  animation-delay: 0.1s;
}
.s2-bubble--top {
  left: 50%;
  top: 0%;
  transform: translateX(-50%);
  width: clamp(90px, 10vw, 140px);
  animation-duration: 5.8s;
  animation-delay: 0.5s;
  z-index: 2;
}
.s2-bubble--right {
  right: 28%;
  top: 58%;
  width: 180px;
  animation-duration: 6s;
  animation-delay: 0.8s;
  z-index: 2;
}

@keyframes s2Float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* text – reuse step styles */
.step__content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
}
.step__title {
  margin: 0 0 8px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.03;
  font-size: clamp(36px, 8vw, 96px);
  background: linear-gradient(
    90deg,
    var(--brand1) 0%,
    var(--brand2) 60%,
    var(--brand3) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step__lead {
  margin: 6px auto 0;
  max-width: 720px;
  color: var(--ink-weak);
  font-size: clamp(16px, 1.8vw, 18px);
}

/* mobil */
@media (max-width: 768px) {
  :root {
    --s2-scene-w: min(92vw, 640px);
    --s2-scene-h: clamp(220px, 52vw, 340px);
  }
  .s2-bubble--left {
    left: 10%;
    top: 35%;
    width: clamp(150px, 36vw, 210px);
  }
  .s2-bubble--top {
    top: 0%;
    width: clamp(76px, 18vw, 120px);
  }
  .s2-bubble--right {
    right: 12%;
    top: 58%;
    width: clamp(110px, 26vw, 160px);
  }
  .step__title {
    font-size: clamp(32px, 12vw, 64px);
  }
}

/* tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --s2-scene-w: min(92vw, 640px);
    --s2-scene-h: clamp(220px, 52vw, 340px);
  }
  .s2-bubble--left {
    left: 14%;
    top: 30%;
    width: clamp(150px, 36vw, 210px);
  }
  .s2-bubble--top {
    top: 0%;
    width: clamp(76px, 18vw, 120px);
  }
  .s2-bubble--right {
    right: 20%;
    top: 55%;
    width: clamp(110px, 26vw, 160px);
  }
  .step__title {
    font-size: clamp(32px, 12vw, 64px);
  }
}







/* Sekce = plátno + centrování H+V */
.live-feed{
  background:#fff;
  min-height: 100svh;
  display:grid;
  place-items:center;          /* H + V center */
  padding: clamp(24px, 5vw, 48px) 16px;
}

/* Vnitřní sloupec uprostřed */
.live-feed__inner{
  width: min(760px, 92vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 18px;
}



/* Seznam příspěvků */
.live-feed__list{
  width: 100%;
  display:grid;
  gap:12px;
  margin:0;
}

/* Kartička */
.live-feed__item{
  display:grid;
  grid-template-columns: 1fr auto;         /* název | tagy+čas */
  align-items:center;
  gap:10px 16px;

  background:#FFF3EA;                       /* světle meruňková */
  border-radius:16px;
  padding:16px 18px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.live-feed__item:hover{
  transform: translateY(-1px);
 
}

/* Název */
.live-feed__item > a{
  color:#0b1324; text-decoration:none; font-weight:800;
  font-size:16px; line-height:1.35;
}
.live-feed__item > a:hover{ text-decoration:underline; }

/* Pravý blok: tags + čas */
.live-feed__meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  justify-self:end;
}

/* Tagy (barvy podle tvého JS) */
.live-feed__tag{
  display:inline-flex; align-items:center;
  height:26px; padding:0 10px; border-radius:999px;
  font-size:12.5px; font-weight:700; white-space:nowrap;
  background:#F6E5F1; color:#60224D;
}
.live-feed__tag.tag--donate  { background:#D3F7B7; color:#1F141C; }
.live-feed__tag.tag--request { background:#FFE2A7; color:#1F141C; }
.live-feed__tag.tag--exchange{ background:#BAE5FF; color:#1F141C; }

/* Čas */
.live-feed__time{
  color:#873a00; background:#ffe2cd;
  border-radius:999px; padding:6px 10px;
  font-size:12px; font-weight:600; white-space:nowrap;
}

/* CTA pod seznamem (volitelné) */
.live-feed__cta-wrap{ width:100%; display:flex; justify-content:center; }
.feed-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; border-radius:999px; font-weight:800;
  color:#fff; text-decoration:none;
  background:linear-gradient(90deg,#ff7a18,#ff4458);
  
  transition: transform .12s ease, filter .12s ease;
}
.feed-cta:hover{ filter:brightness(1.05); transform:translateY(-1px); }

/* Mobil: meta pod název */
@media (max-width:820px){
  .live-feed__item{ grid-template-columns:1fr; }
  .live-feed__meta{ justify-self:start; }
}

/* Když by seznam výjimečně přesáhl výšku obrazovky,
   ať se sekce poskládá odshora (ne zůstane uprostřed) */
@media (max-height:650px){
  .live-feed{ align-content:start; }
}


/* === Feed reveal (postupné vyskládání) === */
@media (prefers-reduced-motion: no-preference){
  .live-feed__item{
    opacity: 0;
    transform: translateY(8px) scale(.985);
  }
  .live-feed__item.reveal {
    animation: feedIn 2s cubic-bezier(.22,.68,.13,1.01) both;
    animation-delay: var(--d, 0ms); /* zpoždění ze skriptu */
    will-change: transform, opacity, filter;
  }
  @keyframes feedIn {
    from{ opacity:0; filter: blur(6px); transform: translateY(12px) scale(.985); }
    to  { opacity:1; filter: blur(0);   transform: translateY(0)   scale(1);    }
  }
}


/* ===== Live feed – hlavička ===== */
.live-feed__head{
  text-align:center;
  margin-bottom: 8px;        /* mezera k listu */
}

.live-feed__title{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(40px, 8vw, 96px);  /* velké jako v náhledu */
  background: linear-gradient(90deg, var(--brand1) 0%, var(--brand2) 60%, var(--brand3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.live-feed__lead{
  margin: 0 auto 12px;
  max-width: 760px;
  color: var(--ink-weak);
  font-size: clamp(15px, 1.6vw, 17px);
}

/* pro velmi úzké telefony lehké stažení velikosti */
@media (max-width: 768px){
  .live-feed__title{ font-size: clamp(32px, 12vw, 56px); }
  .live-feed__lead { font-size: 14.5px; }
    .live-feed__list{
  width: 100%;
  display:grid;
  gap:8px;
  margin:0;
}
.live-feed__item > a {
    font-size:14px;
}
.live-feed__tag {
    font-size:10px;
}
.live-feed__time {
    font-size:10px;
}
}


@media (min-width: 769px) and (max-width: 1024px) {
  .live-feed__title{ font-size: clamp(32px, 12vw, 56px); }
  .live-feed__lead { font-size: 14.5px; }
}


/* Update the live feed container */
.live-feed__inner {
  width: 100%; /* Changed from min(760px, 92vw) */
  padding: 0 16px; /* Added horizontal padding */
  box-sizing: border-box;
}

/* Make feed items full width on mobile */
@media (max-width: 768px) {
  .live-feed__item {
    width: 100%;
    margin: 0;
  }
  
  .live-feed__list {
    width: 100%;
    gap: 8px; /* Slightly increased gap for better spacing */
  }
}

/* Adjust for very small screens */
@media (max-width: 380px) {
  .live-feed__item {
    padding: 14px 12px; /* Slightly reduced padding */
  }
  
  .live-feed__tag,
  .live-feed__time {
    font-size: 11px; /* Slightly smaller font for tags and time */
  }
}





/* Úprava pro hero sekci na mobilech */
@media (max-width: 768px) {
  .hero {
    justify-content: center; /* Zarovnání na střed */
    padding-top: 20vh; /* Přidáme větší odsazení shora */
  }



  /* Upravíme pozice procentních obrázků */
  .hero-percent--left {
    top: 25% !important;
  }
  
  .hero-percent--right {
    top: 15% !important;
  }
  
  /* Upravíme velikost prasátka */
  .hero-pig {
    height: 120%;
    top: -40px;
  }
}

/* Dodatečné úpravy pro velmi malé obrazovky */
@media (max-width: 380px) {
  .hero {
    padding-top: 15vh;
  }
  
  .hero__title {
    font-size: clamp(28px, 12vw, 40px) !important;
    line-height: 1.1;
  }
  
  .hero__lead {
    font-size: 14px;
    margin: 8px auto 16px;
  }
}











/* === FAQ: linkový styl s dělící čárou a plusem v kroužku === */
.faq{
  display:grid;
  place-items:center;
  padding: clamp(36px, 7vh, 72px) 16px;
  background: #fff;
  /* jemný růžový závoj jako na screenu (volitelné) */
  background-image: radial-gradient(1200px 600px at 95% 60%, rgba(255,221,221,.18), transparent 60%);
}

.faq__inner{ width: min(600px, 92vw); }

.faq__title{
  margin: 0 0 24px;
  text-align: center;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-size: clamp(40px, 8vw, 96px);
  background: linear-gradient(90deg, var(--brand1,#b74b8a) 0%, var(--brand2,#873766) 60%, var(--brand3,#642951) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* seznam & položky */
.faq-list{ display: grid; }

/* jedna položka = řádek s dělící čárou dole */
.faq-item{ position: relative; }
.faq-item + .faq-item{ margin-top: 6px; }

.faq-q{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px 8px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;

  /* typografie otázky */
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  color: #3a1724; /* tmavě vínová, dobře čitelná */
}

/* dělící linka jako na screenu */
.faq-item::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(205, 110, 120, .18); /* jemná růžová linka */
}

/* plus v kroužku */
.faq-q i{
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 226, 226, .9);
  color: #7c3a45;
  font-size: 16px;
  transition: transform .25s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  
}



/* odpověď pod otázkou, plynulé rozbalení */
.faq-a{
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
  padding: 0 8px;
}
.faq-a p{
  margin: 8px 0 22px;
  color: #5b6b84; line-height: 1.6;
  font-size: clamp(15px, 1.6vw, 17px);
}

/* otevřený stav: plus → křížek, větší max-height, linka zůstává */
.faq-item.is-open .faq-a{ max-height: 360px; }
.faq-item.is-open .faq-q i{
  transform: rotate(45deg);
  background: rgba(255, 214, 214, 1);
  color: #60224D;
}

/* focus pro klávesnici */
.faq-q:focus-visible{
  outline: 3px solid rgba(116, 0, 82, .25);
  outline-offset: 4px;
}

/* mobilní drobnosti */
@media (max-width: 768px){
  .faq__inner{ width: min(720px, 92vw); }
  .faq-q{ padding: 18px 6px; }
  .faq-q i{ width: 32px; height: 32px; }
  .faq__title {
      font-size: clamp(40px, 12vw, 96px);
  }
}

@media (prefers-reduced-motion: reduce){
  .faq-a, .faq-q i{ transition: none; }
}







/* ===== Scroll scéna (pinned) ===== */
.bubbles-scene{
  height: 120svh;
  /* pozor: fialová je teď v .bubbles-bg, scéna je průhledná */
  background: #60224D;
  position: relative;
  /* snap chování přepíšeme, ať tě nevrací zpět */
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.bubbles-stage{
  position: sticky; top:0; height:100svh;
  display:grid; place-items:center; overflow:hidden;
}

/* 1) Animované fialové pozadí */
.bubbles-bg{
  position:absolute; inset:0; z-index:0;
  background:#60224D;
  opacity:0;                    /* start: neviditelné */
  transform: translateY(12svh); /* jemné vyjetí */
  will-change: transform, opacity;
}

/* 2–3) Bubliny – nad pozadím, pod brand packem */
.bubble{
  position:absolute; z-index:1;
  opacity:0; transform-origin:center;
  transform: translate3d(0,60svh,0) scale(1);
  pointer-events:none;
  /* žádný drop-shadow (kvůli pruhům na iOS) */
}
.bubble--kod{ left:50%; width:200px; }
.bubble--mam{ left:50%; width:250px; }

/* 4) Brand pack = logo -> claim -> ikony */
.brand-pack{
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center;
}

.brand-logo{
  width: clamp(240px, 70vw, 600px);
  height:auto;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.16));
  opacity:0; transform: translateY(24svh);
  will-change: transform, opacity;
}

.brand-claim{
  margin: 0;
  color:#FFF4E9; font-weight:200;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height:1.35;
  opacity:0; transform: translateY(24px);
  will-change: transform, opacity;
  margin-top:20px;
}

.brand-social{
  display:flex; gap: clamp(16px, 2.6vw, 28px);
  justify-content:center; align-items:center;
  margin-top:40px;
  /* rodič zůstává viditelný, animujeme děti */
}

.brand-social .ico{
  width:50px; height:50px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#FFF4E9; background: rgba(255,244,233,.08);
  text-decoration:none;
  transition: transform .15s, background .15s, opacity .15s;
  opacity:0;                      /* start: skryté (animuje JS) */
  transform: translateY(24px);    /* start offset (animuje JS) */
}
.brand-social .ico i{ font-size:20px; line-height:1; display:block; }
.brand-social .ico:hover{ transform: translateY(-1px); background: rgba(255,244,233,.15); }

/* Copyright dole uprostřed – zobrazí se úplně poslední */
.brand-copy{
  position:absolute; left:50%; bottom:16px;
  transform: translateX(-50%) translateY(12px);
  margin:0; color:#FFF4E9; font-size:.95rem;
  opacity:0; pointer-events:none;
  will-change: transform, opacity;
  z-index:2;
}

/* ===== Mobilní doladění ===== */
@media (max-width:768px){
  .brand-social .ico{ width:40px; height:40px; }
  .brand-claim{ margin-top:10px; }
  .bubble--kod{ width:130px; }
  .bubble--mam{ width:160px; }
  .brand-copy{ font-size:.9rem; bottom:14px; }
}


.bubbles-scene{
  scroll-snap-align: start;   /* místo center */
  scroll-snap-stop: normal;   /* místo always – nevrací tě zpět */
}




@media (max-width: 768px) {
    #cojezlevnito {
        padding-top: 0vh!important;
        
    }
}


/* Footer / spodní odkazy */
.brand-copy {
  color: #fff;
  text-align: center;
}

.brand-copy a {
  color: inherit;           /* vezmi bílou z rodiče */
  text-decoration: none;    /* bez podtržení */
  margin: 0 .5rem;
  opacity: .9;
}

.brand-copy a:hover,
.brand-copy a:focus {
  text-decoration: underline;
  opacity: 1;
}

/* Samostatný blok s odkazy vedle © */
.brand-links {
  display: flex;            /* ať se to fakt zobrazí */
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0px!important;
}

.brand-links a {
  color: #fff;
  text-decoration: none;
  opacity: .9;
}

.brand-links a:hover,
.brand-links a:focus {
  text-decoration: underline;
  opacity: 1;
}

/* Zajisti, že nic nepřekrývá odkazy v bublinové scéně */
.bubbles-scene .brand-links,
.bubbles-scene .brand-copy {
  position: absolute;
  z-index: 3;
}

.bubbles-scene .bubbles-bg {
  pointer-events: none;     /* ať na ně nejde „kliknout“ */
  z-index: 1;
}