:root {
    --main-color: #000000;
    --main-inverse: #ffffff;
}

/* 1. Робимо так, щоб сторінка займала 100% висоти екрана */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Atyp Display', sans-serif;
    background-color: var(--main-inverse); /* Білий фон під лініями */
    color: var(--main-color);
}

.wrapper {
    /* 2. Розтягуємо контейнер на всю видиму висоту (vh = viewport height) */
    min-height: 100vh;
    width: 100%;

    /* 3. Налаштовуємо фон */
    /* ../ означає: "вийди з папки css", а img/lines.svg: "зайди в img і візьми файл" */
    background-image: url("../img/lines.svg"); 
    
    /* Щоб малюнок не повторювався мозаїкою */
    background-repeat: no-repeat;
    
    /* Центруємо перехрестя ліній рівно посередині екрана */
    background-position: center center;
    
    /* 'cover' розтягує картинку так, щоб вона заповнила весь простір без дірок */
    background-size: cover;
    
    /* Щоб лінії не совалися, коли ти будеш гортати сайт вниз */
    background-attachment: scroll;
}

.wrapper {
    min-height: 100vh;
    width: 100%;
    
    /* МНОЖИННИЙ ФОН: спочатку лінії, потім градієнт */
    background-image: url("../img/lines.svg"), url("../img/test_gradient.png");
    
    /* Налаштування для обох фонів одночасно */
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: cover, cover;
    background-attachment: scroll, scroll;

    /* Твоє центрування контенту */
    display: flex;
    justify-content: center; /* по горизонталі */
    align-items: center;     /* по вертикалі */
}

/* Налаштування самого логотипу */
.main-logo {
    width: 635px; /* Можеш змінити це число, щоб зробити лого більшим чи меншим */
    height: auto;
    z-index: 10;   /* Щоб лого було точно над лініями фону */
    margin-top: -25px; 
    opacity: 1;
    /* Якщо хочеш ще й трохи вбік, можна додати margin-left: */
    /* margin-left: 20px; */
}

.header-text {
    position: absolute;
    top: 50px;
    width: 100%;
    text-align: center;
    
    /* Вказуємо назву шрифту */
    font-family: 'Atyp Display', sans-serif;
    
    /* ДОДАЄМО ЦЕЙ РЯДОК: 500 — це і є твоє Medium начертання */
    font-weight: 500; 
    
    text-transform: uppercase;
    line-height: 1.2;
    /* Щоб літери не злипалися, можна додати трішки простору між ними, як на макеті */
    letter-spacing: -0.10em; 
}

/* Перший рядок (100% видимість) */
.text-top {
    font-size: 35px;   /* Можеш підібрати розмір під свій смак */
    color: #000000;
    opacity: 1;        /* 100% прозорість (повністю видимий) */
    margin: 0;
}

/* Другий рядок (50% прозорість) */
.text-bottom {
    font-size: 35px;   /* Такий самий розмір */
    color: #000000;
    opacity: 0.5;      /* 50% прозорість */
    margin-top: -12px;
}

.lang-switcher {
    position: absolute;
    top: 50px;
    right: 50px;
    text-align: right;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    text-transform: uppercase;
    letter-spacing: -0.08em;
}

.lang-item {
    font-size: 35px;
    margin-bottom: 5px;
    color: #000000;
}

.lang-item.disabled {
    opacity: 0.2;
    text-decoration: line-through;
}

.main-nav {
    position: absolute;
    top: 50px;
    left: 50px;
    text-align: left;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.08em;
}

.nav-item {
    font-size: 35px;
    color: #000000;
    line-height: 1; 
    margin-bottom: 5px; 
    display: block; /* Важливо для однакового поводження елементів */
    transition: opacity 0.3s ease;
}

/* Наша кнопка ABOUT US */
.about-button {
    cursor: pointer;
    display: block;
    
    /* 1. Створюємо велику невидиму зону навколо тексту */
    padding: 10px 20px 10px 0; /* Додаємо 10px зверху/знизу і 20px справа */
    
    /* 2. Компенсуємо padding, щоб візуально текст залишався на місці */
    margin-top: -10px;    
    margin-bottom: -5px;  /* -5px замість -10px, щоб зберегти твій margin-bottom: 5px */
    
    /* 3. Гарантуємо анімацію */
    transition: opacity 0.3s ease !important;
    position: relative;
    z-index: 10;
}

/* Ефект наведення (тепер він буде дуже чутливим) */
.about-button:hover {
    opacity: 0.5 !important;
}

/* HOMEPAGE */
.nav-item.home {
    opacity: 0.5;
    cursor: default;
}

/* DISABLED */
.nav-item.disabled {
    opacity: 0.2;
    text-decoration: line-through;
    cursor: not-allowed;
}

/* PORTFOLIO посилання */
.menu-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.nav-item:last-child {
    margin-bottom: 0;
}

.footer-left {
    position: absolute;
    bottom: 20px;
    left: 50px;
    
    /* Твої стандарти */
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.08em;
    opacity: 1;
    
    /* ДОДАЄМО КОЛІР ТУТ (для всього блоку) */
    color: #FFFFFF; 
}

.copyright {
    font-size: 20px;
    margin: 0;
    line-height: 1;
    
    /* Про всяк випадок дублюємо колір для самого тексту */
    color: #FFFFFF;
}

.footer-right {
    position: absolute;
    bottom: 20px; /* Відступ знизу 20px */
    right: 50px;  /* Відступ праворуч 50px */
    
    /* Додаємо flex, щоб картинка була рівно по центру відведеного місця */
    display: flex;
    justify-content: flex-end; /* Вирівнюємо по правому краю блоку */
    align-items: center;
}

.footer-logo {
    /* SVG автоматично підлаштується під розмір картинки,
       але ми можемо задати йому точну висоту, якщо воно завелике.
       Зазвичай для таких елементів підходить висота 20-30px */
    height: 20px; 
    width: auto;  /* Ширина підлаштується пропорційно */
    
    /* Якщо SVG має завеликі порожні поля навколо, 
       ми можемо їх прибрати */
    display: block;
}

.social-links {
    position: absolute;
    bottom: 70px;
    left: 42px !important; /* Додаємо !important, щоб перебити все інше */
    z-index: 100;
}

.social-button {
    display: block;
    transition: opacity 0.3s ease;
    opacity: 1;
}

.social-button:hover {
    opacity: 0.5; /* Твій ефект при наведенні */
}

.social-icon {
    display: block;
    width: 330px; /* Твоя нова ширина кнопок */
    height: auto;
}

