/* ============================= */
/* 4DM Hero */
/* ============================= */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
  
    /* BACKGROUND VIDEO */
    .hero-section video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        transform: translate(-50%, -50%);
        object-fit: cover;
        z-index: -2;
        opacity: 0;
        transition: opacity 1.5s ease;
    }
  
    /* GRADIENT OVERLAY */
    .hero-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 30%, rgba(90, 0, 255, 0.25), transparent 60%),
                    linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.85));
        z-index: -1;
    }
    
    /* CONTENT */
    .overlay {
        position: relative;
        text-align: center;
        z-index: 1;
        padding: 0 2rem;
    }
    
    .content h1 {
        font-size: clamp(2rem, 5vw, 4rem);
        font-weight: 700;
        letter-spacing: 0.5px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeUp 1.2s ease forwards 0.3s;
    }
    
    .content p {
        margin-top: 1rem;
        margin-bottom: 2rem;
        font-size: clamp(1rem, 2vw, 1.3rem);
        opacity: 0;
        transform: translateY(20px);
        animation: fadeUp 1.2s ease forwards 0.6s;
        color: rgba(255, 255, 255, 0.85);
    }
 
    /* ANIMATIONS */
    @keyframes fadeUp {
        to {
        opacity: 1;
        transform: translateY(0);
        }
    }