/* =========================================================
   GEO-ENGINEERING
   LANDING PAGE
========================================================= */


/* =========================================================
   BASE
========================================================= */

body.home {

    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    overflow-x: hidden;
    overflow-y: auto;

    background: #050A14;

}


body.home * {

    box-sizing: border-box;

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 768px) {


    /* =====================================================
       SCROLL
    ===================================================== */

    html {

        scroll-behavior: smooth;

    }


    body.home {

        scroll-behavior: smooth;

    }


    body.home section {

        height: auto !important;

        min-height: 0 !important;

        overflow: visible !important;

        scroll-margin-top: 90px;

    }


    /* =====================================================
       HEADER
    ===================================================== */

    body.home .header {

        position: fixed;

        top: 0;
        left: 0;
        right: 0;

        z-index: 1000;

    }



    /* =====================================================
       HERO
    ===================================================== */

    body.home .hero {

        min-height: min(100svh, 1000px) !important;

        height: auto !important;

        padding: 0 0 44px;

        display: flex;

        flex-direction: column;

        justify-content: center;

    }


    body.home .hero-container {

        width: min(1400px, 100%);

        margin: 0 auto !important;

        padding: clamp(100px, 7vw + 13px, 122px) 40px 0 !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        align-items: center !important;

        gap: clamp(30px, 4vw, 72px);

        position: relative !important;

        top: 0 !important;

        transform: none !important;

    }


    body.home .hero-content {

        position: relative !important;

        top: 0 !important;

        max-width: 860px;

        z-index: 3;
        

    }





    body.home .hero h1 {

    /* Line breaks are explicit <br> tags in the markup;
       wide enough that each intended line doesn't wrap again. */
    max-width: 820px;

    position:relative;

    top:0;

    font-family:"Inter", sans-serif;

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

    line-height:1.02;

    letter-spacing:-0.045em;

    margin-bottom:34px;

}


    body.home .hero-text {

    position:relative;

    top:0;

    max-width:700px;

    font-size:clamp(18px, 1.3vw, 21px);

    line-height:1.6;

    margin-bottom:40px;

}


    body.home .hero-buttons {

        display: flex;

        gap: 18px;

        flex-wrap: wrap;

        margin-bottom: 0;

        transform: none !important;

        position:relative;
    top:0;

    }


    body.home .hero > .container:last-child {

        width: min(1400px, 100%);

        /* Pushes the statistics row down to the bottom of the hero,
           whatever height the viewport happens to be. */
        margin: auto auto 0 !important;

        padding: 0 40px 10px !important;

    }


    /* =====================================================
       HERO STATISTICS
    ===================================================== */

body.home .hero-stats{

    position:relative;

    top:0;

    margin-top:0;

    padding-top:22px;

    display:grid;

    grid-template-columns:1fr 1fr auto 1fr 1fr;

    align-items:start;

    gap:20px;

}


    /* =====================================================
       ABOUT
    ===================================================== */

    body.home .about {

        height: auto !important;

        min-height: 0 !important;

        /* Same padding as Directions/Projects so the gap between every
           section on the page matches (Projects→Contacts reference). */
        padding: clamp(100px, 9vw, 145px) 0;

        display: block !important;

    }


    body.home .about > .container {

        height: auto !important;

        min-height: 0 !important;

        padding-top: 0 !important;

        padding-bottom: 0 !important;

    }


    body.home .about-container {

        height: auto !important;

        grid-template-columns:
            minmax(360px, .72fr)
            minmax(0, 1fr);

        gap: clamp(45px, 6vw, 100px);

        align-items: start;

    }


    /* =====================================================
       DIRECTIONS
    ===================================================== */

    body.home .directions {

        height: auto !important;

        min-height: 0 !important;

        padding: clamp(100px, 9vw, 145px) 0;

        display: block !important;

        overflow: visible !important;

    }


    body.home .directions > .container {

        width: min(1400px, 100%);

        height: auto !important;

        min-height: 0 !important;

        margin: 0 auto;

        padding-top: 0 !important;

        padding-bottom: 0 !important;

    }


    /* Заголовок */

    body.home .directions .section-title {

        max-width: 1050px;

        margin-left: auto !important;

        margin-right: auto !important;

        text-align: center !important;

    }


    /* Описание */

    body.home .directions .section-subtitle {

        max-width: 1040px;

        margin-left: auto !important;

        margin-right: auto !important;

        text-align: center !important;

    }


    /* Каталог направлений: заголовок слева, описание справа —
       отменяем общее центрирование только для этой шапки. */

    body.home .directions-head {

        display: flex;

        justify-content: space-between;

        align-items: flex-end;

        gap: 40px;

        margin-bottom: 56px;

    }

    body.home .directions-head .section-title {

        margin: 0 !important;

        text-align: left !important;

        max-width: 560px;

    }

    body.home .directions-intro {

        margin: 0 !important;

        max-width: 300px;

        text-align: left;

        font-size: 16px;

        line-height: 1.75;

        color: #A8B4C4;

        padding-bottom: 8px;

    }


    /* Содержимое карточек */

    body.home .direction-content {

    text-align: left;

    align-items: flex-start;

}


body.home .direction-content h3,

body.home .direction-content p {

    text-align: left;

}


    /* =====================================================
       PROJECTS
    ===================================================== */

    body.home .projects {

        height: auto !important;

        min-height: 0 !important;

        padding: clamp(100px, 9vw, 145px) 0;

        display: block !important;

        overflow: visible !important;

    }


    body.home .projects > .container {

        width: min(1400px, 100%);

        height: auto !important;

        min-height: 0 !important;

        margin: 0 auto;

        padding-top: 0 !important;

        padding-bottom: 0 !important;

    }


    body.home .projects-header {

        align-items: center;

    }


    body.home .projects-title-wrap {

        max-width: 1050px;

        margin: 0 auto;

        text-align: center;

    }


    body.home .projects .section-title,

    body.home .projects-intro {

        text-align: center !important;

        margin-left: auto !important;

        margin-right: auto !important;

    }


    body.home .projects-intro {

        max-width: 920px;

    }


    /* =====================================================
       CONTACTS
    ===================================================== */

    body.home .contacts {

        height: auto !important;

        min-height: 0 !important;

        padding: clamp(100px, 9vw, 135px) 0 0;

        display: block !important;

        position: relative !important;

        background: #050A14 !important;

        border-radius: 0 0 64px 64px !important;

        overflow: hidden !important;

        margin-bottom: -64px !important;

        z-index: 2 !important;

    }


    body.home .contacts > .container {

        height: auto !important;

        min-height: 0 !important;

        padding-top: 0 !important;

        padding-bottom: 64px !important;

    }


    /* Заголовок контактов */

    body.home .contacts-top {

        max-width: 900px;

        margin: 0 auto 50px !important;

        text-align: center;

        transform: none !important;

    }


    body.home .contacts-top h2,

    body.home .contacts-top p {

        text-align: center !important;

        margin-left: auto !important;

        margin-right: auto !important;

    }


    /* Карточка + карта */

    body.home .contacts-grid {

        margin-bottom: 0;

    }


    /* =====================================================
       FOOTER
    ===================================================== */

    body.home .footer {

        position: relative !important;

        z-index: 1 !important;

        width: 100% !important;

        height: 400px !important;
        min-height: 400px !important;

        margin-top: 0 !important;

        padding: 0 !important;

        background-image:
            url("../images/footer-bg.webp?v=3") !important;

        background-position: center !important;

        background-size: cover !important;

        background-repeat: no-repeat !important;

        background-color: rgba(0,0,0,.25) !important;
        background-blend-mode: multiply;

        border: none !important;

        border-radius: 0 !important;

        overflow: hidden !important;

        box-shadow: none !important;

    }


    /* Убираем старую псевдотекстуру футера */

    body.home .footer::before {

        display: none !important;

    }


    /* Контент футера — управляется footer.css */

    body.home .footer-bottom p {

        color:#ffffff !important;

        font-size: 14px !important;

        font-weight: 400 !important;

        letter-spacing: .15px !important;

    }


    /* =====================================================
       SCROLL REVEAL
    ===================================================== */

    body.home .landing-reveal {

        opacity: 1;

        transform: none;

        filter: none;

    }


    body.home .landing-reveal.landing-in {

        opacity: 1;

        transform: none;

        filter: none;

    }


    /* Последовательное появление */

    body.home .landing-stagger-1 {
        transition-delay: .06s;
    }

    body.home .landing-stagger-2 {
        transition-delay: .12s;
    }

    body.home .landing-stagger-3 {
        transition-delay: .18s;
    }

    body.home .landing-stagger-4 {
        transition-delay: .24s;
    }

    body.home .landing-stagger-5 {
        transition-delay: .30s;
    }


    /* =====================================================
       PARALLAX
    ===================================================== */

    body.home .landing-parallax {

        transition: transform .12s linear;

        will-change: transform;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 992px) and (hover: none) and (pointer: coarse) {


    body.home {

        font-family:
            "Inter",
            system-ui,
            -apple-system,
            "Segoe UI",
            sans-serif;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    html,
    body.home {

        scroll-behavior: auto !important;

    }


    body.home .landing-reveal {

        opacity: 1 !important;

        transform: none !important;

        filter: none !important;

        transition: none !important;

    }

}

@media (min-width: 768px) {

    /* About follows the hero, not another padded section — it gets
       no negative overlap so the Hero→About gap matches every other
       inter-section gap on the page. */
    body.home #about {
        margin-top: 0;
    }

    body.home #directions,
    body.home #projects,
    body.home #contacts {
        margin-top: -130px;
    }

}



