:root {
  --bg: hsl(0, 0%, 100%);
  --surface: #ffffff;
  --text: #1a3f42;
  --muted: #5d6d70;
  --line: #cde0df;
  --accent: #041c20;
  --accent-dark: #031316;
  --teal: #6fd6cb;
  --teal-deep: #134250;
  --ink: #041c20;
  --yellow: #bff4ed;
  --radius: 8px;
  --shadow: 0 18px 48px rgba(4, 28, 32, 0.18);
}

* {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* =========================================
   1. ГЛОБАЛЬНЫЙ ФУНДАМЕНТ (Без серых полос)
   ========================================= */
* {
    box-sizing: border-box; /* Отступы не ломают ширину блоков */
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background-color: #041c20; /* Темный фон всего окна (убирает серые полосы) */
    overflow-x: hidden; /* Запрещает горизонтальную прокрутку */
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    
    /* Твои родные настройки текста: */
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text, #1a1a1a); /* Добавил #1a1a1a как страховку, если переменная потерялась */
    line-height: 1.5;
    
    /* background: var(--bg); — Эту строчку мы специально НЕ переносим, иначе у тебя снова вылезут те самые серые полосы по бокам */
}

/* =========================================
   2. ОСНОВНОЙ КОНТЕНТ (main)
   ========================================= */
main {
    flex: 1 0 auto; /* Растягивает main, выталкивая футер вниз */
    width: 100%;
    background-color: #f4f6f8; /* Основной светлый фон для контента страницы */
    display: block; /* Снимаем flex, чтобы внутри работали grid-сетки */
    margin: 0;
    padding: 0;
}

/* =========================================
   3. СЕТКА ЦЕН И УСЛУГ (3 колонки)
   ========================================= */
.price-grid, .service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 60px auto; /* 60px отступ сверху/снизу, auto - по центру */
    padding: 0 20px;
}

/* Адаптив: на мобильных делаем в одну колонку */
@media (max-width: 900px) {
    .price-grid, .service-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   4. СЕКЦИЯ КОНТАКТОВ (Форма справа)
   ========================================= */
.contact-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    width: 100%;
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

.contact-info {
    flex: 1; /* Текст занимает оставшееся место */
}

.contact-form {
    flex: 0 0 400px; /* Жестко фиксируем ширину формы */
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Легкая тень */
}

/* Адаптив: на мобильных форма уходит под текст */
@media (max-width: 900px) {
    .contact-section {
        flex-direction: column;
    }
    .contact-form {
        flex: none;
        width: 100%;
    }
}

/* =========================================
   5. ФУТЕР
   ========================================= */
.site-footer {
    flex-shrink: 0; /* Запрещаем футеру сжиматься */
    width: 100%;
    background: #041c20;
    color: #fff;
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 768px) {
    .site-footer {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 40px;
    background: #041c20f0;
    border-bottom: 1px solid rgba(111, 214, 203, 0.28);
    backdrop-filter: blur(14px);
    width: 100%;
    box-sizing: border-box;
}

.brand {
  display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
}

.brand-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 50%;
    display: block;
    border: 1px solid rgba(111, 214, 203, 0.58);
    flex-shrink: 0;
}

.nav {
    display: flex;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
}

.nav a,

.nav a:hover,
.nav a.active,

.nav a.active {
  font-weight: 800;
}

.nav-item {
  position: relative;
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  display: grid;
  gap: 4px;
  width: 210px;
  padding: 10px;
  border: 1px solid rgba(111, 214, 203, 0.34);
  border-radius: var(--radius);
  color: #eaf8f7;
  background: rgba(4, 28, 32, 0.96);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.dropdown-panel::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  width: 100%;
  height: 18px;
}

.dropdown-panel a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius);
  white-space: normal;
}

.dropdown-panel a:hover {
  background: rgba(111, 214, 203, 0.12);
}

.dropdown:hover .dropdown-panel,
.dropdown:focus-within .dropdown-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 96px);
  padding: clamp(54px, 9vw, 118px) clamp(18px, 7vw, 104px);
  text-align: center;
  color: #fff;
  background:
    linear-gradient(rgba(9, 65, 75, 0.86), rgba(4, 28, 32, 0.9)),
    url("assets/printshop-photo.jpg") center / cover no-repeat;
}

.hero-content {
  max-width: 820px;
  display: grid;
  justify-items: center;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: 0;
  max-width: 780px;
  font-size: clamp(38px, 6vw, 82px);
  line-height: 0.98;
  letter-spacing: 0;
}

