@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    /* 1. БАЗОВАЯ ПАЛИТРА (Названия по оттенкам) */
    --gray-950:   #0f172a;      /* Глубокий синий */
    --gray-800:   #1e293b;      /*Темный Грифельный*/
    --gray-700:   #334155;      /* Тёмный серо-синий */
    --gray-400:   #94a3b8;      /* Холодный серый */ 
    --gray-100:   #f1f5f9;      /* серый-светлый */
    --gray-50:    #f8fafc;      /* Ультра-светлый */
    --white:      #ffffff;      /* белый */
    --orange-600: #fc6717;      /* Оранжевый темный */
    --orange-500: #f97316;      /* Базовый оранжевый */
    --orange-100: #f9731633;    /* прозрачный нежный фон (20% opacity) */

    /* 2. СЕМАНТИЧЕСКИЕ ТОКЕНЫ  */
    --color-base:   var(--gray-950);    /* Базовый цвет для заголовков | темных блоков */
    --color-main:   var(--gray-800);    /* Главный цвет текста */
    --color-muted:  var(--gray-400);    /* Второстепенный текст | вторичный фон*/
    --color-grey:   var(--gray-100);    /* Усиленный фон */
    --color-glass:  var(--gray-50);     /* Дополнительный текст | легкий фон страницы */
    --color-white:  var(--white);       /* Белый цвет */

    --color-accent-hover:   var(--orange-600);  /* Ховер цвет*/
    --color-accent-main:    var(--orange-500);  /* Брэнд-цвет */
    --color-accent-soft:    var(--orange-100);  /* Мягкий акцент */
    
    /* ГРАНИЦЫ, ДЕКОР, ГЕОМЕТРИЯ */
    --border: rgba(0, 0, 0, 0.06);                       /* Еле заметные линии */ 
    --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 10px 25px rgba(15, 23, 42, 0.1);
    --shadow-lg: 0 30px 60px -12px rgba(15, 23, 42, 0.25), 
                 0 18px 36px -18px rgba(0, 0, 0, 0.3); /* Глубокая "воздушная" тень */

    --radius-lg: 24px;   /* hero, модалки, крупные элементы */
    --radius-md: 12px;   /* карточки, блоки */
    --radius-sm: 8px;    /* кнопки, input */

    
    /* ОТСТУПЫ */
       /* ===== LAYOUT (глобальная структура страницы) ===== */
    --spacing-xxl: clamp(3.5rem, 6vw, 6rem);      /* Очень большие отступы: hero-блоки, ключевые лендинговые секции */
    --spacing-xl:  clamp(2.5rem, 4vw, 4rem);      /* Стандартные отступы между секциями (section → section) */
       /* ===== CONTENT (внутри секций и текстовых блоков) ===== */
    --spacing-lg:  clamp(2.0rem, 3vw, 3rem);      /* Крупные внутренние отступы: между заголовками и крупными блоками */
    --spacing-md:  clamp(1.5rem, 2vw, 2rem);      /* Средние отступы: между H1–H2, H2–текстом, абзацами */
       /* ===== UI (мелкие элементы интерфейса) ===== */
    --spacing-sm:  clamp(1.0rem, 1.5vw, 1.5rem);  /* Малые отступы: карточки, списки, расстояние между элементами внутри компонентов */
    --spacing-xs:  clamp(0.5rem, 1vw, 1rem);      /* Минимальные отступы: кнопки, инпуты, иконки, плотные UI-элементы */
}
::selection {
    background-color: var(--color-accent-main);
    color: var(--color-white);
}

html {
  box-sizing: border-box;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--color-accent-main);
    outline-offset: 2px;
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--color-main);
    line-height: 1.6;
    margin: 0;
    overflow-x: hidden;
}
body .container-component > * {     /* Убираем отступ между шапкой и контентом */
    margin-top: 0 !important;
}

h1, h2, h3, h4, h5 {        /* Базовые настройки для всех заголовков */
    color: var(--color-base);
    margin-top: 0;
    letter-spacing: -0.025em;
    margin-bottom: var(--spacing-sm);
}

/* Дифференциация для "дорогой" иерархии */
h1 { font-weight: 800; line-height: 1.10; font-size: clamp(2.5rem, 6vw, 4rem);}         /* 40px - 64px */
h2 { font-weight: 800; line-height: 1.15; font-size: clamp(1.85rem, 4vw, 2.5rem);}      /* 30px - 40px */
h3 { font-weight: 700; line-height: 1.20; font-size: clamp(1.4rem, 2.5vw, 1.75rem);}     /* 22px - 28px */
h4 { font-weight: 700; line-height: 1.25; font-size: clamp(1.15rem, 1.5vw, 1.35rem);}    /* 18px -> 22px */