.social-links {
    position: absolute;
    bottom: 70px; 
    left: 50px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* MANGA та CHARACTERS — строго 230px знизу */
.category-links {
    position: absolute;
    bottom: 230px; 
    left: 50px;
    display: flex;
    flex-direction: column;
    gap: 5px; /* Відступ між ними 5px */
    z-index: 100;
}

.category-button {
    font-family: 'Atyp Display', sans-serif;
    font-size: 32px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    line-height: 1;
    display: block;
    
    /* Додаємо плавний перехід для всіх кнопок категорії */
    transition: opacity 0.3s ease !important;
}

/* Налаштування конкретно для активної кнопки CHARACTERS */
.category-button:not(.disabled) {
    cursor: pointer;
    
    /* Розширюємо зону кліку без зміни візуальних відстаней */
    padding: 10px 20px 10px 0; 
    margin-top: -10px;
    margin-bottom: -10px;
}

/* Ефект наведення 50% прозорості */
.category-button:not(.disabled):hover {
    opacity: 0.5 !important;
}

.category-button.disabled {
    text-decoration: line-through;
    opacity: 0.2;
    pointer-events: none;
}

/* СОЦМЕРЕЖІ — залишаються на 70px знизу */
.social-links {
    position: absolute;
    bottom: 70px; 
    left: 50px;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Відступ між плашками 10px */
    z-index: 100;
}

.social-button {
    display: block;
    width: 330px; /* Твоя ширина */
}

.social-icon {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}

.social-button:hover .social-icon {
    opacity: 0.5;
}

.dark-section {
    background-color: #000;
    width: 100%;
    position: relative;
    z-index: 10;
    /* Робимо висоту фіксованою під твої потреби, 
       або 350vh, щоб був запас на 3.5 екрани */
    min-height: 2500px; 
    padding-bottom: 100px;
}

.section-title {
    font-family: 'Atyp Display', sans-serif;
    font-size: 80px;
    margin: 0;
    text-transform: uppercase;
}

/* Переконайся, що перед цим рядком стоїть закриваюча дужка } попереднього блоку */

.logo-slider {
    width: 100%;
    overflow: hidden;
    background: #000;
    position: relative;
    padding: 20px 0;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.logo-track {
    display: flex;
    align-items: center;
    width: max-content; /* Дозволяємо треку бути такої довжини, як контент */
    gap: 80px; /* Однаковий відступ між логотипами */
    padding-right: 80px; /* Важливо: такий же відступ в кінці для стику */
    animation: scrollRight 40s linear infinite;
}

.logo-item {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-track img {
    height: 45px; /* Твоя однакова висота */
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.logo-track img:hover {
    opacity: 1;
}

/* ФІКС БЕЗКІНЕЧНОСТІ ЧЕРЕЗ ВІДСОТКИ */
@keyframes scrollRight {
    0% {
        /* Починаємо з самого початку */
        transform: translateX(0);
    }
    100% {
        /* Зміщуємося рівно на половину треку ліворуч */
        /* Це працює незалежно від ширини логотипів! */
        transform: translateX(-50%);
    }
}

.studio-content {
    position: relative;
    width: 100%;
    min-height: 800px;
    
    /* Додаємо ../ щоб вийти з папки стилів у головну директорію */
    background-image: url('../img/STUDIO.svg'); 
    background-repeat: no-repeat;
    background-size: 1500px 360px;
    background-position: 70px 240px;
    
  
}

.studio-description {
    /* ПРИБИРАЄМО position: absolute, хай текст стоїть у черзі елементів */
    position: relative; 
    
    /* Рухаємо заголовок точно на місце за допомогою margin */
    margin-top: 390px;  /* Відступ від білої лінії з логотипами */
    margin-left: 310px; /* Твій відступ зліва, як у Фігмі */
    
    /* Параметри шрифту залишаємо */
    font-size: 35px;
    line-height: 30px;
    letter-spacing: -0.08em;
    font-weight: 400;
    text-transform: uppercase;
    color: #FFFFFF;
    
    z-index: 5;
}

/* Лівий блок з описом */
.studio-text-left {
    position: absolute;
    top: 530px;
    left: 310px; /* Це поверне текст на місце */
    font-size: 20px;
    line-height: 20px;
    letter-spacing: -0.05em;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    z-index: 2;
}

/* Окремий стиль для відступу */
.margin-top {
    display: block; /* Зміни на block, щоб текст точно пішов на новий рядок */
    margin-top: 25px; /* Регулюй цей відступ тут */
}

.studio-text-left .medium {
    font-weight: 500; /* Medium */
}

.studio-text-left .regular {
    font-weight: 400; /* Regular */
}

/* Правий блок (текст + кнопка) */
.studio-right-group {
    position: absolute;
    top: 590px; /* Початок правого тексту */
    left: 1115px; /* Твоя відстань зліва */
    z-index: 2;
}

.studio-text-right {
    font-size: 20px;
    line-height: 20px;
    letter-spacing: -0.05em;
    color: #FFFFFF; /* 100% прозорість */
    font-weight: 400;
    margin: 0;
}

/* Кнопка LEARN MORE */
.learn-more {
    position: absolute;
    top: 80px; /* 590px (текст) + 80px = 670px зверху, як ти просив */
    display: inline-block;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px solid #FFFFFF;
    padding-bottom: 5px;
    white-space: nowrap;
}

.studio-footer span {
    position: absolute;
    top: 850px; /* Спільна висота для всіх */
    font-size: 35px;
    font-weight: 500; /* Medium */
    letter-spacing: -0.08em;
    color: #FFFFFF;
    text-transform: uppercase;
    z-index: 2;
}

/* Точне позиціювання зліва */
.scroll-now {
    left: 50px;
}

.concept-tag {
    left: 690px;
}

.plus-icon {
    left: 1835px;
}

.photo-container {
    position: absolute;
    top: 900px;
    left: 50px;
    width: 340px;
    height: 420px;
    overflow: hidden; /* Щоб нічого не вилазило за межі */
    cursor: pointer;
    z-index: 3;
}

/* Налаштування фото */
.project-photo {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Щоб фото не деформувалося */
    filter: grayscale(100%); /* Робимо ЧБ */
    transition: filter 0.5s ease; /* Плавно повертаємо колір */
}

/* Налаштування логотипу */
.project-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Чітко по центру */
    width: 170px;
    height: 145px;
    opacity: 0; /* Спочатку невидиме */
    transition: opacity 0.5s ease; /* Плавно з'являється */
    pointer-events: none; /* Щоб лого не заважало наводити на фото */
}

/* Ефект при наведенні (HOVER) */
.photo-container:hover .project-photo {
    filter: grayscale(0%); /* Стає кольоровою */
}

.photo-container:hover .project-logo {
    opacity: 1; /* Логотип з'являється */
}
.project-link {
    text-decoration: none; /* Прибираємо стандартне підкреслення посилань */
    display: block;        /* Щоб посилання займало всю площу картинки */
}

/* Координати для другого фото */
.martin-project {
    position: absolute;
    top: 900px;  /* Та сама висота */
    left: 420px; /* Твій новий відступ зліва */
    width: 340px;
    height: 420px;
    overflow: hidden;
    cursor: pointer;
    z-index: 3;
}

/* Розміри для другого логотипу */
.martin-l {
    width: 195px;
    height: 159px;
}

.studio-content {
    display: flex;
    flex-direction: column;
    padding-top: 50px; /* Залишимо невеликий базовий відступ */
    min-height: 2400px; /* Збільшимо загальну висоту секції */
}

/* Переконайся, що якір не створює відступів */
#cases-anchor {
    display: block;
    height: 0;
    width: 0;
}
/* Стан кнопки CASE при наведенні */
.menu-link:hover {
    opacity: 0.5;          /* Робимо прозорість 50% */
    transition: opacity 0.3s ease; /* Додаємо плавність, щоб не було різкого стрибка */
}

/* Також важливо додати плавність самому посиланню, щоб вона працювала в обидва боки */
.menu-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    width: 100%;
    transition: opacity 0.3s ease; /* Додай цей рядок сюди */
}

/* Координати для третього кейсу (панорамний) */
.grnd-project {
    position: absolute;
    top: 1350px;  /* Твій новий відступ зверху */
    left: 50px;   /* Повертаємося до лівого краю */
    width: 710px; /* Широкий формат */
    height: 420px;
    overflow: hidden;
    cursor: pointer;
    z-index: 3;
}

/* Розміри для великого логотипу GRND WORX */
.grnd-l {
    width: 520px;
    height: 120px;
}

/* Координати для четвертого кейсу AUTO AUCT */
.auto-auct-project {
    position: absolute;
    top: 900px;   /* Твоя відстань зверху */
    left: 790px;  /* Твоя відстань зліва */
    width: 340px;
    height: 420px;
    overflow: hidden;
    cursor: pointer;
    z-index: 3;
}

/* Розмір логотипу для цього кейсу */
.auto-l {
    width: 154px;
    height: 154px;
}

/* Координати для п'ятого кейсу KOCHUT */
.kochut-project {
    position: absolute;
    top: 1350px;  /* Рівень панорамного GRND WORX */
    left: 790px;  /* Права колонка, під AUTO AUCT */
    width: 340px;
    height: 420px;
    overflow: hidden;
    cursor: pointer;
    z-index: 3;
}

/* Розмір логотипу Kochut */
.kochut-l {
    width: 170px;
    height: 215px;
}

/* Координати для шостого кейсу AICOFIT */
.aicofit-project {
    position: absolute;
    top: 1800px;  /* Твій новий рівень нижче */
    left: 420px;  /* Позиція ближче до центру */
    width: 340px;
    height: 420px;
    overflow: hidden;
    cursor: pointer;
    z-index: 3;
}

/* Розмір логотипу Aicofit */
.aico-l {
    width: 220px;
    height: 90px;
}

/* Координати для сьомого кейсу */
.case7-project {
    position: absolute;
    top: 900px;    /* Рівень Martin та Auto Auct */
    left: 1160px;  /* Крайня права позиція */
    width: 710px;
    height: 870px;
    overflow: hidden;
    cursor: pointer;
    z-index: 3;
}

/* Величезний логотип для цього кейсу */
.c7-l {
    width: 639px;
    height: 424px;
}

.next-cases-trigger {
    position: absolute;
    top: 1800px;    /* Твоя висота */
    left: 790px;    /* Твій відступ зліва */
    width: 340px;   /* Твій розмір */
    height: 420px;
    z-index: 2;
}

.next-svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* Блок More Cases */
.next-cases-trigger {
    position: absolute;
    top: 1800px;
    left: 790px;
    width: 340px;
    height: 420px;
    z-index: 2;
}

/* Написи SCROLL NOW (вони зазвичай фіксовані або зверху, але якщо вони мають бути внизу - перевір top) */
.studio-footer {
    position: fixed; /* Або absolute, залежно від твоєї задумки */
    width: 100%;
    /* ... твої інші стилі для футера ... */
}

.bottom-branding {
    position: absolute;
    top: 2350px;      /* Нова відстань зверху */
    left: 50px;       /* Твій відступ зліва */
    width: 215px;     /* Твій розмір */
    height: 30px;
    z-index: 20;
}

.footer-logo-secondary {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain; /* Щоб PNG не розтягувало, а воно вписувалось у розмір */
}

/* Загальні стилі для пунктів меню */
.menu-item {
    position: absolute;
    top: 2350px;
    font-family: 'Atyp Display', sans-serif;
    font-size: 40px;
    line-height: 40px; /* Твій інтервал */
    letter-spacing: -0.08em; /* Твій спейсінг */
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.menu-item:hover {
    opacity: 0.3; /* Легкий ефект при наведенні */
}

/* Точні координати зліва для кожного */
.about { left: 1148px; }
.services { left: 1342px; }
.faq { left: 1516px; }
.contact { left: 1646px; 
}

.white-section {
    position: relative;
    width: 100%;
    min-height: 200vh; /* Висота у два екрани, як домовилися */
    
    /* НАЛАШТУВАННЯ ТВОГО НОВОГО ГРАДІЄНТА */
    /* background-image: url("../img/test_gradient_2.png"); */ /* ЗАКОМЕНТУЙ поки, якщо ще не перемістив файл */
    background-image: url("../img/test_gradient_2.png");
    
    /* Центруємо і розтягуємо на всю ширину/висоту секції */
    background-position: center center;
    background-size: 100% 100%; /* Це розтягне PNG на всі 200vh висоти */
    background-repeat: no-repeat;
    background-attachment: scroll; /* Щоб фон скролився разом з контентом */

    /* Додамо трохи падінгу, щоб контент не прилипав до країв */
    padding-top: 100px; 
    padding-bottom: 100px;
    margin: 0;
    
    /* Текст у цій секції тепер має бути чорним */
    color: #000000; 
}

/* Чорна секція — твоя основна */
.dark-section {
    background-color: #000;
    width: 100%;
    position: relative;
    min-height: 2800px; /* Достатньо для твого лого на 2350px */
    margin: 0;
    padding: 0;
    z-index: 10;
    overflow: hidden; /* Щоб нічого не вилазило за краї */
}

.white-section {
    position: relative;
    width: 100%;
    /* Змінюємо 300vh на чітку висоту до кінця другої плашки */
    height: 2720px;
    
    background-image: url("../img/test_gradient_2.png");
    
    /* Градієнт залишається тільки на першому екрані (100vh) */
    background-size: 100% 100vh; 
    
    background-position: top center;
    background-repeat: no-repeat;
    
    /* Все, що нижче першого екрана, буде чистим білим кольором */
    background-color: #ffffff; 
    
    /* Додамо overflow: hidden, щоб слайдер або елементи випадково не створили горизонтальний скрол */
    overflow: hidden; 
}

/* Старий ::before нам дійсно більше не потрібен */
.white-section::before {
    display: none;
}

/* 3. ЛІВИЙ НАПИС — ПОВЕРТАЄМО ТА ПРАВИМО ІНТЕРВАЛ */
.main-narrative {
    position: absolute;
    top: 310px;
    left: 10%;
    font-family: 'Atyp Display', sans-serif;
    color: #ffffff !important;
    font-size: 35px;
    text-transform: uppercase;
    z-index: 20; /* Піднімаємо вище за все */
    
    /* Твій запит: міжрядковий інтервал 30px */
    line-height: 30px; 
    
    /* Додаємо, щоб текст точно не зникав */
    display: block;
    height: auto;
    width: fit-content;
}

/* 4. ПРАВИЙ НАПИС */
.belief-statement {
    position: absolute;
    top: 185px;
    right: 10%;
    font-family: 'Atyp Display', sans-serif;
    color: #ffffff !important;
    text-align: right;
    font-size: 20px;
    opacity: 0.5;
    z-index: 5;
    line-height: 1,2;
}

/* --- 3. АНІМАЦІЯ СЛАЙДЕРА (Твій рухомий ряд картинок) --- */
.infinite-slider-container {
    position: absolute;
    top: 750px; /* Позиція слайдера від верху секції */
    left: 0;
    width: 100%;
    z-index: 10;
}

.infinite-slider-track {
    display: flex;
    width: max-content;
    animation: scrollSlider 40s linear infinite;
}

.infinite-slider-track img {
    width: 260px; /* Розмір картинок у слайдері */
    height: auto;
    margin-right: 20px;
    flex-shrink: 0;
}

/* Логіка руху: картинки їдуть вліво */
@keyframes scrollSlider {
    0% { transform: translateX(0); }
    100% { transform: translateX(-2520px); } 
}

.studio-svg-bg {
    position: absolute;
    /* Відстань 100 пікселів зверху секції */
    top: 100px; 
    /* Центрування по горизонталі */
    left: 50%;
    transform: translateX(-50%);
    
    /* Твій розмір: 1500х360 */
    width: 1500px;
    height: 360px;
    
    /* Твій файл та прозорість */
    background-image: url("../img/STUDIO_2.svg"); /* Перевір, чи розширення .svg чи .png як на скрині */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.05; /* 5% прозорості */
    
    z-index: 2; /* Між фоном та текстом */
    pointer-events: none;
}

/* СПІЛЬНИЙ СТИЛЬ ДЛЯ НАПИСІВ */
.project-label {
    position: absolute;
    top: 700px; /* Відстань зверху для всіх однакова */
    
    font-family: 'Atyp Display', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 35px;
    line-height: 35px;
    letter-spacing: -0.08em; /* Твій леттер спейсінг */
    
    color: #000000;
    opacity: 1; /* 100% прозорості */
    text-transform: uppercase;
    z-index: 10;
}

/* ТОЧНЕ ПОЗИЦІЮВАННЯ ПО ГОРИЗОНТАЛІ */
.scroll-now {
    left: 50px;
}

.smm-target {
    left: 690px;
}

.plus-icon {
    left: 1835px;
}

/* 1. БАЗОВІ НАЛАШТУВАННЯ СТОРІНКИ */
.contact-page {
    background-color: #000000;
    color: #ffffff;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'Atyp Display', sans-serif;
    overflow-x: hidden;
    position: relative;
}

/* 2. ЗАГАЛЬНІ СТИЛІ ДЛЯ НАВІГАЦІЇ */
.nav-link {
    position: absolute;
    text-decoration: none;
    color: #ffffff;
    font-weight: 400;          /* Regular */
    font-size: 40px;
    line-height: 40px;
    letter-spacing: -0.08em;
    transition: opacity 0.3s ease;
}

/* Ефект при наведенні (50% прозорості) */
.nav-link:hover {
    opacity: 0.5;
}

/* 3. КОНКРЕТНІ КООРДИНАТИ ТА СТИЛІ КНОПОК */
.homepage-link {
    top: 75px;
    left: 100px;
    text-transform: uppercase; 
}

.about-link {
    top: 75px;
    left: 1390px;
    text-transform: none;      
}

/* МАЙБУТНЯ КНОПКА (SERVICES) */
.services-link {
    top: 75px;
    left: 1585px;              /* Зліва 1585px */
    text-transform: none;      /* Не капс */
}

/* МАЙБУТНЯ КНОПКА (FAQ) */
.faq-link {
    top: 75px;
    left: 1780px;              /* Зліва 1780px (щоб не накладалось) */
    text-transform: uppercase; /* Капсом */
}

/* 4. ГОЛОВНИЙ ЗАГОЛОВОК (Ready to work together?) */
.main-title {
    position: absolute;
    top: 230px;
    left: 100px;
    margin: 0;
    font-weight: 600;        /* SemiBold */
    font-size: 110px;
    line-height: 90px;
    letter-spacing: -0.08em;
    text-transform: none;
}

/* ПІДЗАГОЛОВОК (СІРИЙ ТЕКСТ) */
.subtitle {
    position: absolute;
    top: 450px;              /* Відступ від верху */
    left: 100px;             /* На тій же лінії, що й заголовок */
    margin: 0;
    font-weight: 400;        /* Regular */
    font-size: 30px;         /* Розмір шрифту */
    line-height: 25px;       /* Щільний інтервал */
    letter-spacing: -0.05em; /* Трішки менший спейсінг */
    color: #ffffff;
    opacity: 0.5;            /* Робимо його напівпрозорим (сірим) */
}

/* --- БЛОК СОЦМЕРЕЖ (ІКОНКИ) --- */

.social-links {
    z-index: 10;
}

.social-item {
    display: block;
    width: 60px;
    height: 60px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    margin: 0 !important;
}

.social-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.social-item:hover {
    opacity: 0.5;
    transform: translateY(-5px);
}

.branding-title {
    position: absolute;
    /* Відстані, які ти вказав */
    top: 1305px;
    left: 80px;

    /* Типографіка */
    font-family: 'Atyp Display', sans-serif; /* Переконайся, що назва шрифту збігається з fonts.css */
    font-weight: 400; /* Regular */
    font-size: 50px;
    line-height: 30px; /* Міжрядковий інтервал */
    letter-spacing: -0.08em; /* Твій спейсінг у відносних одиницях */
    
    text-transform: uppercase;
    color: #000000;
}

/* Загальний стиль для всіх плашок */
.branding-tag {
    position: absolute;
    height: 25px; /* Висота у всіх однакова */
}

/* Координати та розміри для кожної плашки */
.brand-identity {
    top: 1355px;
    left: 80px;
    width: 134px;
}

.logo-design {
    top: 1355px;
    left: 219px;
    width: 123px;
}

.motion-graphics {
    top: 1355px;
    left: 347px;
    width: 154px;
}

.icons-illustrations {
    top: 1385px;
    left: 80px;
    width: 195px;
}

.marketing-materials {
    top: 1385px;
    left: 280px;
    width: 181px;
}

.branding-photo {
    position: absolute;
    top: 1205px;
    left: 900px;
    width: 292px;
    height: 280px;
    object-fit: cover; /* Щоб фото не деформувалося, якщо пропорції трохи зміняться */
}

.branding-description {
    position: absolute;
    top: 1305px;
    left: 1377px;
    
    /* Розміри контейнера */
    width: 355px;
    /* Прибираємо фіксовану висоту та overflow, щоб текст дихав */
    height: auto; 
    
    /* Типографіка за твоїм макетом */
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 20px;
    line-height: 20px; /* Щільний інтервал 1:1 */
    letter-spacing: -0.05em;
    
    /* Твоє нове вирівнювання та прозорість */
    text-align: left;
    opacity: 0.5;
    color: #000000;
}

.section-bg-plate {
    position: absolute;
    top: 1570px;
    left: 0;
    width: 1920px;
    height: 350px;
    
    /* Тимчасово ставимо високий індекс, щоб побачити її */
    z-index: 1; 
    
}

.web-production-title {
    position: absolute;
    top: 1705px;
    left: 80px;
    
    /* Типографіка */
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 50px;
    line-height: 30px; /* Твій специфічний інтервал */
    letter-spacing: -0.08em;
    text-transform: uppercase; /* Капсом */
    
    color: #000000;
    z-index: 2; /* Щоб точно бути над сірою плашкою */
}

/* Загальний стиль для тегів у цьому блоці */
.web-tag {
    position: absolute;
    z-index: 2; /* Поверх сірої плашки */
}

/* Перший ряд */
.responsive-web {
    top: 1755px;
    left: 80px;
    width: 219px;
    height: 25px;
}

.development {
    top: 1755px;
    left: 304px;
    width: 133px;
    height: 25px;
}

/* Другий ряд */
.maintenance {
    top: 1785px;
    left: 80px;
    width: 204px;
    height: 25px;
}

.landing {
    top: 1785px;
    left: 289px;
    width: 84px;
    height: 25px;
}

.web-photo {
    position: absolute;
    top: 1605px;
    left: 900px;
    width: 292px;
    height: 280px;
    
    /* Відправляємо на передній план, щоб бути над сірою плашкою */
    z-index: 2;
    
    /* Щоб фото не деформувалося, якщо пропорції трохи зміняться */
    object-fit: cover; 
}

.web-description {
    position: absolute;
    top: 1705px;
    left: 1377px;
    
    /* Типографіка */
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 20px;
    line-height: 20px;
    letter-spacing: -0.05em;
    text-align: left;
    
    /* Стиль */
    color: #000000;
    opacity: 0.5; /* 50% прозорості */
    z-index: 2;
}

.product-design-title {
    position: absolute;
    top: 2105px;
    left: 80px;
    
    /* Типографіка */
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 50px;
    line-height: 30px;
    letter-spacing: -0.08em;
    text-transform: uppercase;
    
    color: #000000;
}

/* Загальний стиль для тегів Product Design */
.product-tag {
    position: absolute;
    height: 25px;
    z-index: 2;
}

/* Перший ряд */
.user-research {
    top: 2155px;
    left: 80px;
    width: 134px;
}

.ui-design {
    top: 2155px;
    left: 219px;
    width: 126px;
}

.prototyping {
    top: 2155px;
    left: 350px;
    width: 115px;
}

/* Другий ряд */
.product-strategy {
    top: 2185px;
    left: 80px;
    width: 158px;
}

.design-systems {
    top: 2185px;
    left: 243px;
    width: 150px;
}

.product-photo {
    position: absolute;
    top: 2005px;
    left: 900px;
    width: 292px;
    height: 280px;
    
    /* Щоб фото точно було помітним на білому фоні */
    z-index: 2;
    
    /* Щоб фото не деформувалося, якщо пропорції трохи зміняться */
    object-fit: cover; 
}

.product-description {
    position: absolute;
    top: 2105px;
    left: 1377px;
    
    /* Типографіка */
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 20px;
    line-height: 20px;
    letter-spacing: -0.05em;
    text-align: left;
    
    /* Стиль */
    color: #000000;
    opacity: 0.5; /* 50% прозорості */
    z-index: 2;
}

.section-bg-plate2 {
    position: absolute;
    top: 2370px;
    left: 0;
    width: 1920px;
    height: 350px;
    
    /* Тимчасово ставимо високий індекс, щоб побачити її */
    z-index: 1; 
}

.digital-artist-title {
    position: absolute;
    top: 2505px;
    left: 80px;
    
    /* Типографіка */
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 50px;
    line-height: 30px;
    letter-spacing: -0.08em;
    text-transform: uppercase;
    
    color: #000000;
    z-index: 2; /* Поверх сірої плашки */
}

/* Загальний стиль для тегів Digital Artist */
.artist-tag {
    position: absolute;
    height: 25px;
    z-index: 2; /* Поверх сірої плашки */
}

/* Перший ряд */
.nsfw {
    top: 2555px;
    left: 80px;
    width: 115px;
}

.character-design {
    top: 2555px;
    left: 200px;
    width: 164px;
}

.illustration {
    top: 2555px;
    left: 369px;
    width: 100px;
}

/* Другий ряд */
.customization {
    top: 2585px;
    left: 80px;
    width: 139px;
}

.comic-art {
    top: 2585px;
    left: 224px;
    width: 172px;
}

.artist-photo {
    position: absolute;
    top: 2405px;
    left: 900px;
    width: 292px;
    height: 280px;
    
    z-index: 2; /* Над плашкою */
    object-fit: cover; 
}

.artist-description {
    position: absolute;
    top: 2505px;
    left: 1377px;
    
    /* Типографіка */
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: -0.05em;
    text-align: left;
    
    /* Стиль */
    color: #000000;
    opacity: 0.5;
    z-index: 2; /* Щоб бути над сірою плашкою */
}

.black-section {
    position: relative;
    width: 100%;
    height: 1850px; /* Твоя задана висота */
    background-color: #000000;
    
    /* Про всяк випадок, щоб нічого не вилітало за межі */
    overflow: hidden; 
}

.faq-title {
    position: absolute;
    top: 115px; /* Відстань від верху чорної секції */
    left: 100px;
    
    /* Оскільки це SVG заголовок, задаємо йому базову ширину, 
    якщо він не підтягнувся автоматично (наприклад, 800px) */
    width: auto; 
    height: auto;
    
    z-index: 2;
}

.faq-description {
    position: absolute;
    top: 290px; /* Відстань від верху чорної секції */
    left: 1050px;
    
    /* Типографіка */
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 30px;
    line-height: 25px;
    letter-spacing: -0.05em;
    text-align: left;
    
    /* Стиль */
    color: #ffffff;
    opacity: 0.5; /* 50% прозорості */
    z-index: 2;
}

.faq-divider {
    position: absolute;
    top: 440px; /* Твоя відстань зверху */
    left: 100px; /* Центрування: (1920 - 1720) / 2 */
    
    width: 1720px;
    height: 1px;
    
    background-color: #ffffff;
    opacity: 0.5; /* 50% прозорості */
    
    z-index: 2;
}

/* Текст зліва */
.faq-text-content {
    position: absolute;
    top: 570px;
    left: 100px;
    width: 790px;
    
    /* Типографіка */
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    letter-spacing: -0.05em;
    color: #ffffff;
    
    /* Вирівнювання та прозорість */
    text-align: justify;
    opacity: 0; /* Схований спочатку */
    transition: opacity 0.3s ease; /* Плавна поява */
    z-index: 2;
}

/* Кнопка справа */
.faq-btn {
    position: absolute;
    top: 570px;
    left: 960px;
    width: 860px;
    height: 90px;
    
    cursor: pointer;
    transition: opacity 0.3s ease;
    z-index: 3;
}

/* ЛОГІКА АНІМАЦІЇ */

/* 1. Коли наводимо на КНОПКУ — вона сама втрачає 50% прозорості */
.faq-btn:hover {
    opacity: 0.5;
}

/* 2. Коли наводимо на КНОПКУ — ТЕКСТ зліва стає видимим (на 50% прозорості) */
.faq-btn:hover ~ .faq-text-content,
.faq-item-1:has(.faq-btn:hover) .faq-text-content {
    opacity: 0.5;
}

/* Текст для другого питання */
.faq-text-content-2 {
    position: absolute;
    top: 570px; /* Твій відступ зверху */
    left: 100px;
    width: 790px;
    
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    letter-spacing: -0.05em;
    color: #ffffff;
    
    text-align: justify; /* Вирівнювання по ширині */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* Друга кнопка */
.faq-btn-2 {
    position: absolute;
    top: 675px; /* Твій відступ зверху для кнопки */
    left: 960px;
    width: 860px;
    height: 90px;
    
    cursor: pointer;
    transition: opacity 0.3s ease;
    z-index: 3;
}

/* Логіка анімації для другого блоку */

/* Наведення на саму кнопку */
.faq-btn-2:hover {
    opacity: 0.5;
}

/* Поява тексту при наведенні на кнопку */
.faq-btn-2:hover ~ .faq-text-content-2,
.faq-item-2:has(.faq-btn-2:hover) .faq-text-content-2 {
    opacity: 0.5;
}

/* Текст для третього питання */
.faq-text-content-3 {
    position: absolute;
    top: 570px; /* Залишаємо на тій же висоті, що й попередні тексти */
    left: 100px;
    width: 790px;
    
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    letter-spacing: -0.05em;
    color: #ffffff;
    
    text-align: justify;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* Третя кнопка */
.faq-btn-3 {
    position: absolute;
    top: 780px; /* Нова висота для третьої кнопки */
    left: 960px;
    width: 860px;
    height: 90px;
    
    cursor: pointer;
    transition: opacity 0.3s ease;
    z-index: 3;
}

/* Логіка анімації для третього блоку */

.faq-btn-3:hover {
    opacity: 0.5;
}

.faq-btn-3:hover ~ .faq-text-content-3,
.faq-item-3:has(.faq-btn-3:hover) .faq-text-content-3 {
    opacity: 0.5;
}

/* Текст для четвертого питання */
.faq-text-content-4 {
    position: absolute;
    top: 570px; /* Стандартна висота для появи відповідей */
    left: 100px;
    width: 790px;
    
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    letter-spacing: -0.05em;
    color: #ffffff;
    
    text-align: justify; /* Вирівнювання по ширині */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* Четверта кнопка */
.faq-btn-4 {
    position: absolute;
    top: 885px; /* Твоя відстань зверху */
    left: 960px;
    width: 860px;
    height: 90px;
    
    cursor: pointer;
    transition: opacity 0.3s ease;
    z-index: 3;
}

/* Анімація для четвертого блоку */

.faq-btn-4:hover {
    opacity: 0.5;
}

.faq-btn-4:hover ~ .faq-text-content-4,
.faq-item-4:has(.faq-btn-4:hover) .faq-text-content-4 {
    opacity: 0.5;
}

/* Текст для п'ятого питання */
.faq-text-content-5 {
    position: absolute;
    top: 570px;
    left: 100px;
    width: 790px;
    
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    letter-spacing: -0.05em;
    color: #ffffff;
    
    text-align: justify;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* П'ята кнопка */
.faq-btn-5 {
    position: absolute;
    top: 990px; /* Твоя координата */
    left: 960px;
    width: 860px;
    height: 90px;
    
    cursor: pointer;
    transition: opacity 0.3s ease;
    z-index: 3;
}

/* Анімація для п'ятого блоку */
.faq-btn-5:hover {
    opacity: 0.5;
}

.faq-btn-5:hover ~ .faq-text-content-5,
.faq-item-5:has(.faq-btn-5:hover) .faq-text-content-5 {
    opacity: 0.5;
}

/* Текст для шостого питання */
.faq-text-content-6 {
    position: absolute;
    top: 570px; /* Текст з'являється у тій же зоні, що й попередні */
    left: 100px;
    width: 790px;
    
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    letter-spacing: -0.05em;
    color: #ffffff;
    
    text-align: justify; /* Вирівнювання по ширині */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* Шоста кнопка */
.faq-btn-6 {
    position: absolute;
    top: 1095px; /* Твоя координата зверху */
    left: 960px;
    width: 860px;
    height: 90px;
    
    cursor: pointer;
    transition: opacity 0.3s ease;
    z-index: 3;
}

/* Анімація для шостого блоку */
.faq-btn-6:hover {
    opacity: 0.5;
}

.faq-btn-6:hover ~ .faq-text-content-6,
.faq-item-6:has(.faq-btn-6:hover) .faq-text-content-6 {
    opacity: 0.5;
}

.bottom-logo {
    position: absolute;
    top: 1130px; /* Твій відступ зверху */
    left: 100px;  /* Вирівнювання по лівій лінії з текстами FAQ */
    
    width: 239px;
    height: 57px;
    
    z-index: 2;
}

/* Плавний скрол для всього сайту */
html {
    scroll-behavior: smooth;
}

/* Відступ при переході по якорю */
#services-section {
    scroll-margin-top: -1000px; /* Це змусить браузер зупинитися за 200px до елемента */
}

/* Стилі для прозорості (як ти й казав) */
.menu-item {
    transition: opacity 0.3s ease;
    opacity: 1;
}

.menu-item:hover {
    opacity: 0.5; /* Втрачає прозорість при наведенні */
}

#faq-section {
    scroll-margin-top: -60px; /* Або підбери цифру, яка тобі більше до душі */
}

.faq-bottom-divider {
    position: absolute;
    top: 1700px; /* Твоя координата зверху */
    left: 100px;  /* Центрування: (1920 - 1720) / 2 */
    
    width: 1720px;
    height: 1px;
    
    background-color: #ffffff;
    opacity: 0.5; /* 50% прозорості */
    
    z-index: 2;
}

/* Маніфест у футері головного екрану */
.bottom-manifesto {
    position: absolute;
    top: 1740px;      /* Твоя відстань зверху */
    left: 100px;      /* Твоя відстань зліва */
    width: 405px;
    height: 65px;
    z-index: 20;      /* Щоб був над фоном, але під кнопками якщо треба */
}







/* ---------------------------------------------------------
   CAREER SCREEN STYLES
------------------------------------------------------------ */

/* Фон для сторінки кар'єри */
.career-page {
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Прибираємо горизонтальний скрол */
}

/* Фоновий маскот бренду */
.career-mascot-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    
    /* Шлях до зображення */
    background-image: url('../img/shattics_mascot.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    z-index: 1;
}

/* Навігація сторінки кар'єри */
.career-nav {
    position: relative;
    z-index: 10; /* Щоб кнопки були поверх маскота */
}

.career-nav-link {
    position: absolute;
    top: 75px;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    letter-spacing: -0.08em;
    color: #000000;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.career-nav-link:hover {
    opacity: 0.5;
}

/* Позиції кнопок */
.career-nav-link.homepage { left: 100px; text-transform: uppercase; }
.career-nav-link.about    { left: 1120px; }
.career-nav-link.services { left: 1315px; }
.career-nav-link.faq      { left: 1490px; 
}

/* --- Текстові блоки Career --- */

.open-positions-title {
    position: absolute;
    top: 230px;
    left: 100px;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 110px;
    line-height: 90px;
    letter-spacing: -0.08em;
    color: #000000;
    margin: 0;
}

.no-positions-text {
    position: absolute;
    top: 365px;
    left: 100px;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 50px;
    line-height: 40px;
    letter-spacing: -0.05em;
    color: #000000;
    margin: 0;
}

.social-notice-text {
    position: absolute;
    top: 480px;
    left: 100px;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 30px;
    line-height: 25px;
    letter-spacing: -0.05em;
    color: rgba(0, 0, 0, 0.5); /* 50% прозорості для всього тексту */
    margin: 0;
}

/* Виділення для LinkedIn та Instagram (100% прозорість) */
.social-link-inline {
    color: #000000; /* 100% прозорість */
    text-decoration: none;
    font-weight: 400;
    transition: opacity 0.3s ease;
}

.social-link-inline:hover {
    opacity: 0.6;
}

/* Контейнер для іконок соцмереж на сторінці Career */
.social-links-container-career {
    position: absolute;
    top: 600px; /* Твій відступ зверху */
    left: 100px;
    z-index: 20; /* Ставимо дуже високий пріоритет, щоб перекрити фон */
}

.social-links-row-1, .social-links-row-2 {
    display: flex;
    gap: 5px;
    margin-bottom: 5px; /* Відстань між рядками */
}

/* Анімація підйому для кожної іконки */
.social-item {
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
    text-decoration: none;
}

.social-item img {
    display: block;
    width: 55px; /* Розмір твоїх іконок */
    height: auto;
}

.social-item:hover {
    transform: translateY(-5px); /* Твій фірмовий підйом вгору */
    opacity: 0.8;
}

/* Щоб маскот не "крав" кліки мишкою */
.career-mascot-bg {
    pointer-events: none; /* Це дозволить клікати крізь картинку, якщо вона десь перекриває кнопки */
}

/* Фінальні штрихи футера Career */

.career-bottom-logo {
    position: absolute;
    top: 860px; /* Твоя відстань зверху */
    left: 100px; /* Твоя відстань зліва */
    width: 215px;
    height: 30px;
    z-index: 10;
}

.career-copyright {
    position: absolute;
    top: 870px; /* Твоя відстань зверху */
    left: 940px; /* Твоя відстань зліва */
    
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: -0.08em;
    color: #000000;
    
    margin: 0;
    z-index: 10;
}






/* ---------------------------------------------------------
   CHARACTERS SCREEN STYLES
------------------------------------------------------------ */

.char-nav-link {
    position: absolute;
    top: 50px; /* Твоя відстань зверху */
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    letter-spacing: -0.08em;
    color: #000000;
    text-decoration: none;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.char-nav-link:hover {
    opacity: 0.5;
}

/* Точне позиціонування для кожного пункту */
.char-nav-link.homepage {
    left: 50px;
    text-transform: uppercase;
}

.char-nav-link.contact {
    left: 450px;
}

.char-nav-link.services {
    left: 669px;
}

.char-nav-link.faq {
    left: 843px;
}

/* ---------------------------------------------------------
   CHARACTERS SCREEN STYLES
------------------------------------------------------------ */

/* Базові налаштування сторінки */
.characters-page {
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Фонове зображення всіх персонажів */
.characters-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 102vh; /* Додаємо 0.5vh, щоб фон трохи заходив ПІД чорну секцію */
    background-image: url('../img/ALL_CHARACTERS.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Велика чорна секція — ВИДАЛИ старі дублікати і залиш цей один варіант */
.characters-black-section {
    position: relative;
    width: 100%;
    height: 2336px;
    background-color: #000000;
    margin-top: 100vh;
    z-index: 10; /* Вище за фон, щоб "наїжджати" зверху */
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* ФІКС ЗАЗОРУ: */
    outline: 1px solid #000000; /* Додає чорну лінію по контуру, яка закриває щілину */
    border: none;
}

/* Навігація */
.characters-nav {
    position: relative; /* Щоб z-index спрацював */
    z-index: 10;
}

.char-nav-link {
    position: absolute;
    top: 50px;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    letter-spacing: -0.08em;
    color: #000000;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.char-nav-link:hover {
    opacity: 0.5;
}

/* Позиції кнопок */
.char-nav-link.homepage { left: 50px; text-transform: uppercase; }
.char-nav-link.contact  { left: 450px; }
.char-nav-link.services { left: 669px; }
.char-nav-link.faq      { left: 843px; 
}

/* --- Текстові блоки Characters --- */

.char-main-title {
    position: absolute;
    top: 340px;
    left: 160px;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: 110px;
    line-height: 90px;
    letter-spacing: -0.08em;
    color: #000000;
    margin: 0;
}

/* Перша частина заголовка (прозорість 50%) */
.dream-part {
    opacity: 0.5;
}

/* Друга частина заголовка (повна яскравість) */
.create-part {
    opacity: 1;
}

.char-description {
    position: absolute;
    top: 550px;
    left: 160px;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 30px;
    line-height: 25px;
    letter-spacing: -0.05em;
    color: rgba(0, 0, 0, 0.5); /* 50% прозорості */
    margin: 0;
}

/* Фінальний штрих — логотип у футері */
.char-bottom-logo {
    position: absolute;
    top: 850px; /* Твоя відстань зверху */
    left: 50px;  /* Твоя відстань зліва */
    width: 215px;
    height: 30px;
    z-index: 10;
}

/* Велика чорна секція для персонажів */
.characters-black-section {
    position: relative;
    width: 100%;
    height: 2300px; /* Твоя точна висота */
    background-color: #000000;
    margin-top: 100vh; /* Починаємо після першого білого екрана */
    z-index: 5;
    
    /* Додаємо плавний перехід, якщо захочеш */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Оновлюємо базові налаштування сторінки, щоб дозволити скрол */
.characters-page {
    min-height: auto; /* Дозволяємо сторінці рости вниз */
}

/* Базовий клас для всіх персонажів у чорній секції */
.char-image {
    position: absolute;
    z-index: 25; /* Поверх чорного фону */
    transition: transform 0.3s ease; /* Додамо трішки плавності на майбутнє */
}

/* CHARACTER_1: позиціонування */
.char-1 {
    top: 100px;  /* Відстань від верху чорної секції */
    left: 100px; /* Відстань зліва */
    width: 526px;
    height: 652px;
}

/* CHARACTER_2 */
.char-2 {
    top: 51px;   /* Твоя відстань зверху */
    left: 697px; /* Твоя відстань зліва */
    width: 526px;
    height: 701px;
}

/* CHARACTER_3 */
.char-3 {
    top: 100px;   /* Твоя відстань зверху */
    left: 1294px; /* Твоя відстань зліва */
    width: 526px;
    height: 652px;
}

/* Базовий клас для текстових блоків персонажів */
.char-text {
    position: absolute;
    z-index: 25;
    height: 40px;
    width: 526px;
}

/* Позиціонування підписів */
.text-1 {
    top: 772px;
    left: 100px;
}

.text-2 {
    top: 772px;
    left: 697px;
}

.text-3 {
    top: 772px;
    left: 1294px;
}

/* Загальний стиль кнопок музики */
.music-btn {
    position: absolute;
    width: 48px;
    height: 48px;
    z-index: 30;
    transition: transform 0.3s ease; /* Плавна анімація */
    display: block;
}

/* Ефект при наведенні — підіймається на 5 пікселів */
.music-btn:hover {
    transform: translateY(-5px);
}

.music-btn img {
    width: 100%;
    height: 100%;
}

/* Точне позиціонування */
/* Персонаж 1 */
.yt-1 { top: 832px; left: 100px; }
.sp-1 { top: 832px; left: 160px; }

/* Персонаж 2 */
.yt-2 { top: 832px; left: 697px; }
.sp-2 { top: 832px; left: 757px; 
}

/* Статичні іконки музики (без анімації та кліків) */
.music-static {
    position: absolute;
    width: 48px;
    height: 48px;
    z-index: 25;
    opacity: 0.6; /* Можна додати легку прозорість, щоб підкреслити "неактивність" */
    pointer-events: none; /* Гарантує, що іконка не реагує на курсор */
}

/* Позиціонування для третього героя */
.yt-3 {
    top: 832px;
    left: 1294px; /* Твоя відстань зліва */
}

.sp-3 {
    top: 832px;
    left: 1354px; /* Твоя відстань зліва */
}

/* CHARACTER_4 */
.char-4 {
    top: 950px;
    left: 100px;
    width: 526px;
    height: 652px;
}

/* CHARACTER_5 */
.char-5 {
    top: 950px;
    left: 697px;
    width: 526px;
    height: 652px;
}

/* CHARACTER_6 */
.char-6 {
    top: 950px;
    left: 1294px;
    width: 526px;
    height: 652px;
}

/* Позиціонування підписів другого ряду */
.text-4 {
    top: 1622px;
    left: 100px;
}

.text-5 {
    top: 1622px;
    left: 697px;
}

.text-6 {
    top: 1622px;
    left: 1294px;
}

/* Позиціонування іконок другого ряду */
/* Row 2 - Col 1 */
.yt-4 { top: 1682px; left: 100px; }
.sp-4 { top: 1682px; left: 160px; }

/* Row 2 - Col 2 */
.yt-5 { top: 1682px; left: 697px; }
.sp-5 { top: 1682px; left: 757px; }

/* Row 2 - Col 3 */
.yt-6 { top: 1682px; left: 1294px; }
.sp-6 { top: 1682px; left: 1354px; 
}

/* Контейнер для іконок соцмереж на сторінці CHARACTERS */
.social-links-container-characters {
    position: absolute;
    top: 2036px; /* Твій відступ зверху */
    left: 100px;
    z-index: 20; /* Ставимо дуже високий пріоритет, щоб перекрити фон */
}

.social-links-row-3, .social-links-row-4 {
    display: flex;
    gap: 5px;
    margin-bottom: 5px; /* Відстань між рядками */
}

/* Анімація підйому для кожної іконки */
.social-item {
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
    text-decoration: none;
}

.social-item img {
    display: block;
    width: 55px; /* Розмір твоїх іконок */
    height: auto;
}

.social-item:hover {
    transform: translateY(-5px); /* Твій фірмовий підйом вгору */
    opacity: 0.8;
}

/* Декоративна лінія внизу чорної секції */
.footer-line {
    position: absolute;
    top: 2196px; /* Твоя відстань зверху */
    left: 50%;   /* Ставимо початок лінії по центру екрана */
    transform: translateX(-50%); /* Зміщуємо лінію вліво на половину її довжини для точного центрування */
    
    width: 1720px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5); /* Білий колір з 50% прозорістю */
    
    z-index: 15;
}

/* Фінальний слоган у чорній секції */
.where-starts-img {
    position: absolute;
    top: 2226px; /* Твоя відстань зверху */
    left: 100px;  /* Твоя відстань зліва */
    width: 405px;
    height: 65px;
    z-index: 15;
}

/* --- ЗАГАЛЬНІ СТИЛІ (для обох екранів) --- */
.footer-link {
    position: absolute;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 40px;
    letter-spacing: -0.08em;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    z-index: 30;
}

.footer-link:hover { opacity: 0.5; }

.disabled-link {
    opacity: 0.2 !important;
    text-decoration: line-through !important;
    cursor: default;
}

.disabled-link:hover { opacity: 0.2 !important; }

.contact-us { text-transform: uppercase; }

/* --- КООРДИНАТИ ДЛЯ ЕКРАНУ ПЕРСОНАЖІВ (characters.html) --- */
/* Додай клас до <nav> на сторінці персонажів: <nav class="char-footer-nav"> */
.char-footer-nav .about-link    { top: 2071px; left: 1228px; }
.char-footer-nav .services-link { top: 2071px; left: 1422px; }
.char-footer-nav .contact-us    { top: 2071px; left: 1596px; }

.char-footer-nav .career { top: 2126px; left: 1321px; }
.char-footer-nav .blog   { top: 2126px; left: 1473px; }
.char-footer-nav .press  { top: 2126px; left: 1587px; }
.char-footer-nav .events { top: 2126px; left: 1713px; }

/* --- КООРДИНАТИ ДЛЯ ГОЛОВНОГО ЕКРАНУ (index.html) --- */
/* Додай клас до <nav> на головній: <nav class="bottom-nav"> */
.bottom-nav .about-link    { top: 1564px; left: 1228px; } /* Підкоригуй top якщо треба */
.bottom-nav .services-link { top: 1564px; left: 1422px; }
.bottom-nav .contact-us    { top: 1564px; left: 1596px; }

.bottom-nav .career { top: 1620px; left: 1321px; }
.bottom-nav .blog   { top: 1620px; left: 1473px; }
.bottom-nav .press  { top: 1620px; left: 1587px; }
.bottom-nav .events { top: 1620px; left: 1713px; }