:root {
    --page-max-width: 1024px;

    --black: #000000;

    --gold-light: #efc98a;
    --gold-main: #d3903a;
    --gold-dark: #6a2e0b;

    --text-light: #f2e9dd;
    --text-muted: #ddd3c6;
}


/* =========================================================
   БАЗОВЫЕ НАСТРОЙКИ
   ========================================================= */

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    min-width: 320px;

    background: var(--black);
    color: var(--text-light);

    font-family:
        "Oswald",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

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

    -webkit-tap-highlight-color: transparent;
}

.landing {
    width: 100%;
    max-width: var(--page-max-width);

    margin: 0 auto;

    overflow: hidden;

    background: var(--black);
}


/* =========================================================
   HERO
   Маскот полностью помещается в секцию и не обрезается сверху
   ========================================================= */

.hero {
    --parallax-y: 0px;

    position: relative;

    width: 100%;

    aspect-ratio: 1304 / 1135;

    overflow: hidden;

    background-color: #557e98;

    background-image:
        url("assets/background-haifa.jpg?v=19");

    background-repeat: no-repeat;
    background-size: auto 112%;

    background-position:
        center
        calc(50% + var(--parallax-y));

    isolation: isolate;
    will-change: background-position;
}

.hero__composition {
    position: absolute;

    z-index: 1;

    left: 50%;
    bottom: 0;

    width: 106%;
    max-width: none;
    height: 100%;

    object-fit: contain;
    object-position: center bottom;

    transform: translateX(-50%);

    pointer-events: none;
    user-select: none;
}


/* =========================================================
   БЛОК «ПОЧЕМУ МЫ»
   ========================================================= */

.benefits {
    position: relative;

    padding:
        clamp(22px, 5.8vw, 36px)
        4px
        clamp(25px, 6.5vw, 42px);

    background:
        linear-gradient(
            to bottom,
            #070401 0%,
            #020100 15%,
            #000000 52%,
            #000000 100%
        );
}

.benefits::before {
    content: "";

    position: absolute;

    top: 0;
    left: 6%;
    right: 6%;

    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(213, 144, 55, 0.78),
            transparent
        );
}

.benefits__heading {
    display: grid;

    grid-template-columns:
        minmax(22px, 1fr)
        auto
        minmax(22px, 1fr);

    align-items: center;

    gap: 9px;

    width: 84%;

    margin:
        0
        auto
        clamp(15px, 4vw, 25px);
}

.section-title {
    margin: 0;

    color: var(--gold-light);

    font-family:
        "Rye",
        "Pirata One",
        Georgia,
        serif;

    font-size: clamp(26px, 7.5vw, 45px);
    font-weight: 400;
    line-height: 1;

    text-align: center;
    text-transform: uppercase;

    white-space: nowrap;

    letter-spacing: 0.2px;

    text-shadow:
        0 2px 0 var(--gold-dark),
        0 4px 0 #311104,
        0 7px 12px rgba(0, 0, 0, 0.92);
}

.benefits__ornament {
    position: relative;

    display: block;

    height: 2px;

    background:
        linear-gradient(
            to right,
            transparent,
            var(--gold-main)
        );
}

.benefits__ornament--right {
    transform: scaleX(-1);
}

.benefits__ornament::after {
    content: "◆";

    position: absolute;

    top: 50%;
    right: -2px;

    color: var(--gold-main);

    font-size: 8px;

    transform: translateY(-50%);
}


/* =========================================================
   ПРЕИМУЩЕСТВА
   ========================================================= */

.benefits__grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    align-items: start;

    width: 100%;
}

.benefit-card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 0;

    padding:
        0
        3px
        5px;

    text-align: center;
}

.benefit-card:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 1px;
    height: 100%;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(213, 151, 69, 0.7) 0,
            rgba(213, 151, 69, 0.7) 4px,
            transparent 4px,
            transparent 9px
        );
}

.benefit-card__image-box {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: clamp(82px, 22.5vw, 150px);

    margin-bottom: 4px;
}

.benefit-card__image {
    width: clamp(78px, 21vw, 140px);
    height: clamp(78px, 21vw, 140px);

    object-fit: contain;

    filter:
        drop-shadow(
            0 5px 5px rgba(0, 0, 0, 0.6)
        );
}

