/* AUTO-GENERATED CSS BUNDLE */
/* Generated: 2026-07-07 00:14:44 */
/* Files: 28 */

/* === variables.css === */
/**
* Версия: 1.14
* Путь: /styles/variables.css
* Файл: variables.css
* Описание:
* - CSS-переменные для светлой и тёмной темы
* - Цветовая палитра адаптирована из донора: премиальная индустриальная схема (Медь, Охра, Сланец, Угольный)
* - v1.14: Добавлена кофейная палитра донора (Coffee, Terracotta) для полной интеграции
*/
:root {
/* ============================================
ЦВЕТОВАЯ ПАЛИТРА (СВЕТЛАЯ ТЕМА - МЕДЬ И СТАЛЬ)
============================================ */
--color-primary: #B87333; /* Медь (Copper) */
--color-primary-hover: #9A5F28;
--color-primary-light: rgba(184, 115, 51, 0.1);
--color-primary-glow-strong: rgba(184, 115, 51, 0.6);
--color-primary-glow-sm: rgba(184, 115, 51, 0.4);
--color-primary-glow-md: rgba(184, 115, 51, 0.2);
--color-primary-glow-lg: rgba(184, 115, 51, 0.1);
--color-secondary: #4A4540; /* Сланец (Slate) */
--color-secondary-hover: #2D2826; /* Угольный (Charcoal) */
--color-secondary-light: rgba(74, 69, 64, 0.1);
--color-accent: #CC7722; /* Охра (Ochre) */
--color-accent-hover: #A85F15;
--color-accent-light: rgba(204, 119, 34, 0.1);
/* Градиенты (адаптированы из донора) */
--color-accent-gradient: linear-gradient(120deg, rgba(74, 69, 64, 1) 0%, rgba(184, 115, 51, 1) 100%);
--color-accent-gradient-hover: linear-gradient(80deg, #2D2826 0%, #CC7722 100%);
--color-accent-gradient-alt: linear-gradient(120deg, rgba(184, 115, 51, 1) 0%, rgba(212, 184, 149, 1) 100%);
/* Фоновые цвета */
--bg-body: #ffffff;
--bg-surface: #f8f9fa;
--bg-elevated: #ffffff;
--bg-muted: #f1f3f5;
--bg-overlay: rgba(255, 255, 255, 0.7);
/* Текст */
--text-primary: #1a1a1a;
--text-secondary: #4b5563;
--text-muted: #9ca3af;
--text-inverse: #ffffff;
--text-link: var(--color-primary);
--text-link-hover: var(--color-primary-hover);
/* Границы */
--border-color: #e5e7eb;
--border-strong: #d1d5db;
--border-focus: var(--color-primary);
/* Состояния (Status Colors) */
--color-success: #10b981;
--color-success-bg: #ecfdf5;
--color-warning: #f59e0b;
--color-warning-bg: #fffbeb;
--color-error: #ef4444;
--color-error-bg: #fef2f2;
--color-info: #3b82f6;
--color-info-bg: #eff6ff;
/* ============================================
ПРИРОДНЫЕ И МЕТАЛЛИЧЕСКИЕ ОТТЕНКИ (ИЗ ДОНОРА)
============================================ */
/* Ландшафтная зелень */
--color-sage: #7A8B69;
--color-olive: #5C6B45;
--color-moss: #4A5D23;
/* Камень и бетон */
--color-taupe: #9C8E82;
--color-greige: #B5AFA6;
--color-slate: #4A4540;
/* Песок и металлы */
--color-sand: #D4B895;
--color-copper: #B87333;
--color-ochre: #CC7722;
/* Глубокий контраст */
--color-charcoal: #2D2826;
/* Кофейная палитра (из донора) */
--color-coffee: #5c3d2e;
--color-coffee-hover: #301705;
--color-coffee-light: #f5f0eb;
--color-terracotta: #b35844;
/* ============================================
ТИПОГРАФИКА (ЛОКАЛЬНЫЕ ШРИФТЫ)
============================================ */
--font-family-base: 'SiteBody', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-family-heading: 'SiteHeading', var(--font-family-base);
--font-family-accent: 'SiteAccent', var(--font-family-heading);
--font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
--font-size-2xs: 0.625rem;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
--line-height-tight: 1.2;
--line-height-base: 1.5;
--line-height-relaxed: 1.75;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* ============================================
ОТСТУПЫ (SPACING SCALE)
============================================ */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
/* ============================================
ОТСТУПЫ СЕКЦИЙ (ГЛОБАЛЬНАЯ АДАПТАЦИЯ)
============================================ */
--section-padding-y: clamp(var(--space-10), 8vw, var(--space-16));
--section-padding-y-lg: clamp(var(--space-12), 10vw, var(--space-24));
/* ============================================
РАДИУСЫ И ТЕНИ
============================================ */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
--btn-3d-shadow: rgba(0, 0, 0, 0.15);
--shadow-focus-ring: 0 0 0 3px var(--color-primary-light);
--shadow-focus-ring-error: 0 0 0 3px var(--color-error-bg);
--shadow-focus-ring-success: 0 0 0 3px var(--color-success-bg);
--shadow-focus-ring-wide: 0 0 0 4px var(--color-primary-light);
--shadow-inset-sm: inset 0 2px 10px rgba(0, 0, 0, 0.1);
--shadow-sm-up: 0 -4px 6px rgba(0, 0, 0, 0.05);
/* ============================================
АНИМАЦИИ И ПЕРЕХОДЫ
============================================ */
--transition-fastest: 100ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-200: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-300: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-400: 400ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-500: 500ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-600: 600ms cubic-bezier(0.4, 0, 0.2, 1);
/* ============================================
Z-INDEX (СЛОИ)
============================================ */
--z-dropdown: 100;
--z-sticky: 200;
--z-nav: 3;
--z-fixed: 300;
--z-modal-backdrop: 900;
--z-modal: 1100;
--z-popover: 1050;
--z-tooltip: 1100;
--z-toast: 1200;
--z-drawer: 1200;
--z-lightbox: 1300;
/* ============================================
КОНТЕЙНЕРЫ И БРЕЙКПОИНТЫ
============================================ */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;
--demo-layout-max-w-250: 250px;
--demo-layout-max-w-300: 300px;
--demo-layout-max-w-450: 450px;
--demo-layout-max-w-500: 500px;
--demo-layout-max-w-600: 600px;
--demo-layout-max-w-650: 650px;
--demo-layout-max-w-700: 700px;
--demo-layout-pb-150: 150px;
--demo-layout-pb-250: 250px;
--demo-layout-pb-350: 350px;
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
/* ============================================
СЛАЙДЕРЫ - АДАПТИВНЫЕ ОВЕРЛЕИ (СВЕТЛАЯ ТЕМА)
============================================ */
--slider-overlay-gradient: linear-gradient(to top, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
--slider-overlay-solid: rgba(255,255,255,0.7);
--slider-text-color: var(--text-primary);
--slider-text-opacity: 0.95;
--slider-dots-color: rgba(0, 0, 0, 0.3);
--slider-dots-color-light: rgba(255, 255, 255, 0.35);
--slider-caption-bg: rgba(0, 0, 0, 0.7);
/* ============================================
СПЕЦИАЛЬНЫЕ / БРЕНДОВЫЕ ЦВЕТА
============================================ */
--color-neon-cyan: #00ffff;
--color-neon-cyan-light: rgba(0, 255, 255, 0.1);
--color-neon-magenta: #ff00ff;
--color-neon-magenta-light: rgba(255, 0, 255, 0.1);
--color-gold: #ffd700;
--shadow-overlay: rgba(0, 0, 0, 0.3);
--shine-overlay-xs: rgba(255, 255, 255, 0.05);
--shine-overlay-sm: rgba(255, 255, 255, 0.1);
--shine-overlay-md: rgba(255, 255, 255, 0.3);
--shine-overlay-lg: rgba(255, 255, 255, 0.5);
--color-primary-glow-spotlight: rgba(184, 115, 51, 0.25);
/* ============================================
GLASS-ЭФФЕКТЫ И OVERLAY
============================================ */
--glass-overlay: rgba(255, 255, 255, 0.15);
--glass-overlay-hover: rgba(255, 255, 255, 0.2);
--glass-border: rgba(255, 255, 255, 0.15);
--glass-border-focus: rgba(255, 255, 255, 0.4);
/* ============================================
CODE EDITOR ЦВЕТА
============================================ */
--code-editor-bg: #1e1e1e;
--code-editor-surface: #2d2d2d;
--code-editor-border: #333333;
--code-editor-gutter: #555555;
--code-editor-text: #d4d4d4;
--code-editor-syntax-keyword: #4ec9b0;
--code-editor-line-number: #858585;
}
/* ============================================
ТЁМНАЯ ТЕМА (DARK MODE - ПРЕМИУМ МЕТАЛЛ)
============================================ */
[data-theme="dark"] {
--bg-body: #121214; /* Charcoal */
--bg-surface: #1e1e24;
--bg-elevated: #27272a;
--bg-muted: #2d2d3a;
--bg-overlay: rgba(0, 0, 0, 0.7);
--text-primary: #f4f4f5;
--text-secondary: #a1a1aa;
--text-muted: #71717a;
--text-inverse: #ffffff;
--border-color: #3f3f46;
--border-strong: #52525b;
--color-success-bg: rgba(16, 185, 129, 0.15);
--color-warning-bg: rgba(245, 158, 11, 0.15);
--color-error-bg: rgba(239, 68, 68, 0.15);
--color-info-bg: rgba(59, 130, 246, 0.15);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6), 0 10px 10px rgba(0, 0, 0, 0.5);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
--color-primary: #d49a6a; /* Light Copper */
--color-primary-hover: #e6b58e;
--color-primary-light: rgba(212, 154, 106, 0.15);
--color-primary-glow-strong: rgba(212, 154, 106, 0.6);
--color-primary-glow-sm: rgba(212, 154, 106, 0.4);
--color-primary-glow-md: rgba(212, 154, 106, 0.2);
--color-primary-glow-lg: rgba(212, 154, 106, 0.1);
--color-secondary: #8b8b93; /* Light Slate */
--color-secondary-hover: #a1a1aa;
--color-secondary-light: rgba(139, 139, 147, 0.15);
--color-accent: #e0a96d; /* Light Ochre */
--color-accent-hover: #f0c28e;
--color-accent-light: rgba(224, 169, 109, 0.15);
--slider-overlay-gradient: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
--slider-overlay-solid: rgba(0,0,0,0.6);
--slider-text-color: var(--text-inverse);
--slider-text-opacity: 0.95;
--slider-dots-color: rgba(255, 255, 255, 0.35);
--slider-dots-color-light: rgba(0, 0, 0, 0.3);
--slider-caption-bg: rgba(0, 0, 0, 0.8);
--color-primary-glow-spotlight: rgba(212, 154, 106, 0.25);
--glass-overlay: rgba(0, 0, 0, 0.3);
--glass-overlay-hover: rgba(0, 0, 0, 0.4);
/* Природные и металлические оттенки (Dark Mode) */
--color-sage: #8A9B79;
--color-olive: #6C7B55;
--color-moss: #5A6D33;
--color-taupe: #A89A8E;
--color-greige: #C5BFB6;
--color-slate: #8b8b93;
--color-sand: #e6cba8;
--color-copper: #d49a6a;
--color-ochre: #e0a96d;
--color-charcoal: #121214;
/* Кофейная палитра (Dark Mode) */
--color-coffee: #8b6b4a;
--color-coffee-hover: #a67c52;
--color-terracotta: #c47a5a;
}

/* === reset.css === */
/**
 * Версия: 1.0
 * Путь: /Style_Guide/css/reset.css
 * Файл: reset.css
 * Описание:
 * - Современный CSS-сброс (Modern CSS Reset)
 * - Нормализация box-sizing
 * - Удаление дефолтных отступов и стилей
 * - Оптимизация для доступности и производительности
 */

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

/* 2. Remove default margin and padding */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* 3. HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/* 4. Set core body defaults (переопределяется в base.css, но min-height важен здесь) */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 5. Remove list styles on ul, ol elements with a list role */
ul,
ol {
  list-style: none;
}

/* 6. A elements that don't have a class get default styles */
a {
  text-decoration-skip-ink: auto;
  color: inherit;
  text-decoration: none;
}

/* 7. Make images and media easier to work with */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 8. Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

/* 9. Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}

/* 10. Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 11. Скрытие скроллбаров (опционально, если требуется кастомный скролл, но для reset лучше оставить дефолт) */
/* Для сброса оставляем нативный скролл, кастомизация возможна в utilities */

/* 12. Table reset */
table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* === about-us.css === */
/*
* Версия: 1.2
* Путь: /styles/about-us.css
* Файл: about-us.css
* Описание: Стили для блока "О нас"
* v1.2: Увеличен размер заголовка до 5xl
*/
.about-us {
padding-block: var(--section-padding-y);
}
.about-us__header {
margin-bottom: var(--space-8);
text-align: center;
}
.about-us__title {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 var(--space-4);
}
.about-us__grid {
display: grid;
gap: var(--space-8);
}
.about-us__grid--main {
grid-template-columns: 1fr;
margin-bottom: var(--space-10);
}
@media (min-width: 768px) {
.about-us__grid--main {
grid-template-columns: 1fr 1fr;
align-items: center;
}
}
.about-us__media {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.about-us__video {
width: 100%;
height: auto;
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
background-color: var(--bg-muted);
}
.about-us__subtitle {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin-top: 0;
margin-bottom: var(--space-4);
}
.about-us__text p {
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--text-secondary);
margin-bottom: var(--space-4);
}
.about-us__text p:last-child {
margin-bottom: 0;
}
.about-us__grid--features {
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.about-us__grid--features {
grid-template-columns: 1fr 1fr;
}
}
.about-us__feature {
padding: var(--space-6);
background-color: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.about-us__feature:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.about-us__feature-header {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.about-us__feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--color-primary);
flex-shrink: 0;
}
.about-us__feature-icon svg {
width: 100%;
height: 100%;
}
.about-us__feature-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin: 0;
text-transform: uppercase;
}
.about-us__feature-text {
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
color: var(--text-secondary);
margin: 0;
}

