/* ==========================================================================
   1. Базові Налаштування та Змінні
   ========================================================================== */
   :root {
      /* Кольори */
      --primary: #fff;
      --secondary: #121212;
      --text-default: #dcdcdc;
      --bg-body: #000;
      --bg-header: #000;
      --bg-hover: transparent;
      --bg-mobile-menu: #1f1f1f;
      --border-header: #1f1f1f;
      --border-mobile-link: #303030;
      --border-scroll: #474747;
      --scroll-hover-bg: #282828;
  
      /* Типографія */
      --font-family: "SF UI Display", "Lato", sans-serif;
      --font-weight-nav: 700;
      --font-weight-title: 900;
  
      /* Градієнт */
      --hero-gradient-start: rgba(40, 20, 85, 0.7);
      --hero-gradient-mid: rgba(40, 20, 85, 0.4);
      --hero-gradient-end: rgba(0, 0, 0, 0);
  
      /* Розміри та Відступи */
      --header-height: 48px;
      --nav-width-desktop: 674px;
      --nav-link-width: auto;
      --nav-link-height: 38px;
      --title-element-gap: 0.75em;
  
      /* Стилі активного посилання */
      --underline-height: 2px;
      --underline-offset-y: 4px;
      --underline-offset-y-logo: -2px;
  
      /* Соціальна панель - Позиціонування на ДЕСКТОПІ */
      --sidebar-offset-left: 80px;      /* Відступ зліва */
      --sidebar-offset-bottom: 163px;   /* Відступ знизу (як було спочатку) */
      --sidebar-width-desktop: 28px;    /* ФІКСОВАНА ширина за запитом */
      --sidebar-height-desktop: 244px;  /* ФІКСОВАНА висота за запитом */
      --sidebar-gap-desktop: 16px;      /* Відступ між іконками (зменшено) */
  
      /* Соціальна панель - Позиціонування МОБІЛЬНЕ */
      --sidebar-bottom-mobile: 20px;
      --sidebar-gap-mobile: 15px;
  }
  
  /* ==========================================================================
     2. Скидання Стилів та Глобальні Налаштування
     ========================================================================== */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; width: 100%; overflow-x: hidden; }
  body { background-color: var(--bg-body); color: var(--primary); font-family: var(--font-family); display: flex; justify-content: center; min-height: 100vh; }
  
  .page-wrapper {
      min-height: 100vh;
      width: 100%;
      display: flex;
      flex-direction: column;
      position: relative; /* Потрібен для indicator absolute */
      padding-top: var(--header-height);
      /* Паддінг знизу - запас під фіксовану панель та індикатор */
      /* Для десктопа розраховуємо на основі sidebar-offset-bottom */
      padding-bottom: calc(var(--sidebar-offset-bottom) + 30px);
  }
  
  /* ==========================================================================
     3. Header та Навігація (Десктоп)
     ========================================================================== */
  .main-header { width: 100%; background-color: var(--bg-header); position: fixed; top: 0; left: 0; height: var(--header-height); display: flex; justify-content: center; align-items: center; z-index: 1000; border-bottom: 1px solid var(--border-header); }
  .main-nav { display: flex; align-items: center; justify-content: space-between; width: var(--nav-width-desktop); height: var(--header-height); position: relative; gap: 10px; }
  
  /* Стилі посилань НАВІГАЦІЇ */
  .nav-link { color: var(--text-default); font-size: 0.9rem; font-weight: var(--font-weight-nav); letter-spacing: 0.05em; text-decoration: none; white-space: nowrap; display: inline-flex; justify-content: center; align-items: center; width: var(--nav-link-width); min-width: 100px; height: var(--nav-link-height); padding: 0 15px; position: relative; transition: color 0.2s ease-in-out; border-radius: 8px; }
  .nav-link:hover { color: var(--primary); }
  .nav-link.active-link { color: var(--primary); }
  .nav-link.active-link::after { content: ''; position: absolute; bottom: var(--underline-offset-y); left: 50%; transform: translateX(-50%); width: 50%; max-width: 45px; height: var(--underline-height); background-color: var(--primary); transition: width 0.3s ease; }
  
  /* Стилі ЛОГОТИПУ як посилання */
  .nav-logo-link { line-height: 0; flex-shrink: 0; order: 0; margin: 0 5px; position: relative; display: inline-block; }
  .nav-logo-link.active-link::after { content: ''; position: absolute; bottom: var(--underline-offset-y-logo); left: 50%; transform: translateX(-50%); width: 30px; height: var(--underline-height); background-color: var(--primary); }
  .nav-logo { height: 28px; width: auto; color: var(--primary); display: block; }
  .nav-toggle { display: none; }
  
  
  /* ==========================================================================
     4. Адаптивний Header (Мобільний)
     ========================================================================== */
  @media (max-width: 768px) {
      .main-header { padding: 0 15px; }
      .main-nav { width: 100%; gap: 0; justify-content: space-between; }
      .nav-logo-link { order: -1; margin: 0; }
      .nav-toggle { display: block; order: 2; background: none; border: none; color: var(--primary); font-size: 1.5rem; cursor: pointer; padding: 10px; line-height: 1; z-index: 1010; }
      .nav-link { display: none; order: 1; padding: 0; min-width: 0;}
  
      /* Стилі відкритого мобільного меню */
      .main-nav.active { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: var(--bg-mobile-menu); flex-direction: column; justify-content: flex-start; align-items: center; padding-top: calc(var(--header-height) + 20px); z-index: 1001; gap: 0; overflow-y: auto; }
      .main-nav.active .nav-logo-link { order: 0; margin-bottom: 20px; display: block; }
      .main-nav.active .nav-logo-link.active-link::after { display: none; }
      .main-nav.active .nav-link { display: block; width: 90%; max-width: 300px; height: auto; padding: 15px 20px; border-bottom: 1px solid var(--border-mobile-link); border-radius: 0; text-align: center; color: var(--text-default); margin-bottom: 5px; position: static; }
      .main-nav.active .nav-link:last-of-type { border-bottom: none; }
      .main-nav.active .nav-link:hover { color: var(--primary); background-color: var(--border-mobile-link); }
      .main-nav.active .nav-link.active-link { color: var(--primary); background-color: var(--border-mobile-link); }
      .main-nav.active .nav-link.active-link::after { display: none; }
      .main-nav.active .nav-toggle { position: absolute; top: 15px; right: 15px; z-index: 1011; }
  }
  
  /* ==========================================================================
     5. Бокова Панель Соц. Мереж (Адаптивна)
     ========================================================================== */
  .social-sidebar {
      /* --- ДЕСКТОП (Default) - Fixed позиціонування, задані розміри --- */
      position: fixed; /* Фіксоване */
      left: var(--sidebar-offset-left);
      bottom: var(--sidebar-offset-bottom);
      width: var(--sidebar-width-desktop);  /* Задано 28px */
      height: var(--sidebar-height-desktop); /* Задано 244px */
      display: flex;
      flex-direction: column;
      /* justify-content: center; або space-around / space-between? */
      align-items: center; /* Центрування іконок по горизонталі */
      gap: var(--sidebar-gap-desktop); /* Вертикальний відступ */
      padding: 10px 0; /* Додаємо трохи вертикального паддінгу всередині */
      z-index: 100;
      overflow: hidden; /* Якщо контент випадково переповнить */
      transition: all 0.3s ease; /* Плавний перехід для адаптації */
  }
  .social-sidebar a {
      color: var(--primary);
      font-size: 1rem; /* Трохи зменшено для вузького контейнера */
      text-decoration: none;
      transition: color 0.2s ease-in-out, transform 0.2s ease;
      display: inline-block;
      width: 100%; /* Займати всю доступну ширину (28px) */
      text-align: center; /* Центрувати іконку */
  }
  .social-sidebar a:hover {
      color: var(--text-default);
      transform: scale(1.05); /* Зменшений scale */
  }
  
  
  /* ==========================================================================
     6. Основний Контент (Hero Section)
     ========================================================================== */
  .main-content { flex-grow: 1; display: flex; justify-content: center; align-items: center; width: 100%; padding: 50px 20px; position: relative; z-index: 1; }
  .hero-section { display: flex; flex-direction: column; align-items: center; }
  .hero-image-container { width: clamp(300px, 30vw, 420px); aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient( circle, var(--hero-gradient-start) 0%, var(--hero-gradient-mid) 40%, var(--hero-gradient-end) 70% ); display: flex; justify-content: center; align-items: center; margin-bottom: 45px; position: relative; }
  .hero-image { max-width: 75%; max-height: 75%; object-fit: contain; }
  
  /* Заголовок з рівним кернінгом */
  .site-title { font-size: clamp(4rem, 9vw, 6.5rem); font-weight: var(--font-weight-title); line-height: 1; color: var(--primary); white-space: nowrap; display: flex; align-items: center; gap: var(--title-element-gap); }
  .title-logo { height: 0.85em; width: auto; color: var(--primary); display: inline-block; }
  
  
  /* ==========================================================================
     7. Індикатор прокрутки
     ========================================================================== */
  .scroll-indicator-container { width: 100%; position: absolute; bottom: 25px; left: 0; display: flex; justify-content: center; z-index: 50; }
  .scroll-indicator { width: 45px; height: 45px; border: 1px solid var(--border-scroll); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--primary); text-decoration: none; transition: background-color 0.2s ease-in-out; }
  .scroll-indicator i { font-size: 0.8rem; }
  .scroll-indicator:hover { background-color: var(--scroll-hover-bg); }
  
  
  /* ==========================================================================
     8. Адаптація для Планшетів та Мобільних (< 768px)
     ========================================================================== */
  @media (max-width: 768px) {
      /* Відступ знизу для page-wrapper */
      .page-wrapper {
           padding-bottom: calc(var(--sidebar-bottom-mobile) + 60px); /* Запас під мобільну панель */
      }
      /* Сайдбар стає фіксованим горизонтальним */
      .social-sidebar {
          /* Перевизначаємо стилі десктопа */
          position: fixed;
          flex-direction: row; /* Горизонтально */
          bottom: var(--sidebar-bottom-mobile); /* Відступ знизу */
          left: 50%; /* Центрування */
          transform: translateX(-50%); /* Точне центрування */
          width: auto;   /* Ширина по контенту */
          height: auto;  /* Висота по контенту */
          gap: var(--sidebar-gap-mobile); /* Горизонтальний відступ */
          background-color: rgba(0, 0, 0, 0.4);
          padding: 6px 12px;
          border-radius: 10px;
          max-width: 95%; /* Обмеження ширини */
          z-index: 100;
          overflow: visible; /* Дозволити іконкам виходити */
          transition: none; /* Можна прибрати анімацію зміни */
      }
       /* Повертаємо стандартний розмір іконки */
      .social-sidebar a {
          font-size: 1rem;
          width: auto; /* Ширина по іконці */
          text-align: initial;
      }
      .social-sidebar a:hover {
          transform: scale(1.05);
      }
  
      /* Адаптація заголовка і відступів */
      .site-title { gap: 0.5em; }
      .hero-image-container { margin-bottom: 30px; }
      .scroll-indicator-container { bottom: 20px; /* Може перекриватись sidebar, підніміть якщо треба */ }
  }
  
  /* ==========================================================================
     9. Адаптація Дуже Малих Екранів (< 480px)
     ========================================================================== */
  @media (max-width: 480px) {
      .nav-logo { height: 24px; } /* В хедері */
      .social-sidebar { gap: 12px; padding: 5px 10px; }
      .social-sidebar a { font-size: 0.95rem; }
      .site-title { gap: 0.4em; }
      .scroll-indicator-container { bottom: 15px; }
      .scroll-indicator { width: 40px; height: 40px; }
  }