/* =========================================================
   TMB-URIST.RU
   HOME / HERO.CSS

   Адаптив:
   • 4K
   • 2K
   • Full HD 1920×1080
   • 1600
   • 1440
   • 1366
   • 1280
   • планшеты
   • мобильные

   Особенности:
   • без горизонтального overflow
   • Hero не создаёт лишний вертикальный scroll
   • мобильная версия полностью по центру
   ========================================================= */


/* =========================================================
   0. VARIABLES
   ========================================================= */

:root {

    /* ---------- COLORS ---------- */

    --main-blue: #2563eb;
    --main-blue-dark: #1d4ed8;
    --main-blue-light: #3b82f6;

    --main-green: #16a34a;

    --main-text: #0f172a;
    --main-text-soft: #475569;
    --main-text-muted: #64748b;

    --main-bg: #f7f9fc;
    --main-white: #ffffff;

    --main-border: #e2e8f0;


    /* ---------- RADIUS ---------- */

    --main-radius-sm: 10px;
    --main-radius: 16px;
    --main-radius-lg: 24px;
    --main-radius-xl: 32px;


    /* ---------- CONTAINER ---------- */

    --main-container: 1440px;


    /* ---------- SHADOW ---------- */

    --main-shadow:
        0 20px 60px rgba(15, 23, 42, 0.07);

    --main-shadow-hover:
        0 30px 80px rgba(15, 23, 42, 0.12);


    /* ---------- TRANSITION ---------- */

    --main-transition:
        0.28s cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   1. GLOBAL
   ========================================================= */

/* Глобальные html/body стили здесь намеренно не задаются.
   NAV и общий layout управляются единым CSS для всех страниц. */


.home,
.home * {

    box-sizing: border-box;
}


.home {

    width: 100%;

    max-width: 100%;

    overflow-x: clip;
}


.home main {

    width: 100%;

    max-width: 100%;

    overflow-x: clip;
}


.home a {

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


.home img {

    display: block;

    max-width: 100%;

    height: auto;
}


.home button,
.home a {

    font-family: inherit;
}


/* =========================================================
   2. HERO
   ========================================================= */

.main-hero {

    position: relative;

    width: 100%;

    max-width: 100%;

    /*
     * ВАЖНО:
     * Не ставим height: 100vh.
     *
     * Потому что сверху уже находятся:
     * header + nav.
     *
     * 100vh + header + nav =
     * лишняя высота страницы.
     */

    min-height: 0;

    height: auto;

    display: flex;

    align-items: center;

    padding:
        clamp(60px, 6vw, 105px)
        0
        clamp(55px, 5vw, 90px);

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(37, 99, 235, 0.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 92% 15%,
            rgba(59, 130, 246, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 55% 100%,
            rgba(37, 99, 235, 0.045),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );

    isolation: isolate;

    overflow: hidden;
}


/* =========================================================
   3. BACKGROUND GRID
   ========================================================= */

.main-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    opacity: 0.45;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(15, 23, 42, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(15, 23, 42, 0.025) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            transparent 85%
        );
}


/* =========================================================
   4. HERO GRID
   ========================================================= */

.main-hero-grid {

    position: relative;

    width:
        min(
            calc(100% - 48px),
            var(--main-container)
        );

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.75fr)
        minmax(220px, 0.72fr)
        minmax(240px, 0.9fr);

    align-items: center;

    gap:
        clamp(
            40px,
            4vw,
            90px
        );

    min-width: 0;
}


/* =========================================================
   5. LEFT
   ========================================================= */

.main-hero-left {

    width: 100%;

    max-width: 780px;

    min-width: 0;
}


/* =========================================================
   6. TITLE
   ========================================================= */

.main-hero-title {

    margin:
        0 0 28px;

    color:
        var(--main-text);

    font-size:
        clamp(
            48px,
            4.25vw,
            82px
        );

    line-height:
        0.99;

    letter-spacing:
        clamp(
            -3px,
            -0.18vw,
            -1.5px
        );

    font-weight:
        800;

    text-wrap:
        balance;

    overflow-wrap:
        break-word;
}


.main-hero-title span {

    display: block;

    margin-top:
        8px;

    color:
        var(--main-blue);

    font-weight:
        800;
}


/* =========================================================
   7. SUBTITLE
   ========================================================= */

.main-hero-subtitle {

    width: 100%;

    max-width: 690px;

    margin: 0;

    color:
        var(--main-text-soft);

    font-size:
        clamp(
            16px,
            1.05vw,
            20px
        );

    line-height:
        1.68;

    font-weight:
        450;

    text-wrap:
        pretty;

    overflow-wrap:
        break-word;
}


/* =========================================================
   8. CENTER
   ========================================================= */

.main-hero-center {

    width: 100%;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap:
        14px;

    margin: 0;
}


/* =========================================================
   9. RIGHT
   ========================================================= */

.main-hero-right {

    width: 100%;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 0;

    margin: 0;
}


/* =========================================================
   10. FEATURES
   ========================================================= */

.main-feature {

    position: relative;

    width: 100%;

    min-height:
        72px;

    padding:
        17px
        0
        17px
        34px;

    display: flex;

    align-items: center;

    color:
        var(--main-text);

    font-size:
        clamp(
            13px,
            0.78vw,
            15px
        );

    line-height:
        1.5;

    font-weight:
        650;

    border-bottom:
        1px solid
        var(--main-border);

    overflow-wrap:
        break-word;
}


.main-feature:first-child {

    border-top:
        1px solid
        var(--main-border);
}


.main-feature::before {

    content: "✓";

    position: absolute;

    left: 0;

    top: 50%;

    transform:
        translateY(-50%);

    width:
        22px;

    height:
        22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        50%;

    background:
        rgba(22, 163, 74, 0.10);

    color:
        var(--main-green);

    font-size:
        12px;

    font-weight:
        900;

    flex-shrink: 0;
}


/* =========================================================
   11. BUTTONS
   ========================================================= */

.main-btn {

    position: relative;

    width: 100%;

    min-width: 0;

    min-height:
        56px;

    padding:
        15px
        24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius:
        12px;

    text-decoration:
        none;

    font-size:
        15px;

    line-height:
        1.2;

    font-weight:
        700;

    text-align:
        center;

    white-space:
        normal;

    cursor:
        pointer;

    transition:
        transform var(--main-transition),
        box-shadow var(--main-transition),
        background var(--main-transition),
        border-color var(--main-transition),
        color var(--main-transition);

    overflow-wrap:
        break-word;
}


/* =========================================================
   12. PRIMARY BUTTON
   ========================================================= */

.main-btn-primary {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #2563eb 0%,
            #3b82f6 100%
        );

    border:
        1px solid
        rgba(37, 99, 235, 0.35);

    box-shadow:
        0 14px 35px
        rgba(37, 99, 235, 0.20);
}


