/* =========================================================
   NPRCONNECT — DIGITAL PLATFORM

   Основной файл стилей.

   Здесь находятся:
   01. Переменные
   02. Общие настройки
   03. Фон и звёзды
   04. Header
   05. Hero
   06. Земля
   07. Сервисы
   08. About
   09. Навигация
   10. Footer
   11. Анимации
   12. Адаптация
   ========================================================= */


/* =========================================================
   01. ЦВЕТОВЫЕ ПЕРЕМЕННЫЕ
   ========================================================= */

:root {

    --bg:
        #010713;

    --bgLight:
        #021024;

    --panel:
        rgba(3, 17, 35, 0.78);

    --panelDark:
        rgba(2, 12, 27, 0.90);


    /* Основной голубой */

    --cyan:
        #00d7ff;


    /* Вторичный синий */

    --blue:
        #168cff;


    /* Основной текст */

    --text:
        #edf8ff;


    /* Вторичный текст */

    --muted:
        #8ca9c2;


    /* Линии */

    --line:
        rgba(0, 210, 255, 0.42);


    /* Статус online */

    --green:
        #00f6a0;

}


/* =========================================================
   02. ОБЩИЕ НАСТРОЙКИ
   ========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    overflow-x: hidden;

}


/* Основной контейнер */

.container {

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

    margin:
        0 auto;

}


/* =========================================================
   03. ФОН
   ========================================================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -3;


    background:

        radial-gradient(
            ellipse at 80% 50%,
            rgba(0, 110, 255, 0.20),
            transparent 30%
        ),

        radial-gradient(
            ellipse at 20% 70%,
            rgba(0, 204, 255, 0.08),
            transparent 28%
        ),

        linear-gradient(
            180deg,
            #010510,
            #021024 60%,
            #020817
        );

}


/* Технологическая сетка */

body::after {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -2;

    opacity: 0.18;


    background-image:

        linear-gradient(
            rgba(0, 160, 255, 0.04) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0, 160, 255, 0.04) 1px,
            transparent 1px
        );


    background-size:
        48px 48px;


    mask-image:
        linear-gradient(
            #000,
            transparent 92%
        );

}


/* =========================================================
   ЗВЁЗДЫ
   ========================================================= */

.stars {

    position: fixed;

    inset: 0;

    z-index: -1;

    pointer-events: none;

}


.star {

    position: absolute;

    width: 2px;

    height: 2px;

    border-radius: 50%;

    background:
        #9befff;

    box-shadow:
        0 0 9px #00cfff;

    animation:
        pulse 3s infinite;

}


@keyframes pulse {

    0%,
    100% {
        opacity: 0.12;
    }

    50% {
        opacity: 0.85;
    }

}


/* =========================================================
   04. HEADER
   ========================================================= */

.header {

    height: 92px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* ---------------------------------------------------------
   ЛОГОТИП
   --------------------------------------------------------- */

.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    color:
        var(--cyan);

    text-decoration: none;

}


.logoShield {

    width: 46px;

    height: 52px;

    filter:
        drop-shadow(
            0 0 8px
            rgba(0, 215, 255, 0.55)
        );

}


.logoText strong {

    display: block;

    color:
        var(--text);

    font-size: 21px;

    letter-spacing: 2px;

}


.logoText span {

    display: block;

    margin-top: 2px;

    font-size: 9px;

    letter-spacing: 3px;

    color:
        var(--cyan);

}


/* ---------------------------------------------------------
   СТАТУС
   --------------------------------------------------------- */

.systemStatus {

    padding:
        11px 17px;

    border:
        1px solid
        rgba(0, 215, 255, 0.42);

    background:
        rgba(1, 14, 29, 0.62);

    color:
        #c3efff;

    font-size:
        11px;

    letter-spacing:
        1px;

    clip-path:
        polygon(
            10px 0,
            calc(100% - 10px) 0,
            100% 10px,
            100% calc(100% - 10px),
            calc(100% - 10px) 100%,
            10px 100%,
            0 calc(100% - 10px),
            0 10px
        );

}


