:root {
    --purple: #7447ff;
    --purple-dark: #4f28cc;
    --purple-soft: #e8e0ff;

    --blue: #3478ff;
    --blue-dark: #0082cd;
    --blue-soft: #dce9ff;

    --cyan: #5fd7ff;

    --black: #090b12;
    --black-soft: #181c27;

    --white: #ffffff;
    --off-white: #fafbff;

    --gray-100: #f1f3f8;
    --gray-200: #e2e6ef;
    --gray-500: #747b89;
    --gray-700: #414754;

    --font-display: "Bebas Neue", sans-serif;
    --font-body: "Inter", sans-serif;

    --page-width: 1440px;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family: var(--font-body);
    background: var(--white);
    color: var(--black);
    overflow-x: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
textarea,
select {
    font: inherit;
}


img {
    display: block;
    max-width: 100%;
}


.button {
    min-height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 17px;

    padding: 0 27px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 900;

    text-transform: uppercase;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}


.button span {
    font-size: 19px;
}


.button:hover {
    transform: translateY(-3px);
}


.button-primary {
    background:
        linear-gradient(
            115deg,
            var(--purple),
            var(--blue)
        );

    color: var(--white);

    box-shadow:
        0 15px 35px rgba(87, 70, 235, 0.22);
}


.button-primary:hover {
    box-shadow:
        0 20px 45px rgba(87, 70, 235, 0.32);
}


.button-outline {
    color: var(--purple);

    background:
        rgba(255, 255, 255, 0.55);

    border:
        2px solid var(--purple);

    backdrop-filter: blur(10px);
}


.button-outline:hover {
    background: var(--purple);
    color: var(--white);
}


.section-container {
    width: min(92%, var(--page-width));
    margin: 0 auto;
}


.section-label {
    display: block;

    margin-bottom: 10px;

    color: var(--purple);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


.reveal {
    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}