/* === about.css === */
/**
* Версия: 2.5
* Путь: /styles/about.css
* Файл: about.css
* Описание: Premium стили для блока about-section
* v2.5: Исправлен баг с наложением experience-badge на видео. Теперь бейдж идет в один ряд со статистикой.
*/
.about-section {
padding-block: var(--section-padding-y);
background-color: var(--bg-body);
position: relative;
overflow: hidden;
width: 100%;
}

.about-section__decor {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}

.about-section__orb {
position: absolute;
border-radius: 50%;
filter: blur(120px);
opacity: 0.4;
animation: floatOrb 20s infinite alternate ease-in-out;
}

.about-section__orb--1 {
width: 500px;
height: 500px;
background: var(--color-primary-light);
top: -10%;
left: -10%;
}

.about-section__orb--2 {
width: 600px;
height: 600px;
background: var(--color-secondary-light);
bottom: -20%;
right: -15%;
animation-delay: -10s;
}

@keyframes floatOrb {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(50px, -50px) scale(1.1); }
}

.about-section .container {
position: relative;
z-index: 1;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}

.about-section__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-12);
align-items: center;
width: 100%;
}

@media (min-width: 992px) {
.about-section__grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
}
}

.about-section__visual {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-6);
}

.about-section__media-card {
position: relative;
border-radius: var(--radius-2xl);
overflow: visible;
}

.about-section__image-wrapper {
position: relative;
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-2xl);
aspect-ratio: 4 / 5;
max-height: 600px;
width: 100%;
border: 1px solid var(--border-color);
}

.about-section__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-section__image-wrapper:hover .about-section__image {
transform: scale(1.05);
}

.about-section__play-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 50%);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}

.about-section__image-wrapper:hover .about-section__play-overlay {
opacity: 1;
}

.about-section__play-overlay svg {
width: 80px;
height: 80px;
color: #fff;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}

.about-section__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
margin-top: var(--space-4);
}

.about-section__experience-badge {
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-xl);
padding: var(--space-5) var(--space-6);
box-shadow: var(--shadow-xl);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

.about-section__exp-number {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
}

.about-section__exp-text {
font-size: var(--font-size-sm);
color: var(--text-secondary);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 4px;
}

.about-section__stat {
background: var(--bg-elevated);
padding: var(--space-5);
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
text-align: center;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.about-section__stat:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary-light);
}

.about-section__stat-number {
display: block;
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
line-height: 1;
margin-bottom: var(--space-1);
}

.about-section__stat-label {
font-size: var(--font-size-xs);
color: var(--text-muted);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
letter-spacing: 0.05em;
}

.about-section__content {
display: flex;
flex-direction: column;
gap: var(--space-6);
}

.about-section__badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: var(--color-primary-light);
color: var(--color-primary);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
width: fit-content;
}

.about-section__title {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
line-height: var(--line-height-tight);
margin: 0;
letter-spacing: -0.02em;
}

.text-gradient {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.about-section__text {
font-size: var(--font-size-lg);
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
margin: 0;
}

.about-section__features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-4);
}

.about-section__feature {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-4);
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-section__feature:hover {
background: var(--bg-elevated);
border-color: var(--color-primary-light);
box-shadow: var(--shadow-md);
transform: translateX(8px);
}

.about-section__feature-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
min-width: 48px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
color: #fff;
border-radius: var(--radius-md);
box-shadow: 0 4px 12px rgba(234, 81, 50, 0.25);
transition: transform 0.3s ease;
}

.about-section__feature:hover .about-section__feature-icon {
transform: scale(1.1) rotate(-5deg);
}

.about-section__feature-icon svg {
width: 24px;
height: 24px;
}

.about-section__feature-content {
display: flex;
flex-direction: column;
gap: 4px;
}

.about-section__feature-content strong {
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
}

.about-section__feature-content span {
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: 1.5;
}

.about-section__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-top: var(--space-4);
}

@media (max-width: 767px) {
.about-section__image-wrapper {
aspect-ratio: 16 / 10;
max-height: 400px;
}
.about-section__stats {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-2);
}
.about-section__experience-badge {
padding: var(--space-3) var(--space-2);
}
.about-section__exp-number {
font-size: var(--font-size-2xl);
}
.about-section__exp-text {
font-size: var(--font-size-2xs);
text-align: center;
}
.about-section__stat {
padding: var(--space-3) var(--space-2);
}
.about-section__stat-number {
font-size: var(--font-size-2xl);
}
.about-section__stat-label {
font-size: 0.625rem;
}
.about-section__feature:hover {
transform: translateX(0);
}
}

/* === base.css === */
/**
* Версия: 1.9
* Путь: /styles/base.css
* Файл: base.css
* Описание: Базовые стили для body и глобальные переходы тем
* v1.9: Добавлены стили для динамической капчи со спиннером
*/
body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    transition: background-color var(--transition-base), color var(--transition-base);
}

::selection {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

h1 {
    font-size: var(--font-size-2xs);
    margin-bottom: var(--space-5);
    letter-spacing: -0.025em;
}

h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-4);
    letter-spacing: -0.02em;
}

h3 {
    font-size: var(--font-size-5xl);
}

h4 {
    font-size: var(--font-size-lg);
}

h5 {
    font-size: var(--font-size-base);
}

h6 {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

@media (min-width: 768px) {
    h1 {
        font-size: var(--font-size-4xl);
        margin-bottom: var(--space-6);
    }
    h2 {
        font-size: var(--font-size-3xl);
        margin-bottom: var(--space-5);
    }
    h3 {
        font-size: var(--font-size-2xl);
    }
    h4 {
        font-size: var(--font-size-xl);
    }
    h5 {
        font-size: var(--font-size-lg);
    }
    h6 {
        font-size: var(--font-size-base);
    }
}

p {
    margin-bottom: var(--space-4);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

strong, b {
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

em, i {
    font-style: italic;
}

small {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

mark {
    background-color: var(--color-warning-bg);
    color: var(--text-primary);
    padding: 0.1em 0.3em;
    border-radius: var(--radius-sm);
}

a {
    color: var(--text-link);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

a:hover {
    color: var(--text-link-hover);
    text-decoration-color: var(--text-link-hover);
}

a:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.prose ul,
.prose ol {
    margin-bottom: var(--space-4);
    padding-left: var(--space-6);
}

.prose ul {
    list-style-type: disc;
}

.prose ol {
    list-style-type: decimal;
}

.prose li {
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

.prose li::marker {
    color: var(--color-primary);
}

blockquote {
    border-left: 4px solid var(--color-primary);
    padding: var(--space-4) var(--space-6);
    margin: 0 0 var(--space-6) 0;
    background-color: var(--bg-muted);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--text-primary);
}

blockquote cite {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-style: normal;
    font-weight: var(--font-weight-medium);
}

code {
    font-family: var(--font-family-mono);
    font-size: 0.875em;
    background-color: var(--bg-muted);
    color: var(--color-accent);
    padding: 0.2em 0.4em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

pre {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    overflow-x: auto;
    margin-bottom: var(--space-6);
    line-height: var(--line-height-base);
}

pre code {
    background-color: transparent;
    border: none;
    padding: 0;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

hr {
    border: none;
    height: 1px;
    background-color: var(--border-color);
    margin: var(--space-8) 0;
}

table {
    width: 100%;
    margin-bottom: var(--space-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

th, td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

th {
    background-color: var(--bg-muted);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

tr:last-child td {
    border-bottom: none;
}

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.icon--solid {
    fill: currentColor;
    stroke: none;
}

.icon--xs { width: 0.75rem; height: 0.75rem; }
.icon--sm { width: 1rem; height: 1rem; }
.icon--md { width: 1.5rem; height: 1.5rem; }
.icon--lg { width: 2rem; height: 2rem; }
.icon--xl { width: 3rem; height: 3rem; }

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    border-radius: var(--radius-full);
    border: 3px solid transparent;
    background-clip: padding-box;
    transition: background-color var(--transition-fast);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-muted);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* ============================================
ТИПОГРАФИКА: ЗАГОЛОВКИ СЕКЦИЙ (PAGE HEADER)
============================================ */
.page-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.page-title {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-4);
}

.page-description {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    max-width: 700px;
    margin: 0 auto;
}

/* ============================================
FORM CONSENT (152-ФЗ)
============================================ */
.form-consent {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

.form-consent__label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1.5;
}

.form-consent__label input[type="checkbox"] {
    margin-top: 0.25em;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.form-consent__label a {
    color: var(--color-primary);
    text-decoration: underline;
}

.form-consent__label a:hover {
    color: var(--color-primary-hover);
}

/* ============================================
СПИННЕР ЗАГРУЗКИ КАПЧИ (DYNAMIC CAPTCHA)
============================================ */
.form-captcha-container {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
    min-height: 60px;
    position: relative;
}

.captcha-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--bg-elevated) 100%);
    border: 1px solid var(--color-info);
    border-radius: var(--radius-lg);
    animation: spinnerFadeIn 0.3s ease forwards;
}

.captcha-spinner__icon {
    width: 24px;
    height: 24px;
    color: var(--color-info);
    flex-shrink: 0;
}

.captcha-spinner__text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
}

@keyframes spinnerFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
FORM CAPTCHA (Динамическая математическая капча)
============================================ */
.form-captcha {
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--bg-elevated) 100%);
    border: 1px solid var(--color-info);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
    animation: captchaSlideDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: top center;
}

@keyframes captchaSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-15px) scaleY(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

.form-captcha__label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    cursor: pointer;
}

.form-captcha__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--color-info);
    animation: captchaPulse 2s infinite ease-in-out;
}

@keyframes captchaPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.form-captcha__input {
    width: 80px;
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    text-align: center;
    color: var(--text-primary);
    background: var(--bg-body);
    transition: all var(--transition-fast);
}

.form-captcha__input:focus {
    outline: none;
    border-color: var(--color-info);
    box-shadow: 0 0 0 4px var(--color-info-bg);
    transform: scale(1.05);
}

/* Состояние ошибки капчи */
.form-captcha--error {
    border-color: var(--color-error);
    background: linear-gradient(135deg, var(--color-error-bg) 0%, var(--bg-elevated) 100%);
    animation: captchaShake 0.4s ease;
}

.form-captcha--error .form-captcha__icon {
    color: var(--color-error);
}

.form-captcha--error .form-captcha__input {
    border-color: var(--color-error);
    box-shadow: 0 0 0 4px var(--color-error-bg);
}

@keyframes captchaShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

/* ============================================
FORM MESSAGES (Сообщения форм)
============================================ */
.form-message {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    animation: formMessageSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
    transform: translateY(10px);
}

.form-message__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.form-message--success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.form-message--error {
    background-color: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

@keyframes formMessageSlideIn {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* === blocks.css === */
/* Hero Section */
.hero-section {
color: #ffffff;
padding-block: var(--section-padding-y-lg);
text-align: center;
position: relative;
overflow: hidden;
}
.hero-section__overlay {
position: absolute;
inset: 0;
background-image: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.85) 100%);
z-index: 1;
}
.hero-section .container {
position: relative;
z-index: 2;
}
.hero-section__content {
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
/* Staggered Fade-In-Up Animations */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
0% { left: -100%; }
20% { left: 100%; }
100% { left: 100%; }
}
@keyframes textShine {
to { background-position: 200% center; }
}
@keyframes pulseGlow {
0% { box-shadow: 0 8px 20px rgba(234, 81, 50, 0.4); }
50% { box-shadow: 0 8px 40px rgba(234, 81, 50, 0.8), 0 0 60px rgba(234, 81, 50, 0.4); }
100% { box-shadow: 0 8px 20px rgba(234, 81, 50, 0.4); }
}
.hero-section__badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #FFFFFF;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 1;
padding: 12px 24px;
border-radius: 50px;
margin-bottom: 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
animation: fadeInUp 0.8s ease-out forwards;
opacity: 0;
}
.hero-section__badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: shimmer 4s infinite;
}
.hero-section__title {
font-size: clamp(48px, 8vw, 110px);
font-weight: 900;
text-transform: uppercase;
line-height: 1.05;
color: #FFFFFF;
margin-bottom: 24px;
text-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
letter-spacing: -1px;
background: linear-gradient(to right, #ffffff, #e0e0e0, #ffffff);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: fadeInUp 0.8s ease-out 0.2s forwards, textShine 5s linear infinite;
opacity: 0;
}
.hero-section__text {
font-family: var(--font-family-base, 'Inter', sans-serif);
font-size: clamp(16px, 2vw, 20px);
font-weight: 400;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 32px;
max-width: 700px;
line-height: 1.6;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
animation: fadeInUp 0.8s ease-out 0.4s forwards;
opacity: 0;
}
.hero-section__socials-title {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 16px;
animation: fadeInUp 0.8s ease-out 0.6s forwards;
opacity: 0;
}
.hero-section__socials {
display: flex;
gap: 16px;
margin-bottom: 32px;
justify-content: center;
animation: fadeInUp 0.8s ease-out 0.7s forwards;
opacity: 0;
align-items: center;
}
.hero-section__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.hero-section__social-link:hover {
transform: translateY(-5px) scale(1.15);
}
/* Иконки соцсетей — отображаются в оригинальных цветах SVG, увеличенный размер */
.hero-section__social-link img {
width: 32px;
height: 32px;
}
.hero-section__btn {
background: linear-gradient(45deg, #ea5132, #c94227);
color: #FFFFFF;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
line-height: 1.4;
padding: 18px 40px;
border-radius: 50px;
border: none;
cursor: pointer;
transition: all 0.4s ease;
box-shadow: 0 8px 20px rgba(234, 81, 50, 0.4);
position: relative;
overflow: hidden;
animation: fadeInUp 0.8s ease-out 0.8s forwards, pulseGlow 2.5s infinite;
opacity: 0;
}
.hero-section__btn:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 12px 30px rgba(234, 81, 50, 0.6);
}
.hero-section__btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: 0.6s;
}
.hero-section__btn:hover::before {
left: 100%;
}
/* Адаптивность для мобильных устройств */
@media (max-width: 767px) {
.hero-section__badge {
font-size: 12px;
letter-spacing: 2px;
padding: 10px 18px;
}
.hero-section__btn {
font-size: 16px;
padding: 16px 28px;
}
}
/* Elementor Base Grid Styles */
.elementor-section.elementor-section-boxed > .elementor-container {
max-width: 1140px;
margin: 0 auto;
}
.elementor-container {
display: flex;
flex-wrap: wrap;
}
.elementor-column-gap-default > .elementor-column > .elementor-widget-wrap {
padding: 10px;
}
.elementor-column {
display: flex;
min-height: 1px;
position: relative;
flex-wrap: wrap;
}
.elementor-col-50 {
width: 50%;
}
.elementor-col-100 {
width: 100%;
}
.elementor-widget-wrap {
width: 100%;
}
.elementor-widget-heading {
text-align: center;
}
.elementor-widget-heading .elementor-heading-title {
font-family: var(--font-family-heading, 'H1'), Sans-serif;
font-weight: 600;
line-height: 1.4em;
color: #000000;
margin: 0;
}
.elementor-widget-button .elementor-button {
background-color: #ea5132;
color: #FFFFFF;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
line-height: 1.4em;
padding: 16px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
transition: background 0.3s;
text-decoration: none;
display: inline-block;
}
.elementor-widget-button .elementor-button:hover {
background-color: #c94227;
}
.elementor-widget-button .elementor-button-content-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 767px) {
.elementor-col-50 {
width: 100%;
}
}

