/* ════════════════════════════════════════════════════════════════
   ITERSALUTE — ТАБЛИЦА СТИЛЕЙ (style.css)
   ════════════════════════════════════════════════════════════════

   ЧТО ТАКОЕ CSS?
   CSS — это «внешность» сайта: цвета, размеры, отступы, шрифты.
   Каждое правило выглядит так:
       .имя-элемента { свойство: значение; }
   Пример: .hero-title { font-size: 3rem; }  — размер заголовка

   КАК БЕЗОПАСНО РЕДАКТИРОВАТЬ:
   1. Меняй ТОЛЬКО значения после двоеточия (до точки с запятой).
   2. Не удаляй фигурные скобки {} и не меняй имена классов (слова с точкой).
   3. После каждого изменения открой index.html в браузере и проверь.
   4. Если что-то сломалось — нажми Ctrl+Z (отменить) в редакторе.

   СТРУКТУРА ФАЙЛА:
    1.  ЦВЕТОВАЯ ПАЛИТРА (CSS-переменные) ← редактируй цвета здесь
    2.  СБРОС И БАЗОВЫЕ СТИЛИ
    3.  АНИМАЦИИ
    4.  НАВИГАЦИЯ (шапка сайта)
    5.  ЛОГОТИП
    6.  ССЫЛКИ И КНОПКА CTA В НАВИГАЦИИ
    7.  HERO — главный экран
    8.  КНОПКИ (первичная и призрачная)
    9.  СТАТИСТИКА В HERO (35+, 1 день, −30%...)
   10.  СЕКЦИИ — общие стили для всех разделов
   11.  GLASS-КАРТОЧКА — переиспользуемый стеклянный блок
   12.  СЕКЦИЯ CHECK-UP (что входит в пакет)
   13.  СЕКЦИЯ DIAGNOSTICS (диагностика на месте)
   14.  СЕКЦИЯ VALUE (ценность для бизнеса)
   15.  СЕКЦИЯ FISCAL (налоговая выгода, гистограмма)
   16.  СЕКЦИЯ HOW (как это работает — 3 шага)
   17.  СЕКЦИЯ MODEL (операционная модель — 4 актора)
   18.  СЕКЦИЯ CONSULTATION (видеоконсультация)
   19.  СЕКЦИЯ CTA (финальный призыв к действию)
   20.  FOOTER
   21.  МОДАЛЬНОЕ ОКНО (детали пакетов)
   22.  ВКЛАДКИ В МОДАЛЕ (Standard / Extended)
   23.  БАННЕР ON-SITE В МОДАЛЕ
   24.  АККОРДЕОН В МОДАЛЕ (блоки анализов)
   25.  БАННЕР ВИДЕОКОНСУЛЬТА В МОДАЛЕ
   26.  АНИМАЦИЯ SCROLL-REVEAL
   27.  АДАПТИВ (мобильный < 900px и < 640px)

═══════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1. ЦВЕТОВАЯ ПАЛИТРА
   ────────────────────────────────────────────────────────────────
   ЭТО ГЛАВНОЕ МЕСТО ДЛЯ СМЕНЫ ЦВЕТОВ.
   Переменная — это имя для цвета. Меняешь значение один раз →
   цвет меняется везде на сайте где используется эта переменная.

   КАК ЗАДАТЬ ЦВЕТ:
   • #051018  — HEX-код (подбери на https://colorpicker.me)
   • rgba(0,212,255, 0.5) — цвет + прозрачность (0=прозрачный, 1=полный)

   СОВЕТ: чтобы полностью сменить палитру, замени только значения
   переменных --glow, --glow2, --emerald, --teal — этого достаточно.
   ════════════════════════════════════════════════════════════════ */
:root {
  /* --- Фоновые цвета (от самого тёмного к более светлому) --- */
  --ink:   #051018;   /* самый тёмный фон страницы */
  --deep:  #071e2e;   /* тёмно-синий, фон модала */
  --ocean: #0a3347;   /* средний синий */
  --teal:  #0d5c73;   /* бирюзовый (кнопки, акценты) */
  --emerald: #0e7c7b; /* изумрудный (кнопки primary, nav CTA) */

  /* --- Акцентные / неоновые цвета --- */
  --glow:  #00d4ff;   /* голубой неон — основной акцент, иконки, ссылки */
  --glow2: #00ffcc;   /* мятный неон — вторичный акцент, галочки */

  /* --- Стеклянные эффекты --- */
  --glass:        rgba(255,255,255,0.045);  /* полупрозрачный фон карточек */
  --glass-border: rgba(0,212,255,0.18);     /* граница стеклянных блоков */

  /* --- Текст --- */
  --text:  #e4f4ff;                 /* основной текст (почти белый, чуть голубой) */
  --muted: rgba(196,228,245,0.6);   /* вторичный текст (полупрозрачный) */
  --white: #ffffff;                 /* чистый белый (заголовки) */
}


