/* ============ SECTIONS — BOLD bloki ============ */

/* ---------- 01 · HERO — sandwich ---------- */
.s-hero {
  background: var(--grad-aurora);
  min-height: 100svh;
  padding: calc(56px + var(--gutter)) var(--gutter) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.s-hero__index { opacity: .5; margin-bottom: 12px; }

.s-hero__h1 {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.s-hero__line {
  display: block;
  position: relative;
  overflow: hidden;
  padding-bottom: .06em;
  margin-bottom: -.02em;
}
.s-hero__line--back { z-index: var(--z-back); }
.s-hero__line--front { z-index: var(--z-front); }
.s-hero__line--yellow { color: var(--yellow); }
.s-hero__line--pink { color: var(--pink); }
.s-hero__inner { display: inline-block; transform-origin: left bottom; }

.s-hero .bottle-anchor {
  position: absolute;
  top: 16%;
  left: 56%;
  width: min(32vw, 460px);
  aspect-ratio: 4 / 5;
}

/* lite/static: WebP w ŚRODKU sandwicha */
.s-hero { position: relative; } /* kotwica dla anchora; sekcja NIE dostaje z-index */
.s-hero .bottle-fallback { z-index: 2; }

.s-hero__mast {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  border-top: var(--rule) var(--cream);
  border-bottom: var(--rule) var(--cream);
  padding: 14px 0;
  margin: clamp(24px, 4vh, 48px) 0 0;
  opacity: .85;
}

.s-hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.s-hero__sub { font-size: var(--fs-lead); color: var(--cream-soft); max-width: 44ch; }
.s-hero__sub strong { color: var(--yellow); }
.s-hero__ctas { display: flex; gap: 0; }
.s-hero__ctas .btn + .btn { border-left: none; }

/* ---------- 02 · ŚCIANA MARQUEE ---------- */
.s-wall {
  background: var(--grad-ribbon);
  color: var(--ink);
  border-top: var(--rule-bold) var(--ink);
  border-bottom: var(--rule-bold) var(--ink);
}
.s-wall__row {
  border-bottom: var(--rule) var(--ink);
  padding: clamp(8px, 1.6vh, 20px) 0;
}
.s-wall__row:last-child { border-bottom: none; }

.marquee {
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 7.5vw, 110px);
  line-height: 1;
  letter-spacing: -.02em;
  user-select: none;
}
.marquee__track { display: inline-block; will-change: transform; }
.marquee__track span { display: inline-block; padding-right: .3em; }

.s-wall__row--outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}

/* ---------- 03 · DLACZEGO — editorial index ---------- */
.s-why {
  background: var(--grad-hot);
  color: var(--navy);
  padding: var(--block-pad) 0;
}
.s-why__head {
  padding: 0 var(--gutter);
  margin-bottom: clamp(28px, 4vw, 56px);
}
.s-why__head .mono { opacity: .65; margin-bottom: 10px; }
.s-why__h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
  display: inline-block;
}

.s-why__rows { border-top: var(--rule-bold) var(--navy); }

.s-why__row {
  display: grid;
  grid-template-columns: clamp(48px, 6vw, 96px) minmax(0, 1.2fr) minmax(0, 1fr) clamp(40px, 5vw, 80px);
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  padding: clamp(20px, 3vw, 40px) var(--gutter);
  border-bottom: var(--rule-bold) var(--navy);
  /* invert natychmiastowy — brutalizm nie zna easingu */
}
.s-why__row:hover { background: var(--navy); color: var(--pink); }

.s-why__num { opacity: .6; }
.s-why__title {
  font-family: var(--font-display);
  font-size: var(--fs-row);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.s-why__body { font-size: var(--fs-body); opacity: .8; max-width: 44ch; }
.s-why__arrow {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 800;
  text-align: right;
}

.s-why__outro {
  padding: clamp(20px, 3vw, 36px) var(--gutter) 0;
  opacity: .65;
}

/* ---------- 04 · LICZBY — pin ---------- */
.s-num {
  background: var(--grad-deep);
  color: var(--cream);
}
.s-num__pin {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(56px + var(--gutter)) var(--gutter) var(--gutter);
  position: relative;
}
.s-num__index { opacity: .5; }

.s-num__stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.s-num__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(8px, 2vh, 24px);
}
html[data-tier="full"] .s-num__slide { opacity: 0; visibility: hidden; }
html[data-tier="full"] .s-num__slide:first-child { opacity: 1; visibility: visible; }

