/* ОБНУЛЕННЯ СТИЛІВ ТА БАЗОВІ НАЛАШТУВАННЯ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    -webkit-tap-highlight-color: transparent; /* Прибирає синє виділення при тапі на iPhone */
}

html {
    scroll-behavior: smooth; /* Плавна прокрутка між секціями */
}

body {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #e9ddca; /* Темный фон вокруг, чтобы экраны айфона "выделялись" */
    color: #242121;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ОБОВ'ЯЗКОВО ДЛЯ MOBILE FIRST (ЕМУЛЯЦІЯ ЕКРАНА IPHONE) */
.screen {
    width: 100%;
    max-width: 393px; /* Стандартна ширина екрана iPhone 13/14/15 */
    height: 852px;    /* Стандартна висота iPhone */
    position: relative;
    overflow-y: auto; /* Дозволяє скролити всередині екрана, якщо контент не влазить */
    margin: 20px auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 40px; /* Скруглення кутів як у справжнього смартфона */
    border: 8px solid #2e2e2e; /* Імітація рамки телефона */
    display: flex;
    flex-direction: column;
    padding: 40px 20px 30px 20px;
    box-sizing: border-box;

    /* НАШ ЕСТЕТИЧНИЙ ФОН ВСЕРЕДИНІ КАРТКИ */
    background: 
        linear-gradient(90deg, rgba(132, 137, 101, 0.02) 1px, transparent 1px) 0 0 / 35px 100%,
        linear-gradient(0deg, rgba(132, 137, 101, 0.02) 1px, transparent 1px) 0 0 / 35px 35px,
        linear-gradient(rgba(244, 235, 217, 0.88), rgba(244, 235, 217, 0.88)),
        url('assets/images/bg-shadow.jpg');
    background-size: 35px 100%, 35px 35px, cover, cover;
    background-position: center;
}

/* ХОВАЄМО СМУГУ СКРОЛУ ДЛЯ ЕСТЕТИКИ */
.screen::-webkit-scrollbar {
    width: 0px;
}

/* СТИЛІЗАЦІЯ ВЕРХНЬОЇ КНОПКИ-МЕНЮ (ПЕЛЮСТКИ) */
/* РОЗДІЛ: НАВІГАЦІЙНЕ МЕНЮ-СОНЕЧКО */

/* Контейнер-обгортка для всієї системи меню */
.nav-container {
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Головна кнопка-зірочка (сонечко) */
.nav-trigger-btn {
    width: 60px;
    height: 60px;
    background: transparent; /* Прибираємо стандартний сірий фон */
    border: none;            /* Видаляємо стандартну рамку браузера */
    outline: none;           /* Прибираємо синій контур при кліку */
    font-size: 42px;         /* Збільшуємо розмір зірочки, як у Figma */
    color: #000000;          /* Строго чорний колір */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    z-index: 102;            /* Сонечко має бути поверх пелюсток, які вилітають */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ефект обертання кнопки при активації */
.nav-trigger-btn.rotated {
    transform: rotate(180deg);
}

/* Стилі для трьох оливкових кнопок, які ховаються ПІД сонечком */
.menu-item {
    position: absolute;
    width: 45px;
    height: 45px;
    background-color: #848965; /* Наш оливковий колір */
    color: #ffffff;
    border-radius: 50%;        /* Ідеально кругла форма */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 101;              /* Летять під головною кнопкою */
    
    /* Початковий стан: стягнуті в центр і невидимі */
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
    pointer-events: none;
    
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Ефект пружини */
}

/* Клас активності для пелюсток (керується через JS) */
.menu-item.active {
    opacity: 1;
    pointer-events: auto;
}

/* ЦЕНТРАЛЬНИЙ БЛОК: ФОТО ТА ТЕКСТ */
.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px; /* Відступ від верхньої кнопки-меню */
    text-align: center;
    flex-grow: 1;
}

/* Стилізація головного фото Каті */
.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Фото красиво заповнить контейнер без розтягування */
    border-radius: 20px; /* Акуратне скруглення кутів, як на макеті */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* М'яка тінь під фото */
}

/* Стиль для фото (поки картинки немає, буде рамка-заглушка) */
.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 3px solid #848965;
    border-radius: 15px; /* Скруглення як на макеті */
    background-color: #e2d4b7; 
}

.hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sub-title {
    font-size: 24px;
    color: #848965; /* Оливково-коричневий відтінок тексту */
    font-weight: 300;
    margin-bottom: 15px;
    font-family: 'Georgia', serif;
    margin-top: 12px; /* Добавляет тот самый миллиметр отступа сверху */
    display: inline-block; /* Позволяет внешнему отступу margin-top работать корректно */
}