/* ════════════════════════════════════════════════════════════════
   2. СБРОС И БАЗОВЫЕ СТИЛИ
   ────────────────────────────────────────────────────────────────
   Убирает стандартные отступы браузера и задаёт основу страницы.
   РЕКОМЕНДУЮ НЕ ТРОГАТЬ — только если знаешь что делаешь.
   ════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* smooth scroll — плавная прокрутка к якорям (#checkup, #value...) */
html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif; /* ← основной шрифт. Менять в index.html (ссылка Google Fonts) */
  background: var(--ink);
  color: var(--text);
  overflow-x: hidden;  /* убирает горизонтальную прокрутку */
  min-height: 100vh;
}

/* Анимированный фон-канвас (частицы) — позиционируется поверх фона */
#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;  /* клики "проходят сквозь" холст */
}


/* ════════════════════════════════════════════════════════════════
   3. АНИМАЦИИ
   ────────────────────────────────────────────────────────────────
   @keyframes — описание движения.
   fadeUp — появление элементов снизу (Hero, кнопки, бейдж)
   pulse  — пульсирующая точка в hero-badge
   barGrow — рост полоски в секции Fiscal
   modalIn — появление модального окна

   КАК ИЗМЕНИТЬ СКОРОСТЬ АНИМАЦИИ:
   Найди нужный элемент ниже и поменяй число перед словом "s" (секунды).
   Пример: animation: fadeUp 0.8s → 0.8s это длительность анимации.
   ════════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

@keyframes barGrow {
  from { width: 0 !important; }
  /* до нужного значения из класса bar-fill-full / bar-fill-real */
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}


/* ════════════════════════════════════════════════════════════════
   4. НАВИГАЦИЯ — фиксированная шапка сайта
   ────────────────────────────────────────────────────────────────
   Шапка всегда видна при прокрутке (position: fixed).

   ЧТО МОЖНО МЕНЯТЬ:
   • height: 72px → высота шапки (числа больше = выше шапка)
   • padding: 0 5vw → горизонтальные отступы (5vw = 5% ширины экрана)
   • background: rgba(5,16,24,0.72) → 4-й параметр = непрозрачность
     0.0 = полностью прозрачная, 1.0 = полностью непрозрачная
   ════════════════════════════════════════════════════════════════ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  height: 72px; /* ← высота навбара */
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  background: rgba(5,16,24,0.72); /* ← 0.72 = непрозрачность фона nav */
  border-bottom: 1px solid var(--glass-border);
}


/* ════════════════════════════════════════════════════════════════
   5. ЛОГОТИП
   ────────────────────────────────────────────────────────────────
   .nav-logo — ссылка-обёртка логотипа
   .logo-hex — SVG-иконка (точечная S-форма)
   .logo-text — текст "iter" + <em>salute</em>

   КАК ЗАМЕНИТЬ ЛОГОТИП НА КАРТИНКУ:
   → Смотри инструкцию в index.html, раздел "ЛОГОТИП".
   → Размер логотипа: меняй width/height у .logo-hex или у тега <img>

   ЧТО МОЖНО МЕНЯТЬ:
   • font-size: 1.45rem → размер текста "itersalute"
   • color: var(--glow) в .logo-text em → цвет слова "salute"
   ════════════════════════════════════════════════════════════════ */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;       /* ← расстояние между иконкой и текстом */
  text-decoration: none;
}

/* SVG-иконка логотипа */
.logo-hex {
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(0,212,255,0.35));
  transition: filter 0.3s;
}
.nav-logo:hover .logo-hex {
  filter: drop-shadow(0 0 12px rgba(0,212,255,0.6));
}

.logo-text {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.45rem; /* ← размер текста логотипа */
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
}
.logo-text em {
  color: var(--glow); /* ← цвет части "salute" (голубой) */
  font-style: normal;
}


/* ════════════════════════════════════════════════════════════════
   6. ССЫЛКИ И КНОПКА CTA В НАВИГАЦИИ
   ────────────────────────────────────────────────────────────────
   .nav-links a — обычные ссылки (Check-up, Vantaggi...)
   .nav-cta — кнопка "Contattaci" (зелёная пилюля)

   ЧТО МОЖНО МЕНЯТЬ:
   • gap: 36px → расстояние между пунктами меню
   • font-size: 0.9rem → размер текста ссылок
   • border-radius: 40px → скругление кнопки (40px = почти круглая)
   ════════════════════════════════════════════════════════════════ */
.nav-links {
  display: flex;
  gap: 36px; /* ← расстояние между ссылками */
  list-style: none;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;   /* ← все буквы ЗАГЛАВНЫЕ. Убери эту строку для обычного регистра */
  transition: color 0.25s;
}
.nav-links a:hover { color: var(--glow); } /* ← цвет при наведении мыши */