/* =========================================================
   GEO — SLIDER NAVIGATION + SITE SCROLLBAR
   Финальная навигация для блоков "Направления" и "Проекты".
========================================================= */

/* ---------------------------------------------------------
   ОБЩИЙ СКРОЛЛБАР САЙТА
   --------------------------------------------------------- */

@media (min-width: 768px) {
    html {
        overflow-x: clip !important;
        overflow-y: auto !important;
        scrollbar-width: thin !important;
        scrollbar-color: #167BFF rgba(255,255,255,.08) !important;
    }

    body.home {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: thin !important;
        scrollbar-color: #167BFF rgba(255,255,255,.08) !important;
    }

    html::-webkit-scrollbar {
        display: block !important;
        width: 8px !important;
        height: 8px !important;
    }

    html::-webkit-scrollbar-track {
        background: rgba(3,9,19,.92) !important;
    }

    html::-webkit-scrollbar-thumb {
        background: #167BFF !important;
        border-radius: 10px !important;
        border: 2px solid rgba(3,9,19,.92) !important;
        box-shadow: 0 0 10px rgba(22,123,255,.45) !important;
    }

    html::-webkit-scrollbar-thumb:hover {
        background: #3294FF !important;
    }

    body.home::-webkit-scrollbar {
        display: block !important;
        width: 8px !important;
        height: 8px !important;
    }

    body.home::-webkit-scrollbar-track {
        background: rgba(3,9,19,.92) !important;
    }

    body.home::-webkit-scrollbar-thumb {
        background: #167BFF !important;
        border-radius: 10px !important;
        border: 2px solid rgba(3,9,19,.92) !important;
        box-shadow: 0 0 10px rgba(22,123,255,.45) !important;
    }

    body.home::-webkit-scrollbar-thumb:hover {
        background: #3294FF !important;
    }
}