.statusDot {

    display:
        inline-block;

    width:
        7px;

    height:
        7px;

    margin-right:
        8px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 10px
        var(--green);

}


/* =========================================================
   05. HERO
   ========================================================= */

.hero {

    min-height:
        650px;

    display:
        grid;

    grid-template-columns:
        48% 52%;

    align-items:
        center;

}


/* ---------------------------------------------------------
   ТЕКСТ HERO
   --------------------------------------------------------- */

.heroContent {

    position:
        relative;

    z-index:
        4;

    padding:
        45px 0 70px;

}


.heroKicker {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        27px;

    color:
        #8aaac3;

    font-size:
        13px;

    letter-spacing:
        2px;

}


.heroKicker::before {

    content:
        "";

    width:
        27px;

    height:
        1px;

    background:
        var(--cyan);

    box-shadow:
        0 0 8px
        var(--cyan);

}


.heroKicker::after {

    content:
        "";

    width:
        38px;

    height:
        1px;

    background:
        var(--cyan);

    opacity:
        0.8;

}


/* ---------------------------------------------------------
   ГЛАВНЫЙ ЗАГОЛОВОК
   --------------------------------------------------------- */

.hero h1 {

    margin:
        0;

    font-size:
        clamp(
            46px,
            5.5vw,
            74px
        );

    line-height:
        0.96;

    letter-spacing:
        -3px;

    font-weight:
        900;

    text-transform:
        uppercase;

}


.hero h1 span {

    color:
        var(--cyan);

    text-shadow:
        0 0 30px
        rgba(0, 215, 255, 0.35);

}


/* ---------------------------------------------------------
   ОПИСАНИЕ
   --------------------------------------------------------- */

.heroDescription {

    max-width:
        520px;

    margin:
        30px 0 34px;

    color:
        #b5c9db;

    font-size:
        15px;

    line-height:
        1.75;

}


/* ---------------------------------------------------------
   ГЛАВНАЯ КНОПКА
   --------------------------------------------------------- */

.mainButton {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        20px;

    padding:
        15px 21px;

    color:
        var(--cyan);

    border:
        1px solid
        var(--cyan);

    background:
        rgba(0, 185, 255, 0.07);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        1.3px;

    text-decoration:
        none;

    clip-path:
        polygon(
            12px 0,
            calc(100% - 12px) 0,
            100% 12px,
            100% calc(100% - 12px),
            calc(100% - 12px) 100%,
            12px 100%,
            0 calc(100% - 12px),
            0 12px
        );

    transition:
        0.25s;

}


.mainButton:hover {

    background:
        rgba(0, 215, 255, 0.14);

    box-shadow:
        0 0 28px
        rgba(0, 215, 255, 0.22);

    transform:
        translateY(-2px);

}


/* =========================================================
   06. ЗЕМЛЯ
   ========================================================= */

.heroVisual {

    height:
        650px;

    position:
        relative;

}


/* ---------------------------------------------------------
   ЗЕМЛЯ

   САМА КАРТИНКА:

   assets/earth.jpg

   Чтобы заменить Землю:
   просто замени этот файл.
   --------------------------------------------------------- */

.earth {

    position:
        absolute;

    width:
        650px;

    height:
        650px;

    right:
        -130px;

    top:
        0;

    border-radius:
        50%;

    overflow:
        hidden;


    /*

       Реалистичная текстура Земли.

       Файл:
       assets/earth.jpg

    */

    background-image:
        url("assets/earth.jpg");

    background-size:
        cover;

    background-position:
        center;


    box-shadow:

        inset
        -35px
        -25px
        80px
        rgba(0, 0, 0, 0.75),

        inset
        20px
        15px
        55px
        rgba(0, 130, 255, 0.20),

        -15px
        -10px
        70px
        rgba(0, 130, 255, 0.20),

        0 0 100px
        rgba(0, 100, 255, 0.15);


    transition:
        transform 0.15s
        ease-out;

}


/* ---------------------------------------------------------
   СИНЕЕ ЗАТЕМНЕНИЕ ЗЕМЛИ
   --------------------------------------------------------- */