.skills-list {
    list-style: none;
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    margin-bottom: 25px;
}

.owner-name {
    font-size: 20px;
    color: #706856;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* НИЖНІ ІНТЕРАКТИВНІ КНОПКИ (ФУТЕР) */
.footer-controls {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding-top: 15px;
    border-top: 1px solid rgba(132, 137, 101, 0.2); /* Легка лінія розділювача */
}

.footer-action-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-btn {
    width: 55px;
    height: 55px;
    background-color: #848965; /* Оливковий колір плашок */
    color: #f4ebd9; /* Світлий колір іконки */
    border: none;
    border-radius: 50%; /* Круглі кнопки */
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.footer-btn:active {
    transform: scale(0.9); /* Ефект натискання на айфоні */
}

/* Спливаючі плашки з контактами (Попапи) */
.footer-popup {
    position: absolute;
    bottom: 70px; /* З'являється над кнопкою */
    background-color: #ffffff;
    border: 1px solid #848965;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 130px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    
    /* Приховані за замовчуванням для майбутньої анімації */
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Клас, який буде вмикатися через JS при натисканні */
.footer-popup.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.footer-popup a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.footer-popup a:hover {
    background-color: #f4ebd9;
}

/* ==========================================================================
   РОЗДІЛ: ЕКРАН 3 (ПОРТФОЛІО / КЕЙСИ)
   ========================================================================== */

/* Контейнер для сітки карток (забезпечує відступи між плашками) */
.portfolio-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;          /* Відступ між картками */
    margin-top: 20px;
    padding-bottom: 20px;
}

/* Сама плашка-картка */
.portfolio-card {
    background-color: #ffffff; /* Білий фон картки як на макеті */
    border-radius: 24px;       /* Красиве сильне скруглення кутів */
    display: flex;             /* Ставимо фото і текст в один рядок (горизонтально) */
    align-items: center;
    overflow: hidden;          /* Щоб фото не виходило за скруглені кути плашки */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: transform 0.2s ease;
    border: 1px solid rgb(125, 136, 103);
}

/* Ефект легкого натискання на картку */
.portfolio-card:active {
    transform: scale(0.98);
}

/* Фіксація розміру фото зліва (ГОЛОВНЕ ВИПРАВЛЕННЯ) */
.card-img {
    width: 120px;        /* Строго обмежуємо ширину картинки */
    height: 120px;       /* Робимо її квадратною */
    object-fit: cover;   /* Фото обрізається по краях, не стискаючись */
}

/* Текстова частина всередині картки (справа від фото) */
.card-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;        /* Текст займає весь вільний простір */
}

/* Назва клієнта (NOVODOM, АДВОКАТ ЛИСАК тощо) */
.card-info h3 {
    font-size: 16px;
    color: #000000;
    font-weight: 700;
    text-transform: uppercase; /* Робимо літери великими */
    letter-spacing: 0.5px;
}

/* Опис виконаної роботи під назвою */
.card-info p {
    font-size: 13px;
    color: #555555;
    line-height: 1.4;
}

/* ==========================================================================
   ЧИСТОВИЙ РОЗДІЛ: ЕКРАН 2 (АКУРАТНИЙ КВАДРАТ З ЕФЕКТОМ МАСШТАБУВАННЯ)
   ========================================================================== */

#about {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 35px 20px;
    position: relative;
}

/* Оформлення заголовка сторінки */
#about .section-title {
    font-size: 20px;
    color: #000000;
    text-align: center;
    font-weight: 700;
    margin-bottom: 20px;
    transition: opacity 0.4s ease;
}

/* КОНТЕЙНЕР-КВАДРАТ: Початковий стан (невеликий, акуратний) */
.video-container {
    width: 240px;          /* Зменшили базовий розмір, щоб не перевантажувати екран */
    height: 240px;         /* Строгий квадрат 1:1 */
    background-color: #000000;
    border-radius: 28px;   /* Охайне скруглення кутів */
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    margin-bottom: 15px;
    
    /* Готуємо контейнер до дуже плавної та "дорогої" анімації */
    transform: scale(1);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.5s ease, 
                width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
                height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
    border: 1px solid rgb(125, 136, 103);
}

