@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #171513;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    /* clip, а не hidden: hidden по спеке превращает overflow-y в auto и делает
       body вертикальным скролл-контейнером — из-за этого scroll-anchoring дёргал
       прокрутку при появлении секций. clip клипует горизонталь без скролл-контейнера. */
    overflow-x: clip;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
}

body.is-loading {
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
}

.container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
    transition: opacity 0.45s ease, transform 0.45s ease;
    will-change: opacity, transform;
}

html {
    background: #171513;
    width: 100%;
    overflow-x: hidden;
}

.container {
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
}

body:not(.is-loading) .container {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    width: 100dvw;
    height: 100dvh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at center, rgba(241, 140, 22, 0.12) 0%, rgba(23, 21, 19, 0.94) 58%, #171513 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

body.is-loading .preloader {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.45s ease;
}

.preloader-spinner {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ffd59a 0deg, #f18c16 120deg, rgba(241, 140, 22, 0.08) 250deg, #f18c16 360deg);
    padding: 7px;
    box-shadow: 0 0 24px rgba(241, 140, 22, 0.35), inset 0 0 20px rgba(255, 255, 255, 0.08);
    animation: preloader-spin 1s linear infinite;
}

.preloader-spinner::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #171513;
    box-shadow: inset 0 0 0 2px rgba(241, 140, 22, 0.16);
}

@keyframes preloader-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .preloader-spinner {
        width: 62px;
        height: 62px;
        padding: 6px;
    }
}

@media (max-width: 480px) {
    .preloader-spinner {
        width: 54px;
        height: 54px;
        padding: 5px;
    }
}

.text-orange {
    color: #f18c16;
}

img {
    display: block;
    object-fit: cover;
}

.btn {
    background: linear-gradient(180deg, #f79d26 0%, #e07204 100%);
    color: #fff;
    border: none;
    padding: 18px 50px;
    font-size: 22px;
    font-weight: 800;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(241, 140, 22, 0.3);
    font-family: 'Montserrat', sans-serif;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}
.btn:hover {
    transform: translateY(-3px) translateZ(0);
    box-shadow: 0 8px 25px rgba(241, 140, 22, 0.55);
    filter: brightness(1.1);
}
.btn:active {
    transform: translateY(-1px) translateZ(0);
    filter: brightness(0.95);
}

.btn-dark {
    background: #201e1c;
    border: 2px solid #333;
    box-shadow: none;
    padding: 15px 50px;
    position: relative;
    z-index: 3;
    left: 50%;
    top: -30px;
    transform: translateX(-50%) rotate(-1deg);
    opacity: 0;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.3s ease, opacity 0.6s ease;
}
.btn-dark.is-visible {
    opacity: 1;
}
.btn-dark:hover {
    background: #2a2724;
    border-color: #f18c16;
    box-shadow: 0 8px 25px rgba(241, 140, 22, 0.35);
    transform: translateX(-50%) rotate(-1deg) translateY(-3px);
    filter: brightness(1.1);
}

/* --- ШАПКА --- */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    position: relative;
    z-index: 5;
}
.logo-img { width: auto; height: 75px; position: relative; z-index: 10; }


/* --- ГЛАВНЫЙ БЛОК (HERO) --- */
.hero {
    display: flex;
    margin-top: 40px;
    position: relative;
    min-height: 650px;
    z-index: 2;
}