.main-btn-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 45px
        rgba(37, 99, 235, 0.30);
}


.main-btn-primary:active {

    transform:
        translateY(-1px);
}


/* =========================================================
   13. OUTLINE BUTTON
   ========================================================= */

.main-btn-outline {

    color:
        var(--main-blue);

    background:
        rgba(255, 255, 255, 0.85);

    border:
        1px solid
        rgba(37, 99, 235, 0.45);

    box-shadow:
        0 8px 20px
        rgba(15, 23, 42, 0.035);
}


.main-btn-outline:hover {

    color:
        #ffffff;

    background:
        var(--main-blue);

    border-color:
        var(--main-blue);

    transform:
        translateY(-3px);

    box-shadow:
        0 16px 35px
        rgba(37, 99, 235, 0.20);
}


.main-btn:focus-visible {

    outline:
        3px solid
        rgba(37, 99, 235, 0.25);

    outline-offset:
        3px;
}


/* =========================================================
   14. SERVICES
   ========================================================= */

.home .services-main {

    position: relative;

    width: 100%;

    padding:
        clamp(65px, 6vw, 105px)
        0
        clamp(50px, 5vw, 85px);

    background:
        #ffffff;

    overflow:
        hidden;
}


/* =========================================================
   15. SERVICES TITLE
   ========================================================= */

.services-main-title.home {

    position: relative;

    width:
        min(
            calc(100% - 40px),
            1100px
        );

    margin:
        0 auto
        clamp(
            30px,
            3.5vw,
            50px
        );

    padding-bottom:
        20px;

    color:
        var(--main-text);

    font-size:
        clamp(
            34px,
            2.8vw,
            52px
        );

    line-height:
        1.12;

    letter-spacing:
        -1.8px;

    font-weight:
        800;

    text-align:
        center;

    text-wrap:
        balance;
}


.services-main-title.home::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 0;

    transform:
        translateX(-50%);

    width:
        68px;

    height:
        4px;

    border-radius:
        99px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #3b82f6
        );
}


