/* --- CMYK to RGB Conversion (Approximate) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;600&display=swap');
:root {
    --gray-dark: rgb(38, 38, 38);
    --gray-light: rgb(89, 89, 89);
    --text-color: rgb(204, 204, 204);
    --yellow: rgb(250, 233, 6);
    --pale-yellow: rgb(251, 241, 132);
    /* Цвет Cyan (0.160.225) */
    --cyan: rgb(0, 117, 170);

    /* Новые высоты и бордюры */
    --bar-height-top: 20px;
    --bar-height-bottom: 145px;
    --border-thickness: 2px;

    /* Новые отступы и размеры */
    --logo-top-offset: 80px;
    --logo-height: 210px;
    --title-top-offset: -30px;
    --links-bottom-offset: -100px;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- Общие стили и Фон --- */
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    src: url('inter.woff2') format('woff2'),
        url('inter.woff') format('woff'); /* Фолбэк для старых Safari */
    min-height: 100vh;
    position: relative;
    /* Градиентный фон для всей страницы */
    background: linear-gradient(to top, var(--gray-dark) 10%, var(--gray-light) 80%);
    color: white;
    overflow-x: hidden;
}

/* Шрифт Extra Light */
.title, .slogan, .typing-text {
    font-weight: 200;
}
 .link-label {
   font-size: 3 em;
       font-weight: 300;
 }

/* --- Бары (фиксированное позиционирование ДЛЯ ДЕСКТОПА) --- */
.top-bar, .bottom-bar {
    width: 100%;

    /* УДАЛЕНИЕ: background-color: var(--yellow); */
    /* ИЗМЕНЕНИЕ: Добавление горизонтального градиента */
    background: linear-gradient(to right,
        var(--yellow),
        var(--pale-yellow),
        var(--yellow),
        var(--pale-yellow),
        var(--yellow)
    );

    transition: transform 0.3s ease-out 0.5s;
    position: fixed;
    left: 0;
    z-index: 10;
}

/* Верхний Бар */
.top-bar {
    height: var(--bar-height-top);
    border-bottom: var(--border-thickness) solid white;
    top: 0;
    transform: translateY(-100%);
}

/* Нижний Бар */
.bottom-bar {
    height: var(--bar-height-bottom);
    border-top: var(--border-thickness) solid white;
    bottom: 0;
    transform: translateY(100%);

    display: flex;
    justify-content: center;
    align-items: center;
}
.top-bar.active, .bottom-bar.active {
    transform: translateY(0);
}

/* --- Основной Контейнер --- */
.coming-soon-container {
    width: 100%;
    min-height: 100vh;
    position: relative;
}

/* --- ЛОГОТИП (Абсолютное позиционирование) --- */
.logo-area {
    position: absolute;
    top: var(--logo-top-offset);
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    text-align: center;
    z-index: 5;
}

.logo-wrapper {
    width: var(--logo-height);
    height: var(--logo-height);
    margin: 0 auto;
  transition: opacity 2s ease-in-out, transform 1s ease-in-out;
    opacity: 0;
    transform: scale(10);
}
.logo-wrapper.active {
    opacity: 1;
    transform: scale(1);
}

.text-group {
    margin-top: var(--title-top-offset);
}

.title {
    font-size: 54pt;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    color: var(--text-color);
}
.pd {
    font-size: 62pt;
    font-weight: 600;
}

/* ИЗМЕНЕНИЕ: Увеличиваем размер слогана "Друк. Без зайвого." */
.slogan {
  margin-top: -50px;
    font-size: 15pt;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    color: var(--text-color);
}
.title.active, .slogan.active {
    opacity: 1;
    transition-delay: 0.2s;
}

/* --- ГЛАВНЫЙ ТЕКСТ (Центрирование и размер) --- */
.text-group-main {
    position: absolute;
    top: 480px; /* Фиксированная позиция от верха */
    left: 50%;
    transform: translateX(-50%); /* Только горизонтальное центрирование */
    width: 90%;
    max-width: 800px;
    text-align: center;
    z-index: 5;
    min-height: 150px; /* Резервируем место для двух строк */
}

.typing-text {
    font-size: 60px;
    line-height: 1.2;
    white-space: pre-wrap;
}

/* WOW, СТИЛИ */
.highlighted-fixed {
    color: var(--cyan);
    background-color: var(--yellow);
    padding: 0 5px;

    display: inline-block;

    font-weight: 600;

    letter-spacing: 0px;

    /* КОМПЕНСАЦИЯ ПРОБЕЛОВ */
    margin-right: -7px;
}
.high1 {
  /*  color: var(--cyan);*/

    padding: 0 5px;

    display: inline-block;

    font-weight: 600;

    letter-spacing: 3px;

    /* КОМПЕНСАЦИЯ ПРОБЕЛОВ */
    margin-right: -7px;
}

/* --- ССЫЛКИ И ИКОНКИ (Абсолютное позиционирование в десктопе) --- */
.links-area {
    position: absolute;
    bottom: calc(var(--bar-height-bottom) + var(--links-bottom-offset));
    width: 100%;
    max-width: 900px;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 1s ease-out 0.5s;
    text-align: center;
    z-index: 15;
}
.links-area.active {
    opacity: 1;
}

.link-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.social-icons-group {
    display: flex;
    margin-top: 35px;
}
.social-icon {

    margin: 0 5px;
}
.logo-svg-soc{
      height: 65px;
}
/* --- Медиа-запросы для Мобильной Версии (Полное удаление баров) --- */
@media (max-width: 768px) {
    /* Сброс фиксированных элементов */
    .top-bar, .bottom-bar {
        position: static;
        transform: none;
        background-color: transparent;

        /* ИЗМЕНЕНИЕ: Убираем высоту и бордюр */
        height: 0;
        border: none;
    }
    .title {
      margin-top: 45px;
        font-size: 38pt;

    }
    .pd {
        font-size: 46pt;
        font-weight: 600;
    }

    /* ИЗМЕНЕНИЕ: Увеличиваем размер слогана "Друк. Без зайвого." */
    .slogan {
      margin-top: -35px;
        font-size: 11pt;
    }
    /* Основной контейнер - Один экран */
    .coming-soon-container {
        min-height: auto;
        padding-bottom: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: transparent;
    }

    /* Сброс абсолютного позиционирования для контента */
    .logo-area, .text-group-main, .links-area {
        position: static;
        transform: none;
        margin-top: 30px;
        z-index: auto;
    }

    .logo-area {
        margin-top: 40px;
    }

    .logo-wrapper {
        width: 150px;
        height: 150px;
    }

    .typing-text {
        font-size: 30px;
    }

    /* Нижний бар (Сброс, так как он не должен мешать) */
    .bottom-bar {
        min-height: auto;
        display: block;
    }

    /* links-area теперь в потоке */
    .links-area {
        position: static;
        transform: none;
        width: 90%;
        max-width: none;
        margin: -40px auto;
    transition: opacity 1s ease-out 0.5s;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .link-group {
        margin-bottom: 10px;
    }
    text-group-main {
          position: static;
          transform: none;
          margin-top: 15px;
          z-index: auto;
          min-height: 100px; /* Меньше для мобилки */
      }
    .social-icons-group {
        display: flex;
        margin-top: 0px;
    }
}