p {
    font-size: clamp(0.9375rem, 1.1vw, 1.125rem);
    line-height: 1.65;
    color: var(--color-main);
    /*margin-bottom: var(--spacing-md);  снизу всегда отступ */
}

ul li {
    /*margin-bottom: var(--spacing-sm);*/
}

/* === TEXT COLORS === */
.c-base    { color: var(--color-base); }
.c-main    { color: var(--color-main); }
.c-muted   { color: var(--color-muted); }
.c-glass   { color: var(--color-glass); }
.c-white   { color: var(--color-white); }

    .c-accent-main   { color: var(--color-accent-main); }
.c-accent-hover  { color: var(--color-accent-hover); }
.c-accent-soft   { color: var(--color-accent-soft); }

.c-accent:hover   { color: var(--color-accent-hover); }

/* === BACKGROUND COLORS === */
.bg-base        { background-color: var(--color-base); }
.bg-main        { background-color: var(--color-main); }
.bg-muted       { background-color: var(--color-muted); }
.bg-glass       { background-color: var(--color-glass); }
.bg-white       { background-color: var(--color-white); }
.bg-accent      { background-color: var(--color-accent-main); }
.bg-accent-soft { background-color: var(--color-accent-soft); }

.bg-accent:hover   { background-color: var(--color-accent-hover); }

.radius-lg {border-radius: var(--radius-lg);}
/* === SPACING === */
   /* ===== LAYOUT (глобальная структура страницы) ===== */
.padding-xxl { padding: var(--spacing-xxl); }   /* Очень большие отступы: hero-блоки, ключевые лендинговые секции */
.padding-xl  { padding: var(--spacing-xl); }    /* Стандартные отступы между секциями (section → section) */
   /* ===== CONTENT (внутри секций и текстовых блоков) ===== */
.padding-lg  { padding: var(--spacing-lg); }    /* Крупные внутренние отступы: между заголовками и крупными блоками */
.padding-md  { padding: var(--spacing-md); }    /* Средние отступы: между H1–H2, H2–текстом, абзацами */
    /* ===== UI (мелкие элементы интерфейса) ===== */
.padding-sm  { padding: var(--spacing-sm); }    /* Малые отступы: карточки, списки, расстояние между элементами внутри компонентов */
.padding-xs  { padding: var(--spacing-xs); }    /* Минимальные отступы: кнопки, инпуты, иконки, плотные UI-элементы */

.padding-block-xxl { padding-block: var(--spacing-xxl); }   /* Очень большие отступы: hero-блоки, ключевые лендинговые секции */
.padding-block-xl  { padding-block: var(--spacing-xl); }    /* Стандартные отступы между секциями (section → section) */
   /* ===== CONTENT (внутри секций и текстовых блоков) ===== */
.padding-block-lg  { padding-block: var(--spacing-lg); }    /* Крупные внутренние отступы: между заголовками и крупными блоками */
.padding-block-md  { padding-block: var(--spacing-md); }    /* Средние отступы: между H1–H2, H2–текстом, абзацами */
    /* ===== UI (мелкие элементы интерфейса) ===== */
    .padding-block-sm  { padding-block: var(--spacing-sm); }    /* Малые отступы: карточки, списки, расстояние между элементами внутри компонентов */
.padding-block-xs  { padding-block: var(--spacing-xs); }    /* Минимальные отступы: кнопки, инпуты, иконки, плотные UI-элементы */

.padding-inline-xxl { padding-inline: var(--spacing-xxl); }   /* Очень большие отступы: hero-блоки, ключевые лендинговые секции */
.padding-inline-xl  { padding-inline: var(--spacing-xl); }    /* Стандартные отступы между секциями (section → section) */
   /* ===== CONTENT (внутри секций и текстовых блоков) ===== */
    .padding-inline-lg  { padding-inline: var(--spacing-lg); }    /* Крупные внутренние отступы: между заголовками и крупными блоками */
.padding-inline-md  { padding-inline: var(--spacing-md); }    /* Средние отступы: между H1–H2, H2–текстом, абзацами */
    /* ===== UI (мелкие элементы интерфейса) ===== */
.padding-inline-sm  { padding-inline: var(--spacing-sm); }    /* Малые отступы: карточки, списки, расстояние между элементами внутри компонентов */
.padding-inline-xs  { padding-inline: var(--spacing-xs); }    /* Минимальные отступы: кнопки, инпуты, иконки, плотные UI-элементы */

