.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);

    margin-bottom: var(--space-4);
    padding: 0.45rem 0.95rem;

    border-radius: var(--radius-pill);

    background: var(--color-brand-soft);
    color: var(--color-brand);

    font-size: var(--font-size-sm);
    font-weight: 900;
}

.section-title {
    max-width: 820px;

    margin-bottom: var(--space-4);

    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: var(--line-height-tight);
}

.section-subtitle {
    max-width: 720px;

    color: var(--color-text-muted);

    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
}

.section-header {
    max-width: 760px;

    margin-bottom: var(--space-12);
}

.section-header-center {
    max-width: 760px;

    margin-inline: auto;
    margin-bottom: var(--space-12);

    text-align: center;
}

.section-surface {
    background: var(--color-surface);
}

.section-muted {
    background: var(--color-background);
}

.section-soft-brand {
    background:
        radial-gradient(
            circle at top left,
            rgba(231, 121, 151, 0.1),
            transparent 32rem
        ),
        var(--color-background);
}

.section-soft-blue {
    background:
        radial-gradient(
            circle at top right,
            rgba(12, 155, 217, 0.1),
            transparent 32rem
        ),
        var(--color-background);
}

.section-childish {
    position: relative;

    background:
        radial-gradient(circle at 10% 8%, rgba(231, 121, 151, 0.18), transparent 18rem),
        radial-gradient(circle at 90% 18%, rgba(74, 168, 216, 0.16), transparent 18rem),
        radial-gradient(circle at 50% 95%, rgba(247, 228, 196, 0.85), transparent 24rem),
        var(--color-background);
}

.section-soft-blue {
    background:
        radial-gradient(
            circle at top right,
            rgba(74, 168, 216, 0.14),
            transparent 32rem
        ),
        var(--color-background-warm);
}

.section-soft-brand {
    background:
        radial-gradient(
            circle at top left,
            rgba(231, 121, 151, 0.16),
            transparent 32rem
        ),
        var(--color-background);
}

.section-surface {
    background: var(--color-surface);
}

.section-muted {
    background: var(--color-background-warm);
}

.section-childish > .container {
    position: relative;
    z-index: 1;
}

.section-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;

    margin-top: var(--space-8);
}

@media (max-width: 560px) {
    .section-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .section-actions .btn {
        width: 100%;
    }
}