/* ===== FONTS ===== */
@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/source-sans-3-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-border-btn: #c0392b;
    --color-text: #222222;
    --color-text-secondary: #444444;
    --font-main: 'Gill Sans Nova', 'Gill Sans', 'Source Sans 3', sans-serif;
}

html, body {
    height: 100%;
}

body {
    font-family: var(--font-main);
    color: var(--color-text);
    background: #ffffff;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ===== DIVIDER ===== */
.divider-wrapper {
    position: relative;
}

.divider {
    border: none;
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        #dddddd 0,
        #dddddd 20px,
        transparent 20px,
        transparent 40px
    );
    margin: 0;
}

/* ===== HERO SECTION ===== */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    padding: 40px 20px;
    overflow: hidden;
}

/* Первый блок на десктопе — показываем край второго блока */
@media (min-width: 861px) {
    .hero:first-of-type {
        height: 95vh;
        position: relative;
    }
}

/* ===== SCROLL HINT ===== */
.scroll-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    animation: bounce 2s ease-in-out infinite;
    cursor: pointer;
    z-index: 10;
    background: #ffffff;
    padding: 8px 20px;
    border-radius: 8px;
}

.scroll-hint__text {
    font-size: clamp(14px, 1.4vw, 20px);
    font-weight: 400;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.scroll-hint__arrow {
    font-size: clamp(20px, 1.8vw, 28px);
    color: var(--color-border-btn);
    line-height: 1;
}

@keyframes bounce {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0);
    }
    50% {
        transform: translate(-50%, -50%) translateY(8px);
    }
}


.hero__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1600px;
    width: 100%;
    gap: 0;
}