.earth::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    border-radius:
        50%;


    background:

        radial-gradient(
            circle at 35% 30%,
            transparent 0 25%,
            rgba(0, 15, 40, 0.15) 55%,
            rgba(0, 3, 15, 0.82) 82%,
            rgba(0, 1, 8, 0.98) 100%
        );

}


/* ---------------------------------------------------------
   АТМОСФЕРА
   --------------------------------------------------------- */

.earthGlow {

    position:
        absolute;

    inset:
        -15px;

    border-radius:
        50%;

    pointer-events:
        none;

    box-shadow:

        0 0 15px
        rgba(0, 215, 255, 0.65),

        0 0 40px
        rgba(0, 150, 255, 0.25),

        inset
        10px
        0
        25px
        rgba(0, 215, 255, 0.35);

}


/* =========================================================
   СЕТЕВЫЕ ЛИНИИ НА ЗЕМЛЕ
   ========================================================= */

.network {

    position:
        absolute;

    border:
        1px solid
        rgba(0, 220, 255, 0.75);

    border-radius:
        50%;

    pointer-events:
        none;

    opacity:
        0.7;

}


/* Первая линия */

.networkOne {

    width:
        440px;

    height:
        180px;

    left:
        -50px;

    top:
        230px;

    transform:
        rotate(-12deg);

}


/* Вторая линия */

.networkTwo {

    width:
        520px;

    height:
        220px;

    left:
        70px;

    top:
        170px;

    transform:
        rotate(23deg);

}


/* Третья линия */

.networkThree {

    width:
        330px;

    height:
        210px;

    left:
        170px;

    top:
        320px;

    transform:
        rotate(-50deg);

}


/* =========================================================
   ТОЧКИ СЕТИ
   ========================================================= */

.earthNode {

    position:
        absolute;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #d4fbff;

    box-shadow:
        0 0 10px
        3px var(--cyan);

    z-index:
        5;

}


/* Позиции точек */

.nodeOne {

    left:
        17%;

    top:
        40%;

}


.nodeTwo {

    left:
        39%;

    top:
        27%;

}


.nodeThree {

    left:
        68%;

    top:
        53%;

}


.nodeFour {

    left:
        50%;

    top:
        72%;

}


/* =========================================================
   ТЕХНИЧЕСКИЙ ТЕКСТ
   ========================================================= */

.technicalCode {

    position:
        absolute;

    right:
        0;

    top:
        70px;

    color:
        rgba(42, 199, 255, 0.52);

    font:
        11px/1.85
        Consolas,
        monospace;

    text-shadow:
        0 0 8px
        rgba(0, 190, 255, 0.18);

}


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

.heroPanel {

    position:
        absolute;

    right:
        20px;

    bottom:
        50px;

    padding:
        15px 23px;

    border:
        1px solid
        rgba(0, 215, 255, 0.48);

    background:
        rgba(2, 16, 32, 0.78);

    box-shadow:
        0 0 22px
        rgba(0, 180, 255, 0.08);

}


.heroPanel span {

    display:
        block;

    color:
        #8caac2;

    font-size:
        9px;

    letter-spacing:
        2px;

}


.heroPanel strong {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--cyan);

    font-size:
        12px;

    letter-spacing:
        1px;

}


/* =========================================================
   07. SERVICES
   ========================================================= */

.services {

    padding:
        20px 0 55px;

}


/* ---------------------------------------------------------
   ЗАГОЛОВОК СЕКЦИИ
   --------------------------------------------------------- */

.sectionHeader {

    text-align:
        center;

    margin-bottom:
        34px;

}


.sectionKicker {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-bottom:
        12px;

    color:
        #8aaac3;

    font-size:
        10px;

    letter-spacing:
        2.5px;

}


.sectionKicker::before,
.sectionKicker::after {

    content:
        "";

    width:
        35px;

    height:
        1px;

    background:
        var(--cyan);

    box-shadow:
        0 0 7px
        rgba(0, 215, 255, 0.5);

}


.sectionHeader h2 {

    margin:
        0;

    font-size:
        31px;

    letter-spacing:
        2px;

}