/* КЛАС ЗБІЛЬШЕННЯ: Коли відео грає, воно плавно виростає та фокусує на собі увагу */
.video-container.playing-mode {
    width: 320px;          /* Квадрат плавно розширюється майже на всю ширину айфона */
    height: 320px;         /* Зберігаємо пропорцію 1:1 */
    transform: scale(1.03); /* Додатковий легкий ефект "наближення" */
    box-shadow: 0 15px 35px rgba(132, 137, 101, 0.25); /* М'яка олівкова тінь */
}

/* Саме відео всередині контейнера */
.main-video {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* Кадрує горизонтальне відео під квадрат без деформацій */
    cursor: pointer;
}

/* Нижній підпис під квадратом */
.video-footer-text {
    font-size: 14px;
    color: #706856;
    font-style: italic;
    text-align: center;
    transition: opacity 0.4s ease;
}

/* Якщо відео грає, злегка приглушаємо текст навколо, щоб погляд не відволікався */
.video-container.playing-mode ~ .section-title,
.video-container.playing-mode ~ .video-footer-text {
    opacity: 0.4;
}

/* ==========================================================================
   КНОПКА НАВІГАЦІЇ «ДОДОМУ» У ВЕРХУ ЕКРАНІВ
   ========================================================================== */
.home-nav-button {
    display: block;
    font-family: 'Georgia', 'Times New Roman', serif !important;
    font-size: 11px;
    color: #848965;            /* Наш стриманий оливковий колір */
    text-decoration: none;     /* Прибираємо стандартне підкреслення */
    text-transform: uppercase; /* Робимо літери великими */
    letter-spacing: 0.15em;    /* Преміальний великий відступ між літерами */
    text-align: center;
    margin: 0 auto 15px auto;  /* Центруємо та робимо відступ до заголовка */
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

/* Ефект при торканні або наведенні */
.home-nav-button:hover {
    opacity: 1;
}

/* ==========================================================================
   ОНОВЛЕННЯ ВЕРХНЬОЇ КНОПКИ: ПЕРЕТВОРЕННЯ НА КВІТКУ ТА ПІДКАЗКА
   ========================================================================== */

/* Контейнер меню робимо флексом, щоб підказка встала чітко над квіткою */
.nav-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

/* Витончений, ледь помітний напис над квіткою */
.flower-hint {
    font-family: 'Georgia', 'Times New Roman', serif !important;
    font-size: 13px;
    color: #443f2a;
    text-transform: uppercase;
    letter-spacing: 0.22em; /* Шляхетна розрядка літер */
    opacity: 0.4;
    white-space: nowrap;
    pointer-events: none; /* Щоб напис не заважав клікати по кнопці */
    animation: hint-fade 3s infinite ease-in-out;
}

/* Перетворюємо саму кнопку на квітку з м'якими пелюстками */
.nav-trigger-btn {
    width: 38px !important;    /* Компактний, ювелірний розмір */
    height: 38px !important;
    background-color: #848965 !important; /* Наш фірмовий оливковий */
    border: none !important;
    outline: none !important;
    position: relative;
    
    /* Створюємо асиметричну природну форму пелюсток */
    border-radius: 60% 40% 60% 40% / 40% 60% 40% 60% !important;
    
    box-shadow: 0 4px 12px rgba(132, 137, 101, 0.15) !important;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Перетворюємо іконку-зірочку всередині на крихітну бежеву серцевину квітки */
.nav-trigger-btn .fa-asterisk {
    display: none !important; /* Ховаємо стару іконку */
}

.nav-trigger-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background-color: #f4ebd9; /* Бежевий колір під тон фону картки */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.9;
}

/* Коли меню відкрите або ми наводимо на кнопку, квітка міняє форму пелюсток */
.nav-container.active .nav-trigger-btn,
.nav-trigger-btn:hover {
    border-radius: 40% 60% 40% 60% / 60% 40% 60% 40% !important;
    background-color: #727754 !important; /* Глибший відтінок */
}

/* Анімація м'якого дихання для підказки */
@keyframes hint-fade {
    0%, 100% { opacity: 0.25; transform: scale(0.97); }
    50% { opacity: 0.5; transform: scale(1); }
}

/* Контейнер футера — уменьшаем отступы */
.footer-controls {
  display: flex;
  justify-content: center;
  gap: 20px; /* Уменьшили расстояние между кнопками с 40px до 20px */
  margin: 15px 0; /* Уменьшили внешние отступы, чтобы не растягивать экран */
  align-items: flex-start;
}

/* Контейнер для кнопки и попапа */
.footer-action-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 140px; 
  position: relative; /* КРИТИЧЕСКИ ВАЖНО: держит попап строго под кнопкой */
}