/* Кнопка-пилюля "Contattaci" */
.nav-cta {
  background: linear-gradient(135deg, var(--emerald), var(--teal));
  color: var(--white) !important;
  padding: 9px 22px !important; /* ← отступы внутри кнопки (верх/низ, лево/право) */
  border-radius: 40px;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.9rem !important;
  border: 1px solid var(--glass-border);
  transition: box-shadow 0.3s, transform 0.2s !important;
}
.nav-cta:hover {
  box-shadow: 0 0 24px rgba(0,212,255,0.3) !important;
  transform: translateY(-1px); /* ← лёгкий подъём при наведении */
  color: var(--white) !important;
}


/* ════════════════════════════════════════════════════════════════
   7. HERO — главный экран
   ────────────────────────────────────────────────────────────────
   .hero-badge — маленький бейдж над заголовком (мигающая точка)
   .hero-title — главный заголовок H1
   .hero-title .accent — голубой градиентный текст в заголовке
   .hero-sub — подзаголовок под H1
   .hero-actions — ряд кнопок

   ЧТО МОЖНО МЕНЯТЬ:
   • padding: 120px 5vw 80px → отступы Hero (верх/бока/низ)
   • font-size: clamp(2.6rem, 6vw, 5.5rem) → размер заголовка
     clamp(минимум, адаптив, максимум) — автоматически масштабируется
   • max-width: 900px → максимальная ширина заголовка
   ════════════════════════════════════════════════════════════════ */
#hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;   /* ← занимает весь экран по высоте */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 5vw 80px; /* отступы: верх / бока / низ */
}

/* Бейдж "Check-up aziendale completo" */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.25);
  border-radius: 40px;
  padding: 6px 18px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--glow);
  margin-bottom: 36px;
  animation: fadeUp 0.8s ease both;
}

/* Мигающая точка перед текстом бейджа */
.hero-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 8px var(--glow);
  animation: pulse 2s ease-in-out infinite; /* ← убери всю эту строку, чтобы точка не мигала */
}

/* Главный заголовок */
.hero-title {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: clamp(2.6rem, 6vw, 5.5rem); /* мин / адаптив / макс размер */
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--white);
  max-width: 900px;
  animation: fadeUp 0.9s 0.1s ease both;
}

/* Голубой градиентный текст ("salute reale") */
.hero-title .accent {
  background: linear-gradient(120deg, var(--glow), var(--glow2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Чтобы убрать градиент и сделать просто голубым:
     замени всё это на: color: var(--glow); */
}

/* Подзаголовок под H1 */
.hero-sub {
  margin-top: 28px;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 300;
  color: var(--muted);
  max-width: 640px;
  line-height: 1.65;
  animation: fadeUp 1s 0.2s ease both;
}

/* Контейнер для кнопок */
.hero-actions {
  margin-top: 48px;
  display: flex;
  gap: 16px;        /* ← расстояние между кнопками */
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeUp 1s 0.3s ease both;
}


/* ════════════════════════════════════════════════════════════════
   8. КНОПКИ
   ────────────────────────────────────────────────────────────────
   .btn-primary — основная кнопка (тёмно-бирюзовый фон, неоновая граница)
   .btn-ghost   — второстепенная кнопка (прозрачный фон)

   ЧТО МОЖНО МЕНЯТЬ:
   • padding: 16px 36px → размер кнопки (верх/низ, лево/право)
   • border-radius: 50px → скругление (50px = «пилюля»)
   • font-size: 1rem → размер текста внутри кнопки
   • background → цвет фона (в btn-primary: градиент, в btn-ghost: прозрачный)
   ════════════════════════════════════════════════════════════════ */

/* Основная кнопка */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;   /* ← размер кнопки */
  background: linear-gradient(135deg, #0e7c7b, #00d4ff22);
  border: 1px solid rgba(0,212,255,0.4);
  border-radius: 50px;   /* ← скругление краёв */
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 0 30px rgba(0,212,255,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(0,212,255,0.08));
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover {
  box-shadow: 0 0 50px rgba(0,212,255,0.28), inset 0 1px 0 rgba(255,255,255,0.1);
  transform: translateY(-2px); /* ← подъём при наведении */
}

/* Призрачная кнопка */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 50px;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  color: var(--white);
  border-color: rgba(0,212,255,0.3);
  background: rgba(0,212,255,0.06);
}


/* ════════════════════════════════════════════════════════════════
   9. СТАТИСТИКА В HERO — блок с цифрами (35+, 1 день, −30%, Art.51)
   ────────────────────────────────────────────────────────────────
   .hero-stats — контейнер (flex-ряд)
   .hero-stat  — одна цифра + подпись
   .stat-num   — большая цифра (голубая)
   .stat-label — маленькая подпись

   Текст цифр — в index.html, секция HERO.
   ════════════════════════════════════════════════════════════════ */
.hero-stats {
  margin-top: 80px;
  display: flex;
  gap: 0;
  animation: fadeUp 1s 0.4s ease both;
}

.hero-stat {
  padding: 24px 48px;  /* ← отступы вокруг каждой цифры */
  border-right: 1px solid rgba(0,212,255,0.12);
  text-align: center;
}
.hero-stat:last-child { border-right: none; }

.stat-num {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 2.2rem; /* ← размер большой цифры */
  font-weight: 700;
  color: var(--glow);
  line-height: 1;
  text-shadow: 0 0 20px rgba(0,212,255,0.4); /* ← неоновое свечение под цифрой */
}

.stat-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ════════════════════════════════════════════════════════════════
   10. СЕКЦИИ — общие стили
   ────────────────────────────────────────────────────────────────
   section — все разделы страницы
   .section-label — маленькая надпись-категория над заголовком (голубая)
   .section-title — H2 каждого раздела
   .section-desc  — описание под H2

   ЧТО МОЖНО МЕНЯТЬ:
   • padding: 100px 5vw → вертикальные отступы разделов
     100px = расстояние сверху и снизу каждого раздела
   ════════════════════════════════════════════════════════════════ */
section {
  position: relative;
  z-index: 1;
  padding: 100px 5vw; /* ← вертикальные отступы разделов */
}

.section-label {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--glow);
  margin-bottom: 16px;
  font-weight: 500;
}

.section-title {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--white);
  max-width: 700px;
}

