:root {
    --color: rgb(255 255 255);
    --color2: rgb(237 191 245 / 100%);
    --color3: rgb(51 12 128 / 100%);
    --color4: rgb(0 0 0);
    --color5: rgb(220 127 227);
    --bgcolor: rgb(0 0 0);
    --bgcolor2: rgb(51 12 128 / 100%);
    --bgcolor2i: rgb(204 243 127 / 100%);
    --bgcolor3: rgb(237 191 245 / 100%);
    --bgcolor3i: rgb(18 64 10 / 100%);
    --bgcolor4: rgb(255 255 255);
    --bgcolor5: rgb(152 30 172 / 100%);
    --bgcolor20: rgb(255 255 255 / 20%);
    --bgcolor70: rgb(0 0 0 / 70%);
    --text-color: rgb(255 255 255);
    --focus-color: rgb(255 255 255);
    --focus-color-inv: rgb(0 0 0);
    --focus-out: 2px solid var(--focus-color);
    --grad-angle: 5deg;
    --h1-size: 2.2rem;
    --h1-weight: 800;
    --h2-size: 1.5rem;
    --h2-weight: bold;
    --text-size: 1.5rem;
    --small-text: 1rem;
    --light-weight: 350;
    --light2-weight: 300;
    --inline-margin: 6.5vi;
    --submit-button-circle: 1em;
    --panel-ipadding: 2.2rem;
    --panel-padding: 1.8rem var(--panel-ipadding) 2rem;
}

.size2 {
    --h2-size: 1.7rem;
}

html {
    color: var(--text-color);
    background-color: var(--bgcolor2);
}

main {
    width: 100%;
    font-size: var(--text-size);
}

div {
    text-wrap: balance;
    text-wrap: pretty;
}

h1 {
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
    color: var(--h1-color, var(--text-color));
    text-transform: var(--h1-trans, uppercase);
}

h2 {
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    color: var(--h2-color, var(--text-color));
    text-transform: var(--h2-trans, none);
}

.sbutton {
    color: var(--bcolor);
    background-color: var(--bbgcolor);
    border-radius: 0.5rem;
    padding: 1rem 3rem;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
    border: 2px solid transparent;
    user-select: none;
}

.cset1 {
    color: var(--color);
    font-size: var(--h2-size);
}

.cset1 h1, .cset1 h2 {
    color: var(--color2);
}

.cset2 {
    color: var(--text-color);
    font-size: var(--h2-size);
}

.cset2 h1, .cset2 h2 {
    color: var(--color3);
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-column1r {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.bg-owner {
    position: relative;
}

.bg-child {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.bg-contain {
    background-size: contain;
    background-repeat: no-repeat;
}

.content {
    --bg-height-base: 100;

    min-block-size: var(--bg-min-height, calc(var(--bg-height-base) * 1vi));
    color: var(--text-color);
}

.bg-whole {
    --bg-min-height: 100svb;

    background-size: cover;
}

.intro-bg {
    background-image: url('./images/intro-bg-l1.webp');
    background-image:
        image-set(
            url('./images/intro-bg-l1.avif') type('image/avif') 1x, url('./images/intro-bg-l2.avif') type('image/avif') 2x,
            url('./images/intro-bg-l1.webp') type('image/webp') 1x, url('./images/intro-bg-l2.webp') type('image/webp') 2x
        )
    ;
}

.intro-content {
    font-size: 1.3rem;
    display: flex;
    flex-direction: column;
}

header {
    padding: 2rem var(--inline-margin);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: safe center;
}

header img {
    block-size: 5rem;
    inline-size: auto;
}

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

header a, header button {
    display: inline-flex;
}

header a:focus-visible,
header button:focus-visible,
.contacts-input:focus-visible,
.submit-button:focus-visible
{
    outline: var(--focus-out);
}

nav, menu {
    color: rgb(255 255 255);
    display: flex;
    flex-direction: row;
    gap: 1.7rem;
    align-items: safe center;
    font-size: 1rem;
}

menu {
    list-style-type: none;
}

menu li {
    text-transform: uppercase;
    text-align: end;
}

.menu-button {
    border: 1px solid transparent;
}

.inv-button {
    --focus-out: 2px solid var(--focus-color-inv);

    filter: invert(1);
}

.menu-button img {
    inline-size: 2rem;
    block-size: auto;
}

.languages {
    position: relative;
}

#lang-button {
    font-weight: bold;
}

menu a, #lang-button, .lang-selector a {
    color: inherit;
    border: 1px solid transparent;
    padding: 0.5rem;
    white-space: pre-line;
}

.lang-selector {
    position: absolute;
    display: flex;
    flex-direction: column;
}

.lang-selected {
    background-color: rgb(128 128 128);
    outline: 2px solid transparent;
}

.intro-content article {
    --h1-size: 2.4rem;
    --h2-size: 1.5rem;
    --h1-weight: 500;
    --h2-weight: 500;
    --intro-amargin: calc(var(--inline-margin) - var(--panel-ipadding) + 0.5rem);

    font-size: 1.5rem;
    margin-block: 5svb 0;
    margin-inline: var(--intro-amargin) auto;
    max-inline-size: 50%;
    display: flex;
    flex-direction: column;
    gap: 1.5svi;
    white-space: pre-line;
}

.intro-padding {
    padding-inline-start: var(--panel-ipadding);
}

.intro-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.3rem var(--panel-ipadding) 1.8rem;
    padding: var(--panel-padding);
    font-weight: var(--light-weight);
    background-color: rgb(0 0 0 / 50%);
    line-height: 1.2;
}