/* === blog.css === */
/**
* Версия: 1.3
* Путь: /styles/blog.css
* Файл: blog.css
* Описание: Стили для блока "Блог" (blog-section)
* v1.3: Увеличен размер заголовка до 5xl
*/
.blog-section {
padding-block: var(--section-padding-y);
background-color: var(--bg-surface);
}
.blog-section .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
.blog-section__header {
text-align: center;
margin-bottom: var(--space-12);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.blog-section__title {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-4);
line-height: var(--line-height-tight);
}
.blog-section__desc {
color: var(--text-secondary);
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
}
.blog-section__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
.blog-section__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.blog-section__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.blog-card {
display: flex;
flex-direction: column;
background-color: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.blog-card__image {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background-color: var(--bg-muted);
}
.blog-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.blog-card:hover .blog-card__image img {
transform: scale(1.05);
}
.blog-card__badge {
position: absolute;
top: var(--space-3);
left: var(--space-3);
background-color: var(--color-primary);
color: var(--text-inverse);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.blog-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: var(--space-6);
}
.blog-card__meta {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--font-size-sm);
color: var(--text-muted);
margin-bottom: var(--space-3);
}
.blog-card__category {
color: var(--color-primary);
font-weight: var(--font-weight-medium);
}
.blog-card__title {
font-size: var(--font-size-xl);
line-height: var(--line-height-tight);
margin-bottom: var(--space-3);
}
.blog-card__link {
color: var(--text-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
.blog-card__link:hover {
color: var(--color-primary);
}
.blog-card__text {
color: var(--text-secondary);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
margin-bottom: var(--space-4);
flex: 1;
}
.blog-card__more {
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
text-decoration: none;
font-size: var(--font-size-sm);
transition: gap var(--transition-fast);
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.blog-card__more:hover {
gap: var(--space-2);
text-decoration: underline;
}
.blog-section__footer {
text-align: center;
}

/* === buttons.css === */
/**
* Версия: 1.0
* Путь: /styles/buttons.css
* Файл: buttons.css
* Описание: Глобальные стили для кнопок (.btn) и акцентного текста (.text-accent)
*/

/* ============================================
БАЗОВЫЕ СТИЛИ КНОПОК
============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base, 1rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 2px solid transparent;
  border-radius: var(--radius-md, 0.5rem);
  transition: all var(--transition-base, 0.25s cubic-bezier(0.4, 0, 0.2, 1));
  position: relative;
  overflow: hidden;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring, 0 0 0 3px var(--color-primary-light));
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

.btn svg {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  transition: transform var(--transition-fast, 0.15s ease);
}

/* Размеры */
.btn--sm {
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  font-size: var(--font-size-sm, 0.875rem);
}

.btn--lg {
  padding: var(--space-4, 1rem) var(--space-8, 2rem);
  font-size: var(--font-size-lg, 1.125rem);
}

/* ============================================
ВАРИАНТЫ КНОПОК
============================================ */

/* Primary (Основная брендовая кнопка) */
.btn--primary {
  background-color: var(--color-primary, #ea5132);
  color: var(--text-inverse, #ffffff);
  border-color: var(--color-primary, #ea5132);
  box-shadow: 0 4px 14px 0 rgba(234, 81, 50, 0.3);
}

.btn--primary:hover {
  background-color: var(--color-primary-hover, #c94227);
  border-color: var(--color-primary-hover, #c94227);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px 0 rgba(234, 81, 50, 0.4);
}

.btn--primary:hover svg {
  transform: translateX(4px);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px 0 rgba(234, 81, 50, 0.3);
}

/* Outline Light (Прозрачная с белой обводкой для темных фонов) */
.btn--outline-light {
  background-color: transparent;
  color: var(--text-inverse, #ffffff);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn--outline-light:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--text-inverse, #ffffff);
  transform: translateY(-2px);
}

.btn--outline-light:hover svg {
  transform: translateX(4px);
}

/* Ghost (Призрачная кнопка без фона и обводки) */
.btn--ghost {
  background-color: transparent;
  color: var(--text-secondary, #6b7280);
  border-color: transparent;
  padding-left: var(--space-2, 0.5rem);
  padding-right: var(--space-2, 0.5rem);
}

.btn--ghost:hover {
  color: var(--color-primary, #ea5132);
  background-color: var(--color-primary-light, rgba(234, 81, 50, 0.1));
}

.btn--ghost:hover svg {
  transform: translateX(4px);
}

/* Outline (Стандартная с обводкой бренда) */
.btn--outline {
  background-color: transparent;
  color: var(--color-primary, #ea5132);
  border-color: var(--color-primary, #ea5132);
}

.btn--outline:hover {
  background-color: var(--color-primary, #ea5132);
  color: var(--text-inverse, #ffffff);
  transform: translateY(-2px);
}

/* ============================================
АКЦЕНТНЫЙ ТЕКСТ
============================================ */
.text-accent {
  color: var(--color-primary, #ea5132);
  font-weight: var(--font-weight-bold, 700);
}

/* ============================================
АДАПТИВНОСТЬ
============================================ */
@media (max-width: 767px) {
  .btn--lg {
    width: 100%;
    padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
  }
}

/* === contacts-drawer.css === */
/* Contacts Drawer */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none;
    visibility: hidden;
}

.drawer.drawer--open {
    pointer-events: auto;
    visibility: visible;
}

.drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.drawer.drawer--open .drawer__overlay {
    opacity: 1;
}

.drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.drawer.drawer--open .drawer__panel {
    transform: translateX(0);
}

.drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.drawer__title {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

.drawer__close-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #6b7280;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.drawer__close-btn:hover {
    background: #f3f4f6;
    color: #1a1a1a;
}

.drawer__body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.drawer-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.drawer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.drawer-contact-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(234, 81, 50, 0.1);
    color: #ea5132;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.drawer-contact-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.drawer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.drawer-contact-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.drawer-contact-value {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.2s;
}

a.drawer-contact-value:hover {
    color: #ea5132;
}

.drawer-contact-sub {
    font-size: 13px;
    color: #6b7280;
}

.drawer-socials {
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.drawer-socials-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 16px 0;
}

.drawer-socials-list {
    display: flex;
    gap: 12px;
}

.drawer-social-link {
    width: 44px;
    height: 44px;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.drawer-social-link:hover {
    background: rgba(234, 81, 50, 0.1);
    border-color: #ea5132;
    transform: translateY(-3px);
}

.drawer-social-link img {
    width: 20px;
    height: 20px;
}

.drawer-map {
    border-radius: 12px;
    overflow: hidden;
    height: 200px;
    border: 1px solid #e5e7eb;
}

.drawer-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 480px) {
    .drawer__panel {
        max-width: 100%;
    }
}

/* === contacts.css === */
/css
/**
* Версия: 1.0
* Путь: /styles/contacts.css
* Файл: contacts.css
* Описание: Стили для страницы контактов
*/

/* ============================================
HERO SECTION
============================================ */
.contacts-hero {
position: relative;
padding: var(--section-padding-y-lg) 0;
background-color: var(--bg-surface);
text-align: center;
overflow: hidden;
}

.contacts-hero::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 400px;
height: 400px;
background: var(--color-primary-glow-lg);
border-radius: 50%;
filter: blur(8px);
z-index: 0;
pointer-events: none;
}

.contacts-hero .container {
position: relative;
z-index: 1;
}

.contacts-hero__badge {
display: inline-block;
padding: var(--space-2) var(--space-4);
background-color: var(--color-primary-light);
color: var(--color-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-4);
}

.contacts-hero__title {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-4);
line-height: var(--line-height-tight);
}

.contacts-hero__subtitle {
font-size: var(--font-size-lg);
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
max-width: 600px;
margin: 0 auto;
}

/* ============================================
CONTACTS GRID
============================================ */
.contacts-section {
padding-block: var(--section-padding-y);
background-color: var(--bg-body);
}

.contacts-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
margin-bottom: var(--space-12);
}

@media (min-width: 768px) {
.contacts-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 1024px) {
.contacts-grid {
grid-template-columns: repeat(4, 1fr);
}
}

.contact-card {
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-xl);
padding: var(--space-6);
text-align: center;
transition: all var(--transition-base);
display: flex;
flex-direction: column;
align-items: center;
}

.contact-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary-light);
}

.contact-card__icon {
width: 64px;
height: 64px;
background: var(--color-primary-light);
color: var(--color-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-4);
transition: all var(--transition-base);
}

.contact-card:hover .contact-card__icon {
background: var(--color-primary);
color: var(--text-inverse);
transform: scale(1.1);
}

.contact-card__icon svg {
width: 32px;
height: 32px;
}

.contact-card__label {
font-size: var(--font-size-sm);
color: var(--text-muted);
margin-bottom: var(--space-2);
text-transform: uppercase;
letter-spacing: 0.05em;
}

.contact-card__value {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
text-decoration: none;
transition: color var(--transition-fast);
}

a.contact-card__value:hover {
color: var(--color-primary);
}

.contact-card__sub {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin-top: var(--space-2);
}

/* ============================================
MESSENGERS SECTION
============================================ */
.messengers-section {
padding-block: var(--section-padding-y);
background-color: var(--bg-surface);
text-align: center;
}

.messengers-section__title {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-4);
}

.messengers-section__subtitle {
font-size: var(--font-size-lg);
color: var(--text-secondary);
margin-bottom: var(--space-8);
}

.messengers-grid {
display: flex;
justify-content: center;
gap: var(--space-6);
flex-wrap: wrap;
}

.messenger-link {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
text-decoration: none;
color: var(--text-primary);
font-weight: var(--font-weight-semibold);
transition: all var(--transition-base);
}

.messenger-link:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--color-primary-light);
}

.messenger-link img {
width: 32px;
height: 32px;
}

/* ============================================
MAP SECTION
============================================ */
.map-section {
padding-block: var(--section-padding-y);
background-color: var(--bg-body);
}

.map-section__title {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
text-align: center;
margin-bottom: var(--space-8);
}

.map-container {
max-width: 1200px;
margin: 0 auto;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
}

.map-container iframe {
width: 100%;
height: 500px;
border: 0;
display: block;
}

@media (max-width: 767px) {
.map-container iframe {
height: 350px;
}
}

/* ============================================
FORM SECTION
============================================ */
.contacts-form-section {
padding-block: var(--section-padding-y);
background-color: var(--bg-surface);
}

.contacts-form-section__title {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
text-align: center;
margin-bottom: var(--space-4);
}

.contacts-form-section__subtitle {
font-size: var(--font-size-lg);
color: var(--text-secondary);
text-align: center;
margin-bottom: var(--space-8);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}

.contacts-form {
max-width: 600px;
margin: 0 auto;
background: var(--bg-elevated);
padding: var(--space-8);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
}

.contacts-form__field {
margin-bottom: var(--space-4);
}

.contacts-form__label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin-bottom: var(--space-2);
}

.contacts-form__input,
.contacts-form__textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
background: var(--bg-body);
color: var(--text-primary);
font-size: var(--font-size-base);
font-family: inherit;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contacts-form__input:focus,
.contacts-form__textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-light);
}

.contacts-form__textarea {
resize: vertical;
min-height: 120px;
}

.contacts-form__submit {
width: 100%;
margin-top: var(--space-4);
}

/* === faq.css === */
/*
* Версия: 1.3
* Путь: /styles/faq.css
* Файл: faq.css
* Описание: Стили для блока FAQ (Аккордеон)
* v1.3: Увеличен размер заголовка до 5xl
*/
.faq-section {
padding-block: var(--section-padding-y);
background-color: var(--bg-surface, #f8f9fa);
}
.faq-section .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
.faq-section__title {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
text-align: center;
margin-bottom: var(--space-12);
color: var(--text-primary, #1a1a1a);
line-height: var(--line-height-tight);
}
.faq-list {
max-width: 860px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.faq-item {
background-color: var(--bg-elevated, #ffffff);
border: 1px solid var(--border-color, #e5e7eb);
border-radius: 8px;
overflow: hidden;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq-item:hover {
border-color: var(--color-primary, #ea5132);
}
.faq-item.active {
border-color: var(--color-primary, #ea5132);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.faq-item h3 {
font-size: 18px;
font-weight: 600;
padding: 20px 24px;
margin: 0;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
color: var(--text-primary, #1a1a1a);
transition: color 0.3s ease;
line-height: 1.4;
}
.faq-item h3:hover {
color: var(--color-primary, #ea5132);
}
.faq-item.active h3 {
color: var(--color-primary, #ea5132);
}
.faq-item h3::after {
content: '+';
font-size: 28px;
font-weight: 300;
line-height: 1;
transition: transform 0.3s ease;
flex-shrink: 0;
color: var(--text-primary, #1a1a1a);
}
.faq-item.active h3::after {
transform: rotate(45deg);
color: var(--color-primary, #ea5132);
}
.faq-item__content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.4s ease;
padding: 0 24px;
}
.faq-item.active .faq-item__content {
max-height: 600px;
padding: 0 24px 24px;
}
.faq-item__content p {
font-size: 16px;
line-height: 1.6;
color: var(--text-secondary, #4b5563);
margin: 0;
}
@media (max-width: 767px) {
.faq-section {
padding-block: var(--section-padding-y);
}
.faq-section__title {
margin-bottom: var(--space-8);
}
.faq-item h3 {
font-size: 16px;
padding: 16px 20px;
}
.faq-item h3::after {
font-size: 24px;
}
.faq-item.active .faq-item__content {
padding: 0 20px 20px;
}
.faq-item__content p {
font-size: 15px;
}
}

/* === footer-styles.css === */
/**
* Версия: 1.4
* Путь: /styles/footer-styles.css
* Файл: footer-styles.css
* Описание: Стили для нового подвала сайта (Modern Industrial Dark)
* v1.4: Интеграция сланцевых и угольных тонов донора (Slate, Charcoal, Copper)
*/
/* ============================================
NEW SITE FOOTER (Modern Industrial Dark)
============================================ */
.site-footer-new {
background-color: var(--color-charcoal);
color: var(--color-greige);
font-size: 15px;
line-height: 1.6;
position: relative;
overflow: hidden;
}
/* ============================================
КОНТЕЙНЕРЫ ТИПА 1 (Ограничение ширины 1200px)
============================================ */
.footer-cta .container,
.footer-main .container,
.footer-bottom .container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
/* CTA Section */
.footer-cta {
background: linear-gradient(135deg, var(--color-slate) 0%, var(--color-coffee-hover) 100%);
padding: 60px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
}
.footer-cta::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 400px;
height: 400px;
background: var(--color-copper);
border-radius: 50%;
filter: blur(120px);
opacity: 0.15;
pointer-events: none;
}
.footer-cta__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
position: relative;
z-index: 1;
}
.footer-cta__title {
font-size: clamp(24px, 4vw, 32px);
font-weight: 800;
color: #ffffff;
margin: 0 0 12px;
line-height: 1.2;
}
.footer-cta__desc {
color: var(--color-taupe);
font-size: 16px;
margin: 0;
max-width: 500px;
}
.footer-cta__actions {
display: flex;
gap: 16px;
flex-shrink: 0;
}
.footer-cta__btn {
white-space: nowrap;
}
/* Main Footer Content */
.footer-main {
padding: 80px 0 60px;
}
.footer-main__grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: 40px;
}
/* Columns */
.footer-col__desc {
color: var(--color-taupe);
margin: 20px 0 24px;
font-size: 14px;
line-height: 1.7;
max-width: 300px;
}
.footer-col__heading {
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
color: #ffffff;
margin: 0 0 24px;
letter-spacing: 0.5px;
position: relative;
padding-bottom: 12px;
}
.footer-col__heading::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 30px;
height: 2px;
background: var(--color-copper);
border-radius: 2px;
}
/* Logo */
.footer-logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.footer-logo__img {
width: 48px;
height: 48px;
border-radius: 8px;
object-fit: contain;
}
.footer-logo__text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.footer-logo__title {
font-size: 20px;
font-weight: 800;
text-transform: uppercase;
color: #ffffff;
letter-spacing: 1px;
}
.footer-logo__title .text-accent {
color: var(--color-copper);
}
.footer-logo__subtitle {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
color: var(--color-taupe);
letter-spacing: 2px;
margin-top: 2px;
}
/* Socials */
.footer-socials {
display: flex;
gap: 16px;
align-items: center;
}
.footer-socials__link {
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.footer-socials__link:hover {
transform: translateY(-3px) scale(1.15);
}
/* Иконки соцсетей — отображаются в оригинальных цветах SVG */
.footer-socials__link img {
width: 28px;
height: 28px;
}
/* Navigation */
.footer-nav {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-nav__link {
color: var(--color-taupe);
text-decoration: none;
font-size: 14px;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.footer-nav__link::before {
content: '';
width: 0;
height: 1px;
background: var(--color-copper);
transition: width 0.3s ease;
}
.footer-nav__link:hover {
color: #ffffff;
}
.footer-nav__link:hover::before {
width: 12px;
}
/* Contacts */
.footer-contacts {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
.footer-contacts__item {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
line-height: 1.5;
}
.footer-contacts__icon {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--color-copper);
margin-top: 2px;
}
.footer-contacts__link {
color: var(--color-greige);
text-decoration: none;
transition: color 0.2s ease;
}
.footer-contacts__link:hover {
color: var(--color-copper);
}
.footer-contacts__btn {
align-self: flex-start;
}
/* Bottom Bar */
.footer-bottom {
padding: 24px 0;
background: rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-bottom__inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.footer-bottom__copyright {
font-size: 13px;
color: var(--color-greige);
margin: 0;
}
.footer-bottom__nav {
display: flex;
gap: 20px;
}
.footer-bottom__link {
font-size: 13px;
color: var(--color-greige);
text-decoration: none;
transition: color 0.2s ease;
}
.footer-bottom__link:hover {
color: var(--color-taupe);
}
/* ============================================
АДАПТИВНОСТЬ
============================================ */
@media (max-width: 1024px) {
.footer-cta__inner {
flex-direction: column;
text-align: center;
}
.footer-cta__desc {
max-width: 100%;
}
.footer-cta__actions {
width: 100%;
justify-content: center;
}
.footer-main__grid {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.footer-col--about {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-col__desc {
max-width: 600px;
}
.footer-socials {
justify-content: center;
}
.footer-col__heading::after {
left: 50%;
transform: translateX(-50%);
}
.footer-nav__link {
justify-content: center;
}
.footer-nav__link::before {
display: none;
}
.footer-contacts__item {
justify-content: center;
}
.footer-contacts__btn {
align-self: center;
}
}
@media (max-width: 767px) {
.footer-main {
padding: 60px 0 40px;
}
.footer-main__grid {
grid-template-columns: 1fr;
gap: 32px;
}
.footer-col--about {
grid-column: auto;
}
.footer-cta {
padding: 40px 0;
}
.footer-cta__actions {
flex-direction: column;
}
.footer-cta__btn {
width: 100%;
justify-content: center;
}
.footer-bottom__inner {
flex-direction: column;
text-align: center;
}
.footer-bottom__nav {
justify-content: center;
}
}

/* === hero.css === */
/* Hero Section Rotator Styles */
.hero-bg-rotator {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero-bg-rotator__layer {
position: absolute;
inset: -20px;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1.5s ease-in-out;
will-change: opacity, transform;
animation: kenBurns 20s infinite alternate ease-in-out;
}
.hero-bg-rotator__layer.is-active {
opacity: 1;
}
@keyframes kenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.15) translate(-15px, -15px); }
}

/* === interactive-quiz.css === */
/*
* Версия: 1.3
* Путь: /styles/interactive-quiz.css
* Файл: interactive-quiz.css
* Описание: Стили для красивого многошагового опросника с эффектами
* v1.3: Увеличен размер заголовка до 5xl
*/
.interactive-quiz {
padding-block: var(--section-padding-y);
background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-muted) 100%);
position: relative;
overflow: hidden;
}
/* Декоративные элементы фона */
.interactive-quiz::before,
.interactive-quiz::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: 0.15;
z-index: 0;
pointer-events: none;
}
.interactive-quiz::before {
width: 500px;
height: 500px;
background: var(--color-primary);
top: -150px;
left: -150px;
animation: floatOrb 15s infinite alternate ease-in-out;
}
.interactive-quiz::after {
width: 600px;
height: 600px;
background: var(--color-secondary);
bottom: -200px;
right: -200px;
animation: floatOrb 18s infinite alternate-reverse ease-in-out;
}
@keyframes floatOrb {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(50px, -50px) scale(1.1); }
}
.interactive-quiz__wrapper {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
background: var(--bg-elevated);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-2xl);
padding: var(--space-10);
border: 1px solid var(--border-color);
backdrop-filter: blur(10px);
}
.interactive-quiz__header {
text-align: center;
margin-bottom: var(--space-8);
}
.interactive-quiz__badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: var(--color-primary-light);
color: var(--color-primary);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-4);
}
.interactive-quiz__title {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-3);
line-height: var(--line-height-tight);
}
.interactive-quiz__subtitle {
font-size: var(--font-size-lg);
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
}
/* Прогресс-бар */
.interactive-quiz__progress {
margin-bottom: var(--space-8);
}
.interactive-quiz__progress-bar {
height: 6px;
background: var(--bg-muted);
border-radius: var(--radius-full);
overflow: hidden;
margin-bottom: var(--space-4);
position: relative;
}
.interactive-quiz__progress-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: var(--progress-width, 25%);
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
border-radius: var(--radius-full);
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 10px var(--color-primary-glow-md);
}
.interactive-quiz__progress-steps {
display: flex;
justify-content: space-between;
}
.interactive-quiz__progress-step {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-muted);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-sm);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.interactive-quiz__progress-step.active {
background: var(--color-primary);
color: var(--text-inverse);
border-color: var(--color-primary-light);
box-shadow: 0 0 15px var(--color-primary-glow-sm);
transform: scale(1.1);
}
.interactive-quiz__progress-step.completed {
background: var(--color-success);
color: var(--text-inverse);
border-color: var(--color-success-bg);
}
/* Шаги формы */
.interactive-quiz__step {
display: none;
animation: quizFadeIn 0.5s ease forwards;
}
.interactive-quiz__step.active {
display: block;
}
@keyframes quizFadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.interactive-quiz__question {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-6);
text-align: center;
}
/* Карточки выбора (Шаг 1) */
.interactive-quiz__options--grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-4);
}
.interactive-quiz__card {
cursor: pointer;
display: block;
perspective: 1000px;
}
.interactive-quiz__input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.interactive-quiz__card-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-6);
background: var(--bg-surface);
border: 2px solid var(--border-color);
border-radius: var(--radius-xl);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
text-align: center;
position: relative;
overflow: hidden;
}
.interactive-quiz__card-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--color-primary-light), transparent);
opacity: 0;
transition: opacity 0.4s ease;
}
.interactive-quiz__card:hover .interactive-quiz__card-content {
border-color: var(--color-primary-light);
transform: translateY(-5px) rotateX(5deg);
box-shadow: var(--shadow-lg);
}
.interactive-quiz__input:checked + .interactive-quiz__card-content {
border-color: var(--color-primary);
background: var(--color-primary-light);
box-shadow: 0 10px 30px var(--color-primary-glow-md);
transform: translateY(-5px) scale(1.02);
}
.interactive-quiz__input:checked + .interactive-quiz__card-content::before {
opacity: 1;
}
.interactive-quiz__card-icon {
width: 48px;
height: 48px;
color: var(--color-primary);
transition: all 0.4s ease;
position: relative;
z-index: 1;
}
.interactive-quiz__input:checked + .interactive-quiz__card-content .interactive-quiz__card-icon {
transform: scale(1.2) rotate(10deg);
color: var(--color-primary-hover);
}
.interactive-quiz__card-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin: 0;
position: relative;
z-index: 1;
}
.interactive-quiz__card-desc {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin: 0;
position: relative;
z-index: 1;
}
/* Радио-карточки (Шаги 2 и 3) */
.interactive-quiz__options--stack {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.interactive-quiz__option-card {
cursor: pointer;
display: block;
}
.interactive-quiz__option-content {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-5);
background: var(--bg-surface);
border: 2px solid var(--border-color);
border-radius: var(--radius-lg);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.interactive-quiz__option-card:hover .interactive-quiz__option-content {
border-color: var(--color-primary-light);
transform: translateX(5px);
}
.interactive-quiz__input:checked + .interactive-quiz__option-content {
border-color: var(--color-primary);
background: var(--color-primary-light);
box-shadow: var(--shadow-md);
}
.interactive-quiz__option-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin: 0;
transition: color 0.3s;
}
.interactive-quiz__input:checked + .interactive-quiz__option-content .interactive-quiz__option-title {
color: var(--color-primary-hover);
}
.interactive-quiz__option-desc {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin: 0;
}
/* Поля ввода (Шаг 4) */
.interactive-quiz__contacts {
display: grid;
gap: var(--space-4);
}
.interactive-quiz__field {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.interactive-quiz__label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
.interactive-quiz__input-field,
.interactive-quiz__textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
background: var(--bg-surface);
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
color: var(--text-primary);
font-size: var(--font-size-base);
font-family: inherit;
transition: all 0.3s ease;
}
.interactive-quiz__input-field:focus,
.interactive-quiz__textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 4px var(--color-primary-light);
}
.interactive-quiz__textarea {
resize: vertical;
min-height: 100px;
}
/* Навигация */
.interactive-quiz__nav {
display: flex;
justify-content: space-between;
gap: var(--space-4);
margin-top: var(--space-8);
}
.interactive-quiz__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-lg);
border: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 140px;
}
.interactive-quiz__btn--prev {
background: var(--bg-muted);
color: var(--text-secondary);
}
.interactive-quiz__btn--prev:hover:not(:disabled) {
background: var(--border-color);
color: var(--text-primary);
}
.interactive-quiz__btn--prev:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.interactive-quiz__btn--next,
.interactive-quiz__btn--submit {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
color: var(--text-inverse);
box-shadow: 0 4px 15px var(--color-primary-glow-md);
}
.interactive-quiz__btn--next:hover,
.interactive-quiz__btn--submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px var(--color-primary-glow-strong);
}
.interactive-quiz__btn svg {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.interactive-quiz__btn--next:hover svg {
transform: translateX(5px);
}
.interactive-quiz__btn--prev:hover:not(:disabled) svg {
transform: translateX(-5px);
}
/* Экран успеха */
.interactive-quiz__success {
text-align: center;
padding: var(--space-10) 0;
animation: quizSuccess 0.6s ease forwards;
}
@keyframes quizSuccess {
0% { opacity: 0; transform: scale(0.8); }
50% { transform: scale(1.05); }
100% { opacity: 1; transform: scale(1); }
}
.interactive-quiz__success-icon {
width: 80px;
height: 80px;
background: var(--color-success-bg);
color: var(--color-success);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-6);
box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
}
.interactive-quiz__success-icon svg {
width: 40px;
height: 40px;
}
.interactive-quiz__success-title {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-3);
}
.interactive-quiz__success-text {
font-size: var(--font-size-lg);
color: var(--text-secondary);
max-width: 500px;
margin: 0 auto;
}
/* Адаптивность */
@media (max-width: 767px) {
.interactive-quiz__wrapper {
padding: var(--space-6);
}
.interactive-quiz__title {
font-size: var(--font-size-2xl);
}
.interactive-quiz__options--grid {
grid-template-columns: 1fr 1fr;
}
.interactive-quiz__nav {
flex-direction: column-reverse;
}
.interactive-quiz__btn {
width: 100%;
}
}
@media (max-width: 480px) {
.interactive-quiz__options--grid {
grid-template-columns: 1fr;
}
}

