/* ========================================================================
SMART69 - ПОЛНАЯ ПЕРЕРАБОТАННАЯ СИСТЕМА СТИЛЕЙ
АДАПТИВНЫЕ, КОМПАКТНЫЕ, ПРОФЕССИОНАЛЬНЫЕ КАРТОЧКИ
БЕЗ УПРОЩЕНИЙ И СОКРАЩЕНИЙ. КАЖДАЯ МЕЛОЧЬ УЧТЕНА.
======================================================================== */

/* 1. ГЛОБАЛЬНЫЙ СБРОС И НОРМАЛИЗАЦИЯ */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* 2. КАСТОМНЫЕ СВОЙСТВА (ПЕРЕМЕННЫЕ) - ПОЛНЫЙ НАБОР */
:root {
/* Цветовая схема - светлая профессиональная */
--smart-color-white: #ffffff;
--smart-color-black: #000000;

--smart-color-gray-50: #f9fafb;
--smart-color-gray-100: #f3f4f6;
--smart-color-gray-200: #e5e7eb;
--smart-color-gray-300: #d1d5db;
--smart-color-gray-400: #9ca3af;
--smart-color-gray-500: #6b7280;
--smart-color-gray-600: #4b5563;
--smart-color-gray-700: #374151;
--smart-color-gray-800: #1f2937;
--smart-color-gray-900: #111827;

--smart-color-primary-50: #eff6ff;
--smart-color-primary-100: #dbeafe;
--smart-color-primary-200: #bfdbfe;
--smart-color-primary-300: #93c5fd;
--smart-color-primary-400: #60a5fa;
--smart-color-primary-500: #3b82f6;
--smart-color-primary-600: #2563eb;
--smart-color-primary-700: #1d4ed8;
--smart-color-primary-800: #1e40af;
--smart-color-primary-900: #1e3a8a;

--smart-color-accent-50: #fefce8;
--smart-color-accent-100: #fef9c3;
--smart-color-accent-200: #fef08a;
--smart-color-accent-300: #fde047;
--smart-color-accent-400: #facc15;
--smart-color-accent-500: #eab308;
--smart-color-accent-600: #ca8a04;
--smart-color-accent-700: #a16207;
--smart-color-accent-800: #854d0e;
--smart-color-accent-900: #713f12;

--smart-color-success: #10b981;
--smart-color-warning: #f59e0b;
--smart-color-danger: #ef4444;
--smart-color-info: #3b82f6;

/* Привязка переменных к ролям */
--smart-bg-body: var(--smart-color-gray-50);
--smart-bg-surface: var(--smart-color-white);
--smart-bg-card: var(--smart-color-white);
--smart-bg-elevated: var(--smart-color-gray-100);
--smart-bg-highlight: var(--smart-color-primary-50);

--smart-text-primary: var(--smart-color-gray-900);
--smart-text-secondary: var(--smart-color-gray-600);
--smart-text-tertiary: var(--smart-color-gray-500);
--smart-text-inverse: var(--smart-color-white);
--smart-text-link: var(--smart-color-primary-700);
--smart-text-link-hover: var(--smart-color-accent-600);

--smart-border-light: 1px solid var(--smart-color-gray-200);
--smart-border-medium: 1px solid var(--smart-color-gray-300);
--smart-border-heavy: 2px solid var(--smart-color-primary-200);
--smart-border-accent: 2px solid var(--smart-color-accent-400);

--smart-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--smart-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--smart-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--smart-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--smart-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
--smart-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--smart-shadow-glow-primary: 0 0 0 3px rgba(59, 130, 246, 0.3);
--smart-shadow-glow-accent: 0 0 0 3px rgba(234, 179, 8, 0.3);

--smart-radius-xs: 4px;
--smart-radius-sm: 8px;
--smart-radius-md: 12px;
--smart-radius-lg: 16px;
--smart-radius-xl: 24px;
--smart-radius-2xl: 32px;
--smart-radius-3xl: 48px;
--smart-radius-full: 9999px;

--smart-font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--smart-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

--smart-font-weight-thin: 100;
--smart-font-weight-extralight: 200;
--smart-font-weight-light: 300;
--smart-font-weight-normal: 400;
--smart-font-weight-medium: 500;
--smart-font-weight-semibold: 600;
--smart-font-weight-bold: 700;
--smart-font-weight-extrabold: 800;
--smart-font-weight-black: 900;

--smart-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--smart-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--smart-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
--smart-transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

--smart-container-max-width: 1440px;
--smart-container-padding: 24px;

--smart-z-dropdown: 1000;
--smart-z-sticky: 1020;
--smart-z-fixed: 1030;
--smart-z-modal-backdrop: 1040;
--smart-z-modal: 1050;
--smart-z-popover: 1060;
--smart-z-tooltip: 1070;
--smart-z-toast: 1080;
}

