/* ===== Hero (DermaLift PRO) — Flex layout ===== */
.hero.hero--dlpro {
  /* background: linear-gradient(
138deg, #dcdce2 0%, #ffffff 100%); */
  /* background: linear-gradient(135deg, #ffffff 0%, #f6f7f9 55%, #ffffff 100%),
    radial-gradient(900px 480px at 12% 18%, rgba(120,130,150,0.10) 0%, rgba(120,130,150,0.00) 60%),
    radial-gradient(1000px 520px at 86% 80%, rgba(120,130,150,0.09) 0%, rgba(120,130,150,0.00) 65%); */
  background-blend-mode: normal, soft-light, normal;
  --top: #faf2f2;  /* lekko chłodny błękitny odcień */
  --mid:   #FFFFFF;  /* czysta biel w centrum */
  --base: #faf7f7;  /* bardzo delikatna, cieplejsza biel na dole */
  --halo:  rgba(232, 238, 248, 0.55); /* miękki „halo” u góry */

  /* 1) delikatny halo od góry, 2) główny pionowy gradient */
  background:
    radial-gradient(1200px 600px at 50% 0%, var(--halo) 0%, rgba(232,238,248,0) 65%),
    linear-gradient(180deg, var(--top) 0%, var(--mid) 52%, var(--base) 100%);

  /* opcjonalnie: gładkie przejścia przy scroll/resize */
  background-attachment: local;
  background-repeat: no-repeat;
  /* background: linear-gradient(180deg, #ffffff 50%, #f7f8f9) 100%; */
}
.price del {
  display: block !important;
}

.hero.hero--dlpro .marginauto .media-container{
  position: relative;
  display: flex;
  align-items: center;         /* pionowe wyrównanie jak w makiecie */
  justify-content: center;
  max-width: 1400px;           /* zamiast var(--max-w) */
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  width: 100%;
  flex-wrap: wrap; /* pozwala przejść do nowej linii */
  align-content: center;
}

.hero.hero--dlpro .product-intro-text {
  flex: 0 0 100%;
  padding-top: 7rem;
}
/* lewa kolumna */
.hero.hero--dlpro .headline-wrapper{
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 0 0 60%;
    justify-content: center;
    z-index: 9;
}

/* prawa kolumna */
.hero.hero--dlpro .device-wrapper{
  display: flex;
  flex-direction: column;
  position: relative;
  margin: auto;
  flex: 0 0 40%;
  align-items: center;
  justify-content: center;
  max-height: 50dvh;
  max-width: 1000px;
  align-self: center;
  width: 100%;
}
.hero.hero--dlpro .mobile-claims {
  display: none;
}
.hero.hero--dlpro .video-overlay img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  display: block;
  -webkit-mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 1) 78%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 1) 78%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  max-height: 900px;
  display: none;
}
/* reszta stylów — bez zmian */
.hero.hero--dlpro .logo-bottom{
  position: absolute;
  opacity: 0.9;
  bottom: 8rem;
  margin: auto;
}
.hero.hero--dlpro .brand-icon{height: 35px;width:auto;}

.hero.hero--dlpro .hero-kicker{
  font-size: clamp(1rem, 4vw, 2rem); /* zamiast var(--kicker-fs) */
  letter-spacing: .01em;
  margin-bottom: 1rem;
  color: #424242;
  opacity:.75;
  font-weight: 300;
}

.hero.hero--dlpro .headline-title{
  font-size: clamp(2.5rem, 5vw, 5rem);        /* zamiast var(--title-fs) */
  font-weight: 200;
  color:#1a1a1a;
  letter-spacing: 3px;
  position: relative;
}
.hero.hero--dlpro .headline-title .bold{ font-weight:400; }
.hero.hero--dlpro #hero-title .trademark{position: absolute;}
.hero.hero--dlpro .trademark{font-size: .6em;vertical-align: super;}