/* Круглые кнопки — уменьшили размер с 70px до 55px */
.footer-btn {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #7d8867;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease;
  padding: 0;
}

.footer-btn:active {
  transform: scale(0.95);
}

/* Иконки внутри кнопок — тоже пропорционально уменьшаем */
.footer-btn i {
  font-size: 22px; /* Было 28px */
  color: #fffbe3;
}

/* Выпадающие попапы */
/* Выпадающие попапы — убираем белый фон и рамки */
/* Выпадающие попапы — МЯГКАЯ АНИМАЦИЯ */
/* Выпадающие попапы — ИСПРАВЛЕННАЯ СВЕРХПЛАВНАЯ АНИМАЦИЯ */
/* Выпадающие попапы — ВЫЛЕТ СНИЗУ ВВЕРХ */
.footer-popup {
  visibility: hidden;
  opacity: 0;
  
  /* Меняем направление сжатия: теперь оно сжимается к нижнему краю */
  transform: translateY(5px) scaleY(0);
  transform-origin: bottom center; /* КРИТИЧЕСКИ ВАЖНО: точка фиксации теперь СНИЗУ */
  
  /* Оставляем нашу супер-плавную анимацию */
  transition: 
    opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s 0.35s;

  width: 100%;
  text-align: center;
  pointer-events: none;
  
  background: transparent !important; 
  border: none !important;
  box-shadow: none !important;
  
  /* Меняем позицию: вместо top: 100% ставим bottom: 100% */
  position: absolute;
  bottom: 100%; /* Попап встает строго НАД кнопкой */
  left: 0;
}

/* Активное состояние при клике */
.footer-popup.active {
  visibility: visible;
  opacity: 1;
  
  /* Приподнимаем чуть выше кнопки в итоговом состоянии */
  transform: translateY(-10px) scaleY(1);
  pointer-events: auto;
  
  transition: 
    opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}

/* Активное состояние при клике */
.footer-popup.active {
  visibility: visible;
  opacity: 1;
  
  /* Возвращаем масштаб в исходные 100% */
  transform: translateY(5px) scaleY(1);
  pointer-events: auto;
  
  transition: 
    opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}

/* Активное состояние при клике */
.footer-popup.active {
  visibility: visible;
  opacity: 1;
  max-height: 180px; /* С запасом под ссылки и текст */
  margin-top: 10px; 
  
  /* Возвращаем в нормальное положение */
  transform: translateY(0) scale(1);
  pointer-events: auto; /* Разрешаем клики */
  
  transition: 
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}

/* Сами кнопки-ссылки внутри попапа */
.footer-popup a {
  display: block;
  padding: 8px 12px;
  margin: 6px 0;
  background-color: #7d8867; /* Твой оливковый цвет для плашек */
  color: #fffbe3 !important; /* Светлый текст (как на кнопке TikTok) */
  text-decoration: none !important;
  border-radius: 15px; 
  font-size: 13px; 
  font-weight: 500;
  transition: opacity 0.2s, transform 0.1s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Легкая тень только у самих плашек */
}

/* Эффект при нажатии на плашку ссылки */
.footer-popup a:active {
  transform: scale(0.98);
}

/* Контейнер видео — теперь он строго квадратный */
.video-container {
    width: 290px; /* Фиксированная ширина как на макете */
    height: 290px; /* Фиксированная высота */
    margin: 0 auto;
    border-radius: 36px; /* Закругление углов */
    overflow: hidden; /* Прячем всё, что выходит за рамки квадрата */
    position: relative;
    
    /* Плавная анимация увеличения */
    transition: transform 0.5s ease;
}

/* Само видео внутри контейнера */
.main-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Видео заполняет квадрат полностью, не искажаясь */
    border-radius: 36px;
}

/* Эффект увеличения контейнера при проигрывании */
.screen.video-expanded .video-container {
    transform: scale(1.12); /* Видео аккуратно увеличивается, оставаясь квадратом */
}

/* Стили для размытия текста (оставляем без изменений) */
.about-text {
    max-width: 85%;
    margin: 25px auto 0 auto;
    text-align: left;
    font-size: 15px;
    line-height: 1.5;
    color: #2b2b2b;
    transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
    transform-origin: top center;
}

/* Когда видео активно — текст съезжает и размывается */
.screen.video-expanded .about-text {
    transform: translateY(35px);
    filter: blur(5px);
    opacity: 0.5;
}

/* Базовое состояние скрытого окна */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75); /* Затемнение фона */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