.margin-bottom-xxl {margin-bottom: var(--spacing-xxl);}
.margin-bottom-xl  {margin-bottom: var(--spacing-xl);}
.margin-bottom-lg  {margin-bottom: var(--spacing-lg);}
.margin-bottom-md  {margin-bottom: var(--spacing-md);}
.margin-bottom-sm  {margin-bottom: var(--spacing-sm);}
.margin-bottom-xs  {margin-bottom: var(--spacing-xs);}

.margin-top-xxl {margin-top: var(--spacing-xxl);}
.margin-top-xl  {margin-top: var(--spacing-xl);}
.margin-top-lg  {margin-top: var(--spacing-lg);}
.margin-top-md  {margin-top: var(--spacing-md);}
.margin-top-sm  {margin-top: var(--spacing-sm);}
.margin-top-xs  {margin-top: var(--spacing-xs);}
/*------------------------------------------------------------------------------*/

.full-bleed {
    position: relative;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.badge {
    display: inline-flex;
    font-size: clamp(0.60rem, 0.6vw, 0.70rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: var(--radius-md);
    color: var(--color-accent-main);
}
.flex-row-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;

    .service-card { /*свойства описаны в .flex-row-container и .grid-cols*/
        display: flex;
        flex-direction: column;
        flex: 1 1 300px;
        p {
            flex-grow: 1; /* Растягивает блок, прижимая ссылку к низу */
        }
    }
}
.grid-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg, 2rem);
    align-items: stretch;
}
.section-blocks {
    padding-block: var(--spacing-xl);
}
.flow--layout > :not(:first-child) {    /* Отступы между крупными секциями на странице */
    margin-block-start: var(--spacing-xxl, 4rem);
}
.flow--content > :not(:first-child) {   /* Отступы между элементами внутри одной секции */
    margin-block-start: var(--spacing-xxs, 2rem);
}
.btn {
    color: var(--color-white); 
    background: var(--orange-500);
    border-radius: var(--radius-md); 
    padding: var(--spacing-xs);
    text-decoration: none; 
    cursor: pointer;
    transition: 0.3s;
    font-weight: 700; 
    text-align: center;
    min-width: 80px;
    white-space: nowrap;
    &:hover {
        background-color: var(--color-accent-hover);
        color: var(--color-glass);
    }
}

/* HERO section */
.hero {
    position: relative;
    overflow: hidden;
    min-height: clamp(580px, 80svh, 900px);
    background: var(--color-base); /* Нижний слой (Фолбек) */
    background-image: 
        linear-gradient(90deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.4) 100%),           /* Верхний слой */
        url('https://hyron.com.ua/images/material/articles/hgl-logistics-vessel-maritime.webp');    /* Средний слой */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.hero-container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: var(--spacing-xxl);
}
.hero-group {
    max-width: clamp(300px, 70vw, 800px);
    margin-left: clamp(1rem, 5vw, 6rem);

        h1 {
            max-width: clamp(18ch, 32ch, 42ch);
            margin-block: var(--spacing-xs) var(--spacing-md);
            color: var(--color-white);
        }
        p {
            max-width: clamp(40ch, 55ch, 65ch);
            color: var(--color-glass);
        }
        .badge {
            padding: 0.5rem 1rem;
            background-color: var(--color-accent-soft);
        }
}

/* Tracking Widget */
.tracking-widget {
    align-self: flex-end;
    margin-top: auto;
    width: 100%;
    max-width: 980px;
    padding: var(--spacing-lg);
    background: var(--color-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

}
.widget-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}
.widget-section {
    flex: 1 1 250px;
    min-width: 0; /* важно */

        h3 {
            font-size: 1rem;
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
}
.btn-group-modes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

    .btn {
        flex: 1;
        min-width: 80px;
        padding: 12px 0;
        border: 1px solid var(--border);
        background: none;
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-weight: 600;
        text-align: center;
        transition: 0.3s;
                color: var(--color-base);
            &:hover,
            &.active {
                background-color: var(--color-base);
                color: var(--color-white);
                border-color: var(--border);
            }
        }
}
.search-box {
    display: flex;
    gap: 10px;
    width: 100%;
    
    input {
        flex: 1;
        min-width: 0;
        padding: 0.75rem 1.25rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-size: 0.938rem;
        outline: none;
        
        &:focus {
            border-color: var(--color-accent-main);
            box-shadow: 0 0 0 1px var(--color-accent-soft); /* Нежное кольцо вокруг */
                }
        }
    .btn {
        padding: 12px 30px;
        border: none;
        border-radius: var(--radius-sm);
    }
}

/* STATS section */
.stat-container {
    padding: var(--spacing-xl);
    background-color: var(--color-grey);
    text-align: center;

    .grid-cols {
        max-width: 1600px;
        margin: 0 auto;
    }
}
.stat-num {
    font-size: 2.625rem;
    font-weight: 900;
    line-height: 1;
}

