/* Explain: App-specific layout utilities (add as needed) */
.section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 768px) {
    .section {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }
}

.hero-bg {
    background:
        radial-gradient(circle at 12% 18%, #e0f2fe 0%, transparent 55%),
        radial-gradient(circle at 88% 8%, #cffafe 0%, transparent 50%),
        var(--surface-color);
}

.hero-grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1.1fr 0.9fr;
    }
}