.sectionHeader h2 span {

    color:
        var(--cyan);

    text-shadow:
        0 0 25px
        rgba(0, 215, 255, 0.3);

}


.sectionHeader p {

    max-width:
        520px;

    margin:
        12px auto 0;

    color:
        #7f9bb2;

    font-size:
        13px;

    line-height:
        1.6;

}


/* =========================================================
   СЕТКА СЕРВИСОВ
   ========================================================= */

.servicesGrid {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        24px;

}


/* =========================================================
   КАРТОЧКА СЕРВИСА
   ========================================================= */

.serviceCard {

    position:
        relative;

    min-height:
        245px;

    padding:
        29px;

    border:
        1px solid
        rgba(0, 176, 255, 0.40);

    overflow:
        hidden;

    background:

        linear-gradient(
            135deg,
            rgba(0, 120, 255, 0.08),
            rgba(1, 10, 24, 0.85)
        ),

        radial-gradient(
            circle at 80% 15%,
            rgba(0, 215, 255, 0.10),
            transparent 35%
        );

    color:
        var(--text);

    text-decoration:
        none;

    transition:
        0.3s;

}


/* Световой проход */

.serviceCard::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            120deg,
            transparent 25%,
            rgba(0, 215, 255, 0.09),
            transparent 70%
        );

    transform:
        translateX(-110%);

    transition:
        0.7s;

}


.serviceCard:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--cyan);

    box-shadow:

        0 12px 36px
        rgba(0, 160, 255, 0.14),

        inset
        0 0 35px
        rgba(0, 170, 255, 0.04);

}


.serviceCard:hover::before {

    transform:
        translateX(110%);

}


/* =========================================================
   ИКОНКИ СЕРВИСОВ

   ВАЖНО:

   Все SVG-иконки находятся прямо
   в index.html внутри:

   .serviceIcon

   Чтобы заменить иконку —
   замени SVG внутри этого блока.
   ========================================================= */

.serviceIcon {

    position:
        relative;

    z-index:
        2;

    width:
        54px;

    height:
        54px;

    margin-bottom:
        18px;

    color:
        var(--cyan);

    filter:
        drop-shadow(
            0 0 9px
            rgba(0, 215, 255, 0.42)
        );

}


.serviceIcon svg {

    width:
        52px;

    height:
        52px;

}


/* =========================================================
   ТЕКСТ СЕРВИСА
   ========================================================= */

.serviceContent {

    position:
        relative;

    z-index:
        2;

}


.serviceLabel {

    margin-bottom:
        7px;

    color:
        #6e9bb7;

    font-size:
        9px;

    letter-spacing:
        2px;

}


.serviceContent h3 {

    margin:
        0 0 9px;

    font-size:
        21px;

    letter-spacing:
        1px;

}


.serviceContent p {

    max-width:
        430px;

    margin:
        0;

    color:
        #91a9bf;

    font-size:
        13px;

    line-height:
        1.6;

}


/* =========================================================
   СТРЕЛКА
   ========================================================= */

.serviceArrow {

    position:
        absolute;

    right:
        28px;

    bottom:
        20px;

    color:
        var(--cyan);

    font-size:
        27px;

    z-index:
        3;

}


/* =========================================================
   СТАТУС СЕРВИСА
   ========================================================= */

.serviceStatus {

    position:
        absolute;

    right:
        28px;

    top:
        27px;

    color:
        #00e6a0;

    font-size:
        9px;

    letter-spacing:
        1.5px;

}


/* =========================================================
   НЕАКТИВНЫЕ СЕРВИСЫ
   ========================================================= */

.serviceSoon {

    opacity:
        0.58;

    border-style:
        dashed;

}


.serviceSoon .serviceIcon {

    color:
        #6e8ca4;

    filter:
        none;

}


.serviceSoon .serviceStatus {

    color:
        #7190a8;

}


/* =========================================================
   08. ABOUT
   ========================================================= */

.about {

    display:
        grid;

    grid-template-columns:
        45% 55%;

    gap:
        50px;

    align-items:
        center;

    padding:
        80px 0;

    border-top:
        1px solid
        rgba(0, 180, 255, 0.16);

    border-bottom:
        1px solid
        rgba(0, 180, 255, 0.16);

}


