/* Carousel Layout & Spacing Engine */
    .carousel-container { 
      position: relative; 
      width: 100%; 
      max-width: 1000px; 
      height: 480px; 
      overflow: hidden; 
      border-radius: 12px; 
      box-shadow: 0 10px 30px rgba(0,0,0,0.15); 
      background: transparent; 
      
      /* 60px banner + ~56px navbar + 100px explicit layout gap = 216px */
      margin: 216px auto 40px auto; 
    }
    
    .carousel-track { 
      display: flex; 
      width: 100%; 
      height: 100%; 
      transition: transform 0.5s ease-in-out; 
    }
    
    .carousel-slide { 
      min-width: 100%; 
      height: 100%; 
      position: relative; 
      flex-shrink: 0; 
    }
    
    .carousel-slide img { 
      width: 100%; 
      height: 100%; 
      object-fit: cover; 
      filter: brightness(0.65); 
      display: block; 
    }
    
    /* Carousel Inner Card Content Overlays */
    .slide-content { 
      position: absolute; 
      bottom: 0; 
      left: 0; 
      right: 0; 
      padding: 40px; 
      color: #ffffff; 
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.9)); 
    }
    
    .badge { 
      background: #e50914; 
      color: #fff; 
      padding: 4px 10px; 
      font-size: 11px; 
      font-weight: bold; 
      text-transform: uppercase; 
      border-radius: 4px; 
      display: inline-block; 
      margin-bottom: 12px; 
      letter-spacing: 1px;
    }
    
    .slide-content h2 { 
      font-size: 28px; 
      line-height: 1.3; 
      margin-bottom: 10px; 
      font-weight: 700; 
      max-width: 90%;
    }
    
    .slide-content p { 
      font-size: 15px; 
      color: #e0e0e0; 
      margin-bottom: 20px; 
      line-height: 1.5; 
      max-width: 80%; 
    }
    
    .read-btn { 
      display: inline-block; 
      background: #fff; 
      color: #111; 
      padding: 10px 22px; 
      font-weight: 600; 
      text-decoration: none; 
      font-size: 14px; 
      border-radius: 6px; 
      transition: 0.2s; 
    }
    
    .read-btn:hover { 
      background: #e50914; 
      color: #fff; 
    }
    
    /* Navigation Controls Layers */
    .nav-btn { 
      position: absolute; 
      top: 50%; 
      transform: translateY(-50%); 
      background: rgba(255,255,255,0.2); 
      border: none; 
      width: 44px; 
      height: 44px; 
      border-radius: 50%; 
      color: white; 
      font-size: 20px; 
      cursor: pointer; 
      backdrop-filter: blur(5px); 
      z-index: 10; 
      transition: 0.2s; 
    }
    
    .nav-btn:hover { 
      background: rgba(255,255,255,0.4); 
    }
    
    .prev-btn { left: 20px; }
    .next-btn { right: 20px; }
    
    .dots-indicator { 
      position: absolute; 
      top: 30px; 
      right: 40px; 
      display: flex; 
      gap: 8px; 
      z-index: 10; 
    }
    
    .dot { 
      width: 8px; 
      height: 8px; 
      background: rgba(255,255,255,0.4); 
      border-radius: 50%; 
      cursor: pointer; 
      transition: 0.2s;
    }
    
    .dot.active { 
      background: #fff; 
      transform: scale(1.2); 
    }

    /* Carousel Responsive Scaling Blocks */
    @media (max-width: 768px) {
      .carousel-container { 
        margin-top: 250px; 
        height: 300px;
        min-height: 300px;
      }
      .slide-content { padding: 20px; }
      .slide-content h2 { font-size: 20px; }
      .slide-content p { font-size: 13px; }
    }