.s-num__digit {
  font-family: var(--font-display);
  font-size: var(--fs-digit);
  font-weight: 800;
  line-height: .78;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  color: var(--yellow);
  display: inline-block;
}
.s-num__label { max-width: 64ch; opacity: .7; line-height: 1.7; }

.s-num .bottle-anchor {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(28vw, 380px);
  aspect-ratio: 4 / 5;
  margin: calc(min(28vw, 380px) * -0.625) 0 0 calc(min(28vw, 380px) / -2);
}

.s-num__progress {
  position: absolute;
  right: var(--gutter);
  bottom: var(--gutter);
  opacity: .6;
  font-variant-numeric: tabular-nums;
}

/* ---------- 05 · JAK DZIAŁA — spis treści ---------- */
.s-how {
  background: var(--grad-cream);
  color: var(--navy);
  padding: var(--block-pad) 0;
}
.s-how__head { padding: 0 var(--gutter); margin-bottom: clamp(28px, 4vw, 56px); }
.s-how__head .mono { opacity: .6; margin-bottom: 10px; }
.s-how__h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
  display: inline-block;
}

.s-how__rows { border-top: var(--rule-bold) var(--navy); }
.s-how__row {
  display: grid;
  grid-template-columns: clamp(120px, 22vw, 340px) 1fr;
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
  padding: clamp(24px, 4vw, 56px) var(--gutter);
  border-bottom: var(--rule-bold) var(--navy);
}
.s-how__num {
  font-family: var(--font-display);
  font-size: clamp(90px, 18vw, 280px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 2px var(--navy);
}
.s-how__txt h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-bottom: 12px;
}
.s-how__txt p { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 60ch; }
.s-how__txt strong { color: var(--pink-deep); font-weight: 600; }
.s-how__callout { padding: clamp(20px, 3vw, 36px) var(--gutter) 0; opacity: .6; }

/* ---------- 06 · OPINIE — pull-quotes ---------- */
.s-quotes {
  background: var(--grad-night);
  color: var(--cream);
  padding: var(--block-pad) var(--gutter);
}
.s-quotes__index { opacity: .5; margin-bottom: clamp(28px, 5vh, 64px); }

.s-quotes__q {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  border-bottom: var(--rule) rgba(255, 247, 230, .25);
  padding: clamp(24px, 5vh, 64px) 0;
}
.s-quotes__q:last-child { border-bottom: none; }
.s-quotes__q blockquote {
  font-family: var(--font-display);
  font-size: var(--fs-quote);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.02em;
  max-width: 18ch;
  display: inline-block;
}
.s-quotes__q:nth-child(odd) blockquote { align-self: flex-end; text-align: right; }
.s-quotes__q figcaption { opacity: .55; }
.s-quotes__q--invite blockquote { color: var(--yellow); }

/* ---------- 07 · KUP — sandwich + tabela ---------- */
.s-buy {
  background: var(--grad-sunrise);
  color: var(--ink);
  padding: var(--block-pad) var(--gutter);
  position: relative; /* kotwica anchora; bez z-index! */
}

.s-buy__h2 {
  font-family: var(--font-display);
  font-size: clamp(48px, 9.5vw, 170px);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin-bottom: clamp(24px, 4vh, 56px);
}
.s-buy__line { display: block; position: relative; }
.s-buy__line--back { z-index: var(--z-back); }
.s-buy__line--front { z-index: var(--z-front); text-align: right; }
.s-buy__line span { display: inline-block; }

.s-buy .bottle-anchor {
  position: absolute;
  top: clamp(8px, 2vh, 40px);
  left: 50%;
  width: min(24vw, 320px);
  aspect-ratio: 4 / 5;
}
.s-buy .bottle-fallback { z-index: 2; }

