:root {
  --white: #ffffff;
  --paper: #f6f6f4;
  --graphite: #15181c;
  --line: #e4e3df;
  
  /* ТВОИ ОФИЦИАЛЬНЫЕ ЦВЕТА ADM */
  --red: #d12027;        /* Насыщенный красный */
  --silver: #8e8f90;     /* Благородный серебряный */
  
  --ink: #15181c;
  --muted: #6b7076;
  --muted-light: #8e8f90; 
  --side-padding: 5vw;
}
  *{margin:0;padding:0;box-sizing:border-box;}
 /* СТАЛО: */
body {
  background: var(--white);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-weight: 300; /* Это делает весь текст тонким (как Helvetica Light) */
  -webkit-font-smoothing: antialiased;
}
  
  /* Глобальный контейнер теперь более свободный */
  .wrap {
    max-width: 1600px; /* Увеличили максимум */
    margin: 0 auto;
    padding: 0 var(--side-padding);
  }

 /* Общий стиль для всех бровок (если они будут в других местах) */
  .eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 15px;
  }

  /* Специфический стиль для бровки в HERO (Центрированный и симметричный) */
  .hero-eyebrow {
    justify-content: center; /* Центрируем текст */
    color: var(--red); /* Делаем текст красным */
    margin-bottom: 40px;
  }

  /* Рисуем линию СЛЕВА */
  .hero-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--red);
    display: inline-block;
  }

  /* Рисуем линию СПРАВА (добавляем симметрию) */
  .hero-eyebrow::after {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--red);
    display: inline-block;
  }

 /* ===== NAV (ВОЗВРАТ К ОРИГИНАЛУ) ===== */
  .nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner {
    max-width: 1600px; /* Чтобы по ширине совпадало с новым контентом */
    margin: 0 auto;
    padding: 0 var(--side-padding);
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
 .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 10px 0; /* Чтобы ссылка была удобной для клика */
  }

  .logo img {
    height: 70px;    /* Высота твоего лого. Подбери на глаз (30-40px обычно норм) */
    width: auto;     /* Чтобы не искажались пропорции */
    display: block;
  }
  .nav-links {
    display: flex;
    gap: 34px;
    font-size: 14px;
    font-weight: 500;
  }
  .nav-links a {
    color: var(--ink);
    text-decoration: none;
    opacity: .7;
    transition: opacity .2s;
  }
  .nav-links a:hover {
    opacity: 1;
  }
  .nav-links a.active {
    opacity: 1;
    color: var(--red);
  }
  .nav-cta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    background: var(--red); /* Заливаем красным */
    color: var(--white) !important; /* Белый текст */
    padding: 12px 24px;
    text-decoration: none;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    display: inline-flex;
    align-items: center;
  }

  .nav-cta:hover {
    background: var(--graphite); /* При наведении меняем на графитовый */
    transform: translateY(-2px); /* Слегка приподнимаем */
    box-shadow: 0 4px 15px rgba(200, 30, 43, 0.2); /* Мягкое красное свечение */
  }

  .nav-cta:active {
    transform: translateY(0);
  }

  /* Скрываем меню на мобилках (пока не сделали бургер) */
  @media (max-width: 860px) {
    .nav-links { display: none; }
  }

  /* ===== HERO (СВЕТЛЫЙ) ===== */
  .hero{
    background:var(--white);
    padding: 100px 0 120px;
    position: relative;
    text-align: center;
  }
  /* Легкая сетка на фоне */
  .hero-bg {
    position: absolute;
    inset: 0;
    /* Создаем две сетки: основную и мелкую "миллиметровку" */
    background-image: 
      /* Тонкая основная сетка */
      linear-gradient(rgba(21, 24, 28, 0.08) 1px, transparent 1px), 
      linear-gradient(90deg, rgba(21, 24, 28, 0.08) 1px, transparent 1px);
    
    /* Размер клетки. 40px-60px обычно смотрятся наиболее "чертежно" */
    background-size: 50px 50px; 
    
    /* Маска: сетка будет четкой в центре и мягко исчезать к краям */
    mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 85%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 85%);
    
    opacity: 1; /* Теперь можно держать на полной, так как цвет линий слабый */
    pointer-events: none;
    z-index: 0;
  }

  /* главный заголовок */
 .hero h1 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(42px, 7vw, 92px);
    font-weight: 300;
    line-height: 1.0;
    letter-spacing: -0.04em;
    margin: 40px auto 0; /* Центрируем заголовок */
    max-width: 1200px;
  }
  .hero h1 span { color: var(--red); }

 .hero-grid {
    display: block; /* Больше не сетка */
    margin-top: 40px;
  }
  
  /* Текст под заголовком  */
 .hero-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(18px, 1.4vw, 22px);
    line-height: 1.6;
    color: var(--muted);
    max-width: 740px;
    margin: 0 auto; /* Центрируем текст */
  }
  .hero .eyebrow {
    justify-content: center;
  }
  
  .hero-stats {
    display: flex;
    gap: 40px;
    border-left: 1px solid var(--line);
    padding-left: 40px;
  }
  
  /* Цифры в статистике оставляем четкими (Mono) */
  .stat-item .n {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 32px;
    font-weight: 500;
    display: block;
  }
  .stat-item .l {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-light);
    margin-top: 8px;
  }

  /* ===== SECTION ABOUT ===== */
 /* ===== ЦЕНТРИРОВАННЫЙ МАНИФЕСТ ===== */
 /* Широкий и плоский манифест */
 .about-manifesto {
    padding: 60px 0 40px; /* Было 80px или 100px снизу, ставим 40px */
    background: var(--white);
    text-align: center;
}

  /* Заголовок: растягиваем широко */
  .manifesto-title {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ink);
    
    max-width: 1200px; /* РАСТЯНУЛИ: теперь заголовок может лечь в 1-2 длинные строки */
    margin: 0 auto 40px;
  }

  /* Тело текста: тоже растягиваем */
  .manifesto-body {
    max-width: 1100px; /* Текст теперь лежит широким блоком */
    margin: 0 auto;
  }

  .manifesto-body p {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 20px; /* Чуть увеличили шрифт, чтобы на такой ширине он не смотрелся мелким */
    line-height: 1.6; /* Интервал не трогаем */
    color: var(--muted);
    margin-bottom: 20px;
  }

  /* ВТОРОЙ ЗАГОЛОВОК: Тоже делаем тонким */
  .content-h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 300; /* Светлое начертание */
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 24px 0 32px;
  }
  
  .content-p {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.6;
    color: var(--muted);
    max-width: 540px;
    margin-bottom: 20px;
  }
  }

  /* ===== NUMBERS (WIDE) ===== */
  .numbers-wide {
    padding: 100px 0;
    background: var(--graphite);
    color: var(--white);
  }
  .numbers-grid-wide {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .num-card {
    padding: 40px;
    border-left: 1px solid rgba(255,255,255,0.1);
  }
  .num-card:first-child { border-left: none; }
  .num-card .digit {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 5vw;
    color: var(--red);
    font-weight: 600;
  }

  @media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-stats { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 40px; }
    .about-col-image { min-height: 400px; flex: 100%; }
    .numbers-grid-wide { grid-template-columns: repeat(2, 1fr); }
  }
  /* ===== FOOTER ===== */
  .footer {
    padding: 60px 0 40px;
    background: var(--white);
    border-top: 1px solid var(--line);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 80px;
    padding-bottom: 80px;
  }
  .footer-h2 {
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 300;
    margin: 20px 0 40px;
    letter-spacing: -0.03em;
  }
  
  .footer-email:hover {
    border-bottom-color: var(--red);
  }

  .footer-contacts {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
 .contact-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .contact-item .l {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--muted-light);
    letter-spacing: 0.1em;
  }
 /* 1. Стили для телефонов в футере */
  .contact-item .v {
    font-size: 18px;
    font-weight: 300;
    color: var(--ink);
    text-decoration: none;
    display: block; /* Каждый телефон с новой строки */
    margin-bottom: 6px;
    width: fit-content;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
  }

  /* 2. Стили для большой почты */
  .footer-email {
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 300;
    color: var(--red);
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
  }

  /* 3. ОБЩИЙ ЭФФЕКТ для почты и телефонов при наведении */
  .footer-email:hover, 
  .contact-item a.v:hover {
    color: var(--red);
    border-bottom-color: var(--red);
    transform: translateX(10px); /* Уезжает вправо */
  }

  /* Для почты при наведении можно чуть другой оттенок красного */
  .footer-email:hover {
    color: var(--red-deep);
  }

  .footer-bottom {
    padding-top: 40px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--muted-light);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
  }

  @media (max-width: 860px) {
    .footer-grid { grid-template-columns: 1fr; gap: 60px; }
    .footer-bottom { flex-direction: column; gap: 20px; }
  }
  /* Блок цифр после Hero */
  .stats-bar {
    background: var(--graphite); /* Тёмный контрастный фон */
    color: var(--white);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 колонки в ряд */
    gap: 40px;
  }

  .stat-card {
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255,255,255,0.1); /* Тонкая разделительная линия */
    padding-left: 30px;
  }

  .stat-card:first-child {
    border-left: none; /* У первой карточки линию убираем */
    padding-left: 0;
  }

  .stat-card .num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(32px, 4vw, 48px); /* Крупные цифры */
    font-weight: 500;
    color: var(--red); /* Выделяем красным цветом */
    line-height: 1;
    margin-bottom: 15px;
  }

  .stat-card .lab {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Адаптив для мобилок */
  @media (max-width: 1024px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 60px 40px; }
  }
  @media (max-width: 600px) {
    .stats-grid { grid-template-columns: 1fr; }
    .stat-card { border-left: none; padding-left: 0; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 20px; }
    
  /* ===== СЕКЦИЯ РУКОВОДСТВА ===== */
  /* Эффект при наведении на инлайновые карточки */
 .leader-v-card:hover img {
    filter: grayscale(0%) !important;
    transform: scale(1.05);
  }
  .leader-v-card {
    transition: transform 0.3s ease;
  }
  .leader-v-card:hover {
    transform: translateY(-10px); /* Теперь прыгает вверх, а не вбок */
  }
  /* Контейнер для сетки 2х2 */
/* Базовое состояние ссылки-карточки */
  .final-srv-card {
    background-color: #ffffff !important; /* Белый фон теперь здесь */
    transition: all 0.4s ease-in-out !important;
  }

  /* Состояние ПРИ НАВЕДЕНИИ */
  .final-srv-card:hover {
    background-color: #F9F9F8 !important; /* Тот самый серый оттенок */
    cursor: pointer;
  }

  /* Анимация иконки */
  .final-srv-card svg {
    transition: transform 0.3s ease !important;
  }

  .final-srv-card:hover svg {
    transform: translateY(-8px) !important;
  }

  /* Цвет заголовка при наведении */
  .final-srv-card:hover h3 {
    color: #C81E2B !important;
  }
  /* Исправляем мобильную версию услуг */
  @media (max-width: 768px) {
    /* Делаем карточку на всю ширину */
    .final-srv-card {
      width: 100% !important; 
      padding: 40px 25px !important; /* Уменьшаем внутренние отступы, чтобы тексту было просторнее */
      border-left: none !important; /* Убираем левую границу, если она мешает */
    }

    /* Немного уменьшаем заголовок, чтобы он не лез на края */
    .final-srv-card h3 {
      font-size: 20px !important;
      margin-bottom: 12px !important;
    }

    /* Уменьшаем отступ у всей секции на мобилках */
    #services-anchor {
      padding: 60px 0 !important;
    }
    
    /* Убираем лишние отступы у иконок */
    .final-srv-card div {
      margin-bottom: 20px !important;
    }
  }