.section-desc {
  margin-top: 20px;
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--muted);
  max-width: 600px;
  line-height: 1.7;
}


/* ════════════════════════════════════════════════════════════════
   11. GLASS-КАРТОЧКА — переиспользуемый компонент
   ────────────────────────────────────────────────────────────────
   Используется повсюду: checkup, how, model, cta, diagnostics...
   Чтобы изменить внешний вид ВСЕХ карточек на сайте — редактируй здесь.

   ЧТО МОЖНО МЕНЯТЬ:
   • border-radius: 20px → скругление углов (0 = острые, 20px = мягкие)
   • background: rgba(255,255,255,0.035) → прозрачность фона карточки
     (0.035 = почти полностью прозрачная; увеличь до 0.1 для более заметного фона)
   • transform: translateY(-3px) → высота подъёма при наведении
   ════════════════════════════════════════════════════════════════ */
.glass-card {
  background: rgba(255,255,255,0.035); /* ← прозрачность фона карточки */
  border: 1px solid rgba(0,212,255,0.14);
  border-radius: 20px; /* ← скругление углов карточек */
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.glass-card:hover {
  border-color: rgba(0,212,255,0.28);
  box-shadow: 0 8px 48px rgba(0,212,255,0.08);
  transform: translateY(-3px); /* ← подъём при наведении */
}


/* ════════════════════════════════════════════════════════════════
   12. СЕКЦИЯ CHECK-UP (#checkup)
   ────────────────────────────────────────────────────────────────
   Сетка из 8 карточек с иконками (анализы, ЭКГ, спирометрия...)
   .checkup-grid — сетка
   .checkup-item — отдельная карточка
   .checkup-icon — иконка-квадрат с эмодзи

   КАК ДОБАВИТЬ КАРТОЧКУ: в index.html скопируй один блок
   <div class="checkup-item glass-card">...</div>

   ЧТО МОЖНО МЕНЯТЬ:
   • grid-template-columns: repeat(6, 1fr) → количество колонок на десктопе
     repeat(4, 1fr) = 4 в ряд, repeat(3, 1fr) = 3 в ряд
   ════════════════════════════════════════════════════════════════ */
#checkup {
  background: linear-gradient(180deg, transparent, rgba(7,30,46,0.5) 50%, transparent);
}

.checkup-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* ← 6 в ряд на десктопе */
  gap: 16px;      /* ← расстояние между карточками */
  margin-top: 56px;
}

.checkup-item {
  padding: 28px 22px;
  text-align: center;
}

.checkup-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 1.5rem; /* ← размер эмодзи */
  background: linear-gradient(135deg, rgba(0,212,255,0.12), rgba(0,255,204,0.06));
  border: 1px solid rgba(0,212,255,0.18);
}

.checkup-item h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 6px;
}

.checkup-item p {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}


/* ════════════════════════════════════════════════════════════════
   13. СЕКЦИЯ DIAGNOSTICS (#diagnostics) — диагностика на месте
   ────────────────────────────────────────────────────────────────
   .diag-wrapper — 2-колоночный грид (список + панель)
   .diag-row     — строка в списке (иконка + текст)
   .diag-panel   — правый блок "Perché farlo in azienda?"
   .pill-list/.pill — теги-пилюли (Zero spostamenti, 1 sola giornata...)
   ════════════════════════════════════════════════════════════════ */
#diagnostics { }

