/* Explain: Section layout backgrounds and responsive refinements. - */
.section-panel {
    position: relative;
}

.section-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 12%, rgba(200, 162, 74, 0.1), transparent 22rem),
        radial-gradient(circle at 88% 20%, rgba(122, 21, 21, 0.05), transparent 28rem);
}

.section-panel > * {
    position: relative;
}

.footer-contact::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 15%, rgba(122, 21, 21, 0.5), transparent 24rem),
        radial-gradient(circle at 80% 60%, rgba(200, 162, 74, 0.16), transparent 24rem);
}

.footer-contact > * {
    position: relative;
}

@media (max-width: 1023px) {
    html {
        scroll-padding-top: 150px;
    }

    section[id] {
        scroll-margin-top: 150px;
    }
}

@media (max-width: 640px) {
    .site-header {
        background: rgba(8, 8, 8, 0.86);
        backdrop-filter: blur(16px);
    }

    .hero-scene {
        padding-top: 6rem;
    }
}