/* 3. БАЗОВЫЕ СТИЛИ HTML И BODY */
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
font-size: 16px;
line-height: 1.5;
tab-size: 4;
font-feature-settings: normal;
font-variation-settings: normal;
}

body {
font-family: var(--smart-font-family-sans);
background-color: var(--smart-bg-body);
color: var(--smart-text-primary);
line-height: 1.6;
font-weight: var(--smart-font-weight-normal);
font-size: 1rem;
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 0 var(--smart-container-padding);
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
position: relative;
}

/* 4. КОНТЕЙНЕР */
.smart-container {
max-width: var(--smart-container-max-width);
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 32px;
padding-bottom: 64px;
}

/* 5. ТИПОГРАФИКА - ПОЛНЫЙ НАБОР */
h1, h2, h3, h4, h5, h6 {
font-family: var(--smart-font-family-sans);
font-weight: var(--smart-font-weight-bold);
line-height: 1.2;
letter-spacing: -0.02em;
margin-bottom: 0.75em;
color: var(--smart-text-primary);
}

.smart-heading-1 {
font-size: clamp(2rem, 8vw, 3.5rem);
font-weight: var(--smart-font-weight-extrabold);
text-align: center;
margin-bottom: 1.5rem;
color: var(--smart-color-primary-900);
letter-spacing: -0.03em;
background: linear-gradient(135deg, var(--smart-color-primary-900) 0%, var(--smart-color-primary-700) 50%, var(--smart-color-accent-700) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 10px rgba(30, 58, 138, 0.1);
}

.smart-heading-1 span {
background: none;
-webkit-text-fill-color: var(--smart-color-accent-500);
color: var(--smart-color-accent-500);
}

.smart-heading-2 {
font-size: clamp(1.75rem, 5vw, 2.5rem);
font-weight: var(--smart-font-weight-bold);
margin-top: 3.5rem;
margin-bottom: 2rem;
position: relative;
padding-left: 1.5rem;
border-left: 6px solid var(--smart-color-primary-600);
color: var(--smart-color-gray-800);
}

.smart-heading-2::after {
content: '';
position: absolute;
bottom: -8px;
left: 1.5rem;
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--smart-color-primary-500), var(--smart-color-accent-400));
border-radius: var(--smart-radius-full);
}

.smart-heading-3 {
font-size: clamp(1.25rem, 4vw, 1.75rem);
font-weight: var(--smart-font-weight-semibold);
margin-top: 2rem;
margin-bottom: 1.25rem;
color: var(--smart-color-gray-700);
}

.smart-heading-4 {
font-size: clamp(1.125rem, 3vw, 1.5rem);
font-weight: var(--smart-font-weight-semibold);
margin-top: 1.75rem;
margin-bottom: 1rem;
color: var(--smart-color-gray-700);
}

p {
margin-bottom: 1.25rem;
color: var(--smart-text-secondary);
font-size: 1rem;
line-height: 1.7;
}

a {
color: var(--smart-text-link);
text-decoration: none;
font-weight: var(--smart-font-weight-medium);
transition: color var(--smart-transition-base);
}

a:hover {
color: var(--smart-text-link-hover);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 2px;
}

/* 6. ХЛЕБНЫЕ КРОШКИ */
.smart-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
padding: 1rem 0;
margin-bottom: 1.5rem;
color: var(--smart-text-tertiary);
font-size: 0.95rem;
border-bottom: var(--smart-border-light);
}

.smart-breadcrumb a {
color: var(--smart-text-link);
text-decoration: none;
transition: color var(--smart-transition-fast);
}

