/* ========================================
   CSS RESET & BASE STYLES
   ======================================== */

/* 1. Box-sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ========================================
   CSS VARIABLES (THEMES)
   ======================================== */

/* Темная тема (по умолчанию) */
:root {
  /* Colors */
  --color-bg: #1d1d1f;
  --color-bg-alt: #2d2d2f; /* Чуть светлее основного фона для выделения блока */
  --color-text: #f5f5f7;
  --color-text-secondary: #86868b;
  --color-accent: #2997ff;
  --color-border: #424245;

  /* Typography */
  --font-size-base: 16px;
  --font-size-lg: 1.25rem;
  --font-size-xl: 2rem;
  --font-size-2xl: 3rem;
  --font-size-3xl: 4rem;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 8rem;

  /* Layout */
  --container-max-width: 1200px;
  --border-radius: 8px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
}

/* Светлая тема (переключается через data-theme="light") */
[data-theme="light"] {
  --color-bg: #fbfbfd;
  --color-bg-alt: #f5f5f7; /* Чуть темнее основного фона (серый, как на apple.com) */
  --color-text: #1d1d1f;
  --color-text-secondary: #6e6e73;
  --color-accent: #0071e3;
  --color-border: #d2d2d7;
}

/* 2. Remove default margins and paddings */
* {
  margin: 0;
  padding: 0;
}

/* 3. Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* 4. Base body styles (ОБНОВЛЕННАЯ ВЕРСИЯ) */
body {
  min-height: 100vh;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}

/* 5. Images and media */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 6. Form elements inherit fonts */
input,
button,
textarea,
select {
  font: inherit;
}

/* 7. Remove list styles */
ul,
ol {
  list-style: none;
}

/* 8. Links */
a {
  text-decoration: none;
  color: inherit;
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(29, 29, 31, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-base);
}

/* Светлая тема для header */
[data-theme="light"] .header {
  background-color: rgba(251, 251, 253, 0.8);
}

.nav {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xs); /* Верх > Низ */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; /* Центрирует ВСЕ элементы по вертикали */
}