/* ===== LEFT IMAGE (iPad) ===== */
.hero__left {
    flex: 1 1 25%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.hero__img--left {
    width: 100%;
    max-height: 85vh;
    object-fit: contain;
    transform: scale(1.4);
    transform-origin: left center;
}

/* ===== RIGHT IMAGE (Woman) ===== */
.hero__right {
    flex: 1 1 25%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.hero__img--right {
    width: 100%;
    max-height: 85vh;
    object-fit: contain;
    transform: scale(1.4);
    transform-origin: right center;
}

/* ===== CENTER CONTENT ===== */
.hero__center {
    flex: 1 1 50%;
    text-align: center;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero__subtitle {
    font-family: var(--font-main);
    font-style: normal;
    font-size: clamp(14px, 1.6vw, 26px);
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.3;
    margin-bottom: 32px;
}

@media (min-width: 861px) {
    .hero--propisi .hero__subtitle {
        transform: translateY(-40px);
    }
}

.hero__title {
    font-family: var(--font-main);
    font-size: clamp(24px, 3.3vw, 56px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--color-text);
    margin-bottom: 28px;
    text-align: center;
}

.hero__list {
    list-style: none;
    text-align: left;
    margin-top: 80px;
}

.hero__list li {
    font-size: clamp(14px, 1.6vw, 26px);
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.2;
}

.hero__list li::before {
    content: "\2014\00a0";
}

.hero__cta-text {
    font-size: clamp(14px, 1.6vw, 26px);
    font-weight: 400;
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.3;
    margin-bottom: 24px;
}

/* ===== CTA BUTTON ===== */
.hero__btn {
    display: inline-block;
    padding: clamp(12px, 1.25vw, 20px) clamp(28px, 3.75vw, 60px);
    border: 2px solid var(--color-border-btn);
    border-radius: 12px;
    background: #ffffff;
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: clamp(18px, 2.3vw, 38px);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.hero__btn:hover {
    background: #faf5f5;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(122, 46, 46, 0.15);
}

/* ===== VPN HINT ===== */
.hero__hint {
    font-size: clamp(12px, 1.2vw, 16px);
    color: #999999;
    text-align: center;
    margin-top: 16px;
    line-height: 1.4;
    transition: color 0.3s;
}

.hero__hint--highlight {
    color: var(--color-border-btn);
    animation: hint-pulse 0.5s ease-in-out 3;
}

@keyframes hint-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
}

.hero__hint-copy {
    cursor: pointer;
    border-bottom: 1px dashed #999999;
    transition: color 0.2s, border-color 0.2s;
}

.hero__hint-copy:hover {
    color: var(--color-text);
    border-color: var(--color-text);
}

/* ===== MOBILE-ONLY ELEMENTS (hidden on desktop) ===== */
.hero__mobile-img {
    display: none;
}

.mobile-br {
    display: none;
}

/* ===== RESPONSIVE ===== */

/* Small tablet / large phone — switch to column layout */
@media (max-width: 860px) {
    .hero {
        height: auto;
        min-height: 100vh;
        padding: 40px 16px;
        overflow-x: hidden;
    }

    .hero__inner {
        flex-direction: column;
        gap: 16px;
    }

    /* Hide desktop side images on mobile */
    .hero__left,
    .hero__right {
        display: none;
    }

    .hero__center {
        flex: 1 0 auto;
        padding: 0;
    }

    /* Show mobile images */
    .hero__mobile-img {
        display: block;
        width: 100%;
        max-width: 100%;
        object-fit: contain;
        margin: 0 auto;
        pointer-events: none;
    }

    /* pict_5, pict_7 — scale up, overlap top & bottom */
    .hero__mobile-img--5,
    .hero__mobile-img--7 {
        transform: scale(1.25);
        margin-top: -2vw;
        margin-bottom: -2vw;
    }

    /* pict_6 — scale up, don't overflow into divider */
    .hero__mobile-img--6 {
        transform: scale(1.25);
        transform-origin: center bottom;
        margin-top: 2vw;
    }

    /* pict_8 — scale up, overlap top only */
    .hero__mobile-img--8 {
        transform: scale(1.25);
        margin-top: -2vw;
    }

    /* Reduce gap between image and list */
    .hero__list {
        margin-top: 16px;
    }

    /* Scroll hint font sizes on mobile */
    .scroll-hint__text {
        font-size: clamp(14px, 4vw, 20px);
    }

    .scroll-hint__arrow {
        font-size: clamp(18px, 5vw, 26px);
    }

    /* Mobile font sizes — adaptive to phone screen */
    .hero__title {
        font-size: clamp(28px, 7.5vw, 42px);
    }

    .hero__subtitle {
        font-size: clamp(16px, 4.2vw, 24px);
        transform: none;
    }

    .hero__cta-text {
        font-size: clamp(16px, 4.2vw, 24px);
    }

    .hero__list li {
        font-size: clamp(16px, 4.2vw, 24px);
    }

    .hero__btn {
        font-size: clamp(20px, 5.5vw, 32px);
    }

    /* Show mobile-only line break */
    .mobile-br {
        display: inline;
    }

    /* --- Section 1 (Прописи) mobile order --- */
    /* title → cta-text → btn → pict_5 → list → subtitle → pict_6 */
    .hero--propisi .hero__title { order: 10; }
    .hero--propisi .hero__cta-text { order: 20; }
    .hero--propisi .hero__btn { order: 30; }
    .hero--propisi .hero__hint { order: 35; }
    .hero--propisi .hero__mobile-img--5 { order: 40; }
    .hero--propisi .hero__list { order: 50; }
    .hero--propisi .hero__subtitle { order: 60; }
    .hero--propisi .hero__mobile-img--6 { order: 70; }

    /* --- Section 2 (Курс) mobile order --- */
    /* subtitle → title → cta-text → btn → pict_7 → list → pict_8 */
    .hero--course .hero__subtitle { order: 10; }
    .hero--course .hero__title { order: 20; }
    .hero--course .hero__cta-text { order: 30; }
    .hero--course .hero__btn { order: 40; }
    .hero--course .hero__mobile-img--7 { order: 50; }
    .hero--course .hero__list { order: 60; }
    .hero--course .hero__mobile-img--8 { order: 70; }
}

/* Phone — tighter padding */
@media (max-width: 480px) {
    .hero {
        padding: 24px 12px;
    }

    .hero__subtitle {
        margin-bottom: 20px;
    }

    .hero__list {
        margin-bottom: 24px;
    }
}