/*@layer components {*/
/*    .container {*/
/*        @apply w-full max-w-[1172px] mx-auto px-4;*/
/*    }*/
/*}*/

:root {
    --color-100: hsla(0,0%,100%,1);
    --color-80: hsla(0,0%,100%,.8);
    --color-60: hsla(0,0%,100%,.6);
    --color-45: hsla(0,0%,100%,.45);
    --color-30: hsla(0,0%,100%,.3);
    --color-10: hsla(0,0%,100%,.1);
    --color-07: hsla(0,0%,100%,.07);
    --color-05: hsla(0,0%,100%,.05);


    --bg-main: #111;
    --bg-card: #181818;
    --bg-card-light: #1F1F1F;

    --red: #E63329;
    --red-hover: #ff3b30;

    --header-h: 64px;
    --header-h-mob: 56px;
    --container-max: 1172px;
    --container-px: 16px;

    --font: 'Manrope', sans-serif;
    --ease: .18s cubic-bezier(.4,0,.2,1);
    --ease-mid: .28s cubic-bezier(.4,0,.2,1);

    --gap-section: clamp(52px, 12vw, 120px);
    --radius: 10px;
    --radius-lg: 16px;
}


*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    color: var(--color-100);
}

body {
    font-family: var(--font);
    background: var(--bg-main);
    color: var(--color-100);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 7vw, 72px);
}
ul, ol { list-style: none; }
button, a { border: none; background: none; color: inherit; text-decoration: none; cursor: pointer; font-family: var(--font); }
img { display: block; max-width: 100%; height: auto; }
button, a {border: none;background: none;color: inherit;text-decoration: none;}


.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-px);
}

.text-grad-h {
    background: linear-gradient(90deg, #fff 20%, rgba(255,255,255,.6) 97%);
    background-clip: text;
    color: transparent;
}

/* Gradient text — vertical (stat numbers) */
.text-grad-v {
    background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.4) 100%);
    background-clip: text;
    color: transparent;
}



.text-64 { font-weight: 600; font-size: clamp(36px,6vw,56px); line-height: 1.1; letter-spacing: -.03em; }
.text-40 { font-weight: 600; font-size: clamp(28px,4vw,40px); line-height: 1.15; letter-spacing: -.03em; }
.text-big { font-weight: 600; font-size: clamp(48px,7vw,72px); line-height: 1; letter-spacing: -.03em; }
.text-medium { font-weight: 500; font-size: 22px; line-height: 1; letter-spacing: -.03em; }
.text-body { font-weight: 400; font-size: 16px; line-height: 1.5; }
.text-sm { font-weight: 400; font-size: 14px; line-height: 1.4; }
.text-s { font-weight: 400; font-size: 12px; line-height: 1.4; }
.text-xs { font-weight: 400; font-size: 10px; line-height: 1.4; }


.color-gradient {
    inline-size: fit-content;
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 1) 20.04%, hsla(0, 0%, 100%, 0.6) 96.52%);
    background-clip: text;
    color: transparent;
}
.color-100 {
    color: var(--color-100);
}
.color-80 {
    color: var(--color-80);
}
.color-60 {
    color: var(--color-60);
}
.color-30 {
    color: var(--color-30);
}

.border-gradient {
    border-image-source: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 48.56%, rgba(255, 255, 255, 0.16) 100%);
}


/* Primary button */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background: var(--red);
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    transition: background var(--ease);
}
.btn-primary:hover { background: var(--red-hover); }



.dropdown {
    position: relative;

    .dropdown__menu {
        position: absolute;
        inset-block-start: 100%;
        content-visibility: hidden;
        visibility: hidden;
        opacity: 0;
        user-select: none;
        pointer-events: none;
        background-color: var(--background-primary);
        border: 1px solid var(--color-30);
        border-radius: 8px;
        /*transition: .2s cubic-bezier(0.4, 0.0, 1, 1);*/
        /*transition-property: visibility, opacity, content-visibility;*/
    }

    svg {
        transition: .3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    &:hover .dropdown__menu{
        display: flex;
        flex-direction: column;
        user-select: all;
        pointer-events: all;
        content-visibility: visible;
        visibility: visible;
        opacity: 1;

        inline-size: min-content;
        height: min-content;

        li {
            padding: 8px 16px;
            width: max-content;
            cursor: pointer;
            color: var(--color-80);
        }
    }

    &:hover svg {
        rotate: 180deg;
    }
}