.smart-breadcrumb a:hover {
color: var(--smart-color-accent-600);
text-decoration: underline;
}

.smart-breadcrumb .smart-separator {
color: var(--smart-color-gray-400);
margin: 0 0.25rem;
user-select: none;
}

/* 7. АНИМИРОВАННЫЙ ТЕЛЕФОННЫЙ БЛОК */
.smart-phone-hero {
text-align: center;
margin: 2.5rem 0 2rem;
}

.smart-phone-link {
display: inline-block;
background: linear-gradient(145deg, var(--smart-color-primary-700), var(--smart-color-primary-900));
color: var(--smart-color-white);
font-size: clamp(1.75rem, 6vw, 2.75rem);
font-weight: var(--smart-font-weight-extrabold);
padding: 1.125rem 3.5rem;
border-radius: var(--smart-radius-full);
text-decoration: none;
box-shadow: 0 15px 30px -8px rgba(30, 58, 138, 0.35), 0 0 0 2px rgba(234, 179, 8, 0.3);
transition: all var(--smart-transition-bounce);
border: 2px solid var(--smart-color-accent-400);
letter-spacing: 0.02em;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
animation: smartPulse 2.5s infinite ease-in-out;
transform-origin: center;
line-height: 1.2;
}

.smart-phone-link:hover {
transform: scale(1.05);
background: linear-gradient(145deg, var(--smart-color-accent-600), var(--smart-color-accent-800));
color: var(--smart-color-white);
text-decoration: none;
border-color: var(--smart-color-white);
box-shadow: 0 20px 40px -8px rgba(202, 138, 4, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.5);
}

@keyframes smartPulse {
0% { box-shadow: 0 10px 25px -5px rgba(30, 58, 138, 0.4), 0 0 0 2px rgba(234, 179, 8, 0.3); }
50% { box-shadow: 0 20px 40px -5px rgba(234, 179, 8, 0.5), 0 0 0 3px rgba(30, 58, 138, 0.5); }
100% { box-shadow: 0 10px 25px -5px rgba(30, 58, 138, 0.4), 0 0 0 2px rgba(234, 179, 8, 0.3); }
}

/* ========================================================================
8. КАРТОЧКИ УСЛУГ - ПОЛНОСТЬЮ ПЕРЕРАБОТАННЫЕ, КОМПАКТНЫЕ, АДАПТИВНЫЕ
======================================================================== */
.smart-services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin: 2.5rem 0 3rem;
}

.smart-service-card {
background: var(--smart-bg-card);
border-radius: var(--smart-radius-xl);
padding: 0 0 20px 0;
box-shadow: var(--smart-shadow-sm);
border: var(--smart-border-light);
transition: all var(--smart-transition-bounce);
display: flex;
flex-direction: column;
height: 100%;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(30px);
animation: smartFadeUp 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.smart-service-card:hover {
transform: translateY(-4px);
border-color: var(--smart-color-primary-300);
box-shadow: var(--smart-shadow-lg), var(--smart-shadow-glow-primary);
}

.smart-service-card img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
border-bottom: var(--smart-border-light);
transition: transform var(--smart-transition-slow);
}

.smart-service-card:hover img {
transform: scale(1.03);
}

.smart-service-title {
font-size: 1.25rem;
font-weight: var(--smart-font-weight-bold);
margin: 16px 16px 4px 16px;
color: var(--smart-color-primary-900);
line-height: 1.3;
}

.smart-service-description {
color: var(--smart-text-tertiary);
font-size: 0.85rem;
margin: 0 16px 12px 16px;
line-height: 1.4;
flex-grow: 1;
}

.smart-service-price {
font-size: 1.75rem;
font-weight: var(--smart-font-weight-extrabold);
color: var(--smart-color-accent-600);
margin-top: auto;
padding: 16px 16px 12px 16px;
border-top: 1px dashed var(--smart-color-gray-300);
letter-spacing: -0.02em;
text-align: center;
background: linear-gradient(to bottom, transparent, var(--smart-color-gray-50));
}

.smart-service-price small {
font-size: 0.9rem;
font-weight: var(--smart-font-weight-normal);
color: var(--smart-text-tertiary);
}

