/* Strona główna — przeniesione z Layout V3, poprawki na dole pliku */
/* —— Page-specific —— */

    /* Hero — full-bleed, video-ready, overlay panel */
    .hero {
      position: relative;
      height: calc(100vh - 96px);
      min-height: 720px;
      overflow: hidden;
      background: #0a0908;
      color: var(--paper);
    }
    .hero__poster, .hero__video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      z-index: 0;
    }
    .hero__veil {
      position: absolute; inset: 0;
      background:
        linear-gradient(115deg, rgba(13,12,10,0.88) 0%, rgba(13,12,10,0.74) 30%, rgba(13,12,10,0.62) 62%, rgba(13,12,10,0.42) 85%, rgba(13,12,10,0.28) 100%),
        linear-gradient(180deg, rgba(13,12,10,0.30) 0%, rgba(13,12,10,0.05) 32%, rgba(13,12,10,0.72) 100%);
      z-index: 1;
      pointer-events: none;
    }
    .hero__sygnet {
      right: -110px; bottom: -140px;
      width: 560px; height: 560px;
      opacity: 0.10;
      z-index: 1;
    }
    .hero__edition {
      position: absolute;
      top: 36px; right: var(--pad-x);
      display: inline-flex; align-items: center; gap: 14px;
      color: rgba(250,248,244,0.82);
      font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase;
      z-index: 3;
    }
    .hero__edition .rule { background: var(--gold-soft); }
    .hero__inner {
      position: relative;
      z-index: 2;
      height: 100%;
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 0 var(--pad-x) clamp(64px, 7vw, 100px);
      gap: 32px;
      max-width: 1400px;
    }
    .hero__eyebrow {
      display: inline-flex; align-items: center; gap: 14px;
      color: rgba(250,248,244,0.78);
      font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase;
    }
    .hero__eyebrow .rule { background: var(--gold-soft); }
    .hero__title {
      font-family: var(--sans);
      font-weight: 200;
      font-size: clamp(48px, 6.6vw, 104px);
      line-height: 0.94;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--paper);
      margin: 0;
      max-width: 12ch;
      text-shadow: 0 2px 28px rgba(0,0,0,0.55);
    }
    .hero__title em {
      display: block;
      font-family: var(--serif);
      font-style: italic; font-weight: 300;
      text-transform: none;
      letter-spacing: -0.005em;
      color: var(--gold-pale);
      font-size: clamp(54px, 7.4vw, 116px);
      line-height: 0.96;
      margin-top: 6px;
      text-shadow: 0 2px 26px rgba(0,0,0,0.6);
    }
    .hero__row {
      display: grid; grid-template-columns: 1fr auto;
      gap: 48px; align-items: end;
      padding-top: 16px;
      border-top: 1px solid rgba(250,248,244,0.18);
    }
    .hero__body {
      max-width: 42ch;
      color: rgba(250,248,244,0.92);
      font-size: 15.5px; line-height: 1.7;
      padding-top: 28px;
      text-shadow: 0 1px 18px rgba(0,0,0,0.5);
    }
    .hero__ctas { display: flex; gap: 18px; align-items: center; padding-top: 28px;}
    .hero__cue {
      position: absolute;
      right: var(--pad-x); bottom: 40px;
      display: inline-flex; align-items: center; gap: 10px;
      color: rgba(250,248,244,0.55);
      font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
      z-index: 3;
    }
    .hero__cue::after {
      content: ""; width: 1px; height: 32px; background: rgba(250,248,244,0.4);
      display: inline-block; margin-left: 4px;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
    .hero__placeholder-label {
      position: absolute; top: 36px; left: var(--pad-x);
      display: inline-flex; align-items: center; gap: 10px;
      padding: 7px 12px;
      border: 1px solid rgba(250,248,244,0.25);
      color: rgba(250,248,244,0.55);
      font-size: 9.5px; letter-spacing: 0.32em; text-transform: uppercase;
      z-index: 3;
      background: rgba(13,12,10,0.45);
    }
    .hero__placeholder-label::before {
      content: ""; width: 6px; height: 6px; background: var(--gold-soft); border-radius: 50%;
      animation: pulse 1.6s ease-in-out infinite;
    }

    /* Philosophy — z dużym sygnetem-znakiem wodnym */
    .philosophy {
      position: relative;
      background: var(--paper);
      padding: clamp(80px, 11vw, 160px) var(--pad-x);
      overflow: hidden;
    }
    .philosophy__sygnet {
      left: -160px; top: 50%;
      width: 720px; height: 720px;
      transform: translateY(-50%);
      opacity: 0.07;
      z-index: 0;
    }
    .philosophy__inner {
      position: relative; z-index: 1;
      display: grid; grid-template-columns: 1fr 1.5fr;
      gap: clamp(48px, 7vw, 110px);
      align-items: start;
      max-width: 1320px; margin: 0 auto;
    }
    .philosophy__label { display: grid; gap: 18px; padding-top: 12px; }
    .philosophy__label .eyebrow { display: inline-flex; align-items: center; gap: 14px;}
    .philosophy__label .num {
      font-family: var(--serif); font-style: italic; font-weight: 400;
      font-size: clamp(56px, 6vw, 88px); line-height: 1;
      color: var(--gold);
      margin: 16px 0 0;
    }
    .philosophy__label small {
      font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase;
      color: var(--mute);
      display: block;
    }
    .philosophy__main h2 {
      font-family: var(--sans); font-weight: 200;
      font-size: clamp(34px, 4.6vw, 60px);
      line-height: 1.08; letter-spacing: 0.02em;
      margin: 0 0 28px;
      max-width: 20ch;
      color: var(--ink);
    }
    .philosophy__main h2 em {
      font-family: var(--serif); font-style: italic; font-weight: 400;
      letter-spacing: -0.005em;
      color: var(--ink-soft);
    }
    .philosophy__main p {
      margin: 0; color: var(--ink-soft);
      font-size: 16px; line-height: 1.75;
      max-width: 52ch;
    }
    .philosophy__pillars {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 36px; margin-top: 56px;
      padding-top: 36px; border-top: 1px solid var(--line);
    }
    .philosophy__pillars > div { display: grid; gap: 10px; }
    .philosophy__pillars .pno {
      font-size: 10.5px; letter-spacing: 0.32em;
      text-transform: uppercase; color: var(--gold);
    }
    .philosophy__pillars h3 {
      font-family: var(--serif); font-style: italic; font-weight: 400;
      font-size: 22px; margin: 0; color: var(--ink);
    }
    .philosophy__pillars .pdesc {
      font-size: 13.5px; color: var(--mute); line-height: 1.6; margin: 0;
    }

    /* Featured 3 */
    .featured-head {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: end;
      gap: 56px;
      padding: 0 var(--pad-x);
      margin-bottom: 72px;
    }
    .featured-head .left { display: grid; gap: 28px; }
    .featured-head .h2 { max-width: 12ch; }
    .featured-head .right {
      display: grid; gap: 14px; justify-items: end; text-align: right;
      max-width: 32ch;
    }
    .featured-grid {
      padding: 0 var(--pad-x);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(32px, 4vw, 56px);
    }
    .featured-grid .p-card__media { aspect-ratio: 4 / 5; }

    /* Editorial split */
    .editorial {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
    }
    .editorial__media { background: var(--paper-warm); min-height: 640px; position: relative; overflow: hidden; }
    .editorial__media img { width: 100%; height: 100%; object-fit: cover; }
    .editorial__media .caption {
      position: absolute; bottom: 28px; left: 28px;
      color: var(--paper); font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase;
      background: rgba(13,12,10,0.55); padding: 8px 12px;
    }
    .editorial__text {
      padding: clamp(64px, 9vw, 140px) clamp(48px, 7vw, 120px);
      display: flex; flex-direction: column; gap: 36px;
      justify-content: center;
      background: var(--paper);
    }
    .editorial__text .h2 { max-width: 16ch; }
    .editorial__text .lede { max-width: 26ch; }

    /* Categories */
    .cats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4px;
    }
    .cat {
      position: relative;
      aspect-ratio: 3 / 4;
      overflow: hidden;
      background: #1a1612;
      color: var(--paper);
    }
    .cat img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
      opacity: 0.85;
    }
    .cat:hover img { transform: scale(1.06); opacity: 0.95; }
    .cat__veil {
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(13,12,10,0) 35%, rgba(13,12,10,0.7) 100%);
    }
    .cat__label {
      position: absolute; left: 28px; right: 28px; bottom: 28px;
      display: flex; justify-content: space-between; align-items: flex-end;
    }
    .cat__name {
      font-family: var(--serif); font-style: italic; font-weight: 400;
      font-size: clamp(22px, 2.4vw, 34px); line-height: 1; letter-spacing: 0;
    }
    .cat__count {
      font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase;
      color: var(--gold-soft);
    }
    .cat__num {
      position: absolute; top: 24px; left: 28px;
      font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase;
      color: rgba(250,248,244,0.7);
    }

    /* Vending — premium retail moment */
    .vending {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      background: var(--ink);
      color: var(--paper);
      align-items: stretch;
      position: relative;
      overflow: hidden;
    }
    .vending__media {
      position: relative;
      overflow: hidden;
      min-height: 640px;
      background: #070605;
      order: 2;
    }
    .vending__media img {
      width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
    }
    .vending__caption {
      position: absolute;
      left: 28px; bottom: 28px;
      display: inline-flex; align-items: center; gap: 12px;
      padding: 8px 14px;
      border: 1px solid rgba(250,248,244,0.18);
      background: rgba(13,12,10,0.45);
      color: rgba(250,248,244,0.78);
      font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
    }
    .vending__caption .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-soft); }
    .vending__text {
      padding: clamp(64px, 8vw, 120px);
      display: flex; flex-direction: column; gap: 36px;
      justify-content: center;
      position: relative;
      order: 1;
    }
    .vending__sygnet {
      position: absolute;
      right: -120px; bottom: -180px;
      width: 540px; height: 540px;
      opacity: 0.05;
      z-index: 0;
    }
    .vending__text > * { position: relative; z-index: 1; }
    .vending__text .h2 { color: var(--paper); max-width: 16ch; }
    .vending__text .lede { color: rgba(250,248,244,0.85); max-width: 30ch; }
    .vending__text .body-on-dark {
      color: rgba(250,248,244,0.65);
      font-size: 14.5px; line-height: 1.7;
      max-width: 44ch;
    }
    .v-stats {
      display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
      padding-top: 32px; border-top: 1px solid rgba(250,248,244,0.15);
    }
    .v-stat .num {
      font-family: var(--serif); font-style: italic; font-weight: 400;
      font-size: 56px; line-height: 1; color: var(--gold-soft);
    }
    .v-stat .lbl {
      font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase;
      color: rgba(250,248,244,0.6); margin-top: 12px;
    }

    /* B2B */
    .b2b {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      background: var(--paper-warm);
    }
    .b2b__text {
      padding: clamp(64px, 8vw, 120px);
      display: flex; flex-direction: column; gap: 32px;
      justify-content: center;
    }
    .b2b__media { background: var(--ink); min-height: 540px; position: relative; overflow: hidden; }
    .b2b__media img { width: 100%; height: 100%; object-fit: cover; }
    .b2b__points { display: grid; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); }
    .b2b__points li {
      list-style: none;
      display: flex; gap: 16px; align-items: baseline;
      font-size: 14px; color: var(--ink-soft);
    }
    .b2b__points li::before {
      content: ""; width: 18px; height: 1px; background: var(--gold);
      transform: translateY(-4px); flex-shrink: 0;
    }

    /* Promises belt — kompaktowy pasek pod hero */
    .promises {
      background: var(--pure);
      padding: 30px var(--pad-x);
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 56px;
      align-items: center;
      border-bottom: 1px solid var(--line);
    }
    .promises__head {
      display: flex; align-items: center; gap: 14px;
      font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase;
      color: var(--ink);
      min-width: 200px;
    }
    .promises__head .sygnet {
      width: 26px; height: 26px;
      display: inline-block;
    }
    .promises__head .sygnet img { width: 100%; height: 100%; }
    .promises__row {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    }
    .promise {
      padding: 4px 28px;
      display: flex; flex-direction: column; gap: 6px;
      border-left: 1px solid var(--line);
    }
    .promise:first-child { padding-left: 0; border-left: none; }
    .promise__name {
      font-family: var(--sans); font-weight: 400;
      font-size: 12px; letter-spacing: 0.24em;
      text-transform: uppercase; color: var(--ink);
    }
    .promise__desc {
      font-size: 12.5px; color: var(--mute);
      line-height: 1.55; max-width: 32ch;
    }

    /* Testimonial */
    .testimonial {
      text-align: center;
      padding: clamp(80px, 10vw, 140px) var(--pad-x);
      background: var(--paper);
    }
    .testimonial blockquote {
      max-width: 24ch; margin: 32px auto 0;
      font-family: var(--serif); font-style: italic; font-weight: 300;
      font-size: clamp(28px, 3.2vw, 44px);
      line-height: 1.2;
      color: var(--ink);
    }
    .testimonial cite {
      display: block;
      margin-top: 36px;
      font-style: normal;
      font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase;
      color: var(--mute);
    }
    .test-controls {
      display: flex; justify-content: center; gap: 12px; margin-top: 56px;
    }
    .test-dot {
      width: 22px; height: 1px; background: var(--line);
    }
    .test-dot.is-active { background: var(--ink); }

    /* FAQ */
    .faq-section {
      padding: clamp(70px, 9vw, 130px) var(--pad-x);
      background: var(--pure);
    }
    .faq-grid {
      display: grid; grid-template-columns: 1fr 1.6fr;
      gap: clamp(48px, 7vw, 110px);
      align-items: start;
      max-width: 1320px; margin: 0 auto;
    }
    .faq-aside { display: grid; gap: 18px; }
    .faq-aside .eyebrow { display: inline-flex; align-items: center; gap: 14px; }
    .faq-aside .num {
      font-family: var(--serif); font-style: italic; font-weight: 400;
      font-size: clamp(48px, 5vw, 76px); line-height: 1;
      color: var(--gold); margin: 10px 0 0;
    }
    .faq-aside h2 {
      font-family: var(--sans); font-weight: 200;
      font-size: clamp(26px, 2.6vw, 38px);
      line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase;
      margin: 8px 0 0; max-width: 14ch;
    }
    .faq-aside p { margin: 0; font-size: 13.5px; color: var(--mute); line-height: 1.6; max-width: 30ch; }
    .faq { display: grid; gap: 0; }
    .faq details { border-top: 1px solid var(--line); padding: 22px 0; }
    .faq details:last-child { border-bottom: 1px solid var(--line); }
    .faq summary {
      list-style: none; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center; gap: 24px;
      font-size: 13.5px; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--ink);
    }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after { content: "+"; font-size: 22px; font-weight: 300; color: var(--gold); }
    .faq details[open] summary::after { content: "−"; }
    .faq p.faq-a {
      padding-top: 14px; margin: 0; color: var(--ink-soft);
      max-width: 62ch; line-height: 1.7; font-size: 14.5px;
    }

    @media (max-width: 1024px) {
      .faq-grid { grid-template-columns: 1fr; gap: 32px; }
      .hero { min-height: 600px; height: auto; padding-top: 40px; }
      .hero__inner { padding-bottom: 60px; }
      .hero__row { grid-template-columns: 1fr; gap: 24px; }
      .hero__edition, .hero__cue, .hero__placeholder-label { display: none; }
      .promises { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
      .promises__row { grid-template-columns: 1fr 1fr; gap: 18px; }
      .promise { padding: 8px 16px; }
      .philosophy__inner { grid-template-columns: 1fr; gap: 32px; }
      .philosophy__pillars { grid-template-columns: 1fr; gap: 24px; }
      .editorial, .vending, .b2b { grid-template-columns: 1fr; }
      .editorial__media, .vending__media, .b2b__media { min-height: 480px; }
      .vending__text { order: 1; } .vending__media { order: 2; }
      .featured-grid { grid-template-columns: 1fr; }
      .featured-head { grid-template-columns: 1fr; gap: 24px; }
      .featured-head .right { justify-items: start; text-align: left; }
      .cats { grid-template-columns: repeat(2, 1fr); }
    }

/* ————————————————— Poprawki motywu ————————————————— */
.hero { height: calc(100svh - 128px); max-height: 1000px; }
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__poster { object-position: 78% center; transform: scale(1.14); transition: transform 3.2s cubic-bezier(.16,1,.3,1); }
.hero.is-loaded .hero__poster { transform: scale(1); }
.hero__video { opacity: 0; transition: opacity 1.2s ease; }
.hero__video.is-playing { opacity: 1; }
.hero__row { --line-color: rgba(250,248,244,.18); }
.hero__sygnet img { animation: sygnet-drift 24s ease-in-out infinite alternate; }
@keyframes sygnet-drift { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(3deg) translateY(-24px); } }

