/* CSS Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body {
    overscroll-behavior: none;
    touch-action: pan-y;
    overflow-x: hidden;
    line-height: 1.5;
    scrollbar-width: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-golos); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #0E0F12; }
main { display: block; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { background-color: transparent; color: inherit; text-decoration: inherit; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
button:disabled { cursor: not-allowed; }
fieldset { border: none; margin: 0; padding: 0; }
legend { padding: 0; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
textarea { resize: vertical; }
summary { display: list-item; }
[hidden] { display: none !important; }
/* Focus styles */
:focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; }
/* Remove focus outline for mouse users */
:focus:not(:focus-visible) { outline: none; }
/* Smooth scrolling */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

:root {
    --text-text-secondary: #bfbfbf;
    --text-text-accent: #dabfa1;
    --text-text-primary: white;
    --text-text-tertiary: #737373;
    --text-text-on-primary: #121212;
    --Native-subtitle_text_color: #707579;

    --surface-container-low: #191919;

    --icon-icon-primary: white;
    --icon-icon-accent: #dabfa1;
    --icon-icon-secondary: #BFBFBF;

    --surface-container-low: #191919;

    /* --- Fonts --- */
    --font-golos: "Golos Text", sans-serif;
    --font-titan: "Titan One", sans-serif;
    --font-fjalla: "Fjalla One", sans-serif;

    --controls-radius: 12px;
    --controls-secondary: #3E3E3E;
    --button-primary-gradient-1: linear-gradient(88deg, #F5DEB3 0.57%, #DABFA1 50.78%, #F5DEB3 100%);

    /* --- Size --- */
    --craft-min: 53px;
    --craft-max: 90px;
    --craft-size: calc(13.82353px + 5.44118vw);


    --section-transition-ms: 300ms;
    --section-opacity-ms: 200ms;
    --section-ease: cubic-bezier(0.1, 0.21, 0.83, 0.67); /* ease-out bounce */
    
    /* --- Scroll Settings --- */
    --scroll-duration: 600ms;
    --scroll-threshold: 50;
    --scroll-ease: cubic-bezier(0.23, 0.43, 0.77, 0.97);
}

/* базовые */
[data-section]{
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
  
    will-change: transform, opacity;
    overflow-anchor: none;
    opacity: 1;
    pointer-events: auto;
    z-index: 0;
  }
  [data-section="1"],
  [data-section="2"] {
    isolation: isolate;
    will-change: transform;
    transform: translateZ(0);
  }
/* Фиксация высоты первых двух секций на мобильных устройствах */
@media screen and (max-width: 768px) {
    [data-section="1"],
    [data-section="2"] {
        height: calc(var(--vh-fixed, var(--vh, 1vh)) * 100) !important;
        min-height: calc(var(--vh-fixed, var(--vh, 1vh)) * 100) !important;
        max-height: calc(var(--vh-fixed, var(--vh, 1vh)) * 100) !important;
    }
}


.btn {
    display: inline-flex;
    flex-shrink: 0;
    padding: 12px 32px;
    border-radius: var(--controls-radius, 12px);
    border: none;
    color: var(--text-text-primary, #FFF);
    text-align: center;
    font-family: "Golos Text";
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.48px;
}
.btn_primary {
    background: var(--button-primary-gradient-1, linear-gradient(88deg, #F5DEB3 0.57%, #DABFA1 50.78%, #F5DEB3 100%));
    color: var(--text-text-on-primary, #121212);
}
.btn_secondary {
    background: var(--controls-secondary, #3E3E3E);
    color: var(--text-text-primary, #FFF);
}

/* Road lines */
.roadline {
    position: relative;
    width: 48px;
    height: 1px;
    background-color: var(--text-text-primary, #FFF);
}
    .roadline::before {
        content: '';
        position: absolute;
        top: -2px;
        right: 0;
        width: 5px;
        height: 5px;
        transform: rotate(45deg);
        background-color: var(--text-text-primary, #FFF);
    }
.roadline.active {
    background-color: var(--icon-icon-accent, #DABFA1);
}
    .roadline.active::before {
        background-color: var(--icon-icon-accent, #DABFA1);
    }
.roadline.disabled {
    background-color: var(--text-text-tertiary, #737373);
}
    .roadline.disabled::before {
        background-color: var(--text-text-tertiary, #737373);
    }

/* Title screen */
.title-screen {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    width: 100%;
}
    /* Освещение */
    .title-bg_1 {
        position: absolute;
        z-index: 3;
        top: 0;
        left: 50%;
        width: 2192px;
        height: 1315px;
        flex-shrink: 0;
        aspect-ratio: 2192/1315;
        transform: translateX(-50%);
        background: linear-gradient(180deg, rgba(14, 15, 18, 0.00) 2.7%, #0E0F12 73.99%);
        filter: blur(0px);
    }
    .title-grad_1 {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
        .title-grad_1-1 {
            content: '';
            display: block;
            position: absolute;
            top: -183px;
            left: -259px;
            z-index: 4;
            width: 2192px;
            height: 1315px;
            flex-shrink: 0;
            aspect-ratio: 2192/1315;
            background-image: url(img/color-gradient-1-2.png);
            background-size: 100% auto;
            background-repeat: no-repeat;
            background-position: 50% 0;
            mix-blend-mode: color-dodge;
            opacity: 0.5;
        }
        .title-bg_2 {
            position: absolute;
            z-index: 6;
            top: 100vh;
            left: 50%;
            width: 100%;
            height: 812px;
            transform: translate(-50%, -64px);
        }
        .title-bg_2::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(img/noise-pattern.png);
            background-size: auto 100%;
            background-repeat: repeat-x;
            background-position: 0 0;
        }
    .title-blur_1 {
        position: absolute;
        top: -207px;
        right: -481px;
        z-index: 6;
        width: 1038px;
        height: 1005px;
        flex-shrink: 0;
        border-radius: 1038px;
        opacity: 0.5;
        background: #323232;
        mix-blend-mode: multiply;
        filter: blur(278.025146484375px);
        pointer-events: none;
    }
    .title-blur_2 {
        position: absolute;
        top: -70%;
        right: -30%;
        z-index: 5;
        width: 1495px;
        height: 1447.215px;
        border-radius: 1495px;
        opacity: 0.08;
        background: #FFF;
        filter: blur(278.025146484375px);
    }

    @media (min-width: 2200px) {
        .title-bg_1 {
            width: 100%;
        }
        .title-grad_1-1 {
            left: 50%;
            top: 0;
            transform: translateX(-50%);
            width: 100%;
        }
    }
    

    .title-screen__viewport {
        position: relative;
        z-index: 6;
        width: 1440px;
        max-width: 100%;
        height: 100%;
        margin: 0 auto;
        padding: 90px 32px 0 32px;
        transition: opacity 300ms ease; /* Анимация исчезновения */
    }
    

    .title-screen__header {
        position: relative;
        z-index: 3;
    }
    .title-craft {
        display: inline-block;
        position: relative;
        font-size: clamp(var(--craft-min), var(--craft-size), var(--craft-max));
        letter-spacing: 0.01em;
        line-height: 1;
        text-transform: uppercase;
        font-family: var(--font-fjalla);
        text-shadow: -21px 81px 63.8px rgba(0,0,0,.8);
        color: transparent;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        background-image: url("img/noise-pattern-craft.svg"), linear-gradient(#DABFA1, #DABFA1);
        background-repeat: repeat, no-repeat;
        background-position: 0 0, center;
        background-size: 1em 1em, 100% 100%;
      }
      
    .title-screen__secondary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
        .title-your {
            position: relative;
            z-index: 3;
            text-align: center;
            text-shadow: -21px 81px 63.8px rgba(0, 0, 0, 0.80);
            -webkit-text-stroke-width: 4px;
            -webkit-text-stroke-color: #DABFA1;
            font-family: var(--font-fjalla);
            font-size: 236px;
            font-size: clamp(93px, calc(-58.4px + 21.03vw), 236px);
            font-weight: 400;
            line-height: 1.06;
            letter-spacing: -7.08px;
            color: transparent;
            text-transform: uppercase;
        }
        .title-dragon {
            position: relative;
            z-index: 5;
            display: inline-block;
          
            font-size: clamp(93px, calc(-58.4px + 21.03vw), 236px);
            letter-spacing: -0.03em;
            line-height: 1.06;
            text-transform: uppercase;
            font-family: var(--font-fjalla);
            text-align: center;
            text-shadow: -21px 81px 63.8px rgba(0,0,0,.8);
          
            color: transparent;
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            background-image: url("img/noise-pattern-dragon.svg"), linear-gradient(#fff, #fff);
            background-position: 0 0, center;
            background-size: 81px auto, 100% 100%;
            background-repeat: repeat, no-repeat;
          }
          
          
    .title-screen__footer {
        display: flex;
        justify-content: space-between;
        position: relative;
        z-index: 2;
        width: 100%;
        margin: 0 0 148px 0;
    }
        .title-text {
            width: 315px;
            font-size: 16px;
            line-height: 160%;
            font-weight: 500;
            color: #bfbfbf;
        }
        .title-with-hot {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 90px;
            font-size: clamp(36px, calc(1.59px + 6.27vw), 90px);
            letter-spacing: 0.01em;
            line-height: 1;
            text-transform: uppercase;
            font-family: var(--font-fjalla);
            color: #fff;
            text-shadow: -21px 81px 63.8px rgba(0, 0, 0, 0.8);
        }
        .title-mobi { display: none; }
        .title-with-hot span { display: block;}
            .title-with-hot-span { color: #dabfa1; }
    .title-screen__btns {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        position: absolute;
        right: 32px;
        bottom: 60px;
        z-index: 10;
    }

    .title-img-dragon {
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 0;
        left: calc(50% - 50px);
        z-index: 4;
        width: 1100px;
        max-height: 80vh;
        aspect-ratio: 1 / 0.7415;
        transform: translateX(-50%) translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
    }
        .dragon-lottie-container {
            flex-shrink: 0;
            position: relative;
            z-index: 3;
            width: 100%;
        }
        .dragon-lottie-container,
            #dragon-lottie {
            transform: translateZ(0);
            will-change: transform;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        @media (min-width: 1460px) and (min-height: 1100px) {
            .title-img-dragon { --tid-wvh: 118; width: calc(var(--tid-wvh) * 1svh); }
        }
        @media (min-width: 1460px) and (min-height: 900px) and (max-height: 1099px) {
            .title-img-dragon { --tid-wvh: 113; width: calc(var(--tid-wvh) * 1svh);}
        }
        @media (min-width: 1260px) and (min-height: 700px) and (max-height: 899px) {
            .title-img-dragon { --tid-wvh: 104; width: calc(var(--tid-wvh) * 1svh); }
        }
        @media (min-width: 1000px) and (max-width: 1259px) and (min-height: 700px) and (max-height: 1200px) {
            .title-img-dragon { --tid-wvh: 95; width: calc(var(--tid-wvh) * 1svh); }
        }
        @media (min-width: 720px) and (max-width: 999px) and (min-height: 300px) and (max-height: 1000px) {
            .title-img-dragon { --tid-wvh: 104; width: calc(var(--tid-wvh) * 1svh); }
        }
    /* Safari: не доверяем aspect-ratio для высоты — считаем её сами от width(vh) */
    html.is-safari .title-img-dragon {
        /* выключаем автоматический расчёт высоты через aspect-ratio */
        aspect-ratio: auto;
    
        /* высота = min(80svh, width / 0.7415), где width задан как var(--tid-wvh)*svh */
        height: min(80svh, calc((var(--tid-wvh, 113) * 1svh) / 0.7415));
    
        /* чтобы Safari не «подрезал» ещё раз */
        max-height: none;
    }     
    
    /* Специальное правило для дракона с анимацией - сохраняем оригинальное позиционирование */
    .title-img-dragon.animation-on {
        transform: translateX(-50%) translateY(var(--anim-translate-y)) scale(var(--anim-scale)) rotate(var(--anim-rotate));
    }
    .title-img-dragon::after {
        content: '';
        position: absolute;
        bottom: 44px;
        left: 50%;
        transform: translateX(-50%);
        width: 906px;
        height: 130px;
        flex-shrink: 0;
        border-radius: 906px;
        opacity: 0.2;
        background: #FFF;
        filter: blur(64px);
        z-index: 2;
    }
    .title-img-dragon::before {
        content: '';
        position: absolute;
        bottom: -300px;
        left: 50%;
        transform: translateX(-50%);
        width: 602px;
        height: 449px;
        flex-shrink: 0;
        background-image: url('img/blue-dragon-shadow-compr.png');
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: 50%;
        opacity: 0.3;
        mix-blend-mode: overlay;
        filter: blur(40px);
    }

.quote {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
    width: 1440px;
    max-width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    margin: 0 auto 0 auto;
    padding: 80px 32px 0 32px;
    contain: layout paint; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
    .quote__container {
        display: flex;
        align-items: center;
        gap: 24px;
        width: 100%;
    }
    /* Прогресс-скролл */
    .quote-scroll {
        --qprog: 0;
        flex-shrink: 0;
        position: relative;
        width: 8px;
        height: 321px;
        background-color: rgba(153, 153, 153, 0.10);
        border-radius: 4px;
    }
    .quote-scroll::after {
        content: "";
        position: absolute;
        top: 0;            /* якорь сверху */
        left: 0;
        width: 8px;
        height: calc(var(--qprog) * 100%);  /* растём вниз */
        background-color: #F5DEB3;
        border-radius: 4px;
    }
    .quote__text {
        display: flex;
        flex-wrap: wrap;
        gap: 0 8px;
        position: relative;
        z-index: 1;
        width: 800px;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
        font-size: 52px;
        font-size: clamp(32px, calc(16.59px + 2.18vw), 52px);
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        word-break: normal;
        overflow-wrap: normal;
    }
    .quote__text .word {
        white-space: nowrap;
        display: inline-block;
    }
    /* Анимация закрашивания букв */
    .quote__text .letter {
        display: inline-block;
        position: relative;
        color: var(--Native-subtitle_text_color, #707579);
        transition: color 0.3s ease;
        overflow: hidden;
    }
    
    .quote__text .letter.animated { color: white; }
    
    .quote__text .no-break {
        white-space: nowrap;
        display: flex;
        gap: 0 8px;
    }

        .quote__img-left {
            z-index: 2;
            width: 170.3px;
            height: 329.613px;
            flex-shrink: 0;
            aspect-ratio: 170.30/329.61;
        }
        .quote__img-right {
            z-index: 2;
            width: 170px;
            height: 329.032px;
            aspect-ratio: 170/329.032;
            opacity: 0;
            transform: translateY(100%);
        }

    .quote__ceo {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
        margin: 88px 188px 0 0;
        text-align: right;
        color: var(--text-text-accent, #DABFA1);
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 160%;
    }
        .quote__ceo::before {
            content: '';
            width: 51px;
            height: 2px;
            border-radius: 2px;
            background: var(--icon-icon-secondary, #BFBFBF);
        }


.grad_2 {
    position: relative;
    z-index: 1;
    width: 100%;
}
    .grad_2::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -10%);
        width: 2192px;
        height: 1315px;
        flex-shrink: 0;
        aspect-ratio: 2192/1315;
        background-image: url(img/color-gradient-2-2.png);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: 50% 0;
        mix-blend-mode: color-dodge;
        opacity: 0.2;
    }
@media (min-width: 2200px) {
    .grad_2::before {
        width: 100%;
        background-size: 100% auto;
    }
}


.how-it-works {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 80px 0 80px 0;
}
        .how-it-works__viewport {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 1392px;
            max-width: calc(100% - 156px);
            margin: 0 auto;
        }
        .how-it-works__title {
            font-size: 172px;
            font-size: clamp(126px, calc(89.88px + 5.17vw), 172px);
            letter-spacing: -0.03em;
            line-height: 1;
            text-transform: uppercase;
            font-family: 'Fjalla One';
            color: #fff;
        }
        .how-it-works__title-span {
            display: block;
            -webkit-text-stroke-width: 4px;
            -webkit-text-stroke-color: #DABFA1;
            color: #0E0F12;
        }
        .how-it-works__items {
            display: flex;
            flex-direction: column;
            gap: 24px;
            position: relative;
            width: 604px;
            align-items: center;
            justify-content: center;
            min-height: 400px;
        }
        .active-bg {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%) scale(0.95);
            z-index: 1;
            width: 604px;
            height: 190px;
            margin: 0;
            padding: 22px 46px;
            box-shadow: -21px 81px 63.8px rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(60px);
            border-radius: 16px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(153, 153, 153, 0.1));
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: opacity .28s ease, scale .28s ease;
            --abg-ease: cubic-bezier(0.4, 0, 0.2, 1);
            --abg-in: 420ms;
            --abg-out: 260ms;
            opacity: 0;
        }
            /* Включаем переходы отдельно под ин/аут */
            .active-bg.fading-in {
                transition-property: opacity, transform;
                transition-duration: var(--abg-in), var(--abg-in);
                transition-timing-function: var(--abg-ease), var(--abg-ease);
            }
            
            .active-bg.fading-out {
                transition-property: opacity, transform;
                transition-duration: var(--abg-out), var(--abg-out);
                transition-timing-function: var(--abg-ease), var(--abg-ease);
            }
            .active-bg.active {
                opacity: 1;
                transform: translateY(-50%) scale(1);
            }
            .active-bg::before {
                content: "";
                display: block;
                position: absolute;
                top: 50%;
                right: 0;
                z-index: 2;
                width: 115px;
                height: 115px;
                flex-shrink: 0;
                background-color: #D4BA9D;
                opacity: 0.15;
                filter: blur(32px);
            }
        .how-it-works__item {
            display: flex;
            align-items: center;
            gap: 16px;
            position: relative;
            z-index: 2;
            width: 450px;
            height: 190px;
            margin: 0 0 0 148px;
            transition: all 0.3s ease-in-out;
            cursor: pointer;
        }
            .how-it-works__item.active {
                width: 604px;
                margin: 0;
                padding: 22px 46px;
                z-index: 3;
                order: 0;
            }
            .how-it-works__item-img {
                transform: translateY(20px);
                opacity: 0;
                visibility: hidden;
                position: absolute;
                transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
            }
            
            /* Класс для задержки появления изображения */
            .how-it-works__item-img.show-image {
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
            }
            .how-it-works__item-img_1 {
                top: -44px;
                left: 34px;
                width: 84px;
            }
            .how-it-works__item-img_2 {
                top: -48px;
                left: -64px;
                width: 254px;
            }
            .how-it-works__item-img_3 {
                top: -20px;
                left: -4px;
                width: 134px;
            }
            .how-it-works__item-count {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-shrink: 0;
                width: 80px;
                height: 80px;
                filter: drop-shadow(-21px 81px 63.8px rgba(0, 0, 0, 0.8));
                border-radius: 50%;
                border: 4px solid #dabfa1;
                font-size: 32px;
                letter-spacing: -0.03em;
                line-height: 60px;
                text-transform: uppercase;
                font-family: 'Fjalla One';
                color: transparent;
                text-align: center;
                -webkit-text-stroke: 2px #dabfa1;
                paint-order: stroke fill;
            }
            .how-it-works__item-content {
                width: 100%;
            }
            .how-it-works__item-title {
                margin: 0 0 8px 0;
                color: #FFF;
                font-family: "Fjalla One";
                font-size: 32px;
                font-weight: 400;
                line-height: normal;
                letter-spacing: -0.96px;
                text-transform: uppercase;
            }
            .how-it-works__item-text {
                margin: 0 0 20px 0;
                color: var(--text-text-secondary, #BFBFBF);
                font-size: 16px;
                font-weight: 500;
                line-height: 160%;
            }
            .how-it-works__item_1 .how-it-works__item-text {
                max-width: 260px;
            }
            .how-it-works__item_2 .how-it-works__item-text {
                max-width: 344px;
            }
            .how-it-works__item_3 .how-it-works__item-text {
                max-width: 260px;
            }
            .how-it-works__item-link {
                color: var(--text-text-accent, #DABFA1);
                font-size: 16px;
                font-weight: 500;
                line-height: 160%;
                white-space: nowrap;
            }




.get-some {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    padding: 80px 24px 80px 24px;
    text-align: center;
    user-select:none;
    transform-style: preserve-3d;
}
    .get-some h2 {
        position: relative;
        z-index: 4;
        font-size: 112px;
        letter-spacing: -0.03em;
        line-height: 1.08;
        text-transform: uppercase;
        font-family: var(--font-fjalla);
        color: #fff;
    }
    .get-some h3 {
        position: relative;
        z-index: 5;
        margin: -56px 0 0 0;
        font-size: 148px;
        letter-spacing: -0.03em;
        line-height: 1.13;
        text-transform: uppercase;
        font-family: var(--font-fjalla);
        color: transparent;
        -webkit-text-stroke: 4px #dabfa1;
        paint-order: stroke fill;
        color: #0E0F12;
    }

    .stage, .ring, .img {
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        user-select: none;
    }
    
    .stage {
        position: relative;
        z-index: 6;
        width: 1038px;
        height: 320px;
        max-width: calc(100% - 64px);
        margin: -48px auto 0 auto;
    }
    .stage div, .stage svg {
        position: absolute;
    }
    .stage_wrapper {
        overflow: hidden;
        width: 100%;
        height: 100%;
        touch-action: pan-y;
    }
    .container {
        perspective: 3000px;
        width: 300px;
        height: 300px;  
        left: 50%;
        top: 0;
        transform: translate(-50%,0);
    }
    
    /* Дополнительные стили для лучшего отображения квадратных картинок */
    .get-some .img {
        width: 300px !important;
        height: 300px !important;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        backface-visibility: hidden;
    }
    /* Стили для стрелочек навигации */
    .carousel-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 80px;
        height: 80px;
        color: #fff;
        transition: all 0.3s ease;
        user-select: none;
        background-size: 34px auto;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }

    .carousel-nav-prev {
        left: -100px;
        background-image: url("img/icon-left.svg");
    }

    .carousel-nav-next {
        right: -100px;
        background-image: url("img/icon-right.svg");
    }


.blink-faq {
    position: relative;
    z-index: 1;
    width: 100%;
}
    .blink-faq::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 12;
        transform: translate(-50%,-50%) translateZ(0);
        width: 1409px;
        height: 438px;
        flex-shrink: 0;
        background-color: #F5DEB3;
        opacity: 0.15;
        filter: blur(300px);
        -webkit-filter: blur(300px);
        will-change: filter;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
.faq {
    position: relative;
    z-index: 2;
    width: 1440px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 80px 76px 120px 76px;
}
    /* FAQ viewport */
    .faq__viewport{
        display: flex;
        justify-content: space-between;
        padding-right: 2px;
    }
        .faq__viewport::-webkit-scrollbar{ width:0; height:0; display:none; }


    .faq__title {
        position: relative;
        z-index: 13;
        margin-top: 14px;
        font-size: 168px;
        letter-spacing: -0.03em;
        line-height: 1;
        text-transform: uppercase;
        font-family: var(--font-fjalla);
        color: transparent;
        -webkit-text-stroke: 4px #dabfa1;
        paint-order: stroke fill;
    }
    .faq__items {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 560px;
        position: relative;
        z-index: 13;
        overflow-anchor: none;
    }
    .faq__item {
        display: flex;
        flex-direction: column;
        border-radius: 8px;
        background: var(--surface-container-low, #191919);
        backdrop-filter: blur(16px);
        transition: all 0.3s ease;
        overflow-anchor: none;
    }
    
    .faq__item:hover { background: rgba(255, 255, 255, 0.05); }
    .faq__item.open { background: rgba(255, 255, 255, 0.08); }
    
    .faq__item-title {
        position: relative;
        padding: 20px 84px 20px 24px;
        color: #FFF;
        font-family: var(--font-fjalla);
        font-size: 32px;
        font-weight: 400;
        line-height: normal;
        letter-spacing: -0.96px;
        text-transform: uppercase;
        cursor: pointer;
        transition: color 0.3s ease;
        border-radius: 8px;
    }
    
    .faq__item.open .faq__item-title, .faq__item-title:hover {
        color: var(--text-text-accent, #DABFA1);
    }
    
    .faq__item-text {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        height: 0;
        opacity: 0;
    }
        .faq__item-text_padding { padding: 0 84px 20px 24px; }
    
    .faq__item.open .faq__item-text { opacity: 1; }
    
    .faq__item-text p {
        margin: 0 0 16px 0;
        font-size: 16px;
        color: var(--text-text-secondary, #BFBFBF);
        font-family: var(--font-golos);
        font-weight: 400;
        line-height: 140%;
        letter-spacing: -0.48px;
    }
    .faq__item-text p:last-child { margin-bottom: 0; }
    
    .faq__item-close {
        position: absolute;
        top: 50%;
        right: 24px;
        transform: translateY(-50%);
        width: 1%;
        height: 14px;
        cursor: pointer;
        transition: transform 0.3s ease;
        border-radius: 50%;
    }
    
    .faq__item.open .faq__item-close {
        display: block;
    }
    
    .faq__item-close::before,
    .faq__item-close::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 2px;
        background-color: var(--icon-icon-secondary, #DABFA1);
        transform: translate(-50%, -50%);
        transition: transform 0.3s ease;
    }
    
    .faq__item-close::before { transform: translate(-50%, -50%) rotate(90deg); } 
    .faq__item-close::after { transform: translate(-50%, -50%) rotate(0deg); }
    .faq__item.open .faq__item-close::before { transform: translate(-50%, -50%) rotate(180deg); }
    .faq__item.open .faq__item-close::after { transform: translate(-50%, -50%) rotate(0); }
    .faq__item-close:hover::before,
    .faq__item-close:hover::after {
        background-color: var(--text-text-primary, #FFF);
    }



.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    z-index: 1;
    width: 100%;
    height: auto;
    padding: 120px 76px 132px 148px;
    background-image: url(img/blink-footer-cut-compr.png);
    background-size: 1089px auto;
    background-repeat: no-repeat;
    background-position: 50% 100%;
}

    .footer__viewport {
        display: flex;
        justify-content: space-between;
        gap: 32px;
        width: 1440px;
        max-width: 100%;
        margin: 0 auto;
    }
        .footer__viewport::-webkit-scrollbar{ width:0; height:0; display:none; }
    
    .footer__left {
        position: relative;
        z-index: 2;
        width: calc(50% - 16px);
    }
        .blink-faq-2 {
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 1;
            width: 100%;
        }
            .blink-faq-2::before {
                content: '';
                display: block;
                position: absolute;
                bottom: 0;
                right: 0;
                z-index: 5;
                transform: translate(-12%,0) translateZ(0);
                width: 1038px;
                height: 1005px;
                border-radius: 1038px;
                opacity: 0.6;
                background: #323232;
                mix-blend-mode: multiply;
                filter: blur(250px);
            }
        .footer__left-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin: 0 0 24px 0;
            color: #FFF;
            text-align: center;
            font-family: var(--font-fjalla);
            font-size: 90px;
            font-size: clamp(47px, calc(2.26px + 6.29vw), 90px);
            font-weight: 400;
            line-height: 100%;
            letter-spacing: 0.9px;
            text-transform: uppercase;
        }
            .footer__left-title span { display: block;}
            .footer__left-title-span {
                color: var(--text-text-accent, #DABFA1);
            }
        .footer__left-text {
            position: relative;
            z-index: 6;
            width: 573px;
            margin: 0 auto;
            text-align: center;
            -webkit-text-stroke-width: 4px;
            -webkit-text-stroke-color: #DABFA1;
            font-family: var(--font-fjalla);
            font-size: 236px;
            font-size: clamp(120px, calc(-3.47px + 16.33vw), 236px);
            font-weight: 400;
            line-height: 1.06;
            letter-spacing: -7.08px;
            text-transform: uppercase;
        }

    .footer__right {
        position: relative;
        z-index: 2;
        width: calc(50% - 16px);
    }
        .footer__right::before {
            content: '';
            position: absolute;
            bottom: 13px;
            left: 43px;
            z-index: 4;
            filter: blur(500px);
            border-radius: 50%;
            background-color: #323232;
            width: 1038px;
            height: 1005px;
            opacity: 0.6;
            mix-blend-mode: multiply;
        }
        .footer__right-img {
            width: 185px;
            margin: 125px 0 0 -16px;
        }
        .footer__right-title {
            display: flex;
            flex-wrap: wrap;
            gap: 0 18px;
            margin: -16px 0 24px 0;
            color: #FFF;
            font-family: var(--font-fjalla);
            font-size: 90px;
            font-size: clamp(51px, calc(10.74px + 5.63vw), 90px);
            font-weight: 400;
            line-height: 120%;
            letter-spacing: 0.9px;
            text-transform: uppercase;
        }
            .footer__right-title-span {
                color: var(--text-text-accent, #DABFA1);
            }
         .footer__right-text {
             margin: 0 0 40px 0;
             color: #FFF;
             font-family: var(--font-golos);
             font-size: 16px;
             font-weight: 500;
             line-height: 160%;
        }

    .footer_mobi { display: none; }


/* ===== АНИМАЦИИ ПОЯВЛЕНИЯ ЭЛЕМЕНТОВ ===== */
/* Базовые стили для анимируемых элементов */
.animation-on {
    opacity: 0;
    --anim-translate-x: 0px;
    --anim-translate-y: 30px;
    --anim-scale: 1;
    --anim-rotate: 0deg;
    --anim-blur: 0px;
    transform: translateX(var(--anim-translate-x)) translateY(var(--anim-translate-y)) scale(var(--anim-scale)) rotate(var(--anim-rotate));
    filter: blur(var(--anim-blur));
    transition: opacity var(--animation-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1),
                transform var(--animation-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1),
                filter var(--animation-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.animation-on.animation-ready { opacity: 0; --anim-translate-y: 30px; }
.animation-on.animate-in {
    opacity: 1;
    --anim-translate-x: 0px;
    --anim-translate-y: 0px;
    --anim-scale: 1;
    --anim-rotate: 0deg;
    --anim-blur: 0px;
}

/* Handwriting block */
.handwrite {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 40vh;
    margin: 40px 0 0;
  }

  .handwrite__viewport {
    position: relative;
    width: min(92vw, 980px);
  }
  .handwrite__mount svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .handwrite__pen {
    position: absolute;
    inset: 0;
    width: 24px;
    height: 24px;
    pointer-events: none;
    transform: translate(-9999px, -9999px); /* скрыто до старта */
    filter: drop-shadow(0 8px 10px rgba(0,0,0,.35));
  }
  
  /* Базовые чернила для путей (если в SVG нет своих стилей) */
  .handwrite [data-stroke] {
    fill: none;
    stroke: #f2f2f2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 7;
    filter: drop-shadow(0 0 4px rgba(255,255,255,.25));
}





/* Адаптация */
@media screen and (max-width: 1500px) {
    .footer__left-title {
        justify-content: flex-start;
    }
    .footer__left-text {
        width: 572px;
        margin: 0;
    }
}
@media screen and (max-width: 1400px) {
    .footer__left-title, .footer__right-title { font-size: 78px;}
    .footer__left-text { width: 502px; }
    .footer__right-img { margin: 102px 0 0 -20px;}
}
@media screen and (max-width: 1250px) {
    .footer__left-title { margin: 0 0 20px 0; }
    .footer__left-title, .footer__right-title { font-size: 68px;}
    .footer__left-text { width: 442px; }
    .footer__right-img { margin: 80px 0 0 -24px;}
}
@media screen and (max-width: 1200px) {
    .how-it-works__items { width: 480px; }
    .how-it-works__item.active, .active-bg {
        left: auto;
        right: 0;
        width: 480px;
    }
    .carousel-nav-next { right: -60px;}
    .carousel-nav-prev { left: -60px;}
}
@media screen and (max-width: 1150px) {
    .footer__left-title, .footer__right-title { font-size: 56px;}
    .footer__left-text { width: 372px; }
    .footer__right-img { margin: 56px 0 0 -24px;}
}
@media screen and (max-width: 1100px) {
    .footer__left-title { margin: 0 0 2px 0; }

    .footer__right-img {
        margin: 11px 0 0 0;
    }
}
@media screen and (max-width: 1050px) {
    .title-screen__viewport { padding: 90px 24px 0 24px; }

    .quote { padding: 80px 24px 0 24px; }
        .quote__container { gap: 24px; position: relative; }
        .quote__img-right, .quote__img-left { width: 132px; height: auto; }
        .quote-scroll { height: 255px; }

    .faq { padding: 80px 24px 120px 24px; }
    .faq__viewport { flex-direction: column; }
        .faq__title { margin: 0 0 80px 0; }
        .faq__items { width: 100%; }

    .footer { padding: 120px 24px 120px 24px; }
        .footer__right-img { width: 162px; }
        .footer__viewport { justify-content: center; }
        .footer__left-title, .footer__right-title { max-width: 340px; font-size: 48px;}
        .footer__left-text { width: 324px; }
}

@media screen and (max-width: 1000px) {
    .title-img-dragon { left: 50%; }
    .title-screen__footer { z-index: 4;}
    .how-it-works {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        padding: 60px 24px 60px 24px;
    }
        .how-it-works__viewport {
            display: flex;
            flex-direction: column;
            padding-right: 2px;
        }
        .how-it-works__viewport::-webkit-scrollbar{ width:0; height:0; display:none; }
        .how-it-works__title {
            margin: 0 0 40px 0;
            font-size: 126px;
            letter-spacing: -0.03em;
            line-height: 1;
        }
    .how-it-works__items, .how-it-works__item, .active-bg, .how-it-works__item.active {
        width: 100%;
    }
    .how-it-works__items {
        display: flex;
        flex-direction: column;
        gap: 24px;
        min-height: auto;
    }
    .how-it-works__item {
        gap: 24px;
        margin: 0;
        padding: 22px 14px;
        position: relative;
        width: 100%;
    }
    .how-it-works__item.active {
        padding: 22px 14px;
    }
    .active-bg { 
        box-shadow: none;
        top: 0;
        transform: translate(0, 0);
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(153, 153, 153, 0.10) 100%);
        border: 1px rgba(255, 255, 255, 0.05) solid;
        filter: drop-shadow(-21px 81px 63.8px rgba(0, 0, 0, 0.80));
        backdrop-filter: blur(30px);
    }
        .active-bg::before {
            display: none;
        }
    .how-it-works__item-count {
        width: 70px;
        height: 70px;
        font-size: 30px;
        line-height: 2;
    }
    .get-some { padding: 60px 24px 40px 24px;}
    .get-some h2 { font-size: 80px;}
    .get-some h3 { margin: -32px 0 0 0; font-size: 105px;}
    .stage {
        margin: -42px auto 0 auto;
    }
    .faq {
        padding: 60px 24px 100px 24px;
    }
    .faq__viewport {
        flex-direction: column;
    }
        .faq__title {
            margin: 0 0 80px 0;
            font-size: 100px;
        }
        .faq__items {
            width: 100%;
        }

    .footer {
        padding: 100px 24px 100px 24px;
        background-size: 720px auto;
    }
        .footer__left-title, .footer__right-title { font-size: 48px;}
        .footer__left-text { font-size: 134px;}
        .footer__right-img { margin: 34px 0 0 -22px;}
        .blink-faq-2 { display: none;}
}

@media screen and (max-width: 720px) {
    .your-way {
        justify-content: flex-start;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        padding: 8px 0 8px 16px;
        overflow: hidden;
        white-space: nowrap;
        border-bottom: 1px solid var(--border-border-light, #323232);
        background: var(--surface-background, #121212);
        box-shadow: -48px 0 32px 0 rgba(18, 18, 18, 0.75) inset;
        background: linear-gradient(to right, 
            var(--text-text-primary) 0%, 
            var(--text-text-primary) calc(100% - 70px), 
            var(--text-text-tertiary) 100%
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        }
    .roadline {
        flex-shrink: 0;
        width: 24px;
    }

    .title-screen__viewport{
        display: flex;
        flex-direction: column;
        height: calc(var(--vh, 1vh) * 100 - 16px);
        max-height: calc(var(--vh, 1vh) * 100 - 16px);
        padding: 48px 16px 0 16px;
    }

    .title-screen::after {
        content: '';
        position: absolute;
        top: 0;
        right: -50%;
        width: 603px;
        height: 581px;
        z-index: 8;
        flex-shrink: 0;
        border-radius: 603px;
        opacity: 0.2;
        background: #323232;
        mix-blend-mode: multiply;
        filter: blur(128px);
    }
    
    .title-screen__header {
        width: 100%;
        max-width: 268px;
        margin: 0 auto;
    }
    .title-screen__secondary {
        position: relative;
        width: 100%;
        max-width: 268px;
        margin: 0 auto;
    }
    .title-your {
        position: absolute;
        right: 0;
        top: -54px;
        font-size: 51px;
        letter-spacing: 0.01em;
        -webkit-text-stroke-width: 2px;
    }
    .title-dragon {
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 3;
    }
    .title-dragon span {
        position: relative;
        color: transparent;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        background-image: url("img/noise-pattern-dragon.svg"), linear-gradient(#fff, #fff);
        background-position: 0 0, center;
        background-size: 81px auto, 100% 100%;
        background-repeat: repeat, no-repeat;
    }
    .title-dragon span:nth-child(1) {
        z-index: 2;
        padding: 0 3px 0 0;
        margin: 0 0 0 -3px;
    }
    .title-dragon span:nth-child(2) {
        z-index: 4;
    }

    .title-img-dragon::before, .title-img-dragon::after {
        display: none;
    }
    .title-img-dragon {
        position: relative;
        top: auto;
        bottom: auto;
        z-index: 3;
        transform: none;
        width: 100vw;
        height: 76vw;
        margin: -100px auto 0 auto;
    }

    .title-with-hot {
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 4;
        width: 100%;
        max-width: 264px;
        margin: 0 auto;
    }
    .title-mobi {
        display: flex;
    }
    .title-desk { display: none; }

    .title-screen__footer {
        margin: 0 auto 24px auto;
        text-align: center;
    }
    .title-text {
        margin: 0 auto;
    }
    .title-screen__btns {
        flex-direction: column;
        gap: 16px;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 50%;
        z-index: 10;
        transform: translateX(-50%);
        width: 268px;
    }
        .title-screen__btns .btn {
            justify-content: center;
            width: 100%;
            text-align: center;
        }
        .title-screen__btns .btn_secondary { order: 2; }
        .title-screen__btns .btn_primary { order: 1; }

    .title-grad_1 {
        display: none;
    }
    .title-blur_1 {
        left: 0;
        top: 40px;
        width: 394px;
        height: 379px;
        border-radius: 394px;
        opacity: 0.5;
        background: #323232;
        mix-blend-mode: multiply;
        filter: blur(242.5px);
    }
    .title-blur_2 {
        right: -300px;
        top: 0;
        width: 603px;
        height: 425px;
        border-radius: 603px;
        opacity: 0.2;
        background: #323232;
        mix-blend-mode: multiply;
        filter: blur(128px);
    }
    .quote {
        padding: 80px 20px 0 32px;
    }
    .quote__text {
        position: relative;
        padding: 0 40px 0 0;
    }
        .quote__text > span:nth-child(1) {
            padding: 0 0 0 90px;
        }
        .quote__img-left {
            position: absolute;
            bottom: 100%;
            left: 0;
            width: 62px;
            transform: translateY(32px);
        }
        .quote__img-right {
            position: absolute;
            top: 100%;
            right: 0;
            width: 62px;
            margin: 0 40px 0 0;
        }
        .quote__ceo {
            margin: 88px 40px 0 0;
        }
        .quote-scroll {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            height: calc(100% + 176px);
        }




        .how-it-works {
            padding: 80px 16px 80px 16px;
        }
        .how-it-works__viewport {
            max-width: 100%;
            padding: 0;
        }
        .active-bg {
            height: 208px;
        }
        .how-it-works__items {
            gap: 70px;
        }
        .how-it-works__item {
            gap: 20px;
        }
        .how-it-works__item-text, .how-it-works__item_3 .how-it-works__item-text, .how-it-works__item_1 .how-it-works__item-text {
            max-width: 190px;
        }
        .how-it-works__item-img_1 {
            left: 2px;
            width: 77px;
        }
        .how-it-works__item-img_2 {
            top: -60px;
            left: -47px;
            width: 240px;
        }
        .how-it-works__item-img_3 {
            top: -32px;
            width: 109px;
        }
        .how-it-works__title {
            align-self: flex-start;
            margin: 0 0 98px 0;
            font-size: 104px;
        }
        .how-it-works__title span:nth-child(1) {
            display: block;
            margin: 0 0 16px 0;
            font-size: 53px;
        }
        .get-some {
            padding: 120px 16px 64px 16px;
        }
        .get-some h2 { font-size: 53px;}
        .get-some h3 {
            margin: -20px 0 0 0;
            font-size: 64px;
        }
        .carousel-nav {
            width: 28px;
            height: 28px;
            background-size: 12px auto;
        }
            .carousel-nav-prev {
                left: 0;
            }
            
            .carousel-nav-next {
                right: 0;
            }
        .stage {
            width: 100%;
            max-width: 100%;
            height: 320px;
            margin: -44px auto 0 auto
        }
        .container {
            perspective: 2000px;
        }
            


    .blink-faq::before {
        width: 533px;
        height: 188px;
        background-color: #F5DEB3;
        opacity: 0.15;
        filter: blur(300px);
        transform: translate(-50%, -75%) translateZ(0);
    }
    .faq { padding: 80px 16px 80px 16px; }
    .faq__title {
        margin: 0 0 48px 0;
        font-size: 71px;
        line-height: 1;
        -webkit-text-stroke: 2px #dabfa1;
    }

    .footer {
        flex-direction: column;
        justify-content: center;
        background-image: unset;
        overflow: hidden;
    }
        .footer::after {
            width: 805px;
            height: 498px;
            flex-shrink: 0;
            background-color: #F5DEB3;
            opacity: 0.15;
            filter: blur(300px);
        }
        .footer__viewport {
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    .footer__left {
        width: 100%;
        max-width: 100%;
    }
        .footer__left-title { justify-content: center; max-width: 100%; margin: 0 auto; }
        .footer__left-text { width: 351px; margin: 0 auto; }

    .footer__right::before {
        display: none;
    }
    .footer::before {
        content: '';
        display: block;
        position: absolute;
        bottom: -30%;
        left: 50%;
        transform: translate(-50%,0);
        width: 805px;
        height: 498px;
        background-color: #F5DEB3;
        opacity: 0.15;
        filter: blur(300px);
    }
    .footer_desk { display: none; }
    .footer_mobi {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: 100%;
        max-width: 327px;
        text-align: right;
    }
        .footer__right-mobi-title {
            display: flex;
            align-items: flex-end;
            gap: 24px;
            position: relative;
        }
        .footer__right-img {
            position: absolute;
            right: 94px;
            top: -10px;
            width: 150px;
            margin: 0 0 8px 0;
        }
    
    .footer__left-title, .footer__right-title { font-size: 53px;}
    .footer__right-title {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
    .footer__right-text {
        text-align: center;
    }
    .footer__right-title span {
        display: inline-block;
        color: var(--text-text-accent, #DABFA1);
    }
    .btn { margin: 0 auto; }
}

@media screen and (max-width: 430px) {
    .title-screen__viewport { isolation: isolate; }
    .title-screen__header, .title-screen__secondary, .title-with-hot {
        max-width: 86vw;
    }
    .title-craft, .title-your { font-size: 16vw; }
    .title-your { top: -16vw; }
    .title-dragon { font-size: 30vw; }
    .title-with-hot { font-size: 11vw; }
    .title-img-dragon { margin: -124px auto 0 auto; }
    .title-screen__btns { width: calc(100% - 32px); }
}
@media screen and (max-width: 400px) {
    .title-img-dragon { height: 74vw; margin: -134px auto 0 auto; }
    .faq { padding: 80px 16px 80px 16px; }
    .faq__title { margin: 0 0 40px 0;}
    .faq__item-title { font-size: 24px;}
    .footer { padding: 80px 24px 80px 24px; }
    .footer::before { bottom: -50%; }
    .footer__left-text { width: 312px; gap: 4px; }
    .footer__left-title { letter-spacing: -2.12px}
    .footer_mobi { max-width: 312px; }
    .carousel-nav { width: 50px; height: 50px; }
    
    .get-some .img {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
}

@media screen and (max-width: 370px) {
    .footer__left-title { font-size: 41px; }
    .footer__left-text { width: 240px; }
    .footer_mobi { max-width: 240px; }
    .footer__right-title { font-size: 42px; }
    .footer__right-img {
        right: 80px;
        top: -10px;
        width: 124px;
    }
    .quote__text > span:nth-last-child(1) {
        padding: 0 40px 0 0;
    }
}
@media (min-width: 200px) and (max-width: 400px) and (min-height: 300px) and (max-height: 620px) {
    .title-img-dragon {
        height: 72vw;
        margin: -145px auto 0 auto;
    }
}

/* Loading Screen Styles */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0E0F12;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Полная блокировка во время заставки */
body.loading-screen-active {
    overflow: hidden;
    height: 100vh;
    touch-action: none;
    -webkit-overflow-scrolling: touch;
    pointer-events: none;
}

body.loading-screen-active * {
    pointer-events: none;
}

/* Исключение для самой заставки */
body.loading-screen-active .loading-screen {
    pointer-events: auto;
}

/* Блокировка во время перехода между секциями */
body.section-transition-blocked {
    overflow: hidden;
    touch-action: none;
    -webkit-overflow-scrolling: touch;
}

.loading-screen__container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
}

.loading-screen__animation {
    width: 100%;
}