/* ========================================================================
9. КАРТОЧКИ МАРОК АВТО - ПОЛНОСТЬЮ ПЕРЕРАБОТАННЫЕ, КОМПАКТНЫЕ, АДАПТИВНЫЕ
======================================================================== */
.smart-brand-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin: 2.5rem 0 3rem;
}

.smart-brand-card {
background: var(--smart-bg-card);
border-radius: var(--smart-radius-xl);
padding: 0 0 20px 0;
box-shadow: var(--smart-shadow-sm);
border: var(--smart-border-light);
transition: all var(--smart-transition-bounce);
display: flex;
flex-direction: column;
height: 100%;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(30px);
animation: smartFadeUp 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.smart-brand-card.smart-visible {
opacity: 1;
transform: translateY(0);
}

.smart-brand-card:hover {
transform: translateY(-4px);
box-shadow: var(--smart-shadow-lg), 0 0 0 3px rgba(234, 179, 8, 0.3);
border-color: var(--smart-color-accent-500);
}

.smart-brand-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 16px 16px 4px 16px;
}

.smart-brand-name {
font-weight: var(--smart-font-weight-extrabold);
font-size: 1.25rem;
color: var(--smart-color-primary-900);
letter-spacing: -0.01em;
line-height: 1.3;
}

.smart-guarantee-badge {
background: var(--smart-color-success);
color: var(--smart-color-white);
padding: 4px 10px;
border-radius: var(--smart-radius-full);
font-size: 0.7rem;
font-weight: var(--smart-font-weight-bold);
box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
animation: smartPulseGlow 2.5s infinite ease-in-out;
letter-spacing: 0.3px;
white-space: nowrap;
text-transform: uppercase;
}

@keyframes smartPulseGlow {
0%, 100% { box-shadow: 0 0 8px var(--smart-color-success), 0 2px 4px rgba(0,0,0,0.1); }
50% { box-shadow: 0 0 22px var(--smart-color-success), 0 4px 8px rgba(0,0,0,0.1); }
}

.smart-brand-img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
border-bottom: var(--smart-border-light);
transition: filter var(--smart-transition-base), transform var(--smart-transition-base);
}

.smart-brand-card:hover .smart-brand-img {
filter: brightness(1.03);
transform: scale(1.01);
}

.smart-brand-details {
margin: 12px 16px;
padding: 12px 0;
border-top: 1px dashed var(--smart-color-gray-300);
border-bottom: 1px dashed var(--smart-color-gray-300);
font-size: 0.85rem;
flex-grow: 1;
}

.smart-brand-details p {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 6px;
padding-bottom: 0;
border-bottom: none;
color: var(--smart-text-secondary);
}

.smart-brand-details p:last-of-type {
margin-bottom: 0;
}

.smart-brand-details strong {
color: var(--smart-color-primary-800);
font-weight: var(--smart-font-weight-semibold);
}

/* Кнопка в карточках марок */
.smart-phone-button {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--smart-color-primary-600);
color: var(--smart-color-white) !important;
text-decoration: none;
padding: 12px 16px;
margin: 8px 16px 0 16px;
border-radius: var(--smart-radius-full);
font-weight: var(--smart-font-weight-semibold);
font-size: 0.95rem;
text-align: center;
transition: all var(--smart-transition-base);
box-shadow: var(--smart-shadow-sm);
border: 1px solid transparent;
width: calc(100% - 32px);
}

.smart-phone-button:hover {
background: var(--smart-color-accent-500);
color: var(--smart-color-primary-900) !important;
transform: translateY(-2px);
box-shadow: var(--smart-shadow-md), 0 0 0 3px rgba(234, 179, 8, 0.3);
text-decoration: none;
border-color: var(--smart-color-accent-200);
}

/* 10. ТАБЛИЦЫ */
.smart-table-wrapper {
overflow-x: auto;
margin: 2.5rem 0;
border-radius: var(--smart-radius-xl);
border: var(--smart-border-light);
background-color: var(--smart-bg-card);
box-shadow: var(--smart-shadow-md);
scrollbar-width: thin;
scrollbar-color: var(--smart-color-primary-400) var(--smart-color-gray-200);
}

.smart-table-wrapper::-webkit-scrollbar {
height: 8px;
}

