.hero-slider { position: relative; height: 100vh; width: 100%; overflow: hidden; background: #000; }
.slide { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    opacity: 0; visibility: hidden; display: flex; align-items: center; 
    padding: 25vh 10% 15vh 10%; 
}
.slide.active { opacity: 1; visibility: visible; }
.slide-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: 1; transform: scale(1.1); }
.slide-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: 
    radial-gradient(circle at 30% 50%, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.85) 100%),
    linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.8) 100%);
  z-index: 2;
}

.slide-content { position: relative; z-index: 10; width: 100%; }

/* --- TYPOGRAPHY HERO --- */
h1 { font-size: clamp(2.5rem, 8vw, 5.5rem); font-weight: 900; line-height: 0.95; letter-spacing: -2px; }
h1 .serif-italic { font-size: clamp(1.8rem, 5vw, 3.5rem); display: block; margin-top: 15px; letter-spacing: 0; color: var(--light-grey); }

/* --- SYSTEM CONTROLS & VECTOR ARROWS --- */
.showcase-ui { position: absolute; bottom: 60px; left: 80px; right: 80px; display: flex; justify-content: space-between; align-items: center; z-index: 100; }

.slide-arrow { 
    cursor: pointer; 
    opacity: 0.4; 
    transition: var(--transition); 
    display: flex;
    align-items: center;
    justify-content: center;
}
.slide-arrow svg {
    width: 28px;
    height: 28px;
    transition: var(--transition);
}
.slide-arrow:hover { 
    opacity: 1; 
}
.slide-arrow:hover svg {
    transform: scale(1.1);
}

.ui-center { width: 25%; display: flex; align-items: center; }
.indicator-bar { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.1); position: relative; }
.indicator-progress { position: absolute; left: 0; top: 0; height: 100%; width: 33.3%; background: var(--white); transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1); }