/* =========================================================
   ДЕКОРАТИВНАЯ ЛЕВАЯ ЧАСТЬ
   ========================================================= */

.aboutVisual {

    position:
        relative;

    height:
        300px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(0, 180, 255, 0.18);

    background:
        rgba(2, 15, 30, 0.35);

}


.aboutNumber {

    position:
        absolute;

    left:
        20px;

    bottom:
        -30px;

    color:
        rgba(0, 215, 255, 0.04);

    font-size:
        180px;

    font-weight:
        900;

    letter-spacing:
        -15px;

}


/* Декоративные линии */

.aboutLine {

    position:
        absolute;

    height:
        1px;

    background:
        var(--cyan);

    opacity:
        0.35;

    box-shadow:
        0 0 10px
        var(--cyan);

}


.lineOne {

    width:
        70%;

    top:
        35%;

    left:
        10%;

    transform:
        rotate(-15deg);

}


.lineTwo {

    width:
        55%;

    top:
        55%;

    left:
        25%;

    transform:
        rotate(22deg);

}


.lineThree {

    width:
        35%;

    top:
        70%;

    left:
        5%;

    transform:
        rotate(-35deg);

}


/* =========================================================
   ABOUT — ТЕКСТ
   ========================================================= */

.aboutContent {

    padding:
        10px 0;

}


.aboutContent h2 {

    margin:
        0 0 25px;

    font-size:
        38px;

    line-height:
        1.05;

    letter-spacing:
        -1px;

}


.aboutContent h2 span {

    display:
        block;

    color:
        var(--cyan);

}


.aboutContent p {

    max-width:
        560px;

    margin:
        0 0 17px;

    color:
        #91a9bf;

    font-size:
        14px;

    line-height:
        1.75;

}


/* =========================================================
   ABOUT — СТАТИСТИКА
   ========================================================= */

.aboutStats {

    display:
        flex;

    gap:
        35px;

    margin-top:
        30px;

}


.aboutStats div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.aboutStats strong {

    color:
        var(--cyan);

    font-size:
        22px;

}


.aboutStats span {

    color:
        #6e899f;

    font-size:
        8px;

    letter-spacing:
        1px;

}


/* =========================================================
   09. NAVIGATION
   ========================================================= */

.navigation {

    padding:
        65px 0;

}


.navigationInner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    padding:
        35px;

    border:
        1px solid
        rgba(0, 180, 255, 0.28);

    background:
        rgba(2, 15, 30, 0.50);

}


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

.navigation h2 {

    margin:
        0;

    font-size:
        31px;

    line-height:
        1;

}


.navigation h2 span {

    color:
        var(--cyan);

}


/* =========================================================
   КНОПКИ НАВИГАЦИИ
   ========================================================= */

.navigationButtons {

    display:
        flex;

    gap:
        10px;

    flex-wrap:
        wrap;

}


.outlineButton {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        15px;

    padding:
        13px 17px;

    color:
        #8aaac3;

    border:
        1px solid
        rgba(0, 180, 255, 0.28);

    background:
        rgba(0, 120, 255, 0.03);

    font-size:
        10px;

    letter-spacing:
        1px;

    text-decoration:
        none;

    transition:
        0.2s;

}


.outlineButton span {

    color:
        var(--cyan);

    font-size:
        17px;

}


.outlineButton:hover {

    color:
        var(--cyan);

    border-color:
        var(--cyan);

    background:
        rgba(0, 180, 255, 0.07);

    box-shadow:
        0 0 17px
        rgba(0, 200, 255, 0.10);

}


/* =========================================================
   10. FOOTER
   ========================================================= */

footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        27px 0 35px;

    border-top:
        1px solid
        rgba(0, 180, 255, 0.20);

    color:
        #69859e;

    font-size:
        10px;

}


/* =========================================================
   FOOTER — БРЕНД
   ========================================================= */