.diag-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr; /* ← две равные колонки */
  gap: 32px;
  margin-top: 56px;
  align-items: start;
}

.diag-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.diag-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(0,212,255,0.1);
  transition: all 0.25s;
}
.diag-row:hover {
  background: rgba(0,212,255,0.06);
  border-color: rgba(0,212,255,0.22);
}

.diag-row .icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(14,124,123,0.15));
  font-size: 1rem;
}
.diag-row span { font-size: 0.92rem; color: var(--text); font-weight: 400; }

/* Правая панель */
.diag-panel {
  padding: 40px;
  position: relative;
  overflow: hidden;
}
.diag-panel::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,0.1), transparent 70%);
  pointer-events: none;
}
.diag-panel h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
}
.diag-panel p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Теги-пилюли */
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 40px;
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.2);
  font-size: 0.8rem;
  color: var(--glow);
  font-weight: 500;
}


/* ════════════════════════════════════════════════════════════════
   14. СЕКЦИЯ VALUE (#value) — ценность для бизнеса
   ────────────────────────────────────────────────────────────────
   Сетка из 5 карточек (Dipendenti, Management, Azienda...)
   .value-num — большое серое число 01–05

   ЧТО МОЖНО МЕНЯТЬ:
   • minmax(260px, 1fr) → минимальная ширина карточки (260px)
     Уменьши число — больше карточек в ряд
   ════════════════════════════════════════════════════════════════ */
#value {
  background: linear-gradient(180deg, transparent, rgba(10,51,71,0.35) 50%, transparent);
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 56px;
}

.value-card {
  padding: 36px 30px;
  position: relative;
  overflow: hidden;
}

.value-num {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 3rem; /* ← размер декоративного числа */
  font-weight: 800;
  color: rgba(0,212,255,0.12); /* ← очень прозрачный — почти невидимый декор */
  line-height: 1;
  margin-bottom: 20px;
  letter-spacing: -0.05em;
}

.value-card h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 10px;
}
.value-card p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
}


/* ════════════════════════════════════════════════════════════════
   15. СЕКЦИЯ FISCAL (#fiscal) — налоговая выгода
   ────────────────────────────────────────────────────────────────
   .fiscal-visual      — контейнер (flex, 2 блока)
   .fiscal-bar-wrap    — левый блок с гистограммой
   .bar-row            — строка гистограммы (заголовок + полоска)
   .bar-fill-full      — полная полоска (€400, 100%)
   .bar-fill-real      — частичная полоска (€280, 70%)
   .fiscal-info        — правый блок с текстом и галочками
   .check-row          — строка с галочкой (зелёный кружок)

   КАК ИЗМЕНИТЬ ПРОЦЕНТ ПОЛОСКИ:
   • .bar-fill-real { width: 70%; } → 70 = 70% от полной ширины
     Если реальная цена 60% от номинала — поставь 60%
   ════════════════════════════════════════════════════════════════ */
#fiscal { }

.fiscal-visual {
  display: flex;
  gap: 32px;
  margin-top: 56px;
  align-items: stretch;
  flex-wrap: wrap;
}

.fiscal-bar-wrap {
  flex: 1;
  min-width: 260px;
  padding: 44px 40px;
  position: relative;
  overflow: hidden;
}
.fiscal-bar-wrap::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(0,255,204,0.07), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.fiscal-bar { display: flex; flex-direction: column; gap: 20px; }

.bar-row { display: flex; flex-direction: column; gap: 8px; }

.bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.bar-label { font-size: 0.85rem; color: var(--muted); }
.bar-value {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.4rem; /* ← размер цифры €400 / €280 */
  font-weight: 700;
  color: var(--white);
}

.bar-track {
  height: 8px; /* ← толщина полоски (пикселей) */
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 4px;
  animation: barGrow 1.4s 0.5s ease both;
}
.bar-fill-full { background: linear-gradient(90deg, var(--teal), var(--glow)); width: 100%; }
.bar-fill-real { background: linear-gradient(90deg, var(--emerald), var(--glow2)); width: 70%; } /* ← % реальной стоимости */

.bar-note { font-size: 0.75rem; color: var(--glow2); margin-top: 2px; }

/* Правый блок — текст + галочки */
.fiscal-info {
  flex: 1;
  min-width: 260px;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.fiscal-info h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--white);
}
.fiscal-info p { font-size: 0.92rem; color: var(--muted); line-height: 1.7; }

.check-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--text);
}
.check-row::before {
  content: '✓';       /* ← символ галочки */
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,255,204,0.12);
  border: 1px solid rgba(0,255,204,0.25);
  color: var(--glow2);
  font-size: 0.7rem;
  font-weight: 700;
}