.benefit-card__image--chest {
    width: clamp(88px, 23.5vw, 155px);
    height: clamp(80px, 21.5vw, 142px);
}

.benefit-card__image--mask {
    width: clamp(91px, 24vw, 160px);
    height: clamp(69px, 18.5vw, 120px);
}

.benefit-card__title {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    min-height: 29px;

    margin: 0 0 5px;

    color: var(--gold-main);

    font-family:
        "Pirata One",
        "Rye",
        Georgia,
        serif;

    font-size: clamp(12px, 3.35vw, 23px);
    font-weight: 400;
    line-height: 0.95;

    text-transform: uppercase;
    text-wrap: balance;

    text-shadow:
        0 1px 0 #5c2508,
        0 3px 5px rgba(0, 0, 0, 0.96);
}

.benefit-card__text {
    margin: 0;

    color: var(--text-muted);

    font-size: clamp(7.5px, 2.25vw, 16px);
    font-weight: 400;
    line-height: 1.19;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.95);
}


/* =========================================================
   ДОСКА И СОЦИАЛЬНЫЕ КНОПКИ
   ========================================================= */

.socials {
    padding:
        0
        5px
        clamp(12px, 3vw, 21px);

    background:
        linear-gradient(
            to bottom,
            #000000 0%,
            #070301 100%
        );
}

.social-board {
    position: relative;

    width: 100%;

    overflow: visible;
}

.social-board__background {
    position: relative;

    z-index: 1;

    width: 100%;
    height: auto;

    object-fit: contain;

    pointer-events: none;
    user-select: none;

    filter:
        drop-shadow(
            0 10px 10px rgba(0, 0, 0, 0.55)
        );
}

.social-board__content {
    position: absolute;

    z-index: 2;

    top: 7%;
    right: 7%;
    bottom: 7%;
    left: 7%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    text-align: center;
}

.social-board__title {
    position: relative;
    top: 10px;

    width: 100%;

    margin:
        0
        0
        clamp(13px, 3.5vw, 22px);

    color: var(--gold-light);

    font-family:
        "Rye",
        "Pirata One",
        Georgia,
        serif;

    font-size: clamp(20px, 5.8vw, 42px);
    font-weight: 400;
    line-height: 1;

    text-align: center;
    text-transform: uppercase;

    white-space: nowrap;

    text-shadow:
        0 2px 0 #642b0b,
        0 5px 9px rgba(0, 0, 0, 0.9);
}

.social-board__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    gap: clamp(11px, 3vw, 18px);
}

.social-button {
    position: relative;

    display: block;

    width: 62%;

    min-width: 0;

    overflow: hidden;

    border-radius: 9px;

    transition:
        transform 140ms ease,
        filter 140ms ease;
}

.social-button img {
    position: relative;

    z-index: 1;

    width: 100%;
    height: auto;

    filter:
        drop-shadow(
            0 5px 5px rgba(0, 0, 0, 0.48)
        );
}


/* =========================================================
   БЕГУЩИЙ БЛИК
   ========================================================= */

.social-button::after {
    content: "";

    position: absolute;

    z-index: 2;

    top: -35%;
    bottom: -35%;
    left: -60%;

    width: 34%;

    pointer-events: none;

    background:
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255, 255, 255, 0.02) 20%,
            rgba(255, 244, 205, 0.72) 50%,
            rgba(255, 255, 255, 0.08) 80%,
            transparent 100%
        );

    transform: skewX(-18deg);

    filter: blur(1px);

    opacity: 0;

    animation:
        social-button-shine
        4.2s
        ease-in-out
        infinite;
}

.social-button--instagram::after {
    animation-delay: 2.1s;
}

@keyframes social-button-shine {

    0% {
        left: -60%;
        opacity: 0;
    }

    10% {
        opacity: 0;
    }

    16% {
        opacity: 0.9;
    }

    34% {
        left: 125%;
        opacity: 0.82;
    }

    42% {
        left: 125%;
        opacity: 0;
    }

    100% {
        left: 125%;
        opacity: 0;
    }

}

.social-button:active {
    transform: scale(0.96);

    filter: brightness(1.08);
}

.social-button:focus-visible {
    outline: 3px solid var(--gold-light);
    outline-offset: 3px;
}


/* =========================================================
   НИЖНИЙ БЛОК
   ========================================================= */