.nav__list {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.nav__link {
  color: var(--color-text);
  font-size: var(--font-size-base);
  transition: color var(--transition-fast);
  padding: 0.5rem 0; /* Фиксированный padding вместо переменной */
  display: inline-flex; /* Flexbox для идеального центрирования текста */
  align-items: center;
}

.nav__link:hover {
  color: var(--color-accent);
}

/* Кнопка переключения темы */
.theme-toggle {
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: 0.5rem; /* Фиксированный padding для соответствия ссылкам */
  display: inline-flex; /* Flexbox для центрирования SVG */
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
  margin-left: 0; /* Убираем, если добавлял */
}

.theme-toggle:hover {
  color: var(--color-accent);
}

/* ========================================
   THEME TOGGLE ICONS
   ======================================== */

.theme-toggle__icon {
  position: absolute;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.theme-toggle__icon--moon {
  opacity: 1;
  transform: rotate(0deg);
}

.theme-toggle__icon--sun {
  opacity: 0;
  transform: rotate(-90deg);
}

[data-theme="light"] .theme-toggle__icon--moon {
  opacity: 0;
  transform: rotate(90deg);
}

[data-theme="light"] .theme-toggle__icon--sun {
  opacity: 1;
  transform: rotate(0deg);
}

/* ========================================
   HERO SECTION
   ======================================== */

.hero {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(
    --spacing-md
  ); /* Отступы, чтобы на мобильных текст не прилипал к краям */
}

.hero__content {
  text-align: center; /* Центрируем текст внутри блока */
  max-width: 800px; /* Ограничиваем ширину, чтобы на больших экранах текст не растягивался */
}

.hero__title {
  font-size: var(--font-size-3xl); /* 4rem (64px) - крупно, как у Apple */
  font-weight: 600; /* Полужирный, но не жирный (Apple использует 600) */
  letter-spacing: -0.02em; /* Чуть сжимаем буквы для премиального вида */
  margin-bottom: var(--spacing-sm);
  line-height: 1.1;
}

.hero__subtitle {
  font-size: var(--font-size-xl); /* 2rem (32px) */
  color: var(--color-text-secondary); /* Приглушенный серый цвет */
  font-weight: 400;
  margin-bottom: var(--spacing-lg);
  line-height: 1.4;
}

/* Кнопка призыва к действию (Primary / Solid) */
.hero__cta {
  display: inline-block;
  padding: 0.8rem 1.8rem; /* Чуть шире, чем было */
  font-size: var(--font-size-base);
  font-weight: 500;

  /* Новые стили для залитой кнопки */
  background-color: var(--color-accent);
  color: #ffffff; /* Белый текст для максимального контраста на синем */
  border: 1px solid transparent; /* Убираем рамку, но оставляем место под нее, чтобы кнопка не "прыгала" при ховере */
  border-radius: 980px; /* Полное скругление (pill-shape) */

  /* Убираем uppercase, Apple использует обычный регистр для залитых кнопок */
  text-transform: none;
  letter-spacing: normal;

  /* Анимация появления (оставляем от прошлого шага) */
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    background-color var(--transition-fast);
}

/* Hover-эффект для залитой кнопки */
.hero__cta:hover {
  /* В стиле Apple при наведении на синюю кнопку она просто становится чуть темнее/насыщеннее */
  background-color: #0071e3; /* Чуть более темный оттенок синего для ховера */
  transform: translateY(-1px); /* Очень легкий подъем */
}

/* Анимация появления для CTA */
.hero__cta {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

/* Состояние после появления */
.hero__cta.appear {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   ABOUT SECTION
   ======================================== */

.about {
  /* Фон на всю ширину экрана */
  background-color: var(--color-bg-alt);
  padding: var(--spacing-xl) var(--spacing-md);
  transition: background-color var(--transition-base);
}

.about__title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.about__content {
  /* Контент центрируем и ограничиваем по ширине */
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.about__text {
  font-size: var(--font-size-lg);
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-lg);
}

/* ========================================
   TIMELINE
   ======================================== */

.timeline {
  max-width: 600px; /* Ограничиваем ширину, чтобы строки не были слишком длинными */
  margin: 0 auto; /* Центрируем сам блок таймлайна внутри .about__content */
  position: relative;
  padding-left: 2rem;
  text-align: left; /* Жестко задаем выравнивание текста по левому краю */
}

/* Вертикальная линия */
.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-border);
}

.timeline__item {
  position: relative;
  margin-bottom: var(--spacing-lg);
}

.timeline__item:last-child {
  margin-bottom: 0;
}

/* Точка на линии */
.timeline__item::before {
  content: "";
  position: absolute;
  left: -2rem; /* Позиционируем на линии */
  top: 0.5rem; /* Выравниваем по верху даты */
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-accent);
  border: 2px solid var(--color-bg);
  transform: translateX(-5px); /* Центрируем точку на линии */
}

.timeline__date {
  font-size: var(--font-size-base);
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.timeline__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text);
}

.timeline__text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ========================================
   CONTACTS SECTION
   ======================================== */

.contacts {
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
}

.contacts__title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
}

.contacts__links {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md); /* Отступы между иконками */
}

.contacts__link {
  color: var(--color-text-secondary);
  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
  display: inline-flex; /* Чтобы SVG вел себя как блок для анимации */
  align-items: center;
  justify-content: center;
}

.contacts__link:hover {
  color: var(--color-accent);
  transform: translateY(-2px); /* Легкий подъем при наведении */
}

/* Стили для SVG внутри ссылок */
.contacts__link svg {
  width: 24px;
  height: 24px;
}

/* ========================================
   FOOTER
   ======================================== */

.footer {
  padding: var(--spacing-md);
  text-align: center;
  border-top: 1px solid var(--color-border);
}

.footer__text {
  font-size: 0.875rem; /* Чуть меньше базового (14px) */
  color: var(--color-text-secondary);
}

/* ========================================
   UTILITIES & SHARED TRANSITIONS
   ======================================== */

/* Группируем все элементы, которые плавно меняют цвет при наведении */
.nav__link,
.theme-toggle,
.lang-toggle,
.contacts__link {
  transition: color var(--transition-fast);
}

/* Группируем элементы, которые меняют цвет и немного "всплывают" */
.hero__cta,
.contacts__link {
  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}