/* Состояние, когда окно открыто */
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Ограничиваем размеры самой бежевой плашки модалки */
.modal-content {
    width: 90%;
    max-width: 380px; /* Оптимальная ширина для вертикального видео */
    margin: 0 auto;
    border-radius: 36px; /* Делаем закругление углов крупным и мягким */
    background: #f3eee1; /* Фирменный бежевый цвет фона */
    padding: 20px;       /* Немного увеличили внутренние отступы для воздуха */
    position: relative;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); /* Мягкая глубокая тень */
    overflow: hidden;    /* Чтобы ничего не вылезало за округлые края */
}

/* Ограничиваем контейнер с видео */
.modal-video-wrapper {
    width: 100%;
    aspect-ratio: 9 / 16; /* Строго вертикальный формат */
    max-height: 70vh;    /* Видео не займет больше 70% высоты экрана */
    background-color: #000;
    border-radius: 16px;
    overflow: hidden;
}

/* Настройки самого тега видео */
#modalVideo {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Вписывает видео без растяжений и искажений */
}

/* Стили для текста в модалке */
.modal-desc h3 {
    margin-top: 15px;
    margin-bottom: 5px;
    color: #1a1a1a;
    font-size: 18px;
}

.modal-desc p {
    margin: 0;
    color: #555;
    font-size: 14px;
    line-height: 1.4;
}

/* Стили для лаконичного крестика */
.close-modal-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    background: none;         /* Убираем серый/белый фон кнопки */
    border: none;             /* Полностью убираем страшную рамку */
    color: #fff;              /* Делаем сам крестик белым, чтобы его было видно на видео */
    font-size: 32px;          /* Увеличиваем размер символа */
    line-height: 1;
    cursor: pointer;          /* Меняем курсор при наведении */
    z-index: 10;              /* Выносим строго поверх видео */
    padding: 0;
    opacity: 0.7;             /* Немного приглушаем яркость */
    transition: opacity 0.2s ease, transform 0.2s ease; /* Плавный ховер-эффект */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* Добавляем тень символу, чтобы он не терялся на светлых кадрах */
}

/* Эффект при наведении мышкой или тапе */
.close-modal-btn:hover {
    opacity: 1;
    transform: scale(1.1);    /* Крестик слегка увеличивается */
}

/* Карточка с полупрозрачным фоном для текста */
/* Компактная карточка для текста */
.about-text {
    background: rgba(255, 255, 255, 0.35); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    
    padding: 14px 18px; /* Уменьшили отступы сверху/снизу и по бокам */
    border-radius: 20px; 
    margin: 15px auto 10px auto; /* Прижали ближе к видео */
    width: 92%; /* Чтобы карточка была аккуратной на мобильных */
    max-width: 500px; /* Ограничение, чтобы текст не расползался вширь */
    border: 1px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02); 
}

/* Компактный заголовок приветствия */
.about-text-card h3 {
    margin-top: 0;
    margin-bottom: 8px; /* Уменьшили отступ */
    font-size: 16px;    /* Сделали аккуратнее */
    color: #1a1a1a;
    font-weight: 700;
}

/* Компактные абзацы */
.about-text-card p {
    font-size: 13.5px;   /* Слегка уменьшили размер букв для аккуратности */
    line-height: 1.45;   /* Сделали строки чуть плотнее */
    color: #2c2c2c;   
    margin-bottom: 10px; /* Ужали расстояние между абзацами в полтора раза */
}

/* Убираем лишний отступ у самого последнего абзаца */
.about-text-card p:last-child {
    margin-bottom: 0;
}

/* Базовое позиционирование контейнера для кнопки */
.video-container {
    position: relative;
    width: 290px;
    height: 290px;
    margin: 0 auto;
    border-radius: 36px;
    overflow: hidden;
    transition: transform 0.5s ease;
}

/* Красивая круглая кнопка Play по центру видео */
.custom-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Белый треугольник внутри кнопки */
.custom-play-btn::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 5px;
}

/* Эффект при наведении на кнопку */
.custom-play-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(1.08);
}

/* Скрываем кнопку, когда видео играет */
.screen.playing .custom-play-btn {
    opacity: 0;
    pointer-events: none;
}

/* Стилизация твоего класса текста: компактность + полупрозрачный фон */
.about-text {
    max-width: 88%;
    margin: 15px auto 10px auto;
    text-align: left;
    font-size: 14px;
    line-height: 1.45;
    color: #2b2b2b;
    
    /* Полупрозрачная бежево-белая подложка с размытием */
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 15px 18px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    
    /* Анимация уезда вниз при воспроизведении */
    transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
    transform-origin: top center;
}