/* =========================================================
   16. CONTACT
   ========================================================= */

.contact {

    padding-top:
        clamp(
            30px,
            4vw,
            60px
        );
}


/* =========================================================
   17. ULTRA WIDE 3000+
   ========================================================= */

@media (min-width: 3000px) {

    .main-hero {

        min-height:
            min(
                980px,
                calc(100vh - 150px)
            );

        padding:
            105px
            0
            100px;
    }


    .main-hero-grid {

        width:
            min(
                calc(100% - 220px),
                2050px
            );

        grid-template-columns:
            minmax(0, 1.8fr)
            minmax(300px, 0.72fr)
            minmax(330px, 0.9fr);

        gap:
            145px;
    }


    .main-hero-title {

        font-size:
            clamp(
                90px,
                4vw,
                118px
            );

        letter-spacing:
            -4px;
    }


    .main-hero-subtitle {

        max-width:
            900px;

        font-size:
            23px;
    }


    .main-feature {

        min-height:
            90px;

        font-size:
            18px;
    }


    .main-btn {

        min-height:
            68px;

        font-size:
            18px;

        border-radius:
            14px;
    }


    .services-main-title.home {

        font-size:
            64px;
    }
}


/* =========================================================
   18. 4K
   2200–2999
   ========================================================= */

@media (min-width: 2200px) and (max-width: 2999px) {

    .main-hero {

        min-height:
            min(
                880px,
                calc(100vh - 150px)
            );

        padding:
            80px
            0
            75px;
    }


    .main-hero-grid {

        width:
            min(
                calc(100% - 160px),
                1750px
            );

        gap:
            120px;
    }


    .main-hero-title {

        font-size:
            clamp(
                80px,
                3.7vw,
                102px
            );
    }


    .main-hero-subtitle {

        max-width:
            800px;

        font-size:
            21px;
    }


    .main-feature {

        min-height:
            78px;

        font-size:
            16px;
    }


    .main-btn {

        min-height:
            62px;

        font-size:
            16px;
    }


    .services-main-title.home {

        font-size:
            58px;
    }
}


/* =========================================================
   19. 2K
   1921–2199
   ========================================================= */

@media (min-width: 1921px) and (max-width: 2199px) {

    .main-hero {

        min-height:
            min(
                840px,
                calc(100vh - 145px)
            );

        padding:
            75px
            0
            70px;
    }


    .main-hero-grid {

        width:
            min(
                calc(100% - 120px),
                1650px
            );

        gap:
            100px;
    }


    .main-hero-title {

        font-size:
            86px;
    }


    .main-hero-subtitle {

        font-size:
            20px;
    }


    .main-feature {

        min-height:
            74px;

        font-size:
            15px;
    }
}


/* =========================================================
   20. FULL HD
   1601–1920
   ========================================================= */

@media (min-width: 1601px) and (max-width: 1920px) {

    .main-hero {

        /*
         * Основной режим для 1920×1080.
         *
         * Hero не получает 100vh.
         * Высота ограничена оставшимся пространством.
         */

        min-height:
            min(
                750px,
                calc(100vh - 145px)
            );

        padding:
            55px
            0
            55px;
    }


    .main-hero-grid {

        width:
            min(
                calc(100% - 80px),
                1500px
            );

        gap:
            70px;
    }


    .main-hero-title {

        font-size:
            clamp(
                60px,
                3.9vw,
                76px
            );

        margin-bottom:
            22px;
    }


    .main-hero-subtitle {

        max-width:
            680px;

        font-size:
            17px;

        line-height:
            1.6;
    }


    .main-feature {

        min-height:
            64px;

        font-size:
            14px;
    }


    .main-btn {

        min-height:
            52px;

        font-size:
            14px;
    }
}


/* =========================================================
   21. 1441–1600
   ========================================================= */

@media (min-width: 1441px) and (max-width: 1600px) {

    .main-hero {

        min-height:
            min(
                730px,
                calc(100vh - 140px)
            );

        padding:
            60px
            0
            55px;
    }


    .main-hero-grid {

        width:
            min(
                calc(100% - 70px),
                1420px
            );

        gap:
            60px;
    }


    .main-hero-title {

        font-size:
            68px;
    }


    .main-hero-subtitle {

        font-size:
            17px;
    }


    .main-feature {

        min-height:
            65px;
    }
}