/* ---------------------------------------------------------
   НАПРАВЛЕНИЯ — стрелки строго по бокам карточек
   --------------------------------------------------------- */

@media (min-width: 768px) {
    .directions-slider-wrap {
        position: relative !important;
    }

    .directions-navigation {
        position: absolute !important;
        top: 50% !important;
        left: clamp(-58px, -3.2vw, -28px) !important;
        right: clamp(-58px, -3.2vw, -28px) !important;
        width: auto !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        gap: 0 !important;
        pointer-events: none !important;
        z-index: 20 !important;
    }

    .directions-navigation .swiper-button-prev,
    .directions-navigation .swiper-button-next {
        pointer-events: auto !important;
        flex: 0 0 58px !important;
    }
}

/* ---------------------------------------------------------
   ПРОЕКТЫ — стрелки строго по бокам карточек
   --------------------------------------------------------- */

@media (min-width: 768px) {
    .projects > .container {
        position: relative !important;
    }

    .projects-navigation {
        position: absolute !important;

        top: 56% !important;
        left: clamp(-58px, -3.2vw, -28px) !important;
        right: clamp(-58px, -3.2vw, -28px) !important;

        width: auto !important;
        height: 58px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: translateY(-50%) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        gap: 0 !important;
        pointer-events: none !important;
        z-index: 20 !important;
    }

    .projects-navigation .swiper-button-prev,
    .projects-navigation .swiper-button-next {
        pointer-events: auto !important;

        position: static !important;
        flex: 0 0 58px !important;

        width: 58px !important;
        height: 58px !important;
        margin: 0 !important;

        border-radius: 12px !important;
    }
}

