/* ===== HERO CAROUSEL ===== */
  .hero {
    position: relative;
    background: #0f1f2e;
    height: 480px;
    overflow: hidden;
    margin: 15px 30px;
  }
  .hero-slides { position: relative; width: 100%; height: 100%; }
  .hero-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    pointer-events: none;
  }
  .hero-slide.active { opacity: 1; pointer-events: auto; }
  .hero-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .dots-nav {
    position: absolute;
    bottom: 15px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 8px;
    z-index: 5;
  }
  .dots-nav span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; }
  .dots-nav span.active { background: #fff; }

  /* ===== CENTERED CONTENT WRAPPER ===== */
  .container {
    max-width: 1300px;
    margin: 0 auto;
  }