.hero-bg {
    position: absolute;
    top: var(--hero-top, 0);
    left: 0;
    width: 100vw;
    height: var(--hero-height, 650px);
    z-index: 0;
    pointer-events: none;
    background-image: url('../static/img/hero_lines.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

.hero-left {
    width: 45%;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.hero-char {
    width: 100%;
    height: 680px;
    object-fit: contain;
    position: relative;
    bottom: -40px;
    left: -20px;
    z-index: 3;
}

.hero-right {
    width: 55%;
    padding-left: 60px;
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

.hero-logo-img {
    width: 600px;
    margin-bottom: 20px;
    margin-left: -10px;
}

.hero-subtitle {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 30px;
    color: #fff;
}
.hero-subtitle span {
    color: #f18c16;
    font-weight: 700;
}

.hero-socials {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    align-items: center;
}
.social-icon {
    width: 68px;
    height: 68px;
    transition: transform 0.2s;
}
.social-icon:hover {
    transform: scale(1.1);
}
.hero-socials a {
    display: inline-flex;
    line-height: 0;
    text-decoration: none;
}
.social-icon.tg {
    width: 60px;
    height: 60px;
    margin-top: -11px;
}

/* --- БЛОК С ШАГАМИ --- */
.steps-area {
    position: relative;
}

.steps-wrapper {
    position: relative;
    margin-top: -15px;
    z-index: 2;
    min-height: 320px;
    border-radius: 20px;
    overflow: hidden;
    transform: rotate(-1deg);
}

.steps-bg {
    position: absolute;
    top: -303%;
    left: -55%;
    width: auto;
    height: auto;
    z-index: 1;
    pointer-events: none;
    scale: 1.5;
}

.steps-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: -10px;
    width: 69%;
    height: 100%;
    background: #E9E294 url('../static/img/Rectangle64.webp') center/cover no-repeat;
    z-index: 0;
}

.steps-wrapper::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    left: 68%;
    height: 100%;
    background: #E9E294;
    z-index: 0;
}


.steps-container {
    position: relative;
    z-index: 2;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.steps-row {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 30px;
}
.step-card {
    background: linear-gradient(180deg, #e88c2a 0%, #c46a12 100%);
    border: none;
    padding: 25px 20px;
    border-radius: 15px;
    text-align: center;
    flex: 1;
    position: relative;
    box-shadow: 0 6px 15px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 180px;
}
.step-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
    text-transform: uppercase;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-card p {
    font-size: 13.5px;
    opacity: 0.9;
    line-height: 1.4;
    color: #fff;
}
.step-arrow {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    background: #f18c16;
    border: 2px solid #f18c16;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.step-arrow::before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg) translate(-1px, 1px);
}
.step-arrow:hover {
    background: #c46a12;
    border-color: #c46a12;
    transform: scale(1.15);
}
.step-arrow:hover::before {
    border-color: #fff;
}

/* --- БЛОК УСЛОВИЙ --- */
.conditions {
    margin-top: 100px;
    position: relative;
    text-transform: uppercase;
}
.conditions-title {
    text-align: center;
    font-size: 48px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-shadow: 0 0 24px rgba(241, 140, 22, 0.55), 0 0 8px rgba(241, 140, 22, 0.35);
}
.conditions-title .ct-top { transform: translateX(-80px); }
.conditions-title .ct-bot { transform: translateX(0); }
.bg-text {
    position: absolute;
    color: #2a2826;
    font-weight: 900;
    font-size: 32px;
    letter-spacing: 1px;
    z-index: 0;
    pointer-events: none;
    white-space: nowrap;
    user-select: none;
}
.bg-text-tvor    { top: -20px;  left: 140px; }
.bg-text-mero    { top: 40px;   left: 154px; }
.bg-text-zar     { top: 100px;  left: 120px; }
.bg-text-pop     { top: -10px;  right: 218px; }
.bg-text-brand   { top: 70px;   right: 262px; }

.conditions-title { position: relative; z-index: 1; }

.cond-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -30px;
}
.cond-row.reverse {
    flex-direction: row-reverse;
    text-align: right;
}
.cond-text {
    /* flex: 1; */
}
.cond-text h3 {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.3;
}
.cond-img {
    width: 460px;
    height: 460px;
    margin: 0 50px;
    transform: rotate(-3deg);
    background: transparent;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.3));
}
.cond-row.reverse .cond-img { transform: rotate(3deg); }
.cond-btn-wrapper { text-align: center; margin-top: 85px; margin-bottom: 80px; }

/* --- БЛОК КАРУСЕЛИ (ВИДЕО) --- */
.carousel {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 140px;
    padding: 0 30px;
    gap: 10px;
}
.video-card {
    width: 48%;
    height: 360px;
    border-radius: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
.video-card.twitch {
    position: relative;
    overflow: visible;
}
.video-card.youtube {
    position: relative;
    overflow: visible;
}
.video-card .frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.video-card .frame path {
    stroke: currentColor;
}
.video-card.twitch { color: #a72ad5; }
.video-card.youtube { color: #ff1018; }
.video-placeholder {
    width: 75%;
    height: 75%;
    background: #d9d9d9;
    border-radius: 10px;
}
.twitch-streams,
.youtube-videos {
    position: relative;
    z-index: 1;
    width: 78%;
    height: 76%;
    overflow: hidden;
    border-radius: 12px;
    background: #120f16;
    box-shadow: inset 0 0 0 1px rgba(167, 42, 213, 0.28), 0 14px 30px rgba(0, 0, 0, 0.28);
}
.youtube-videos {
    background: #170f0f;
    box-shadow: inset 0 0 0 1px rgba(255, 16, 24, 0.26), 0 14px 30px rgba(0, 0, 0, 0.28);
}
.twitch-track,
.youtube-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.twitch-track::-webkit-scrollbar,
.youtube-track::-webkit-scrollbar { display: none; }
.twitch-slide,
.youtube-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: center;
    background: #0f0d12;
}
.twitch-slide.is-active .twitch-play {
    box-shadow: 0 0 0 9px rgba(167, 42, 213, 0.2), 0 0 30px rgba(189, 46, 232, 0.65), 0 12px 30px rgba(0, 0, 0, 0.38);
}
.youtube-slide.is-active .youtube-play {
    box-shadow: 0 0 0 9px rgba(255, 16, 24, 0.18), 0 0 30px rgba(255, 16, 24, 0.58), 0 12px 30px rgba(0, 0, 0, 0.38);
}
.twitch-link,
.youtube-link,
.twitch-cover {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.twitch-link,
.youtube-link {
    position: relative;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}
.twitch-link::before,
.youtube-link::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(18, 15, 22, 0.04) 0%, rgba(18, 15, 22, 0.08) 45%, rgba(18, 15, 22, 0.78) 100%);
    pointer-events: none;
}
.twitch-link:hover .twitch-cover,
.youtube-link:hover .twitch-cover {
    transform: scale(1.04);
    filter: saturate(1.12) brightness(0.68);
}
.twitch-cover {
    object-fit: cover;
    filter: saturate(1.05) brightness(0.8);
    transition: transform 0.35s ease, filter 0.35s ease;
}
.twitch-live-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(12, 9, 15, 0.82);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
}
.twitch-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 42px 16px 14px;
    color: #fff;
    pointer-events: none;
}
.twitch-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
}
.twitch-live-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #ff2f49;
    box-shadow: 0 0 12px rgba(255, 47, 73, 0.8);
}
.twitch-title {
    margin-top: 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    opacity: 0.86;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.twitch-meta {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    color: #d99aff;
    text-transform: uppercase;
}
.twitch-play,
.youtube-play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(167, 42, 213, 0.92);
    box-shadow: 0 0 0 7px rgba(167, 42, 213, 0.16), 0 12px 30px rgba(0, 0, 0, 0.38);
}
.youtube-play {
    background: rgba(255, 16, 24, 0.92);
    box-shadow: 0 0 0 7px rgba(255, 16, 24, 0.15), 0 12px 30px rgba(0, 0, 0, 0.38);
}
.twitch-play::before,
.youtube-play::before {
    content: '';
    position: absolute;
    left: 23px;
    top: 18px;
    width: 0;
    height: 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 17px solid #fff;
}
.twitch-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}
.twitch-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 50% 38%, rgba(189, 46, 232, 0.28) 0%, rgba(189, 46, 232, 0.08) 34%, rgba(18, 15, 22, 0) 62%),
        linear-gradient(135deg, rgba(36, 22, 45, 0.98) 0%, rgba(18, 15, 22, 0.98) 58%, rgba(43, 18, 55, 0.96) 100%);
    overflow: hidden;
}
.twitch-empty::before,
.twitch-empty::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}
.twitch-empty::before {
    width: 170px;
    height: 170px;
    border: 1px solid rgba(189, 46, 232, 0.22);
    box-shadow: 0 0 42px rgba(189, 46, 232, 0.18);
}
.twitch-empty::after {
    width: 72px;
    height: 72px;
    background: rgba(189, 46, 232, 0.12);
    filter: blur(1px);
}
.twitch-empty-icon {
    position: relative;
    z-index: 1;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: linear-gradient(180deg, #bd2ee8 0%, #7a22b3 100%);
    box-shadow: 0 14px 34px rgba(122, 34, 179, 0.42);
}
.twitch-empty-icon::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 18px;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 19px solid #fff;
}
.twitch-empty-title {
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
}
.twitch-empty-text {
    position: relative;
    z-index: 1;
    max-width: 260px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}