.hero.hero--dlpro .tech-list{
  display:flex;
  flex-wrap:wrap;
  gap: 5px 25px;
  padding:0;
  margin: 0;
  list-style:none;
  margin-top: 0.5rem;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.hero.hero--dlpro .tech-item{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-size: clamp(1rem, 3vw, 1.6rem); /* zamiast var(--tech-fs) */
  color:#5e5a57;
  font-weight: 300;
  letter-spacing: 0.2px;
}
.hero.hero--dlpro .tech-item img{
  width: 25px;
  height: 25px;
  object-fit:contain;
  display:block;
  /* filter:saturate(.85) contrast(.95); */
  /* filter: brightness(0) saturate(100%) invert(63%) sepia(8%) saturate(466%) hue-rotate(317deg) brightness(99%) contrast(90%); */
  /* filter: brightness(0) saturate(100%) invert(51%) sepia(82%) saturate(612%) hue-rotate(190deg) brightness(99%) contrast(104%); */
  filter: brightness(0) saturate(100%) invert(66%) sepia(67%) saturate(391%) hue-rotate(189deg) brightness(99%) contrast(106%);
}

.hero.hero--dlpro .hero-claims{
  display:grid;
  gap: 5px;
  margin: 4rem 0 4rem 0;
}
.hero.hero--dlpro .claim{
  font-size: clamp(1.2rem, 4vw, 3rem);        /* zamiast var(--claim-fs) */
  line-height:1.15;
  font-weight: 600;
  /* color: #d9c4c6; */
  margin:0;
  letter-spacing:-.01em;
  background: linear-gradient(180deg, rgb(94 94 94) 0%, rgb(0 0 0) 100%) text;
  -webkit-text-fill-color: transparent;
}

 .hero .product-cta {
     text-align: center;
     flex: 0 0 20%;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     flex-direction: column;
     z-index: 100;
     /* width: fit-content; */
}
 .hero .read-more {
     padding: 0.75em 2em;
     font-size: 1.1rem;
     color: #ffffff;
     /* background: linear-gradient(108deg, #2084c0 0%, #55bffe 100%); */
     background: linear-gradient(
135deg, #ae8c87 0%, #e5c6c3 100%);
     /* background: #313131; */
     border-radius: 999px;
     cursor: pointer;
     line-height: 1.2;
     font-weight: 400;
     letter-spacing: 0.5px;
     font-family: 'Helvetica Neue';
     text-decoration: none;
     /* border: 1px solid #c6c6c6; */
}
 .hero .scroll-arrows {
     width: 15px;
     height: 17px;
     margin-left: 10px;
}
 .hero .scroll-arrows path {
     stroke: #ffffff;
     fill: transparent;
     stroke-width: 4px;
     animation: arrow 1.5s infinite;
     -webkit-animation: arrow 1.5s infinite;
     width: 20px;
}
 @keyframes arrow {
     0% {
         opacity: 0;
         transform: translateY(-15px) 
    }
     80% {
         opacity: 1;
         transform: translateY(10px) 
    }
     100% {
         opacity: 0;
         transform: translateY(10px) 
    }
}
 @-webkit-keyframes arrow 
 {
     0% {
         opacity: 0;
         transform: translateY(-15px) 
    }
     80% {
         opacity: 1;
         transform: translateY(10px) 
    }
     100% {
         opacity: 0;
         transform: translateY(10px) 
    }
}
 .hero .arrows path.a1 {
     animation-delay: -0.5s;
     -webkit-animation-delay: -0.5s;
}
 .hero .read-more:hover {
     background: linear-gradient(
135deg, #a97b76 0%, #a1827f 100%)
}
 .hero .price {
     margin-bottom: 1rem;
     font-size: clamp(1.5rem, 4vw, 2rem);
     color: #3a3f41;
     /* width: 100%; */
     margin-left: 3rem;
     display: flex;
     flex-direction: row-reverse;
     align-items: center;
}
 .hero .price del {
  display: block !important;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  color: #3a3f41;
  margin-right: 0.5rem;
  opacity: 0.4;
}
/* wideo + overlay */
.hero.hero--dlpro .hero-video{
  width: 100%;
  height: 100%;
  object-fit:contain;
  background:#fff;            /* wymusza biały „letterbox” */
  display:block;
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(closest-side, rgba(0,0,0,1) 78%, rgba(0,0,0,0) 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  max-height: 1200px;
  /* display: none; */
}



.feature-section.heat-mode {
    background: linear-gradient(180deg, #f7f8f9 0%, #f9f9fb 10%, #f9f9fb 90%, #ffffff) 100%;
}
.feature-section.hifu-mode {
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfe 10%, #fbfbfd 90%, #ffffff) 100%;
}
.feature-section.circu-mode {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 10%, #ffffff 90%, #ffffff) 100%;
}
.feature-section.ems-mode {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 10%, #ffffff 90%, #f9f9f9) 100%;
}
.feature-section.sequence-mode {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 10%, #ffffff 90%, #ffffff) 100%;
}
.feature-section.led-mode {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 10%, #ffffff 90%, #ffffff) 100%;
}
.feature-section.tools-mode {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 10%, #ffffff 90%, #ffffff) 100%;
}
.feature-carousel.gallery {
    background: linear-gradient(180deg, #f9f9f9 0%, #f9f9f9 10%, #f9f9f9 90%, #ffffff) 100%;
}
.feature-carousel.in-the-box {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 10%, #ffffff 90%, #ffffff) 100%;
}
.feature-carousel.user-reviews {
    background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 10%, #f8f8f8 90%, #ffffff) 100%;
}

.feature-section .media-container .video-wrapper:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.feature-section.tools-mode .media-container,
.feature-section.sequence-mode .media-container,
.feature-section.circu-mode .media-container,
.feature-section.heat-mode .media-container {
  order: 1;
}
/*.feature-section.led-mode .feature-description p,
.feature-section.ems-mode .feature-description p,
.feature-section.hifu-mode .feature-description p,
.feature-section.led-mode .feature-headline,
.feature-section.ems-mode .feature-headline,
.feature-section.hifu-mode .feature-headline {
  text-align: right;
  max-width: unset;
}
.feature-section.led-mode .separation-line.section-line,
.feature-section.ems-mode .separation-line.section-line,
.feature-section.hifu-mode .separation-line.section-line {
  right: 0;
  position: relative;
}*/
.feature-section.heat-mode .media-container .video-wrapper:after {
    background: linear-gradient(to right, rgb(248 248 250), rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 95%, rgb(249 249 251)), linear-gradient(to bottom, rgb(248 249 250), rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 95%, rgb(249 249 251));

}
.feature-section.hifu-mode .media-container .video-wrapper:after {
    background: linear-gradient(to right, rgb(251 251 253), rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 90%, rgb(251 251 253)), linear-gradient(to bottom, rgb(253 253 254), rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 95%, rgb(251 251 253));

}
.feature-section.circu-mode .media-container .video-wrapper:after {
    background: linear-gradient(to right, rgb(255 255 255), rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 95%, rgb(255 255 255)), linear-gradient(to bottom, rgb(255 255 255), rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 90%, rgb(255 255 255));
}
.feature-section.ems-mode .media-container .video-wrapper:after {
    background: linear-gradient(to right, rgb(255 255 255), rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 90%, rgb(255 255 255)), linear-gradient(to bottom, rgb(255 255 255), rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 90%, rgb(255 255 255));
}
.feature-section.sequence-mode .media-container .video-wrapper:after {
    background: linear-gradient(to right, rgb(255 255 255), rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 95%, rgb(255 255 255)), linear-gradient(to bottom, rgb(255 255 255), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 90%, rgb(255 255 255));
}
.feature-section.led-mode .media-container .video-wrapper:after {
    background: linear-gradient(to right, rgb(255 255 255), rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 95%, rgb(255 255 255)), linear-gradient(to bottom, rgb(255 255 255), rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 95%, rgb(255 255 255));
}
.feature-section.tools-mode .media-container .video-wrapper:after {
    background: linear-gradient(to right, rgb(255 255 255), rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 95%, rgb(255 255 255)), linear-gradient(to bottom, rgb(255 255 255), rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 95%, rgb(255 255 255));
}

.feature-section.ems-mode .media-container {
  padding: 6rem 0;
}

    /* Delikatne podświetlenie nagłówków LED */
  .led-red   { color:#d45252; }
  .led-blue  { color:#1976D2; }
  .led-violet{ color:#7B1FA2;  }
  .led-green { color:#2E7D32;}

p.led-p {
  font-weight: 500;
  width: fit-content;
  padding: 0.5rem 0rem 0rem;
}

p.led-p:after {
    position: relative;
    height: 2px;
    right: 0;
    display: block;
    content: " ";
    transform: unset;
    width: 120%;
    left: unset;
    opacity: 0.5;
}
p.led-green:after {
    background: linear-gradient(90deg, #2d7d32a6 0, #2d7d32a6 20%, #2d7d3247 80%, #ffffff00 100%);

}
p.led-red:after {
    background: linear-gradient(90deg, #d32e32a6 0, #d32e32a6 20%, #d32e3247 80%, #ffffff00 100%);

}
p.led-blue:after {
    background: linear-gradient(90deg, #1976d2a6 0, #1976d2a6 20%, #1976d247 80%, #ffffff00 100%);

}
p.led-violet:after {
    background: linear-gradient(90deg, #7b1fa2a6 0, #7b1fa2a6 20%, #7b1fa247 80%, #ffffff00 100%);

}
/* Responsywność — stack pod sobą */
@media (max-width: 1400px){

.hero.hero--dlpro .marginauto .media-container{
  flex-direction: column;
  flex-wrap: nowrap;
}
.hero.hero--dlpro .marginauto .media-container .hero-claims,
.hero.hero--dlpro .marginauto .media-container .product-cta {
  display: none;
}
.hero.hero--dlpro .marginauto .media-container .mobile-claims .hero-claims {
  display: flex;
  width: 100%;
  text-align: center;
  flex-wrap: wrap;          /* pozwól łamać linie */
  justify-content: center;
  margin: 0rem 0 1rem 0;
}
.hero.hero--dlpro .mobile-claims {
  position: relative;
  text-align: center;
  flex: 0 0 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 100;
}
.hero.hero--dlpro .marginauto .media-container .mobile-claims .product-cta {
  display: block;
  width: 100%;
  padding-bottom: 80px;
  flex: unset;
}

.hero.hero--dlpro .claim:nth-child(1),
.hero.hero--dlpro .claim:nth-child(2) {
  font-weight: 500;
  font-size: clamp(1.4rem, 4vw, 3rem);
}
.hero.hero--dlpro .claim:nth-child(3) {
  font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 4rem);
  flex-basis: 100%;
}
.hero.hero--dlpro .headline-wrapper {
    margin-top: 2rem;
    flex: 0 0 15%;
    align-items: center;
    text-align: center;
}
  .hero.hero--dlpro .hero-kicker {
    text-align: center;
    margin-bottom: 0.5rem;
    margin-top: 2rem;
    font-size: clamp(1.2rem, 3vw, 3rem);
  }
  .hero.hero--dlpro .headline-title {
    text-align: center;
    letter-spacing: 1px;
    font-size: clamp(2.5rem, 5vw, 5rem);
  }
.hero.hero--dlpro .tech-item{
  font-size: clamp(1rem, 2vw, 1.6rem); /* zamiast var(--tech-fs) */
}
  .hero.hero--dlpro .tech-item img {
    width: 20px;
    height: 20px;
  }
  .hero.hero--dlpro .product-intro-text,
  .hero.hero--dlpro .logo-bottom {
    display: none;
  }
  .hero.hero--dlpro .tech-list {
    justify-content: center;
    gap: 2px 20px;
  }
  .hero.hero--dlpro .device-wrapper {
    flex: 0 0 70%;
    padding: 1rem 0;
    max-height: 55dvh;
  }
  .hero.hero--dlpro .hero-video {
    max-height: 800px;
    width: 110%;
    height: 110%;
  }
.hero .price {
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    font-size: clamp(1.3rem, 4vw, 1.5rem);
    color: #3a3f41;
    margin-left: 0;
    display: block;
    align-items: unset;
}
  .hero .read-more {
    padding: 0.75em 1em;
  }




.feature-section.ems-mode .media-container {
    padding: 0;
}


 .feature-section.hifu-mode .media-container {
    margin-top: -4rem !important;
  }

p.led-p:before {
    position: relative;
    height: 1px;
    right: 0;
    display: block;
    content: " ";
    transform: unset;
    width: 100%;
    left: unset;
    opacity: 1;
    background: linear-gradient(90deg, #b9b9b999 0, #b9b9b999 20%, #b9b9b999 80%, #ffffff00 100%);
    margin: 0rem 0rem 1rem 0rem;
}
p.led-p:after {
display: none;
}

  .hero .price del {display: none !important;}
}



@media (max-width: 600px){
.feature-section.led-mode .media-container video,
.feature-section.sequence-mode .media-container video,
.feature-section.circu-mode .media-container video,
.feature-section.heat-mode .media-container video {
  height: 100vh;      /* oryginalna pełna wysokość */
  /* object-fit: cover; */
  object-position: center;  /* pokaż górną połowę */
}
.feature-section .media-container .video-wrapper {
  overflow: hidden;
  width: 100%;
}
.feature-section.heat-mode .media-container .video-wrapper {
  height: 370px;
  /* padding: 0 2rem; */
}
.feature-section.circu-mode .media-container .video-wrapper {
  height: 400px;
  /* padding: 0 10vw; */
}
.feature-section.sequence-mode .media-container .video-wrapper {
  height: 400px;
  /* padding: 0 10vw; */
}
.feature-section.led-mode .media-container .video-wrapper {
  height: 380px;
  /* padding: 0 10vw; */
}
.feature-section.led-mode  .media-container video {
    /* width: 120%; */
    /* margin: auto; */
  }
.feature-section.sequence-mode .media-container video {
  object-position: center -50px;  /* pokaż górną połowę */
}
.feature-section.led-mode .media-container video {
  object-position: center 25px;  /* pokaż górną połowę */
  scale: 1.3;
}
.feature-section.sequence-mode .media-container .video-wrapper:after {
    background: linear-gradient(to right, rgb(255 255 255), rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 95%, rgb(255 255 255)), linear-gradient(to bottom, rgb(255 255 255), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 80%, rgb(255 255 255));
}

    .hero.hero--dlpro .headline-title {
        font-size: 2.2rem;
    }
  .hero.hero--dlpro .tech-item img {
    width: 17px;
    height: 17px;
  }

  
}



@media (prefers-reduced-motion: reduce){
  .hero.hero--dlpro .read-more{ transition:none; }
}