/* ════════════════════════════════════════════════════════════════
   16. СЕКЦИЯ HOW (#how) — как это работает (3 шага)
   ────────────────────────────────────────────────────────────────
   .how-grid — 3-колоночный грид
   .how-card — карточка шага
   .how-step — кружок с номером шага

   КАК ДОБАВИТЬ 4-й ШАГ:
   1. В index.html скопируй один .how-card блок и измени текст
   2. В style.css поменяй: grid-template-columns: repeat(4, 1fr);
   ════════════════════════════════════════════════════════════════ */
#how {
  background: linear-gradient(180deg, transparent, rgba(7,30,46,0.5) 50%, transparent);
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ← 3 колонки */
  gap: 24px;
  margin-top: 56px;
}

.how-card {
  padding: 44px 32px;
  text-align: center;
  position: relative;
}

/* Кружок с номером шага */
.how-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--glow);
  border: 1px solid rgba(0,212,255,0.3);
  background: rgba(0,212,255,0.06);
  margin-bottom: 24px;
  box-shadow: 0 0 20px rgba(0,212,255,0.1);
}

.how-card h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
}
.how-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.65; }


/* ════════════════════════════════════════════════════════════════
   17. СЕКЦИЯ MODEL (#model) — операционная модель (4 актора)
   ────────────────────────────────────────────────────────────────
   .model-flow — 4-колоночный грид с горизонтальной линией сверху
   .model-actor — колонка с иконкой, названием, задачами
   .actor-circle — круглая иконка (emoji)

   КАК ДОБАВИТЬ 5-го АКТОРА:
   1. В index.html скопируй один .model-actor
   2. Здесь поменяй: grid-template-columns: repeat(5, 1fr);
   ════════════════════════════════════════════════════════════════ */
#model { }

.model-flow {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* ← 4 актора */
  gap: 0;
  position: relative;
}

/* Горизонтальная линия через центр между акторами */
.model-flow::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 12.5%; right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.3), transparent);
}

.model-actor { padding: 28px 20px; text-align: center; position: relative; }

.actor-circle {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,212,255,0.3);
  background: rgba(0,212,255,0.06);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  font-size: 1.8rem; /* ← размер эмодзи актора */
  box-shadow: 0 0 24px rgba(0,212,255,0.1);
  backdrop-filter: blur(8px);
}

.actor-name {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}

.actor-tasks { display: flex; flex-direction: column; gap: 4px; }
.actor-tasks span { font-size: 0.78rem; color: var(--muted); line-height: 1.4; }


/* ════════════════════════════════════════════════════════════════
   18. СЕКЦИЯ CONSULTATION (#consultation) — видеоконсультация
   ────────────────────────────────────────────────────────────────
   .consult-grid — 2×2 грид карточек
   .consult-card — карточка услуги
   .consult-num  — маленький нумерованный заголовок (с кружком)

   ПРИМЕЧАНИЕ: цифра в кружке берётся из атрибута data-n="1" в HTML.
   ════════════════════════════════════════════════════════════════ */
#consultation {
  background: linear-gradient(180deg, transparent, rgba(10,51,71,0.4) 50%, transparent);
}

.consult-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* ← 2 колонки */
  gap: 32px;
  margin-top: 56px;
}

.consult-card {
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
}
.consult-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,0.07), transparent 70%);
  pointer-events: none;
}

/* Нумерованная метка с кружком ("1 Commento dei risultati") */
.consult-num {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--glow);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.consult-num::before {
  content: attr(data-n); /* ← берёт цифру из data-n="1" в HTML */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,212,255,0.12);
  border: 1px solid rgba(0,212,255,0.25);
  font-size: 0.7rem;
  color: var(--glow);
}

.consult-card h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
}
.consult-card p { font-size: 0.92rem; color: var(--muted); line-height: 1.7; }


/* ════════════════════════════════════════════════════════════════
   19. СЕКЦИЯ CTA (#cta) — финальный призыв к действию
   ────────────────────────────────────────────────────────────────
   .cta-box       — центральный блок (стеклянная карточка)
   .discount-badge — бейдж "−20% sul primo progetto"
   .cta-contacts  — строка с email и телефоном
   .contact-item  — иконка + ссылка
   .address-item  — адрес под контактами
   ════════════════════════════════════════════════════════════════ */
#cta {
  padding: 120px 5vw;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Фоновое свечение за CTA-блоком */
#cta::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, rgba(0,212,255,0.06), transparent 70%);
  pointer-events: none;
}

.cta-box {
  max-width: 720px;  /* ← максимальная ширина блока */
  margin: 0 auto;
  padding: 64px 56px;
  text-align: center;
}

/* Бейдж скидки */
.discount-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 40px;
  background: linear-gradient(135deg, rgba(0,255,204,0.1), rgba(0,212,255,0.08));
  border: 1px solid rgba(0,255,204,0.25);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--glow2);
  margin-bottom: 32px;
  letter-spacing: 0.04em;
}

