.hero {
    position: relative;
    padding: var(--space-9) 0 var(--space-10);
    background:
        radial-gradient(ellipse at top right, var(--accent-soft), transparent 60%),
        var(--bg-0);
    overflow: hidden;
}
@media (max-width: 720px) {
    .hero { padding: var(--space-7) 0 var(--space-8); }
}
.hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    max-width: 880px;
}
.hero__title {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    margin-top: var(--space-3);
}
.hero__title-italic {
    font-style: italic;
    color: var(--accent);
}
.hero__desc {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: var(--text-2);
    max-width: 640px;
}
.hero__cta {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-3);
}