.philosophy__label .eyebrow, .faq-aside .eyebrow { display: inline-flex; align-items: center; }
.philosophy__pillars { --line-color: var(--line); }
.featured { padding: clamp(20px,2vw,40px) 0 clamp(80px,9vw,140px); }
.featured-head .right .body { font-size: 14px; margin: 0; }
.editorial__media img, .vending__media img, .b2b__media img { position: absolute; inset: 0; }
.editorial__media .caption, .vending__caption { z-index: 2; }
.editorial__media, .b2b__media { --mask-bg: var(--paper-warm); }
.vending__media { --mask-bg: var(--ink); }
.vending__text .eyebrow { display: inline-flex; align-items: center; }

/* FAQ — płynne rozwijanie */
.faq details .faq-a-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .6s var(--ease-out); }
.faq details .faq-a-wrap > p { overflow: hidden; }
.faq details.is-animating .faq-a-wrap { grid-template-rows: 0fr; }
.faq summary { transition: color .3s ease; }
.faq summary:hover { color: var(--gold); }
.faq summary::after { transition: transform .5s var(--ease); }
.faq details[open] summary::after { content: "+"; transform: rotate(45deg); }

/* Opinie — przenikanie */
.testimonial__stage { display: grid; max-width: 760px; margin: 32px auto 0; }
.faq-aside .link-arrow, .philosophy__label .eyebrow { justify-self: start; }
.testimonial__slide { grid-area: 1 / 1; margin: 0; opacity: 0; filter: blur(8px); transform: translateY(10px); transition: opacity 1s var(--ease), filter 1s var(--ease), transform 1.2s var(--ease-out); pointer-events: none; }
.testimonial__slide.is-active { opacity: 1; filter: none; transform: none; pointer-events: auto; }
.testimonial blockquote { margin: 0; max-width: none; }
.test-dot { border: 0; padding: 0; cursor: pointer; position: relative; transition: background .4s ease, width .6s var(--ease-out); }
.test-dot::after { content: ""; position: absolute; inset: -10px 0; }
.test-dot.is-active { width: 44px; }

@media (max-width: 1024px) {
  .hero { height: auto; min-height: min(calc(100svh - 90px), 900px); display: flex; padding-top: 0; }
  .hero__inner { height: auto; margin-top: auto; padding-top: 120px; }
  .hero__ctas { flex-wrap: wrap; }
  .editorial__media, .vending__media, .b2b__media { min-height: 0; aspect-ratio: 4 / 5; }
  .vending__text, .b2b__text, .editorial__text { padding: 64px var(--pad-x); }
  .philosophy__sygnet { width: 420px; height: 420px; left: -140px; }
  .promise { border-left: 0; padding: 0; }
  .featured-grid { gap: 56px; }
}
@media (max-width: 560px) {
  .promises__row { grid-template-columns: 1fr; }
  .v-stats { gap: 24px; }
  .hero__title { font-size: 42px; }
  .hero__title em { font-size: 50px; }
}