/* === layout.css === */
/**
* Версия: 1.2
* Путь: /styles/layout.css
* Файл: layout.css
* Описание:
* - Базовые стили главного контейнера сайта (.container)
* - Центрирование контента
* - Модификаторы для узких и широких секций
* - v1.1: Базовый .container растянут на всю ширину экрана (max-width: 100%)
* - v1.2: Удалены все боковые отступы (padding) и адаптивные медиа-запросы для них
*/

/* ============================================
БАЗОВЫЙ КОНТЕЙНЕР САЙТА
============================================ */
.container {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}

/* ============================================
МОДИФИКАТОРЫ КОНТЕЙНЕРА
============================================ */
/* Узкий контейнер (для текстовых статей, форм) */
.container--narrow {
max-width: var(--container-md, 768px);
}

/* Средний контейнер */
.container--medium {
max-width: var(--container-lg, 1024px);
}

/* Широкий контейнер (для галерей, таблиц) */
.container--wide {
max-width: var(--container-2xl, 1536px);
}

/* Резиновый контейнер (без ограничений ширины) */
.container--fluid {
max-width: 100%;
}

/* === navigation.css === */
/* Site Header & Sticky Navigation */
.site-header {
background-color: var(--color-charcoal);
transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s, transform 0.3s ease;
z-index: 1000;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.site-header--sticky.is-scrolled {
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
background-color: rgba(45, 40, 38, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-header--sticky.is-hidden {
transform: translateY(-100%);
}
.header-container {
width: 100%;
padding: 0 15px;
display: flex;
align-items: center;
justify-content: center;
height: 80px;
position: relative;
}
/* ============================================
MAIN NAVIGATION (DESKTOP) - BUTTON STYLE
============================================ */
.main-nav {
flex: 1;
display: flex;
width: 100%;
position: relative;
}
.main-nav__list {
display: flex;
align-items: center;
list-style: none;
margin: 0 auto;
padding: 0;
width: 100%;
max-width: 1200px;
gap: 8px;
}
.main-nav__item {
position: static;
flex: 1;
min-width: 0;
}
.main-nav__link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 12px 16px;
color: #FFFFFF;
text-decoration: none;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Эффект свечения при hover */
.main-nav__link::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--color-copper), var(--color-ochre));
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
/* Гарантируем, что текст всегда поверх фона */
.main-nav__link span,
.main-nav__link {
position: relative;
z-index: 1;
}
/* Hover состояние */
.main-nav__link:hover::before,
.main-nav__item--active .main-nav__link::before {
opacity: 1;
}
.main-nav__link:hover,
.main-nav__item--active .main-nav__link {
color: #ffffff;
border-color: transparent;
box-shadow: 0 4px 12px rgba(184, 115, 51, 0.4);
transform: translateY(-2px);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.3);
}
/* Dropdown Arrow Indicator */
.main-nav__item--has-dropdown > .main-nav__link::after {
content: '';
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
margin-left: 6px;
vertical-align: middle;
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
flex-shrink: 0;
position: relative;
z-index: 1;
}
.main-nav__item--has-dropdown:hover > .main-nav__link::after {
transform: rotate(180deg);
}
/* ============================================
MEGA MENU DROPDOWNS - MAX 3 COLUMNS
============================================ */
.main-nav__dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
max-width: 1200px;
margin: 0 auto;
background: rgba(45, 40, 38, 0.98);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 0 0 12px 12px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 5px 15px rgba(0, 0, 0, 0.3);
padding: 24px 32px;
list-style: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
z-index: 100;
border: 1px solid rgba(255, 255, 255, 0.1);
border-top: none;
overflow: hidden;
/* Сетка для ссылок - максимум 3 колонки */
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.main-nav__item--has-dropdown:hover .main-nav__dropdown,
.main-nav__item--has-dropdown:focus-within .main-nav__dropdown {
opacity: 1;
visibility: visible;
}
.main-nav__dropdown-link {
display: flex;
align-items: center;
padding: 12px 16px;
color: var(--color-greige);
text-decoration: none;
font-size: 16px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
}
/* Left Accent Border on Hover */
.main-nav__dropdown-link::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background: linear-gradient(180deg, var(--color-copper), var(--color-sand));
transform: scaleY(0);
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.main-nav__dropdown-link:hover {
background: rgba(184, 115, 51, 0.15);
color: #ffffff;
padding-left: 24px;
}
.main-nav__dropdown-link:hover::before {
transform: scaleY(1);
}
/* ============================================
HEADER ACTIONS & PHONE BUTTON
============================================ */
/* Header Actions (Burger) - теперь СЛЕВА */
.header-actions {
display: flex;
align-items: center;
gap: 20px;
position: absolute;
left: 15px;
z-index: 10;
}
/* Burger Menu */
.header-burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 32px;
height: 32px;
background: none;
border: none;
cursor: pointer;
padding: 5px;
}
.header-burger span {
display: block;
width: 100%;
height: 2px;
background-color: #FFFFFF;
border-radius: 2px;
transition: transform 0.3s, opacity 0.3s;
}
.header-burger.is-active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.header-burger.is-active span:nth-child(2) {
opacity: 0;
}
.header-burger.is-active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Кнопка телефона - СПРАВА (скрыта на десктопе) */
.header-phone-btn {
display: none;
align-items: center;
gap: 8px;
position: absolute;
right: 15px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
cursor: pointer;
color: #FFFFFF;
padding: 10px 16px;
border-radius: 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
}
.header-phone-btn:hover {
background: var(--color-copper);
border-color: var(--color-copper);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(184, 115, 51, 0.4);
}
.header-phone-btn svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.header-phone-number {
font-size: 14px;
font-weight: 600;
white-space: nowrap;
letter-spacing: 0.5px;
}
/* ============================================
MOBILE MENU DRAWER
============================================ */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 999;
pointer-events: none;
visibility: hidden;
}
.mobile-menu.is-open {
pointer-events: auto;
visibility: visible;
}
.mobile-menu__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.3s;
}
.mobile-menu.is-open .mobile-menu__overlay {
opacity: 1;
}
.mobile-menu__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 300px;
max-width: 90%;
background: var(--color-charcoal);
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5);
transform: translateX(100%);
transition: transform 0.3s;
display: flex;
flex-direction: column;
}
.mobile-menu.is-open .mobile-menu__panel {
transform: translateX(0);
}
.mobile-menu__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu__title {
font-size: 18px;
font-weight: 600;
color: #ffffff;
}
.mobile-menu__close {
background: none;
border: none;
font-size: 24px;
color: var(--color-taupe);
cursor: pointer;
}
.mobile-menu__nav {
flex: 1;
overflow-y: auto;
padding: 20px;
}
.mobile-menu__list {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-menu__item {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.mobile-menu__item:last-child {
border-bottom: none;
}
.mobile-menu__link {
display: block;
padding: 12px 0;
color: var(--color-greige);
text-decoration: none;
font-size: 16px;
font-weight: 500;
}
.mobile-menu__toggle {
background: none;
border: none;
padding: 10px;
cursor: pointer;
color: var(--color-taupe);
}
.mobile-menu__dropdown {
list-style: none;
margin: 0;
padding: 0 0 10px 20px;
display: none;
}
.mobile-menu__item--has-dropdown.is-open .mobile-menu__dropdown {
display: block;
}
.mobile-menu__dropdown-link {
display: block;
padding: 10px 12px;
color: var(--color-taupe);
text-decoration: none;
font-size: 16px;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
margin-bottom: 4px;
transition: all 0.3s ease;
}
.mobile-menu__dropdown-link:hover {
background: rgba(184, 115, 51, 0.15);
color: #ffffff;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1024px) {
.main-nav {
display: none;
}
.header-burger {
display: flex;
}
.header-phone-btn {
display: flex;
}
.header-container {
height: 60px;
}
/* На планшетах подменю в 2 колонки */
.main-nav__dropdown {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.header-container {
height: 50px;
}
.header-phone-number {
display: none;
}
.header-phone-btn {
padding: 10px;
}
/* На мобильных подменю в 1 колонку */
.main-nav__dropdown {
grid-template-columns: 1fr;
}
}

/* === partners-request.css === */
/* === /styles/partners-request.css === */
.partners-request {
position: relative;
padding-block: var(--section-padding-y);
background-color: var(--color-charcoal);
color: #f8fafc;
overflow: hidden;
isolation: isolate;
}
.partners-request__bg-decor {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.partners-request__orb {
position: absolute;
border-radius: 50%;
filter: blur(120px);
opacity: 0.3;
}
.partners-request__orb--1 {
width: 600px;
height: 600px;
background: var(--color-copper);
top: -200px;
right: -100px;
animation: floatOrb 18s infinite alternate ease-in-out;
}
.partners-request__orb--2 {
width: 500px;
height: 500px;
background: var(--color-terracotta);
bottom: -150px;
left: -100px;
animation: floatOrb 20s infinite alternate-reverse ease-in-out;
}
@keyframes floatOrb {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(40px, -40px) scale(1.1); }
}
.partners-request__grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(212, 184, 149, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(212, 184, 149, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(circle at center, black 20%, transparent 80%);
-webkit-mask-image: radial-gradient(circle at center, black 20%, transparent 80%);
}
.partners-request__container {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
}
.partners-request__header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--space-12);
}
.partners-request__badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(184, 115, 51, 0.1);
border: 1px solid rgba(184, 115, 51, 0.3);
border-radius: 100px;
font-size: 14px;
font-weight: 600;
color: var(--color-sand);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 24px;
backdrop-filter: blur(8px);
}
.partners-request__badge-dot {
width: 8px;
height: 8px;
background: var(--color-copper);
border-radius: 50%;
box-shadow: 0 0 10px var(--color-copper);
animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.2); }
}
.partners-request__main-title {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
margin-bottom: var(--space-5);
color: #ffffff;
}
.partners-request__main-title .text-gradient {
background: linear-gradient(135deg, var(--color-copper) 0%, var(--color-sand) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.partners-request__main-desc {
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-taupe);
}
.partners-request__grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: stretch;
}
@media (min-width: 1024px) {
.partners-request__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 60px;
}
}
.partners-request__info-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
padding: 40px;
backdrop-filter: blur(12px);
height: 100%;
display: flex;
flex-direction: column;
transition: all 0.4s ease;
}
.partners-request__info-card:hover {
border-color: rgba(184, 115, 51, 0.3);
background: rgba(255, 255, 255, 0.05);
transform: translateY(-5px);
}
.partners-request__info-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-copper), var(--color-ochre));
border-radius: 16px;
color: #ffffff;
box-shadow: 0 10px 25px rgba(184, 115, 51, 0.3);
margin-bottom: 24px;
}
.partners-request__info-icon svg {
width: 32px;
height: 32px;
}
.partners-request__info-title {
font-size: 24px;
font-weight: 700;
color: #ffffff;
margin-bottom: 16px;
}
.partners-request__info-text {
font-size: 16px;
line-height: 1.7;
color: var(--color-greige);
margin-bottom: 32px;
}
.partners-request__features {
list-style: none;
padding: 0;
margin: 0;
margin-top: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.partners-request__feature-item {
display: flex;
align-items: center;
gap: 16px;
font-size: 18px;
font-weight: 500;
color: #f8fafc;
line-height: 1.4;
}
.partners-request__feature-item svg {
width: 26px;
height: 26px;
color: var(--color-sage);
flex-shrink: 0;
}
.partners-request__form-card {
position: relative;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 40px;
backdrop-filter: blur(16px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
overflow: hidden;
z-index: 1;
}
.partners-request__form-glow {
position: absolute;
top: -50px;
right: -50px;
width: 200px;
height: 200px;
background: var(--color-copper);
border-radius: 50%;
filter: blur(80px);
opacity: 0.15;
pointer-events: none;
z-index: -1;
transition: opacity 0.4s ease;
}
.partners-request__form-card:hover .partners-request__form-glow {
opacity: 0.25;
}
.partners-request__form-title {
font-size: 24px;
font-weight: 700;
color: #ffffff;
margin-bottom: 12px;
}
.partners-request__form-subtitle {
font-size: 15px;
line-height: 1.6;
color: var(--color-taupe);
margin-bottom: 32px;
}
.partners-request__form {
display: flex;
flex-direction: column;
gap: 24px;
}
.partners-request__form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.partners-request__form-label {
font-size: 14px;
font-weight: 600;
color: var(--color-sand);
letter-spacing: 0.02em;
}
.partners-request__input-wrap {
position: relative;
display: flex;
align-items: center;
}
.partners-request__input-icon {
position: absolute;
left: 16px;
width: 20px;
height: 20px;
color: var(--color-taupe);
pointer-events: none;
transition: color 0.3s ease;
}
.partners-request__input-wrap input,
.partners-request__input-wrap textarea {
width: 100%;
padding: 14px 16px 14px 48px;
background: rgba(45, 40, 38, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: #ffffff;
font-size: 16px;
font-family: inherit;
transition: all 0.3s ease;
outline: none;
}
.partners-request__input-wrap textarea {
resize: vertical;
min-height: 100px;
padding-top: 14px;
padding-bottom: 14px;
}
.partners-request__input-wrap input::placeholder,
.partners-request__input-wrap textarea::placeholder {
color: var(--color-taupe);
}
.partners-request__input-wrap input:focus,
.partners-request__input-wrap textarea:focus {
border-color: var(--color-copper);
background: rgba(45, 40, 38, 0.8);
box-shadow: 0 0 0 4px rgba(184, 115, 51, 0.15);
}
.partners-request__input-wrap:focus-within .partners-request__input-icon {
color: var(--color-copper);
}
.partners-request__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px 32px;
font-size: 16px;
font-weight: 600;
color: #ffffff;
background: linear-gradient(135deg, var(--color-copper), var(--color-ochre));
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 25px rgba(184, 115, 51, 0.3);
position: relative;
overflow: hidden;
margin-top: 8px;
width: 100%;
}
.partners-request__btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: 0.5s;
}
.partners-request__btn:hover::before {
left: 100%;
}
.partners-request__btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(184, 115, 51, 0.4);
}
.partners-request__btn svg {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.partners-request__btn:hover svg {
transform: translateX(5px);
}
@media (max-width: 767px) {
.partners-request__info-card,
.partners-request__form-card {
padding: 24px;
}
.partners-request__main-desc {
font-size: 16px;
}
.partners-request__feature-item {
font-size: 16px;
gap: 12px;
}
.partners-request__feature-item svg {
width: 22px;
height: 22px;
}
}

/* === poll.css === */
/*
 * Версия: 1.0
 * Путь: /styles/poll.css
 * Файл: poll.css
 * Описание: Стили для блока опросника (Poll)
 * Строгое использование CSS-переменных и BEM-методологии
 */

/* ============================================
   СЕКЦИЯ ОПРОСНИКА
   ============================================ */
.poll-section {
    padding: var(--space-12) 0;
    background-color: var(--bg-surface);
}

.poll-card {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-8);
    background-color: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.poll-card__header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.poll-card__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}