.cta-box h2 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 16px;
  letter-spacing: -0.025em;
}
.cta-box p { font-size: 1rem; color: var(--muted); margin-bottom: 40px; line-height: 1.65; }

.cta-contacts {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--muted);
}
.contact-item .ico {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
}
.contact-item a { color: var(--text); text-decoration: none; }
.contact-item a:hover { color: var(--glow); }

.address-item {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}


/* ════════════════════════════════════════════════════════════════
   20. FOOTER
   ════════════════════════════════════════════════════════════════ */
footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(0,212,255,0.1);
  padding: 28px 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 12px;
}


/* ════════════════════════════════════════════════════════════════
   21. МОДАЛЬНОЕ ОКНО
   ────────────────────────────────────────────────────────────────
   .modal-overlay — тёмный полупрозрачный фон (blur)
   .modal-box     — сам блок с содержимым
   .modal-close   — кнопка × закрыть
   .modal-title   — заголовок модала
   .modal-sub     — подзаголовок модала
   ════════════════════════════════════════════════════════════════ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5,16,24,0.88);      /* ← затемнение фона */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-y: auto;
  padding: 40px 20px;
  align-items: flex-start;
  justify-content: center;
}
.modal-overlay.active { display: flex; }

.modal-box {
  background: rgba(7,30,46,0.95);
  border: 1px solid rgba(0,212,255,0.2);
  border-radius: 24px;
  max-width: 860px; /* ← максимальная ширина модала */
  width: 100%;
  padding: 56px 52px;
  position: relative;
  backdrop-filter: blur(24px);
  animation: modalIn 0.3s ease;
}

/* Кнопка закрыть */
.modal-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.2);
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  line-height: 1;
}
.modal-close:hover { background: rgba(0,212,255,0.15); color: var(--white); }

.modal-title {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
  letter-spacing: -0.025em;
}

.modal-sub {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 40px;
  line-height: 1.6;
}


/* ════════════════════════════════════════════════════════════════
   22. ВКЛАДКИ В МОДАЛЕ (Standard / Extended)
   ────────────────────────────────────────────────────────────────
   .pkg-tabs  — строка с кнопками вкладок
   .pkg-tab   — кнопка вкладки (неактивная)
   .pkg-tab.active — активная вкладка (подсвеченная)
   .pkg-content    — содержимое вкладки (скрыто/показано)
   ════════════════════════════════════════════════════════════════ */
.pkg-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.pkg-tab {
  padding: 10px 24px;
  border-radius: 40px;
  border: 1px solid rgba(0,212,255,0.2);
  background: transparent;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s;
}
.pkg-tab.active {
  background: linear-gradient(135deg, rgba(14,124,123,0.4), rgba(0,212,255,0.12));
  border-color: rgba(0,212,255,0.4);
  color: var(--white);
  box-shadow: 0 0 16px rgba(0,212,255,0.1);
}

.pkg-content { display: none; }
.pkg-content.active { display: block; }


/* ════════════════════════════════════════════════════════════════
   23. БАННЕР ON-SITE В МОДАЛЕ
   ────────────────────────────────────────────────────────────────
   Синий баннер "Diagnostica on-site inclusa per ogni dipendente"
   .onsite-banner — сам баннер
   .onsite-tags   — строка с тегами
   .onsite-tag    — отдельный тег (Anamnesi, ECG...)
   ════════════════════════════════════════════════════════════════ */
.onsite-banner {
  padding: 24px 28px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(14,124,123,0.18), rgba(0,212,255,0.06));
  border: 1px solid rgba(0,212,255,0.2);
  margin-bottom: 28px;
}
.onsite-banner h4 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--glow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.onsite-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.onsite-tag {
  padding: 5px 14px;
  border-radius: 40px;
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.2);
  font-size: 0.8rem;
  color: var(--text);
}


/* ════════════════════════════════════════════════════════════════
   24. АККОРДЕОН В МОДАЛЕ — блоки анализов (A, B, C/D, G, H, I...)
   ────────────────────────────────────────────────────────────────
   .block-group   — весь аккордеон (открытый = класс .open)
   .block-header  — кликабельный заголовок
   .block-tag     — метка блока (A, B, C/D...)
   .block-name    — название блока
   .block-arrow   — стрелка ▼ (поворачивается при открытии)
   .block-body    — содержимое (скрыто/показано)
   .exam-list/.exam-item — список анализов внутри блока
   ════════════════════════════════════════════════════════════════ */
.block-group {
  margin-bottom: 24px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,212,255,0.1);
}

.block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: background 0.2s;
  user-select: none;
}
.block-header:hover { background: rgba(0,212,255,0.05); }

.block-header-left { display: flex; align-items: center; gap: 12px; }

.block-tag {
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(0,212,255,0.1);
  border: 1px solid rgba(0,212,255,0.18);
  font-size: 0.7rem;
  color: var(--glow);
  font-weight: 600;
  font-family: 'Roboto Condensed', sans-serif;
}