/* =========================================================
   22. 1301–1440
   ========================================================= */

@media (min-width: 1301px) and (max-width: 1440px) {

    .main-hero {

        min-height:
            min(
                700px,
                calc(100vh - 135px)
            );

        padding:
            58px
            0
            52px;
    }


    .main-hero-grid {

        width:
            min(
                calc(100% - 56px),
                1320px
            );

        gap:
            52px;
    }


    .main-hero-title {

        font-size:
            64px;

        margin-bottom:
            22px;
    }


    .main-hero-subtitle {

        font-size:
            16px;
    }


    .main-feature {

        min-height:
            63px;

        font-size:
            13px;
    }


    .main-btn {

        min-height:
            52px;
    }
}


/* =========================================================
   23. 1101–1300
   ========================================================= */

@media (min-width: 1101px) and (max-width: 1300px) {

    .main-hero {

        min-height:
            min(
                670px,
                calc(100vh - 135px)
            );

        padding:
            55px
            0
            50px;
    }


    .main-hero-grid {

        width:
            min(
                calc(100% - 40px),
                1180px
            );

        grid-template-columns:
            minmax(0, 1.6fr)
            minmax(185px, 0.7fr)
            minmax(210px, 0.85fr);

        gap:
            40px;
    }


    .main-hero-title {

        font-size:
            clamp(
                50px,
                4.7vw,
                62px
            );

        margin-bottom:
            22px;
    }


    .main-hero-subtitle {

        font-size:
            16px;

        line-height:
            1.62;
    }


    .main-feature {

        min-height:
            60px;

        padding-left:
            31px;

        font-size:
            13px;
    }


    .main-btn {

        min-height:
            51px;

        font-size:
            14px;
    }
}


/* =========================================================
   24. TABLET LANDSCAPE
   901–1100
   ========================================================= */

@media (min-width: 901px) and (max-width: 1100px) {

    .main-hero {

        min-height:
            auto;

        height:
            auto;

        padding:
            85px
            0
            65px;

        overflow:
            visible;

        text-align:
            center;
    }


    .main-hero-grid {

        width:
            min(
                calc(100% - 42px),
                920px
            );

        grid-template-columns:
            1fr 1fr;

        grid-template-areas:
            "left left"
            "center right";

        gap:
            42px;

        align-items:
            start;
    }


    .main-hero-left {

        grid-area:
            left;

        max-width:
            850px;

        margin:
            0 auto;

        text-align:
            center;
    }


    .main-hero-title {

        font-size:
            clamp(
                48px,
                6vw,
                66px
            );

        text-align:
            center;
    }


    .main-hero-subtitle {

        margin:
            0 auto;

        text-align:
            center;
    }


    .main-hero-center {

        grid-area:
            center;

        max-width:
            360px;

        justify-self:
            end;

        text-align:
            center;
    }


    .main-hero-right {

        grid-area:
            right;

        max-width:
            380px;

        justify-self:
            start;

        text-align:
            center;
    }


    .main-btn {

        min-height:
            54px;
    }
}


/* =========================================================
   25. TABLET
   768–900
   ========================================================= */

@media (min-width: 768px) and (max-width: 900px) {

    .main-hero {

        min-height:
            auto;

        height:
            auto;

        padding:
            80px
            0
            60px;

        overflow:
            visible;

        text-align:
            center;
    }


    .main-hero-grid {

        width:
            min(
                calc(100% - 36px),
                720px
            );

        grid-template-columns:
            1fr;

        grid-template-areas:
            "left"
            "center"
            "right";

        gap:
            38px;
    }


    .main-hero-left,
    .main-hero-center,
    .main-hero-right {

        width:
            100%;

        max-width:
            100%;

        margin:
            0 auto;

        justify-self:
            center;

        text-align:
            center;
    }


    .main-hero-left {

        grid-area:
            left;
    }


    .main-hero-center {

        grid-area:
            center;

        max-width:
            460px;

        align-items:
            center;
    }


    .main-hero-right {

        grid-area:
            right;

        max-width:
            620px;

        align-items:
            center;
    }


    .main-hero-title {

        font-size:
            clamp(
                42px,
                7vw,
                58px
            );

        letter-spacing:
            -2px;

        text-align:
            center;
    }


    .main-hero-subtitle {

        max-width:
            680px;

        margin:
            0 auto;

        font-size:
            16px;

        text-align:
            center;
    }


    .main-feature {

        text-align:
            center;
    }


    .home .services-main {

        padding-top:
            65px;
    }
}