/* ---------------------------------------------------------
   ПЛАНШЕТ
   Стрелки остаются по бокам, но не уходят за экран.
   --------------------------------------------------------- */

@media (min-width: 601px) and (max-width: 992px) {
    .directions-slider-wrap {
        position: relative !important;
    }

    .directions-navigation {
        position: absolute !important;
        top: 50% !important;
        left: 4px !important;
        right: 4px !important;
        width: auto !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        gap: 0 !important;
        pointer-events: none !important;
        z-index: 20 !important;
    }

    .directions-navigation .swiper-button-prev,
    .directions-navigation .swiper-button-next {
        pointer-events: auto !important;
        width: 48px !important;
        height: 48px !important;
    }

    .projects > .container {
        position: relative !important;
    }

    .projects-navigation {
        position: absolute !important;
        top: 58% !important;
        left: 4px !important;
        right: 4px !important;
        width: auto !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        gap: 0 !important;
        pointer-events: none !important;
        z-index: 20 !important;
    }

    .projects-navigation .swiper-button-prev,
    .projects-navigation .swiper-button-next {
        pointer-events: auto !important;
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
    }
}

/* ---------------------------------------------------------
   МОБИЛЬНЫЙ
   Стрелки также по бокам карточки, поверх её краёв.
   --------------------------------------------------------- */

@media (max-width: 600px) {
    .directions-slider-wrap,
    .projects > .container {
        position: relative !important;
    }

    .directions-navigation {
        position: absolute !important;
        top: 50% !important;
        left: 2px !important;
        right: 2px !important;
        width: auto !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        gap: 0 !important;
        pointer-events: none !important;
        z-index: 20 !important;
    }

    .directions-navigation .swiper-button-prev,
    .directions-navigation .swiper-button-next {
        pointer-events: auto !important;
        width: 44px !important;
        height: 44px !important;
    }

    .projects-navigation {
        position: absolute !important;
        top: 58% !important;
        left: 2px !important;
        right: 2px !important;
        width: auto !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        gap: 0 !important;
        pointer-events: none !important;
        z-index: 20 !important;
    }

    .projects-navigation .swiper-button-prev,
    .projects-navigation .swiper-button-next {
        pointer-events: auto !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
    }
}

/* =========================================================
   NARROW DESKTOP / SMALL LAPTOP (768–991px)
   The two-column compositions stack instead of squeezing
   the text column down to one word per line.
========================================================= */

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

    body.home .about-container {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(28px, 4vw, 44px);
    }

    body.home .about-content {
        max-width: none;
    }

    body.home .about-image {
        justify-content: flex-start;
    }

    body.home .about-image img {
        width: min(100%, 520px);
    }

    body.home .hero-content {
        max-width: 100%;
    }

}