/* HERO SECTION */
 .hero {
     width: 100%;
     justify-content: center;
     background: linear-gradient(to top left, #f8f8f8, #c2878700 70%), linear-gradient(to top right, #f8f8f8, transparent 70%), linear-gradient(to bottom left, #e1dfee, transparent 70%), linear-gradient(to bottom right, #c7d1e0, transparent 70%);
     min-height: 100dvh;
     position: relative;
     padding: 2rem 0rem;
     display: flex;
     flex-direction: column;
     height: 100dvh;
     max-height: 100dvh;
     overflow: hidden;
}
 .hero .title-wrapper {
     position: absolute;
     top: 45%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     z-index: 99;
     width: 100%;
}
 .hero .main-title {
     font-size: clamp(2rem, 4vw, 2.8rem);
     font-weight: 200;
     color: rgb(58 58 58);
}
 .hero .main-title span {
     margin-bottom: 0.8rem;
     line-height: 1;
}
 .hero .main-title .bold {
     font-weight: 500;
     margin-left: -0.2rem;
}
 .hero .main-title .trademark {
     font-size: 0.6em;
     vertical-align: super;
}
 .hero .word {
     display: block;
     opacity: 0;
}
 .hero .intro-subtitle {
     opacity: 0;
     font-size: clamp(1.2rem, 4vw, 1.6rem);
     color: rgb(60 60 60);
     text-align: center;
     font-weight: 400;
     position: relative;
     width: fit-content;
     margin: auto;
     line-height: 1;
}
 .hero .intro-subtitle:after {
     background: url(https://skinheaven.pl/FreshSkin-Pro/linia.png) left top no-repeat;
     background-size: 100% 7px;
     border-radius: 999px;
     content: "";
     height: 9px;
     image-rendering: -webkit-optimize-contrast;
     left: 5%;
     position: absolute;
     right: 0;
     top: 100%;
}
 .hero .logo-bottom {
     text-align: center;
     position: absolute;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 99;
     width: 100%;
     bottom: 1rem;
}
 .hero .prefix {
     color: rgb(82, 84, 83);
     font-style: italic;
     font-weight: 200;
     margin-right: 0.2rem;
     font-size: 1.2rem;
}
 .hero .brand-block {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
}
 .hero .brand-block img {
     height: 2rem;
     width: auto;
     max-width: 100%;
     display: inline-block;
     vertical-align: middle;
     opacity: 1;
}
 .hero .device-wrapper {
     opacity: 0;
     flex-direction: column;
     flex: 0 0 60%;
     display: flex;
     justify-content: center;
     align-items: center;
     max-height: 50dvh;
     max-width: 1000px;
     align-self: center;
     width: 100%;
     position: relative;
     margin: 0 auto;
}
 .hero .video-overlay {
     position: absolute;
     top: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     opacity: 0;
     z-index: 2;
     margin: auto;
}
 .hero .video-overlay img {
     width: 100%;
     height: 100%;
     object-fit: contain;
}
 @keyframes glowPulse {
     0%, 100% {
         filter: drop-shadow(0 0 10px #3273c73d);
         opacity: 1;
    }
     50% {
         filter: drop-shadow(0 0 100px #2f74cacc);
         opacity: 1;
    }
}
 .hero .device-wrapper video {
     mask-repeat: no-repeat;
     max-height: 100%;
     width: auto;
     mask-composite: intersect;
     mask-repeat: no-repeat;
     mask-image: linear-gradient(transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.hero .headline-wrapper {
     flex: 0 0 20%;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     flex-direction: column;
     padding: 2rem 0;
}
 .hero h3.headline-sub {
     font-size: clamp(1.4rem, 4vw, 2.2rem);
     color: #434342;
     opacity: 0;
     text-align: center;
     font-weight: 200;
     z-index: 3;
     position: relative;
     line-height: 1;
}
 .hero h4.headline-sub-bottm {
     text-align: center;
     margin: 0;
     font-weight: 300;
     font-size: clamp(0.8rem, 2vw, 1.2rem);
     margin-bottom: 11px;
     opacity: 0;
     font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif !important;
     line-height: 1;
}
 .hero .headline-sub .bold {
     font-weight: 400;
     margin-left: -0.2rem;
}
 .hero .trademark {
     font-size: 0.6em;
     vertical-align: super;
     top: 0;
     position: absolute;
     right: -10%;
     line-height: 1;
}
 .hero h2.headline-title {
     font-size: clamp(1.8rem, 4vw, 3.5rem);
     line-height: 1.1;
     opacity: 0;
     text-align: center;
     z-index: 3;
     position: relative;
     background: linear-gradient(133deg, rgb(58 60 59) 0%, #2d84f2) text;
     -webkit-text-fill-color: transparent;
     filter: blur(10px);
     font-weight: 500;
}
 .hero .product-cta {
     opacity: 0;
     text-align: center;
     flex: 0 0 20%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     z-index: 100;
}
 .hero .read-more {
     padding: 0.75em 2em;
     font-size: 1.1rem;
     /* font-family: Poppins, sans-serif; */
     color: white;
     background: #0071e3;
     border: none;
     border-radius: 999px;
     cursor: pointer;
     line-height: 1.2;
     font-weight: 400;
     letter-spacing: 0.5px;
     font-family: 'Helvetica Neue';
}
 .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(131deg, #0071e3, #325787);
}
 .hero .price {
     margin-bottom: 0.5rem;
     font-size: 1.5rem;
     color: #3a3f41;
}



/* EMS SECTION */
.ems-lifting .content-container {
    padding-top: 3rem;
    padding-bottom: 12rem;
    /* margin-bottom: 12rem; */
}
.ems-lifting .media-container {
    left: 5%;
}
 .ems-lifting .media-container video {
     max-width: 1300px;
     margin: 0;
     position: relative;
     object-fit: contain;
     width: 130%;
}


 .ems-lifting .feature-callouts {
     position: absolute;
     width: 100%;
     pointer-events: none;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: center;
     max-width: 750px;
     padding: 0px 1rem;
}
 .ems-lifting .highlights {
     display: flex;
     gap: 8px;
     font-size: clamp(1rem, 3vw, 1.4rem);
     color: #3f3f3f;
     font-weight: 300;
     line-height: 1.2;
     flex-direction: row-reverse;
     position: relative;
     align-items: center;
     opacity: 0;
}
 .ems-lifting .highlights-title {
     top: -17%;
     position: relative;
     font-size: clamp(1rem, 3vw, 1.4rem);
     color: #00396c;
     font-weight: 300;
     line-height: 1.2;
}
 .ems-lifting .highlights-title span {
     opacity: 0;
}
 .ems-lifting .highlights-title strong {
     font-weight: 400;
     background: linear-gradient(#0071be 0%, rgb(0 86 173) 100%) text;
     -webkit-text-fill-color: transparent;
}
 .ems-lifting .feature-callouts.right .highlights {
     flex-direction: row;
}
 .ems-lifting .feature-callouts.right {
     z-index: 9;
}
 .ems-lifting .highlights span {
     padding: 6px 7px 2px;
     line-height: 1.2;
     border: 1px solid #00000021;
     background: #ffffff61;
}
 .ems-lifting .highlights .line {
     width: 1rem;
     height: 1px;
     background-color: #0000006e;
}


/* CLEAN SECTION */

 .clean .feature-headline {
     background: linear-gradient(0deg, #353535 0%, #00439b 50%) text;
     -webkit-text-fill-color: transparent;
}
 .clean .media-container img, .clean .media-container video {
     margin: 0;
     width: 100%;
}
.clean .media-container .video-wrapper {
    max-width: 1600px;
    margin: 0;
    position: relative;
    height: auto;
    object-fit: contain;
    width: 200%;
} 
.clean .media-container .video-wrapper:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right,
          rgb(255 255 255), rgb(255 255 255 / 0%) 30%,
          rgba(0,0,0,0) 70%, rgb(255 255 255)),
        linear-gradient(to bottom,
          rgb(255 255 255), rgba(0,0,0,0) 15%,
          rgba(0,0,0,0) 80%, rgb(255 255 255));
}
 .clean .media-container .video-info {
     z-index: 10;
     position: absolute;
     right: 2rem;
     top: 5vw;
}
 .clean .media-container .label {
     font-size: clamp(1rem, 4vw, 1.6rem);
     font-weight: 300;
     text-align: right;
}


/* COLSYNTHESIS Mode */
 .colsynthesis {
     background: linear-gradient(180deg, rgb(232 219 200) 0%, #f9f0ea) 100%;
     background: #e9dcca;
}

 .colsynthesis .video-headline {
     z-index: 9;
     position: absolute;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     width: 100%;
     max-width: 800px;
     padding: 5rem 0rem;
     scale: 1.6;
}
 .colsynthesis .video-headline .video-highlight {
     font-size: clamp(4rem, 8vw, 10rem);
     font-weight: 400;
     opacity: 1;
     background: linear-gradient(140deg, #000000, #c3916c 76%);
     color: transparent;
     background-clip: text;
     -webkit-background-clip: text;
     mask-image: linear-gradient(to top, transparent 0%, black 50%);
     -webkit-mask-image: linear-gradient(to top, transparent 0%, #000000 50%);
     text-shadow: 0 0 0px #1c1c1c;
     opacity: 0;
}
 .colsynthesis .video-headline .video-highlight strong {
     font-weight: 500;
     font-size: clamp(5rem, 10vw, 13rem);
}
 .colsynthesis .video-headline .video-description {
     opacity: 0;
     font-size: clamp(1.2rem, 4vw, 2rem);
     margin-top: -2rem;
}
.colsynthesis .video-headline sup a {
     font-size: 0.7em;
     color: unset;
     margin-left: 4px;
     font-weight: 400;
}
 .colsynthesis .media-container img, .colsynthesis .media-container video {
     margin: 0;
     width: 100%;
}
.colsynthesis .media-container .video-wrapper {
    position: relative;
    object-fit: contain;
    width: 160%;
    max-width: 1400px;
}
.colsynthesis .media-container .video-wrapper:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
      background:
        linear-gradient(to right,
          rgb(233 220 202), rgb(255 255 255 / 0%) 20%,
          rgba(0,0,0,0) 80%, rgb(233 220 202)),
        linear-gradient(to bottom,
          rgb(233 220 202), rgba(0,0,0,0) 20%,
          rgba(0,0,0,0) 80%, rgb(233 220 202));
}

 .colsynthesis .feature-description p {
     color: #505050;
}


/* MOISTURIZING Mode */
 .moisturizing .feature-headline {
     background: linear-gradient(235deg, #ffb457 50%, #412200 100%) text;
     -webkit-text-fill-color: transparent;
}
 .moisturizing .feature-subline strong {
     color: #e6902d;
}
.moisturizing .content-container {
    padding-top: 0rem;
    padding-bottom: 0rem;
}
 .moisturizing .media-container img, .moisturizing .media-container video {
     max-width: 900px;
     margin: 0;
     position: relative;
     object-fit: contain;
     width: 120%;
}
 .moisturizing .ingredients-container {
     position: absolute;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 23px 20px;
     margin: 0 auto;
     margin-top: 17rem;
     z-index: 9;
     width: 100%;
     max-width: 550px;
     margin-left: -1%;
}
 .moisturizing .ingredients-container.narrow {
     max-width: 400px;
     margin-left: 0%;
}
 .moisturizing .ingredients-container span {
     text-align: center;
     font-size: clamp(0.9rem, 3vw, 1.2rem);
     color: #636363;
     font-weight: 500;
     border: 1px solid #0000000d;
     padding: 0.5rem 1rem 0.5rem;
     /* font-family: 'SF Pro Text' !important; */
     background: #ffe6b81f;
     opacity: 0;
     line-height: 1.2;
}
 .moisturizing .plus-icons-overlay {
     position: absolute;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 9;
     max-width: 900px;
}
 .moisturizing .plus-icons-overlay .plus {
     position: absolute;
     font-size: clamp(2rem, 3vw, 3rem);
     font-weight: 600;
     color: rgb(192 0 0 / 71%);
     animation: floatUp 5s ease-in-out infinite;
     opacity: 0;
}
@media (hover: none) {
  .moisturizing .plus-icons-overlay .plus { animation: none !important; }
}
 .moisturizing .plus-icons-overlay .plus:nth-child(1) {
    bottom: 36%;
    left: 44%;
}
 .moisturizing .plus-icons-overlay .plus:nth-child(2) {
    bottom: 37%;
    left: 71%;
}
  .moisturizing .plus-icons-overlay .plus:nth-child(3) {
    bottom: 37%;
    left: 24%;
}
 .moisturizing .plus-icons-overlay .plus:nth-child(4) {
    bottom: 35%;
    left: 57%;
}
 .moisturizing .plus-icons-overlay .plus:nth-child(5) {
    bottom: 28%;
    left: 48%;
}
 .moisturizing .plus-icons-overlay .plus:nth-child(6) {
    bottom: 31%;
    left: 33%;
}
 .moisturizing .plus-icons-overlay .plus:nth-child(7) {
    bottom: 24%;
    left: 76%;
}
.moisturizing .plus-icons-overlay .plus:nth-child(8) {
    bottom: 25%;
    left: 20%;
}
 .moisturizing .plus-icons-overlay .plus:nth-child(9) {
    bottom: 28%;
    left: 65%;
}
 .moisturizing .plus-icons-overlay .plus:nth-child(10) {
    bottom: 25%;
    left: 38%;
}
 @keyframes floatUp {
     0% {
         transform: translateY(0px)scale(1.2);
    }
     50% {
         transform: translateY(-1rem)scale(1);
    }
     100% {
         transform: translateY(0px)scale(1.2);
    }
}




/* COOL Mode */
 .cool {
     /* background-blend-mode: screen; */
     background: linear-gradient(90deg, rgb(0 11 21) 0%, #021c33) 100%;
}
 .cool .feature-headline {
     background: linear-gradient(0deg, #007fff 0%, #ffffff 100%) text;
     -webkit-text-fill-color: transparent;
}
 .cool .media-container {
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     position: absolute;
     height: 100%;
     width: 100%;
     left: 15%;
     top: 0;
}
 .cool .media-container:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right,
          rgb(6 17 29), rgb(255 255 255 / 0%) 30%,
          rgba(0,0,0,0) 70%, rgb(9 26 49)),
        linear-gradient(to bottom,
          rgb(8 20 37), rgba(0,0,0,0) 20%,
          rgba(0,0,0,0) 80%, rgb(9 20 39));
 }
 .cool .content-container {
     min-height: 950px;
}
 .cool .media-container img, .cool .media-container video {
     margin: 0;
     width: 100%;
}
.cool .media-container .video-wrapper {
    margin: 0;
    position: relative;
    height: 100%;
    object-fit: contain;
    width: unset;
    max-width: 900px;
}
.cool .media-container .video-wrapper:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right,
          rgb(13 27 39 / 17%), rgb(255 255 255 / 0%) 30%,
          rgba(0,0,0,0) 70%, rgb(8 16 21 / 14%)),
        linear-gradient(to bottom,
          rgb(15 19 27), rgba(0,0,0,0) 15%,
          rgba(0,0,0,0) 80%, rgb(10 18 26 / 0%));
}
 .cool .feature-subline {
     color: #ffffff;
     text-shadow: 0px 0px 20px #000000;
}
 .cool .feature-subline strong {
     color: #85c2ff;
}
 .cool .feature-description p {
     color: #ffffff;
}



/* LED SECTION */
 .led {
     background: linear-gradient(to left top, rgb(5, 16, 54), rgba(0, 0, 0, 0.16) 50%), linear-gradient(to right top, rgb(30, 79, 190), rgba(0, 0, 0, 0.17) 50%), linear-gradient(to left bottom, rgb(213, 33, 27), rgba(0, 0, 0, 0.08) 50%), linear-gradient(to right bottom, rgb(6, 49, 125), rgba(0, 0, 0, 0.94) 50%);
}
.led .bg-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  translate: 0;                /* tiny hack: aktywuje komponowanie */
  backface-visibility: hidden; /* GPU hint */
}
.led .background-led-red {
  background:
    linear-gradient(to left top, #890807, #00000029 50%),
    linear-gradient(to right top, #000000, #0000002b 50%),
    linear-gradient(to left bottom, #ef0800, #00000014 50%),
    linear-gradient(to right bottom, #a30100, #4d0000 50%);
}

.led .background-led-blue {
  background:
    linear-gradient(to left top, #00020a, #00000029 50%),
    linear-gradient(to right top, #1e4fbe, #0000002b 50%),
    linear-gradient(to left bottom, #2f85e4, #00000014 50%),
    linear-gradient(to right bottom, #000000, #0052aa 50%);
}
.led .background-led-mix {
    background: linear-gradient(to left top, rgb(5, 16, 54), rgba(0, 0, 0, 0.16) 50%), linear-gradient(to right top, rgb(30, 79, 190), rgba(0, 0, 0, 0.17) 50%), linear-gradient(to left bottom, rgb(213, 33, 27), rgba(0, 0, 0, 0.08) 50%), linear-gradient(to right bottom, rgb(6, 49, 125), rgba(0, 0, 0, 0.94) 50%);
}
 .led .feature-headline {
     background: linear-gradient(90deg, #2e84ff 30%, #ff433e 60%) text;
     color: rgb(255 255 255 / 73%);
}
 .led .media-container {
     left: 4rem;
     margin-top: -4%;
}
 .led .media-container img.featuregrid-LED-1 {
     position: relative;
     z-index: 5;
     width: 110%;
}
 .led .media-container img, .led .media-container video {
     max-width: 900px;
     margin: 0;
     width: 110%;
     mask-composite: intersect;
     mask-repeat: no-repeat;
     mask-image: linear-gradient(transparent 0%, black 20%, black 90%, transparent 100%), linear-gradient(to right, transparent 0%, black 40%, black 60%, transparent 100%);
     position: absolute;
     height: auto;
     object-fit: contain;
     transition: opacity 0.6s ease;
     opacity: 0;
     z-index: 9;
}
 .led .wavelength-label {
     color: white;
     position: absolute;
     z-index: 9;
     top: 25%;
     opacity: 0;
     transition: opacity 0.4s ease;
}
 .led .wavelength-label.left {
     text-align: right;
     right: 67%;
}
 .led .wavelength-label.right {
     left: 67%;
}
 .led .wavelength-label .value {
     white-space: nowrap;
     margin-bottom: 2px;
     display: block;
     font-size: clamp(1rem, 3vw, 1.4rem);
}
 .led .wavelength-label .label {
     white-space: nowrap;
     display: block;
     margin-top: 9px;
     font-size: clamp(0.8rem, 3vw, 1.2rem);
}
 .led .wavelength-label .line {
     height: 1px;
     background: linear-gradient(to right, #ef030300, rgba(255,255,255,0.6), transparent);
}
 .led .media-container .video-info {
     height: 100%;
     flex-direction: column;
     justify-content: flex-start;
     gap: 1rem;
     z-index: 9;
     position: absolute;
     left: 1rem;
     top: 5vw;
}


/* TRYBY URZADZENIA */
 .mode-section {
     max-height: 1100px;
}
.mode-section .content-container {
    padding-top: unset;
}
 .mode-section .bg-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  translate: 0;                /* tiny hack: aktywuje komponowanie */
  backface-visibility: hidden; /* GPU hint */
}
 .mode-section .background-led-red {
  background: linear-gradient(to left top, rgb(203, 0, 0), rgba(0, 0, 0, 0.16) 50%), linear-gradient(to right top, rgb(0, 0, 0), rgba(0, 0, 0, 0.17) 50%), linear-gradient(to left bottom, rgb(251, 51, 39), rgba(0, 0, 0, 0.08) 60%), linear-gradient(to right bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0.94) 50%);
}
 .mode-section .background-led-blue {
  background:linear-gradient(to left top, rgb(61, 131, 255), rgba(0, 0, 0, 0.16) 50%), linear-gradient(to right top, rgb(0, 0, 0), rgba(0, 0, 0, 0.17) 50%), linear-gradient(to left bottom, rgb(0, 87, 219), rgba(0, 0, 0, 0.08) 60%), linear-gradient(to right bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0.94) 50%)
}
 .mode-section .background-led-none {
    background: linear-gradient(to left top, rgb(0, 0, 0), rgba(0, 0, 0, 0.16) 50%), linear-gradient(to right top, rgb(0, 0, 0), rgba(0, 0, 0, 0.17) 50%), linear-gradient(to left bottom, rgb(113, 113, 113), rgba(0, 0, 0, 0.08) 60%), linear-gradient(to right bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0.94) 50%)
 }
 .mode-section .feature-headline {
     color: white;
     text-align: left;
}
 .mode-section .mode-container {
     display: flex;
     margin: auto;
     padding: 0rem 0 5rem;
}
 .mode-section .description-panel {
     color: white;
     width: 50%;
}
 .mode-section .description-panel .feature-headline {
     display: block;
     padding: 9rem 0vw 0rem;
     margin: auto !important;
}
 .mode-section .device-container {
     position: relative;
     display: flex;
     width: 50%;
     justify-content: center;
     overflow: hidden;
     margin-top: 0%;
}
 .mode-section .device-block {
     position: relative;
     overflow: hidden;
     margin-bottom: -5px;
}
 .mode-section .device-image {
     height: auto;
}
 .mode-section .device-image, .mode-section .mode-overlay {
     max-width: 500px;
     width: 140%;
}
 .mode-section .mode-overlay {
     position: absolute;
     top: 0;
     left: 0;
     height: auto;
     pointer-events: none;
}
 .mode-section .hotspot {
     position: absolute;
     width: 60%;
     height: 2.5%;
     background: transparent;
     border: none;
     cursor: pointer;
     z-index: 10;
     -webkit-tap-highlight-color: transparent;
     outline: none;
}
 .mode-section .hotspot.button {
     width: 40%;
     height: 6%;
}
 .mode-section .hotspot:hover {
     background: unset;
 }
 .mode-section .mode-label {
     color: white;
     font-size: clamp(0.8rem, 2vw, 1.2rem);
     padding: 0.5rem 0.4rem 0.3rem;
     white-space: nowrap;
     pointer-events: none;
     font-weight: 500;
     z-index: 99;
     background: #ff1f1f36;
     letter-spacing: 0.2px;
}
 .mode-section .button-label {
     position: absolute;
     flex-direction: row;
     justify-content: flex-start;
     display: flex;
     align-items: center;
     max-width: 30vw;
     width: 100%;
     display: none;
}
 .mode-section .button-label .line {
     width: 20%;
     height: 1px;
     background-color: #000000;
}
 .mode-section .pulse-dot {
     position: absolute;
     width: 1rem;
     height: 1rem;
     background: #ff0000;
     border-radius: 50%;
     box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
     pointer-events: none;
     z-index: 9999;
     transform: translate(-50%, -50%);
     display: block !important;
}
 .mode-section .pulse-idle {
     display: block !important;
     visibility: visible !important;
     animation: idle-pulse 1.5s ease-in-out infinite;
     will-change: transform, opacity;
     background: #ff0000a1;
     width: 1.5rem;
     height: 1.5rem;
     top: 61% !important;
}
 @keyframes idle-pulse {
     0%, 100% {
         transform: translate(-50%,-50%) scale(1);
         opacity: 1;
    }
     50% {
         transform: translate(-50%,-50%) scale(1.3);
         opacity: 0.6;
    }
}
 .mode-section .mode-description {
     padding: 3rem 0 5rem 0vw;
     height: 100%;
     opacity: 0;
}
 .mode-section .mode-description.active {
     display: block;
}
 .mode-section .mode-description h3 {
     font-size: clamp(1.4rem, 4vw, 3rem);
     font-weight: 500;
     margin-bottom: clamp(1.1rem, 4vw, 3rem);
     width: 110%;
     background: linear-gradient(319deg, #a0c7ff 0%, #ffffff 100%) text;
     -webkit-text-fill-color: transparent;
}
 .mode-section .mode-description p {
     font-size: clamp(1rem, 3vw, 1.5rem);
     font-weight: 300;
     line-height: 1.2;
     margin-top: clamp(0.6rem, 2vw, 1.5rem);
     margin-bottom: clamp(0.6rem, 2vw, 1.5rem);
     width: 115%;
     color: #dcdcdc;
}
 .mode-section .mode-title {
     font-weight: 400;
     color: white;
     width: 100%;
     display: block;
     font-size: clamp(1.1rem, 2vw, 1.7rem);
}
 .mode-section .mode-description p strong {
     font-weight: 400;
     color: white;
}


 @media (max-width: 1400px) {
     .cool .feature-description {
         margin-top: -10%;
    }
     .cool {
         background: linear-gradient(180deg, rgb(11 18 25) 0%, #0f1923) 100%;
    }
     .mode-section {
         max-height: 1200px;
    }
     .ems-lifting .media-container {
         margin: 1rem 0 !important;
    }
     .ems-lifting .media-container video {
         width: 150%;
    }
     .led .media-container {
         margin-bottom: 2rem;
    }
     .cool .media-container {
         /* mask-image: linear-gradient(transparent 0%, black 10%, black 80%, transparent 100%), linear-gradient(to right, transparent 0%, black 0%, black 100%, transparent 100%); */
         margin-top: 6%;
    }
     .mode-section .description-panel .feature-headline {
         display: none;
    }
     .mode-section .mode-description {
         padding: 3vw 0 5vw 5vw;
    }
     .moisturizing .ingredients-container {
         margin-top: 20%;
         margin-left: 0%;
         gap: 10px 15px;
         max-width: 450px;
    }
     .moisturizing .ingredients-container span {
         padding: 0.5rem 0.5rem 0.3rem;
    }
     .ems-lifting .feature-callouts {
         max-width: 850px;
    }
     .mode-section .device-container {
         margin-top: -10%;
    }
     .cool .feature-subline {
        margin-top: 10% !important;
    }
}

 @media (max-width: 900px) {
     .mode-section .feature-headline {
         /* padding: 7rem 5vw 1rem; */
         margin-top: 7rem;
    }
     .mode-section {
         max-height: 950px;
    }
     .mode-section .device-image, .mode-section .mode-overlay {
         max-width: 400px;
    }
     .mode-section .device-container {
         margin-top: -20%;
    }
 .cool .media-container:after {
    background: unset;
 }
}
 @media (max-width: 600px) {
     .mode-section .mode-description p {
         line-height: 1.1;
    }
     .mode-section .mode-description .recommended-products, .mode-section .mode-description .timer, .mode-section .mode-description .frequency {
         width: 130%;
    }
     .mode-section .mode-description {
         padding: 8vw 0 0vw 5vw;
    }
     .mode-section .mode-description p {
         margin-bottom: 0;
    }
     .mode-section {
         max-height: 800px;
    }
     .mode-section .device-image, .mode-section .mode-overlay {
         max-width: 350px;
    }
     .moisturizing .ingredients-container {
         margin-top: 30%;
         gap: 10px 15px;
         max-width: 400px;
    }
}
 @media (max-width: 400px) {
     .mode-section {
         max-height: 870px;
    }
     .mode-section .device-container {
         margin-top: -10%;
    }
}