/* =========================================================
   26. MOBILE
   ≤767
   ВСЁ ПО ЦЕНТРУ
   ========================================================= */

@media (max-width: 767px) {

    .main-hero {

        min-height:
            auto;

        height:
            auto;

        padding:
            65px
            0
            45px;

        overflow:
            visible;

        text-align:
            center;
    }


    .main-hero-grid {

        width:
            calc(100% - 30px);

        display:
            grid;

        grid-template-columns:
            1fr;

        grid-template-areas:
            "left"
            "center"
            "right";

        gap:
            30px;

        margin:
            0 auto;

        justify-items:
            center;

        align-items:
            center;
    }


    /* ---------- LEFT ---------- */

    .main-hero-left {

        grid-area:
            left;

        width:
            100%;

        max-width:
            700px;

        margin:
            0 auto;

        text-align:
            center;
    }


    /* ---------- TITLE ---------- */

    .main-hero-title {

        width:
            100%;

        margin:
            0 auto
            20px;

        text-align:
            center;

        font-size:
            clamp(
                34px,
                8vw,
                50px
            );

        line-height:
            1.03;

        letter-spacing:
            -1.4px;

        text-wrap:
            balance;
    }


    .main-hero-title span {

        display:
            block;

        margin-top:
            5px;

        text-align:
            center;
    }


    /* ---------- SUBTITLE ---------- */

    .main-hero-subtitle {

        width:
            100%;

        max-width:
            620px;

        margin:
            0 auto;

        text-align:
            center;

        font-size:
            15px;

        line-height:
            1.65;
    }


    /* ---------- CENTER ---------- */

    .main-hero-center {

        grid-area:
            center;

        width:
            100%;

        max-width:
            430px;

        margin:
            0 auto;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            10px;

        text-align:
            center;
    }


    /* ---------- BUTTONS ---------- */

    .main-btn {

        width:
            100%;

        min-height:
            52px;

        margin:
            0 auto;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        text-align:
            center;

        font-size:
            14px;
    }


    /* ---------- RIGHT ---------- */

    .main-hero-right {

        grid-area:
            right;

        width:
            100%;

        max-width:
            600px;

        margin:
            0 auto;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        text-align:
            center;
    }


    /* ---------- FEATURES ---------- */

    .main-feature {

        width:
            100%;

        min-height:
            62px;

        padding:
            15px
            10px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        text-align:
            center;

        font-size:
            13px;

        line-height:
            1.5;
    }


    /*
     * На телефоне галочка находится
     * рядом с текстом, а не прибита
     * к левому краю блока.
     */

    .main-feature::before {

        position:
            static;

        transform:
            none;

        width:
            21px;

        height:
            21px;

        margin-right:
            9px;

        flex-shrink:
            0;
    }
}


/* =========================================================
   27. MOBILE LARGE
   551–767
   ========================================================= */

@media (min-width: 551px) and (max-width: 767px) {

    .main-hero {

        padding:
            72px
            0
            52px;
    }


    .main-hero-grid {

        width:
            calc(100% - 30px);

        gap:
            30px;
    }


    .main-hero-title {

        font-size:
            clamp(
                38px,
                8vw,
                50px
            );
    }


    .main-hero-subtitle {

        font-size:
            15px;
    }


    .main-hero-center {

        max-width:
            460px;
    }


    .main-hero-right {

        max-width:
            620px;
    }
}


/* =========================================================
   28. MOBILE 421–550
   ========================================================= */

@media (min-width: 421px) and (max-width: 550px) {

    .main-hero {

        padding:
            65px
            0
            45px;
    }


    .main-hero-grid {

        width:
            calc(100% - 24px);

        gap:
            27px;
    }


    .main-hero-title {

        font-size:
            clamp(
                34px,
                10vw,
                44px
            );

        letter-spacing:
            -1.2px;
    }


    .main-hero-subtitle {

        font-size:
            14px;
    }


    .main-hero-center {

        max-width:
            430px;
    }


    .main-btn {

        min-height:
            50px;

        font-size:
            14px;
    }


    .main-feature {

        min-height:
            58px;

        padding:
            13px
            8px;

        font-size:
            12.5px;
    }
}


/* =========================================================
   29. MOBILE 361–420
   ========================================================= */

