@font-face {
    font-family: 'Sriracha';
    src: url("../fonts/sriracha-cyrillic.otf") format("truetype");
    font-weight: 600;
    font-style: normal;
}


@font-face {
    font-family: 'Chalk';
    src: url("../fonts/chalk.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Chekharda';
    src: url("../fonts/Chekharda-BoldItalic.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url("../fonts/MontserratAlternates-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url("../fonts/MontserratAlternates-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url("../fonts/MontserratAlternates-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url("../fonts/MontserratAlternates-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url("../fonts/MontserratAlternates-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url("../fonts/MontserratAlternates-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
}


:root {
    --primary: #ff0095; /* основной яркий розовый */
    --secondary: #ffffff; /* белый — оставим для контраста */
    --accent: #ff0095; /* более тёмный акцент под основной цвет */
    --accent-dark: #99005c; /* ещё глубже, для hover/active состояний */
    --muted: #ffe6f2; /* светлый розово-пудровый фон */
    --highlight: #fff0fa; /* фон для выделения, едва розовый */
    --green: #00cc88; /* свежий контрастный зелёный для позитивных статусов */
    --gray-light: #f0f0f0; /* светло-серый, можно чуть потеплее */
    --text-main: #33001f; /* тёмный бордово-сливовый, читается на розовом фоне */

    --font-description: 'Jost';
    --font-four: 'Montserrat Alternates';
    --font-five: 'Chalk';
    --font-accent: 'Chekharda';
    --font-main: 'Sriracha';
}


::selection {
    background: var(--accent)

}

.font-accent {
    font-family: var(--font-four), sans-serif;
}

.font-main {
    font-family: var(--font-main), sans-serif;
}

.font-four {
    font-family: var(--font-four), serif;
}


.font-five {
    font-family: var(--font-five), serif;
}


.font-description {
    font-family: var(--font-description), sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 500;
}


/* ======= Базовые стили ======= */
body {
    font-family: var(--font-four), sans-serif;
    color: var(--text-main);
    background-color: var(--secondary);
    min-width: 576px;
}

h1, h2, h3, h4, h5, h6, p {
    font-family: var(--font-theerd), sans-serif;
}

.text-primary {
    color: var(--accent) !important;
}

.custom-card-style-1 {
    background: var(--highlight);
    box-shadow: 0 10px 15px -3px rgba(255, 0, 149, 0.3),
    0 4px 6px -2px rgba(255, 0, 149, 0.25) !important;
}

.timeline-number h3 {
    color: var(--highlight)
}

.custom-margin-top {
    margin-top: -150px;
}


.hero-text__text {
    color: var(--secondary);
    padding: 16px;
    backdrop-filter: blur(2px);
}

.nav-item__link:hover {
    color: var(--accent-dark);

}

.gift-count__block {
    top: -18px;
    right: 10px;
    background: var(--accent);
    color: var(--bs-body-bg);
}

.vk-id-button {
    border-radius: 8px;
    font-size: 14px;
    padding: 8px 16px;
    color: var(--secondary);
    background-color: #237edd;
    font-weight: 600;
}

.vk-id-button:hover {
    cursor: pointer;
}

.button-primary {
    border: 1px solid var(--accent);
    background: var(--secondary);
    color: var(--accent);
}

.button-primary:hover {
    background: var(--accent);
    color: var(--secondary);
}

.success-referal {
    background-color: var(--bs-success);
    color: var(--secondary);
}

.failed-referal {
    background-color: var(--bs-danger);
    color: var(--secondary);
}

.social-icon-block {
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 10px;
}

.social-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.referral-btn__icon {
    width: 32px;
    height: 32px;
}