.dark-light {
     position: relative;
     overflow: hidden;
     /* background: linear-gradient(180deg, #1F97F4 0%, #4DB1FF 76.41%, #FFFFFF 100%); */
     background: linear-gradient(180deg, #1F97F4 0%, #4DB1FF 72.56%, #FFFFFF 100%);

     padding-top: 40px;
     padding-bottom: 121px;
 }

 .dark-light .clouds-layer {
     position: absolute;
     inset: -6%;
     background: url("../images/bg-clouds.png") no-repeat center bottom;
     pointer-events: none;
     z-index: 1;
     will-change: transform;
     transition: opacity 1.4s ease;
     opacity: 1;
     height: 95%;
 }

 .dark-light.dark-mode .clouds-layer {
     opacity: 0;
 }

 /* Dark-mode overlay fades in on top — avoids gradient interpolation issues */
 .dark-light::before {
     content: '';
     position: absolute;
     /* background: linear-gradient(180deg, #111623 75.97%, #81858E 99.85%, #FFFFFF 113.43%); */
     background: linear-gradient(180deg, #111623 75%, #404653 83.76%, #A3A7B1 94.48%, #FFFFFF 100%);

     inset: 0;
     opacity: 0;
     transition: opacity 1.4s ease;
     pointer-events: none;
     z-index: 0;
 }

 .dark-light.dark-mode::before {
     opacity: 1;
 }

 /* Stars canvas */
 .dark-light .stars-canvas {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 1;
 }

 /* Content above overlays */
 .dark-light .container-box {
     position: relative;
     z-index: 2;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0;
 }

 /* ── Left column ── */
 .dark-light .left {
     width: 529px;
 }

 .dark-light .left .heading-2,
 .dark-light .left .paragraph {
     color: #fff;
     text-align: left;
 }

 .dark-light .left .heading-2 {
     line-height: 120%;
     letter-spacing: -0.02em;
 }

 .dark-light .left .paragraph {
     color: #fff;
     margin: 24px 0 56px;
 }

 /* ── Toggle outer glass ring ── */
 .dark-light .toggle-ring {
     display: inline-block;
     padding: 7px;
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.24);
     backdrop-filter: blur(8px);
     box-shadow: 0px 3px 7px 0px rgba(41, 45, 179, 0.2);
     transition: border-color 1.2s ease, background 1.2s ease, box-shadow 1.2s ease;
 }


 /* ── Toggle button ── */
 .dark-light .tog {
     position: relative;
     width: 175px;
     height: 71px;
     border-radius: 999px;
     cursor: pointer;
     border: none;
     padding: 0;
     overflow: hidden;
     display: block;
     outline: none;
     transition: background 0.85s ease, box-shadow 0.85s ease;
 }

 .dark-light .tog.day {
     background: #4a9de0;
     box-shadow: 0 6px 24px rgba(40, 120, 220, 0.45), inset 0 2px 8px rgba(20, 70, 180, 0.2);
 }

 .dark-light .tog.night {
     background: #13172a;
     box-shadow: 0 6px 24px rgba(0, 0, 20, 0.65), inset 0 2px 10px rgba(0, 0, 30, 0.5);
 }

 /* ── Concentric arc rings ── */
 .dark-light .arc {
     position: absolute;
     border-radius: 999px;
     pointer-events: none;
     transition: all 0.85s ease;
     background: #D9D9D9;
     opacity: .2;
     z-index: 2;
 }

 .dark-light .arc1 {
     inset: 5px;
     width: 180px;
     height: 180px;
     transform: translate(-55px, -55px);
 }

 .dark-light .arc2 {
     inset: 13px;
     width: 140px;
     height: 140px;
     transform: translate(-45px, -45px);
 }

 .dark-light .arc3 {
     inset: 22px;
     width: 100px;
     height: 100px;
     transform: translate(-35px, -35px);
 }

 .dark-light .tog.night .arc1 {
     transform: translate(43px, -55px);
 }

 .dark-light .tog.night .arc2 {
     transform: translate(58px, -45px);
 }

 .dark-light .tog.night .arc3 {
     transform: translate(70px, -35px);
 }

 /* ── Cloud (day only) ── */
 .dark-light .cloud-wrap {
     position: absolute;
     bottom: -28px;
     left: 0;
     right: 0;
     /* height: 36px; */
     pointer-events: none;
     transition: all 1s ease 0.1s;
 }

 .dark-light .cloud-wrap img {
     width: 100%;
     transform: scale(1.4) translateX(14px);
 }

 .dark-light .tog.day .cloud-wrap {
     opacity: 1;
     bottom: -28px;
 }

 .dark-light .tog.night .cloud-wrap {
     opacity: 0;
     bottom: -100%;
 }

 /* ── Diamond stars (night only) ── */
 .dark-light .sparks {
     position: absolute;
     inset: 0;
     pointer-events: none;
     transition: opacity 0.6s ease 0.15s;
     z-index: 1;
     overflow: hidden;
 }

 .dark-light .sparks::after {
     content: '';
     height: 100%;
     width: 115%;
     position: absolute;
     background:
         linear-gradient(rgba(3, 18, 33, 0.3),
             rgba(3, 18, 33, 0.8)),
         url("../images/moving-start.gif");

     background-size: cover;
     background-position: -15%;
     background-repeat: no-repeat;
     /* transform: rotate(180deg); */
     background-position: -25px;
     top: 0;
     left: 0;
 }

 .dark-light .tog.day .sparks {
     opacity: 0;
 }

 .dark-light .tog.night .sparks {
     opacity: 1;
 }


 /* Adjusted positions for 175×71 button */
 .dark-light .sp1 {
     width: 11px;
     height: 11px;
     top: 44px;
     left: 18px;
 }

 .dark-light .sp2 {
     width: 8px;
     height: 8px;
     top: 15px;
     left: 40px;
 }

 .dark-light .sp3 {
     width: 7px;
     height: 7px;
     top: 33px;
     left: 57px;
 }

 .dark-light .sp4 {
     width: 4px;
     height: 4px;
     top: 22px;
     left: 22px;
     border-radius: 50%;
     opacity: 0.55;
 }

 /* ── Thumb (sun / moon) ── */
 .dark-light .thumb {
     position: absolute;
     top: 7px;
     width: 57px;
     height: 57px;
     border-radius: 50%;
     pointer-events: none;
     z-index: 20;
     transition: all 0.85s ease;
 }

 /* Sun — warm golden, left side */
 .dark-light .tog.day .thumb {
     left: 7px;
     background: #FFD700;
     box-shadow: 0px 1.06px 1.06px 0px #FFF1A6 inset, 0px -2.13px 1.06px 0px #00000040 inset, -8.96px 8.96px 8.96px 0px #00000040;
     ;

 }

 /* Moon — grey, right side */
 .dark-light .tog.night .thumb {
     left: 111px;
     background: #9D9D9D;
     box-shadow: 1.08px 1.08px 1.08px 0px #D7D7D7 inset, -4.26px 4.26px 4.26px 0px #00000040;


 }

 .dark-light .tog.day .crater {
     opacity: 0;
 }

 .dark-light .tog.night .crater {
     opacity: 1;
 }

 /* ── Right column — phone images ── */
 .dark-light .right {
     flex: 1;
     display: flex;
     justify-content: flex-end;
     align-items: center;
     padding-left: 40px;
 }

 .dark-light .phone-img-wrap {
     position: relative;
     max-width: 360px;
 }

 .dark-light .phone-img {
     width: 100%;
     height: auto;
     display: block;
     transition: opacity 1s ease, transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
     will-change: opacity, transform;
 }

 /* Light phone: on top in normal flow */
 .dark-light .light-phone {
     position: relative;
     opacity: 1;
     z-index: 2;
 }

 /* Dark phone: absolute, hidden below */
 .dark-light .dark-phone {
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     z-index: 1;
 }

 /* Dark mode: fade phones */
 .dark-light.dark-mode .light-phone {
     opacity: 0;
 }

 .dark-light.dark-mode .dark-phone {
     opacity: 1;
     z-index: 3;
 }

 /* =============================================
   Responsive Breakpoints
   ============================================= */

 /* 1200px — constrained desktops / large tablets */
 @media (max-width: 1200px) {
     .dark-light .container-box {
         padding: 0 20px;
     }

     .dark-light .left {
         width: 460px;
     }

     .dark-light .phone-img-wrap {
         max-width: 300px;
     }
 }

 /* 992px — tablets landscape */
 @media (max-width: 992px) {
     .dark-light {
         padding-bottom: 80px;
     }

     .dark-light .container-box {
         padding: 0 20px;
     }

     .dark-light .left {
         width: 380px;
     }

     .dark-light .left .paragraph {
         margin: 20px 0 40px;
     }

     .dark-light .phone-img-wrap {
         max-width: 260px;
     }
 }

 /* 768px — tablets portrait / large phones */
 @media (max-width: 768px) {
     .dark-light {
         padding-bottom: 60px;
     }

     .dark-light .container-box {
         flex-direction: column;
         align-items: flex-start;
         gap: 0px;
         padding: 0 20px;
     }

     .dark-light .left {
         width: 100%;
     }

     .dark-light .left .heading-2,
     .dark-light .left .paragraph {
         text-align: left;
     }

     .dark-light .left .paragraph {
         margin: 20px 0 32px;
     }

     .dark-light .right {
         padding-left: 0;
         width: 100%;
         justify-content: flex-start;
     }

     .dark-light .phone-img-wrap {
         max-width: 300px;
     }

     .dark-light .toggle-ring {
         transform: scale(0.7) translate(-34px, -20px);
     }
 }

 /* 580px — small phones */
 @media (max-width: 580px) {
     .dark-light {
         padding-top: 40px;
         padding-bottom: 40px;
     }

     .dark-light .container-box {
         gap: 0px;
         padding: 0 20px;
     }

     .dark-light .container-box .toggle {
         display: flex;
         justify-content: center;
     }

     .dark-light .left .paragraph {
         margin: 16px 0 24px;
     }

     .dark-light .phone-img-wrap {
         max-width: 90%;
     }

     .dark-light .toggle-ring {
         transform: scale(0.7) translate(0px, 0px);
     }
 }