.smart-table-wrapper::-webkit-scrollbar-track {
background: var(--smart-color-gray-200);
border-radius: var(--smart-radius-full);
}

.smart-table-wrapper::-webkit-scrollbar-thumb {
background: var(--smart-color-primary-400);
border-radius: var(--smart-radius-full);
}

.smart-table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
min-width: 700px;
table-layout: auto;
}

.smart-table thead tr {
background: linear-gradient(145deg, var(--smart-color-primary-50), var(--smart-color-gray-100));
}

.smart-table th {
color: var(--smart-color-primary-900);
font-weight: var(--smart-font-weight-bold);
padding: 1.25rem 1.5rem;
text-align: left;
border-bottom: 3px solid var(--smart-color-primary-300);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}

.smart-table td {
padding: 1.125rem 1.5rem;
border-bottom: var(--smart-border-light);
color: var(--smart-text-secondary);
vertical-align: top;
}

.smart-table tbody tr {
transition: background-color var(--smart-transition-fast);
}

.smart-table tbody tr:hover td {
background-color: var(--smart-color-primary-50);
}

.smart-table tbody tr:last-child td {
border-bottom: none;
}

.smart-table-highlight {
font-weight: var(--smart-font-weight-bold);
color: var(--smart-color-primary-700);
}

/* 11. WIKI-БЛОК */
.smart-wiki-block {
background: linear-gradient(135deg, var(--smart-color-primary-50), var(--smart-color-gray-50));
border-left: 10px solid var(--smart-color-primary-600);
padding: 2.5rem 2.5rem;
border-radius: 0 var(--smart-radius-2xl) var(--smart-radius-2xl) 0;
margin: 3rem 0;
box-shadow: var(--smart-shadow-lg);
border-top: var(--smart-border-light);
border-right: var(--smart-border-light);
border-bottom: var(--smart-border-light);
position: relative;
overflow: hidden;
}

.smart-wiki-block::before {
content: '📘';
position: absolute;
bottom: -20px;
right: -20px;
font-size: 150px;
opacity: 0.05;
transform: rotate(15deg);
pointer-events: none;
}

.smart-wiki-block h4 {
font-size: 1.75rem;
font-weight: var(--smart-font-weight-bold);
margin-top: 0;
margin-bottom: 1.5rem;
color: var(--smart-color-primary-900);
display: flex;
align-items: center;
gap: 0.75rem;
}

.smart-wiki-block p {
margin-bottom: 1rem;
font-size: 1.05rem;
color: var(--smart-text-secondary);
}

.smart-wiki-block strong {
color: var(--smart-color-primary-800);
}

.smart-wiki-block em {
color: var(--smart-color-accent-700);
font-style: italic;
}

/* 12. FAQ БЛОК */
.smart-faq-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
margin: 3rem 0;
}

.smart-faq-item {
background-color: var(--smart-bg-card);
border-radius: var(--smart-radius-xl);
padding: 2rem 1.75rem;
border: var(--smart-border-light);
box-shadow: var(--smart-shadow-sm);
transition: all var(--smart-transition-base);
opacity: 0;
animation: smartFadeUp 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
height: 100%;
display: flex;
flex-direction: column;
}

.smart-faq-item:hover {
border-color: var(--smart-color-accent-300);
box-shadow: var(--smart-shadow-lg), var(--smart-shadow-glow-accent);
transform: translateY(-4px);
}

.smart-faq-question {
font-weight: var(--smart-font-weight-bold);
color: var(--smart-color-primary-900);
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.4;
display: flex;
align-items: flex-start;
gap: 0.75rem;
}

.smart-faq-question::before {
content: "❓";
font-size: 1.5rem;
opacity: 0.8;
color: var(--smart-color-accent-500);
}

.smart-faq-answer {
color: var(--smart-text-secondary);
font-size: 1rem;
line-height: 1.7;
flex: 1;
}

.smart-faq-answer a {
color: var(--smart-color-primary-700);
font-weight: var(--smart-font-weight-semibold);
}

.smart-faq-answer a:hover {
color: var(--smart-color-accent-600);
}