/* Анимация текста и видео при проигрывании */
.screen.playing .about-text {
    transform: translateY(30px);
    filter: blur(4px);
    opacity: 0.5;
}

.screen.playing .video-container {
    transform: scale(1.12);
}
/* Контейнер для услуг, растягивающийся по вертикали */
.services-list {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Отступы между пунктами */
    width: 90%;
    max-width: 450px;
    margin: 0 auto 25px auto;
}

/* Стилизация каждого пункта услуг */
/* Стилизация каждого пункта услуг в фирменном оливково-зелёном стиле */
/* Ищи через Ctrl + F */
.service-item {
    /* Твой новый контрастный цвет текста */
    color: rgb(81, 78, 51); 
    
    /* Остальные свойства оставляем без изменений */
    background: rgba(255, 255, 255, 0.4); 
    font-weight: 600; 
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14.5px;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
    border: 1px solid rgb(125, 136, 103); 
}

/* Ищи через Ctrl + F */
.contact-card {
    width: 90%;
    max-width: 450px;
    margin: 0 auto;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
    text-align: center;
    
    /* ОБНОВЛЯЕМ ТУТ: Такая же фирменная рамочка */
    border: 1px solid rgb(125, 136, 103); 
}

/* Заголовок контактов */
.contact-card h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: hwb(0 10% 90%);
    font-weight: 700;
}

/* Кликабельный номер телефона */
.contact-phone {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    
    /* Меняем цвет только для самого номера */
    color: rgb(125, 136, 103); 
    
    text-decoration: none;
    margin-bottom: 6px;
    transition: transform 0.2s ease;
}

.contact-phone:hover {
    transform: scale(1.03);
}

/* Подпись про мессенджеры */
/* Контейнер для иконок мессенджеров */
.contact-messengers-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;               /* Оптимальный отступ между кнопками */
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Общие стили для кнопок-иконок */
.msgr-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;             /* Делаем одинаковую круглую форму */
    height: 48px;
    border-radius: 50%;      /* Идеальный круг */
    background-color: #f0ede4; /* Мягкий светлый фон под цвет твоей карточки */
    font-size: 22px;         /* Размер самой иконки внутри круга */
    text-decoration: none !important; /* Убираем это страшное синее подчеркивание */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Легкая тень */
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                background-color 0.2s ease, 
                color 0.2s ease;
}

/* Избавляемся от дефолтного синего цвета ссылок в браузере */
.msgr-link i {
    display: inline-block;
    line-height: 1;
}

/* Анимация при наведении или клике на телефоне */
.msgr-link:hover {
    transform: translateY(-3px) scale(1.05); /* Кнопка красиво приподнимается */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* Фирменная стилизация под цвет твоего интерфейса (как кнопки внизу) */
.msgr-link.tg, 
.msgr-link.viber, 
.msgr-link.wa {
    color: #6b7f64;          /* Твой глубокий зеленый цвет */
    border: 1px solid rgba(107, 127, 100, 0.15);
}

/* Кастомизация фона при наведении (для эстетики) */
.msgr-link.tg:hover { background-color: #e1f3fc; color: #24A1DE; }
.msgr-link.viber:hover { background-color: #f1effd; color: #7360F2; }
.msgr-link.wa:hover { background-color: #e8f9ee; color: #25D366; }


/* Контейнер теперь жестко держит координаты для текста */
.btn-with-label {
    position: relative;
    display: inline-block; /* Кнопка сохраняет свой размер */
}

/* Стили текста: делаем аккуратным, меньше и нужного цвета */
.btn-label {
    position: absolute;
    bottom: -22px;         /* Четко опускаем текст НАМНОГО ниже кнопки */
    font-size: 12px;       /* Делаем аккуратным и чуть меньше */
    font-family: inherit;  /* Возвращаем стандартный читаемый шрифт сайта */
    color: #4a5846;        /* Тот самый красивый темно-зеленый цвет */
    white-space: nowrap;   /* Никаких переносов */
    pointer-events: none;  /* Чтобы текст не мешал кликать по кнопке */
    font-weight: 500;
}

/* Левую надпись слегка сдвигаем вправо, чтобы она красиво смотрелась под кругом */
.row-reverse .btn-label {
    left: 10px;
}

/* Правую надпись выравниваем по центру или левому краю кнопки */
.row-normal .btn-label {
    left: 5px;
}