/* ПОДКЛЮЧЕНИЕ ШРИФТОВ */
@font-face {
    font-family: "Titillium Web";
    src:
        url("../fonts/TitilliumWeb-Regular.woff2") format("woff2"),
        url("../fonts/TitilliumWeb-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Titillium Web";
    src:
        url("../fonts/TitilliumWeb-SemiBold.woff2") format("woff2"),
        url("../fonts/TitilliumWeb-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Yanone Kaffeesatz";
    src:
        url("../fonts/YanoneKaffeesatz-Bold.woff2") format("woff2"),
        url("../fonts/YanoneKaffeesatz-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* ---------- */

/* СБРОС СТИЛЕЙ И МИНИМАЛЬНАЯ НОРМАЛИЗАЦИЯ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: var(--line-height-base);
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}
/* --------- */

/* ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ */
:root {
    --font-base: "Titillium Web", Arial, sans-serif;
    --font-heading: "Yanone Kaffeesatz", "Titillium Web", Arial, sans-serif;

    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-dark: #484848;
    --color-gray-light: #EDEDED;

    --color-bg: var(--color-white);
    --color-text: var(--color-black);
    --color-muted: var(--color-gray-dark);
    --color-surface: var(--color-gray-light);

    --font-size-xs: clamp(16px, 1.8vw, 24px);
    --font-size-sm: clamp(20px, 3vw, 36px);
    --font-size-md: clamp(24px, 4vw, 42px);
    --font-size-lg: clamp(36px, 5vw, 78px);
    --font-size-xl: clamp(54px, 16vw, 220px);

    --line-height-tight: 2;
    --line-height-base: 1.2;

    --container-width: 1600px;

    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 48px;
    --space-xl: 96px;
}
/* ---------- */

/* БАЗОВЫЕ СТИЛИ */
.container {
    width: min(100% - var(--space-md) * 2, var(--container-width));
    margin-inline: auto;
}

.js .reveal {
    opacity: 0;
    transition: opacity 1.4s ease;
}

.js .reveal.is-visible {
    opacity: 1;
}

.js .header.reveal {
    transition-delay: 0.15s;
}

.js .details.reveal,
.js .development-notice.reveal,
.js .footer.reveal {
    transition-delay: 0.2s;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}
/* ---------- */

.header {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-lg);
}

.header__title {
    font-family: var(--font-base);
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: var(--line-height-base);
    color: var(--color-muted);
    text-align: center;
}


.hero {
    position: relative;
}

.hero__img {
    display: block;
    width: 100%;
    height: auto;
}

.hero__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    color: var(--color-gray-light);
    text-shadow:
        var(--title-shadow-x, -2px)
        var(--title-shadow-y, 2px)
        4px
        rgb(0 0 0 / 25%);
    text-align: center;
    line-height: var(--line-height-base);
    animation: hero-title-in 2.4s ease 0.35s both;
    transition: text-shadow 0.2s ease;
}

.hero > .container {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 38%);
}

@keyframes hero-title-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.details {
    padding-top: var(--space-xl);
    text-align: center;
}

.details__text {
    font-family: var(--font-base);
    font-size: var(--font-size-md);
    color: var(--color-black);
    line-height: var(--line-height-tight);
}


.development-notice {
    padding-top: var(--space-lg);
    text-align: center;
}

.development-notice__logo {
    width: clamp(180px, 20vw, 280px);
    height: auto;
    margin-inline: auto;
}

.development-notice__text {
    margin-top: var(--space-lg);
    font-family: var(--font-base);
    font-size: var(--font-size-md);
    color: var(--color-black);
}


.footer {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xl);
    text-align: center;
}

.footer__text {
    font-family: var(--font-base);
    font-size: var(--font-size-sm);
}

.company-contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
    color: var(--color-black);
    text-align: left;
}

.company-contacts__item {
    display: flex;
    flex: 1 1 min(100%, 520px);
    align-items: flex-start;
    gap: var(--space-md);
}

.company-contacts__item--manager {
    justify-content: flex-end;
}

.company-contacts__logo {
    width: clamp(88px, 9vw, 140px);
    height: clamp(88px, 9vw, 140px);
    flex: 0 0 clamp(88px, 9vw, 140px);
    object-fit: contain;
}

.company-contacts__text {
    font-family: var(--font-base);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-base);
}

.company-contacts__label {
    display: block;
}

@media (max-width: 1100px) {
    .company-contacts {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .company-contacts__item {
        width: min(100%, 520px);
        justify-content: flex-start;
    }

    .company-contacts__item--manager {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .js .reveal {
        opacity: 1;
    }
}