/* Explain: Layout utilities and decorative shapes for page sections. */
.section-pad {
    padding-top: clamp(4.5rem, 8vw, 7.5rem);
    padding-bottom: clamp(4.5rem, 8vw, 7.5rem);
}

/* Abstract shapes — different perspectives coming together */
.shape-circle {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    z-index: 0;
    filter: blur(2px);
}

.hero-section {
    background:
        radial-gradient(circle at 84% 10%, rgba(123, 63, 228, 0.09), transparent 26rem),
        radial-gradient(circle at 10% 88%, rgba(14, 154, 167, 0.09), transparent 24rem),
        var(--background-color);
}

/* Soft brand-shape background — same shapes as the logo, muted and blurred */
.hero-shapes-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        url('https://files.cdn-files-a.com/uploads/12481312/normal_6adeaa8791873.png?format=avif'),
        url('https://files.cdn-files-a.com/uploads/12481312/normal_6adeaa8791873.png?format=avif');
    background-repeat: no-repeat, no-repeat;
    background-position: right -6rem top 4%, left -8rem bottom 6%;
    background-size: 40rem auto, 30rem auto;
    opacity: 0.14;
    filter: blur(2.5px);
    pointer-events: none;
}

.shape-hero-photo {
    width: 11rem;
    height: 11rem;
    right: -2.5rem;
    bottom: -1.5rem;
    background: rgba(14, 154, 167, 0.11);
}

.cta-section {
    background:
        radial-gradient(circle at 90% 18%, rgba(255, 45, 139, 0.09), transparent 24rem),
        radial-gradient(circle at 4% 86%, rgba(123, 63, 228, 0.09), transparent 22rem),
        linear-gradient(180deg, var(--background-color), var(--surface-color));
}

@media (max-width: 767px) {
    .hero-shapes-bg {
        background-position: right -4rem top 2%, left -6rem bottom 4%;
        background-size: 26rem auto, 20rem auto;
        opacity: 0.12;
    }
}