.s-buy__sub {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  margin-bottom: clamp(28px, 4vh, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
}

.s-buy__table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--rule-bold) var(--ink);
  position: relative;
  z-index: var(--z-front); /* tabela NAD butelką — butelka nurkuje za cennik */
  background: var(--cream); /* solidne karty na gradiencie — sticker na etykiecie */
}
.s-buy__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: clamp(20px, 2.6vw, 40px);
  border-right: var(--rule-bold) var(--ink);
}
.s-buy__cell:last-child { border-right: none; }
.s-buy__cell--hot { background: var(--navy); color: var(--cream); }

.s-buy__tag { opacity: .65; }
.s-buy__qty {
  font-family: var(--font-display);
  font-size: clamp(72px, 9vw, 150px);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.04em;
}
.s-buy__unit { opacity: .6; }
.s-buy__price {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 38px);
  font-weight: 800;
  margin-top: 14px;
}
.s-buy__per { opacity: .6; }
.s-buy__btn { margin-top: 20px; width: 100%; }
.s-buy__cell--hot .btn--solid { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.s-buy__cell--hot .btn--solid:hover { background: var(--pink); border-color: var(--pink); color: var(--cream); }

.s-buy__mega {
  display: block;
  margin-top: clamp(28px, 4vh, 56px);
  background: var(--navy);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 8.5vw, 140px);
  line-height: 1;
  letter-spacing: -.03em;
  text-align: center;
  padding: clamp(20px, 3vw, 44px) var(--gutter);
  position: relative;
  z-index: var(--z-front);
  transition: background-color var(--dur-snap) steps(1, end);
}
.s-buy__mega:hover { background: var(--pink-deep); }
.s-buy__mega:hover .s-buy__megainner { background-image: linear-gradient(90deg, var(--cream), var(--cream)); }
/* tekst w gradiencie etykiety — clip na spanie BEZ transformów (velocity na bandzie) */
.s-buy__megainner {
  display: inline-block;
  background-image: var(--grad-ribbon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 08 · STOPKA ---------- */
.footer {
  background: var(--grad-night);
  color: var(--cream);
  border-top: var(--rule-bold) var(--cream);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
}
.footer__cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(24px, 3vw, 48px) var(--gutter);
  border-right: var(--rule) rgba(255, 247, 230, .3);
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: .1em;
}
.footer__cell:last-child { border-right: none; }
.footer__cell a { opacity: .7; width: fit-content; }
.footer__cell a:hover { opacity: 1; color: var(--yellow); }
.footer__head { opacity: .45; margin-bottom: 6px; }
.footer__logo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
}
.footer__disclaimer {
  border-top: var(--rule) rgba(255, 247, 230, .3);
  padding: 20px var(--gutter) 28px;
  font-size: 10px;
  opacity: .5;
  line-height: 1.9;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 899px) {
  .nav__links { display: none; }

  .s-hero .bottle-anchor { left: 48%; width: min(52vw, 300px); top: 14%; }
  .s-hero__foot { flex-direction: column; align-items: stretch; }
  .s-hero__ctas .btn { flex: 1; }

  .s-why__row { grid-template-columns: 40px 1fr; grid-template-rows: auto auto; }
  .s-why__body { grid-column: 2; }
  .s-why__arrow { display: none; }

  .s-how__row { grid-template-columns: 1fr; gap: 8px; }
  .s-how__num { font-size: clamp(72px, 22vw, 140px); }

  .s-quotes__q { min-height: 50vh; }
  .s-quotes__q blockquote { max-width: 100%; }

  .s-buy__table { grid-template-columns: 1fr; }
  .s-buy__cell { border-right: none; border-bottom: var(--rule-bold) var(--ink); }
  .s-buy__cell:last-child { border-bottom: none; }
  .s-buy__cell--hot { order: -1; }
  .s-buy .bottle-anchor { left: 52%; width: min(44vw, 240px); }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__cell { border-bottom: var(--rule) rgba(255, 247, 230, .2); }
}