.slider {
     max-width: 100%;
     margin: 0 auto;
     position: relative;
     overflow: visible;
     border-radius: 14px;
     padding: 1px;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02));
     box-shadow: 0 10px 30px rgba(2, 6, 23, 0.6);
 }

 .viewport {
     position: relative;
     overflow: hidden;
     border-radius: 12px;
     height: var(--slider-height);
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45));
 }

 .slides {
     display: flex;
     height: 100%;
     transition: transform var(--transition);
     will-change: transform;
 }

 .slide {
     min-width: 100%;
     height: 100%;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     /* padding: clamp(20px, 4vw, 48px); */
     background-size: cover;
     background-position: center center;
     overflow: hidden;
 }

 /* dark overlay for readability */
 .slide::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(2, 6, 23, 0.15) 10%, rgba(2, 6, 23, 0.55) 70%);
     pointer-events: none
 }

 /* layered content */
 .content {
     position: relative;
     z-index: 2;
     max-width: 58%;
     transform: translateZ(0);
 }

 h2 {
     font-size: clamp(20px, 4vw, 40px);
     margin: 0 0 10px 0;
     line-height: 1.02;
     letter-spacing: -0.02em
 }

 p {
     margin: 0 0 18px 0;
     font-size: clamp(14px, 1.6vw, 16px);
     opacity: 0.95
 }

 .btn {
     display: inline-block;
     padding: 12px 18px;
     border-radius: 10px;
     background: var(--accent);
     color: #0a0a0a;
     font-weight: 600;
     text-decoration: none;
     box-shadow: 0 6px 18px rgba(255, 122, 89, 0.18);
     transform: translateZ(0);
     transition: transform 160ms ease, box-shadow 160ms ease;
 }

 .btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 26px rgba(255, 122, 89, 0.22)
 }

 /* animated decorative element */
 .badge {
     display: inline-block;
     padding: 8px 12px;
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.06);
     backdrop-filter: blur(4px);
     font-size: 13px;
     margin-bottom: 12px
 }

 /* parallax layers inside slides */
 .layer {
     position: absolute;
     right: 6%;
     bottom: 6%;
     z-index: 1;
     opacity: 0.95;
     transform-origin: center;
     transition: transform var(--transition), opacity 400ms ease;
     pointer-events: none;
     max-width: 42%;
 }

 /* controls */
 .controls {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 12px;
     z-index: 6;
     pointer-events: none
 }

 .control-btn {
     pointer-events: auto;
     width: var(--control-size);
     height: var(--control-size);
     border-radius: 10px;
     border: 0;
     background: rgba(10, 14, 20, 0.55);
     color: #fff;
     display: grid;
     place-items: center;
     cursor: pointer;
     backdrop-filter: blur(6px);
     transition: transform 150ms ease
 }

 .control-btn:active {
     transform: scale(.96)
 }

 /* bullets */
 .bullets {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: 14px;
     display: flex;
     gap: 10px;
     z-index: 7;
 }

 .bullet {
     width: var(--bullet-size);
     height: var(--bullet-size);
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.14);
     cursor: pointer;
     display: inline-block;
     border: 0
 }

 .bullet[aria-current="true"] {
     background: var(--accent);
     transform: scale(1.18)
 }

 /* slide transition classes for nicer animation */
 .is-animating .slide {
     transition: opacity 500ms ease, transform 700ms cubic-bezier(.22, .9, .35, 1)
 }

 /* responsive tweaks */
 @media (max-width:900px) {
     .content {
         max-width: 72%
     }

     .layer {
         display: none
     }
 }

 @media (max-width:600px) {
     :root {
         --slider-height: 50vh
     }

     .content {
         max-width: 95%
     }

     h2 {
         font-size: 20px
     }

     .btn {
         padding: 10px 14px
     }
 }

 /* touch hint */
 .dragging {
     cursor: grabbing
 }

 /* accessibility: reduce motion */
 @media (prefers-reduced-motion: reduce) {
     :root {
         --transition: 250ms linear
     }

     .slides,
     .slide,
     .control-btn {
         transition: none
     }
 }

 /* small credits UI */
 .meta {
     position: absolute;
     right: 14px;
     top: 14px;
     z-index: 8;
     font-size: 12px;
     opacity: .8
 }