@media (min-width: 361px) and (max-width: 420px) {

    .main-hero {

        padding:
            58px
            0
            40px;
    }


    .main-hero-grid {

        width:
            calc(100% - 20px);

        gap:
            24px;
    }


    .main-hero-title {

        font-size:
            32px;

        letter-spacing:
            -0.9px;
    }


    .main-hero-subtitle {

        font-size:
            13.5px;
    }


    .main-btn {

        min-height:
            48px;

        font-size:
            13.5px;
    }


    .main-feature {

        min-height:
            55px;

        padding:
            13px
            5px;

        font-size:
            12px;
    }
}


/* =========================================================
   30. MOBILE ≤360
   ========================================================= */

@media (max-width: 360px) {

    .main-hero {

        padding:
            50px
            0
            35px;
    }


    .main-hero-grid {

        width:
            calc(100% - 16px);

        gap:
            22px;
    }


    .main-hero-title {

        font-size:
            29px;

        letter-spacing:
            -0.7px;
    }


    .main-hero-subtitle {

        font-size:
            13px;

        line-height:
            1.6;
    }


    .main-btn {

        min-height:
            46px;

        font-size:
            13px;

        padding:
            11px
            12px;
    }


    .main-feature {

        min-height:
            53px;

        padding:
            12px
            3px;

        font-size:
            11.5px;
    }


    .main-feature::before {

        width:
            18px;

        height:
            18px;

        font-size:
            10px;
    }


    .services-main-title.home {

        font-size:
            25px;
    }
}


/* =========================================================
   31. TOUCH DEVICES
   ========================================================= */

@media (hover: none) {

    .main-btn-primary:hover,
    .main-btn-outline:hover {

        transform:
            none;
    }


    .main-btn-primary:active,
    .main-btn-outline:active {

        transform:
            scale(0.985);
    }
}


/* =========================================================
   32. REDUCED MOTION
   ========================================================= */

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

    .main-btn,
    .main-feature {

        transition:
            none;
    }
}


/* =========================================================
   33. DARK THEME
   ========================================================= */

body.dark-theme .main-hero {

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(37, 99, 235, 0.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(59, 130, 246, 0.10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #111827 0%,
            #0f141c 100%
        );
}


body.dark-theme .main-hero::before {

    opacity:
        0.18;

    background-image:
        linear-gradient(
            rgba(148, 163, 184, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(148, 163, 184, 0.04) 1px,
            transparent 1px
        );
}


body.dark-theme .main-hero-title {

    color:
        #f8fafc;
}


body.dark-theme .main-hero-title span {

    color:
        #60a5fa;
}


body.dark-theme .main-hero-subtitle {

    color:
        #cbd5e1;
}


body.dark-theme .main-feature {

    color:
        #e2e8f0;

    border-color:
        #293241;
}


body.dark-theme .main-feature:first-child {

    border-color:
        #293241;
}


body.dark-theme .main-feature::before {

    background:
        rgba(34, 197, 94, 0.12);

    color:
        #4ade80;
}


body.dark-theme .main-btn-outline {

    color:
        #60a5fa;

    background:
        rgba(24, 29, 37, 0.8);

    border-color:
        rgba(96, 165, 250, 0.45);
}


body.dark-theme .main-btn-outline:hover {

    color:
        #ffffff;

    background:
        #2563eb;

    border-color:
        #2563eb;
}


body.dark-theme .home .services-main {

    background:
        #151a22;
}


body.dark-theme .services-main-title.home {

    color:
        #f1f5f9;
}


/* =========================================================
   34. FINAL OVERFLOW PROTECTION
   ========================================================= */

.main-hero,
.main-hero-grid,
.main-hero-left,
.main-hero-center,
.main-hero-right {

    min-width:
        0;
}


.main-hero-title,
.main-hero-subtitle,
.main-feature,
.main-btn {

    max-width:
        100%;

    overflow-wrap:
        break-word;

    word-break:
        normal;
}


/* =========================================================
   35. PRINT
   ========================================================= */

@media print {

    html,
    body {

        overflow:
            visible;
    }


    .main-hero {

        min-height:
            auto;

        height:
            auto;

        padding:
            40px 0;

        background:
            #ffffff;

        overflow:
            visible;
    }


    .main-hero::before {

        display:
            none;
    }


    .main-btn {

        box-shadow:
            none;
    }


    .main-hero-grid {

        display:
            block;

        width:
            100%;
    }


    .main-hero-center,
    .main-hero-right {

        margin-top:
            30px;
    }
}