.intro-panel ul {
    font-weight: 500;
    list-style-type: disc;
    list-style-position: outside;
    padding-inline-start: 2.4rem;
}

.sbtncolor5 {
    --bbgcolor: var(--bgcolor5);
    --bcolor: var(--color);
}

.sbtncolor3 {
    --bbgcolor: var(--bgcolor3);
    --bcolor: var(--color3);
}

.intro-buttons {
    display: flex;
    gap: 5rem;
    margin-block-start: 1rem;
    margin-inline: var(--panel-ipadding) auto;
}

.intro-content .sbutton {

    padding-inline: 6ch;
}

.marketing-content {
    --bg-height-base: 35;
    --h1-color: var(--color4);
    --h2-color: var(--color4);
    --h1-size: 3.1rem;
    --h2-size: 2.2rem;
    --h1-weight: 700;
    --h2-weight: 600;
    --h2-trans: uppercase;
}

.marketing-bg {
    inset-block-start: -15%;
    block-size: 150%;
    background-image: url('./images/game-solution-l1.webp');
    background-image:
        image-set(
            url('./images/game-solution-l1.avif') type('image/avif') 1x, url('./images/game-solution-l2.avif') type('image/avif') 2x,
            url('./images/game-solution-l1.webp') type('image/webp') 1x, url('./images/game-solution-l2.webp') type('image/webp') 2x
        )
    ;
    background-position: top right;
    background-size: 56vi auto;
    z-index: 2;
}

.marketing-content2 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--color4);
    background-color: var(--bgcolor4);
    font-size: 1.95rem;
    padding-block-start: 3rem;
    z-index: 1;
}

.marketing-panel {
    inline-size: 50%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-inline: var(--inline-margin);
}

.marketing-content2 h1 {
    --mr-ipadding: 1.5rem;
    --mr-imargin: calc(var(--inline-margin) - var(--mr-ipadding));

    background-color: var(--bgcolor3);
    inline-size: 60%;
    margin-inline: var(--mr-imargin);
    padding: 1.3rem var(--mr-ipadding);
}

.mk-bullets {
    gap: 3rem;
    justify-content: safe center;
}

.mk-bullets div {
    background-color: var(--bgcolor2);
    color: var(--color);
    border-radius: 50%;
    inline-size: 12.5rem;
    aspect-ratio: 1 / 1;
    font-size: 1.65rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: pre-line;
    display: inline-flex;
    align-items: safe center;
    justify-content: safe center;
    text-align: center;
}

.campaigns-content {
    --bg-height-base: 90;
    --h1-color: var(--color4);

    background-color: var(--bgcolor4);
    color: var(--color4);
    white-space: pre-line;
}

.campaigns-bg {
    background-image:
        url('./images/ret-licencing.webp'),
        url('./images/ingame-campaings.webp')
        ;
    background-image:
        image-set(url('./images/ret-licencing.avif'), url('./images/ret-licencing.webp')),
        image-set(url('./images/ingame-campaings.avif'), url('./images/ingame-campaings.webp'))
        ;
    background-size: 45%, contain;
    background-position: right 10% bottom 10%, top;
    background-repeat: no-repeat;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%);
}

.in-game {
    padding: 5rem 2.5rem;
    background-color: var(--bgcolor4);
    position: absolute;
    inset-block-start: 15%;
    inset-inline-end: var(--inline-margin);
    gap: 1.5rem;
}

.licensing {
    position: absolute;
    inset-block-end: 15%;
    inset-inline-start: var(--inline-margin);
    gap: 2rem;
}