.footer {
    position: relative;

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

    width: 100%;

    padding:
        clamp(25px, 6.5vw, 42px)
        8px
        calc(clamp(27px, 7vw, 45px) + env(safe-area-inset-bottom));

    background: #000000;
}

.footer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 6%;
    right: 6%;

    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(213, 144, 55, 0.78),
            transparent
        );
}

.footer__heading {
    display: grid;

    grid-template-columns:
        minmax(25px, 1fr)
        minmax(0, auto)
        minmax(25px, 1fr);

    align-items: center;

    gap: clamp(7px, 2vw, 13px);

    width: 94%;

    margin: 0 auto;
}

.footer__text {
    margin: 0;

    color: var(--gold-main);

    font-family:
        "Pirata One",
        "Rye",
        Georgia,
        serif;

    font-size: clamp(14.4px, 4.02vw, 27.6px);
    font-weight: 400;
    line-height: 1.08;

    text-align: center;
    text-transform: uppercase;

    letter-spacing: 0.15px;

    text-shadow:
        0 1px 0 #5c2508,
        0 3px 5px rgba(0, 0, 0, 0.96);
}

.footer__text span {
    display: block;

    white-space: nowrap;
}

.footer__ornament {
    position: relative;

    display: block;

    height: 2px;

    background:
        linear-gradient(
            to right,
            transparent,
            var(--gold-main)
        );
}

.footer__ornament--right {
    transform: scaleX(-1);
}

.footer__ornament::after {
    content: "◆";

    position: absolute;

    top: 50%;
    right: -2px;

    color: var(--gold-main);

    font-size: 8px;

    transform: translateY(-50%);
}


/* =========================================================
   УЗКИЕ ЭКРАНЫ
   ========================================================= */

@media (max-width: 350px) {

    .benefits {
        padding-left: 2px;
        padding-right: 2px;
    }

    .benefit-card {
        padding-left: 2px;
        padding-right: 2px;
    }

    .benefit-card__title {
        min-height: 26px;
        font-size: 10.5px;
    }

    .benefit-card__text {
        font-size: 7px;
    }

    .social-board__title {
        margin-bottom: 11px;
        font-size: 19px;
    }

    .social-board__buttons {
        gap: 9px;
    }

    .social-button {
        width: 64%;
    }

    .footer__heading {
        width: 97%;
        gap: 5px;
    }

    .footer__text {
        font-size: 12.5px;
    }

    .footer__ornament::after {
        font-size: 7px;
    }

}


/* =========================================================
   БОЛЬШИЕ ТЕЛЕФОНЫ
   ========================================================= */

@media (min-width: 430px) {

    .social-button {
        width: 60%;
    }

}


/* =========================================================
   ПЛАНШЕТЫ И ДЕСКТОП
   ========================================================= */

@media (min-width: 700px) {

    .hero {
        background-size: cover;
    }

    .benefits {
        padding:
            55px
            38px
            62px;
    }

    .benefits__heading {
        margin-bottom: 30px;
    }

    .benefit-card {
        padding:
            0
            16px
            17px;
    }

    .benefit-card__image-box {
        height: 165px;
        margin-bottom: 9px;
    }

    .benefit-card__image,
    .benefit-card__image--chest,
    .benefit-card__image--mask {
        width: 158px;
        height: 158px;
    }

    .benefit-card__title {
        min-height: 0;
        font-size: 23px;
    }

    .benefit-card__text {
        font-size: 17px;
        line-height: 1.32;
    }

    .socials {
        padding:
            10px
            38px
            30px;
    }

    .social-board__content {
        top: 7%;
        right: 8%;
        bottom: 7%;
        left: 8%;
    }

    .social-board__title {
        font-size: 42px;
    }

    .social-button {
        width: 56%;
    }

    .social-button:hover {
        transform:
            translateY(-4px)
            scale(1.015);

        filter: brightness(1.08);
    }

    .footer__heading {
        width: 82%;
        gap: 16px;
    }

    .footer__text {
        font-size: 28px;
    }

}


/* =========================================================
   ОТКЛЮЧЕНИЕ АНИМАЦИЙ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .hero {
        --parallax-y: 0px;
        will-change: auto;
    }

    .social-button {
        transition: none;
    }

    .social-button::after {
        display: none;
        animation: none;
    }

}