.twitch-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    background: radial-gradient(circle at center, rgba(167, 42, 213, 0.2) 0%, rgba(18, 15, 22, 0.96) 62%);
}
.twitch-spinner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 4px solid rgba(189, 46, 232, 0.2);
    border-top-color: #bd2ee8;
    border-right-color: #8a2be2;
    box-shadow: 0 0 24px rgba(189, 46, 232, 0.35);
    animation: twitch-spin 0.85s linear infinite;
}
@keyframes twitch-spin {
    to { transform: rotate(360deg); }
}
.platform-icon {
    position: absolute;
    top: -35px;
    width: 90px;
    height: 90px;
    border-radius: 16px;
    background: transparent;
    padding: 0;
    box-sizing: border-box;
}
.twitch .platform-icon {
    left: -50px;
    top: -20px;
    transform: rotate(-12deg);
}
.youtube .platform-icon {
    right: -60px;
    top: -20px;
    transform: rotate(-20deg);
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}
.twitch .arrow-left  { left: 5%; color: #8a2be2; }
.twitch .arrow-right { right: 5%; color: #8a2be2; }
.youtube .arrow-left  { left: 5%; color: #ff0000; }
.youtube .arrow-right { right: 5%; color: #ff0000; }

.car-center {
    position: absolute;
    left: 40%;
    bottom: -110px;
    transform: translateX(-50%);
    width: 300px;
    height: 220px;
    z-index: 10;
    background-color: transparent;
    border: none;
    object-fit: contain;
    pointer-events: none;
}

/* --- АНИМАЦИИ ПОЯВЛЕНИЯ ПРИ ПРОКРУТКЕ --- */
.reveal {
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.reveal-up    { transform: translateY(60px); }
.reveal-down  { transform: translateY(-60px); }
.reveal-left  { transform: translateX(-80px); }
.reveal-right { transform: translateX(80px); }
.reveal-scale { transform: scale(0.88); }

.reveal.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Каскадные задержки для дочерних элементов */
.stagger > * {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.stagger.is-visible > * { opacity: 1; transform: translate(0, 0); }
.stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 0.25s; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 0.35s; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 0.45s; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 0.55s; }
.stagger.is-visible > *:nth-child(7) { transition-delay: 0.65s; }

/* Параллакс фоновых надписей */
.bg-text {
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Шапка — появляется сразу */
.header { transition: opacity 0.6s ease, transform 0.6s ease; }

/* Уважаем prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .reveal, .stagger > *, .header {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .preloader-spinner {
        animation: none !important;
    }
}

/* ===========================================
   АДАПТИВНОСТЬ: ПЛАНШЕТЫ (max-width: 1024px)
   =========================================== */
@media (max-width: 1024px) {
    .container { padding: 0 24px; }

    .hero { min-height: auto; margin-top: 24px; }
    .hero-char { height: 540px; bottom: -20px; }
    .hero-right { padding-left: 30px; padding-top: 30px; }
    .hero-logo-img { width: 420px; }
    .hero-subtitle { font-size: 24px; }

    .social-icon { width: 68px; height: 68px; }

    .steps-wrapper { min-height: auto; }
    .step-card { height: 160px; padding: 20px 14px; }
    .step-card h3 { font-size: 16px; min-height: 40px; }

    .conditions-title { font-size: 40px; margin-bottom: 80px; }
    .cond-text h3 { font-size: 32px; }
    .cond-img { width: 340px; height: 340px; margin: 0 30px; }

    .video-card { height: 300px; }
    .platform-icon { width: 72px; height: 72px; }
    .car-center { width: 220px; height: 160px; bottom: -80px; }

    .bg-text { font-size: 26px; }
    .bg-text-tvor { left: 30px; }
    .bg-text-mero { left: 90px; }
    .bg-text-zar { left: 10px; }
    .bg-text-brand { right: 90px; }
}

/* ===========================================
   АДАПТИВНОСТЬ: ПЛАНШЕТЫ (max-width: 768px)
   =========================================== */
@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    .container {
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 0 18px;
        overflow: hidden;
    }

    .hero-bg,
    .hero,
    .steps-area,
    .conditions,
    .carousel,
    .footer {
        width: 100%;
        max-width: 100%;
    }

    .reveal-left,
    .reveal-right {
        transform: translateY(40px);
    }

    .header { padding: 16px 0; }
    .logo-img { height: 60px; }

    /* HERO: на мобильных собираем в единую вертикальную композицию */
    .hero {
        flex-direction: column;
        align-items: center;
        margin-top: -4px;
        min-height: auto;
        padding-bottom: 22px;
        gap: 0;
    }
    .hero-left, .hero-right {
        width: 100%;
        padding-left: 0;
        padding-top: 0;
    }
    .hero-left {
        order: 2;
        align-items: center;
        justify-content: center;
        margin: -10px 0 -12px;
        position: relative;
        overflow: hidden;
    }
    .hero-left::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        width: min(88vw, 390px);
        height: 70px;
        transform: translateX(-50%);
        border-radius: 50% 50% 0 0;
        background:
            radial-gradient(ellipse at center, rgba(241, 140, 22, 0.22) 0%, rgba(241, 140, 22, 0.08) 42%, rgba(241, 140, 22, 0) 72%),
            linear-gradient(180deg, rgba(23, 21, 19, 0) 0%, rgba(23, 21, 19, 0.78) 48%, #171513 100%);
        pointer-events: none;
        z-index: 4;
        opacity: 0;
        transition: opacity 0.5s ease 0.375s;
    }
    .hero-left.is-visible::after {
        opacity: 1;
    }

    .hero-char {
        width: min(90vw, 390px);
        height: auto;
        max-height: 380px;
        bottom: 0;
        left: 0;
        margin: 0 auto;
    }
    .hero-right {
        display: contents;
        text-align: center;
    }
    .hero-right > * {
        opacity: 1;
        transform: none;
    }
    .hero-logo-img {
        width: min(72vw, 300px);
        /* верхний отступ сохраняем примерно таким же, каким он был с кнопкой сверху */
        margin: 56px auto 0;
        order: 1;
    }
    .hero-subtitle {
        order: 3;
        position: relative;
        z-index: 5;
        font-size: 18px;
        line-height: 1.35;
        margin: -34px 0 20px;
    }
    .hero-right > .hero-subtitle {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.5s ease 0.375s, transform 0.5s ease 0.375s;
    }
    .hero-left.is-visible + .hero-right > .hero-subtitle {
        opacity: 1;
        transform: translateY(0);
    }
    /* .hero-right — display:contents, поэтому IntersectionObserver не помечает его
       .is-visible и его дети (.stagger > *) остаются opacity:0. Раскрываем логотип,
       кнопку и соцсети вместе с появлением персонажа — как это уже сделано для подзаголовка. */
    .hero-left.is-visible + .hero-right > *:not(.hero-subtitle) {
        opacity: 1;
        transform: none;
    }
    .btn { padding: 14px 36px; font-size: 16px; }
    /* Кнопка обёрнута в <a> — именно ссылка является flex-элементом, поэтому order
       задаём ей (между подзаголовком order:3 и соцсетями order:5). */
    .hero-right > a { order: 4; }
    .hero-socials { justify-content: center; gap: 14px; order: 5; margin-top: 18px; }
    .social-icon { width: 60px; height: 60px; }

    /* STEPS: одна карточка в строке, прижато к hero */
    .steps-area { margin-top: 30px; }
    .steps-wrapper { transform: rotate(0); }
    .steps-wrapper::before,
    .steps-wrapper::after {
        left: 0; width: 100%;
    }
    .steps-container { padding: 24px 18px; }
    .steps-row {
        flex-direction: column;
        gap: 14px;
        margin-bottom: 0;
    }
    .step-card { width: 100%; height: auto; min-height: 130px; }
    .step-arrow::before { transform: rotate(135deg) translate(-1px, 1px); }
    .btn-dark { top: 0; margin-top: 24px; position: relative; }

    /* CONDITIONS */
    .conditions { margin-top: 60px; }
    .conditions-title { font-size: 34px; margin-bottom: 50px; }
    .conditions-title .ct-top { transform: translateX(0); }
    .bg-text {
        display: block;
        font-size: 16px;
        opacity: 0.35;
    }
    .bg-text-tvor    { top: -10px; left: 20px; }
    .bg-text-mero    { top: 30px;  left: 70px; }
    .bg-text-zar     { top: 70px;  left: 10px; }
    .bg-text-pop     { top: 0;     right: 10px; }
    .bg-text-brand   { top: 50px;  right: 60px; }

    .cond-row, .cond-row.reverse {
        flex-direction: column;
        text-align: center;
        gap: 24px;
        margin-bottom: 80px;
    }
    .cond-img { width: 260px; height: 260px; margin: 0; transform: rotate(0); }
    .cond-row.reverse .cond-img { transform: rotate(0); }
    .cond-text h3 { font-size: 26px; }

    .cond-btn-wrapper { margin-top: 30px; margin-bottom: 50px; }

    /* CAROUSEL */
    .carousel {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 26px 0 34px;
        gap: 0;
        margin: 8px 0 80px;
        overflow: hidden;
    }
    .video-card {
        width: 100%;
        height: clamp(275px, 68vw, 330px);
        flex: none;
        display: block;
    }
    .video-card.youtube {
        margin-top: -4px;
    }
    .video-card .frame {
        inset: 0;
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.28));
    }
    .video-card .frame path {
        stroke-width: 6px;
    }
    .video-placeholder {
        position: absolute;
        left: 50%;
        top: 20%;
        width: 72%;
        height: 58%;
        transform: translateX(-50%);
        border-radius: 18px;
        z-index: 1;
    }
    .twitch-streams {
        position: absolute;
        left: 50%;
        top: 20%;
        width: 72%;
        height: 58%;
        transform: translateX(-50%);
        border-radius: 18px;
    }
    .youtube-videos {
        position: absolute;
        left: 50%;
        top: 20%;
        width: 72%;
        height: 58%;
        transform: translateX(-50%);
        border-radius: 18px;
    }
    .twitch-link::before,
    .youtube-link::before {
        background: linear-gradient(180deg, rgba(18, 15, 22, 0.02) 0%, rgba(18, 15, 22, 0.16) 38%, rgba(18, 15, 22, 0.9) 100%);
    }
    .twitch-info {
        padding: 48px 12px 10px;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
    }
    .twitch-name {
        font-size: 14px;
        max-width: 68%;
    }
    .twitch-title {
        font-size: 10px;
        max-width: 82%;
        -webkit-line-clamp: 1;
    }
    .twitch-meta { font-size: 10px; }
    .twitch-empty-icon { width: 52px; height: 52px; border-radius: 15px; }
    .twitch-empty-icon::before { left: 19px; top: 15px; border-top-width: 11px; border-bottom-width: 11px; border-left-width: 16px; }
    .twitch-empty-title { font-size: 14px; }
    .twitch-empty-text { font-size: 10px; max-width: 220px; }
    .twitch-play,
    .youtube-play {
        width: 46px;
        height: 46px;
        top: 43%;
        z-index: 4;
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18), 0 0 22px rgba(167, 42, 213, 0.72), 0 12px 28px rgba(0, 0, 0, 0.65);
    }
    .youtube-play {
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18), 0 0 22px rgba(255, 16, 24, 0.72), 0 12px 28px rgba(0, 0, 0, 0.65);
    }
    .twitch-play::before,
    .youtube-play::before {
        left: 18px;
        top: 14px;
        border-top-width: 9px;
        border-bottom-width: 9px;
        border-left-width: 14px;
    }
    .platform-icon {
        width: 56px;
        height: 56px;
        z-index: 3;
        filter: drop-shadow(0 6px 8px rgba(0,0,0,0.35));
    }
    .twitch .platform-icon {
        left: -3px;
        top: 10px;
        transform: rotate(-15deg);
    }
    .youtube .platform-icon {
        right: -1px;
        top: 8px;
        transform: rotate(-13deg);
    }
    .arrow {
        top: auto;
        bottom: -2px;
        font-size: 54px;
        line-height: 1;
        font-weight: 400;
        z-index: 2;
    }
    .twitch .arrow-left,
    .youtube .arrow-left { left: 9%; }
    .twitch .arrow-right,
    .youtube .arrow-right { right: 9%; }
    .twitch .arrow-left,
    .twitch .arrow-right { color: #bd2ee8; }
    .youtube .arrow-left,
    .youtube .arrow-right { color: #ff1018; }
    .car-center {
        position: relative;
        order: 2;
        left: auto;
        bottom: auto;
        width: min(58vw, 260px);
        height: auto;
        margin: -58px auto -44px;
        transform: none;
    }
    .video-card.twitch { order: 1; }
    .video-card.youtube { order: 3; }

    /* FOOTER */
    .footer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 18px;
        text-align: center;
        padding: 30px 0;
    }
    .footer-center {
        order: 1;
        flex: 0 0 100%;
    }
    .footer-socials {
        display: contents;
    }
    .footer-icon {
        width: 36px;
        height: 36px;
        order: 2;
    }
}

/* ===========================================
   АДАПТИВНОСТЬ: ТЕЛЕФОНЫ (max-width: 480px)
   =========================================== */
@media (max-width: 480px) {
    .container { padding: 0 14px; }

    .header { padding: 12px 0; }
    .logo-img { height: 50px; }

    .hero { padding-bottom: 20px; }
    .hero-left { margin: 10px 0 6px; }
    .hero-left::after { width: min(92vw, 335px); height: 58px; bottom: 0; }
    .hero-char { width: min(94vw, 330px); max-height: 320px; }
    .hero-logo-img { width: min(68vw, 240px); margin-top: 14px; }
    .hero-subtitle { font-size: 16px; margin: -40px 0px 22px; }
    .social-icon { width: 54px; height: 54px; }
    .social-icon.tg { width: 50px; height: 50px; margin-top: -7px; }
    .hero-socials { gap: 12px; margin-top: 16px; }
    .btn { padding: 13px 28px; font-size: 14px; }

    .steps-container { padding: 22px 14px; }
    .step-card { padding: 18px 12px; }
    .step-card h3 { font-size: 15px; }
    .step-card p { font-size: 11px; }

    .conditions-title { font-size: 28px; margin-bottom: 40px; }
    .bg-text { font-size: 13px; }
    .bg-text-tvor    { top: -8px; left: 10px; }
    .bg-text-mero    { top: 22px; left: 40px; }
    .bg-text-zar     { top: 52px; left: 4px; }
    .bg-text-pop     { top: 0;    right: 4px; }
    .bg-text-brand   { top: 38px; right: 30px; }
    .cond-img { width: 220px; height: 220px; }
    .cond-text h3 { font-size: 22px; }
    .cond-row, .cond-row.reverse { margin-bottom: 70px; }

    .carousel { margin: 8px 0 72px; padding: 22px 0 30px; }
    .video-card { height: clamp(255px, 74vw, 305px); }
    .video-placeholder { top: 21%; width: 72%; height: 57%; border-radius: 16px; }
    .twitch-streams { top: 21%; width: 72%; height: 57%; border-radius: 16px; }
    .youtube-videos { top: 21%; width: 72%; height: 57%; border-radius: 16px; }
    .twitch-info { padding: 46px 10px 9px; }
    .twitch-name { max-width: 66%; }
    .twitch-title { max-width: 84%; }
    .twitch-play,
    .youtube-play {
        width: 40px;
        height: 40px;
        top: 42%;
    }
    .twitch-play::before,
    .youtube-play::before {
        left: 16px;
        top: 12px;
        border-top-width: 8px;
        border-bottom-width: 8px;
        border-left-width: 12px;
    }
    .platform-icon { width: 60px; height: 60px; }
    .twitch .platform-icon { left: 0; top: -2px; }
    .youtube .platform-icon { right: 0; top: -18px; }
    .arrow { bottom: -2px; font-size: 48px; }
    .car-center { width: min(60vw, 235px); margin: -52px auto -40px; }
}

/* ===========================================
   АДАПТИВНОСТЬ: ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ (max-width: 360px)
   =========================================== */
@media (max-width: 360px) {
    .hero-logo-img { width: 210px; }
    .hero-subtitle { font-size: 16px; }
    .hero-left::after { width: min(94vw, 295px); height: 52px; }
    .hero-char { width: min(96vw, 290px); max-height: 285px; }
    .conditions-title { font-size: 24px; }
    .cond-text h3 { font-size: 19px; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .hero-left::after,
    .hero-right > .hero-subtitle {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* --- ПОДВАЛ --- */
.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
    border-top: 1px solid #333;
}
.footer-socials {
    display: flex;
    gap: 15px;
}
.footer-icon { width: 40px; height: 40px; border-radius: 10px; }
.footer-socials a {
    display: inline-flex;
    line-height: 0;
    text-decoration: none;
}
.footer-center { text-align: center; }
.footer-center h2 { color: #f18c16; font-size: 24px; margin-bottom: 5px; }
.footer-center a { color: #888; text-decoration: none; font-size: 14px; }
.footer-center a:hover { color: #fff; }