.poll-card__subtitle {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin: 0;
}

/* ============================================
   ФОРМА И ОПЦИИ
   ============================================ */
.poll-form__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.poll-option {
    display: flex;
    align-items: center;
    padding: var(--space-4);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.poll-option:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
}

.poll-option__input {
    margin-right: var(--space-3);
    accent-color: var(--color-primary);
    width: 20px;
    height: 20px;
}

.poll-option__label {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.poll-form__submit {
    width: 100%;
}

/* ============================================
   АДАПТИВНОСТЬ (MOBILE FIRST)
   ============================================ */
@media (max-width: 640px) {
    .poll-card {
        padding: var(--space-5);
    }
    
    .poll-card__title {
        font-size: var(--font-size-xl);
    }
}

/* === popup.css === */
/**
 * Версия: 1.0
 * Путь: /styles/popup.css
 * Файл: popup.css
 * Описание: Стили для модального окна заявки (popup-modal)
 */

/* ============================================
ОБЕРТКА МОДАЛЬНОГО ОКНА
============================================ */
.popup-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1100);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    padding: var(--space-4);
}

/* Состояние активности (класс .active добавляется через common.js) */
.popup-modal.active {
    opacity: 1;
    visibility: visible;
}

/* ============================================
ЗАТЕМНЕНИЕ ФОНА (OVERLAY)
============================================ */
.popup-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}