/* 13. КОНТАКТНЫЙ БЛОК */
.smart-contact-block {
background: linear-gradient(145deg, var(--smart-bg-elevated), var(--smart-bg-surface));
border-radius: var(--smart-radius-3xl);
padding: 3rem 2.5rem;
margin: 4rem 0 2rem;
text-align: center;
border: var(--smart-border-light);
box-shadow: var(--smart-shadow-xl);
position: relative;
overflow: hidden;
}

.smart-contact-block::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--smart-color-primary-400), var(--smart-color-accent-400), var(--smart-color-primary-400));
}

.smart-contact-block h3 {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--smart-color-primary-900);
}

.smart-contact-address {
display: inline-block;
background-color: var(--smart-color-white);
padding: 0.75rem 2rem;
border-radius: var(--smart-radius-full);
margin: 1.25rem 0;
font-size: 1.25rem;
font-weight: var(--smart-font-weight-semibold);
color: var(--smart-color-primary-800);
box-shadow: var(--smart-shadow-sm);
border: var(--smart-border-light);
}

.smart-contact-hours {
font-size: 1.1rem;
color: var(--smart-text-secondary);
margin-bottom: 1.5rem;
}

/* 14. ЛОКАЛЬНОЕ SEO */
.smart-local-seo {
margin: 3rem 0 1rem;
}

.smart-district-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}

.smart-district-card {
background-color: var(--smart-bg-card);
padding: 1.5rem 1.5rem;
border-radius: var(--smart-radius-lg);
border: var(--smart-border-light);
box-shadow: var(--smart-shadow-sm);
transition: var(--smart-transition-base);
}

.smart-district-card:hover {
border-color: var(--smart-color-primary-300);
box-shadow: var(--smart-shadow-md);
}

.smart-district-card h5 {
margin-top: 0;
margin-bottom: 1rem;
color: var(--smart-color-primary-700);
font-size: 1.25rem;
}

.smart-district-card ul {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}

.smart-district-card li {
padding: 0.25rem 0;
color: var(--smart-text-secondary);
display: flex;
align-items: center;
gap: 0.5rem;
}

.smart-district-card li::before {
content: "✓";
color: var(--smart-color-success);
font-weight: var(--smart-font-weight-bold);
}

/* 15. ВИДЕО КОНТЕЙНЕР */
.smart-video-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin: 40px 0;
border-radius: var(--smart-radius-2xl);
border: 1px solid var(--smart-color-gray-200);
box-shadow: var(--smart-shadow-lg);
}

.smart-video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--smart-radius-2xl);
}

/* 16. СЕТКА ПРЕИМУЩЕСТВ */
.smart-advantages-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 28px;
margin: 48px 0;
}

.smart-advantage-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 28px 24px;
border-radius: var(--smart-radius-2xl);
text-align: center;
border: 1px solid var(--smart-color-gray-200);
transition: transform var(--smart-transition-base), box-shadow var(--smart-transition-base);
box-shadow: var(--smart-shadow-sm);
opacity: 0;
transform: translateY(20px);
}

.smart-advantage-card.smart-visible {
opacity: 1;
transform: translateY(0);
}

.smart-advantage-card:hover {
transform: translateY(-6px);
box-shadow: var(--smart-shadow-lg);
border-color: var(--smart-color-primary-300);
}

.smart-advantage-card .smart-advantage-icon {
font-size: 3.5rem;
margin-bottom: 16px;
}

.smart-advantage-card h4 {
margin: 12px 0;
color: var(--smart-color-primary-800);
font-size: 1.3rem;
}

.smart-advantage-card p {
color: var(--smart-text-secondary);
margin-bottom: 0;
}

/* 17. ФУТЕР ССЫЛКИ */
.smart-footer-links {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
list-style: none;
padding: 40px 0 20px 0;
margin-top: 40px;
border-top: 1px solid var(--smart-color-gray-200);
}

.smart-footer-links li {
margin-bottom: 0;
}

.smart-footer-links a {
color: var(--smart-text-secondary);
text-decoration: none;
font-weight: var(--smart-font-weight-medium);
transition: color var(--smart-transition-base);
padding: 8px 16px;
border-radius: var(--smart-radius-full);
background: var(--smart-bg-card);
border: 1px solid var(--smart-color-gray-200);
}