.why-content {
    --bg-height-base: 120;
    --h1-size: 3.1rem;
    --h1-weight: 700;
    --h2-size: 1.95rem;
    --h2-weight: 700;
    --h2-trans: uppercase;

    background-color: var(--bgcolor2);
    color: var(--color);
    font-size: var(--h2-size);
    font-weight: var(--light2-weight);
    padding-block: 6rem 3rem;
    padding-inline-start: var(--inline-margin);
    white-space: pre-line;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.why-grid {
    display: grid;
    grid-template-columns: 3fr 4fr;
    gap: 4rem;
}

.why-bg {
    background-image: url(images/game-marketing.webp);
    background-image:
        image-set(
            url('./images/game-marketing-l1.avif') type('image/avif') 1x, url('./images/game-marketing-l2.avif') type('image/avif') 2x,
            url('./images/game-marketing-l1.webp') type('image/webp') 1x, url('./images/game-marketing-l2.webp') type('image/webp') 2x
        )
    ;
    background-size: 65% auto;
    background-size: auto calc(min(100%, 53vi));
    background-repeat: no-repeat;
    background-position: top right;
}

.why-grid h2 {
    font-style: italic;
    font-weight: 500;
    text-decoration: underline;
}

.why-grid > div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    grid-column: 1 / 1;
}

.why-content a {
    font-weight: bold;
    font-weight: 600;
    color: var(--color5);
    text-decoration: underline;
}

.why-percentages {
    margin-inline-end: var(--inline-margin);
}

.why-percentages picture {
    display: flex;
    inline-size: 100%;
    block-size: auto;
    margin-block-start: 1rem;
}

.why-percentages img {
    inline-size: 100%;
    block-size: auto;
}

.loyalty-content {
    --bg-height-base: 48;
    --h1-color: var(--color3);

    color: var(--color3);
    display: flex;
    flex-direction: column;
    padding-inline: var(--inline-margin);
    justify-content: safe center;
}

.loyalty-bg {
    background-color: var(--bgcolor3);
    clip-path: polygon(0% 9%, 100% 0%, 100% 100%, 0% 100%);
}

.loyalty-bg2 {
    background-image:
        url('./images/loyalty-mob.webp')
        ;
    background-image:
        image-set(url('./images/loyalty-mob.avif'), url('./images/loyalty-mob.webp'))
        ;
    background-size: 36%;
    z-index: 1;
    background-position: left 3% top 15%;
    inset-block-start: -5%;
    block-size: 120%;
}

.loyalty-panel {
    font-size: 2rem;
    font-weight: var(--light-weight);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-inline-start: 40%;
}

.loyalty-panel ul {
    list-style: disc;
    list-style-position: outside;
    padding-inline-start: 3rem;
}

.loyalty-panel li span {
    font-weight: bold;
}

.loyalty-quote {
    font-weight: bold;
    white-space: pre-line;
}

.loyalty-quote span {
    font-weight: normal;
    font-style: italic;
    font-size: 0.8em;
}

.opportunity-content {
    --bg-height-base: 104;
    --h1-size: 3.15rem;
    --h2-size: 2.2rem;
    --h1-weight: 800;
    --h2-weight: 600;

    display: flex;
    flex-direction: column;
    font-size: 2rem;
    font-weight: 350;
    justify-content: space-between;
    padding-block: 11% 18%;
    padding-inline: var(--inline-margin);
}

.opportunity-bg {
    background-image:
        url('./images/bk_promo.webp')
        ;
    background-image:
        image-set(
            url('./images/bk_promo_l1.avif') type('image/avif') 1x, url('./images/bk_promo_l2.avif') type('image/avif') 2x,
            url('./images/bk_promo_l1.webp') type('image/webp') 1x, url('./images/bk_promo_l2.webp') type('image/webp') 2x
        )
    ;
    background-size: cover;
    background-position: bottom right;
    background-repeat: no-repeat;
}

.opportunity-bg2 {
    background-image:
        url('./images/opportunity.webp')
        ;
    background-image:
        image-set(url('./images/opportunity.avif'), url('./images/opportunity.webp'))
        ;
    background-size: 65%;
    z-index: 0;
    background-position: right -32% top;
    inset-block-start: -6%;
}

.oppo-oppo, .white-glove {
    display: flex;
    flex-direction: column;
    white-space: pre-line;
}

.oppo-oppo {
    --h1-size: 2.2rem;
    --h1-weight: 600;

    inline-size: 40%;
    gap: 1.5rem;
}

.white-glove {
    inline-size: 55%;
    gap: 2rem;
}

.white-glove span {
    color: var(--color3);
    font-weight: 600;
}

.proven-content {
    --h1-color: var(--color3);
    --h1-size: 3.1rem;
    --h1-weight: 700;
    --h2-size: 1.95rem;

    font-size: var(--h2-size);
    font-weight: var(--light-weight);
    background-color: var(--bgcolor3);
    color: var(--color4);
    padding: 5rem 15vi;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    white-space: normal;
}

.proven-content ul {
    font-weight: bold;
    list-style-type: disc;
    list-style-position: outside;
    padding-inline-start: 2.4rem;
}

.proven-content .sbutton {
    --bcolor: var(--color);
    --bbgcolor: var(--bgcolor2);

    font-size: 1.3rem;
}