/* ============================================
КОНТЕНТ МОДАЛЬНОГО ОКНА
============================================ */
.popup-content {
    position: relative;
    z-index: 1;
    background-color: var(--bg-elevated, #ffffff);
    border-radius: var(--radius-xl, 1rem);
    box-shadow: var(--shadow-2xl);
    padding: var(--space-8, 2rem);
    width: 100%;
    max-width: 480px;
    transform: translateY(20px) scale(0.95);
    transition: transform var(--transition-base);
}

.popup-modal.active .popup-content {
    transform: translateY(0) scale(1);
}

.popup-content h2 {
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: var(--space-6, 1.5rem);
    text-align: center;
    padding-right: var(--space-8);
}

/* ============================================
ФОРМА ВНУТРИ МОДАЛЬНОГО ОКНА
============================================ */
.popup-content form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
}

.popup-content input {
    width: 100%;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 0.5rem);
    background-color: var(--bg-surface);
    color: var(--text-primary);
    font-size: var(--font-size-base, 1rem);
    font-family: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.popup-content input::placeholder {
    color: var(--text-muted);
}

.popup-content input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus-ring);
}

.popup-content button[type="submit"] {
    margin-top: var(--space-2, 0.5rem);
    padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
    background-color: var(--color-primary);
    color: var(--text-inverse);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    border: none;
    border-radius: var(--radius-md, 0.5rem);
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.popup-content button[type="submit"]:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
}

/* ============================================
КНОПКА ЗАКРЫТИЯ
============================================ */
.popup-close {
    position: absolute;
    top: var(--space-4, 1rem);
    right: var(--space-4, 1rem);
    background: transparent;
    border: none;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.popup-close:hover {
    color: var(--color-primary);
    background-color: var(--color-primary-light);
}

/* === portfolio.css === */
/*
* Версия: 1.3
* Путь: /styles/portfolio.css
* Файл: portfolio.css
* Описание: Стили для секции портфолио
* v1.3: Выровнены подзаголовки (portfolio-subtitle) по центру
*/

/* Portfolio Section */
.portfolio-section {
    padding: var(--space-16) 0;
    background-color: var(--bg-body);
}

/* Контейнер Типа 2: максимальная ширина 100% с обязательными боковыми отступами */
.portfolio-section .container {
    max-width: 100%;
    padding-left: var(--space-5, 20px);
    padding-right: var(--space-5, 20px);
}

.portfolio-section__title {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-bottom: var(--space-12);
    color: var(--text-primary);
}

.portfolio-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 auto var(--space-6) auto;
    width: fit-content;
    max-width: 100%;
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-primary-light);
}

.portfolio-subtitle svg {
    color: var(--color-primary);
}

/* Video Wrapper & Grid */
.portfolio-video-wrapper {
    margin-bottom: var(--space-16);
}

.portfolio-video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.portfolio-video-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    aspect-ratio: 16 / 10;
    background-color: var(--bg-muted);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    cursor: pointer;
}

.portfolio-video-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.portfolio-video-item__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-video-item__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity var(--transition-base);
    pointer-events: none;
}

.portfolio-video-item:hover .portfolio-video-item__overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
}

.portfolio-video-item__icon {
    color: #ffffff;
    background: var(--color-primary);
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8);
    transition: transform var(--transition-base);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.portfolio-video-item:hover .portfolio-video-item__icon {
    transform: scale(1.1);
}

/* Photo Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.portfolio-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-lg);
    aspect-ratio: 1 / 1;
    background-color: var(--bg-muted);
}

.portfolio-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.portfolio-item:hover .portfolio-item__img {
    transform: scale(1.05);
}

.portfolio-item__overlay {
    position: absolute;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.portfolio-item:hover .portfolio-item__overlay {
    opacity: 1;
}

.portfolio-item__icon {
    color: var(--text-inverse);
    background: var(--color-primary);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8);
    transition: transform var(--transition-base);
}

.portfolio-item:hover .portfolio-item__icon {
    transform: scale(1);
}

/* Lightbox */
.portfolio-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-lightbox);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.portfolio-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.portfolio-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
}

.portfolio-lightbox__content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-lightbox__img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2xl);
}

.portfolio-lightbox__close {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    color: var(--text-inverse);
    cursor: pointer;
    padding: var(--space-2);
}

.portfolio-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-overlay);
    border: 1px solid var(--glass-border);
    color: var(--text-inverse);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background var(--transition-fast);
}

.portfolio-lightbox__nav:hover {
    background: var(--color-primary);
}

.portfolio-lightbox__prev {
    left: -60px;
}

.portfolio-lightbox__next {
    right: -60px;
}

.portfolio-lightbox__counter {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-inverse);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Video Lightbox Specific Styles */
.portfolio-lightbox__video {
    max-width: 100%;
    max-height: 85vh;
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2xl);
    background: #000;
}

.portfolio-video-lightbox .portfolio-lightbox__content {
    width: 90vw;
    max-width: 1200px;
}

/* Responsive */
@media (max-width: 1024px) {
    .portfolio-video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .portfolio-lightbox__prev {
        left: var(--space-4);
    }
    .portfolio-lightbox__next {
        right: var(--space-4);
    }
    .portfolio-lightbox__close {
        top: var(--space-4);
        right: var(--space-4);
        background: var(--bg-overlay);
        border-radius: var(--radius-full);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .portfolio-lightbox__counter {
        bottom: var(--space-4);
    }
}

@media (max-width: 767px) {
    .portfolio-section {
        padding: var(--space-12) 0;
    }
    .portfolio-section__title {
        font-size: var(--font-size-3xl);
        margin-bottom: var(--space-8);
    }
    .portfolio-subtitle {
        font-size: var(--font-size-xl);
    }
    .portfolio-video-wrapper {
        margin-bottom: var(--space-12);
    }
    .portfolio-video-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
    .portfolio-lightbox__nav {
        width: 40px;
        height: 40px;
    }
}

/* === process-steps.css === */
/**
* Версия: 1.8
* Путь: /styles/process-steps.css
* Файл: process-steps.css
* Описание: Стили для блока "Этапы работы" с адаптивной сеткой и hover-эффектами
* - v1.1: Добавлена стрелочка в иконку с анимацией поворота при наведении
* - v1.2: Стрелочка перемещена внутрь и по центру контейнера иконки, появляется при ховере с эффектом замены основной иконки
* - v1.3: Стрелочка теперь видна ПО УМОЛЧАНИЮ (всегда). Размещена в правом нижнем углу внутри контейнера (как бейдж), чтобы не перекрывать основную иконку. При наведении поворачивается.
* - v1.4: Стрелочка возвращена ПО ЦЕНТРУ кубика с эффектом полной замены основной иконки при наведении (запрос пользователя).
* - v1.5: Стрелочка видна ВСЕГДА. По умолчанию находится в правом нижнем углу (как бейдж), чтобы не перекрывать иконку. При наведении плавно перемещается в центр кубика, а иконка исчезает.
* - v1.6: Стрелочка размещена ПО ЦЕНТРУ кубика и видна ПО УМОЛЧАНИЮ. Основная иконка становится полупрозрачным фоном (opacity: 0.2). При наведении иконка исчезает, а стрелочка поворачивается.
* - v1.7: Изменен фон секции на белый с точечным паттерном и декоративными градиентными пятнами (орбами) для большей выразительности и глубины.
* - v1.8: Изменена максимальная ширина внутреннего контейнера на 1200px (Тип 1)
*/
/* ============================================
ОБОЛОЧКА СЕКЦИИ
============================================ */
.process-steps {
padding-block: var(--space-16);
background-color: var(--bg-body);
background-image: radial-gradient(var(--border-color) 1.5px, transparent 1.5px);
background-size: 24px 24px;
position: relative;
overflow: hidden;
}

/* Декоративные градиентные пятна на фоне */
.process-steps::before,
.process-steps::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(120px);
opacity: 0.5;
pointer-events: none;
z-index: 0;
}

.process-steps::before {
width: 500px;
height: 500px;
background: var(--color-primary-light);
top: -150px;
left: -100px;
}

.process-steps::after {
width: 600px;
height: 600px;
background: var(--color-secondary-light);
bottom: -200px;
right: -150px;
}

.process-steps .container {
position: relative;
z-index: 1;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}

.process-steps__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-10);
position: relative;
}

@media (min-width: 768px) {
.process-steps__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-12);
}
}

@media (min-width: 1024px) {
.process-steps__grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--space-8);
}
}

/* ============================================
КАРТОЧКА ЭТАПА
============================================ */
.process-step {
position: relative;
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-xl);
padding: var(--space-8) var(--space-6);
transition: all var(--transition-base);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.process-step:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--color-primary-light);
}

/* ============================================
НУМЕРАЦИЯ ШАГА
============================================ */
.process-step__number {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
color: var(--text-inverse);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(234, 81, 50, 0.3);
border: 3px solid var(--bg-body);
}

/* ============================================
ИКОНКА
============================================ */
.process-step__icon {
width: 64px;
height: 64px;
background: var(--color-primary-light);
color: var(--color-primary);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-5);
margin-top: var(--space-2);
transition: all var(--transition-base);
position: relative;
}

.process-step:hover .process-step__icon {
background: var(--color-primary);
color: var(--text-inverse);
box-shadow: 0 6px 16px rgba(234, 81, 50, 0.25);
}

/* ============================================
СТРЕЛОЧКА ВНУТРИ ИКОНКИ (ПО ЦЕНТРУ, ВИДНА ВСЕГДА)
============================================ */
.process-step__arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 26px;
height: 26px;
background: var(--color-primary);
color: var(--text-inverse);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(234, 81, 50, 0.4);
border: 2px solid var(--bg-elevated);
opacity: 1;
z-index: 2;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.process-step:hover .process-step__arrow {
transform: translate(-50%, -50%) rotate(90deg);
background: var(--color-primary-hover);
}

/* Анимация основной иконки (становится фоном, при ховере исчезает) */
.process-step__icon .icon {
transition: transform 0.3s ease, color 0.3s ease, opacity 0.3s ease;
z-index: 1;
opacity: 0.2;
}

.process-step:hover .process-step__icon .icon {
opacity: 0;
transform: scale(0.8);
}

/* ============================================
ТИПОГРАФИКА
============================================ */
.process-step__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-3);
line-height: var(--line-height-tight);
}

.process-step__text {
font-size: var(--font-size-base);
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
margin: 0;
}

