/* CSS Variables System */
:root {
    /* Primary Colors - Зеленые тона (основной цвет проекта) */
    --color-primary: #059669;        /* Основной зеленый */
    --color-primary-dark: #047857;   /* Темно-зеленый */
    --color-primary-light: #10B981;  /* Светло-зеленый */
    --color-primary-pale: #A7F3D0;   /* Бледно-зеленый для фонов */
    
    
    /* Neutral Colors - Серые тона для текста и фонов */
    --color-text-primary: #1F2937;   /* Темно-серый текст */
    --color-text-secondary: #6B7280; /* Серый текст */
    --color-text-light: #9CA3AF;     /* Светло-серый текст */
    --color-bg-primary: #FFFFFF;     /* Белый фон */
    --color-bg-secondary: #F9FAFB;   /* Светло-серый фон */
    --color-bg-green: #F0FDF4;       /* Очень светло-зеленый фон */
    --color-bg-dark: #1F2937;        /* Темно-серый фон (вместо черного) */
    
    /* Gradients - Обновленные градиенты на основе зеленой схемы */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-cta: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-hero: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    
    /* Font Family */
    --font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Font Sizes */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */
    --font-size-6xl: 3.75rem;   /* 60px */
    --font-size-7xl: 4.5rem;    /* 72px */
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    
    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 0.125rem;     /* 2px */
    --radius-base: 0.25rem;    /* 4px */
    --radius-md: 0.375rem;     /* 6px */
    --radius-lg: 0.5rem;       /* 8px */
    --radius-xl: 0.75rem;      /* 12px */
    --radius-2xl: 1rem;        /* 16px */
    --radius-3xl: 1.5rem;      /* 24px */
    --radius-full: 9999px;
    
    /* Spacing */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-32: 8rem;      /* 128px */
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
    /* Border and Background Colors */
    --color-border: rgba(229, 231, 235, 1);
    --color-bg-light: #F3F4F6;
  
    /* Additional Font Weights */
    --font-weight-extrabold: 800;
  
    /* Additional Text Sizes */
    --font-size-text-xl: var(--font-size-xl);
    --font-size-text-lg: var(--font-size-lg);
    --font-size-text-base: var(--font-size-base);
    --font-size-text-sm: var(--font-size-sm);
    
    /* Color Variations */
    --color-primary-200: rgba(5, 150, 105, 0.2);
    
    /* Common Values - Часто используемые значения */
    --transition-default: all 0.3s ease;
    --padding-section-mobile: 50px 0;
    --padding-card-default: var(--space-6);
    --padding-card-mobile: var(--space-3);
    --border-radius-card: var(--radius-xl);
    --min-height-card: 140px;
    --gap-grid-default: var(--space-6);
    --gap-grid-mobile: var(--space-3);
    --font-size-icon-large: 48px;
    --font-size-icon-medium: 36px;
    --font-size-icon-small: 32px;
  
    /* Breakpoints - Адаптивные точки перелома */
    --bp-mobile-small: 320px;   /* Малые мобильные */
    --bp-mobile-large: 480px;   /* Большие мобильные */
    --bp-tablet: 640px;         /* Планшеты */
    --bp-desktop-small: 960px;  /* Малые десктопы */
    --bp-desktop: 1200px;       /* Обычные десктопы */
    --bp-desktop-large: 1440px; /* Большие десктопы */
  
    /* Container Sizes - Адаптивные размеры контейнеров */
    --container-mobile-small: 100%;
    --container-mobile-large: 100%;
    --container-tablet: 100%;
    --container-desktop-small: 940px;
    --container-desktop: 1180px;
    --container-desktop-large: 1420px;
  
    /* Адаптивные spacing для разных экранов */
    --space-section-mobile: var(--space-12);    /* 48px */
    --space-section-tablet: var(--space-16);    /* 64px */
    --space-section-desktop: var(--space-20);   /* 80px */
    
    /* Адаптивные размеры шрифтов */
    --font-size-h1-mobile: var(--font-size-3xl);     /* 30px */
    --font-size-h1-tablet: var(--font-size-4xl);     /* 36px */
    --font-size-h1-desktop: var(--font-size-5xl);    /* 48px */
    
    --font-size-h2-mobile: var(--font-size-xl);      /* 20px */
    --font-size-h2-tablet: var(--font-size-2xl);     /* 24px */
    --font-size-h2-desktop: var(--font-size-3xl);    /* 30px */
    
    /* Адаптивные размеры header */
    --header-height-desktop: 80px;
    --header-height-desktop-small: 72px;
    --header-height-tablet: 64px;
    --header-height-mobile: 56px;
    --header-height-mobile-small: 52px;
    
    /* Адаптивные размеры иконок */
    --icon-size-desktop: 32px;
    --icon-size-desktop-small: 28px;
    --icon-size-tablet: 24px;
    --icon-size-mobile: 20px;
  }
  
  /* Reset and base styles */
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  html {
      scroll-behavior: smooth;
  }
  
  body {
      font-family: var(--font-family);
      font-size: var(--font-size-base);
      line-height: var(--line-height-normal);
      color: var(--color-text-primary);
      background-color: var(--color-bg-primary);
  }
  
  .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--space-5);
  }
  
  /* ===== HEADER STYLES ===== */
  .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background-color: var(--color-bg-primary);
      box-shadow: var(--shadow-md);
      z-index: 100;
      height: 80px;
      transition: var(--transition-default);
  }
  
  .header__content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 80px;
      gap: var(--space-6);
  }
  
  /* Logo */
  .header__logo {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      text-decoration: none;
      transition: var(--transition-default);
  }
  
  .header__logo:hover {
      opacity: 0.8;
  }
  
  .header__logo-icon {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
  }
  
  .header__logo p {
      font-size: var(--font-size-2xl);
      font-weight: var(--font-weight-bold);
      color: var(--color-text-primary);
      margin: 0;
      white-space: nowrap;
  }
  
  /* Navigation */
  .header__nav-list {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: var(--space-6);
  }
  
  html .header__nav-list a {
      color: var(--color-text-primary) !important;
      text-decoration: none !important;
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-medium);
      transition: color 0.3s ease;
      white-space: nowrap;
  }
  
  html .header__nav-list a:hover {
      color: var(--color-primary);
  }
  
  /* Contacts */
  .header__contacts {
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
      align-items: flex-end;
  }
  
  .header__phone,
  .header__schedule {
      display: flex;
      align-items: center;
      gap: var(--space-2);
  }
  
  .header__phone {
      font-weight: var(--font-weight-bold);
  }
  
  html .header__phone a {
      color: var(--color-text-primary) !important;
      text-decoration: none !important;
      font-size: var(--font-size-lg);
      white-space: nowrap;
      transition: color 0.3s ease;
  }
  
  html .header__phone a:hover {
      color: var(--color-primary);
  }
  
  .header__phone i {
      color: var(--color-primary);
      font-size: var(--font-size-lg);
  }
  
  .header__schedule {
      font-size: var(--font-size-sm);
      color: var(--color-text-secondary);
      white-space: nowrap;
  }
  
  .header__schedule i {
      color: var(--color-primary);
      font-size: var(--font-size-base);
  }
  
  /* CTA Button */
  .header__cta {
      flex-shrink: 0;
      color: #fff !important;
  }
  
    .header__cta a {
      flex-shrink: 0;
      color: #fff !important;
  }
  
  /* Мобильное меню - по умолчанию скрыто */
  .header__burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 32px;
      height: 32px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      gap: 4px;
  }
  
  .header__burger-line {
      width: 20px;
      height: 2px;
      background-color: var(--color-text-primary);
      transition: all 0.3s ease;
      transform-origin: center;
  }
  
  .header__burger.active .header__burger-line:nth-child(1) {
      transform: rotate(45deg) translate(3px, 3px);
  }
  
  .header__burger.active .header__burger-line:nth-child(2) {
      opacity: 0;
  }
  
  .header__burger.active .header__burger-line:nth-child(3) {
      transform: rotate(-45deg) translate(3px, -3px);
  }
  
  .header__mobile-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--color-bg-primary);
      box-shadow: var(--shadow-lg);
      z-index: 99;
      padding: var(--space-6);
      border-top: 1px solid var(--color-bg-secondary);
  }
  
  .header__mobile-menu.active {
      display: block;
  }
  
  .header__mobile-nav-list {
      list-style: none;
      margin: 0;
      padding: 0;
      margin-bottom: var(--space-6);
  }
  
  .header__mobile-nav-list li {
      margin-bottom: var(--space-4);
  }
  
  .header__mobile-nav-link {
      display: block;
      padding: var(--space-3) 0;
      color: var(--color-text-primary) !important;
      text-decoration: none;
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-medium);
      border-bottom: 1px solid var(--color-bg-secondary);
      transition: color 0.3s ease;
  }
  
  .header__mobile-nav-link:hover {
      color: var(--color-primary);
  }
  
  .header__mobile-contacts {
      margin-bottom: var(--space-6);
      padding-bottom: var(--space-4);
      border-bottom: 1px solid var(--color-bg-secondary);
  }
  
  .header__mobile-phone,
  .header__mobile-schedule {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      margin-bottom: var(--space-3);
  }
  
  .header__mobile-phone i,
  .header__mobile-schedule i {
      color: var(--color-primary);
      font-size: var(--font-size-lg);
  }
  
  html .header__mobile-phone a {
      color: var(--color-text-primary) !important;
      text-decoration: none !important;
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-bold);
  }
  
  html .header__mobile-phone a:hover {
      color: var(--color-primary) !important;
  }
  
  .header__mobile-schedule {
      font-size: var(--font-size-base);
      color: var(--color-text-secondary);
  }
  
  .header__mobile-cta {
      text-align: center;
  }
  
    .header__mobile-cta a {
      color: #fff !important;
  }
  
  /* Button Components */
  html .btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-3) var(--space-6);
      border: none;
      border-radius: var(--radius-full);
      text-decoration: none;
      font-family: var(--font-family);
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-semibold);
      cursor: pointer;
      transition: all 0.3s ease;
      white-space: nowrap;
      background: var(--gradient-cta);
      color: white;
      box-shadow: var(--shadow-md);
  }
  
  html .btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
  }
  
  html .btn i {
      font-size: var(--font-size-lg);
  }
  
  html .btn--white {
      background: white;
      color: var(--color-primary) !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }
  
  html .btn--white:hover {
      background: rgba(255, 255, 255, 0.9);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }
  
  
  /* Body padding for fixed header */
  body {
      padding-top: 80px;
  }
  
  /* ===== HERO SECTION ===== */
  .hero {
      background-color: var(--color-bg-secondary);
      padding: var(--space-24) 0;
      min-height: auto;
      position: relative;
  }
  
  .hero__content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-16);
      align-items: center;
      width: 100%;
  }
  
  /* Hero Text */
  .hero__text {
      color: var(--color-text-primary);
  }
  
  .hero__title {
      font-size: var(--font-size-5xl);
      font-weight: var(--font-weight-bold);
      line-height: 1.3;
      margin-bottom: var(--space-6);
      color: var(--color-text-primary);
  }
  
  
  /* УТП Features */
  .hero__features {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: var(--space-10);
      margin-top: 20px;
  }
  
  .hero__feature {
      display: flex;
      align-items: center;
      gap: var(--space-3);
  }
  
  .hero__feature i {
      font-size: var(--font-size-xl);
      color: var(--color-primary);
      flex-shrink: 0;
  }
  
  .hero__feature span {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-medium);
      color: var(--color-text-primary);
  }
  
  /* Hero CTA */
  .hero__cta {
      margin-top: var(--space-8);
  }
  
  .hero__cta a {
  color: #fff !important;
  }
  
  
  /* Hero Image */
  .hero__image {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
  }
  
  .hero__master-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--radius-2xl);
      box-shadow: var(--shadow-lg);
      background-color: var(--color-bg-secondary);
      border: 1px solid var(--color-bg-secondary);
  }
  
  /* =========================================
     REPAIRS SECTION (Блок неисправностей)
     ========================================= */
  
  .repairs {
      padding: var(--space-20) 0;
      background-color: var(--color-bg-primary);
  }
  
  .repairs__content {
      max-width: 1200px;
      margin: 0 auto;
  }
  
  .repairs__header {
      text-align: center;
      margin-bottom: var(--space-16);
  }
  
  
  
  /* Сетка карточек 3x3 */
  .repairs__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-6);
      margin-top: var(--space-12);
  }
  
  /* Кнопка "Показать еще" скрыта по умолчанию на десктопе */
  .repairs__show-more {
      display: none;
  }
  
  /* Карточки неисправностей */
  .repairs__card {
      display: block;
      background: var(--color-bg-secondary);
      border-radius: var(--radius-xl);
      padding: var(--space-8);
      text-align: center;
      text-decoration: none;
      transition: all 0.3s ease;
      border: 1px solid var(--color-border);
      min-height: 180px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: var(--space-3);
  }
  
  .repairs__card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: var(--color-primary);
  }
  
  .repairs__card-icon {
      font-size: var(--font-size-4xl);
      color: var(--color-primary);
      margin-bottom: var(--space-2);
  }
  
  .repairs__card-icon i {
      display: block;
  }
  
  .repairs__card-title {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
      margin-bottom: var(--space-2);
      line-height: 1.3;
  }
  
  .repairs__card-price {
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-bold);
      color: var(--color-primary);
  }
  
  /* Hover эффекты */
  .repairs__card:hover .repairs__card-icon {
      color: var(--color-primary-dark);
      transform: scale(1.1);
  }
  
  .repairs__card:hover .repairs__card-title {
      color: var(--color-text-primary);
  }
  
  .repairs__card:hover .repairs__card-price {
      color: var(--color-primary-dark);
  }
  
  /* =========================================
     ADVANTAGES SECTION (Блок преимуществ)
     ========================================= */
  
  .advantages {
      padding: var(--space-20) 0;
      background-color: var(--color-bg-secondary);
  }
  
  .advantages__content {
      max-width: 1200px;
      margin: 0 auto;
  }
  
  .advantages__header {
      text-align: center;
      margin-bottom: var(--space-16);
  }
  
  
  
  .advantages__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-8);
      margin-top: var(--space-12);
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
  }
  
  /* Карточки преимуществ */
  .advantages__card {
      background: white;
      border-radius: var(--radius-xl);
      padding: var(--space-10);
      text-align: center;
      box-shadow: var(--shadow-base);
      border: 1px solid var(--color-border);
      transition: all 0.3s ease;
  }
  
  .advantages__card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
  }
  
  .advantages__card-icon {
      font-size: 48px;
      color: var(--color-primary);
      margin-bottom: var(--space-6);
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .advantages__card-icon i {
      display: block;
  }
  
  .advantages__card-title {
      font-size: var(--font-size-2xl);
      font-weight: var(--font-weight-bold);
      color: var(--color-text-primary);
      margin-bottom: var(--space-4);
      line-height: 1.3;
  }
  
  .advantages__card-text {
      font-size: var(--font-size-lg);
      color: var(--color-text-secondary);
      line-height: 1.6;
  }
  
  /* Hover эффекты */
  .advantages__card:hover .advantages__card-icon {
      color: var(--color-primary-dark);
      transform: scale(1.1);
  }
  
  .advantages__card:hover .advantages__card-title {
      color: var(--color-primary);
  }
  
  /* =========================================
     PRICING SECTION (Прайс-лист)
     ========================================= */
  
  .pricing {
      padding: var(--space-20) 0;
      background-color: var(--color-bg-primary);
  }
  
  .pricing__content {
      max-width: 1200px;
      margin: 0 auto;
  }
  
  .pricing__header {
      text-align: center;
      margin-bottom: var(--space-16);
  }
  
  .pricing__price a {
    color: var(--color-primary) !important;
    text-decoration: none !important;
    font-size: 14px;
 }
 
.pricing__table td:first-child a {
    color: var(--color-text-primary) !important;
}

.pricing__table td:first-child a:hover {
    color: var(--color-primary) !important;
}

.pricing__price a:hover {
    color: var(--color-primary-dark) !important;
}

  .pricing__table-wrapper {
      background: white;
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-base);
      overflow: hidden;
      margin-bottom: var(--space-12);
  }
  
  /* Таблица */
  .pricing__table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--font-size-lg);
  }
  
  .pricing__table thead th {
      background: var(--color-primary);
      color: white;
      padding: var(--space-6) var(--space-8);
      text-align: left;
      font-weight: var(--font-weight-bold);
      font-size: var(--font-size-xl);
  }
  
  .pricing__table thead th:first-child {
      width: 70%;
  }
  
  .pricing__table thead th:last-child {
      width: 30%;
      text-align: right;
  }
  
  .pricing__table tbody td {
      padding: var(--space-5) var(--space-8);
      border-bottom: 1px solid var(--color-border);
      transition: all 0.3s ease;
  }
  
  .pricing__table tbody tr:hover {
      background-color: var(--color-bg-secondary);
  }
  
  .pricing__table tbody tr:hover td {
      transform: translateX(4px);
  }
  
  .pricing__table tbody tr:last-child td {
      border-bottom: none;
  }
  
  .pricing__price {
      font-weight: var(--font-weight-bold);
      color: var(--color-primary);
      text-align: right !important;
      font-size: var(--font-size-xl);
  }
  
  .pricing__table tbody tr:hover .pricing__price {
      color: var(--color-primary-dark);
  }
  
  /* Кликабельные строки таблицы */
  .pricing__row-clickable {
      cursor: pointer;
  }
  
  .pricing__row-clickable:hover {
      background-color: var(--color-bg-secondary) !important;
  }
  
  /* Кнопка "Показать еще" */
  .pricing__show-more {
      text-align: center;
      margin: var(--space-8) 0;
  }
  
  html .btn--secondary {
      background: white !important;
      color: var(--color-primary);
      border: 2px solid var(--color-primary);
      padding: var(--space-4) var(--space-8);
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-semibold);
      border-radius: var(--radius-full);
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      transition: all 0.3s ease;
  }
  
  html .btn--secondary:hover {
      background: var(--color-primary);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
  }
  
  html .btn--secondary i {
      font-size: var(--font-size-xl);
  }
  
  /* ==============================
     АКЦИОННЫЙ БЛОК
     ============================== */
  
  .promo {
      padding: var(--space-20) 0;
      background: var(--gradient-primary);
      color: white;
      text-align: center;
      position: relative;
      overflow: hidden;
  }
  
  .promo::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
      pointer-events: none;
  }
  
  .promo__content {
      position: relative;
      z-index: 2;
  }
  
  .promo__header {
      margin-bottom: var(--space-12);
  }
  
  
  
  /* Таймер обратного отсчета */
  .promo__timer {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: var(--space-4);
      margin-bottom: var(--space-12);
      flex-wrap: wrap;
  }
  
  .timer__item {
      background: rgba(255,255,255,0.15);
      border-radius: var(--radius-xl);
      padding: var(--space-6) var(--space-4);
      min-width: 100px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.2);
      box-shadow: var(--shadow-lg);
  }
  
  .timer__value {
      font-size: var(--font-size-4xl);
      font-weight: var(--font-weight-extrabold);
      font-family: 'Ubuntu Mono', monospace;
      line-height: 1;
      margin-bottom: var(--space-1);
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }
  
  .timer__label {
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
      opacity: 0.9;
      text-transform: uppercase;
      letter-spacing: 0.05em;
  }
  
  .timer__separator {
      font-size: var(--font-size-4xl);
      font-weight: var(--font-bold);
      opacity: 0.8;
      animation: blink 1s infinite;
  }
  
  @keyframes blink {
      0%, 50% { opacity: 0.8; }
      51%, 100% { opacity: 0.3; }
  }
  
  /* CTA секция */
  .promo__cta {
      margin-top: var(--space-8);
  }
  
  
  @keyframes pulse {
      0%, 100% { 
          transform: scale(1);
          box-shadow: 0 8px 32px rgba(0,0,0,0.2);
      }
      50% { 
          transform: scale(1.05);
          box-shadow: 0 12px 40px rgba(0,0,0,0.3);
      }
  }
  
  
  /* Блок "Этапы работы" */
  .work-steps {
      background: var(--color-bg-light);
      padding: var(--space-20) 0;
  }
  
  .work-steps__header {
      text-align: center;
      margin-bottom: var(--space-16);
  }
  
  .section__title {
      font-size: var(--font-size-4xl);
      font-weight: var(--font-weight-bold);
      color: var(--color-text-primary);
      margin-bottom: var(--space-4);
  }
  
  .section__title--white {
      color: #FFFFFF;
  }
  
  .section__subtitle {
      font-size: var(--font-size-xl);
      color: var(--color-text-secondary);
      max-width: 600px;
      margin: 0 auto;
  }
  
  .section__subtitle--white {
      color: rgba(255, 255, 255, 0.95);
  }
  
  .steps {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 var(--space-4);
  }
  
  .step {
      display: flex;
      align-items: flex-start;
      margin-bottom: var(--space-12);
      position: relative;
  }
  
  .step:nth-child(even) {
      flex-direction: row-reverse;
  }
  
  .step:nth-child(even) .step__content {
      text-align: right;
  }
  
  .step__number {
      width: 70px;
      height: 70px;
      background: var(--gradient-primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: var(--shadow-lg);
      position: relative;
      z-index: 2;
      margin: 0 var(--space-6);
      font-size: var(--font-size-lg);
  }
  
  .step__digit {
      font-size: var(--font-size-text-xl);
      font-weight: 700;
      color: white;
  }
  
  .step__icon {
      font-size: var(--font-size-4xl);
      color: var(--color-primary);
      margin-bottom: var(--space-2);
      display: block;
  }
  
  .step__content {
      flex: 1;
      background: var(--color-bg-secondary);
      padding: var(--space-8);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-md);
      border: 1px solid var(--color-border);
      transition: all 0.3s ease;
      position: relative;
      margin-top: var(--space-2);
  }
  
  .step__content:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: var(--color-primary);
  }
  
  .step__title {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
      margin: 0 0 var(--space-2) 0;
      line-height: 1.3;
  }
  
  .step__description {
      font-size: var(--font-size-base);
      color: var(--color-text-secondary);
      margin: 0;
      line-height: var(--line-height-relaxed);
  }
  
  .step:hover .step__number {
      transform: scale(1.05);
  }
  
  .step:hover .step__icon {
      color: var(--color-primary-dark);
      transform: scale(1.1);
  }
  
  
  /* ========================================
     Блок "Наши мастера"
  ========================================= */
  
  .masters {
      background: var(--color-bg-secondary);
      padding: var(--space-20) 0;
  }
  
  .masters__content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--space-4);
  }
  
  .masters__header {
      text-align: center;
      margin-bottom: var(--space-16);
  }
  
  
  
  .masters__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-8);
      margin-top: var(--space-12);
  }
  
  .masters__card {
      background: var(--color-bg-primary);
      border-radius: var(--radius-xl);
      padding: var(--space-8);
      text-align: center;
      box-shadow: var(--shadow-base);
      transition: all 0.3s ease;
      border: 1px solid rgba(5, 150, 105, 0.1);
  }
  
  .masters__card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
      border-color: var(--color-primary);
  }
  
  .masters__card-photo {
      margin-bottom: var(--space-6);
  }
  
  .masters__photo {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid var(--color-primary);
      transition: all 0.3s ease;
  }
  
  .masters__card:hover .masters__photo {
      transform: scale(1.05);
      border-color: var(--color-primary-dark);
  }
  
  .masters__name {
      font-size: var(--font-size-2xl);
      font-weight: var(--font-weight-bold);
      color: var(--color-text-primary);
      margin-bottom: var(--space-2);
  }
  
  .masters__experience {
      font-size: var(--font-size-base);
      color: var(--color-text-secondary);
      margin-bottom: var(--space-4);
  }
  
  .masters__rating {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-1);
      margin-bottom: var(--space-4);
  }
  
  .masters__rating i {
      color: #FCD34D;
      font-size: var(--font-size-lg);
  }
  
  .masters__rating-text {
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-medium);
      color: var(--color-text-primary);
      margin-left: var(--space-2);
  }
  
  .masters__specialization {
      font-size: var(--font-size-sm);
      color: var(--color-text-secondary);
      line-height: var(--line-height-relaxed);
  }
  
  
  /* ========================================
     Блок отзывов
  ========================================= */
  
  .testimonials {
      background: var(--color-bg-primary);
      padding: var(--space-20) 0;
  }
  
  .testimonials__content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--space-4);
  }
  
  .testimonials__header {
      text-align: center;
      margin-bottom: var(--space-16);
  }
  
  
  
  .testimonials__carousel {
      position: relative;
      max-width: 800px;
      margin: 0 auto;
  }
  
  .testimonials__nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      border: none;
      border-radius: 50%;
      background: var(--color-primary);
      color: white;
      font-size: var(--font-size-xl);
      cursor: pointer;
      z-index: 10;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .testimonials__nav:hover {
      background: var(--color-primary-dark);
      transform: translateY(-50%) scale(1.1);
      box-shadow: var(--shadow-lg);
  }
  
  .testimonials__nav--prev {
      left: -70px;
  }
  
  .testimonials__nav--next {
      right: -70px;
  }
  
  .testimonials__nav i {
      font-size: var(--font-size-xl);
  }
  
  .testimonials__track {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-xl);
  }
  
  .testimonials__slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      transform: translateX(100%);
      transition: all 0.6s ease-in-out;
  }
  
  .testimonials__slide.active {
      position: relative;
      opacity: 1;
      transform: translateX(0);
  }
  
  .testimonials__card {
      background: var(--color-bg-secondary);
      border-radius: var(--radius-xl);
      padding: var(--space-10);
      text-align: center;
      box-shadow: var(--shadow-lg);
      border: 1px solid rgba(5, 150, 105, 0.1);
  }
  
  .testimonials__rating {
      display: flex;
      justify-content: center;
      gap: var(--space-1);
      margin-bottom: var(--space-6);
  }
  
  .testimonials__rating i {
      color: #FCD34D;
      font-size: var(--font-size-xl);
  }
  
  .testimonials__text {
      font-size: var(--font-size-lg);
      line-height: var(--line-height-relaxed);
      color: var(--color-text-primary);
      margin-bottom: var(--space-8);
      font-style: italic;
  }
  
  .testimonials__author {
      border-top: 1px solid rgba(5, 150, 105, 0.2);
      padding-top: var(--space-6);
  }
  
  .testimonials__name {
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-bold);
      color: var(--color-text-primary);
      margin-bottom: var(--space-2);
  }
  
  .testimonials__location {
      font-size: var(--font-size-base);
      color: var(--color-text-secondary);
  }
  
  .testimonials__indicators {
      display: flex;
      justify-content: center;
      gap: var(--space-3);
      margin-top: var(--space-8);
  }
  
  .testimonials__indicator {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: none;
      background: rgba(5, 150, 105, 0.3);
      cursor: pointer;
      transition: all 0.3s ease;
  }
  
  .testimonials__indicator:hover {
      background: rgba(5, 150, 105, 0.6);
      transform: scale(1.2);
  }
  
  .testimonials__indicator.active {
      background: var(--color-primary);
      transform: scale(1.3);
  }
  
  
  /* ========================================
     Финальный CTA блок
  ========================================= */
  
  .final-cta {
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
      padding: var(--space-24) 0;
      position: relative;
      overflow: hidden;
  }
  
  .final-cta::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      opacity: 0.6;
  }
  
  .final-cta__content {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 var(--space-4);
      text-align: center;
      position: relative;
      z-index: 2;
  }
  
  .final-cta__header {
      margin-bottom: var(--space-12);
  }
  
  
  
  .final-cta__features {
      display: flex;
      justify-content: center;
      gap: var(--space-12);
      margin-bottom: var(--space-8);
      flex-wrap: wrap;
  }
  
  .final-cta__feature {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      color: white;
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-medium);
  }
  
  .final-cta__feature i {
      font-size: var(--font-size-2xl);
      color: rgba(255, 255, 255, 0.9);
  }
  
  .final-cta__action {
      text-align: center;
  }
  
  
  .final-cta__schedule {
      font-size: var(--font-size-lg);
      color: rgba(255, 255, 255, 0.9);
      margin: 0;
      margin-top: 20px;
  }
  
  /* Анимация пульсации для CTA кнопки */
  @keyframes pulse-cta {
      0% {
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(255, 255, 255, 0.7);
      }
      70% {
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 0 0 15px rgba(255, 255, 255, 0);
      }
      100% {
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(255, 255, 255, 0);
      }
  }
  
  
  /* ========================================
     Footer
  ========================================= */
  
  .footer {
      background: var(--color-bg-dark);
      color: rgba(255, 255, 255, 0.9);
      padding: var(--space-16) 0 var(--space-8);
  }
  
  .footer__content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--space-4);
  }
  
  .footer__main {
      display: grid;
      grid-template-columns: 1.8fr 1.2fr 1fr;
      gap: var(--space-12);
      margin-bottom: var(--space-12);
      padding-bottom: var(--space-12);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .footer__company {
      max-width: 400px;
  }
  
  .footer__logo {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      margin-bottom: var(--space-4);
  }
  
  .footer__logo-icon {
      width: 32px;
      height: 32px;
  }
  
  .footer__logo-text {
      font-size: var(--font-size-2xl);
      font-weight: var(--font-weight-bold);
      color: white;
      margin: 0;
  }
  
  .footer__description {
      font-size: var(--font-size-base);
      line-height: var(--line-height-relaxed);
      color: rgba(255, 255, 255, 0.8);
      margin: 0;
  }
  
  .footer__title {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-bold);
      color: white;
      margin-bottom: var(--space-4);
  }
  
  .footer__contact-item {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      margin-bottom: var(--space-3);
      font-size: var(--font-size-base);
  }
  
  .footer__contact-item i {
      color: var(--color-primary-light);
      font-size: var(--font-size-lg);
      width: 20px;
      flex-shrink: 0;
  }
  
  .footer__list {
      list-style: none !important;
      margin: 0;
      padding: 0;
  }
  
  .footer__list li {
      margin-bottom: var(--space-2);
  }
  
  .footer__link {
      color: rgba(255, 255, 255, 0.8) !important;
      text-decoration: none !important;
      transition: color 0.3s ease;
  }
  
  .footer__link:hover {
      color: var(--color-primary-light) !important;
  }
  
  #allrecords ul {
      padding-left: 0px !important;
  }
  
  .footer__bottom {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: var(--space-6);
  }
  
  .footer__legal {
      flex: 1;
  }
  
  .footer__copyright {
      margin-bottom: var(--space-2);
  }
  
  .footer__copyright p {
      font-size: var(--font-size-base);
      color: rgba(255, 255, 255, 0.9);
      margin: 0;
  }
  
  .footer__company-details {
      font-size: var(--font-size-sm);
      color: rgba(255, 255, 255, 0.6);
      text-align: left; /* Выравниваем реквизиты по левому краю всегда */
  }
  
  .footer__company-details p {
      margin: 0;
      line-height: var(--line-height-snug);
  }
  
  .footer__links {
      flex-shrink: 0;
  }
  
  /* ===============================================
     RESPONSIVE DESIGN - АДАПТИВНАЯ ВЕРСТКА
     =============================================== */
  
  /* Desktop Small (960px - 1200px) - Первый уровень адаптации */
  @media screen and (max-width: 1199px) and (min-width: 960px) {
      :root {
          /* Обновляем переменные для малых десктопов */
          --container-size: var(--container-desktop-small);
          --section-padding: var(--space-section-desktop);
          --font-size-h1: var(--font-size-h1-desktop);
          --font-size-h2: var(--font-size-h2-desktop);
      }
      
      .container {
          max-width: var(--container-desktop-small);
          padding-left: var(--space-6);
          padding-right: var(--space-6);
      }
  
      .header {
          height: var(--header-height-desktop-small);
      }
      
      .header__content {
          height: var(--header-height-desktop-small);
          gap: var(--space-4);
      }
      
      .header__contacts {
          gap: 0px;
      }
      
      .header__logo p {
          font-size: var(--font-size-xl);
      }
      
      .header__logo-icon {
          width: var(--icon-size-desktop-small);
          height: var(--icon-size-desktop-small);
      }
      
      .header__nav-list {
          gap: var(--space-5); 
      }
      
      .header__phone a {
          font-size: var(--font-size-base); 
      }
      
      .header__schedule {
          font-size: var(--font-size-xs); 
      }
      
      /* Оптимизируем CTA кнопку */
      .btn {
          padding: var(--space-2) var(--space-5);
          font-size: var(--font-size-sm);
      }
  
      /* Hero Section адаптация для Desktop Small */
      .hero {
          padding: var(--space-20) 0; 
      }
      
      .hero__content {
          gap: var(--space-12); 
      }
      
      .hero__title {
          font-size: var(--font-size-4xl); 
          margin-bottom: var(--space-5);
      }
      
      
      .hero__features {
          gap: var(--space-5); 
          margin-bottom: var(--space-8);
      }
      
      .hero__feature i {
          font-size: var(--font-size-lg); 
      }
      
      .hero__feature span {
          font-size: var(--font-size-base);
      }
  
      body {
          padding-top: 72px;
      }
  
      /* Repairs Section адаптация для Desktop Small */
      .repairs {
          padding: var(--space-16) 0; 
      }
      
      .repairs__header {
          margin-bottom: var(--space-12); 
      }
      
      
      .repairs__grid {
          gap: var(--space-5); /* Уменьшаем gap между карточками */
          margin-top: var(--space-10);
      }
      
      .repairs__card {
          padding: var(--space-6); /* Уменьшаем padding карточек */
          min-height: 160px; /* Уменьшаем минимальную высоту */
      }
  
      .advantages {
          padding: var(--space-16) 0;
      }
      
      
      
      .advantages__grid {
          gap: var(--space-5);
          margin-top: var(--space-10);
      }
      
      .advantages__card {
          padding: var(--space-6);
      }
  
      .pricing {
          padding: var(--space-16) 0;
      }
      
      
  
      /* Promo Section адаптация для Desktop Small */
      .promo {
          padding: var(--space-16) 0;
      }
      
      
  
  
      /* Masters Section адаптация для Desktop Small */
      .masters {
          padding: var(--space-16) 0;
      }
      
      
      
      .masters__grid {
          gap: var(--space-5);
          margin-top: var(--space-10);
      }
  
      /* Testimonials Section адаптация для Desktop Small */
      .testimonials {
          padding: var(--space-16) 0;
      }
      
      
  
      /* Final CTA Section адаптация для Desktop Small */
      .final-cta {
          padding: var(--space-16) 0;
      }
      
      
  
      .final-cta__header {
          margin-bottom: 30px;
      }
  
      .final-cta__features {
          margin-bottom: 30px;
      }
      /* Footer адаптация для Desktop Small */
      .footer {
          padding: var(--space-16) 0 var(--space-8);
      }
  }
  
  /* Tablet (640px - 960px) - Основные структурные изменения */
  @media screen and (max-width: 959px) and (min-width: 640px) {
      :root {
          /* Обновляем переменные для планшетов */
          --container-size: var(--container-tablet);
          --section-padding: var(--space-section-tablet);
          --font-size-h1: var(--font-size-h1-tablet);
          --font-size-h2: var(--font-size-h2-tablet);
      }
      
      .container {
          max-width: 100%;
          padding-left: var(--space-6);
          padding-right: var(--space-6);
      }
  
      /* Header адаптация для Tablet - компактный layout */
      .header {
          height: var(--header-height-tablet);
      }
      
      .header__content {
          height: var(--header-height-tablet);
          gap: var(--space-3);
          flex-wrap: wrap;
      }
      
      .header__logo p {
          font-size: var(--font-size-lg);
      }
      
      .header__logo-icon {
          width: var(--icon-size-tablet);
          height: var(--icon-size-tablet);
      }
      
      .header__nav-list {
          gap: var(--space-3);
          font-size: var(--font-size-sm); 
      }
      
      .header__contacts {
          gap: var(--space-1);
      }
      
      .header__phone a {
          font-size: var(--font-size-sm); 
      }
      
      .header__schedule {
          font-size: var(--font-size-xs); 
      }
      
      .btn {
          padding: var(--space-2) var(--space-4);
          font-size: var(--font-size-sm);
      }
  
      .hero {
          padding: var(--space-16) 0;
      }
      
      .hero__content {
          grid-template-columns: 1fr; /* Переход к одноколоночному layout */
          gap: var(--space-10);
          text-align: center; /* Центрируем содержимое */
      }
      
      .hero__title {
          font-size: 42px;
          margin-bottom: var(--space-4);
          text-align: left;
      }
      
      
      .hero__cta {
          margin-top: var(--space-8);
          display: flex;
      }
  
      .hero__cta .btn {
          padding: 14px 30px;
      }
  
      .hero__image {
          display: none;
      }
  
      /* Выравнивание подзаголовков по левому краю */
      .section__subtitle {
          text-align: left;
          margin: 0;
          font-size: 16px;
      }
  
      .hero__features {
          margin-bottom: var(--space-6);
          gap: var(--space-4); /* Уменьшаем gap для планшета */
      }
  
      /* Обновляем body padding для уменьшенного header */
      body {
          padding-top: 64px;
      }
  
      /* Repairs Section - переход к сетке 2x3 или адаптивной */
      .repairs {
          padding: var(--space-12) 0;
      }
      
      .repairs__grid {
          grid-template-columns: repeat(2, 1fr); /* 2 колонки для планшета */
          gap: var(--space-4);
          margin-top: var(--space-8);
      }
      
      .repairs__card {
          min-height: 140px; /* Уменьшаем высоту карточек */
          padding: var(--space-5);
      }
  
      /* Advantages Section - переход к вертикальному layout */
      .advantages {
          padding: var(--space-12) 0;
      }
      
      .advantages__grid {
          grid-template-columns: 1fr; /* Одна колонка для планшета */
          gap: var(--space-4);
          max-width: 600px;
          margin: var(--space-8) auto 0;
      }
      
      .advantages__card {
          padding: var(--space-5);
          text-align: center; /* Центрируем содержимое карточек */
      }
  
      /* Pricing Section - адаптация таблицы с горизонтальным скроллом */
      .pricing {
          padding: var(--space-12) 0;
      }
      
      .pricing__table-wrapper {
          overflow-x: auto; /* Горизонтальный скролл для таблицы */
          -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
      }
      
      .pricing__table {
          min-width: 600px; /* Минимальная ширина таблицы */
      }
  
  
      /* Masters Section - переход к 2+1 layout или вертикальному */
      .masters {
          padding: var(--space-12) 0;
      }
      
      .masters__grid {
          grid-template-columns: repeat(2, 1fr); /* 2 колонки */
          gap: var(--space-4);
          margin-top: var(--space-8);
      }
      
      .masters__card:last-child {
          grid-column: 1 / -1; /* Последняя карточка на всю ширину */
          max-width: 300px;
          justify-self: center;
      }
      
      .masters__photo {
          width: 100px;
          height: 100px;
      }
  
      /* Testimonials Section - адаптация размеров карточек и навигации */
      .testimonials {
          padding: var(--space-12) 0;
      }
      
      .testimonials__card {
          max-width: none; /* Убираем ограничение ширины */
          padding: var(--space-8);
      }
      
      .testimonials__text {
          font-size: var(--font-size-base);
      }
      
      .testimonials__nav--prev {
          left: -50px;
      }
      
      .testimonials__nav--next {
          right: -50px;
      }
      
      /* Скрываем стрелочки на планшетах, оставляем только точки */
      .testimonials__nav {
          display: none;
          width: 40px;
          height: 40px;
          font-size: var(--font-size-lg);
      }
  
      /* Promo Section - адаптация для планшетов */
      
      .promo__timer {
          gap: var(--space-2);
      }
      
      .timer__item {
          min-width: 80px;
          padding: var(--space-4) var(--space-3);
      }
      
      .timer__value {
          font-size: var(--font-size-3xl);
      }
      
  
      /* Work Steps Section - адаптация для планшетов */
      .step {
          flex-direction: row;
          text-align: left;
      }
      
      .step__content {
          text-align: left;
      }
      
      .step__number {
          width: 60px;
          height: 60px;
          margin: 0 var(--space-4) 0 0;
      }
      
      .step__digit {
          font-size: var(--font-size-text-lg);
      }
      
      .step__icon {
          font-size: var(--font-size-3xl);
          margin-bottom: var(--space-2);
      }
      
  
      /* Final CTA Section - адаптация для планшетов */
      .final-cta {
          padding: var(--space-20) 0;
      }
      
      
      
      .final-cta__features {
          grid-template-columns: 1fr; /* Вертикальный layout УТП */
          gap: var(--space-8);
          margin-top: var(--space-6);
      }
      
  
      /* Footer - реорганизация блоков для планшетов */
      .footer {
          padding: var(--space-16) 0 var(--space-8);
      }
      
      .footer__main {
          grid-template-columns: 1fr 1fr; /* 2 колонки на планшете */
          gap: var(--space-6);
      }
      
      .footer__company {
          grid-column: 1 / -1; /* Блок компании на всю ширину */
          margin-bottom: var(--space-4);
      }
  }
  
  /* Mobile Large (480px - 640px) - Переход к мобильному дизайну */
  @media screen and (max-width: 639px) and (min-width: 480px) {
      :root {
          /* Обновляем переменные для больших мобильных */
          --container-size: var(--container-mobile-large);
          --section-padding: var(--space-section-mobile);
          --font-size-h1: var(--font-size-h1-mobile);
          --font-size-h2: var(--font-size-h2-mobile);
      }
      
      .container {
          max-width: 100%;
          padding-left: var(--space-4);
          padding-right: var(--space-4);
      }
  
      /* Header - мобильная навигация и компактный layout */
      .header {
          height: var(--header-height-mobile);
      }
      
      .header__content {
          height: var(--header-height-mobile);
          gap: var(--space-2);
          position: relative;
      }
      
      .header__logo p {
          font-size: var(--font-size-base);
      }
      
      .header__logo-icon {
          width: var(--icon-size-mobile);
          height: var(--icon-size-mobile);
      }
      
      /* Скрываем десктопную навигацию и контакты, показываем мобильное меню */
      .header__nav,
      .header__contacts,
      .header__cta {
          display: none;
      }
      
      /* Показываем бургер-меню */
      .header__burger {
          display: flex;
      }
      
      /* Оптимизируем header layout для мобильного */
      .header__content {
          justify-content: space-between; /* Логотип слева, бургер справа */
      }
  
      /* Центрируем все заголовки и контент в мобильной версии */
      .hero__text,
      .repairs__header,
      .advantages__header,
      .pricing__header,
      .promo__content,
      .process__header,
      .masters__header,
      .testimonials__header,
      .final-cta__content {
          text-align: center;
      }
      
      .hero__cta {
          text-align: center;
      }
  
      /* Hero Section - полностью одноколоночный layout */
      .hero {
          padding: var(--space-12) 0;
      }
      
      .hero__content {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: var(--space-8);
          text-align: center;
          width: 100%;
      }
      
      .hero__title {
          font-size: var(--font-size-4xl); /* Увеличиваем размер H1 */
          margin-bottom: var(--space-4);
          line-height: 1.2;
      }
      
      
      .hero__features {
          flex-direction: column; /* Возвращаем вертикальную ориентацию для мобильных */
          align-items: center;
          gap: var(--space-3);
          margin-bottom: var(--space-6);
      }
      
      .hero__feature {
          justify-content: center;
          text-align: center;
          max-width: 280px;
      }
      
      .hero__feature i {
          font-size: var(--font-size-lg);
      }
      
      .hero__feature span {
          font-size: var(--font-size-sm);
      }
      
      /* Скрываем hero изображение на мобильных */
      .hero__image {
          display: none;
      }
  
      /* Обновляем body padding для уменьшенного header */
      body {
          padding-top: 56px;
      }
  
      /* Repairs Section - переход к сетке 2x3 или 1x6 */
      .repairs {
          padding: var(--space-10) 0;
      }
      
      
      
      .repairs__grid {
          grid-template-columns: repeat(2, 1fr); /* 2 колонки на больших мобильных */
          gap: var(--space-3);
          margin-top: var(--space-6);
      }
  
      /* Скрываем карточки с 5-й по 9-ю (показываем только первые 4) */
      .repairs__card:nth-child(n+5) {
          display: none;
      }
  
      /* Кнопка "Показать еще" для repairs (видна только в мобильных медиазапросах) */
      .repairs__show-more {
          display: block;
          text-align: center;
          margin-top: var(--space-6);
      }
  
      .repairs__show-more .btn {
          min-width: 200px;
      }
  
      /* Выравниваем подзаголовки по центру (кроме hero__subtitle) */
      .section__subtitle:not(.hero__subtitle) {
          text-align: center;
      }
      
      .repairs__card {
          min-height: 120px;
          padding: var(--space-4);
          font-size: var(--font-size-sm);
      }
  
      /* Advantages Section - одноколоночный layout */
      .advantages {
          padding: var(--space-10) 0;
      }
      
      
      .advantages__grid {
          grid-template-columns: 1fr;
          gap: var(--space-3);
          margin-top: var(--space-6);
      }
      
      .advantages__card {
          padding: var(--space-4);
          text-align: center;
      }
      
      .advantages__card-title {
          font-size: var(--font-size-lg); /* Уменьшаем заголовки карточек */
      }
      
      .advantages__card-text {
          font-size: var(--font-size-base); /* Уменьшаем описание */
      }
      
      .advantages__card-icon {
          font-size: 36px; /* Уменьшаем иконки */
          margin-bottom: var(--space-4);
      }
  
      /* Pricing Section - мобильная адаптация таблицы */
      .pricing {
          padding: var(--space-10) 0;
      }
      
      
      .pricing__table-wrapper {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
      }
      
      .pricing__table {
          min-width: 500px;
          font-size: var(--font-size-sm);
      }
      
      /* Выравниваем размеры шрифтов для услуг и цен */
      .pricing__table tbody td,
      .pricing__price {
          font-size: var(--font-size-sm);
      }
      
      .pricing__table thead th {
          font-size: var(--font-size-base);
      }
  
      /* Work Steps Section - мобильная адаптация */
      .work-steps {
          padding: var(--space-16) 0;
      }
      
      .step {
          margin-bottom: var(--space-8);
      }
      
      .step__number {
          width: 50px;
          height: 50px;
      }
      
      .step__digit {
          font-size: var(--font-size-text-base);
      }
      
      .step__icon {
          font-size: var(--font-size-2xl);
          margin-bottom: var(--space-2);
      }
      
      .step__content {
          padding: var(--space-4) var(--space-6);
      }
      
      .step__title {
          font-size: var(--font-size-text-base);
      }
      
      .step__description {
          font-size: var(--font-size-text-sm);
      }
  
  
      /* Promo Section заголовок */
  
      /* Masters Section - одноколоночный layout */
      .masters {
          padding: var(--space-10) 0;
      }
      
      
      .masters__grid {
          grid-template-columns: 1fr;
          gap: var(--space-6);
          margin-top: var(--space-6);
      }
      
      .masters__card {
          padding: var(--space-6);
      }
      
      .masters__photo {
          width: 80px;
          height: 80px;
      }
      
      .masters__name {
          font-size: var(--font-size-xl);
      }
  
      /* Testimonials Section - одна карточка с навигацией */
      .testimonials {
          padding: var(--space-10) 0;
      }
      
      
      .testimonials__carousel {
          max-width: none;
      }
      
      .testimonials__card {
          padding: var(--space-6);
          font-size: var(--font-size-sm);
      }
      
      .testimonials__text {
          font-size: var(--font-size-sm);
      }
      
      .testimonials__name {
          font-size: var(--font-size-lg);
      }
      
      .testimonials__nav {
          display: none;
      }
  
      /* Final CTA Section - мобильная адаптация */
      .final-cta {
          padding: var(--space-16) 0;
      }
  
      .final-cta__features {
          flex-direction: column;
          gap: var(--space-4);
          align-items: center;
          margin-top: var(--space-4);
      }
  
      .final-cta__feature {
          flex-direction: column;
          text-align: center;
          gap: var(--space-2);
      }
  
      .final-cta__feature i {
          font-size: var(--font-size-3xl);
          margin-bottom: var(--space-1);
      }
      
  
      /* Footer - мобильная адаптация */
      .footer {
          padding: var(--space-12) 0 var(--space-6);
      }
      
      .footer__main {
          grid-template-columns: 1fr;
          gap: var(--space-4);
      }
      
      .footer__company {
          grid-column: 1;
          margin-bottom: var(--space-3);
      }
      
      .footer__bottom {
          flex-direction: column;
          gap: var(--space-3);
          text-align: center;
      }
  }
  
  /* Mobile Small (320px - 480px) - Малые мобильные экраны */
  @media screen and (max-width: 479px) {
      :root {
          /* Обновляем переменные для малых мобильных */
          --container-size: var(--container-mobile-small);
          --section-padding: var(--space-section-mobile);
          --font-size-h1: calc(var(--font-size-h1-mobile) - 0.25rem);
          --font-size-h2: calc(var(--font-size-h2-mobile) - 0.125rem);
      }
      
      /* Общие настройки для малых экранов */
      * {
          box-sizing: border-box;
      }
      
      body {
          overflow-x: hidden;
          padding-top: 52px;
      }
      
      .container {
          width: 100%;
          max-width: 100%;
          padding-left: var(--space-4);
          padding-right: var(--space-4);
          overflow-x: hidden;
      }
  
      /* Header - минимальный layout для малых экранов */
      .header {
          height: 52px; /* Еще более компактная высота */
      }
      
      
      .header__logo p {
          font-size: var(--font-size-sm); /* Очень компактный логотип */
      }
      
      .header__logo-icon {
          width: 18px;
          height: 18px;
      }
      
      /* На Mobile Small также скрываем десктопные элементы */
      .header__nav,
      .header__contacts,
      .header__cta {
          display: none;
      }
      
      /* Показываем бургер-меню */
      .header__burger {
          display: flex;
          width: 28px;
          height: 28px; /* Еще меньше для малых экранов */
      }
      
      .header__burger-line {
          width: 18px; /* Уменьшаем ширину линий */
      }
      
      .header__content {
          height: 52px;
          gap: var(--space-1);
          justify-content: space-between;
      }
  
      /* Центрируем все заголовки и контент в мобильной версии */
      .repairs__header,
      .advantages__header,
      .pricing__header,
      .promo__content,
      .process__header,
      .masters__header,
      .testimonials__header,
      .final-cta__content {
          text-align: center;
      }
      
      /* Добавляем отступ для всех контейнеров с H2 и подзаголовками */
      .repairs__header,
      .advantages__header,
      .pricing__header,
      .process__header,
      .masters__header,
      .testimonials__header {
          margin-bottom: 30px;
      }
      
      .hero__cta {
          text-align: center;
      }
  
      /* Hero Section - оптимизация для малых экранов */
      .hero {
          padding: 50px 0px;
      }
      
      .hero__content {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: var(--space-8);
          text-align: center;
          width: 100%;
      }
      
      .hero__title {
          font-size: 28px; /* Оптимальный размер H1 для малых экранов */
          margin-bottom: var(--space-3);
          line-height: 1.1;
          text-align: left;
      }
  
      /* Выравнивание подзаголовков по левому краю */
      .section__subtitle {
          text-align: left;
          margin: 0;
          font-size: 16px;
      }
      
      .hero__features {
          gap: var(--space-2);
          margin-bottom: var(--space-4);
      }
      
      .hero__feature {
          max-width: 260px;
      }
      
      .hero__feature i {
          font-size: var(--font-size-base);
      }
      
      .hero__feature span {
          font-size: 14px;
      }
      
      /* Скрываем hero изображение на малых мобильных */
      .hero__image {
          display: none;
      }
  
      /* Кнопка на hero экране - полная ширина с центрированием */
      .hero__cta {
          width: 100%;
          display: flex;
          justify-content: center;
      }
      
      .hero .btn {
          width: 100%;
          padding: var(--space-3) var(--space-4);
          text-align: center;
          justify-content: center;
      }
  
      /* Все кнопки на Mobile Small - 14px шрифт */
      .btn,
      .btn i {
          font-size: 14px;
      }
  
  
      /* Repairs Section - одноколоночная сетка для критически малых экранов */
      .repairs {
          padding: 50px 0;
      }
      
      
      
      .repairs__grid {
          grid-template-columns: 1fr; /* Одна колонка на малых экранах */
          gap: 10px;
          margin-top: var(--space-4);
          padding-bottom: 20px;
      }
  
      /* Скрываем карточки с 5-й по 9-ю (показываем только первые 4) */
      .repairs__card:nth-child(n+5) {
          display: none;
      }
  
      /* Кнопка "Показать еще" для repairs */
      .repairs__show-more {
          display: block;
          text-align: center;
          margin-top: var(--space-4);
      }
  
      .repairs__show-more .btn {
          min-width: 180px;
          padding: var(--space-3) var(--space-4);
          font-size: var(--font-size-sm);
      }

      /* Кнопка "Показать еще" для pricing */
      .pricing__show-more {
          display: block;
          text-align: center;
          margin-top: var(--space-4);
      }

      .pricing__show-more .btn {
          min-width: 180px;
          padding: var(--space-3) var(--space-4);
          font-size: var(--font-size-sm);
      }
  
      /* Выравниваем подзаголовки по центру (кроме hero__subtitle) */
      .section__subtitle:not(.hero__subtitle) {
          text-align: center;
      }
      
      .repairs__card {
          min-height: 100px;
          padding: var(--space-3);
          font-size: var(--font-size-xs);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          border-radius: var(--radius-lg);
          background: white;
          gap: 2px;
      }
      
      .repairs__card-price {
          font-size: 16px;
          font-weight: var(--font-weight-bold);
          color: var(--color-primary);
      }
  
  
      /* Advantages Section - компактные карточки */
      .advantages {
          padding: 50px 0;
      }
      
      
      
      .advantages__grid {
          margin-top: var(--space-4);
          gap: var(--space-2);
          padding-bottom: 20px;
      }
      
      .advantages__card {
          padding: var(--space-3);
      }
      
      .advantages__card-title {
          font-size: var(--font-size-base); /* Еще меньше для малых экранов */
      }
      
      .advantages__card-text {
          font-size: var(--font-size-sm); /* Еще меньше для малых экранов */
      }
      
      .advantages__card-icon {
          font-size: 32px; /* Еще меньше иконки */
          margin-bottom: var(--space-3);
      }
  
      .work-steps {
          background: var(--color-bg-light);
          padding: 50px 0;
      }
  
      /* Pricing Section - карточный дизайн вместо таблицы */
      .pricing {
          padding: 50px 0;
      }
      
      
      
      /* Убираем горизонтальный скролл в таблице */
      .pricing__table-wrapper {
          overflow-x: visible;
          width: 100%;
          margin-bottom: 20px;
          padding-bottom: 10px;
      }
      
      .pricing__table {
          width: 100%;
          font-size: 12px; /* Уменьшаем шрифт для экономии места */
          table-layout: fixed; /* Фиксированная ширина колонок */
      }
      
      .pricing__table td:first-child {
          font-size: 14px; /* Еще меньше для названий услуг */
          padding: var(--space-2);
          width: 70%; /* Больше места для названий */
          word-wrap: break-word;
      }
      
      .pricing__table td:last-child {
          font-size: 14px; /* Цены читаемые */
          font-weight: var(--font-weight-bold);
          text-align: right;
          width: 30%; /* Меньше места для цен */
          padding: var(--space-2);
      }
  
      .pricing__table thead th {
          background: var(--color-primary);
          color: white;
          padding: 10px 10px;
          text-align: left;
          font-weight: var(--font-weight-bold);
          font-size: 14px;
      }
  
      .btn--secondary {
          background: white;
          color: var(--color-primary);
          border: 2px solid var(--color-primary);
          padding: 10px 30px;
          font-size: 14px;
          font-weight: var(--font-weight-semibold);
          border-radius: var(--radius-full);
          display: inline-flex;
          align-items: center;
          gap: var(--space-2);
          transition: all 0.3s ease;
      }
  
      .promo {
          padding: 50px 0;
          background: var(--gradient-primary);
          color: white;
          text-align: center;
          position: relative;
          overflow: hidden;
      }
  
      .container {
          width: 100%;
          max-width: 100%;
          padding-left: var(--space-4);
          padding-right: var(--space-4);
          overflow-x: visible;
          padding-bottom: 20px;
      }
  
  
      /* Masters Section - компактные карточки */
      .masters {
          padding: 50px 0;
      }
      
      
      
      .masters__grid {
          margin-top: var(--space-4);
          gap: 10px;
      }
  
      .step {
          display: flex;
          align-items: flex-start;
          margin-bottom: 10px;
          position: relative;
          flex-direction: column;
      }
  
      .work-steps__header {
          text-align: center;
          margin-bottom: 30px;
      }
  
      /* Testimonials Section - компактная карточка с точечной навигацией */
      .testimonials {
          padding: 50px 0;
      }
      
      
      
      .testimonials__card {
          padding: var(--space-3);
          font-size: var(--font-size-xs);
      }
  
      .testimonials__nav {
          display: none;
      }
  
      /* Final CTA Section - компактный дизайн */
      .final-cta {
          padding: 50px 0;
      }
      
      
      
      .final-cta__features {
          margin-top: var(--space-3);
          gap: var(--space-2);
      }
  
      .final-cta__feature {
          flex-direction: column;
          text-align: center;
          gap: var(--space-1);
      }
  
      .final-cta__feature i {
          font-size: var(--font-size-2xl);
          margin-bottom: var(--space-1);
      }
  
      .timer__item {
          background: rgba(255,255,255,0.15);
          border-radius: var(--radius-xl);
          padding: 10px;
          min-width: 100px;
          backdrop-filter: blur(10px);
          border: 1px solid rgba(255,255,255,0.2);
          box-shadow: var(--shadow-lg);
      }
  
      .promo__timer {
          display: flex;
          justify-content: space-between;
          gap: 5px;
          margin-bottom: var(--space-12);
          flex-wrap: wrap;
          flex-direction: row;
          align-items: center;
      }
  
  
      /* Footer - минимальный дизайн */
      .footer {
          padding: 50px 0;
      }
      
      .footer__main {
          display: flex;
          gap: 20px;
          flex-direction: column;
      }
      
      .footer__company {
          margin-bottom: var(--space-2);
      }
      
      .footer__bottom {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          flex-wrap: wrap;
          gap: var(--space-6);
          flex-direction: column;
      }
  
      .footer__link {
          color: rgba(255, 255, 255, 0.8);
          text-decoration: none;
          transition: color 0.3s ease;
          font-size: var(--font-size-sm);
      }
  
      .masters__grid {
          display: flex;
          grid-template-columns: repeat(3, 1fr);
          gap: var(--space-8);
          margin-top: var(--space-12);
          flex-direction: column;
      }
  
      .step__number {
          display: none;
      }
  
      .step:nth-child(even) .step__content {
          text-align: left;
      }
  }
  
  /* Extra Small Mobile (до 320px) - Критически малые экраны */
  @media screen and (max-width: 320px) {
      .container {
          padding-left: var(--space-3);
          padding-right: var(--space-3);
      }
      
      :root {
          --font-size-h1: calc(var(--font-size-h1-mobile) - 0.5rem);
          --font-size-h2: calc(var(--font-size-h2-mobile) - 0.25rem);
      }
  
      .timer__value {
          font-size: 24px;
          font-weight: var(--font-weight-extrabold);
          font-family: 'Ubuntu Mono', monospace;
          line-height: 1;
          margin-bottom: var(--space-1);
          text-shadow: 0 2px 4px rgba(0,0,0,0.3);
      }

     .pricing__price a {
        font-size: 14px;
     }
     
  }