.smart-footer-links a:hover {
color: var(--smart-color-primary-700);
border-color: var(--smart-color-primary-500);
background: var(--smart-color-gray-50);
text-decoration: none;
}

/* 18. АНИМАЦИИ ПОЯВЛЕНИЯ */
@keyframes smartFadeUp {
0% {
opacity: 0;
transform: translateY(40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

/* 19. МЕДИА-ЗАПРОСЫ ДЛЯ ПОЛНОЙ АДАПТАЦИИ */
@media (max-width: 1200px) {
:root {
--smart-container-padding: 20px;
}
.smart-container {
padding-top: 24px;
padding-bottom: 48px;
}
}

@media (max-width: 992px) {
.smart-faq-grid {
grid-template-columns: 1fr;
}
.smart-brand-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
body {
padding: 0 16px;
}
:root {
--smart-container-padding: 16px;
}
.smart-services-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.smart-brand-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.smart-wiki-block {
padding: 1.75rem 1.5rem;
}
.smart-contact-block {
padding: 2rem 1.5rem;
}
.smart-phone-link {
padding: 0.875rem 2rem;
font-size: 1.5rem;
width: 100%;
}
.smart-heading-2 {
padding-left: 1rem;
}
.smart-table th,
.smart-table td {
padding: 0.875rem 1rem;
}
.smart-service-card img,
.smart-brand-img {
height: 180px;
}
}

@media (max-width: 480px) {
body {
padding: 0 12px;
}
.smart-service-card {
padding: 0 0 16px 0;
}
.smart-service-price {
font-size: 1.5rem;
}
.smart-brand-card h3 {
font-size: 1.5rem;
}
.smart-brand-price {
font-size: 1.5rem;
}
.smart-faq-question {
font-size: 1.1rem;
}
.smart-service-title {
font-size: 1.2rem;
}
.smart-phone-button {
padding: 10px 14px;
font-size: 0.9rem;
}
}

/* 20. СКРЫТЫЙ БЛОК ДЛЯ СХЕМ */
.smart-schema-hidden {
display: none;
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
overflow: hidden;
position: absolute;
pointer-events: none;
}

/* 21. ПЕЧАТЬ */
@media print {
body {
background: white;
color: black;
padding: 0;
}
.smart-phone-hero,
.smart-call-button,
iframe,
.smart-yandex-badge-container {
display: none;
}
.smart-container {
max-width: 100%;
padding: 0;
}
a {
color: black;
text-decoration: underline;
}
}


/* ============================================================ */
/* УНИКАЛЬНЫЕ СТИЛИ БЛОКА SMART69 - СВЕТЛЫЙ КИБЕРПАНК */
/* Префикс .akppsmart69 - защита от конфликтов */
/* ============================================================ */

/* СБРОС ВСЕХ СТИЛЕЙ ВНУТРИ БЛОКА */
.akppsmart69-wrapper,
.akppsmart69-wrapper *,
.akppsmart69-wrapper *::before,
.akppsmart69-wrapper *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ОСНОВНАЯ ОБЕРТКА */
.akppsmart69-wrapper {
    width: 100%;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
    position: relative;
    overflow: hidden;
    font-family: 'Segoe UI', 'Roboto', 'Inter', -apple-system, sans-serif;
}

/* КИБЕР-СЕТКА НА ФОНЕ */
.akppsmart69-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 150, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 150, 255, 0.07) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
}

/* ГОЛОГРАФИЧЕСКИЕ ПЯТНА */
.akppsmart69-wrapper::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 200, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    top: -200px;
    right: -100px;
    pointer-events: none;
    z-index: 0;
}

/* СЕКЦИЯ С КОНТЕНТОМ */
.akppsmart69-section {
    max-width: 1300px;
    margin: 0 auto;
    padding: 70px 20px;
    position: relative;
    z-index: 1;
}

/* ЗАГОЛОВОК */
.akppsmart69-heading {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 15px;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.3;
}

/* ДЕКОРАТИВНАЯ ЛИНИЯ ПОД ЗАГОЛОВКОМ */
.akppsmart69-heading::after {
    content: "";
    display: block;
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, #00d4ff, #0080ff, #00d4ff);
    margin: 18px auto 0;
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(0, 180, 255, 0.6);
}

