@charset "UTF-8";

.hero {
    overflow: clip;
    padding-top: 3.2rem;
}

.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.hero::before {
    width: 18rem;
    height: 18rem;
    right: -4rem;
    top: 2rem;
    background: radial-gradient(circle, rgba(161, 20, 96, 0.12), transparent 65%);
}

.hero::after {
    width: 14rem;
    height: 14rem;
    left: -5rem;
    bottom: 1rem;
    background: radial-gradient(circle, rgba(255, 208, 228, 0.42), transparent 68%);
}

.hero-layout,
.intro-grid,
.method-layout {
    display: grid;
    gap: 1.6rem;
}

.hero-copy {
    display: grid;
    gap: 1.4rem;
}

.hero-copy h1 {
    font-size: clamp(2.6rem, 8vw, 5.2rem);
    max-width: 10ch;
}

.hero-actions,
.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.hero-highlights {
    display: grid;
    gap: 0.7rem;
}

.hero-highlights li {
    position: relative;
    padding-left: 1.35rem;
    color: var(--muted);
}

.hero-highlights li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #da5f9e);
}

.hero-panel {
    display: grid;
    gap: 1rem;
    align-content: start;
}