/* === production.css === */
/*
* Версия: 1.5
* Путь: /styles/production.css
* Файл: production.css
* Описание: Стили для секции собственного производства
* v1.5: Интеграция кофейно-деловой палитры донора (Charcoal, Copper, Coffee)
*/
.production-section {
position: relative;
padding-block: var(--section-padding-y-lg);
background-color: var(--color-charcoal);
color: #f8fafc;
overflow: hidden;
isolation: isolate;
}
.production-bg-decor {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.production-bg-decor__orb {
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: 0.4;
}
.production-bg-decor__orb--1 {
width: 500px;
height: 500px;
background: var(--color-copper);
top: -150px;
left: -150px;
animation: floatOrb 15s infinite alternate ease-in-out;
}
.production-bg-decor__orb--2 {
width: 600px;
height: 600px;
background: var(--color-coffee);
bottom: -200px;
right: -200px;
animation: floatOrb 18s infinite alternate-reverse ease-in-out;
}
@keyframes floatOrb {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(50px, -50px) scale(1.1); }
}
.production-bg-decor__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
}
.production-container {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
}
.production-layout {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: center;
width: 100%;
}
@media (min-width: 768px) {
.production-layout {
gap: 60px;
}
}
@media (min-width: 1024px) {
.production-layout {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: 80px;
}
}
.production-info {
opacity: 0;
transform: translateX(-30px);
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.production-info.is-visible {
opacity: 1;
transform: translateX(0);
}
.production-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(184, 115, 51, 0.1);
border: 1px solid rgba(184, 115, 51, 0.3);
border-radius: 100px;
font-size: 14px;
font-weight: 600;
color: var(--color-sand);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 24px;
backdrop-filter: blur(8px);
}
.production-badge__dot {
width: 8px;
height: 8px;
background: var(--color-copper);
border-radius: 50%;
box-shadow: 0 0 10px var(--color-copper);
animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.2); }
}
.production-title {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
margin-bottom: var(--space-6);
color: #ffffff;
}
.text-gradient {
background: linear-gradient(135deg, var(--color-copper) 0%, var(--color-sand) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.title-accent {
display: block;
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--color-copper), transparent);
margin-top: 16px;
border-radius: 4px;
}
.production-desc {
font-size: 18px;
line-height: 1.7;
color: var(--color-taupe);
margin-bottom: 32px;
max-width: 500px;
}
.production-highlight {
display: flex;
gap: 20px;
padding: 24px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
margin-bottom: 40px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.production-highlight:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(184, 115, 51, 0.3);
transform: translateY(-4px);
}
.production-highlight__icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-copper), var(--color-ochre));
border-radius: 12px;
color: #ffffff;
box-shadow: 0 8px 20px rgba(184, 115, 51, 0.3);
}
.production-highlight__icon svg {
width: 24px;
height: 24px;
}
.production-highlight__content h4 {
font-size: 18px;
font-weight: 700;
color: #ffffff;
margin-bottom: 8px;
}
.production-highlight__content p {
font-size: 15px;
line-height: 1.6;
color: var(--color-greige);
margin: 0;
}
.production-actions {
display: flex;
gap: 16px;
}
.production-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 32px;
font-size: 16px;
font-weight: 600;
color: #ffffff;
background: linear-gradient(135deg, var(--color-copper), var(--color-ochre));
border: none;
border-radius: 12px;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 25px rgba(184, 115, 51, 0.3);
position: relative;
overflow: hidden;
}
.production-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: 0.5s;
}
.production-btn:hover::before {
left: 100%;
}
.production-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(184, 115, 51, 0.4);
}
.production-btn svg {
transition: transform 0.3s ease;
}
.production-btn:hover svg {
transform: translateX(5px);
}
.production-capabilities {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
opacity: 0;
transform: translateX(30px);
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
width: 100%;
}
.production-capabilities.is-visible {
opacity: 1;
transform: translateX(0);
}
@media (max-width: 767px) {
.production-capabilities {
grid-template-columns: 1fr;
}
}
.capability-card {
position: relative;
padding: 32px 24px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 20px;
backdrop-filter: blur(12px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
z-index: 1;
opacity: 0;
transform: translateY(20px);
}
.capability-card.is-visible {
opacity: 1;
transform: translateY(0);
}
.capability-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(184, 115, 51, 0.1), transparent 60%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.capability-card:hover {
transform: translateY(-8px);
border-color: rgba(184, 115, 51, 0.4);
background: rgba(255, 255, 255, 0.04);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.capability-card:hover::before {
opacity: 1;
}
.capability-card__glow {
position: absolute;
top: -50px;
right: -50px;
width: 150px;
height: 150px;
background: var(--color-copper);
border-radius: 50%;
filter: blur(60px);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: -1;
}
.capability-card:hover .capability-card__glow {
opacity: 0.15;
}
.capability-card__icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(184, 115, 51, 0.1);
border: 1px solid rgba(184, 115, 51, 0.2);
border-radius: 16px;
color: var(--color-copper);
margin-bottom: 24px;
transition: all 0.3s ease;
}
.capability-card:hover .capability-card__icon {
background: var(--color-copper);
color: #ffffff;
transform: scale(1.1) rotate(-5deg);
box-shadow: 0 10px 20px rgba(184, 115, 51, 0.3);
}
.capability-card__icon svg {
width: 28px;
height: 28px;
}
.capability-card__title {
font-size: 20px;
font-weight: 700;
color: #ffffff;
margin-bottom: 12px;
line-height: 1.3;
}
.capability-card__text {
font-size: 15px;
line-height: 1.6;
color: var(--color-taupe);
margin: 0;
}

/* === reviews.css === */
/*
* Версия: 1.8
* Путь: /styles/reviews.css
* Файл: reviews.css
* Описание: Стили для секции отзывов (слайдер Swiper)
* v1.8: Убран эффект всплытия, тени и рамки у карточек
*/
.reviews-section {
padding-block: var(--section-padding-y);
background-color: var(--bg-surface);
position: relative;
overflow: hidden;
}
.reviews-section::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 400px;
height: 400px;
background: var(--color-primary-glow-lg);
border-radius: 50%;
filter: blur(80px);
z-index: 0;
pointer-events: none;
}
.reviews-section .container {
position: relative;
z-index: 1;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
.reviews-section__header {
text-align: center;
max-width: 700px;
margin: 0 auto var(--space-12);
}
.reviews-section__badge {
display: inline-block;
padding: var(--space-2) var(--space-4);
background-color: var(--color-primary-light);
color: var(--color-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-4);
}
.reviews-section__title {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-4);
line-height: var(--line-height-tight);
}
.reviews-section__subtitle {
font-size: var(--font-size-lg);
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
}
.reviews-swiper {
padding: 20px;
}
.review-card {
background-color: var(--bg-elevated);
border-radius: var(--radius-xl);
padding: var(--space-8);
height: 100%;
display: flex;
flex-direction: column;
position: relative;
border: none;
box-shadow: none;
overflow: hidden;
}
.review-card__quote-icon {
position: absolute;
top: 20px;
right: 20px;
width: 48px;
height: 48px;
color: var(--color-primary);
opacity: 0.15;
transition: all var(--transition-300);
}
.review-card:hover .review-card__quote-icon {
opacity: 0.3;
transform: scale(1.1) rotate(-5deg);
}
.review-card__rating {
display: flex;
gap: 4px;
margin-bottom: var(--space-6);
}
.review-card__rating .star {
width: 20px;
height: 20px;
color: #fbbf24;
filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3));
}
.review-card__text {
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--text-secondary);
margin-bottom: var(--space-8);
flex-grow: 1;
position: relative;
z-index: 1;
}
@media (min-width: 768px) {
.review-card__text {
font-size: var(--font-size-lg);
}
}
.review-card__author {
display: flex;
align-items: center;
gap: var(--space-4);
margin-top: auto;
padding-top: var(--space-6);
border-top: 1px solid var(--border-color);
}
.review-card__avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
color: var(--text-inverse);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
flex-shrink: 0;
box-shadow: var(--shadow-md);
}
.review-card__avatar--accent {
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
}
.review-card__avatar--secondary {
background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-hover));
}
.review-card__author-info {
display: flex;
flex-direction: column;
}
.review-card__name {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
font-style: normal;
line-height: 1.2;
}
.review-card__role {
font-size: var(--font-size-sm);
color: var(--text-muted);
line-height: 1.4;
}
.reviews-swiper .swiper-pagination {
bottom: 0;
}
.reviews-swiper .swiper-pagination-bullet {
width: 10px;
height: 10px;
background: var(--border-strong);
opacity: 1;
transition: all var(--transition-200);
}
.reviews-swiper .swiper-pagination-bullet-active {
background: var(--color-primary);
width: 32px;
border-radius: var(--radius-full);
}
/* ============================================
КАСТОМНЫЕ SVG СТРЕЛКИ
============================================ */
.reviews-swiper .swiper-button-next,
.reviews-swiper .swiper-button-prev {
color: var(--color-primary);
background: var(--bg-elevated);
width: 48px;
height: 48px;
border-radius: 50%;
box-shadow: var(--shadow-md);
transition: all var(--transition-base);
display: flex;
align-items: center;
justify-content: center;
}
.reviews-swiper .swiper-button-next:hover,
.reviews-swiper .swiper-button-prev:hover {
background: var(--color-primary);
color: var(--text-inverse);
box-shadow: var(--shadow-lg);
}
/* Отключаем стандартные псевдоэлементы Swiper */
.reviews-swiper .swiper-button-next::after,
.reviews-swiper .swiper-button-prev::after {
display: none;
}
.reviews-swiper .swiper-button-next svg,
.reviews-swiper .swiper-button-prev svg {
width: 24px;
height: 24px;
stroke: currentColor;
}
.reviews-swiper .swiper-button-prev {
left: 0;
}
.reviews-swiper .swiper-button-next {
right: 0;
}
@media (max-width: 767px) {
.reviews-swiper {
padding: 20px;
}
.reviews-swiper .swiper-button-prev,
.reviews-swiper .swiper-button-next {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
top: 45%;
margin-top: -16px;
}
.reviews-swiper .swiper-button-prev {
left: 0;
}
.reviews-swiper .swiper-button-next {
right: 0;
}
.reviews-swiper .swiper-button-next svg,
.reviews-swiper .swiper-button-prev svg {
width: 18px;
height: 18px;
}
}

/* === services-poll.css === */
/* ============================================
   ОПРОСНИК ПОДБОРА УСЛУГ (SERVICES POLL)
   Путь: /styles/services-poll.css
   ============================================ */

.services-poll {
    padding: var(--space-16) 0;
    background-color: var(--bg-surface);
}

.services-poll__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-10);
}

.services-poll__title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.services-poll__subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
}

/* Прогресс-бар */
.services-poll__progress {
    height: 6px;
    background-color: var(--bg-muted);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-10);
    overflow: hidden;
}

.services-poll__progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: var(--radius-full);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Шаги */
.services-poll__step {
    display: none;
    animation: pollFadeIn 0.4s ease forwards;
}

.services-poll__step--active {
    display: block;
}

@keyframes pollFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.services-poll__question {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.services-poll__hint {
    font-size: var(--font-size-base);
    color: var(--text-muted);
    margin-bottom: var(--space-8);
}

/* Карточки (Шаг 1) */
.services-poll__options--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.services-poll__card {
    cursor: pointer;
    display: block;
}

.services-poll__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.services-poll__card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-8);
    background-color: var(--bg-elevated);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    height: 100%;
    text-align: center;
}

.services-poll__card:hover .services-poll__card-inner {
    border-color: var(--color-primary-light);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.services-poll__input:checked + .services-poll__card-inner {
    border-color: var(--color-primary);
    background-color: var(--color-primary-bg, rgba(0, 102, 204, 0.05));
    box-shadow: var(--shadow-md);
}

.services-poll__icon {
    color: var(--color-primary);
    display: flex;
}

.services-poll__label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

/* Радио-карточки (Шаг 2) */
.services-poll__options--stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}

.services-poll__radio-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-6);
    background-color: var(--bg-elevated);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.services-poll__radio-card:hover {
    border-color: var(--color-primary-light);
}

.services-poll__input:checked + .services-poll__radio-label {
    color: var(--color-primary);
}

.services-poll__radio-card:has(.services-poll__input:checked) {
    border-color: var(--color-primary);
    background-color: var(--color-primary-bg, rgba(0, 102, 204, 0.05));
}

.services-poll__radio-label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    transition: color 0.2s;
}

.services-poll__radio-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Инпуты (Шаг 3) */
.services-poll__inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

@media (max-width: 640px) {
    .services-poll__inputs {
        grid-template-columns: 1fr;
    }
    .services-poll__options--grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Кнопки навигации */
.services-poll__actions {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.services-poll__actions .btn {
    min-width: 140px;
}

/* Успех */
.services-poll__success {
    text-align: center;
    padding: var(--space-12) 0;
}

.services-poll__success-icon {
    margin-bottom: var(--space-6);
    display: flex;
    justify-content: center;
}

/* === services.css === */
/*
* Версия: 1.4
* Путь: /styles/services.css
* Файл: services.css
* Описание: Стили для секции услуг
* v1.4: Увеличен размер заголовка до 5xl
*/
.services-section {
padding-block: var(--section-padding-y);
background-color: #ffffff;
position: relative;
overflow: hidden;
}
.services-section__container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.services-section__header {
text-align: center;
margin-bottom: var(--space-12);
}
.services-section__badge {
display: inline-block;
background: rgba(234, 81, 50, 0.1);
color: #ea5132;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
padding: 8px 16px;
border-radius: 50px;
margin-bottom: 16px;
}
.services-section__title {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-4);
line-height: var(--line-height-tight);
}
.services-section__subtitle {
font-size: var(--font-size-lg);
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
line-height: var(--line-height-relaxed);
}
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.service-card {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
border: 1px solid #f1f3f5;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(234, 81, 50, 0.15);
border-color: rgba(234, 81, 50, 0.3);
}
.service-card__image-wrapper {
position: relative;
height: 220px;
overflow: hidden;
}
.service-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover .service-card__image {
transform: scale(1.1);
}
.service-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
transition: background 0.4s ease;
}
.service-card:hover .service-card__overlay {
background: linear-gradient(180deg, rgba(234, 81, 50, 0.2) 0%, rgba(0,0,0,0.6) 100%);
}
.service-card__icon {
position: absolute;
top: 20px;
right: 20px;
width: 56px;
height: 56px;
background: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ea5132;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
}
.service-card:hover .service-card__icon {
background: #ea5132;
color: #ffffff;
transform: rotate(90deg);
}
.service-card__content {
padding: 30px;
display: flex;
flex-direction: column;
flex: 1;
}
.service-card__title {
font-size: 22px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 12px;
line-height: 1.3;
}
.service-card__text {
font-size: 15px;
color: #6b7280;
line-height: 1.6;
margin-bottom: 24px;
flex: 1;
}
.service-card__btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 600;
color: #ea5132;
text-decoration: none;
transition: all 0.3s ease;
}
.service-card__btn svg {
transition: transform 0.3s ease;
}
.service-card__btn:hover {
color: #c94227;
}
.service-card__btn:hover svg {
transform: translateX(5px);
}
@media (max-width: 1024px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
@media (max-width: 767px) {
.services-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.services-section__header {
margin-bottom: var(--space-8);
}
.service-card__image-wrapper {
height: 200px;
}
}

/* === stats.css === */
/**
* Стили блока: Статистика
* Путь: /styles/stats.css
*/
.stats-section {
padding-block: var(--section-padding-y);
background-color: var(--color-bg-alt, #f8f9fa);
}

.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--spacing-lg, 32px);
text-align: center;
}