/* СЕТКА КАРТОЧЕК */
.akppsmart69-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 28px;
    margin-top: 55px;
}

/* КАРТОЧКА */
.akppsmart69-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 2px solid rgba(0, 150, 255, 0.25);
    border-radius: 20px;
    padding: 35px 25px 30px;
    text-align: center;
    position: relative;
    transition: all 0.35s ease;
    overflow: hidden;
    z-index: 1;
}

/* СВЕЧЕНИЕ КАРТОЧКИ */
.akppsmart69-card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 180, 255, 0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: -1;
}

.akppsmart69-card:hover .akppsmart69-card-glow {
    opacity: 1;
}

/* ХОВЕР ЭФФЕКТ */
.akppsmart69-card:hover {
    transform: translateY(-7px);
    border-color: #00b4ff;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 
        0 20px 40px rgba(0, 100, 200, 0.15),
        0 0 30px rgba(0, 180, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ОБЕРТКА ИКОНКИ */
.akppsmart69-icon-wrapper {
    width: 75px;
    height: 75px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(0, 150, 255, 0.3);
    transform: rotate(45deg);
    transition: all 0.3s ease;
}

.akppsmart69-card:hover .akppsmart69-icon-wrapper {
    background: linear-gradient(135deg, #bae6fd, #7dd3fc);
    border-color: #00b4ff;
    box-shadow: 0 0 25px rgba(0, 180, 255, 0.4);
}

/* ИКОНКА */
.akppsmart69-icon {
    font-size: 32px;
    transform: rotate(-45deg);
    display: block;
    transition: transform 0.3s ease;
}

.akppsmart69-card:hover .akppsmart69-icon {
    transform: rotate(-45deg) scale(1.15);
}

/* ЗАГОЛОВОК КАРТОЧКИ */
.akppsmart69-card-title {
    font-size: 19px;
    font-weight: 700;
    color: #0c4a6e;
    margin-bottom: 12px;
    line-height: 1.3;
    letter-spacing: 0.5px;
}

/* ТЕКСТ КАРТОЧКИ */
.akppsmart69-card-text {
    font-size: 15px;
    line-height: 1.65;
    color: #334155;
    margin: 0;
    font-weight: 400;
}

/* АНИМАЦИЯ ПОЯВЛЕНИЯ */
.akppsmart69-fade-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.akppsmart69-fade-item.akppsmart69-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==================== */
/* АДАПТИВНОСТЬ         */
/* ==================== */

/* ПЛАНШЕТЫ */
@media (max-width: 992px) {
    .akppsmart69-section {
        padding: 50px 20px;
    }
    
    .akppsmart69-heading {
        font-size: 30px;
    }
    
    .akppsmart69-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 22px;
        margin-top: 40px;
    }
    
    .akppsmart69-card {
        padding: 28px 20px 25px;
    }
    
    .akppsmart69-icon-wrapper {
        width: 65px;
        height: 65px;
    }
    
    .akppsmart69-icon {
        font-size: 28px;
    }
    
    .akppsmart69-card-title {
        font-size: 17px;
    }
    
    .akppsmart69-card-text {
        font-size: 14px;
    }
}

/* ТЕЛЕФОНЫ */
@media (max-width: 768px) {
    .akppsmart69-section {
        padding: 40px 15px;
    }
    
    .akppsmart69-heading {
        font-size: 26px;
        letter-spacing: 1px;
    }
    
    .akppsmart69-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 18px;
        margin-top: 35px;
    }
}

/* МАЛЕНЬКИЕ ТЕЛЕФОНЫ */
@media (max-width: 480px) {
    .akppsmart69-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .akppsmart69-heading {
        font-size: 22px;
    }
    
    .akppsmart69-card {
        padding: 25px 18px 22px;
    }
    
    .akppsmart69-icon-wrapper {
        width: 60px;
        height: 60px;
        border-radius: 15px;
        margin-bottom: 16px;
    }
    
    .akppsmart69-icon {
        font-size: 26px;
    }
    
    .akppsmart69-card-title {
        font-size: 16px;
    }
    
    .akppsmart69-card-text {
        font-size: 13px;
        line-height: 1.55;
    }
}