/* SERVICES section */
.service-card { /*свойства описаны в .flex-row-container и .grid-cols*/
    height: 100%; /* Карточки в одном ряду будут равны самой высокой */
    padding: var(--spacing-sm);
    background: var(--color-glass);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    transition:
        transform 0.4s ease,
        background-color 0.4s ease,
        box-shadow 0.4s ease,
        color 0.4s ease;

    h3, 
    h4 {
        font-size: 1.35rem;
    }
    p {
        font-size: 0.975rem;
    }
    a {
        text-decoration: none;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    &:hover {
        background-color: var(--color-base);
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);

        h3,
        h4,
        p,
        ul {
            color: var(--color-white);
        }        
    }
}
.card-icon {
    font-size: 2.5rem;
    color: var(--color-accent-main);
    margin-bottom: 1.5rem;
}
.card-link {
    display: flex;
    color: var(--color-accent-main);
    font-weight: 600;
    font-size: 0.875rem;
    gap: var(--spacing-xs);
    margin-top: auto;
    justify-content: flex-end;

    i {
        font-size: 0.8rem;
    }
}
/*.service-card ul {
    font-size: 0.875rem; 
    padding-left: 0.9375rem;
    margin-top: 0.9375rem;
} */

/* HOW WE WORK section */
.how-we-work {
    padding-block: var(--spacing-xl);
    background-color: var(--color-grey);
}
.steps-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: var(--spacing-xl);
}
.step-num {
    font-size: 3.75rem;
    font-weight: 900;
    color: rgba(15, 23, 42, 0.05); /* Легкий контур числа */
    line-height: 1;
    margin-bottom: -20px;
    transition: 0.3s;
}
.step-item {
    flex: 1;
    text-align: center;
    padding: 0 20px;
        
        h3 {
            font-size: 1.25rem;
            color: var(--color-base);
            position: relative;
        }
        
        p {
            font-size: 0.875rem;
        }
        &:hover .step-num {
            color: var(--orange-500);
            opacity: 0.2;
        }
}
.step-arrow {
    padding-top: 40px;
    color: #cbd5e1;
    font-size: 20px;
}

/* PARTENRS section */
.partners-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 40px;
    flex-wrap: wrap; /* Чтобы на планшетах не вылезало за края */
}
.partner-logo img { 
    max-width: 180px; 
    max-height: 65px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Эффект по умолчанию: ЧБ и прозрачность */
    filter: grayscale(1); 
    opacity: 0.7;
    transition:
        filter 0.5s cubic-bezier(0.23, 1, 0.32, 1),
        opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1),
        transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
/* ...а тот, на который навели — становится ярким и цветным */
.partners-row .partner-logo img:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.10); /* Заметное, но мягкое увеличение */
}

/* ARTICLES section */
.article-card { 
    border-radius: var(--radius-sm); 
    overflow: hidden; 
    box-shadow: var(--shadow-md); 
    transition: 0.3s; 
        
        &:hover { 
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
        }
}
.article-img img {
    width: 100%;
    height: 220px; /* Жесткий контроль высоты для идеальной сетки */
    object-fit: cover; 
    display: block;
}
.article-body { 
    padding: var(--spacing-sm);
    
    h4 { 
        font-size: 1.125rem; 
        margin: 10px 0; 
        color: var(--color-base); 
    }

    p { 
        font-size: 0.875rem; 
    }
}
.read-more {
    font-weight: 700; 
    color: var(--color-accent-main);
    text-decoration: none;
    font-size: 0.875rem; 
}
.all-articles-btn {
    text-align: center;
    
    .btn {
        border: 2px solid var(--color-base); 
        color: var(--color-base);
        background-color: var(--color-white);
    }
}
.date { 
    font-size: 0.75rem; 
    color: var(--color-muted); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* CTA section*/
.cta-box { 
    background: var(--color-base);
    padding: var(--spacing-xl); 
    border-radius: var(--radius-lg);
    text-align: center; 
    color: var(--color-white); 
        
        h2 { color: var(--white); }
         p { opacity: 0.8; margin-bottom: 35px; color: var(--color-white); }
}
.cta-actions {
    display: flex;
    align-items: center;
    justify-content: center; /* Центрирует кнопки */
    gap: 20px;               /* Создает правильное расстояние между ними */
    margin-top: 30px;        /* Отделяет кнопки от текста выше */
}
.cta-or { 
    margin-right: 20px; 
    opacity: 0.5; 
}
.btn-link { 
    color: var(--color-white); 
    text-decoration: underline; 
    font-weight: 600; 
}