.block-name {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--white);
}

.block-arrow { color: var(--muted); font-size: 0.75rem; transition: transform 0.25s; }
.block-group.open .block-arrow { transform: rotate(180deg); }  /* стрелка переворачивается */

.block-body {
  display: none;   /* скрыто по умолчанию */
  padding: 16px 20px;
  border-top: 1px solid rgba(0,212,255,0.08);
  background: rgba(255,255,255,0.015);
}
.block-group.open .block-body { display: block; } /* показывается при открытии */

.block-desc {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.6;
}

.exam-list { display: flex; flex-direction: column; gap: 6px; }
.exam-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  font-size: 0.82rem;
  color: var(--text);
}
.exam-item::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--glow);
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--glow); /* ← светящаяся точка перед пунктом */
}


/* ════════════════════════════════════════════════════════════════
   25. БАННЕР ВИДЕОКОНСУЛЬТА В МОДАЛЕ
   ────────────────────────────────────────────────────────────────
   Зелёный баннер внизу каждой вкладки
   .consult-banner      — сам баннер
   .consult-banner-icon — большой эмодзи врача
   ════════════════════════════════════════════════════════════════ */
.consult-banner {
  margin-top: 28px;
  padding: 24px 28px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0,255,204,0.08), rgba(0,212,255,0.05));
  border: 1px solid rgba(0,255,204,0.2);
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.consult-banner-icon { font-size: 2rem; flex-shrink: 0; }
.consult-banner h4 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}
.consult-banner p { font-size: 0.83rem; color: var(--muted); line-height: 1.6; }


/* ════════════════════════════════════════════════════════════════
   26. АНИМАЦИЯ SCROLL-REVEAL
   ────────────────────────────────────────────────────────────────
   Элементы с классом .reveal появляются при прокрутке.
   Класс .visible добавляется через JavaScript (IntersectionObserver).

   ЧТО МОЖНО МЕНЯТЬ:
   • transition: opacity 0.7s → 0.7s — длительность появления (в секундах)
   • transform: translateY(30px) → 30px — начальный сдвиг вниз
     Увеличь число — элемент будет "вылетать" снизу с большего расстояния

   КАК ОТКЛЮЧИТЬ АНИМАЦИЮ:
   Замени opacity: 0 на opacity: 1 и убери строку с transform
   ════════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ════════════════════════════════════════════════════════════════
   27. АДАПТИВ — МОБИЛЬНЫЕ И ПЛАНШЕТЫ
   ────────────────────────────────────────────────────────────────
   @media (max-width: N) — правила срабатывают когда экран УЖЕ N пикселей.

   < 900px — планшеты и широкие телефоны (iPad, большие Android)
   < 640px — узкие телефоны (iPhone SE, стандартные Android)

   КАК ДОБАВИТЬ МОБИЛЬНЫЙ СТИЛЬ:
   Найди нужный класс ниже и добавь или измени свойство.
   Пример: чтобы шрифт заголовка был меньше на телефоне:
     @media (max-width: 640px) {
       .hero-title { font-size: 2rem; }
     }

   ВАЖНО: правила внутри @media имеют приоритет над теми же
   правилами выше. Нижнее всегда побеждает верхнее.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Шаги "Как это работает" — в 1 колонку */
  .how-grid       { grid-template-columns: 1fr; }

  /* Акторы модели — в 2 колонки вместо 4 */
  .model-flow     { grid-template-columns: repeat(2, 1fr); }
  .model-flow::before { display: none; } /* убираем соединительную линию */

  /* Диагностика — список и панель в одну колонку */
  .diag-wrapper   { grid-template-columns: 1fr; }

  /* Консультация — в 1 колонку */
  .consult-grid   { grid-template-columns: 1fr; }

  /* Модальное окно — меньше отступы */
  .modal-box      { padding: 36px 28px; }

  /* Статистика Hero — вертикально вместо горизонтально */
  .hero-stats     { flex-direction: column; }
  .hero-stat      { border-right: none; border-bottom: 1px solid rgba(0,212,255,0.12); }
  .hero-stat:last-child { border-bottom: none; }

  /* Карточки check-up — 3 в ряд вместо 6 */
  .checkup-grid   { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  /* Скрываем ссылки навбара на маленьких экранах */
  .nav-links      { display: none; }
  /* СОВЕТ: если хочешь мобильное меню — нужен JS. Сейчас ссылки просто скрыты. */

  /* Модальное окно — ещё меньше отступы */
  .modal-box      { padding: 28px 20px; }

  /* Секция Fiscal — вертикально */
  .fiscal-visual  { flex-direction: column; }

  /* Карточки Value — в 1 колонку */
  .value-grid     { grid-template-columns: 1fr; }

  /* CTA-блок — меньше padding на телефоне */
  .cta-box        { padding: 44px 28px; }
}