/* Premium v5 — final layout pass based on latest client remarks. */

/* HERO: completely new premium lips visual, clearly communicating the lip procedure. */
.hero{
  background:
    linear-gradient(90deg,
      rgba(248,244,239,.99) 0%,
      rgba(248,244,239,.97) 22%,
      rgba(248,244,239,.92) 34%,
      rgba(248,244,239,.76) 46%,
      rgba(248,244,239,.44) 58%,
      rgba(248,244,239,.12) 75%,
      rgba(248,244,239,.02) 100%),
    url("../assets/hero-premium-lips-v3.webp") 88% center/cover no-repeat;
  min-height: 700px;
}
.hero-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:700px}
.hero-content{max-width:610px;padding:96px 0 98px;position:relative;z-index:2}
.hero-lead{max-width:470px}
.hero-visual--background-only{height:700px}
.hero-visual--background-only .hero-signature{
  right: 3.5%;
  bottom: 150px;
  max-width: 235px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 34px rgba(88,61,46,.26);
}
.hero-visual--background-only .hero-signature span{color:rgba(255,255,255,.78)}
.hero-visual--background-only .hero-seal{right:4%;bottom:44px;background:rgba(255,250,246,.82);backdrop-filter:blur(8px)}

/* PREVIEW — keep the compare component cleaner and more premium. */
.preview-layout{grid-template-columns:minmax(0,.84fr) minmax(0,1.24fr) minmax(150px,.42fr);gap:38px}
.compare-wrap{padding:22px 22px 18px;border-radius:34px}
.compare{min-height:440px;border-radius:26px}

/* ABOUT — create clear spacing between columns and stop the cramped feeling. */
.about-section{
  width:min(1380px, calc(100% - 56px));
  margin: 82px auto;
  padding: 26px;
  gap: 28px;
  grid-template-columns: minmax(0,32%) minmax(0,40%) minmax(0,28%);
  min-height: 650px;
  overflow: visible;
}
.about-photo,
.about-content,
.about-features{
  border-radius: 28px;
}
.about-photo{
  min-height: 598px;
  overflow:hidden;
  box-shadow: 0 14px 42px rgba(67,48,35,.06);
}
.about-photo img{object-position:center 6%}
.about-content{
  min-height: 598px;
  padding: 46px clamp(30px,3vw,46px);
  background: rgba(255,253,251,.9);
  border: 1px solid rgba(156,122,91,.10);
  box-shadow: 0 14px 34px rgba(67,48,35,.05);
}
.about-features{
  min-height: 598px;
  padding: 24px 0 24px 30px;
  background: rgba(255,251,247,.72);
  border-left: 1px solid rgba(156,122,91,.12);
}

/* FINAL CTA / ZACZYNAMY — no more text over the image. */
.final-cta{
  padding: 0 0 18px;
  background: transparent;
}
.final-cta-inner{
  min-height: 390px;
  display: grid;
  grid-template-columns: minmax(0,31%) minmax(0,43%) minmax(0,26%);
  gap: 26px;
  align-items: stretch;
  padding: 28px;
  background: linear-gradient(90deg,#ead8ca 0%, #f7f0ea 38%, #f2e9e1 100%);
  border-radius: 36px;
  border: 1px solid rgba(156,122,91,.10);
  box-shadow: 0 16px 48px rgba(73,53,37,.07);
  overflow: hidden;
}
.final-cta-media{
  position: relative;
  min-height: 334px;
  border-radius: 28px;
  overflow: hidden;
}
.final-cta-image{
  position:absolute;
  inset:0;
  width:auto;
  opacity:1;
  background: url("../assets/final-cta-premium-v2.webp") center center/cover no-repeat;
  mask-image:none;
  -webkit-mask-image:none;
}
.final-cta-copy{
  grid-column: auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding: 18px 8px;
}
.final-cta-copy > p{max-width: 520px}
.cta-signature{
  grid-column: auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-self:center;
  max-width: 270px;
  padding-left: 8px;
  text-align:left;
}

@media (max-width: 1190px){
  .hero{background-position: 92% center}
  .about-section{width:min(1380px, calc(100% - 34px));padding:20px;gap:20px}
  .final-cta-inner{grid-template-columns:minmax(0,30%) minmax(0,44%) minmax(0,26%);gap:22px;padding:22px}
}

@media (max-width: 990px){
  .hero,
  .hero-layout,
  .hero-visual--background-only{min-height: 610px}
  .hero{background-position: 76% center}
  .hero-content{padding: 68px 0 72px}
  .hero-visual--background-only{height:610px}
  .hero-visual--background-only .hero-signature{bottom:116px;max-width:180px}

  .preview-layout{grid-template-columns:1fr;gap:24px}
  .compare{min-height:390px}

  .about-section{
    width:min(100%, calc(100% - 32px));
    grid-template-columns:1fr;
    gap:18px;
    padding:18px;
    min-height:0;
  }
  .about-photo,.about-content,.about-features{min-height:0}
  .about-photo{height:520px}
  .about-photo img{object-position:center 8%}
  .about-content{padding:28px 22px}
  .about-features{padding:20px 22px;border-left:0;border-top:1px solid rgba(156,122,91,.12)}

  .final-cta-inner{
    grid-template-columns:1fr;
    min-height:0;
    gap:18px;
    padding:18px;
  }
  .final-cta-media{min-height:280px}
  .cta-signature{max-width:none;padding-left:0;text-align:center;justify-self:center}
}

@media (max-width: 700px){
  .hero{
    min-height:0;
    background:
      linear-gradient(180deg,
        rgba(248,244,239,.96) 0%,
        rgba(248,244,239,.90) 36%,
        rgba(248,244,239,.56) 58%,
        rgba(248,244,239,.18) 100%),
      url("../assets/hero-premium-lips-v3.webp") 72% center/cover no-repeat;
  }
  .hero-layout{display:flex;flex-direction:column;min-height:0}
  .hero-content{padding:44px 0 18px;max-width:none}
  .hero-visual--background-only{height:330px;min-height:330px}
  .hero-visual--background-only .hero-signature{right:3%;bottom:84px;max-width:156px}
  .hero-visual--background-only .hero-seal{right:3%;bottom:14px}

  .compare-wrap{padding:14px;border-radius:24px}
  .compare{min-height:310px;border-radius:18px}

  .about-section{width:calc(100% - 20px);margin:48px auto;padding:14px;gap:14px}
  .about-photo{height:440px}
  .about-photo img{object-position:center 6%}
  .about-content{padding:20px 16px}
  .about-features{padding:18px 16px}

  .final-cta-inner{padding:14px;border-radius:26px}
  .final-cta-media{min-height:220px}
  .final-cta-copy{padding:14px 4px}
}