/* 3D conveyor-oven hero (js/oven-hero.js) */
.hero.hero-3d {
    background: radial-gradient(120% 90% at 75% 55%, #3a4556 0%, #1f2937 55%, #111827 100%);
    justify-content: flex-start;
    text-align: left;
    min-height: 560px;
}
.hero.hero-3d::before {
    background: linear-gradient(90deg, rgba(17, 24, 39, 0.92) 0%, rgba(17, 24, 39, 0.6) 38%, rgba(17, 24, 39, 0) 62%);
    pointer-events: none;
}
.hero.hero-3d .oven-hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero.hero-3d .oven-hero-canvas canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.hero.hero-3d .hero-content {
    position: relative;
    z-index: 2;
    max-width: 560px;
    margin-left: max(0px, calc((100% - 1200px) / 2));
}
.hero.hero-3d .cta-buttons { justify-content: flex-start; }
.hero.hero-3d .hero-caption {
    position: absolute;
    right: 16px;
    bottom: 12px;
    z-index: 2;
    margin: 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 767px) {
    .hero.hero-3d {
        flex-direction: column;
        justify-content: flex-end;
        text-align: center;
        padding-top: 300px;
        min-height: 0;
    }
    .hero.hero-3d .oven-hero-canvas { bottom: auto; height: 320px; }
    .hero.hero-3d::before {
        background: linear-gradient(180deg, rgba(17, 24, 39, 0) 0%, rgba(17, 24, 39, 0) 240px, rgba(17, 24, 39, 0.92) 330px);
    }
    .hero.hero-3d .hero-content { margin-left: 0; }
    .hero.hero-3d .cta-buttons { justify-content: center; }
    .hero.hero-3d .hero-caption { display: none; }
}