.gradient-title {
  max-width: 920px;
  color: transparent;
  background: linear-gradient(
    100deg,
    #ffffff 0%,
    #9cebe4 24%,
    #134250 48%,
    #ffffff 62%,
    #6fd6cb 82%,
    #ffffff 100%
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: title-shimmer 5.5s ease-in-out infinite;
  text-shadow: 0 0 34px rgba(111, 214, 203, 0.18);
}

@keyframes title-shimmer {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

h2 {
  margin: 0 auto;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.12;
  letter-spacing: 0;
}

.hero-copy,
.page-hero p {
  max-width: 560px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 800;
  cursor: pointer;
}

.hero-btn {
  min-width: 178px;
  min-height: 58px;
  font-size: 17px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.btn.primary {
  color: #fff;
  background: var(--accent);
  border-color: var(--teal-deep);
}

.btn.primary:hover {
  background: var(--accent-dark);
}

.price-btn {
  color: var(--accent);
  background: linear-gradient(135deg, #ffffff 0%, #d8fffb 48%, #6fd6cb 100%);
  border-color: #ffffff;
}

.price-btn:hover {
  color: #fff;
  background: linear-gradient(135deg, #134250, #6fd6cb);
}

.btn.secondary {
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(19, 66, 80, 0.72));
  border-color: rgba(255, 255, 255, 0.58);
}

.hero-media {
  min-height: 360px;
  overflow: hidden;
  border: 1px solid rgba(111, 214, 203, 0.38);
  border-radius: var(--radius);
  background: #071215;
  box-shadow: var(--shadow);
}

.hero-media img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.page-hero {
  padding: clamp(56px, 8vw, 96px) clamp(18px, 5vw, 64px);
  color: #fff;
  background:
    linear-gradient(rgba(4, 28, 32, 0.88), rgba(4, 28, 32, 0.9)),
    url("assets/printshop-photo.jpg") center / cover no-repeat;
  border-bottom: 1px solid rgba(111, 214, 203, 0.28);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px clamp(18px, 5vw, 64px);
  background: var(--line);
}

.stats div {
  display: grid;
  gap: 2px;
  padding: 22px;
  background: #f8fbfb;
}

.stats strong {
  font-size: 24px;
}

.stats span {
  color: var(--muted);
}

.section,


.empty-section {
  min-height: 280px;
}

.clients-section {
  padding: clamp(54px, 8vw, 88px) clamp(18px, 5vw, 64px);
  background: #ffffff;
}

.simple-head {
  display: block;
  max-width: 720px;
  margin-bottom: 28px;
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 14px;
}

.client-logo {
  display: grid;
  place-items: center;
  min-height: 112px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f8fbfb;
  color: var(--ink);
  font-weight: 800;
  text-align: center;
  box-shadow: 0 12px 28px rgba(4, 28, 32, 0.06);
}

.client-logo img {
  max-width: 112px;
  max-height: 64px;
  object-fit: contain;
}

.client-logo span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.text-logo {
  font-size: 20px;
  letter-spacing: 0;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.service-card,
.price-card,
.portfolio-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.service-card {
  min-height: 230px;
  padding: 24px;
}

.service-link-card {
  display: grid;
  align-content: space-between;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.service-link-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

.service-link-card .btn {
  width: fit-content;
  margin-top: 26px;
}

.service-icon {
  display: inline-flex;
  margin-bottom: 38px;
  color: var(--accent);
  font-weight: 900;
}

.service-card p,
.price-card p,
.portfolio-card p,
.form-note {
  color: var(--muted);
}

.portfolio-card {
  overflow: hidden;
}

.portfolio-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.portfolio-card h2,
.portfolio-card p {
  margin-left: 20px;
  margin-right: 20px;
}

.portfolio-card h2 {
  margin-top: 20px;
}

.portfolio-card p {
  margin-bottom: 22px;
}

.prices-section {
  background: linear-gradient(180deg, #eef5f5, #ffffff);
}

.price-card {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 24px;
}

.price-card.featured {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

.price-card.featured p,
.price-card.featured li {
  color: rgba(255, 255, 255, 0.78);
}

.price-card strong {
  color: var(--teal-deep);
  font-size: 27px;
  line-height: 1.1;
}

.price-card.featured strong {
  color: var(--yellow);
}

.price-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}





.contact-list {
  display: grid;
  gap: 12px;
  margin-top: 28px;
  font-weight: 800;
}

.contact-list a,
.contact-list span {
  color: #fff;
}

.contact-list a {
  width: fit-content;
}

.form-note {
  margin: 0;
  font-size: 13px;
}




  .hero {
    min-height: auto;
  }

  .portfolio-grid,
  .clients-grid {
    grid-template-columns: 1fr;
  }

@media (min-width: 621px) and (max-width: 1100px) {
  .clients-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

  h1 {
    font-size: 40px;
  }

  .hero-media,
  .hero-media img {
    min-height: 270px;
  }

  .stats {
    grid-template-columns: 1fr;
  }


/* Контейнер таблицы */
table {
    background-color: #13292D; /* Черный фон всей таблицы */
    color: #ffffff; 
    font-size: 18px;    /* Размер шрифта (попробуй от 16 до 24) */
    font-weight: 600;           /* Белый текст, чтобы его было видно */
    border-collapse: collapse;
    width: 100%;
    border: 2px solid #00d4ff; /* Синяя рамка для контраста */     
    overflow: hidden;          /* Важно для скругления углов */
}

/* Ячейки заголовка и обычные ячейки */
th, td {
    padding: 15px;
    border: 1px solid #00d4ff; /* Чуть более светлая рамка внутри, чтобы видеть ячейки */
    text-align: center;
}

.table-container {
    background-color: #a86464; /* Черный фон для всей секции */
    padding: 30px;            /* Отступы внутри контейнера, чтобы текст не прилипал к краям */
    border-radius: 15px;      /* Скругление углов всей секции */
    max-width: 800px;
    margin: 40px auto;        /* Центрирует всю секцию на странице */
}

.table-footer-text {
    color: #13292D;
    text-align: center;
    margin-top: 20px;
    font-size: 20px;
    font-weight: 900;
    font-family: sans-serif;
}
h2 {
    text-align: center; /* Выравнивание по центру */   
    margin-bottom: 20px; /* Немного пространства между заголовком и таблицей */
}
/* Оберни таблицу в <div class="table-container"> */
.table-container {
    width: 100%;
    overflow-x: auto; /* Позволяет листать таблицу пальцем влево-вправо */
    -webkit-overflow-scrolling: touch; /* Делает прокрутку «плавной» на iOS */
}
.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto; /* Появится аккуратная прокрутка внутри блока */
    -webkit-overflow-scrolling: touch; /* Плавная прокрутка на iPhone */
}


/* Применяем правильный расчет размеров для всех элементов */
*, *:before, *:after {
    box-sizing: inherit;
}
.table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important; /* Разрешает скролл ТОЛЬКО внутри этого блока */
    -webkit-overflow-scrolling: touch; /* Делает прокрутку плавной на айфонах */
    margin-bottom: 20px;; /* Убирает любые фоновые полосы под таблицей */
}

/* Сама таблица больше не должна иметь фиксированную ширину в пикселях! */
.sticker-table {
    min-width: 600px; /* Даем таблице раскрыться, чтобы текст не сминался */
    width: 100%;
}

/* Стили для всей страницы политики */
.privacy-page {
    max-width: 800px;         /* Ограничиваем ширину, чтобы текст не растягивался на весь огромный экран */
    margin: 40px auto !important;        /* Центрируем блок на странице и делаем отступы сверху/снизу */
    padding: 0 20px;          /* Отступы по бокам для мобильных устройств */
    color: #ffffff;           /* ДЕЛАЕМ ВЕСЬ ТЕКСТ БЕЛЫМ */
    font-family: sans-serif;  /* Чистый, современный шрифт */
    line-height: 1.6;         /* Увеличиваем межстрочный интервал, чтобы текст "дышал" */
}


/* Подзаголовки пунктов (H2) - например, "1. Які дані ми збираємо" */
.privacy-page h2 {
    font-size: 20px;          /* Размер чуть меньше главного */
    font-weight: 600;         /* Полужирный */
    margin-top: 25px;         /* Отступ от предыдущего блока */
    margin-bottom: 10px;      /* Отступ до текста */
    color: #e0e0e0;           /* Можно подсветить подзаголовки бирюзовым под стиль твоих таблиц */
}

/* Обычный текст (P) */
.privacy-page p {
    font-size: 16px;          /* Стандартный читаемый размер */
    font-weight: normal;      /* Обычная жирность */
    margin-bottom: 15px;      /* Отступ между абзацами */
    color: #e0e0e0;           /* Чуть мягкий белый цвет, чтобы глаза не уставали при чтении */
    text-align: center;       /* Выравнивание текста по ширине для более аккуратного вида */
}

.privacy-page ul {
    text-align: left;    /* Выравниваем пункты по левому краю, так удобнее читать списки */
    max-width: 500px;    /* Чтобы список не растягивался */
    margin: 10px auto;   /* Центрируем сам блок списка */
    padding-left: 20px;
}

.privacy-page li {
    color: #e0e0e0;
    font-size: 16px;
    margin-bottom: 5px;  /* Небольшой отступ между пунктами */
}

.table-footer-text {
    background: #ffffff !important;       /* Возвращаем чистый белый фон */
    background-color: #ffffff !important; /* Дублируем для верности */
    
    /* Делаем аккуратную плашку */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;            /* Убираем лишние сдвиги */
    padding: 15px 10px !important;        /* Внутренние отступы, чтобы текст не прилипал */
    text-align: center !important;        /* Центрируем текст внутри белой полосы */
    box-sizing: border-box !important;    /* Защита от вылезания за края экрана */
    
    /* Сохраняем твои настройки шрифта (можешь поменять размеры, если нужно) */
    font-weight: 900;
}

.table-section {
    background-color: #ffffff !important; /* Белый фон для всей секции с таблицей */
}
/* 1. Намертво чиним обертку конкретно этой таблицы */
.table-scroll-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;         /* Включает горизонтальный скролл */
    display: block !important;           /* Чтобы overflow-x корректно работал */
    -webkit-overflow-scrolling: touch;   /* Плавный скролл пальцем на iPhone */
}

/* 2. Запрещаем таблице сжиматься в кашу, чтобы скролл активировался */
.table-scroll-wrapper .sticker-table {
    min-width: 600px !important;         /* Минимальная ширина таблицы, при которой она не ломается */
    width: 100% !important;
}

/* 3. Очищаем фон вокруг таблицы, чтобы убрать белые артефакты сверху */
.table-scroll-wrapper, 
.table-scroll-wrapper * {
    background-color: transparent;       /* Никаких скрытых белых фонов внутри таблицы */
}

/* 4. Настраиваем плашку с текстом СТРОГО под таблицей */
p.table-footer-text {
    background: #ffffff !important;       /* Белый фон плашки */
    background-color: #ffffff !important; 
    color: #000000;                      /* Если цвет текста нужен оригинальный — удали эту строку */
    
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;            /* Убираем внешние сдвиги */
    padding: 15px 10px !important;        /* Внутренние отступы */
    text-align: center !important;        /* Центрируем текст */
    box-sizing: border-box !important;    /* Защита от вылезания за края экрана */
    display: block !important;
}
.table-scroll-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;         /* Включаем скролл */
    display: block !important;
    -webkit-overflow-scrolling: touch;   /* Плавность на смартфонах */
}

.sticker-table {
    min-width: 600px !important;         /* Не дает ценам сжаться на мобилке в кашу */
    width: 100% !important;
}

.table-footer-text {
    background: #ffffff !important;
    background-color: #ffffff !important;
}




/* Базовые стили: на компах таблицы занимают всю ширину и не скроллятся */
.table-scroll-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important; 
}

.sticker-table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse;
}

/* Мобильная магия: включаем скролл ТОЛЬКО на смартфонах */
@media screen and (max-width: 768px) {
    .table-scroll-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch; /* Плавный скролл для iOS */
    }
    
    .sticker-table {
        width: auto !important;
        min-width: 600px !important; /* Таблица сохраняет форму и прокручивается */
    }
}
/* Возвращаем темный/прозрачный фон для всех обычных ячеек таблиц */
.sticker-table th, 
.sticker-table td {
    background: transparent !important;
    background-color: #14292E !important;
    /* Если у тебя у ячеек был какой-то свой конкретный темный цвет, например #0b1315, 
       можешь вместо transparent написать его: background-color: #0b1315 !important; */
}

/* Жестко изолируем БЕЛЫЙ фон ТОЛЬКО для плашки с текстом, чтобы она одна оставалась белой */
.sticker-table tfoot td,
.table-footer-text {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important; /* Черный текст на белом фоне */
}

.nav a {
    white-space: nowrap;  /* Запрещает тексту переноситься внутри одной кнопки */
    text-decoration: none;
    color: white;         /* Убедись, что текст виден */
}
@media screen and (max-width: 768px) {
    .site-header {
        flex-wrap: wrap;
        padding: 10px 20px;
        justify-content: center;
        gap: 10px;
    }
    
    .nav {
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 5px;
    }
}

/* ========================================= */
/* ИСПРАВЛЕНИЯ: ШАПКА, ФУТЕР, КОНТАКТЫ       */
/* ========================================= */

/* 1. ЧИНИМ ШАПКУ: жирность, наведение, активная страница */
.nav a {
    color: rgba(255, 255, 255, 0.78) !important; /* Убираем ядерно-белый, возвращаем мягкий */
    font-weight: 400 !important; /* Убираем лишнюю жирность у обычных ссылок */
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color 160ms ease !important;
}

.nav a:hover {
    color: var(--teal, #6fd6cb) !important; /* Возвращаем бирюзовый при наведении */
}

.nav a.active {
    color: var(--teal, #6fd6cb) !important; /* Подсвечиваем активную страницу */
    font-weight: 800 !important; /* Делаем активную страницу жирной, как было */
}

/* 2. ЧИНИМ ФУТЕР: чтобы крайняя надпись не уезжала за экран */
.site-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important; /* Если экран узкий, текст аккуратно перенесется вниз */
    padding: 26px clamp(18px, 5vw, 64px) !important;
    color: #fff !important;
    background-color: #0b1315 !important; /* Твой родной темный цвет */
    width: 100% !important;
    box-sizing: border-box !important; /* Жестко запрещаем вылезать за пределы экрана! */
}

/* 3. ЧИНИМ КОНТАКТЫ: возвращаем темный фон и сетку */
.contact-section {
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.8fr) !important;
    gap: clamp(28px, 5vw, 64px) !important;
    min-height: calc(100vh - 72px) !important;
    color: #fff !important;
    /* Возвращаем твой градиент и картинку на фон */
    background: linear-gradient(rgba(9, 65, 75, 0.86), rgba(4, 28, 32, 0.9)), url("assets/printshop-photo.jpg") center / cover no-repeat !important;
    background-color: #041c20 !important; 
    padding: clamp(56px, 8vw, 96px) clamp(18px, 5vw, 64px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Возвращаем белую плашку самой форме обратной связи */
.contact-form {
    background: #ffffff !important;
    border: 1px solid var(--line, #cde0df) !important;
    border-radius: var(--radius, 8px) !important;
    padding: 24px !important;
    box-shadow: var(--shadow) !important;
}

/* Адаптив для контактов, чтобы на телефонах они строились в столбик, а не плющились */
@media (max-width: 900px) {
    .contact-section {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================= */
/* ПОЛНАЯ ПОЧИНКА БЛОКА КОНТАКТОВ И ФОРМЫ    */
/* ========================================= */

/* 1. Убираем белые полосы по бокам, заставляя секцию быть на весь экран */
.contact-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Разделяем на левую (текст) и правую (форма) части */
    gap: clamp(30px, 5vw, 64px) !important;
    align-items: center !important;
    padding: 60px clamp(20px, 8vw, 120px) !important;
    
    /* Проверяем, чтобы фон заполнял всё пространство */
    background: linear-gradient(rgba(11, 29, 33, 0.85), rgba(4, 20, 23, 0.93)), 
                url("assets/printshop-photo.jpg") center / cover no-repeat !important;
}

/* На случай, если секцию зажали внутри тега main или body */
body, main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Чиним белое окно формы (чтобы оно не сжималось) */
.contact-form {
    background: #ffffff !important;
    padding: 40px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    max-width: 480px !important; /* Задаём оптимальную ширину плашки */
    width: 100% !important;
    justify-self: end !important; /* Прижимаем к правому краю */
    box-sizing: border-box !important;
    
    /* Выстраиваем элементы внутри строго друг под другом */
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important; 
}

/* 3. Оживляем поля ввода и подписи, которые стали мелкими */
.contact-form label {
    display: block !important; /* Каждый заголовок теперь строго НАД полем */
    font-family: Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #0b1315 !important;
    margin-bottom: 6px !important;
    text-align: left !important;
}

/* Делаем сами инпуты и текстовое поле широкими и аккуратными */
.contact-form input[type="text"],
.contact-form input,
.contact-form textarea {
    width: 100% !important; /* Растягиваем на всю ширину белого окна */
    padding: 12px 14px !important;
    border: 1px solid #cde0df !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-family: Arial, sans-serif !important;
    background-color: #ffffff !important;
    color: #222222 !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
}

/* Подсветка поля при клике */
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #6fd6cb !important;
}

/* Настройка большого поля для текста задачи */
.contact-form textarea {
    min-height: 110px !important;
    resize: vertical !important; /* Можно тянуть только вниз, чтобы не ломать ширину */
}

/* 4. Возвращаем красивую кнопку "Надіслати" */
.contact-form button,
.contact-form input[type="submit"] {
    width: 100% !important;
    background-color: #0b1315 !important; /* Твой фирменный тёмный цвет */
    color: #ffffff !important;
    padding: 14px !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    margin-top: 5px !important;
    box-sizing: border-box !important;
}

.contact-form button:hover {
    background-color: #162529 !important; /* Чуть светлее при наведении */
}

/* Текст-демо под кнопкой */
.contact-form p, 
.contact-form span {
    font-size: 12px !important;
    color: #7a8a89 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

/* Адаптив для мобилок (чтобы текст и форма встали в один столбик) */
@media (max-width: 900px) {
    .contact-section {
        grid-template-columns: 1fr !important;
        padding: 40px 20px !important;
    }
    .contact-form {
        justify-self: center !important; /* Центрируем форму на маленьких экранах */
    }
}

/* ========================================= */
/* УБИРАЕМ ПРОСВЕТЫ СВЕРХУ И СНИЗУ КОНТАКТОВ */
/* ========================================= */

/* 1. Обнуляем внешние отступы самой секции контактов */
.contact-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 2. Обнуляем отступ сверху у футера, чтобы он намертво прилип к контактам */
.site-footer {
    margin-top: 0 !important;
}

/* 3. Убираем нижний отступ у секции, которая идет прямо ПЕРЕД контактами 
   (например, у блока Портфолио), чтобы она не толкала контакты вниз */
section:has(+ .contact-section),
div:has(+ .contact-section) {
    margin-bottom: 0 !important;
}

/* 4. На всякий случай: защита от вылезающих отступов заголовков внутри секции */
.contact-section h2, 
.contact-section h3 {
    margin-top: 0 !important;
}

/* ========================================= */
/* ВОЗВРАЩАЕМ ОБВОДКУ КАРТОЧКАМ УСЛУГ И ЦЕН  */
/* ========================================= */

/* Перечисляем возможные классы твоих коробочек. 
   Если у тебя в HTML они называются иначе (например, .my-box), 
   просто добавь свой класс в этот список через запятую */
.services-section .card,
.services-section .box,
.services-section .service-item,
.prices-section .card,
.prices-section .box,
.prices-section .price-item,
.service-card,
.price-card,
.pricing-card {
    border: 1px solid #cde0df !important; /* Твой фирменный цвет линий */
    border-radius: 8px !important;        /* Возвращаем скругление углов */
    padding: 24px !important;             /* Отступы внутри, чтобы текст не лип к рамке */
    background-color: #ffffff !important; /* Убеждаемся, что фон внутри белый */
    box-sizing: border-box !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Добавим легкий эффект при наведении, чтобы карточки "оживали" */
.service-card:hover,
.price-card:hover,
.services-section .card:hover,
.prices-section .card:hover {
    border-color: #6fd6cb !important; /* Бирюзовая рамка при наведении */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; /* Легкая тень */
}

/* ========================================= */
/* СЕТКА ДЛЯ БЛОКА "НАШІ КЛІЄНТИ"            */
/* ========================================= */

/* 1. Делаем контейнер умной сеткой. 
   Он сам будет ставить карточки в ряд и переносить на новую строку, если не влезают */
.clients-grid,
.clients-list,
.clients-container,
.customers-grid {
    display: grid !important;
    /* Умная ширина: колонки от 200px до равных долей */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 30px !important; /* Расстояние между боксами */
    margin-top: 40px !important;
}

/* 2. Возвращаем боксам фирменный вид (рамка, белый фон, центрирование) */
.client-card,
.client-item,
.client-box {
    border: 1px solid #cde0df !important; /* Наша бирюзоватая обводка */
    border-radius: 8px !important;
    padding: 30px 20px !important;
    background-color: #ffffff !important;
    text-align: center !important;
    
    /* Центрируем логотип и текст внутри бокса */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* 3. Добавим легкий эффект при наведении для интерактивности */
.client-card:hover,
.client-item:hover,
.client-box:hover {
    transform: translateY(-5px) !important; /* Карточка чуть подпрыгивает */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05) !important;
    border-color: #6fd6cb !important;
}

/* 4. Ограничиваем размер логотипов, чтобы Triolan и другие не раздувало */
.client-card img,
.client-item img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 80px !important; /* Логотипы будут аккуратными и одинаковыми по высоте */
    object-fit: contain !important;
    margin-bottom: 15px !important;
}

/* ========================================= */
/* ЧИНИМ ГЛАВНЫЙ ЭКРАН И БЛОК СТАТИСТИКИ     */
/* ========================================= */

/* 1. Возвращаем главному экрану высоту на весь монитор */
.hero {
    min-height: calc(100vh - 80px) !important; /* Высота экрана минус высота шапки */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 60px 20px !important;
    /* Гарантируем, что фон растягивается правильно */
    background-size: cover !important;
    background-position: center !important;
}

/* 2. Выстраиваем статистику (3+, 24ч, 1 сайт) в ровную строку */
.stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Жестко делим на 3 колонки */
    gap: 1px !important; /* Тонкие разделительные линии между блоками */
    background-color: #cde0df !important; /* Цвет разделителей */
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. Оформляем сами карточки статистики внутри */
.stats div {
    background-color: #f8fbfb !important; /* Светлый фон карточек */
    padding: 40px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important; /* Текст по центру */
}

/* Красивые цифры */
.stats strong {
    font-size: 32px !important;
    color: #041c20 !important;
    margin-bottom: 5px !important;
    line-height: 1.2 !important;
}

/* Описание под цифрами */
.stats span {
    color: #5d6d70 !important;
    font-size: 15px !important;
}

/* 4. Адаптив для телефонов (на узких экранах всё-таки делаем столбик, иначе текст сожмется) */
@media (max-width: 768px) {
    .stats {
        grid-template-columns: 1fr !important;
    }
    .hero {
        min-height: 80vh !important; /* Чуть меньше на мобилках */
    }
}

/* ======================================================= */
/* ФИКС: РАСТЯГИВАЕМ ТАБЛИЦУ НА ВСЮ ВЫСОТУ              */
/* ======================================================= */

.service-page-main {
    display: flex !important;
    flex-direction: column !important;
    min-height: calc(100vh - 80px) !important; /* Сайт всегда будет на весь экран */
    background-color: #0b1315 !important;
}

.service-page-main .table-scroll-wrapper {
    flex-grow: 1 !important; /* Таблица заберет всё свободное место */
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    padding: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
}

.service-page-main .sticker-table {
    width: 100% !important;
    flex-grow: 1 !important; /* Растягивает ячейки, чтобы они заняли всё пространство */
    border-collapse: collapse !important;
}

/* Растягиваем ячейки таблицы, чтобы они были высокими */
.service-page-main .sticker-table th, 
.service-page-main .sticker-table td {
    height: 100% !important; /* Заставляем ячейки тянуться */
    padding: 30px 20px !important; /* Увеличиваем падинги для массивности */
    border: 1px solid #2a3a3d !important; /* Слегка приглушенная рамка для стиля */
}

/* Полностью убираем дефолтные отступы */
.service-page-main .sticker-table {
    width: 100% !important;
    border-collapse: collapse !important; /* Убирает щели между ячейками */
    table-layout: fixed !important; /* ВАЖНО: заставляет все столбцы быть равными */
    margin: 0 !important;
    padding: 0 !important;
}

/* Принудительно задаем одинаковый размер ячейкам */
.service-page-main .sticker-table th, 
.service-page-main .sticker-table td {
    width: 25% !important; /* Если 4 столбца, делим 100% на 4 */
    height: 33.33% !important; /* Заставляем ячейки тянуться на всю высоту */
    padding: 20px !important; /* Одинаковые отступы везде */
    text-align: center !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

/* Убираем любые возможные отступы у родителя */
.service-page-main .table-scroll-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.footer-content {
    display: flex;
    justify-content: space-between;
}
.footer-links {
    display: flex;
    gap: 100px;
}

.site-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important; /* Выравнивает детей по вертикали */
    width: 100% !important; /* Жестко на всю ширину */
    padding: 20px 40px !important; /* Внутренние отступы, чтобы не липло к краям */
    box-sizing: border-box !important;
}

/* Убедимся, что блоки соцсетей и ссылок не имеют лишних отступов */
.footer-content, 
.footer-links {
    display: flex !important;
    gap: 20px !important; /* Тот самый отступ между иконками/ссылками */
}

.footer-content a {
    display: flex !important;      /* Делаем ссылку флекс-контейнером */
    align-items: center !important; /* Выравнивает иконку и текст по центру по вертикали */
    gap: 8px !important;           /* Расстояние между иконкой и текстом */
    text-decoration: none !important;
    color: white !important;       /* Или твой цвет текста */
}

.footer-content a img {
    width: 20px !important;        /* Фиксируем размер иконки */
    height: 20px !important;
}

.footer-content a img:hover {
    opacity: 0.7; /* Иконка будет слегка тускнеть при наведении */
    transition: 0.3s; /* Плавный переход */
}
.privacy-page {
   background-color: #0b1315 !important; /* Темный фон для всей страницы политики */
    color: #ffffff !important; /* Белый текст для всего контента */
    font-family: Arial, sans-serif !important; /* Чистый, читаемый шрифт */

}

/* Разблокируем секцию с текстом */
.privacy-page {
    width: 100% !important; /* На всю ширину */
    max-width: 100% !important; /* Убираем ограничения */
    display: block !important; /* Меняем flex на block, чтобы не схлопывалось */
    text-align: center !important; /* Текст будет по центру */
    padding: 40px 20px !important; /* Добавляем воздух по бокам */
    box-sizing: border-box !important;
}

/* Убедимся, что h1 не ограничен */
.privacy-page h1 {
    width: 100% !important;
    display: block !important;
    margin: 0 auto 20px !important;
}

/* Контейнер для списка (столбик) */
.messengers-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important; /* Расстояние между строками */
}

/* Каждая отдельная строка (иконка + текст) */
.messengers-list a {
    display: flex !important;
    align-items: center !important; /* Центрирует иконку и текст по вертикали */
    gap: 10px !important;           /* Расстояние между иконкой и текстом */
    text-decoration: none !important;
    color: inherit !important;      /* Чтобы цвет был как у остального текста */
}

/* Размер иконок */
.msg-icon {
    width: 24px !important;
    height: 24px !important;
}

.portfolio-card {
    max-width: 1200px !important; /* Устанавливаем «коридор», шире которого сайт не станет */
    margin: 0 auto !important;    /* Главная магия: ставит блок по центру */
    padding: 0 20px !important;   /* Чтобы на телефонах текст не прилипал к краям */
    width: 100% !important;       /* Позволяет быть узким на маленьких экранах */
}

.portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 колонки равной ширины */
    gap: 20px !important;                             /* Отступы между ними */
}
/* ======================================================= */
/* FINAL MOBILE/PORTFOLIO FIXES                            */
/* ======================================================= */

/* Portfolio: video must behave exactly like photo cards. */
.portfolio-grid {
    align-items: start !important;
}

.portfolio-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    background: #041c20 !important;
}

.portfolio-card img,
.portfolio-card video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
}

.portfolio-card video {
    max-width: 100% !important;
}

@media (max-width: 900px) {
    .portfolio-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile tables: no horizontal scrolling, the full table fits on screen. */
@media (max-width: 768px) {
    .table-container,
    .table-scroll-wrapper,
    .service-page-main .table-scroll-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: auto !important;
        padding: 6px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    table,
    .sticker-table,
    .table-scroll-wrapper .sticker-table,
    .service-page-main .sticker-table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        font-size: clamp(7px, 1.85vw, 11px) !important;
    }

    th,
    td,
    .sticker-table th,
    .sticker-table td,
    .service-page-main .sticker-table th,
    .service-page-main .sticker-table td {
        width: auto !important;
        min-width: 0 !important;
        padding: clamp(3px, 1vw, 6px) 2px !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    .table-section {
        padding-left: 8px !important;
        padding-right: 8px !important;
        overflow: visible !important;
    }

    .table-section h2,
    .page-content h2 {
        font-size: clamp(14px, 4vw, 18px) !important;
        line-height: 1.25 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .table-footer-text {
        font-size: clamp(13px, 3.5vw, 16px) !important;
        line-height: 1.35 !important;
    }
}

/* Folders service mobile spacing fix */
@media (max-width: 768px) {
    .folders-page {
        min-height: auto !important;
    }

    .folders-page .table-scroll-wrapper {
        flex-grow: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .folders-page .sticker-table {
        flex-grow: 0 !important;
        height: auto !important;
    }

    .folders-page .table-footer-text {
        margin-bottom: 0 !important;
    }
}