.stats-item {
padding: var(--spacing-md, 16px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.stats-item:hover {
transform: translateY(-5px);
}

/* Стили для тематических иконок */
.stats-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-primary-light, rgba(234, 81, 50, 0.1));
color: var(--color-primary, #ea5132);
border-radius: var(--radius-full, 50%);
margin-bottom: var(--spacing-md, 16px);
transition: all var(--transition-base);
}

.stats-item:hover .stats-icon {
background-color: var(--color-primary, #ea5132);
color: var(--text-inverse, #ffffff);
transform: scale(1.1);
}

.stats-icon svg {
width: 32px;
height: 32px;
}

.stats-value {
display: flex;
align-items: baseline;
justify-content: center;
margin-bottom: var(--spacing-sm, 8px);
}

.stats-number {
font-family: var(--font-heading, sans-serif);
font-size: 3.5rem;
font-weight: 700;
color: var(--color-primary, #ea5132);
line-height: 1;
}

.stats-suffix {
font-family: var(--font-heading, sans-serif);
font-size: 2.5rem;
font-weight: 700;
color: var(--color-primary, #ea5132);
line-height: 1;
margin-left: 4px;
}

.stats-text {
font-size: 1.1rem;
color: var(--color-text, #333333);
margin: 0;
max-width: 200px;
}

/* === team.css === */
/**
* Версия: 1.2
* Путь: /styles/team.css
* Файл: team.css
* Описание: Стили для блока "Наша команда" с карточками специалистов
* v1.2: Увеличен размер заголовка до 5xl
*/
.team-section {
padding-block: var(--section-padding-y);
background-color: var(--bg-muted);
}
.team-header {
margin-bottom: var(--space-12);
text-align: center;
}
.team-title {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
line-height: var(--line-height-tight);
margin: 0 0 var(--space-4);
letter-spacing: -0.02em;
}
.team-subtitle {
font-size: var(--font-size-lg);
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
margin: 0 auto;
max-width: 600px;
}
.team-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 768px) {
.team-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
}
}
@media (min-width: 1024px) {
.team-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
}
}
.team-card {
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-xl);
padding: var(--space-8) var(--space-6);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.team-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover));
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-base);
}
.team-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--color-primary-light);
}
.team-card:hover::before {
transform: scaleX(1);
}
.team-card__avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary-light), var(--bg-muted));
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-5);
color: var(--color-primary);
transition: all var(--transition-base);
box-shadow: 0 4px 12px rgba(234, 81, 50, 0.15);
}
.team-card:hover .team-card__avatar {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
color: var(--text-inverse);
transform: scale(1.05) rotate(-5deg);
box-shadow: 0 8px 20px rgba(234, 81, 50, 0.3);
}
.team-card__icon-svg {
width: 36px;
height: 36px;
}
.team-card__content {
display: flex;
flex-direction: column;
flex: 1;
}
.team-card__name {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin: 0 0 var(--space-1);
line-height: var(--line-height-tight);
}
.team-card__role {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-4);
display: block;
}
.team-card__desc {
font-size: var(--font-size-base);
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
margin: 0 0 var(--space-5);
flex: 1;
}
.team-card__skills {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
justify-content: center;
}
.team-card__skill {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
color: var(--text-secondary);
background: var(--bg-muted);
border: 1px solid var(--border-color);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
transition: all var(--transition-fast);
}
.team-card:hover .team-card__skill {
background: var(--color-primary-light);
border-color: var(--color-primary-light);
color: var(--color-primary-hover);
}
@media (max-width: 767px) {
.team-section {
padding-block: var(--section-padding-y);
}
.team-header {
margin-bottom: var(--space-8);
}
.team-subtitle {
font-size: var(--font-size-base);
}
}

/* === utilities.css === */
/**
* Версия: 2.0
* Путь: /Style_Guide/css/utilities.css
* Файл: utilities.css
* Описание:
* - Утилитарные классы (Utility-First подход)
* - Быстрое управление отступами (m-, p-), выравниванием и отображением
* - Текстовые утилиты, цвета и фоны
* - v1.1: Добавлены утилиты для GAP (отступов между элементами Flex/Grid), чтобы поддержать классы u-gap-*, используемые на многих страницах (spacing, calendar, data-viz и др.)
* - v1.2: Добавлен класс .u-mt-auto для прижатия элементов к низу flex-контейнеров (используется в карточках index.php)
* - v1.3: Добавлены отсутствующие классы нижних отступов (.u-mb-10, .u-mb-12, .u-mb-16) и утилита ограничения ширины (.u-max-w-700) для замены инлайн-стилей на главной странице (index.php).
* - v1.4: Добавлены демонстрационные утилиты для страницы containers.php (.u-border-dashed-*, .u-bg-*-light, .u-border-1)
* - v1.5: Добавлены классы адаптивной видимости (Responsive Visibility) для скрытия элементов на мобильных устройствах, планшетах и десктопах.
* - v1.6: Добавлены недостающие утилитарные классы для фонов (u-bg-primary, u-bg-secondary, u-bg-accent, u-bg-success, u-bg-warning, u-bg-error, u-bg-info) и цвета текста (u-text-inverse). Исправлена проблема, когда классы u-bg-* не переопределяли базовые стили компонентов из-за отсутствия самих классов.
* - v1.7: Добавлены утилиты размеров, ширины, прозрачности и демонстрационные классы
*         для удаления inline-стилей со страниц второго прохода рефакторинга.
* - v1.8: Demo-утилиты переведены с hardcoded px на переменные из variables.css.
* - v1.9: Все demo width/padding utility-классы унифицированы через namespace
*         --demo-layout-*; .u-max-w-700 больше не добавляет auto-margin.
* - Строгое использование CSS-переменных из variables.css
*/

/* ============================================
DISPLAY & VISIBILITY
============================================ */
.u-hidden { display: none !important; }
.u-block { display: block !important; }
.u-inline-block { display: inline-block !important; }
.u-flex { display: flex !important; }
.u-grid { display: grid !important; }
.u-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/* ============================================
POSITION UTILITIES
============================================ */
.u-relative { position: relative !important; }

/* ============================================
FLEXBOX UTILITIES
============================================ */
.u-flex-col { flex-direction: column !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-flex-1 { flex: 1 1 0% !important; }
.u-flex-auto { flex: 1 1 auto !important; }
.u-flex-none { flex: none !important; }
.u-items-start { align-items: flex-start !important; }
.u-items-center { align-items: center !important; }
.u-items-end { align-items: flex-end !important; }
.u-items-stretch { align-items: stretch !important; }
.u-justify-start { justify-content: flex-start !important; }
.u-justify-center { justify-content: center !important; }
.u-justify-end { justify-content: flex-end !important; }
.u-justify-between { justify-content: space-between !important; }

/* ============================================
GAP UTILITIES (Отступы между элементами Flex/Grid)
============================================ */
.u-gap-0 { gap: 0 !important; }
.u-gap-1 { gap: var(--space-1) !important; }
.u-gap-2 { gap: var(--space-2) !important; }
.u-gap-3 { gap: var(--space-3) !important; }
.u-gap-4 { gap: var(--space-4) !important; }
.u-gap-5 { gap: var(--space-5) !important; }
.u-gap-6 { gap: var(--space-6) !important; }
.u-gap-8 { gap: var(--space-8) !important; }
.u-gap-10 { gap: var(--space-10) !important; }
.u-gap-12 { gap: var(--space-12) !important; }
.u-gap-16 { gap: var(--space-16) !important; }

/* ============================================
GRID HELPERS
============================================ */
.u-grid-col-full { grid-column: 1 / -1 !important; }

/* ============================================
SPACING (MARGINS & PADDINGS)
============================================ */
/* Margins */
.u-m-0 { margin: 0 !important; }
.u-m-1 { margin: var(--space-1) !important; }
.u-m-2 { margin: var(--space-2) !important; }
.u-m-3 { margin: var(--space-3) !important; }
.u-m-4 { margin: var(--space-4) !important; }
.u-m-6 { margin: var(--space-6) !important; }
.u-m-8 { margin: var(--space-8) !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-2 { margin-top: var(--space-2) !important; }
.u-mt-4 { margin-top: var(--space-4) !important; }
.u-mt-6 { margin-top: var(--space-6) !important; }
.u-mt-8 { margin-top: var(--space-8) !important; }
.u-mt-auto { margin-top: auto !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-2 { margin-bottom: var(--space-2) !important; }
.u-mb-4 { margin-bottom: var(--space-4) !important; }
.u-mb-6 { margin-bottom: var(--space-6) !important; }
.u-mb-8 { margin-bottom: var(--space-8) !important; }
.u-mb-10 { margin-bottom: var(--space-10) !important; }
.u-mb-12 { margin-bottom: var(--space-12) !important; }
.u-mb-16 { margin-bottom: var(--space-16) !important; }
.u-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Paddings */
.u-p-0 { padding: 0 !important; }
.u-p-2 { padding: var(--space-2) !important; }
.u-p-4 { padding: var(--space-4) !important; }
.u-p-6 { padding: var(--space-6) !important; }
.u-p-8 { padding: var(--space-8) !important; }
.u-pt-4 { padding-top: var(--space-4) !important; }
.u-pb-4 { padding-bottom: var(--space-4) !important; }
.u-pb-150 { padding-bottom: var(--demo-layout-pb-150) !important; }
.u-pb-250 { padding-bottom: var(--demo-layout-pb-250) !important; }
.u-pb-350 { padding-bottom: var(--demo-layout-pb-350) !important; }
.u-px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.u-py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.u-py-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }

/* ============================================
WIDTH UTILITIES
============================================ */
.u-w-full { width: 100% !important; }
.u-max-w-250 { max-width: var(--demo-layout-max-w-250) !important; }
.u-max-w-300 { max-width: var(--demo-layout-max-w-300) !important; }
.u-max-w-450 { max-width: var(--demo-layout-max-w-450) !important; }
.u-max-w-500 { max-width: var(--demo-layout-max-w-500) !important; }
.u-max-w-600 { max-width: var(--demo-layout-max-w-600) !important; }
.u-max-w-650 { max-width: var(--demo-layout-max-w-650) !important; }
.u-max-w-700 {
max-width: var(--demo-layout-max-w-700) !important;
}
.u-min-w-200 { min-width: 200px !important; }

/* ============================================
TYPOGRAPHY & TEXT
============================================ */
.u-text-left { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right { text-align: right !important; }
.u-font-normal { font-weight: var(--font-weight-normal) !important; }
.u-font-medium { font-weight: var(--font-weight-medium) !important; }
.u-font-semibold { font-weight: var(--font-weight-semibold) !important; }
.u-font-bold { font-weight: var(--font-weight-bold) !important; }
.u-text-xs { font-size: var(--font-size-xs) !important; }
.u-text-sm { font-size: var(--font-size-sm) !important; }
.u-text-base { font-size: var(--font-size-base) !important; }
.u-text-lg { font-size: var(--font-size-lg) !important; }
.u-text-xl { font-size: var(--font-size-xl) !important; }
.u-text-primary { color: var(--text-primary) !important; }
.u-text-secondary { color: var(--text-secondary) !important; }
.u-text-muted { color: var(--text-muted) !important; }
.u-text-accent { color: var(--color-accent) !important; }
.u-text-success { color: var(--color-success) !important; }
.u-text-warning { color: var(--color-warning) !important; }
.u-text-error { color: var(--color-error) !important; }
.u-text-inverse { color: var(--text-inverse) !important; }
.u-tracking-wide { letter-spacing: 0.1em !important; }
.u-uppercase { text-transform: uppercase !important; }
.u-opacity-90 { opacity: 0.9 !important; }
.u-truncate {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}

/* ============================================
BACKGROUNDS & BORDERS
============================================ */
.u-bg-body { background-color: var(--bg-body) !important; }
.u-bg-surface { background-color: var(--bg-surface) !important; }
.u-bg-muted { background-color: var(--bg-muted) !important; }
.u-bg-elevated { background-color: var(--bg-elevated) !important; }
.u-bg-primary { background-color: var(--color-primary) !important; }
.u-bg-secondary { background-color: var(--color-secondary) !important; }
.u-bg-accent { background-color: var(--color-accent) !important; }
.u-bg-success { background-color: var(--color-success) !important; }
.u-bg-warning { background-color: var(--color-warning) !important; }
.u-bg-error { background-color: var(--color-error) !important; }
.u-bg-info { background-color: var(--color-info) !important; }
.u-rounded-sm { border-radius: var(--radius-sm) !important; }
.u-rounded-md { border-radius: var(--radius-md) !important; }
.u-rounded-lg { border-radius: var(--radius-lg) !important; }
.u-rounded-full { border-radius: var(--radius-full) !important; }
.u-shadow-sm { box-shadow: var(--shadow-sm) !important; }
.u-shadow-md { box-shadow: var(--shadow-md) !important; }
.u-shadow-lg { box-shadow: var(--shadow-lg) !important; }
.u-border-2 { border-width: 2px !important; }

/* ============================================
INTERACTION & STATES
============================================ */
.u-pointer { cursor: pointer !important; }
.u-no-select { user-select: none !important; }
.u-no-scroll { overflow: hidden !important; } /* Используется JS при открытых модалках/меню */
.u-overflow-y-auto { overflow-y: auto !important; }

/* ============================================
ДЕМОНСТРАЦИОННЫЕ УТИЛИТЫ ДЛЯ CONTAINERS.PHP
============================================ */
.u-border-dashed-primary {
border: 2px dashed var(--color-primary) !important;
}
.u-border-dashed-secondary {
border: 2px dashed var(--color-secondary) !important;
}
.u-border-dashed-accent {
border: 2px dashed var(--color-accent) !important;
}
.u-border-dashed-success {
border: 2px dashed var(--color-success) !important;
}
.u-bg-primary-light {
background-color: var(--color-primary-light) !important;
}
.u-bg-secondary-light {
background-color: var(--color-secondary-light) !important;
}
.u-bg-accent-light {
background-color: var(--color-accent-light) !important;
}
.u-border-1 {
border: 1px solid !important;
}
.u-border-primary {
border-color: var(--color-primary) !important;
}
.u-border-secondary {
border-color: var(--color-secondary) !important;
}
.u-border-accent {
border-color: var(--color-accent) !important;
}

/* ============================================
RESPONSIVE VISIBILITY (АДАПТИВНАЯ ВИДИМОСТЬ)
============================================ */
/* Скрыть на мобильных устройствах (экраны < 768px) */
@media (max-width: 767px) {
.u-hidden-mobile,
.u-hidden-max-md {
display: none !important;
}
}
/* Скрыть на мобильных и планшетах (экраны < 1024px) */
@media (max-width: 1023px) {
.u-hidden-max-lg {
display: none !important;
}
}
/* Скрыть на десктопах (экраны >= 1024px) */
@media (min-width: 1024px) {
.u-hidden-desktop,
.u-hidden-min-lg {
display: none !important;
}
}