/* Explain: Layout utilities with mobile optimizations and hero section adjustments. */
.section-pad {
    padding-top: clamp(4rem, 8vw, 10rem);
    padding-bottom: clamp(4rem, 8vw, 10rem);
}

.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--background-color);
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(5,5,5,0.95) 0%, rgba(5,5,5,0.85) 50%, rgba(5,5,5,0.5) 100%);
}

@media (max-width: 768px) {
    .hero-bg::after {
        background: linear-gradient(to top, rgba(5,5,5,0.95) 0%, rgba(5,5,5,0.8) 40%, transparent 80%);
    }
}

/* Scroll Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1000ms cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 150ms; }
.reveal-delay-2 { transition-delay: 300ms; }
.reveal-delay-3 { transition-delay: 450ms; }

.content-grid {
    display: grid;
    gap: 4rem;
}

@media (min-width: 1024px) {
    .content-grid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}