.footerBrand strong {

    display:
        block;

    color:
        var(--cyan);

    font-size:
        16px;

    letter-spacing:
        2px;

}


.footerBrand span {

    display:
        block;

    margin-top:
        3px;

    font-size:
        8px;

    letter-spacing:
        3px;

}


/* =========================================================
   FOOTER — ЦЕНТРАЛЬНЫЙ ТЕКСТ
   ========================================================= */

.footerCopyright {

    text-align:
        center;

    line-height:
        1.7;

}


/* =========================================================
   СОЦИАЛЬНЫЕ ИКОНКИ

   ССЫЛКИ находятся в index.html.
   ========================================================= */

.socialLinks {

    display:
        flex;

    gap:
        8px;

}


.socialLinks a {

    width:
        42px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    color:
        #7193ac;

    border:
        1px solid
        rgba(0, 180, 255, 0.28);

    text-decoration:
        none;

    transition:
        0.2s;

}


.socialLinks a:hover {

    color:
        var(--cyan);

    border-color:
        var(--cyan);

    box-shadow:
        0 0 15px
        rgba(0, 200, 255, 0.14);

}


/* =========================================================
   11. АНИМАЦИИ ПОЯВЛЕНИЯ
   ========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(18px);

    transition:
        opacity 0.75s ease,
        transform 0.75s ease;

}


.reveal.show {

    opacity:
        1;

    transform:
        none;

}


/* =========================================================
   12. АДАПТАЦИЯ — ПЛАНШЕТ
   ========================================================= */

@media (max-width: 900px) {


    /* HERO */

    .hero {

        grid-template-columns:
            1fr;

    }


    .heroContent {

        padding-top:
            60px;

    }


    .heroVisual {

        height:
            470px;

    }


    .earth {

        width:
            500px;

        height:
            500px;

        right:
            -50px;

        top:
            -5px;

    }


    /* SERVICES */

    .servicesGrid {

        grid-template-columns:
            1fr 1fr;

    }


    /* ABOUT */

    .about {

        grid-template-columns:
            1fr;

    }


    /* NAVIGATION */

    .navigationInner {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


/* =========================================================
   АДАПТАЦИЯ — ТЕЛЕФОН
   ========================================================= */

@media (max-width: 620px) {


    /* ОСНОВНОЙ КОНТЕЙНЕР */

    .container {

        width:
            calc(100% - 28px);

    }


    /* HEADER */

    .header {

        height:
            76px;

    }


    .logoText strong {

        font-size:
            17px;

    }


    .logoText span {

        font-size:
            7px;

        letter-spacing:
            2px;

    }


    .systemStatus {

        padding:
            8px 10px;

        font-size:
            8px;

    }


    /* HERO */

    .heroContent {

        padding-top:
            45px;

    }


    .hero h1 {

        font-size:
            42px;

        letter-spacing:
            -2px;

    }


    .heroDescription {

        font-size:
            14px;

    }


    .heroVisual {

        height:
            380px;

    }


    .earth {

        width:
            390px;

        height:
            390px;

        right:
            -75px;

    }


    .technicalCode {

        display:
            none;

    }


    .heroPanel {

        right:
            0;

        bottom:
            20px;

    }


    /* SERVICES */

    .servicesGrid {

        grid-template-columns:
            1fr;

    }


    .serviceCard {

        min-height:
            230px;

    }


    /* ABOUT */

    .about {

        padding:
            55px 0;

    }


    .aboutVisual {

        height:
            220px;

    }


    .aboutContent h2 {

        font-size:
            31px;

    }


    .aboutStats {

        gap:
            18px;

    }


    /* NAVIGATION */

    .navigation {

        padding:
            45px 0;

    }


    .navigationInner {

        padding:
            25px;

    }


    .navigation h2 {

        font-size:
            27px;

    }


    .navigationButtons {

        width:
            100%;

    }


    .outlineButton {

        flex:
            1;

        justify-content:
            center;

    }


    /* FOOTER */

    footer {

        flex-direction:
            column;

        text-align:
            center;

    }


    .footerCopyright {

        order:
            2;

    }


    .socialLinks {

        order:
            3;

    }

}