:root {
    color-scheme: dark;
    --bg: #0a0508;
    --surface: #190c12;
    --text: #fff8fa;
    --muted: #cdbcc3;
    --pink: #ff235f;
    --orange: #ff7a1a
}

* {
    box-sizing: border-box
}

html {
    background: var(--bg);
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.45
}

.container {
    width: min(100% - 32px, 560px);
    margin-inline: auto
}

.hero {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    display: flex;
    align-items: end;
    overflow: hidden
}

.hero__photo,
.hero__shade {
    position: absolute;
    inset: 0;
    z-index: -1
}

.hero__photo {
    background: url("https://media.link.me/_resize/image/width=1092,height=1092,quality=90,format=webp/images/user-profile/2967407/6bb6feff-d67a-47ea-a263-015f99350a45.jpeg") center 25%/cover no-repeat;
    transform: scale(1.03)
}

.hero__shade {
    background: linear-gradient(180deg, rgba(8, 3, 6, .05) 0%, rgba(8, 3, 6, .38) 35%, #0a0508 87%)
}

.hero__content {
    padding-top: 84px;
    padding-bottom: 36px;
    text-align: center
}

.avatar {
    width: 94px;
    height: 94px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .9);
    object-fit: cover;
    box-shadow: 0 8px 30px #0008
}

.eyebrow,
.section__kicker {
    margin: 14px 0 4px;
    color: #ff9ab8;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .15em
}

.hero h1 {
    margin: 0;
    font-size: clamp(2rem, 9vw, 3rem);
    letter-spacing: -.055em
}

.bio {
    max-width: 390px;
    margin: 10px auto 25px;
    color: #f8e9ee;
    font-size: 1rem
}

.cta-stack {
    display: grid;
    gap: 12px
}

.cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 61px;
    padding: 11px 15px;
    border: 1px solid transparent;
    border-radius: 16px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.13;
    transition: transform .18s ease, filter .18s ease;
    box-shadow: 0 10px 24px #0004
}

.cta:hover,
.cta:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.08)
}

.cta:focus-visible,
.text-link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px
}

.cta small {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    opacity: .88
}

.cta--primary {
    background: linear-gradient(120deg, #ff174d, #e90074)
}

.cta--pack {
    background: linear-gradient(120deg, #ff851b, #ff4a51)
}

.cta--secondary {
    background: rgba(27, 14, 20, .86);
    border-color: rgba(255, 255, 255, .24)
}

.cta--international {
    font-size: .93rem
}

.discreet {
    margin: 18px 0 0;
    color: #ebd8df;
    font-size: .78rem
}

.section {
    padding: 64px 0
}

.section h2 {
    margin: 0 0 21px;
    font-size: 1.85rem;
    letter-spacing: -.04em
}

.section--faq {
    padding-top: 26px
}

.benefits {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted)
}

.benefits span {
    color: #ff5f87;
    font-weight: 900
}

.split-ctas {
    display: grid;
    gap: 14px;
    margin-top: 28px
}

.split-ctas .cta {
    min-height: 56px
}

.split-ctas strong {
    margin-left: 5px
}

.text-link {
    color: #ff8bad;
    text-align: center;
    font-weight: 800;
    text-underline-offset: 4px
}

details {
    border-bottom: 1px solid #35212a;
    padding: 15px 0
}

summary {
    cursor: pointer;
    font-weight: 800;
    list-style-position: inside
}

details p {
    margin: 9px 22px 0;
    color: var(--muted);
    font-size: .9rem
}

.payment-note {
    margin: 23px 0;
    color: #d8c4cb;
    text-align: center;
    font-size: .79rem
}

footer {
    padding: 24px 16px 35px;
    color: #967d87;
    text-align: center;
    font-size: .72rem;
    border-top: 1px solid #2a1820
}

@media (min-width:600px) {
    .hero {
        min-height: 760px
    }

    .hero__content {
        padding-bottom: 56px
    }

    .section {
        padding-top: 75px;
        padding-bottom: 75px
    }
}