.proven-box {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.benefits-bg {
    background-color: var(--bgcolor3);
    z-index: -2;
}

.benefits-bg2 {
    background-image:
        url('./images/gradient_bg.webp')
    ;
    background-image:
        image-set(
            url('./images/gradient_bg_l1.avif') type('image/avif') 1x, url('./images/gradient_bg_l2.avif') type('image/avif') 2x,
            url('./images/gradient_bg_l1.webp') type('image/webp') 1x, url('./images/gradient_bg_l2.webp') type('image/webp') 2x
        )
    ;
    background-size: cover;
    clip-path: polygon(0% 0%, 100% 6svb, 100% 100%, 0% 100%);
    z-index: -1;
}

.benefits-content {
    --h1-size: 3.15rem;
    --h2-size: 2.2rem;
    --h2-weight: 600;

    display: flex;
    flex-direction: column;
    gap: 3rem;
    font-size: 2rem;
    font-weight: var(--light2-weight);
    line-height: 1.2;
    letter-spacing: 1px;
    white-space: pre-line;
    text-align: center;
    padding-block: 9svb 0;
}

.benefits-content h1 {
    margin-block-start: 5rem;
}

.benefits-fb {
    display: flex;
    flex-direction: column;
}

.success-logos {
    display: inline-flex;
    flex-direction: row;
    gap: 3svi;
    align-items: flex-start;
    margin-inline: auto;
}

.success-logos picture {
    display: inline-flex;
}

.success-logos img {
    block-size: auto;
    inline-size: 14svi;
}

.success-logos .lays-logo {
    margin-inline: 4svi 1svi;
}

.success-logos .pepsi-logo {
    inline-size: 18svi;
}

.success-logos .md-logo {
    inline-size: 17svi;
    margin-block-start: 2svi;
}

.benefits-content hr {
    border: 0;
    border-top: 5px solid var(--bgcolor20);
    inline-size: 70%;
    margin: 1rem auto;
}

.benefits-list {
    padding: 2rem 8vi;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 2rem;
    column-gap: 1rem;
    align-items: start;
    justify-items: center;
}

.benefits-list h2 {
    text-transform: capitalize;
}

.benefits-list img {
    block-size: 15vb;
    inline-size: auto;
}

.benefits-list p {
    padding-block-end: 5rem;
}

.faq-content {
    padding: 5rem 20% 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    font-size: 1.2rem;
    line-height: 1.5;
}

.faq-content h1 {
    padding-inline-start: 0.5rem;
}

.faq-content details {
    position: relative;
    background-color: var(--bgcolor20);
    padding: 1rem 2rem;
    border-radius: 0.25rem;
    font-weight: normal;
}

.faq-content summary {
    font-weight: 600;
}

.faq-content summary::marker {
    content: "";
}

.faq-content summary::before {
    content: "+";
    font-size: 1.5rem;
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 2rem;
    line-height: 1.2;
    font-weight: 700;
}

.faq-content details p {
    white-space: pre-line;
    margin-block-start: 0.5rem;
    padding-inline-end: 2rem;
}

.faq-content details[open] summary::before {
    content: "–";
    inset-block-start: unset;
    inset-block-end: 1rem;
}

.contact-bg {
    background-image: url('./images/level_up.webp');
    background-image:
        image-set(
            url('./images/level_up_l1.avif') type('image/avif') 1x, url('./images/level_up_l2.avif') type('image/avif') 2x,
            url('./images/level_up_l1.webp') type('image/webp') 1x, url('./images/level_up_l2.webp') type('image/webp') 2x
        )
    ;
}

.contact-content {
    --bg-height-base: 63;
    --h1-size: 3.15rem;


    font-size: 2rem;
    font-weight: var(--light-weight);
    line-height: 1.5;
    white-space: normal;
    text-align: center;
}

.contact-anchor {
    margin-block-start: 5%;
}

.contact-info {
    background-color: var(--bgcolor70);
    margin-block: auto 6%;
    border-radius: 1rem;
    inline-size: 70%;
    padding-block: 2rem;
    gap: 2rem;
    margin-inline: auto;
}

.contact-info .sbutton {
    --bbgcolor: var(--bgcolor3);
    --bcolor: var(--color3);

    font-size: 1.3rem;
    font-weight: 800;
    padding: 1.5rem 4.5rem;
    margin-inline: auto;
}

.contact-dialog {
    --btn-bg: rgb(160 160 160);
    --cr-color: rgb(0 0 0);
    --cr-border: 1px solid transparent;
    --cr-bg: rgb(246 246 246 / 90%);
    --cr-shadow: 2px 4px 12px 0  rgb(0 0 0 / 90%);
    --cr-hover-bgcolor: oklch(from var(--cr-bg) calc(l - 0.07) c h / 100%);
    --cr-input-bgcolor: oklch(from var(--cr-bg) calc(l - 0.15) c h / 100%);
    --cr-focused-color: oklch(from var(--cr-colog) calc(l - 0.1) c h / 100%);

    margin: auto;
    padding: 1.5rem 3rem 2rem;
    border-radius: 1rem;
    border: var(--cr-border);
    color: var(--cr-color);
    background-color: var(--cr-bg);
    box-shadow: var(--cr-shadow);

}

.contact-dialog::backdrop {
    backdrop-filter: blur(5px);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.close-button {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    display: inline-flex;
    border: 1px solid transparent;
    background: none;
}

.close-button:hover {
    background-color: var(--cr-hover-bgcolor);
}

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

.button-image {
    width: 2rem;
    height: 2rem;
    background-position: center;
    background-repeat: no-repeat;
    filter: invert(0) drop-shadow(1px 1px rgb(0 0 0));
}

.contact-form h1 {
    color: rgb(0 0 0);
    text-transform: none;
    font-weight: 500;
}

.contacts-input {
    line-height: 1.2;
    box-sizing: border-box;
    outline: none;
    border: 1px solid transparent;
    background-color: rgb(51 51 51);
    background-color: var(--cr-input-bgcolor);
    border-radius: 0.25rem;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.4em 1em 0.3em;
    inline-size: 100%;
}

.contacts-input::placeholder {
    font-weight: normal;
}

.close-button:focus-visible,
.contacts-input:focus-visible,
.submit-button:focus-visible
{
    outline: 2px solid var(--cr-focused-color);
}

.submit-button {
    padding: 0.5em;
    font-weight: bold;
    border-radius: 16px;
    font-size: 1.2rem;
    line-height: normal;
    cursor: pointer;
    text-transform: uppercase;
    border: 2px solid transparent;
    background-color: var(--btn-bg);
    margin-block-start: 1rem;
    user-select: none;
}

.submit-button::before {
    content: '';
    display: none;
    position: relative;
    inset-inline-start: -0.4em;
    inset-block-start: 0.15em;
    margin-block-start: -0.2em;
    width: var(--submit-button-circle);
    height: var(--submit-button-circle);
    border: 2px solid;
    border-inline-color: transparent;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.5s;
    animation: 0.8s linear infinite rotate;
}

.sending-button {
    pointer-events: none;
    cursor: not-allowed;
}

.sending-button::before {
    display: inline-block;
    transition-delay: 0.5s;
    transition-duration: 1s;
    opacity: 1;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.error-message {
    display: flex;
    justify-content: space-between;
    align-items: safe center;
    border: 2px solid rgb(255 0 0);
    color: var(--button-text);
    inline-size: 100%;
}

.button-img {
    padding: 0;
    block-size: 1.1rem;
    inline-size: auto;
}

.shadow-img {
    filter: brightness(85%) drop-shadow(1px 1px oklch(0% 0 0deg));
}

.hidden-message {
    display: none;
}

.error-message > * {
    display: flex;
    align-items: safe center;
    gap: 0.4em;
    margin: 3px 0.4em;
}

.error-message > button {
    background: none;
    border: 2px solid transparent;
    padding-inline: 0.3rem 0.15rem;
    border-inline-start: 3px solid rgb(255 0 0);
    color: var(--text-color);
    user-select: none;
}

.hidden-text {
    display: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: rect(0 0 0 0);
    border: 0;
}

.warn-message {
    border: 2px solid rgb(0 190 0);
    color: var(--button-text);
    inline-size: 100%;
    padding: 0;
    margin: 0;
}

.warn-text {
    margin: 0.5em 1em;
    text-align: center;
}

.msg-success {
    text-align: center;
}


.btn-up {
    position: fixed;
    inset-inline-end: 4rem;
    inset-block-end: 4rem;
    z-index: 2;
    user-select: none;
}

.btn-up a {
    display: inline-flex;
    border: 2px solid rgb(255 255 255);
    background-color: rgb(92 38 150 / 100%);
    border-radius: 50%;
    padding: 0.4rem;
}

.btn-up img {
    inline-size: 2rem;
    block-size: auto;
    filter: invert(1);
}

.hidden-button {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.visible-button {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

@media screen and (width >= 960px) {
   .contact-form {
        padding: 1.5rem 3rem 2rem;
    }
}

@media screen and (width >= 1150px) {
    .mobile-only, .mobon {
        display: none;
    }
}

@media screen and (width < 1150px) {
    .mobile-only, .mobon {
        display: inline-flex;
    }

    nav {
        position: relative;
        flex-direction: column;
        gap: 0.3rem;
    }

    .mobile-hidden, .nomob {
        display: none;
    }

    #menu-cnt {
        position: absolute;
        margin-inline-start: auto;
        background: var(--bgcolor4);
        color: var(--color4);
        border: 2px solid transparent;
        padding: 0.5rem var(--inline-margin) 1rem;
        align-items: flex-end;
        z-index: 1;
        inline-size: clamp(12rem, 15rem, 60vi);
    }

    .menu-inset {
        inset-block-start: -0.5rem;
        inset-inline-end: calc( -1 * var(--inline-margin));
    }

    menu {
        color: rgb(0 0 0);
        flex-direction: column;
        gap: 0;
        align-items: flex-end;
    }

    menu a {
        white-space: normal;
    }

    .languages {
        display: block;
    }

    .btn-up {
        inset-inline-end: 2rem;
        inset-block-end: 2rem;
    }

    .btn-up img {
        inline-size: 1.5rem;
    }
}

@media (orientation: portrait) {
    :root {
        --h1-size: 1.5rem;
        --h2-size: 1.2rem;
        --text-size: 1rem;
        --small-text: 1rem;
        --light-weight: 400;
        --light2-weight: 400;
        --inline-margin: 5vi;
        --panel-ipadding: 0.6rem;
        --panel-padding: 0.6rem var(--panel-ipadding) 0.7rem;
    }

    .size2 {
        --h2-size: 1.2rem;
    }

    .msize2 {
        --h1-size: 1.1rem;
        --h2-size: 0.8rem;
        --text-size: 0.8rem;
    }

    main {
        background-color: rgb(0 0 0 / 0%);
    }

    .intro-bg {
        background-image: url('./images/intro-bgm-l1.webp');
        background-image:
            image-set(
                url('./images/intro-bgm-l1.avif') type('image/avif') 1x, url('./images/intro-bgm-l2.avif') type('image/avif') 2x,
                url('./images/intro-bgm-l1.webp') type('image/webp') 1x, url('./images/intro-bgm-l2.webp') type('image/webp') 2x
            )
        ;
        background-repeat: no-repeat;
    }

    .intro-content {
        --bg-min-height: unset;
        --h1-size: min(1.5rem, 5.5vi);
        --h2-size: min(1rem, 4vi);

        padding-block: 0 0.5rem;
        font-size: min(0.9rem, 3.5vi);
    }

    header {
        padding-block: 0.5rem;
    }

    .intro-content article {
        --h1-size: 1.15rem;
        --h2-size: 0.75rem;
        --intro-amargin: calc(var(--inline-margin) - var(--panel-ipadding));

        max-inline-size: 75%;
        padding-block-start: 1rem;
        gap: 1rem;
        margin-block-start: 0;
        font-size: var(--h2-size);
        white-space: normal;
    }

    .intro-panel {
        inline-size: 78%;
        inline-size: 60vi;
        font-size: 2.8vi;
        gap: 0.8rem;
    }

    .intro-panel ul {
        padding-inline-start: 1.8em;
    }

    .intro-buttons {
        margin-block-start: 0;
        gap: 0.6rem;
    }

    .intro-content .sbutton {
        margin-block: 0;
        font-size: 0.65rem;
        padding: 0.75rem 5ch;
        white-space: nowrap;
    }

    .logo {
        max-width: 13%;
    }

    .marketing-content {
        --bg-height-base: 60;
    }

    .marketing-content2 {
        --h1-size: 1.15rem;
        --h2-size: 0.85rem;
        font-size: 0.75rem;
        padding-block: 1.2rem 1.5rem;
    }

    .marketing-content2 h1 {
        margin-inline: var(--inline-margin);
        padding: 0;
        background-color: transparent;
        inline-size: 40%;
    }

    .marketing-bg {
        inset-block-start: -10%;
        background-image:
            image-set(
                url('./images/game-solutionm.avif') type('image/avif') 1x, url('./images/game-solutionm-l2.avif') type('image/avif') 2x,
                url('./images/game-solutionm.webp') type('image/webp') 1x, url('./images/game-solutionm-l2.webp') type('image/webp') 2x
            )
        ;
        background-size: 70vi auto;
        background-position: top right -7vi;
    }

    .marketing-panel {
        gap: 0.8rem;
        inline-size: 55%;
    }

    .mk-bullets {
        gap: 0.75rem;
        justify-content: flex-start;
        padding-inline-start: 0.3rem;
    }

    .mk-bullets div {
        inline-size: 3.75rem;
        inline-size: 15vi;
        font-size: 0.475rem;
    }

    .campaigns-content {
        --bg-height-base: 195;
        --h1-size: 0.85rem;
        font-size: 0.75rem;
        white-space: normal;
    }

    .campaigns-bg {
        background-image:
            image-set(url('./images/ret-licencing.avif'), url('./images/ret-licencing.webp')),
            image-set(
                url('./images/ingame-campaingsm.avif') type('image/avif') 1x, url('./images/ingame-campaingsm-l2.avif') type('image/avif') 2x,
                url('./images/ingame-campaingsm.webp') type('image/webp') 1x, url('./images/ingame-campaingsm-l2.webp') type('image/webp') 2x
            )
            ;
        background-size: 50%, contain;
        background-position: right bottom 10%, top;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 95%);
    }

    .in-game {
        inset-block-start: 7.5%;
        inline-size: 33ch;
        padding: 1.5rem;
        gap: 0.4rem;
    }

    .licensing {
        inset-block-end: 12.5%;
        inline-size: 45%;
        gap: 0.4rem;
    }

    .why-content {
        --h1-size: 1.15rem;
        --h2-size: 0.9rem;

        font-size: 0.75rem;
        padding-block: 1rem;
        gap: 1rem;
        white-space: normal;
    }

    .why-grid, .why-grid > div {
        gap: 0.75rem;
    }

    .why-grid {
        grid-template-columns: 4fr 5fr;
        column-gap: 0;
    }

    .why-bg {
        background-size: 65% auto;
    }

    .why-grid > div:last-of-type {
        grid-column: 1 / 3;
    }

    .why-grid picture {
        grid-row: 1 / 3;
    }

    .why-percentages {
        gap: 0;
    }

    .loyalty-content {
        --bg-height-base: 57;
        --h1-size: 1rem;
    }

    .loyalty-panel {
        font-size: 0.65rem;
        gap: 0.2rem;
    }

    .loyalty-panel ul {
        padding-inline-start: 1.5rem;
    }

    .opportunity-content {
        --bg-height-base: 156.8;
        --h1-size: 1.15rem;
        --h2-size: 0.75rem;

        font-size: var(--h2-size);
        padding-block: 8% 15%;
    }

    .opportunity-bg {
        background-image:
            url('./images/bk_promom.webp')
            ;
        background-image:
            image-set(
                url('./images/bk_promom.avif') type('image/avif') 1x, url('./images/bk_promom_l2.avif') type('image/avif') 2x,
                url('./images/bk_promom.webp') type('image/webp') 1x, url('./images/bk_promom_l2.webp') type('image/webp') 2x
            )
        ;
    }

    .opportunity-bg2 {
        background-image:
            url('./images/opportunitym.webp')
            ;
        background-image:
            image-set(
                url('./images/opportunitym.avif') type('image/avif') 1x, url('./images/opportunitym_l2.avif') type('image/avif') 2x,
                url('./images/opportunitym.webp') type('image/webp') 1x, url('./images/opportunitym_l2.webp') type('image/webp') 2x
            )
        ;
        inset-block-start: -6%;
        background-position: right top;
        background-size: 45%;
    }

    .oppo-oppo {
        --h1-size: 0.9rem;
        --h1-weight: 700;

        inline-size: 60%;
        gap: 0.8rem;
    }

    .white-glove {
        inline-size: 50%;
        gap: 1rem;
        white-space: normal;
    }

    .proven-content {
        --h1-size: 0.9rem;

        font-size: 0.75rem;
        padding-block: 2rem;
        padding-inline: var(--inline-margin) 3rem;
        white-space: pre-line;
    }

    .proven-box {
        white-space: normal;
    }

    .proven-content ul {
        padding-inline-start: 1.2rem;
    }

    .proven-content .sbutton {
        font-size: 0.65rem;
        padding: 0.6rem 1.3rem;
        white-space: nowrap;
    }

    .benefits-bg2 {
        background-image: url('./images/gradient_bgm.webp');
        background-image:
            image-set(
                url('./images/gradient_bgm_s.avif') type('image/avif') 1x, url('./images/gradient_bgm_l.avif') type('image/avif') 2x,
                url('./images/gradient_bgm_s.webp') type('image/webp') 1x, url('./images/gradient_bgm_l.webp') type('image/webp') 2x
            )
        ;
    }

    .benefits-content {
        --bg-height-base: 216.5;
        --h1-size: 1.15rem;
        --h2-size: 0.9rem;

        font-size: 0.75rem;
        padding-block: 5rem 3rem;
        gap: 1rem;
    }

    .benefits-content h1 {
        margin-block-start: 0;
    }

    .benefits-content hr {
        inline-size: 85%;
        border-top-width: 2px;
    }

    .benefits-list {
        grid-template-columns: 1fr 1fr;
        padding-block: 0;
        gap: 1rem;
    }

    .benefits-list img {
        inline-size: 20vi;
        align-self: center;
    }

    .benefits-list p {
        padding-block-end: 0;
    }

    .contact-bg {
        background-image: url('./images/level_upm.webp');
        background-image:
            image-set(
                url('./images/level_upm_l1.avif') type('image/avif') 1x, url('./images/level_upm_l2.avif') type('image/avif') 2x,
                url('./images/level_upm_l1.webp') type('image/webp') 1x, url('./images/level_upm_l2.webp') type('image/webp') 2x
            )
        ;
    }

    .contact-content {
        --bg-height-base: 93;
        --h1-size: 1.15rem;

        font-size: 0.8rem;
        gap: 0.4rem;
        white-space: pre-line;
    }

    .contact-info {
        inline-size: 75%;
        white-space: pre-line;
        gap: 1rem;
        line-height: 1;
        padding-block: 1rem;
        margin-block-end: 4%;
    }

    .contact-info .sbutton {
        padding: 0.5rem 1.5rem;
        font-size: 0.65rem;
    }

    .submit-button {
        margin: 0.6rem 0 0 auto;
    }

    .contact-form {
        margin-block-start: 1rem;
    }

    .contacts-input {
        padding: 0.6em 1em 0.5em;
    }

    .faq-content {
        padding: 2rem var(--inline-margin) 0;
        gap: 1rem;
    }

    .faq-content details {
        padding-block: 0.75rem;
        padding-inline: 1.5rem 2rem;
        font-size: 1rem;
    }

    .faq-content summary::before {
        font-size: 1.2rem;
        inset-inline-end: 1.5rem;
        line-height: 1;
    }

    .faq-content details p {
        font-weight: var(--light-weight);
        padding-inline-end: 0;
    }

}

@media screen and (width <= 460px) and (orientation: portrait) {
    :root {
        --small-text: 0.9rem;
    }

    .contact-dialog {
        max-inline-size: 95%;
        padding: 1.5rem 7vi 0.5rem;
    }
}

@media screen and (width <= 360px) and (orientation: portrait) {
	:root {
		--small-text: 0.7rem;
	}
}

footer {
    --footer-color: rgb(255 255 255);
    --footer-button: rgb(255 255 255);
    --icon-filter: invert(1);
    --icon-inv-filter: none;
    --logo-width: 80px;
    --logo-height: 80px;
    --telegram-bg: rgb(81 160 216);
    --telegram-bg: oklch(68% 0.11 242deg);
    --nologo-width: 5rem;
    --cpr-gap: 0;
    --cpr-plinks-dir: row;
    --cpr-plinks-gap: 0.5em;
    --cpr-plinks-span: block;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 0.75rem;
    line-height: 0.85rem;
    color: var(--footer-color);
    letter-spacing: 0.6px;
    padding: 3rem var(--inline-margin) 1rem;
}

@media (forced-colors: active) {
    .inv-button {
        filter: unset;
    }
}

@media (prefers-contrast: more) {
    footer {
        --telegram-bg: rgb(0 0 0);
    }
}

.logo-img {
    filter: var(--icon-filter, none);
}

.no-logo {
    inline-size: var(--nologo-width);
}

.inv-filter {
    --icon-filter: var(--icon-inv-filter);
}

.copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cpr-gap);
}

.copyright p {
    padding: 0;
}

.prop-links {
    display: flex;
    align-items: center;
    flex-flow: var(--cpr-plinks-dir) wrap;
    justify-content: safe center;
    gap: var(--cpr-plinks-gap);
}

.prop-links span {
    display: var(--cpr-plinks-span);
}

.logo-icons {
    display: inline-flex;
    gap: 0.2rem;
    align-items: safe center;
    margin-block: 0.15rem;
}

.logo-icons a {
    display: inline-flex;
}

.link-unclr, .link-unclr:visited {
    color: var(--footer-color);
}

.subscribe {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-inline-start: auto;
}

.subscribe > a {
    padding: 1rem 2rem;
    font-weight: bold;
    font-size: 0.85rem;
    line-height: 1.2rem;
    letter-spacing: 1.5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    background-color: var(--telegram-bg);
    color: var(--footer-button);
    background-position: center center;
    border-radius: 0.5em;
    border: 1px solid transparent;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    user-select: none;
}

.subscribe > div {
    margin-block-start: 0.4em;
    text-align: right;
}

@media (orientation: landscape) {
    .side-bar {
        flex: 1;
    }
}

@media (orientation: portrait) {
    .link-unclr {
        text-decoration: revert;
    }
}

@media screen and (width <= 800px) {
    .subscribe > a {
        line-height: 1rem;
        text-align: center;
    }
}

@media screen and (width <= 800px) and (orientation: portrait) {
    footer {
        --nologo-width: 0;

        padding-block-start: 1rem;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .logo-img, .no-logo {
        display: none;
    }

    .subscribe {
        margin-inline: auto;
        align-items: center;
    }

    .subscribe > div {
        text-align: center;
    }
}

@media screen and (width <= 400px) and (orientation: portrait) {
    html[lang="es"] footer .copyright,
    html[lang="fr"] footer .copyright
    {
        --cpr-gap: 0.2em;
        --cpr-plinks-dir: column;
        --cpr-plinks-gap: 0.3em;
        --cpr-plinks-span: none;
    }
}

.shadow-img-2 {
    filter: brightness(85%) drop-shadow(2px 2px #000);
}

.hidden {
    display: none;
}