#hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}

#hero-canvas.loaded {
    opacity: 1;
}

main > header::before {
    display: none;
}

main > header {
    position: relative;
    overflow: hidden;
    padding: 5rem 0 4rem;
    min-height: 280px !important;
    border-radius: 16px 16px 24px 24px;
    border-bottom: 1px solid rgba(0, 242, 255, 0.15);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(0, 242, 255, 0.05);
    mask-image: linear-gradient(
        to bottom,
        black 70%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 70%,
        transparent 100%
    );
}

main.container {
    padding-top: 2rem;
}