f*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
}

html,
body {
    overflow-x: hidden;
}

.container {
    max-width: 100%;
    overflow: hidden;
}

body.scroll-lock {
    overflow: hidden;
}

.container {
    padding: 0 20px;
    width: 100vw;
}

.lotto-site-header {
    padding-top: 10px;
}

.lotto-site-header__body {
    text-align: center;
}

.lotto-site-header__logo {
    width: 240px;
    height: 75px;
    margin-right: 5px;
}

.lotto-site-header__action {
    bottom: 0;
    left: 0;
    padding: 10px 0;
    position: fixed;
    width: 100vw;
    z-index: 10;
    transition: 125ms ease;
}

.lotto-site-header__action.to-top {
    top: 10px;
}

.lotto-site-header__button--signup {
    background-color: #d70a2d;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    position: relative;
    border: none;
}

.lotto-site-header__button--signup::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -1px;
    padding: 1px;
    border-radius: 100px;
    background: linear-gradient(
        92.48deg,
        #d70a2d 12.41%,
        rgba(0, 9, 132, 0.01) 95.4%
    );
    -webkit-mask: linear-gradient(#000 0 0),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) exclude,
        linear-gradient(#000 0 0) content-box;
    transition: 125ms ease;
    opacity: 1;
}

.lotto-site {
    background: linear-gradient(50deg, #641f79 0%, #e42e887d 50%);
    color: #d7bbfb;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    position: relative;
    z-index: 1;
    backdrop-filter: brightness(0.3);
}

.lotto-site::before {
    position: fixed;
    content: '';
    inset: 0;
    background-image: url('lotto-site-bg.jpg');
    background-size: cover;
    background-position: center;
    z-index: -1;
    filter: blur(30px);
    transition: opacity 1s ease-in-out;
    opacity: 0.5;
    animation: gradientShift 10s infinite alternate;
}

.lotto-site h1 {
    font-weight: 700;
    font-size: 109px;
    margin-top: 0;
    color: #ffffff;
    text-shadow: 3px 3px 5px rgba(255, 255, 255, 0.368);
}

.lotto-site h2 {
    font-size: 25px;
    font-weight: 700;
    margin-top: 0;
    color: #ffffff;
}

.lotto-site h3 {
    font-size: 18px;
    font-weight: 700;
    margin-top: 0;
    color: #ffffff;
}

.lotto-site p {
    margin-top: 0;
    line-height: 1.4;
    color: #d7bbfb;
}

.lotto-site li {
    margin-top: 0;
    line-height: 1.4;
    color: #d7bbfb;
}

.lotto-site__header {
    margin-bottom: 133px;
}

.lotto-site__main {
    margin-bottom: 60px;
}

.lotto-site__intro {
    margin-bottom: 261px;
}

.lotto-site__content {
    margin-bottom: 60px;
}

.lotto-site__review {
    margin-bottom: 60px;
}

.lotto-site__numbers {
    margin-bottom: 60px;
}

.lotto-site-footer__body {
    padding-bottom: 50px;
    padding-top: 40px;
}

.lotto-site-footer p {
    margin-bottom: 0;
}

.lotto-site-footer__title {
    font-size: 40px;
    margin-bottom: 30px;
}

.lotto-site-footer__content {
    line-height: 1.22;
    margin-bottom: 30px;
    font-size: 30px;
}

.lotto-site-footer__link {
    color: #d70a2d;
    transition: all 125ms ease;
}

.lotto-site-footer__icons {
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: radial-gradient(
        ellipse,
        rgba(255, 255, 255, 0.624) 30%,
        rgba(122, 121, 121, 0) 70%
    );
    border-radius: 30px;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lotto-site-footer__icon + .lotto-site-footer__icon {
    margin-left: 5px;
}

.lotto-site-modal {
    width: 420px;
    border-radius: 20px;
    border: none;
    padding: 0;
    z-index: -1;
}

.lotto-site-modal::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.lotto-site-modal[open] {
    animation: popup-zoom-in 75ms linear;
}

.lotto-site-modal__close {
    align-items: center;
    background-color: transparent;
    border: none;
    display: inline-flex;
    height: 24px;
    justify-content: center;
    position: absolute;
    right: 10px;
    top: 10px;
    transition: transform 75ms linear;
    width: 24px;
    z-index: 1;
}

.lotto-site-modal__content {
    padding: 20px 20px 45px;
}

.lotto-site-modal__title {
    margin-bottom: 30px;
    font-size: 30px;
    text-align: center;
    color: #3e3e3e;
}

.lotto-site-modal__input {
    font-family: inherit;
    width: 100%;
    border-radius: 100px;
    background-color: #ebebeb;
    color: #666666;
    min-height: 50px;
    border: 1px solid transparent;
    padding-left: 30px;
    font-size: 16px;
}

.lotto-site-modal__input + .lotto-site-modal__input {
    margin-top: 10px;
}

.lotto-site-modal__input:focus-visible {
    border-color: #d70a2d;
    outline: none;
}

.lotto-site-modal__input.filled {
    border: 1px solid #d70a2d;
    outline: none;
}

.lotto-site-modal__button {
    background: #d70a2d;
    border-radius: 100px;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-weight: inherit;
    text-decoration: none;
    width: 100%;
    padding: 10px 100px;
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 7px;
}

.lotto-site-modal__question {
    font-size: 16px;
    color: #d70a2d;
    text-decoration: none;
}

.lotto-site-modal--message {
    text-align: center;
}

.lotto-site-modal--message .lotto-site-modal__content {
    padding: 40px 20px;
}

.lotto-site-modal--message .lotto-site-modal__content p {
    margin-bottom: 0;
}

@keyframes popup-zoom-in {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.lotto-site-intro__title {
    font-size: 60px;
    margin-bottom: 14px;
    line-height: 1.1;
}

.lotto-site-intro__subtitle {
    font-size: 18px;
    margin-bottom: 50px;
}

.lotto-site-intro__button {
    background: #d70a2d;
    border-radius: 100px;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-weight: inherit;
    text-decoration: none;
    font-weight: 700;
    padding: 18px 85px;
    text-transform: uppercase;
    transition: 175ms ease;
    font-size: 20px;
}

.lotto-site-content {
    position: relative;
    z-index: 1;
}

.lotto-site-content::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 379px;
    z-index: -1;
    bottom: -160px;
    background-repeat: no-repeat;
    background-size: 1590px auto;
    background-position: center top;
}

.lotto-site-content__title {
    font-size: 40px;
    margin-bottom: 16px;
}

.lotto-site-content p {
    margin-bottom: 0;
}

.lotto-site-review {
    z-index: 1;
    position: relative;
}

.lotto-site-review__title {
    font-size: 40px;
    margin-bottom: 30px;
}

.lotto-site-review__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lotto-site-review-card {
    padding: 20px 28px 20px 20px;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1;
}

.lotto-site-review-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -1px;
    padding: 1px;
    border-radius: 30px;
    background: linear-gradient(302.31deg, #6700ff 30.63%, #d70a2d 69.37%);
    -webkit-mask: linear-gradient(#000 0 0),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) exclude,
        linear-gradient(#000 0 0) content-box;
}

.lotto-site-review-card + .lotto-site-review-card {
    margin-top: 10px;
}

.lotto-site-review-card__author {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #ffffff;
}

.lotto-site-review-card__text {
    margin-bottom: 10px;
    font-size: 14px;
}

.lotto-site-review-card__starlist {
    display: flex;
    gap: 5px;
}

.lotto-site-review-card__star {
    width: 22px;
    height: 22px;
}

.lotto-site-numbers__card + .lotto-site-numbers__card {
    margin-top: 10px;
}

.lotto-site-numbers-card {
    border-radius: 30px;
    background-color: #2222221b;
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    padding: 30px 40px 30px 30px;
}

.lotto-site-numbers-card__title {
    font-size: 20px;
    margin-bottom: 10px;
}

.lotto-site-numbers-card__subtitle {
    margin-bottom: 16px;
    font-size: 14px;
    display: flex;
    gap: 17px;
    color: #d7bbfb;
}

.lotto-site-numbers-card__draw {
    color: #d7bbfb;
}

.lotto-site-numbers-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px 6px;
    flex-wrap: wrap;
}

.lotto-site-numbers-card__item {
    align-items: center;
    background-color: #d70a2d;
    border-radius: 100%;
    border: 2px solid #d70a2d;
    display: flex;
    flex-shrink: 0;
    font-weight: 600;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.lotto-site-numbers-card--latest
    .lotto-site-numbers-card__item:nth-last-child(-n + 3) {
    background-color: transparent;
    color: #d7bbfb;
}

.lotto-site-fqa__title {
    font-size: 40px;
    margin-bottom: 30px;
}

.lotto-site-fqa__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lotto-site-fqa__item + .lotto-site-fqa__item {
    margin-top: 10px;
}

.lotto-site-fqa-card {
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding: 20px 16px 20px 20px;
    position: relative;
}

.lotto-site-fqa-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -1px;
    padding: 1px;
    border-radius: 30px;
    background: linear-gradient(302.31deg, #6700ff 30.63%, #d70a2d 69.37%);
    -webkit-mask: linear-gradient(#000 0 0),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) exclude,
        linear-gradient(#000 0 0) content-box;
}

.lotto-site-fqa-card__header {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    padding-right: 64px;
}

.lotto-site-fqa-card__title {
    text-transform: uppercase;
    line-height: 1.1;
    font-size: 18px;
    margin-bottom: 0;
}

.lotto-site-fqa-card__toggle {
    background: #d70a2d;
    border-radius: 100px;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-weight: inherit;
    text-decoration: none;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    transition: 250ms ease;
    position: absolute;
    right: 0;
    top: -4px;
}

.lotto-site-fqa-card__toggle img {
    width: 16px;
    height: 16px;
    transform: rotate(180deg);
}

.lotto-site-fqa-card.is-expanded .lotto-site-fqa-card__toggle img {
    transform: rotate(0);
}

.lotto-site-fqa-card__content {
    max-height: 0;
    overflow: hidden;
    transition: 250ms ease;
    opacity: 0;
    position: relative;
    font-size: 14px;
}

.lotto-site-fqa-card__content:before {
    position: absolute;
    content: '';
    width: 281px;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(144, 144, 144, 0.01) 0%,
        #d70a2d 50%,
        rgba(0, 124, 255, 0.01) 99%
    );
    left: 0;
    top: 0;
}

.lotto-site-fqa-card__content p {
    margin-bottom: 0;
}

.lotto-site-fqa-card.is-expanded .lotto-site-fqa-card__content {
    opacity: 1;
    padding-top: 14px;
    margin-top: 18px;
}

@media (min-width: 992px) {
    .container {
        box-sizing: content-box;
        margin: 0 auto;
        max-width: 952px;
        width: auto;
    }

    .lotto-site-header__body {
        text-align: left;
    }

    .lotto-site-header__action {
        padding: 0;
        bottom: unset;
        left: unset;
        width: auto;
        top: 30px;
        right: calc((100vw - 952px) / 2);
    }

    .lotto-site-footer__icons {
        flex-direction: row;
        gap: 40px;
        background: radial-gradient(
            circle,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0) 100%
        );
    }

    .lotto-site-intro {
        margin-bottom: 120px;
    }

    .lotto-site-review__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .lotto-site-review-card + .lotto-site-review-card {
        margin-top: 0;
    }
}

@media (min-width: 1440px) {
    .container {
        max-width: 1044px;
    }

    .lotto-site-header {
        padding-top: 20px;
    }

    .lotto-site-header__logo {
        width: 343px;
        height: 104px;
    }

    .lotto-site-header__action {
        right: calc((100vw - 1044px) / 2);
    }

    .lotto-site-header__button {
        padding: 13px 44px;
    }

    .lotto-site {
        font-size: 25px;
    }

    .lotto-site__header {
        margin-bottom: 66px;
    }

    .lotto-site__main {
        margin-bottom: 69px;
    }

    .lotto-site__intro {
        margin-bottom: 150px;
    }

    .lotto-site__content {
        margin-bottom: 130px;
    }

    .lotto-site__review {
        margin-bottom: 140px;
    }

    .lotto-site__numbers {
        margin-bottom: 130px;
    }

    .lotto-site-footer__body {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .lotto-site-footer__title {
        font-size: 55px;
    }

    .lotto-site-footer__content {
        margin-bottom: 60px;
    }

    .lotto-site-modal__title {
        margin-bottom: 40px;
    }

    .lotto-site-modal__input {
        font-size: 18px;
        min-height: 55px;
    }

    .lotto-site-modal__button {
        font-size: 25px;
    }

    .lotto-site-modal__question {
        font-size: 18px;
    }

    .lotto-site-intro__body {
        max-width: 967px;
    }

    .lotto-site-intro__title {
        font-size: 120px;
        margin-bottom: 28px;
    }

    .lotto-site-intro__subtitle {
        font-size: 35px;
        margin-bottom: 60px;
    }

    .lotto-site-intro__button {
        font-size: 28px;
        padding: 23px 106px;
    }

    .lotto-site-content::before {
        top: 292px;
        bottom: unset;
    }

    .lotto-site-content__body {
        max-width: 861px;
    }

    .lotto-site-content__title {
        font-size: 55px;
        margin-bottom: 30px;
        padding-right: 91px;
    }

    .lotto-site-review__title {
        font-size: 55px;
        margin-bottom: 50px;
    }

    .lotto-site-review-card {
        padding: 30px 20px 30px 20px;
    }

    .lotto-site-review-card__author {
        font-size: 25px;
        margin-bottom: 14px;
    }

    .lotto-site-review-card__text {
        font-size: 18px;
        margin-bottom: 14px;
    }

    .lotto-site-numbers__body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .lotto-site-numbers__card + .lotto-site-numbers__card {
        margin-top: 0;
    }

    .lotto-site-numbers-card {
        padding: 30px 25px 39px 30px;
    }

    .lotto-site-numbers-card__title {
        font-size: 26px;
        margin-bottom: 14px;
    }

    .lotto-site-numbers-card__subtitle {
        margin-bottom: 24px;
        font-size: 18px;
    }

    .lotto-site-numbers-card__list {
        gap: 10px;
    }

    .lotto-site-numbers-card__item {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .lotto-site-fqa__title {
        font-size: 55px;
        margin-bottom: 50px;
    }

    .lotto-site-fqa-card {
        padding: 25px 16px 23px 30px;
    }

    .lotto-site-fqa-card__header {
        gap: 50px;
        padding-right: 80px;
    }

    .lotto-site-fqa-card__title {
        text-transform: none;
        font-size: 26px;
    }

    .lotto-site-fqa-card__toggle {
        width: 48px;
        height: 48px;
        top: -11px;
    }

    .lotto-site-fqa-card__toggle img {
        width: 24px;
        height: 24px;
    }

    .lotto-site-fqa-card__content {
        font-size: 18px;
        padding-right: 185px;
    }

    .lotto-site-fqa-card.is-expanded .lotto-site-fqa-card__content {
        margin-top: 24px;
    }
}

@media (min-width: 1920px) {
    .container {
        max-width: 1280px;
    }

    .lotto-site-header__action {
        right: calc((100vw - 1280px) / 2);
    }

    .lotto-site::before {
        background-size: 100% auto;
    }

    .lotto-site__main {
        margin-bottom: 94px;
    }

    .lotto-site-footer__body {
        width: 1083px;
    }

    .lotto-site-content__body {
        max-width: 1065px;
    }

    .lotto-site-content__title {
        padding-right: 295px;
    }

    .lotto-site-review-card {
        padding: 30px 67px 30px 20px;
    }

    .lotto-site-review-card__text {
        margin-bottom: 28px;
    }

    .lotto-site-numbers-card {
        padding: 30px 30px 40px 30px;
    }

    .lotto-site-numbers-card__item {
        width: 50px;
        height: 50px;
    }

    .lotto-site-fqa-card__content {
        padding-right: 405px;
    }
}

@media (any-hover: hover) {
    .lotto-site-header__button:hover {
        background: #d70a2d;
    }

    .lotto-site-header__button--signup:hover {
        background: #d70a2d;
    }

    .lotto-site-header__button--signup:hover::before {
        opacity: 0;
    }

    .lotto-site-footer__link:hover {
        color: #6700ff;
        text-decoration: none;
    }

    .lotto-site-modal__close:hover {
        transform: scale(1.2);
    }

    .lotto-site-modal__button:hover {
        background: #6700ff;
    }

    .lotto-site-modal__question:hover {
        color: #6700ff;
        text-decoration: none;
    }

    .lotto-site-intro__button:hover {
        background: #6700ff;
    }

    .lotto-site-intro__button:hover {
        transform: scale(1);
        box-shadow: 0 0 16px 2px rgba(255, 255, 255, 0.3);
        z-index: 1;
    }

    .lotto-site-fqa-card__toggle:hover {
        background: #6700ff;
    }
}

body {
    background-image: url('bg.webp');
    background-size: cover;
    background-position: center;
}

.lotto-site-footer__buttons {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 20px;
}

.lotto-site-footer__button {
    background: #d70a2d;
    color: #ffffff;
    border: none;
    border-radius: 100px;
    padding: 10px 30px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s ease;
}

.lotto-site-footer__button:hover {
    background: #6700ff;
}

@media (max-width: 768px) {
    .lotto-site-header__action {
        position: static;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .lotto-site-header {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .lotto-site-header__body {
        flex-direction: column;
    }

    .lotto-site-header__logo {
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .lotto-site-header {
        margin-bottom: 5px;
    }

    .lotto-site-intro__title {
        margin-top: 0;
    }

    .lotto-site__main {
        padding-top: 10px;
    }

    .container {
        padding-top: 0;
        padding-bottom: 0;
    }
}

@media (max-width: 768px) {
    .lotto-site-intro__subtitle {
        font-size: 16px;
        text-align: center;
        margin-bottom: 10px;
    }

    .lotto-site-intro__action {
        margin-top: 40px;
    }

    .lotto-site h1 {
        font-size: 48px;
        line-height: 2;
        text-align: center;
        margin-top: 15px;
    }
}

.lotto-site-header__action {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.lotto-site-header__button {
    all: unset;
    width: 160px;
    height: 50px;
    border-radius: 30px;
    background-color: #d70a2d;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    box-shadow: none;
    margin: 0;
}

.lotto-site-header__button::before,
.lotto-site-header__button::after {
    content: none;
}