/* ===== Corporate Professional Theme ===== */
:root {
    /* Light blue palette */
    --bg-primary: #1a2744;
    --bg-secondary: #243352;
    --bg-tertiary: #2e4060;
    --bg-card: #243352;
    --bg-card-hover: #2e4060;
    --bg-dark: #142035;
    
    /* Education teal accent */
    --accent: #0891b2;
    --accent-light: #06b6d4;
    --accent-dark: #0e7490;
    --accent-muted: rgba(8, 145, 178, 0.18);
    
    /* Success/CTA green */
    --accent-success: #10b981;
    --accent-success-dark: #059669;
    
    /* Text - brighter */
    --text-primary: #ffffff;
    --text-secondary: #a8b5c8;
    --text-muted: #7a8ba3;
    
    /* Borders - lighter */
    --border-color: #3d4f68;
    --border-light: #526380;
    
    /* Glass effect - lighter */
    --glass-bg: rgba(30, 42, 61, 0.85);
    --glass-border: rgba(61, 79, 104, 0.6);
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Sizing */
    --container-max: 1200px;
    --section-gap: 100px;
    --radius: 8px;
    --radius-lg: 12px;
    
    /* Transitions */
    --transition: 0.25s ease;
}

/* ===== Base ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
}

/* Глобальная прозрачность секций на внутренних страницах */
body:not(.home) .edu-why,
body:not(.home) .edu-schedule,
body:not(.home) .edu-apply,
body:not(.home) .legacy-section,
body:not(.home) .features-section {
    background: rgba(15, 23, 42, 0.4) !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-secondary);
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

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

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ===== Layout ===== */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== Background ===== */
.bg-animation {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--bg-primary);
}

/* Digital Learning Pattern - Binary & Data Analysis */
.grid-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23334155' stroke-width='0.5'%3E%3Crect x='10' y='10' width='40' height='50' rx='3'/%3E%3Cline x1='15' y1='20' x2='45' y2='20'/%3E%3Cline x1='15' y1='28' x2='40' y2='28'/%3E%3Cline x1='15' y1='36' x2='35' y2='36'/%3E%3Cline x1='15' y1='44' x2='42' y2='44'/%3E%3Ccircle cx='85' cy='35' r='20'/%3E%3Cpath d='M75 35 L85 25 L95 35 L85 45 Z'/%3E%3Ctext x='60' y='90' font-size='8' fill='%23334155' opacity='0.5'%3E01001%3C/text%3E%3Ctext x='85' y='100' font-size='8' fill='%23334155' opacity='0.5'%3E10110%3C/text%3E%3Ctext x='15' y='75' font-size='8' fill='%23334155' opacity='0.5'%3E11010%3C/text%3E%3C/g%3E%3C/svg%3E");
    background-size: 120px 120px;
    mask-image: 
        radial-gradient(ellipse at 20% 20%, black 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, black 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.3) 0%, transparent 70%);
    mask-composite: add;
    -webkit-mask-composite: source-over;
}

/* Gradient overlay */
.bg-animation::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at top right, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(37, 99, 235, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

/* Accent lines */
.bg-animation::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(37, 99, 235, 0.15) 20%, 
        rgba(37, 99, 235, 0.15) 80%, 
        transparent 100%);
}

.glow-orb,
.glow-orb-1,
.glow-orb-2,
.glow-orb-3 {
    display: none;
}

/* ===== Parallax Layers ===== */
.parallax-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    will-change: transform;
}

/* Слой 1 - Сетка точек (медленный) */
.parallax-layer-1 {
    background-image: radial-gradient(circle, rgba(6, 182, 212, 0.15) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.6;
}

/* Слой 2 - Диагональные линии (средний) */
.parallax-layer-2 {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 100px,
        rgba(6, 182, 212, 0.03) 100px,
        rgba(6, 182, 212, 0.03) 101px
    );
}

/* Слой 3 - Сертификаты/Дипломы (быстрый) */
.parallax-layer-3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='100' viewBox='0 0 80 100'%3E%3Crect x='10' y='10' width='60' height='80' rx='2' fill='none' stroke='%2306b6d4' stroke-width='0.3' opacity='0.3'/%3E%3Ccircle cx='40' cy='75' r='8' fill='none' stroke='%2306b6d4' stroke-width='0.3' opacity='0.4'/%3E%3Cpath d='M36 75 L40 79 L48 71' fill='none' stroke='%2306b6d4' stroke-width='0.4' opacity='0.5'/%3E%3Cline x1='20' y1='25' x2='60' y2='25' stroke='%2306b6d4' stroke-width='0.2' opacity='0.3'/%3E%3Cline x1='20' y1='35' x2='55' y2='35' stroke='%2306b6d4' stroke-width='0.2' opacity='0.3'/%3E%3Cline x1='20' y1='45' x2='50' y2='45' stroke='%2306b6d4' stroke-width='0.2' opacity='0.3'/%3E%3C/svg%3E");
    background-size: 80px 100px;
    opacity: 0.3;
}

/* ===== Floating Code Fragments ===== */
.data-packets-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.code-fragment {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgba(148, 163, 184, 0.5);
    text-shadow: 0 0 8px rgba(148, 163, 184, 0.3);
    animation: floatCode linear infinite;
    white-space: nowrap;
}

.code-fragment:nth-child(odd) {
    font-size: 12px;
    color: rgba(148, 163, 184, 0.45);
}

.code-fragment:nth-child(3n) {
    font-size: 15px;
    color: rgba(148, 163, 184, 0.4);
}

.code-fragment:nth-child(5n) {
    font-size: 11px;
    letter-spacing: 2px;
    color: rgba(148, 163, 184, 0.55);
}

@keyframes floatCode {
    0% {
        transform: translateY(105vh);
        opacity: 0;
    }
    5% {
        opacity: 0.7;
    }
    50% {
        opacity: 0.5;
    }
    95% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(-5vh);
        opacity: 0;
    }
}

/* ===== Grid Pulse Effect ===== */
.grid-pulse {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    background: radial-gradient(circle at var(--pulse-x, 50%) var(--pulse-y, 50%), 
        rgba(6, 182, 212, 0.15) 0%, 
        transparent 50%);
    animation: gridPulseAnim 4s ease-out infinite;
}

@keyframes gridPulseAnim {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(2.5); }
}

/* ===== Terminal Typing Effect ===== */
.typing-text {
    overflow: hidden;
    white-space: nowrap;
}

.typing-cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background: var(--accent);
    margin-left: 4px;
    animation: cursorBlink 0.8s infinite;
    vertical-align: text-bottom;
}

@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ===== Magnetic Buttons ===== */
.btn-magnetic {
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== Info Slider ===== */
.info-slider {
    position: relative;
    height: 60px;
    margin-bottom: 24px;
    /* overflow: hidden; */
}

.info-slide {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.08));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    padding: 14px 20px;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    box-shadow: 0 0 0 rgba(16, 185, 129, 0);
}

.info-slide.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2), 0 0 40px rgba(16, 185, 129, 0.1);
    animation: slideGlow 2s ease-in-out infinite;
}

.info-slide.exit {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
}

@keyframes slideGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.2), 0 0 40px rgba(16, 185, 129, 0.1);
        border-color: rgba(16, 185, 129, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(16, 185, 129, 0.35), 0 0 60px rgba(16, 185, 129, 0.15);
        border-color: rgba(16, 185, 129, 0.5);
    }
}

.info-slide i {
    font-size: 20px;
    color: #10b981;
    animation: iconPulse 2s ease-in-out infinite;
}

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

.info-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.info-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    animation: badgePulse 2s ease-in-out infinite 0.5s;
}

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

.info-badge.green {
    color: #10b981;
    background: rgba(16, 185, 129, 0.2);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.info-badge.blue {
    color: #10b981;
    background: rgba(16, 185, 129, 0.2);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.typing-text {
    color: rgba(255, 255, 255, 0.9);
    min-width: 200px;
}

/* Mobile: terminal-line */
@media (max-width: 768px) {
    .terminal-line {
        max-width: 100%;
    }
    
    .typing-text {
        min-width: auto;
    }
}

/* ===== Preloader ===== */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

.preloader-inner {
    text-align: center;
}

.preloader-logo {
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
    animation: preloaderPulse 2s ease-in-out infinite;
}

.preloader-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.preloader-text {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
    background: linear-gradient(90deg, #ffffff, #3b82f6, #ffffff, #2563eb);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
}

.preloader-text span {
    background: linear-gradient(90deg, #3b82f6, #60a5fa, #3b82f6);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite reverse;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.preloader-bar {
    width: 200px;
    height: 3px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 auto;
}

.preloader-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    animation: preloaderBar 1.5s ease-in-out infinite;
}

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

@keyframes preloaderDraw {
    0% { stroke-dashoffset: 200; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -200; }
}

@keyframes preloaderScale {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

@keyframes preloaderBar {
    0% { width: 0%; margin-left: 0; }
    50% { width: 100%; margin-left: 0; }
    100% { width: 0%; margin-left: 100%; }
}

/* ===== Back to Top ===== */
.back-to-top {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 48px;
    height: 48px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
}

/* ===== Sticky CTA ===== */
.sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 16px 24px;
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sticky-cta.visible {
    transform: translateY(0);
}

.sticky-cta-content {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.sticky-cta-text {
    font-size: 15px;
    color: var(--text-secondary);
}

.btn-sm {
    padding: 10px 20px;
    font-size: 13px;
}

/* ===== Gradient Border Animation ===== */
.gradient-border {
    position: relative;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa, #3b82f6, #2563eb);
    background-size: 300% 100%;
    border-radius: inherit;
    z-index: -1;
    animation: gradientMove 4s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gradient-border:hover::before {
    opacity: 1;
}

.gradient-border::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg-card);
    border-radius: inherit;
    z-index: -1;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* ===== Live Counter ===== */
.live-counter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.live-counter::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* ===== Decorative Elements ===== */
.section-line {
    width: 60px;
    height: 3px;
    background: var(--accent);
    margin-bottom: 16px;
}

.section-line-center {
    margin-left: auto;
    margin-right: auto;
}

/* Diagonal divider */
.diagonal-divider {
    position: relative;
    height: 80px;
    margin-top: -80px;
    overflow: hidden;
}

.diagonal-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-secondary);
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* Corner accent */
.corner-accent {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid var(--border-color);
    pointer-events: none;
}

.corner-accent-tl {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
}

.corner-accent-br {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
}

/* Dashed line */
.dashed-line {
    border-top: 1px dashed var(--border-color);
    margin: 40px 0;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius);
    transition: all var(--transition);
}

.btn-lg {
    padding: 16px 32px;
    font-size: 15px;
}

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

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

.btn-glass {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-glass:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

.btn-white {
    background: #fff;
    color: var(--bg-primary);
}

.btn-white:hover {
    background: #f1f5f9;
}

.btn-glass-dark {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-glass-dark:hover {
    background: rgba(255, 255, 255, 0.15);
}

.btn-outline {
    background: #fff;
    color: var(--accent);
    border: 2px solid var(--accent);
}

.btn-outline:hover {
    background: var(--accent);
    color: #fff;
}

/* ===== Header ===== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    backdrop-filter: blur(16px);
    border-bottom: 2px solid var(--accent);
    box-shadow: 
        0 4px 30px rgba(0, 0, 0, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
}

.header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.3), transparent);
    pointer-events: none;
}

.header .container {
    max-width: 1800px;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 24px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.logo-icon {
    width: 40px;
    height: 40px;
}

.logo-icon svg,
.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-text {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.logo-text span {
    color: var(--accent);
}

.nav {
    display: flex;
    gap: 4px;
}

.nav-link {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius);
    transition: all var(--transition);
}

.nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.nav-link.active {
    color: var(--accent-light);
    background: var(--accent-muted);
}

/* WordPress Navigation Menu - стандартная ul/li структура */
.nav ul,
.nav .nav-list,
.nav .menu {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav ul li,
.nav .nav-list li,
.nav .menu li {
    margin: 0;
    padding: 0;
}

.nav ul li a,
.nav .nav-list li a,
.nav .menu li a {
    display: block;
    padding: 8px 12px;
    font-size: 14px;
    white-space: nowrap;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius);
    transition: all var(--transition);
}

.nav ul li a:hover,
.nav .nav-list li a:hover,
.nav .menu li a:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

/* WordPress active menu item classes */
.nav ul li.current-menu-item > a,
.nav ul li.current-menu-parent > a,
.nav ul li.current-page-ancestor > a,
.nav ul li.current_page_item > a,
.nav ul li.current_page_parent > a,
.nav .nav-list li.current-menu-item > a,
.nav .nav-list li.current_page_item > a,
.nav .menu li.current-menu-item > a,
.nav .menu li.current_page_item > a {
    color: var(--text-primary);
    background: var(--accent);
}

/* Long nav item: "Сведения об образовательной организации" */
.nav .menu-sveden > a {
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: -0.01em;
    padding: 8px 10px;
    opacity: 0.85;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.header-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.header-phone i {
    color: var(--accent);
}

.header-actions .btn {
    padding: 8px 16px;
    font-size: 14px;
    white-space: nowrap;
}

.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    cursor: pointer;
    z-index: 1001;
}

.mobile-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    transition: all 0.3s ease;
}

.mobile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Sidebar */
.mobile-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
}

.mobile-sidebar.active {
    visibility: visible;
    pointer-events: auto;
}

.mobile-sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
}

.mobile-sidebar.active .mobile-sidebar-overlay {
    opacity: 1;
}

.mobile-sidebar-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    max-width: 85%;
    height: 100%;
    background: var(--bg-secondary);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.3);
}

.mobile-sidebar.active .mobile-sidebar-content {
    transform: translateX(0);
}

.mobile-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.mobile-sidebar-header .logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-sidebar-header .logo-img {
    height: 32px;
    width: auto;
}

.mobile-sidebar-header .logo-text {
    font-size: 18px;
}

.mobile-sidebar-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-sidebar-close:hover {
    background: var(--accent);
}

.mobile-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 20px 0;
}

.mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu-list li {
    margin: 0;
}

.mobile-menu-list li a {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.mobile-menu-list li a:hover,
.mobile-menu-list li.current-menu-item a,
.mobile-menu-list li.current_page_item a {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-left-color: var(--accent);
}

.mobile-menu-list li.current-menu-item a,
.mobile-menu-list li.current_page_item a {
    color: var(--accent);
}

.mobile-sidebar-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.mobile-phone:hover {
    background: var(--accent);
}

.mobile-phone i {
    color: var(--accent);
}

.mobile-phone:hover i {
    color: var(--text-primary);
}

body.mobile-menu-open {
    overflow: hidden;
}

/* ===== Hero ===== */
.hero {
    padding: 160px 0 100px;
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--accent-muted);
    border: 1px solid rgba(37, 99, 235, 0.3);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-light);
    margin-bottom: 24px;
}

.badge-dot {
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
}

.hero-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 20px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.hero-title .gradient-text {
    display: block;
    white-space: nowrap;
}

.gradient-text {
    color: var(--accent-light);
}

.hero-desc {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 480px;
}

.hero-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 48px;
}

.hero-stats {
    display: flex;
    gap: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
    position: relative;
}

.hero-stats::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 80px;
    height: 3px;
    background: var(--accent);
}

.stat-item {
    text-align: left;
}

.stat-value {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-label {
    font-size: 14px;
    color: var(--text-muted);
}

.stat-divider {
    width: 1px;
    background: var(--border-color);
}

/* Hero Visual */
.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

/* Hero Image Wrapper */
.hero-image-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 560px;
}

/* Hero Wires */
.hero-wires {
    position: absolute;
    top: 0;
    right: -150px;
    width: 200px;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.hero-wires svg {
    width: 100%;
    height: 100%;
}

.hero-wires .wire {
    fill: none;
    stroke: url(#wireGrad);
    stroke-width: 2;
    stroke-linecap: round;
    filter: url(#wireGlow);
    stroke-dasharray: 8 4;
    animation: wirePulse 2s linear infinite;
}

.hero-wires .wire:nth-child(2) { animation-delay: 0.3s; }
.hero-wires .wire:nth-child(3) { animation-delay: 0.6s; }

@keyframes wirePulse {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -24; }
}

@media (max-width: 1200px) {
    .hero-wires { display: none; }
}

.hero-image {
    width: 100%;
    max-width: 520px;
    height: auto;
    min-height: 360px;
    border-radius: var(--radius-lg);
    box-shadow: 
        0 15px 60px rgba(0, 0, 0, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    object-fit: cover;
    padding: 15px;
    background: linear-gradient(180deg, #0f172a 0%, #1e3a5f 50%, #3b82f6 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: content-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-image-placeholder {
    width: 100%;
    max-width: 560px;
    height: 400px;
    border-radius: var(--radius-lg);
    border: 2px dashed var(--border-color);
    background: var(--bg-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
}

.hero-image-placeholder .placeholder-text {
    font-size: 14px;
    opacity: 0.7;
}

.hero-image-placeholder .placeholder-size {
    font-size: 18px;
    font-weight: 600;
}

.hero-image-placeholder .placeholder-icon {
    width: 48px;
    height: 48px;
    opacity: 0.5;
    margin-top: 8px;
}

/* ===== Clients ===== */
.clients-section {
    position: relative;
    padding: 32px 0;
    background: rgba(15, 23, 42, 0.6);
    border-top: 1px solid rgba(6, 182, 212, 0.3);
    border-bottom: 1px solid rgba(6, 182, 212, 0.3);
    overflow: hidden;
}

/* Laser burn effect (left) & Creation effect (right) */
.clients-wrapper {
    position: relative;
    overflow: hidden;
}

.clients-wrapper::before,
.clients-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    z-index: 10;
    pointer-events: none;
}

/* Left - Laser burn line */
.clients-wrapper::before {
    left: 0;
    background: #3b82f6;
    box-shadow: 
        0 0 10px 2px rgba(6, 182, 212, 0.9),
        10px 0 30px 5px rgba(6, 182, 212, 0.6),
        20px 0 50px 10px rgba(6, 182, 212, 0.3);
    animation: laserLine 1.5s ease-in-out infinite;
}

/* Right - Creation line */
.clients-wrapper::after {
    right: 0;
    background: #60a5fa;
    box-shadow: 
        0 0 10px 2px rgba(96, 165, 250, 0.9),
        -10px 0 30px 5px rgba(96, 165, 250, 0.6),
        -20px 0 50px 10px rgba(96, 165, 250, 0.3);
    animation: createLine 1.5s ease-in-out infinite 0.75s;
}

@keyframes laserLine {
    0%, 100% { 
        opacity: 0.8;
        box-shadow: 
            0 0 10px 2px rgba(6, 182, 212, 0.9),
            10px 0 30px 5px rgba(6, 182, 212, 0.6),
            20px 0 50px 10px rgba(6, 182, 212, 0.3);
    }
    50% { 
        opacity: 1;
        box-shadow: 
            0 0 15px 4px rgba(6, 182, 212, 1),
            15px 0 40px 8px rgba(6, 182, 212, 0.8),
            30px 0 70px 15px rgba(6, 182, 212, 0.4);
    }
}

@keyframes createLine {
    0%, 100% { 
        opacity: 0.8;
        box-shadow: 
            0 0 10px 2px rgba(96, 165, 250, 0.9),
            -10px 0 30px 5px rgba(96, 165, 250, 0.6),
            -20px 0 50px 10px rgba(96, 165, 250, 0.3);
    }
    50% { 
        opacity: 1;
        box-shadow: 
            0 0 15px 4px rgba(147, 197, 253, 1),
            -15px 0 40px 8px rgba(96, 165, 250, 0.8),
            -30px 0 70px 15px rgba(96, 165, 250, 0.4);
    }
}

.clients-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.clients-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.clients-header {
    text-align: center;
    margin-bottom: 24px;
}

.clients-header span {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
}

.clients-header span::before,
.clients-header span::after {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--accent);
}

.clients-track {
    display: flex;
    width: fit-content;
    animation: scroll-left 40s linear infinite;
}

.clients-track:hover {
    animation-play-state: paused;
}

.clients-slide {
    display: flex;
    flex-shrink: 0;
    gap: 24px;
    padding-right: 24px;
}

.client-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 14px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    transition: all var(--transition);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.client-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: var(--accent);
    transition: transform var(--transition);
}

.client-logo:hover {
    border-color: var(--accent);
    background: rgba(37, 99, 235, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.2);
}

.client-logo:hover .client-icon {
    transform: scale(1.1);
}

@keyframes scroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(-25%); }
}

/* ===== Sections ===== */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: 12px;
}

.section-label::before {
    content: '';
    width: 40px;
    height: 2px;
    background: var(--accent);
}

.section-title {
    font-size: 36px;
    font-weight: 700;
    position: relative;
}

.section-header {
    margin-bottom: 48px;
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

/* ===== Directions ===== */
.directions-section {
    position: relative;
    padding: var(--section-gap) 0;
}

.directions-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
}

.directions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.direction-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition);
}

.direction-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: var(--accent);
    transition: height 0.4s ease;
    z-index: 1;
}

.direction-card:hover::before {
    height: 100%;
}

.direction-card::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    opacity: 0.5;
    transition: all var(--transition);
}

.direction-card:hover::after {
    width: 80px;
    height: 80px;
    border-color: var(--accent);
    opacity: 0.3;
}

.direction-card:hover {
    border-color: var(--border-light);
    transform: translateY(-4px);
}

.direction-image {
    position: relative;
    height: 220px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.direction-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.direction-card:hover .direction-image img {
    transform: scale(1.05);
}

.direction-content {
    padding: 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.direction-number {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.direction-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.direction-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 16px;
    flex: 1;
}

.direction-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.direction-tags span {
    padding: 5px 12px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.direction-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--accent);
    transition: all var(--transition);
}

.direction-card:hover .direction-arrow {
    gap: 12px;
}

/* ===== Features ===== */
.features-section {
    position: relative;
    padding: var(--section-gap) 0;
    background: var(--bg-secondary);
    clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0 100%);
    margin: 40px 0;
}

.features-section::before {
    content: '';
    position: absolute;
    bottom: 60px;
    right: 0;
    width: 40%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-light));
}

.features-section::after {
    content: '';
    position: absolute;
    top: 100px;
    left: 0;
    width: 30%;
    height: 1px;
    background: linear-gradient(90deg, var(--border-light), transparent);
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.features-desc {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 20px 0 32px;
}

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

.feature-item {
    display: flex;
    gap: 14px;
}

.feature-icon {
    width: 28px;
    height: 28px;
    background: var(--accent);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    color: #fff;
}

.feature-text h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
}

.feature-text p {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Features Visual */
.features-visual {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 24px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    width: 253px;
    margin-left: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    animation: slideInRight 0.6s ease backwards;
}

.feature-card:nth-child(1) { animation-delay: 0.1s; }
.feature-card:nth-child(2) { animation-delay: 0.3s; }
.feature-card:nth-child(3) { animation-delay: 0.5s; }

.feature-card:hover {
    transform: translateX(-10px);
    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.2);
    border-color: var(--accent);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.feature-card-icon {
    width: 56px;
    height: 56px;
    background: transparent;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.feature-card-icon i {
    font-size: 36px;
    color: var(--accent);
}

.feature-card-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
}

.feature-card-label {
    font-size: 13px;
    color: var(--text-muted);
}


/* ===== News ===== */
.news-section {
    position: relative;
    padding: var(--section-gap) 0;
}

.news-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--border-color), transparent);
}

.news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.news-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition);
}

.news-card:hover {
    border-color: var(--border-light);
}

.news-card-featured {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
}

.news-image {
    height: 160px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover .news-image img {
    transform: scale(1.05);
}

.news-card-featured .news-image {
    flex: 1;
    min-height: 240px;
}

.news-content {
    padding: 20px;
}

.news-card-featured .news-content {
    padding: 28px;
}

.news-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.news-date {
    font-size: 13px;
    color: var(--text-muted);
}

.news-category {
    font-size: 12px;
    padding: 3px 8px;
    background: var(--accent-muted);
    color: var(--accent);
    border-radius: 4px;
}

.news-content h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 10px;
}

.news-card-featured .news-content h3 {
    font-size: 20px;
}

.news-content h3 a:hover {
    color: var(--accent-light);
}

.news-content p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

.news-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--accent);
}

.news-link:hover {
    gap: 10px;
}

/* ===== CTA ===== */
.cta-section {
    padding: var(--section-gap) 0;
}

.cta-card {
    position: relative;
    padding: 64px;
    background: var(--accent);
    border-radius: var(--radius-lg);
    text-align: center;
    overflow: hidden;
}

.cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
    pointer-events: none;
}

.cta-card::after {
    display: none;
}

/* CTA Visual Element */
.cta-visual {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    width: 140px;
    height: 140px;
}

.cta-icon-ring {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(6, 182, 212, 0.5);
    border-radius: 50%;
    animation: ctaRingPulse 3s ease-in-out infinite;
}

.cta-icon-ring::before {
    content: '';
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 50%;
    animation: ctaRingRotate 20s linear infinite;
}

.cta-icon-ring::after {
    content: '';
    position: absolute;
    inset: -20px;
    border: 1px dashed rgba(6, 182, 212, 0.15);
    border-radius: 50%;
    animation: ctaRingRotate 30s linear infinite reverse;
}

.cta-icon-ring-inner {
    position: absolute;
    inset: 15px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    animation: ctaInnerPulse 2s ease-in-out infinite;
}

.cta-icon {
    width: 64px;
    height: 64px;
    color: #3b82f6;
    filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.5));
    will-change: transform;
}

.cta-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #3b82f6;
    border-radius: 50%;
    animation: ctaParticle 3s ease-in-out infinite;
}

.cta-particles span:nth-child(1) { top: 10%; left: 50%; animation-delay: 0s; }
.cta-particles span:nth-child(2) { top: 50%; right: 5%; animation-delay: 0.75s; }
.cta-particles span:nth-child(3) { bottom: 10%; left: 50%; animation-delay: 1.5s; }
.cta-particles span:nth-child(4) { top: 50%; left: 5%; animation-delay: 2.25s; }

@keyframes ctaRingPulse {
    0%, 100% { border-color: rgba(6, 182, 212, 0.5); transform: scale(1); }
    50% { border-color: rgba(6, 182, 212, 0.8); transform: scale(1.02); }
}

@keyframes ctaRingRotate {
    to { transform: rotate(360deg); }
}

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

@keyframes ctaIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

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

@media (max-width: 768px) {
    .cta-visual { display: none; }
}

.cta-content h2 {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.cta-content p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 32px;
}

.cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* ===== Footer ===== */
.footer {
    background: rgba(15, 23, 42, 0.8);
    border-top: 1px solid rgba(6, 182, 212, 0.2);
    padding: 64px 0 0;
    position: relative;
}

.footer-main {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 64px;
    padding-bottom: 48px;
}

.footer-brand .logo {
    margin-bottom: 16px;
}

.footer-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 260px;
}

.footer-social {
    display: flex;
    gap: 10px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-secondary);
    transition: all var(--transition);
}

.footer-social a:hover {
    background: var(--accent);
    color: #fff;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.footer-col h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a,
.footer-contacts li {
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color var(--transition);
}

.footer-col ul li a:hover {
    color: var(--accent-light);
}

.footer-contacts i {
    color: var(--accent);
    font-size: 14px;
    width: 16px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
    gap: 16px;
}

.footer-legal p {
    font-size: 13px;
    color: var(--text-muted);
}

.footer-bottom-links {
    display: flex;
    gap: 24px;
}

.footer-bottom-links a {
    font-size: 13px;
    color: var(--text-muted);
}

.footer-bottom-links a:hover {
    color: var(--accent);
}

/* ===== Chat FAB ===== */
.chat-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
    z-index: 999;
    transition: all var(--transition);
}

.chat-fab:hover {
    background: var(--accent-dark);
    transform: scale(1.05);
}

.chat-pulse {
    display: none;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .hero .container {
        grid-template-columns: 1fr;
    }
    
    .hero-visual {
        display: none;
    }
    
    .hero-title {
        font-size: 40px;
    }
    
    .directions-grid {
        grid-template-columns: 1fr;
    }
    
    .features-section .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .features-grid {
        display: block;
    }
    
    .features-content {
        width: 100%;
        max-width: 100%;
    }
    
    .features-list {
        width: 100%;
    }
    
    .feature-item {
        width: 100%;
    }
    
    .features-visual {
        display: none;
    }
    
    .news-grid {
        grid-template-columns: 1fr;
    }
    
    .news-card-featured {
        grid-row: auto;
    }
    
    .footer-main {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .nav,
    .header-actions {
        display: none;
    }
    
    .mobile-toggle {
        display: flex;
    }
    
    .hero {
        padding: 120px 0 60px;
    }
    
    .hero-title {
        font-size: 32px;
    }
    
    .hero-title .gradient-text {
        white-space: normal;
    }
    
    .hero-buttons {
        flex-direction: column;
    }
    
    .hero-stats {
        flex-wrap: wrap;
        gap: 24px;
    }
    
    .stat-divider {
        display: none;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    :root {
        --section-gap: 64px;
    }
    
    .cta-card {
        padding: 40px 24px;
    }
    
    .cta-content h2 {
        font-size: 24px;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .footer-links {
        grid-template-columns: 1fr 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-bottom-links {
        flex-direction: column;
        gap: 8px;
    }
}

/* ===== Page Styles ===== */

/* Page Hero */
.page-hero {
    padding: 160px 0 80px;
    background: transparent;
    position: relative;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 80% 60% at 20% 30%, rgba(6, 182, 212, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 85% 70%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.page-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.3), transparent);
}

.page-hero-content {
    max-width: 700px;
    position: relative;
    z-index: 1;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.breadcrumbs a {
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.breadcrumbs a:hover {
    color: var(--accent);
}

.breadcrumbs i {
    font-size: 10px;
    opacity: 0.5;
}

.page-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 16px;
}

.page-desc {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Contact Page */
.contact-page {
    padding: 40px 0 80px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: start;
}

/* Contact Cards */
.contact-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
}

.contact-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
}

.contact-card-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.contact-card-icon i {
    font-size: 20px;
    color: white;
}

.contact-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.contact-card p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.contact-card-value {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--accent-light);
    margin-bottom: 4px;
}

a.contact-card-value:hover {
    color: var(--accent);
}

.contact-card-note {
    font-size: 12px;
    color: var(--text-muted);
}

/* Кликабельные карточки контактов */
a.contact-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.contact-card-link:hover {
    color: inherit;
}

a.contact-card-link .contact-card-value {
    color: var(--accent-light);
}

/* Contact Form Section */
.contact-form-section {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 40px;
}

.contact-form-header {
    margin-bottom: 32px;
}

.contact-form-header h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.contact-form-header p {
    color: var(--text-secondary);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 15px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.form-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}

.form-checkbox label {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    cursor: pointer;
}

.form-checkbox label a {
    color: var(--accent);
}

.form-checkbox label a:hover {
    text-decoration: underline;
}

/* Checkbox Label Style */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--accent);
}

.checkbox-label span {
    line-height: 1.4;
}

.form-actions {
    margin-top: 8px;
}

/* Map Section */
.map-section {
    padding: 60px 0 0;
}

.map-wrapper {
    margin-top: 40px;
    position: relative;
}

.map-container {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 450px;
    box-shadow: 
        0 0 0 1px var(--glass-border),
        0 0 60px rgba(6, 182, 212, 0.15),
        0 20px 60px rgba(0, 0, 0, 0.4);
    background: 
        radial-gradient(circle at 60% 40%, rgba(6, 182, 212, 0.3) 0%, transparent 50%),
        linear-gradient(rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95)),
        repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(6, 182, 212, 0.03) 40px, rgba(6, 182, 212, 0.03) 41px),
        repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(6, 182, 212, 0.03) 40px, rgba(6, 182, 212, 0.03) 41px);
    background-color: #0f172a;
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Градиентная накладка сверху и снизу */
.map-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        rgba(15, 23, 42, 0.4) 0%, 
        transparent 15%, 
        transparent 85%, 
        rgba(15, 23, 42, 0.6) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: 16px;
}

/* Рамка вокруг карты */
.map-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    pointer-events: none;
    z-index: 2;
}

/* Информационная карточка на карте */
.map-info {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 10;
}

.map-info-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
    border: 1px solid rgba(6, 182, 212, 0.4);
    border-radius: 16px;
    padding: 20px 24px;
    backdrop-filter: blur(20px);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(6, 182, 212, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.map-info-card:hover {
    border-color: rgba(6, 182, 212, 0.6);
    transform: translateY(-2px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(6, 182, 212, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.map-info-card i {
    font-size: 28px;
    color: #3b82f6;
    text-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

.map-info-card strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
}

.map-info-card span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

/* Mobile: map-info внизу карты на всю ширину, выступает вниз */
@media (max-width: 768px) {
    .map-container {
        height: 300px;
        margin-bottom: 80px;
    }
    
    .map-info {
        position: absolute;
        bottom: -70px;
        left: 0;
        right: 0;
    }
    
    .map-info-card {
        width: 100%;
        padding: 16px 20px;
        border-radius: 0 0 16px 16px;
    }
}

/* FAQ Section */
.faq-section {
    padding: 80px 0;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--accent);
}

.faq-item.active {
    border-color: var(--accent);
    background: var(--glass-bg);
}

.faq-question {
    width: 100%;
    padding: 20px 24px;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
}

.faq-question span {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}

.faq-question i {
    color: var(--accent);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 200px;
}

.faq-answer p {
    padding: 0 24px 20px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .page-title {
        font-size: 32px;
    }
    
    .contact-cards {
        grid-template-columns: 1fr;
    }
    
    .contact-form-section {
        padding: 24px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ===== Secure Badge ===== */
.secure-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.secure-icon {
    position: relative;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.secure-icon i {
    font-size: 20px;
    color: white;
}

.secure-pulse {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: rgba(34, 197, 94, 0.4);
    animation: securePulse 2s ease-out infinite;
}

@keyframes securePulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.4); opacity: 0; }
}

.secure-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #22c55e;
    margin-bottom: 4px;
}

.secure-desc {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.secure-desc i {
    font-size: 10px;
    color: #22c55e;
}

/* ===== Telegram Section ===== */
.telegram-section {
    padding: 80px 0;
}

.telegram-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 60px;
    align-items: center;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.8));
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 48px 56px;
    position: relative;
    overflow: hidden;
}

.telegram-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 136, 204, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.telegram-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #0088cc, #00aced);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(0, 136, 204, 0.3);
}

.telegram-icon i {
    font-size: 32px;
    color: white;
}

.telegram-content h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
}

.telegram-content p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    max-width: 500px;
}

.telegram-features {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}

.telegram-features span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 14px;
    border-radius: 8px;
}

.telegram-features i {
    color: #0088cc;
}

/* QR Code */
.telegram-qr {
    text-align: center;
}

.qr-wrapper {
    position: relative;
    width: 200px;
    height: 200px;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    margin-bottom: 12px;
}

.qr-glow {
    position: absolute;
    inset: -4px;
    background: linear-gradient(135deg, #0088cc, #00aced, #3b82f6);
    border-radius: 20px;
    z-index: -1;
    opacity: 0.6;
    filter: blur(12px);
    animation: qrGlow 3s ease-in-out infinite alternate;
}

@keyframes qrGlow {
    0% { opacity: 0.4; transform: scale(0.98); }
    100% { opacity: 0.7; transform: scale(1.02); }
}

.qr-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.qr-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #0088cc, #00aced);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.qr-logo i {
    font-size: 24px;
    color: white;
}

.qr-hint {
    font-size: 13px;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .telegram-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 32px 24px;
        gap: 32px;
    }
    
    .telegram-icon {
        margin: 0 auto 20px;
    }
    
    .telegram-content p {
        max-width: 100%;
    }
    
    .telegram-features {
        justify-content: center;
    }
    
    .telegram-content h2 {
        font-size: 24px;
    }
}

/* ===== About Page ===== */

/* About Intro */
.about-intro {
    padding: 60px 0 100px;
    background: transparent;
    position: relative;
}

.about-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.15), transparent);
}

.about-intro-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-intro-content h2 {
    font-size: 36px;
    font-weight: 700;
    margin: 16px 0 24px;
}

.about-lead {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 16px;
}

.about-intro-content p {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 24px;
}

.about-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.about-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--accent-light);
}

.about-badge i {
    color: var(--accent);
}

/* Stats Cards */
.about-intro-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.big-stat {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border-radius: 20px;
    padding: 40px;
    text-align: center;
}

.big-stat-value {
    display: block;
    font-size: 72px;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.big-stat-label {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 8px;
    display: block;
}

.stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.stat-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
}

.stat-card-value {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-card-label {
    font-size: 14px;
    color: var(--text-muted);
}

/* Company Info */
.company-info {
    padding: 0 0 80px;
}

.info-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 32px;
}

.info-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.info-card-header i {
    font-size: 24px;
    color: var(--accent);
}

.info-card-header h3 {
    font-size: 20px;
    font-weight: 600;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

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

.info-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 15px;
    color: var(--text-primary);
}

/* Office Gallery */
.office-gallery {
    padding: 80px 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 20px;
}

.gallery-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
}

.gallery-item-large {
    grid-column: span 2;
    grid-row: span 2;
}

.office-gallery .gallery-item {
    background: linear-gradient(180deg, #0f172a 0%, #1e3a5f 50%, #3b82f6 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 15px 60px rgba(0, 0, 0, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.office-gallery .gallery-item:hover {
    box-shadow: 
        0 20px 70px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(6, 182, 212, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
}

.office-gallery .gallery-image {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
}

.office-gallery .gallery-item-large .gallery-image {
    min-height: 420px;
}

.office-gallery .gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.office-gallery .gallery-item:hover .gallery-image img {
    transform: scale(1.05);
}

/* Lightbox */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 40px;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.lightbox-overlay.active .lightbox-content {
    transform: scale(1);
}

.lightbox-content img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.lightbox-title {
    text-align: center;
    margin-top: 16px;
    color: #fff;
    font-size: 18px;
}

.lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 40px;
    height: 40px;
    background: rgba(6, 182, 212, 0.2);
    border: 1px solid rgba(6, 182, 212, 0.4);
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.lightbox-close:hover {
    background: rgba(6, 182, 212, 0.4);
    transform: rotate(90deg);
}

/* Product Lightbox */
.product-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.product-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.product-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
}

.product-lightbox-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.product-lightbox-content img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.product-lightbox.active .product-lightbox-content img {
    transform: scale(1);
}

.product-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(6, 182, 212, 0.2);
    border: 1px solid rgba(6, 182, 212, 0.4);
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.product-lightbox-close:hover {
    background: rgba(6, 182, 212, 0.4);
    transform: rotate(90deg);
}

.product-lightbox-prev,
.product-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(6, 182, 212, 0.2);
    border: 1px solid rgba(6, 182, 212, 0.4);
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.product-lightbox-prev {
    left: 20px;
}

.product-lightbox-next {
    right: 20px;
}

.product-lightbox-prev:hover,
.product-lightbox-next:hover {
    background: rgba(6, 182, 212, 0.4);
    transform: translateY(-50%) scale(1.1);
}

.product-lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    padding: 8px 20px;
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
    z-index: 10;
}

@media (max-width: 768px) {
    .product-lightbox-content {
        padding: 20px;
    }
    
    .product-lightbox-prev,
    .product-lightbox-next {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .product-lightbox-prev {
        left: 10px;
    }
    
    .product-lightbox-next {
        right: 10px;
    }
    
    .product-lightbox-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

.gallery-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
}

.gallery-item-large .gallery-placeholder {
    min-height: 420px;
}

.gallery-placeholder svg {
    width: 100%;
    height: 100%;
    display: block;
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6, 182, 212, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-overlay i {
    font-size: 24px;
    color: white;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-caption {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    color: white;
}

/* Team Section */
.team-section {
    padding: 80px 0;
    background: transparent;
    position: relative;
}

.team-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.2), transparent);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.team-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
}

.team-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(6, 182, 212, 0.1);
}

.team-photo {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.team-photo svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(6, 182, 212, 0.9) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.team-card:hover .team-overlay {
    opacity: 1;
}

.team-social {
    display: flex;
    gap: 12px;
}

.team-social a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.team-social a:hover {
    background: white;
    color: var(--accent);
    transform: translateY(-3px);
}

.team-info {
    padding: 24px;
    text-align: center;
}

.team-info h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.team-role {
    display: block;
    font-size: 13px;
    color: var(--accent-light);
    font-weight: 500;
    margin-bottom: 12px;
}

.team-info p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Certificates Section */
.certificates-section {
    padding: 80px 0;
}

/* Filter Tabs */
.cert-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 40px;
}

.cert-filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    padding: 10px 20px;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cert-filter-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.cert-filter-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.cert-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.cert-filter-btn:not(.active) .cert-count {
    background: rgba(255, 255, 255, 0.1);
}

/* Gallery Grid */
.certificates-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    min-height: 500px;
    transition: opacity 0.3s ease;
}

/* Pagination */
.cert-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
}

.cert-page-num {
    width: 40px;
    height: 40px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-page-num:hover {
    border-color: var(--accent);
    color: var(--text-primary);
    transform: translateY(-2px);
}

.cert-page-num.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4);
}

.cert-page-num:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.cert-page-num.cert-nav {
    font-size: 14px;
}

.cert-page-info {
    padding: 0 16px;
    font-size: 14px;
    color: var(--text-muted);
}

.cert-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    animation: certFadeIn 0.5s ease forwards;
}

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

.cert-item:nth-child(1) { animation-delay: 0s; }
.cert-item:nth-child(2) { animation-delay: 0.08s; }
.cert-item:nth-child(3) { animation-delay: 0.16s; }
.cert-item:nth-child(4) { animation-delay: 0.24s; }
.cert-item:nth-child(5) { animation-delay: 0.32s; }
.cert-item:nth-child(6) { animation-delay: 0.4s; }
.cert-item:nth-child(7) { animation-delay: 0.48s; }
.cert-item:nth-child(8) { animation-delay: 0.56s; }

.cert-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.cert-item:hover::before {
    transform: scaleX(1);
}

.cert-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.cert-item[data-type="license"]:hover::before { background: #3b82f6; }
.cert-item[data-type="certificate"]:hover::before { background: #a855f7; }
.cert-item[data-type="thanks"]:hover::before { background: #22c55e; }
.cert-item[data-type="award"]:hover::before { background: #fbbf24; }

.cert-doc {
    width: 100%;
    aspect-ratio: 3/4;
    margin-bottom: 12px;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-doc img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cert-item:hover .cert-doc {
    transform: scale(1.05);
}

.cert-doc svg {
    width: 100%;
    height: 100%;
}

.cert-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cert-type {
    font-size: 11px;
    color: var(--text-muted);
}

/* Hidden state for filtering */
.cert-item.hidden {
    display: none;
}

/* Values */
.values-section {
    padding: 80px 0;
    background: rgba(15, 23, 42, 0.4);
    position: relative;
}

.values-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.2), transparent);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.value-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.value-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
}

.value-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.value-icon i {
    font-size: 28px;
    color: white;
}

.value-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.value-card p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Timeline */
.timeline-section {
    padding: 80px 0;
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding-left: 40px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--accent), var(--accent-light));
}

.timeline-item {
    position: relative;
    padding-bottom: 40px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -40px;
    top: 0;
    width: 18px;
    height: 18px;
    background: var(--bg-primary);
    border: 3px solid var(--accent);
    border-radius: 50%;
    z-index: 1;
}

.timeline-marker.active {
    background: var(--accent);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

.timeline-content {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 24px;
}

.timeline-year {
    display: inline-block;
    background: var(--accent);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.timeline-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.timeline-content p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* CTA Section */
.cta-section {
    padding: 80px 0;
}

.cta-card {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(96, 165, 250, 0.05));
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 24px;
    padding: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.cta-content h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.cta-content p {
    color: var(--text-secondary);
}

.cta-buttons {
    display: flex;
    gap: 16px;
}

/* Responsive About */
@media (max-width: 1024px) {
    .about-intro-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery-item-large {
        grid-column: span 2;
        grid-row: span 1;
    }
    
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .certificates-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .about-intro-content h2 {
        font-size: 28px;
    }
    
    .big-stat-value {
        font-size: 48px;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .values-grid {
        grid-template-columns: 1fr;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .gallery-item-large {
        grid-column: span 1;
    }
    
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .team-card {
        border-radius: 12px;
    }
    
    .team-photo {
        height: 120px;
    }
    
    .team-info {
        padding: 12px;
    }
    
    .team-info h3 {
        font-size: 14px;
        margin-bottom: 4px;
    }
    
    .team-role {
        font-size: 11px;
        margin-bottom: 6px;
    }
    
    .team-info p {
        font-size: 11px;
        display: none;
    }
    
    .certificates-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .cert-filter {
        gap: 8px;
    }
    
    .cert-filter-btn {
        padding: 8px 14px;
        font-size: 12px;
    }
    
    .cta-card {
        flex-direction: column;
        text-align: center;
        padding: 32px 24px;
    }
    
    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }
}

/* ===== Education Page ===== */

/* Hero */
.edu-hero {
    padding: 140px 0 80px;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.edu-hero .container {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 60px;
    align-items: center;
}

.edu-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 30px;
    padding: 8px 20px;
    margin-bottom: 24px;
    font-size: 14px;
    color: var(--accent-light);
}

.edu-hero-badge i {
    color: var(--accent);
}

.edu-hero-content h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

.edu-hero-content h1 .typing-text {
    display: inline-block;
    min-width: 280px;
}

.edu-hero-content h1 .typing-text::after {
    content: '|';
    animation: blink 0.7s infinite;
    margin-left: 2px;
    color: var(--accent);
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.edu-hero-content p {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 500px;
    margin-bottom: 32px;
}

.edu-hero-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 32px;
}

.edu-stat {
    text-align: center;
}

.edu-stat-value {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: var(--accent);
}

.edu-stat-label {
    font-size: 14px;
    color: var(--text-muted);
}

.edu-hero-actions {
    display: flex;
    gap: 16px;
}

/* Cert Stack Visual */
.edu-hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.edu-cert-stack {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.edu-cert-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 10px;
    text-align: center;
    animation: floatCert 4s ease-in-out infinite;
    animation-delay: calc(var(--delay) * 0.5s);
}

@keyframes floatCert {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.cert-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 10px;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 14px;
}

.cert-badge.cellebrite { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: white; }
.cert-badge.msab { background: linear-gradient(135deg, #22c55e, #16a34a); color: white; }
.cert-badge.mke { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }
.cert-badge.elcomsoft { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
.cert-badge.magnet { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: white; }

.cert-name {
    font-size: 13px;
    color: var(--text-muted);
}

/* Why Section */
.edu-why {
    padding: 60px 0;
    background: var(--bg-secondary);
}

.edu-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.edu-why-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    transition: all 0.3s ease;
}

.edu-why-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
}

.edu-why-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.edu-why-icon i {
    font-size: 24px;
    color: white;
}

.edu-why-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.edu-why-card p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Programs */
.edu-programs {
    padding: 80px 0;
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    align-items: stretch;
}

.program-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 32px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.program-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.program-card.featured::before {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.program-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.program-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #4ade80;
    margin-bottom: 20px;
}

.program-card.featured .program-badge {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.3);
    color: #60a5fa;
}

.program-badge.secondary {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.program-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
}

.program-icon svg {
    width: 100%;
    height: 100%;
}

.program-card h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
}

.program-price {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 12px;
}

.program-price .price-label {
    font-size: 14px;
    color: var(--text-muted);
}

.program-price .price-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.program-desc {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}

.program-desc p {
    margin-bottom: 12px;
}

.program-desc p:last-child {
    margin-bottom: 0;
}

.program-topics {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    flex: 1;
}

.program-topics h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.program-topics ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.program-topics li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--text-secondary);
    padding: 6px 0;
}

.program-topics li i {
    color: #22c55e;
    margin-top: 3px;
    flex-shrink: 0;
}

.program-card.featured .program-topics li i {
    color: #3b82f6;
}

.program-meta {
    display: flex;
    gap: 24px;
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 24px;
}

.program-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.program-meta .meta-item i {
    color: var(--accent);
}

.program-footer {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.program-footer .btn {
    flex: 1;
    min-width: 140px;
    justify-content: center;
}

/* Schedule */
.edu-schedule {
    padding: 80px 0;
    background: var(--bg-secondary);
}

.schedule-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.schedule-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

.schedule-card:hover {
    border-color: var(--accent);
}

.schedule-date {
    text-align: center;
    background: var(--accent);
    border-radius: 12px;
    padding: 12px 16px;
    min-width: 60px;
}

.schedule-day {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.schedule-month {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
}

.schedule-info {
    flex: 1;
}

.schedule-info h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.schedule-meta {
    display: flex;
    gap: 16px;
}

.schedule-meta span {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.schedule-status {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.schedule-status.available {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.schedule-status.limited {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.schedule-cta {
    text-align: center;
    margin-top: 40px;
}

/* Instructors */
.edu-instructors {
    padding: 80px 0;
}

.instructors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.instructor-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.instructor-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
}

.instructor-photo {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
}

.instructor-photo svg {
    width: 100%;
    height: 100%;
}

.instructor-certs {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
}

.cert-tag {
    background: var(--accent);
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
}

.instructor-card h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.instructor-role {
    font-size: 13px;
    color: var(--accent-light);
    display: block;
    margin-bottom: 10px;
}

.instructor-card p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Apply Section */
.edu-apply {
    padding: 80px 0;
    background: var(--bg-secondary);
}

.edu-apply-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.edu-apply-content h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 16px 0;
}

.edu-apply-content p {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.apply-benefits {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.apply-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-secondary);
}

.apply-benefit i {
    color: #22c55e;
    font-size: 18px;
}

.edu-apply-form {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 32px;
}

.btn-full {
    width: 100%;
}

/* Responsive Education */
@media (max-width: 1024px) {
    .edu-hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .edu-hero-content p {
        max-width: 100%;
    }
    
    .edu-hero-stats {
        justify-content: center;
    }
    
    .edu-hero-actions {
        justify-content: center;
    }
    
    .edu-hero-visual {
        display: none;
    }
    
    .edu-why-grid,
    .instructors-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .programs-grid {
        grid-template-columns: 1fr;
    }
    
    .edu-apply-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .edu-hero {
        padding: 100px 0 40px;
        min-height: auto;
    }
    
    .edu-hero-badge {
        width: 100%;
        justify-content: center;
    }
    
    .edu-hero .container,
    .edu-why .container,
    .edu-programs .container,
    .edu-schedule .container,
    .edu-instructors .container,
    .edu-apply .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .edu-hero-content h1 {
        font-size: 28px;
    }
    
    .edu-hero-content p {
        font-size: 16px;
    }
    
    .edu-hero-stats {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: flex-start;
    }
    
    .edu-hero-actions {
        flex-direction: column;
    }
    
    .edu-hero-actions .btn {
        width: 100%;
    }
    
    .edu-why {
        padding: 40px 0;
    }
    
    .edu-why-grid,
    .instructors-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .edu-why-card {
        padding: 20px;
    }
    
    .edu-programs,
    .edu-schedule,
    .edu-instructors,
    .edu-apply {
        padding: 40px 0;
    }
    
    .program-card {
        padding: 20px;
    }
    
    .program-card h3 {
        font-size: 18px;
    }
    
    .program-meta {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .program-footer {
        flex-direction: column;
    }
    
    .program-footer .btn {
        width: 100%;
    }
    
    .edu-apply-grid {
        gap: 30px;
    }
    
    .edu-apply-content h2 {
        font-size: 24px;
    }
    
    .edu-apply-form {
        padding: 20px;
    }
    
    .apply-benefits {
        gap: 12px;
    }
}

/* ===== Blog Page ===== */

/* Blog Hero */
.blog-hero {
    padding: 140px 0 60px;
    text-align: center;
}

.blog-hero-content {
    max-width: 700px;
    margin: 0 auto;
}

.blog-hero h1 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
}

.blog-hero p {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Blog Layout */
.blog-content {
    padding: 40px 0 80px;
}

.blog-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
}

/* Blog Filter */
.blog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.blog-filter-btn {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.blog-filter-btn:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.blog-filter-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Featured Post */
.blog-featured {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.blog-featured-image {
    position: relative;
    min-height: 320px;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.blog-featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(15, 23, 42, 0.8) 100%);
}

.blog-featured-image .blog-category {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
}

.blog-featured-content {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-featured-content h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
}

.blog-featured-content p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Blog Meta */
.blog-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.blog-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.blog-meta i {
    color: var(--accent);
    font-size: 12px;
}

/* Blog Category Badge */
.blog-category {
    display: inline-block;
    background: var(--accent);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

/* Blog Card */
.blog-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.blog-card-link-wrap {
    display: block;
}

.blog-card-image {
    position: relative;
    height: 180px;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card-image .blog-category {
    position: absolute;
    top: 12px;
    left: 12px;
}

.blog-card-content {
    padding: 20px;
}

.blog-card-content h3 {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-content p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--accent);
    transition: gap 0.3s ease;
}

.blog-card-link:hover {
    gap: 10px;
}

/* Blog Pagination */
.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.pagination-btn {
    width: 40px;
    height: 40px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.pagination-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.catalog-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--glass-border);
}

.pagination-dots {
    color: var(--text-muted);
    padding: 0 8px;
}

/* Sidebar */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 100px;
}

.sidebar-widget {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
}

.sidebar-widget h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

/* Mobile Collapsible Filters */
@media (max-width: 991px) {
    .sidebar-collapsible .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        margin-bottom: 0;
        padding-bottom: 12px;
        transition: all 0.2s ease;
    }
    
    .sidebar-collapsible .sidebar-toggle:hover {
        color: var(--accent);
    }
    
    .sidebar-collapsible .sidebar-toggle i {
        transition: transform 0.3s ease;
    }
    
    .sidebar-collapsible.open .sidebar-toggle i {
        transform: rotate(180deg);
    }
    
    .sidebar-collapsible .sidebar-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .sidebar-collapsible.open .sidebar-content {
        max-height: 500px;
    }
}

@media (min-width: 992px) {
    .sidebar-collapsible .sidebar-toggle i {
        display: none;
    }
}

/* Sidebar Search */
.sidebar-search {
    display: flex;
    gap: 8px;
}

.sidebar-search input {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text-primary);
}

.sidebar-search input::placeholder {
    color: var(--text-muted);
}

.sidebar-search button {
    width: 42px;
    height: 42px;
    background: var(--accent);
    border: none;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    transition: background 0.3s ease;
}

.sidebar-search button:hover {
    background: var(--accent-hover);
}

/* Sidebar Categories */
.sidebar-categories {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-categories li {
    border-bottom: 1px solid var(--border-color);
}

.sidebar-categories li:last-child {
    border-bottom: none;
}

.sidebar-categories a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-size: 14px;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.sidebar-categories a:hover {
    color: var(--accent);
}

.sidebar-categories .count {
    background: rgba(6, 182, 212, 0.15);
    color: var(--accent);
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
}

/* Sidebar Tags */
.sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sidebar-tags .tag {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.sidebar-tags .tag:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Sidebar Newsletter */
.sidebar-newsletter {
    text-align: center;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
}

.newsletter-icon {
    width: 56px;
    height: 56px;
    background: var(--accent);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.newsletter-icon i {
    font-size: 24px;
    color: white;
}

.sidebar-newsletter h4 {
    border: none;
    padding-bottom: 0;
}

.sidebar-newsletter p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.newsletter-form input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.newsletter-form input::placeholder {
    color: var(--text-muted);
}

/* Newsletter Messages */
.newsletter-message {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
    animation: fadeIn 0.3s ease;
}

.newsletter-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.newsletter-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

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

/* Blog Content Images */
.article-body img,
.the-content img,
.entry-content img,
.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 24px 0;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(6, 182, 212, 0.1);
    transition: all 0.3s ease;
}

.article-body img:hover,
.the-content img:hover,
.entry-content img:hover,
.post-content img:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(6, 182, 212, 0.3),
        0 0 30px rgba(6, 182, 212, 0.1);
}

/* Centered images */
.article-body .aligncenter,
.the-content .aligncenter,
.entry-content .aligncenter,
.post-content .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Left/Right aligned images */
.article-body .alignleft,
.the-content .alignleft,
.entry-content .alignleft,
.post-content .alignleft {
    float: left;
    margin: 8px 24px 16px 0;
}

.article-body .alignright,
.the-content .alignright,
.entry-content .alignright,
.post-content .alignright {
    float: right;
    margin: 8px 0 16px 24px;
}

/* Image with caption */
.wp-caption {
    max-width: 100%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 12px;
    margin: 24px 0;
}

.wp-caption img {
    margin: 0 !important;
    border-radius: 8px;
}

.wp-caption-text {
    margin-top: 12px;
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

/* Gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.gallery-item {
    margin: 0;
}

.gallery-item img {
    margin: 0;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* Full width image */
.article-body img.size-full,
.the-content img.size-full,
.entry-content img.size-full,
.post-content img.size-full {
    width: 100%;
}

/* Blog Responsive */
@media (max-width: 1024px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }
    
    .blog-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sidebar-newsletter {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .blog-hero h1 {
        font-size: 32px;
    }
    
    .blog-featured {
        grid-template-columns: 1fr;
    }
    
    .blog-featured-image {
        min-height: 200px;
    }
    
    .blog-featured-overlay {
        background: linear-gradient(0deg, rgba(15, 23, 42, 0.9) 0%, transparent 100%);
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .blog-sidebar {
        grid-template-columns: 1fr;
    }
    
    .sidebar-newsletter {
        grid-column: span 1;
    }
    
    .blog-filter {
        justify-content: center;
    }
}

/* ===== Blog Post Page ===== */

.article-hero {
    padding: 140px 0 40px;
}

.article-hero-content {
    max-width: 800px;
}

.article-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.article-back:hover {
    color: var(--accent);
}

.article-hero .blog-category {
    margin-bottom: 16px;
}

.article-hero h1 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
}

.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.article-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    width: 48px;
    height: 48px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 600;
    color: var(--text-primary);
}

.author-role {
    font-size: 13px;
    color: var(--text-muted);
}

.article-stats {
    display: flex;
    gap: 20px;
}

.article-stats span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-muted);
}

.article-stats i {
    color: var(--accent);
}

/* Article Content */
.article-content {
    padding: 40px 0 80px;
}

.article-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    align-items: start;
}

.article-image {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 32px;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
    min-height: 300px;
}

.article-image img {
    width: 100%;
    height: auto;
    display: block;
}

.article-image.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Article Body */
.article-body {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.article-body h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 40px 0 16px;
}

.article-body h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 32px 0 12px;
}

.article-body p {
    margin-bottom: 20px;
}

.article-body ul, .article-body ol {
    margin: 0 0 24px 24px;
}

.article-body li {
    margin-bottom: 8px;
}

.article-body a {
    color: var(--accent);
    text-decoration: underline;
}

.article-lead {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-primary);
    border-left: 4px solid var(--accent);
    padding-left: 20px;
    margin-bottom: 32px;
}

.article-note {
    display: flex;
    gap: 16px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin: 24px 0;
}

.article-note i {
    color: var(--accent);
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.article-note p {
    margin: 0;
}

.article-code {
    background: #0d1117;
    border-radius: 12px;
    overflow: hidden;
    margin: 24px 0;
}

.code-header {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.article-code pre {
    padding: 16px;
    margin: 0;
    overflow-x: auto;
}

.article-code code {
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    color: #e6edf3;
    line-height: 1.6;
}

.article-table {
    margin: 24px 0;
    overflow-x: auto;
}

.article-table table {
    width: 100%;
    border-collapse: collapse;
    background: var(--glass-bg);
    border-radius: 12px;
    overflow: hidden;
}

.article-table th, .article-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.article-table th {
    background: rgba(0, 0, 0, 0.2);
    font-weight: 600;
    color: var(--text-primary);
}

.article-table .text-success { color: #22c55e; }
.article-table .text-danger { color: #ef4444; }

/* Article Tags & Share */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.tags-label, .share-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 8px;
}

.article-tags .tag {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.article-tags .tag:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.article-share {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.share-buttons {
    display: flex;
    gap: 8px;
}

.share-btn {
    width: 40px;
    height: 40px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 16px;
    transition: all 0.3s ease;
}

.share-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.share-btn.telegram:hover { color: #0088cc; border-color: #0088cc; }
.share-btn.vk:hover { color: #4a76a8; border-color: #4a76a8; }

/* Article Sidebar */
.article-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-list li {
    border-bottom: 1px solid var(--border-color);
}

.toc-list li:last-child {
    border-bottom: none;
}

.toc-list a {
    display: block;
    padding: 10px 0;
    font-size: 14px;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.toc-list a:hover {
    color: var(--accent);
}

/* Related Posts */
.related-posts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.related-post {
    display: flex;
    gap: 12px;
}

.related-image {
    width: 70px;
    height: 50px;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
    border-radius: 8px;
    flex-shrink: 0;
    overflow: hidden;
}

.related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-content {
    flex: 1;
}

.related-date {
    font-size: 12px;
    color: var(--text-muted);
}

.related-content h5 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-secondary);
    margin-top: 4px;
    transition: color 0.3s ease;
}

.related-post:hover h5 {
    color: var(--accent);
}

/* Sidebar CTA */
.sidebar-cta {
    text-align: center;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
}

.sidebar-cta i {
    font-size: 32px;
    color: var(--accent);
    margin-bottom: 12px;
}

.sidebar-cta h4 {
    border: none;
    padding-bottom: 0;
    margin-bottom: 8px;
}

.sidebar-cta p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

/* Article Responsive */
@media (max-width: 1024px) {
    .article-layout {
        grid-template-columns: 1fr;
    }
    
    .article-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sidebar-cta {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .article-hero h1 {
        font-size: 28px;
    }
    
    .article-meta {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .article-stats {
        flex-wrap: wrap;
    }
    
    .article-sidebar {
        grid-template-columns: 1fr;
    }
    
    .sidebar-cta {
        grid-column: span 1;
    }
    
    .article-body h2 {
        font-size: 24px;
    }
    
    .article-body h3 {
        font-size: 20px;
    }
}

/* ===== Legal Pages ===== */

.legal-hero {
    padding: 140px 0 40px;
    text-align: center;
}

.legal-hero h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 12px;
}

.legal-hero p {
    font-size: 16px;
    color: var(--text-muted);
}

.legal-content {
    padding: 40px 0 80px;
}

.legal-document {
    max-width: 800px;
    margin: 0 auto;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 48px;
}

.legal-document h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 32px 0 16px;
}

.legal-document h2:first-child {
    margin-top: 0;
}

.legal-document p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.legal-document ul {
    margin: 0 0 20px 24px;
    color: var(--text-secondary);
}

.legal-document li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.legal-document a {
    color: var(--accent);
}

.legal-contacts {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

.legal-contacts p {
    margin-bottom: 8px;
}

.legal-contacts p:last-child {
    margin-bottom: 0;
}

.legal-contacts h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

@media (max-width: 991px) {
    .legal-hero {
        padding: 120px 0 30px;
    }
    
    .legal-document {
        padding: 32px;
    }
}

@media (max-width: 768px) {
    .legal-hero {
        padding: 100px 0 24px;
    }
    
    .legal-hero h1 {
        font-size: 28px;
    }
    
    .legal-hero p {
        font-size: 14px;
    }
    
    .legal-content {
        padding: 24px 0 60px;
    }
    
    .legal-document {
        padding: 20px;
        border-radius: 12px;
    }
    
    .legal-document h2 {
        font-size: 18px;
        margin: 24px 0 12px;
    }
    
    .legal-document p {
        font-size: 15px;
    }
    
    .legal-document ul {
        margin-left: 16px;
    }
    
    .legal-contacts {
        padding: 16px;
    }
    
    .legal-contacts h3 {
        font-size: 16px;
    }
}

/* =====================================================
   CATALOG / PRODUCTS STYLES
   ===================================================== */

/* Catalog Hero */
.catalog-hero {
    padding: 140px 0 60px;
}

.catalog-hero-content {
    max-width: 600px;
}

.catalog-hero h1 {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.catalog-hero p {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Catalog Layout */
.catalog-content {
    padding: 40px 0 80px;
}

.catalog-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
}

/* Catalog Sidebar */
.catalog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 100px;
}

.catalog-categories {
    list-style: none;
    padding: 0;
    margin: 0;
}

.catalog-categories li {
    margin-bottom: 4px;
}

.catalog-categories li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.catalog-categories li a:hover {
    background: rgba(6, 182, 212, 0.1);
    color: var(--text-primary);
}

.catalog-categories li.active a {
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
    color: #fff;
}

.catalog-categories li a i {
    font-size: 14px;
    width: 20px;
    text-align: center;
}

.catalog-categories li a span:first-of-type {
    flex: 1;
}

.catalog-categories li a .count {
    font-size: 12px;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
}

.catalog-categories li.active a .count {
    background: rgba(255, 255, 255, 0.2);
}

/* Subcategories */
.subcategories {
    list-style: none;
    padding: 0 0 0 32px;
    margin: 8px 0 0 0;
}

.subcategories li a {
    display: block;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.subcategories li a:hover {
    color: var(--accent);
    background: rgba(6, 182, 212, 0.05);
}

/* Manufacturer List */
.manufacturer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.manufacturer-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: color 0.3s ease;
}

.manufacturer-list li a:hover {
    color: var(--accent);
}

.manufacturer-list li:last-child a {
    border-bottom: none;
}

.manufacturer-list .count {
    font-size: 12px;
    color: var(--text-muted);
}

/* Sidebar CTA */
.sidebar-cta {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(139, 92, 246, 0.15));
    border-color: rgba(6, 182, 212, 0.3);
    text-align: center;
}

.sidebar-cta i {
    font-size: 32px;
    color: var(--accent);
    margin-bottom: 16px;
}

.sidebar-cta h4 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 8px;
}

.sidebar-cta p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

/* Catalog Toolbar */
.catalog-toolbar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    margin-bottom: 24px;
}

.toolbar-count {
    font-size: 14px;
    color: var(--text-muted);
}

.toolbar-count strong {
    color: var(--text-primary);
}

.toolbar-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.toolbar-sort label {
    font-size: 14px;
    color: var(--text-muted);
}

.toolbar-sort select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 32px 8px 12px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.toolbar-view {
    display: flex;
    gap: 4px;
}

.view-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

.view-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.products-grid.list-view {
    grid-template-columns: 1fr;
}

/* Product Card */
.product-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-5px);
    border-color: rgba(6, 182, 212, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.product-image {
    display: block;
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.8));
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
    transition: transform 0.5s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 48px;
}

/* Product Badge */
.product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(16, 185, 129, 0.9));
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-badge i {
    font-size: 10px;
}

.product-registry-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.product-registry-badge i {
    font-size: 10px;
}

.product-registry {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.product-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-manufacturer {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.product-content h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
    min-height: 45px;
}

.product-content h3 a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.product-content h3 a:hover {
    color: var(--accent);
}

.product-content > p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
    flex: 1;
}

/* Product Price Badge */
.product-price {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(139, 92, 246, 0.15));
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 8px;
    margin-bottom: 16px;
}

.product-price i {
    color: var(--accent);
}

.product-price span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Product Actions */
.product-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.product-actions .btn {
    flex: 1;
    justify-content: center;
}

/* List View */
.products-grid.list-view .product-card {
    display: grid;
    grid-template-columns: 280px 1fr;
}

.products-grid.list-view .product-image {
    aspect-ratio: auto;
    height: 100%;
}

.products-grid.list-view .product-content {
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.products-grid.list-view .product-content h3 {
    font-size: 18px;
}

.products-grid.list-view .product-content > p {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    flex: 1;
}

.products-grid.list-view .product-actions {
    margin-top: auto;
    max-width: 300px;
}

/* No Products */
.no-products {
    text-align: center;
    padding: 80px 40px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
}

.no-products i {
    font-size: 64px;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.no-products h3 {
    font-size: 24px;
    margin-bottom: 12px;
}

.no-products p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* =====================================================
   SINGLE PRODUCT STYLES
   ===================================================== */

.product-hero {
    padding: 120px 0 20px;
}

.product-main {
    padding: 20px 0 60px;
}

.product-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
}

/* Product Gallery */
.product-gallery {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
}

.gallery-main {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    flex: 1;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Когда галерея без миниатюр (одно изображение) */
.product-gallery.single-image {
    position: static;
}

.product-gallery.single-image .gallery-main {
    margin-bottom: 0;
    height: 100%;
    min-height: auto;
}

.product-gallery.single-image .gallery-image img {
    max-height: none;
}

.gallery-image {
    display: none;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
}

.gallery-image.active {
    display: block;
}

.gallery-image img {
    width: 100%;
    height: 100%;
    max-height: 550px;
    object-fit: contain;
    padding: 30px;
    transition: transform 0.3s ease;
}

.gallery-image:hover img {
    transform: scale(1.02);
}

.gallery-zoom {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(6, 182, 212, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.gallery-image:hover .gallery-zoom {
    opacity: 1;
    transform: scale(1.1);
}

.gallery-thumbs {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.gallery-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--border-color);
    background: var(--glass-bg);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.gallery-thumb:hover {
    border-color: var(--accent);
}

.gallery-thumb.active {
    border-color: var(--accent);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
}

/* Product Info */
.product-info {
    padding-top: 20px;
}

.product-info .product-manufacturer {
    margin-bottom: 12px;
}

.product-info h1 {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
}

.product-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.product-category-link {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 20px;
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
    transition: all 0.3s ease;
}

.product-category-link:hover {
    background: rgba(6, 182, 212, 0.2);
    border-color: var(--accent);
}

.product-excerpt {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 24px;
}

.product-excerpt p {
    margin: 0;
}

/* Product Price Block */
.product-price-block {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.price-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.price-value {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 8px;
}

.price-value i {
    font-size: 20px;
}

.price-note {
    font-size: 13px;
    color: var(--text-muted);
}

/* Product Features */
.product-features {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.feature-item i {
    color: var(--accent);
    font-size: 14px;
}

/* Product Specs Preview */
.product-specs-preview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    margin-bottom: 24px;
}

.spec-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.spec-name {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spec-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Product Actions Main */
.product-actions-main {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.product-actions-main .btn {
    flex: 1;
}

/* Product Files */
.product-files {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 20px;
}

.product-files h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.files-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.file-item:hover {
    background: rgba(6, 182, 212, 0.1);
    color: var(--accent);
}

.file-item i:first-child {
    font-size: 20px;
    color: #ef4444;
}

.file-item span {
    flex: 1;
    font-size: 14px;
}

.file-item i:last-child {
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.file-item:hover i:last-child {
    opacity: 1;
}

/* Product Tabs */
.product-tabs {
    padding: 40px 0;
    background: rgba(0, 0, 0, 0.15);
}

/* Mobile: уменьшаем отступы на странице товара */
@media (max-width: 768px) {
    .product-main {
        padding-bottom: 10px;
    }
    
    .product-tabs {
        padding: 20px 0;
    }
    
    .product-features {
        padding-top: 16px;
        margin-bottom: 0;
    }
    
    .product-info {
        padding-bottom: 20px;
    }
}

.tabs-nav {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 2px solid var(--border-color);
}

.tab-btn {
    padding: 14px 28px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: rgba(6, 182, 212, 0.05);
}

.tab-btn.active {
    background: transparent;
    border-bottom-color: var(--accent);
    color: var(--accent);
}

.tab-panel {
    display: none;
    padding-top: 24px;
}

.tab-panel.active {
    display: block;
}

.product-description {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.product-description h2,
.product-description h3 {
    color: var(--text-primary);
    margin: 32px 0 16px;
}

.product-description p {
    margin-bottom: 16px;
}

.product-description ul {
    margin: 0 0 20px 24px;
}

.product-description li {
    margin-bottom: 8px;
}

/* Specs Table */
.specs-table {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    overflow: hidden;
}

.specs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--border-color);
}

.specs-row:last-child {
    border-bottom: none;
}

.specs-name {
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.2);
    font-size: 14px;
    color: var(--text-muted);
}

.specs-value {
    padding: 16px 20px;
    font-size: 14px;
    color: var(--text-primary);
}

/* Related Products */
.related-products {
    padding: 60px 0;
}

.related-products .products-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* Product CTA */
.product-cta {
    padding: 0 0 80px;
}

.product-cta .cta-card {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(139, 92, 246, 0.15));
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 20px;
    padding: 48px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.product-cta .cta-content h2 {
    font-size: 28px;
    margin-bottom: 12px;
}

.product-cta .cta-content p {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* Catalog Search */
.toolbar-search {
    flex: 1;
    max-width: 200px;
}

.toolbar-search input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    color: var(--text-primary);
    transition: border-color 0.3s ease;
}

.toolbar-search input::placeholder {
    color: var(--text-muted);
}

.toolbar-search input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Active Filters */
.active-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filters-label {
    font-size: 13px;
    color: var(--text-muted);
}

.filter-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--accent);
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s ease;
}

.filter-tag:hover {
    background: #2563eb;
}

.filter-tag i {
    font-size: 10px;
}

.clear-filters {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
}

.clear-filters:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Catalog Loading */
.catalog-loading {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border-radius: 16px;
}

.catalog-loading.active {
    opacity: 1;
    visibility: visible;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(6, 182, 212, 0.2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.catalog-main {
    position: relative;
}

/* Manufacturer List - All manufacturers option */
.manufacturer-list li.active a {
    color: var(--accent);
    font-weight: 600;
}

/* Catalog Responsive */
@media (max-width: 1200px) {
    .related-products .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .catalog-layout {
        grid-template-columns: 1fr;
    }
    
    .catalog-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .sidebar-cta {
        grid-column: 1 / -1;
    }
    
    .product-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .product-gallery {
        position: static;
    }
    
    .related-products .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .catalog-toolbar {
        flex-wrap: wrap;
    }
    
    .toolbar-sort {
        margin-left: 0;
        order: 3;
        width: 100%;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .products-grid.list-view {
        grid-template-columns: 1fr;
    }
    
    .products-grid.list-view .product-card {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 0;
    }
    
    .products-grid.list-view .product-image {
        aspect-ratio: 1;
        height: auto;
    }
    
    .products-grid.list-view .product-content {
        padding: 12px 16px;
    }
    
    .products-grid.list-view .product-content h3 {
        font-size: 14px;
        margin-bottom: 4px;
    }
    
    .products-grid.list-view .product-content > p {
        display: none;
    }
    
    .products-grid.list-view .product-price {
        margin: 8px 0;
    }
    
    .products-grid.list-view .product-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .products-grid.list-view .product-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .products-grid.list-view .product-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 2px;
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(16, 185, 129, 0.9));
        border-radius: 6px;
        font-size: 7px;
        font-weight: 600;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .catalog-sidebar {
        grid-template-columns: 1fr;
    }
    
    .product-specs-preview {
        grid-template-columns: 1fr;
    }
    
    .product-actions-main {
        flex-direction: column;
    }
    
    .specs-row {
        grid-template-columns: 1fr;
    }
    
    .specs-name {
        padding: 12px 16px 4px;
    }
    
    .specs-value {
        padding: 4px 16px 12px;
    }
    
    .related-products .products-grid {
        grid-template-columns: 1fr;
    }
    
    .product-cta .cta-card {
        padding: 40px 24px;
    }
}

@media (max-width: 540px) {
    .products-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    
    .related-products .products-grid {
        grid-template-columns: 1fr !important;
    }
    
    .product-card {
        max-width: 100%;
    }
}

/* Hide sticky CTA on catalog page */
.post-type-archive-product .sticky-cta {
    display: none !important;
}

/* Catalog Cart Widget */
.catalog-cart-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
}

.cart-widget-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #10b981;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-widget-toggle:hover {
    transform: scale(1.1);
    background: #059669;
    box-shadow: 0 6px 30px rgba(16, 185, 129, 0.5);
}

.cart-widget-count {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    background: #ef4444;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalog-cart-widget:not(.has-items) .cart-widget-count {
    display: none;
}

.cart-widget-dropdown {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.cart-widget-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cart-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.cart-widget-header h4 {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.cart-widget-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
}

.cart-widget-items {
    max-height: 250px;
    overflow-y: auto;
    padding: 12px;
}

.cart-widget-items .cart-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
}

.cart-widget-items .cart-empty i {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.5;
}

.cart-widget-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 8px;
}

.cart-widget-item:last-child {
    margin-bottom: 0;
}

.cart-widget-item-info {
    flex: 1;
    min-width: 0;
}

.cart-widget-item-title {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-widget-item-qty {
    font-size: 12px;
    color: var(--text-muted);
}

.cart-widget-item-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 12px;
    transition: color 0.2s;
}

.cart-widget-item-remove:hover {
    color: #ef4444;
}

.cart-widget-footer {
    padding: 16px;
    border-top: 1px solid var(--border-color);
}

.cart-widget-total {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

/* Cart notification */
.cart-notification {
    position: fixed;
    bottom: 100px;
    right: 24px;
    background: var(--accent);
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-notification.show {
    opacity: 1;
    transform: translateY(0);
}

/* Add to cart button states */
.catalog-add-cart.in-cart {
    background: #10b981;
    border-color: #10b981;
}

.catalog-add-cart.in-cart:hover {
    background: #059669;
}

/* Button accent style */
.btn-accent {
    background: var(--accent);
    color: white;
    border: 1px solid var(--accent);
}

.btn-accent:hover {
    background: var(--accent-light);
    border-color: var(--accent-light);
}

@media (max-width: 768px) {
    .catalog-cart-widget {
        bottom: 16px;
        right: 16px;
    }
    
    .cart-widget-dropdown {
        width: 280px;
        right: -8px;
    }
}

/* ========================================
   HISTORY PAGE - MEMORIAL STYLES
======================================== */

.history-page {
    padding-top: 80px;
}

/* History Timeline Section */
.history-timeline-section {
    padding: 80px 0;
}

.history-timeline {
    position: relative;
    max-width: 1000px;
    margin: 60px auto 0;
    padding: 0 20px;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), rgba(6, 182, 212, 0.3), transparent);
    transform: translateX(-50%);
}

.history-timeline-item {
    position: relative;
    width: 50%;
    padding: 0 40px 60px;
}

.history-timeline-item.left {
    left: 0;
    text-align: right;
}

.history-timeline-item.right {
    left: 50%;
    text-align: left;
}

.history-timeline-item .timeline-marker {
    position: absolute;
    top: 0;
    width: 20px;
    height: 20px;
    background: var(--bg-dark);
    border: 3px solid var(--accent);
    border-radius: 50%;
    z-index: 2;
}

.history-timeline-item.left .timeline-marker {
    right: -50px;
}

.history-timeline-item.right .timeline-marker {
    left: -50px;
}

.history-timeline-item .timeline-dot {
    position: absolute;
    inset: 4px;
    background: var(--accent);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.history-timeline-item:hover .timeline-dot,
.history-timeline-item.active .timeline-dot {
    opacity: 1;
}

.history-timeline-item.active .timeline-marker {
    border-color: #10b981;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

.history-timeline-item.active .timeline-dot {
    background: #10b981;
}

.timeline-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all 0.3s ease;
}

.history-timeline-item:hover .timeline-card {
    border-color: var(--accent);
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(6, 182, 212, 0.15);
}

.timeline-card .timeline-year {
    display: inline-block;
    padding: 4px 12px;
    background: var(--accent);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    margin-bottom: 12px;
}

.timeline-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.timeline-card p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Mission Section */
.history-mission-section {
    padding: 80px 0;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.mission-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    transition: all 0.3s ease;
}

.mission-card:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(6, 182, 212, 0.15);
}

.mission-icon {
    width: 64px;
    height: 64px;
    background: var(--accent);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 24px;
    color: white;
}

.mission-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.mission-card p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Timeline Mobile */
@media (max-width: 768px) {
    .history-timeline {
        padding-left: 30px;
    }
    
    .timeline-line {
        left: 15px;
        transform: none;
    }
    
    .history-timeline-item {
        width: 100%;
        left: 0 !important;
        text-align: left !important;
        padding: 0 0 40px 40px;
    }
    
    .history-timeline-item .timeline-marker {
        left: 5px !important;
        right: auto !important;
    }
    
    .mission-grid {
        grid-template-columns: 1fr;
    }
}

.timeline-item {
    position: relative;
    margin-bottom: 50px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -36px;
    top: 8px;
    width: 14px;
    height: 14px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

.timeline-year {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.timeline-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.timeline-content p {
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Mission */
.history-mission {
    max-width: 900px;
    margin: 60px auto 0;
    padding: 40px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 20px;
}

.mission-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
}

.mission-header i {
    font-size: 2rem;
    color: var(--accent);
}

.mission-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mission-items {
    display: grid;
    gap: 20px;
}

.mission-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.mission-item i {
    font-size: 1.25rem;
    color: var(--accent);
    margin-top: 2px;
}

.mission-item p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Memorial Section */
.memorial-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(180deg, 
        rgba(15, 23, 42, 1) 0%, 
        rgba(30, 30, 50, 1) 50%,
        rgba(15, 23, 42, 1) 100%);
    overflow: hidden;
}

.memorial-content {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 60px;
    align-items: start;
}

/* Memorial Photo */
.memorial-photo {
    text-align: center;
}

.photo-frame {
    position: relative;
    display: inline-block;
    padding: 8px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.1));
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.photo-frame img {
    width: 300px;
    height: auto;
    border-radius: 12px;
    display: block;
    filter: grayscale(30%);
}

.memorial-candle {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 40px;
    background: linear-gradient(to top, #8B4513, #D2691E);
    border-radius: 2px 2px 4px 4px;
}

.candle-flame {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 20px;
    background: linear-gradient(to top, #ff6600, #ffcc00, #fff8dc);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flicker 1.5s ease-in-out infinite alternate;
    box-shadow: 0 0 20px rgba(255, 200, 100, 0.8), 0 0 40px rgba(255, 150, 50, 0.5);
}

@keyframes flicker {
    0%, 100% {
        transform: translateX(-50%) scale(1) rotate(-2deg);
        opacity: 1;
    }
    50% {
        transform: translateX(-50%) scale(1.05) rotate(2deg);
        opacity: 0.9;
    }
}

.memorial-dates {
    margin-top: 50px;
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text-muted);
    letter-spacing: 4px;
}

.memorial-dates .separator {
    margin: 0 12px;
    color: rgba(255, 215, 0, 0.5);
}

.memorial-dates .death-year {
    color: rgba(255, 215, 0, 0.7);
}

/* Memorial Text */
.memorial-text {
    padding-top: 20px;
}

.memorial-header {
    margin-bottom: 40px;
}

.memorial-label {
    display: inline-block;
    font-size: 14px;
    color: rgba(255, 215, 0, 0.7);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.memorial-header h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.memorial-title {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-style: italic;
}

.memorial-notice {
    padding: 24px;
    background: rgba(0, 0, 0, 0.3);
    border-left: 4px solid rgba(255, 215, 0, 0.5);
    border-radius: 0 12px 12px 0;
    margin-bottom: 30px;
}

.memorial-notice p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

.memorial-tribute p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 20px;
}

.memorial-condolences {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.memorial-condolences p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 16px;
}

.memorial-loss {
    color: var(--text-primary) !important;
    font-size: 1.1rem;
}

.memorial-footer {
    margin-top: 40px;
    text-align: center;
}

.eternal-memory {
    font-size: 1.5rem;
    font-weight: 300;
    font-style: italic;
    color: rgba(255, 215, 0, 0.7);
    letter-spacing: 2px;
}

.memorial-bg-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.memorial-gradient {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
}

/* Legacy Section */
.legacy-section {
    padding: 80px 0;
    background: var(--bg-dark);
}

.legacy-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.legacy-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(139, 92, 246, 0.2));
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 50%;
}

.legacy-icon i {
    font-size: 2rem;
    color: var(--accent);
}

.legacy-content h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.legacy-content > p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 40px;
}

.legacy-quote blockquote {
    font-size: 1.25rem;
    font-style: italic;
    color: var(--text-muted);
    padding: 30px;
    background: rgba(6, 182, 212, 0.1);
    border-radius: 16px;
    border-left: 4px solid var(--accent);
    margin: 0;
}

/* History Page Responsive */
@media (max-width: 991px) {
    .memorial-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .memorial-photo {
        order: -1;
    }
    
    .photo-frame img {
        width: 250px;
    }
    
    .history-timeline {
        padding-left: 30px;
    }
    
    .timeline-item::before {
        left: -26px;
    }
}

@media (max-width: 576px) {
    .history-hero {
        padding: 60px 0 50px;
    }
    
    .history-section,
    .legacy-section {
        padding: 60px 0;
    }
    
    .memorial-section {
        padding: 60px 0;
    }
    
    .photo-frame img {
        width: 200px;
    }
    
    .memorial-dates {
        font-size: 1.2rem;
        margin-top: 40px;
    }
    
    .history-mission {
        padding: 24px;
    }
    
    .mission-item {
        flex-direction: column;
        gap: 12px;
    }
}

/* ===== APK Configurator ===== */
.configurator-page {
    min-height: 100vh;
    padding-top: 80px;
}

.configurator-hero {
    padding: 60px 0 40px;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    text-align: center;
}

.configurator-hero h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 16px;
}

.configurator-hero h1 span {
    color: var(--accent);
}

.configurator-hero p {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Mode Cards */
.configurator-modes {
    padding: 60px 0;
}

.mode-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 800px;
    margin: 0 auto;
}

.mode-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    text-align: center;
    transition: all var(--transition);
    cursor: pointer;
}

.mode-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.15);
}

.mode-icon {
    width: 80px;
    height: 80px;
    background: var(--accent-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.mode-icon i {
    font-size: 32px;
    color: var(--accent);
}

.mode-card h3 {
    font-size: 24px;
    margin-bottom: 12px;
}

.mode-card p {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* AI Assistant Teaser */
.ai-assistant-teaser {
    max-width: 700px;
    margin: 48px auto 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.ai-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-icon i {
    font-size: 24px;
    color: white;
}

.ai-content {
    flex: 1;
}

.ai-content span {
    display: block;
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 8px;
}

.ai-input-wrapper {
    display: flex;
    gap: 8px;
}

.ai-input {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 15px;
}

.ai-input:focus {
    outline: none;
    border-color: var(--accent);
}

.ai-submit {
    background: var(--accent);
    border: none;
    border-radius: var(--radius);
    padding: 12px 16px;
    color: white;
    cursor: pointer;
    transition: all var(--transition);
}

.ai-submit:hover {
    background: var(--accent-dark);
}

/* Wizard */
.configurator-wizard,
.configurator-builder,
.configurator-result {
    padding: 40px 0 80px;
}

.wizard-header,
.builder-header,
.result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 16px;
}

.back-to-modes {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color var(--transition);
}

.back-to-modes:hover {
    color: var(--accent);
}

.wizard-progress {
    display: flex;
    align-items: center;
    gap: 16px;
}

.progress-bar {
    width: 200px;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Wizard Steps */
.wizard-step {
    display: none;
}

.wizard-step.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.wizard-step h2 {
    font-size: 28px;
    text-align: center;
    margin-bottom: 12px;
}

.wizard-hint {
    text-align: center;
    color: var(--text-secondary);
    font-size: 15px;
    margin-bottom: 32px;
}

/* Task Grid */
.task-grid,
.scale-grid,
.budget-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.wizard-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.task-option,
.scale-option,
.budget-option,
.feature-option {
    position: relative;
}

.task-option input,
.scale-option input,
.budget-option input,
.feature-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.task-card,
.scale-card,
.budget-card,
.feature-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 180px;
    position: relative;
    overflow: hidden;
}

/* Галочка для выбранных карточек */
.task-option input:checked + .task-card::after,
.scale-option input:checked + .scale-card::after,
.budget-option input:checked + .budget-card::after,
.feature-option input:checked + .feature-card::after {
    content: '✓';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

.task-card:hover,
.scale-card:hover,
.budget-card:hover,
.feature-card:hover {
    border-color: var(--accent);
}

.task-option input:checked + .task-card,
.scale-option input:checked + .scale-card,
.budget-option input:checked + .budget-card,
.feature-option input:checked + .feature-card {
    border-color: var(--accent);
    background: var(--accent-muted);
}

.task-card i,
.scale-card i,
.feature-card i {
    font-size: 36px;
    color: var(--accent);
    margin-bottom: 16px;
}

.task-card span,
.scale-card span,
.budget-card span,
.feature-card span {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.task-card small,
.scale-card small,
.budget-card small,
.feature-card small {
    display: block;
    font-size: 14px;
    color: var(--text-secondary);
}

.budget-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 12px;
}

/* Wizard Nav */
.wizard-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 48px;
    padding: 20px 0;
}

.wizard-nav .btn {
    min-width: 160px;
}

/* Builder Layout */
.configurator-builder .container {
    max-width: 1800px;
}

.builder-layout {
    display: grid;
    grid-template-columns: 375px 1fr 375px;
    gap: 20px;
}

.builder-sidebar {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    height: fit-content;
    position: sticky;
    top: 100px;
}

.filter-section {
    margin-bottom: 24px;
}

.filter-section h4 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.filter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 230px;
    overflow-y: auto;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

.filter-item small {
    color: var(--text-muted);
    margin-left: auto;
}

.clear-filters {
    width: 100%;
    margin-top: 16px;
}

/* Builder Main */
.builder-main {
    min-height: 500px;
}

.builder-search {
    position: relative;
    margin-bottom: 24px;
}

.builder-search input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 14px 16px 14px 44px;
    color: var(--text-primary);
    font-size: 15px;
}

.builder-search i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 1400px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.products-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.products-loading i {
    font-size: 32px;
    margin-bottom: 16px;
    display: block;
}

/* Product Card */
.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.product-card.in-cart {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-muted);
}

.product-image {
    height: 200px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-image.no-image {
    background: linear-gradient(135deg, var(--accent-muted) 0%, var(--bg-tertiary) 50%, var(--accent-muted) 100%);
    position: relative;
}

.product-image.no-image::after {
    content: '\f03e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    font-size: 32px;
    color: var(--text-secondary);
    opacity: 0.3;
}

.product-info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-brand {
    font-size: 12px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.product-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
}

.product-category {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    flex: 1;
}

.product-price {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.product-actions {
    display: flex;
    gap: 8px;
}

.product-actions .btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
}

/* Cart Panel */
.builder-cart {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    height: fit-content;
    position: sticky;
    top: 100px;
}

.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.cart-header h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.cart-count {
    background: var(--accent);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.cart-items {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.cart-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-secondary);
}

.cart-empty i {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-image {
    width: 48px;
    height: 48px;
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cart-item-image.no-image {
    background: linear-gradient(135deg, var(--accent-muted) 0%, var(--bg-tertiary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item-image.no-image::after {
    content: '\f03e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    font-size: 16px;
    color: var(--text-secondary);
    opacity: 0.4;
}

.cart-item-info {
    flex: 1;
    min-width: 0;
}

.cart-item-title {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.cart-item-qty button {
    width: 24px;
    height: 24px;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 4px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 14px;
}

.cart-item-qty span {
    font-size: 14px;
    min-width: 20px;
    text-align: center;
}

.cart-item-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    transition: color var(--transition);
}

.cart-item-remove:hover {
    color: #ef4444;
}

.cart-summary {
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    padding: 16px;
}

.summary-row.budget,
.summary-item.budget {
    display: none !important;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 8px;
}

.summary-row:last-child {
    margin-bottom: 0;
}

.summary-row.budget {
    font-weight: 600;
    color: var(--accent);
}

.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cart-actions .btn {
    width: 100%;
}

/* Result Section */
.result-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.config-code {
    background: var(--accent-muted);
    color: var(--accent);
    padding: 4px 12px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
}

.result-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
}

.result-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.result-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.result-summary {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 20px;
}

.result-summary h4 {
    margin-bottom: 16px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.summary-item:last-child {
    border-bottom: none;
}

.result-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.result-share {
    display: flex;
    align-items: center;
    gap: 12px;
}

.result-share span {
    font-size: 14px;
    color: var(--text-secondary);
}

.share-btn {
    width: 40px;
    height: 40px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
}

.share-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 32px;
    max-width: 560px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalIn 0.3s ease;
}

.modal-wide {
    max-width: 900px;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
}

.modal-content h3 {
    font-size: 24px;
    margin-bottom: 24px;
}

.modal-content-sm {
    max-width: 500px;
}

/* Save Config Modal */
.save-config-success {
    text-align: center;
    padding: 20px 0;
}

.save-config-success .save-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: pulseGreen 2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
}

@keyframes pulseGreen {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(16, 185, 129, 0);
    }
}

.save-config-success .save-icon i {
    font-size: 40px;
    color: white;
}

.save-config-success h3 {
    font-size: 28px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.save-config-success > p {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.config-link-box {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.config-link-box input {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 14px 16px;
    color: var(--text-primary);
    font-size: 14px;
}

.config-link-box .btn {
    padding: 14px 18px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.config-link-box .btn.copied {
    background: #10b981;
    border-color: #10b981;
    min-width: 140px;
}

.config-link-box .btn .copy-text {
    font-size: 13px;
    margin-left: 4px;
}

.config-code-display {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 24px;
}

.config-code-display strong {
    color: var(--primary);
    font-family: monospace;
    font-size: 16px;
}

.config-expiry-notice {
    font-size: 13px;
    color: var(--text-muted);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 20px;
}

.config-expiry-notice i {
    color: #f59e0b;
    margin-right: 6px;
}

.save-config-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* No Results Message */
.no-results-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 40px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
}

.no-results-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 32px;
    color: white;
}

.no-results-message h3 {
    font-size: 20px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.no-results-message p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

.no-results-message .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Quote Form */
.quote-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.quote-form .form-group {
    margin-bottom: 16px;
}

.quote-form label {
    display: block;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.quote-form input,
.quote-form textarea {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px 14px;
    color: var(--text-primary);
    font-size: 15px;
}

.quote-form input:focus,
.quote-form textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.form-options {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Compare Table */
.compare-table {
    overflow-x: auto;
}

.compare-table table {
    width: 100%;
    border-collapse: collapse;
}

.compare-table th,
.compare-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.compare-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
}

.compare-actions {
    margin-top: 24px;
    text-align: center;
}

/* Responsive */
@media (max-width: 1200px) {
    .builder-layout {
        grid-template-columns: 200px 1fr 280px;
    }
}

@media (max-width: 1024px) {
    .builder-layout {
        grid-template-columns: 1fr;
    }
    
    .builder-sidebar,
    .builder-cart {
        position: static;
    }
    
    .builder-sidebar {
        display: none;
    }
    
    .builder-cart {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        z-index: 100;
        max-height: 60px;
        overflow: hidden;
        transition: max-height 0.3s ease;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    }
    
    .builder-cart.expanded {
        max-height: 70vh;
        overflow-y: auto;
    }
    
    .builder-cart .cart-header {
        cursor: pointer;
        position: relative;
    }
    
    .builder-cart .cart-header::after {
        content: '\f077';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s ease;
    }
    
    .builder-cart.expanded .cart-header::after {
        transform: translateY(-50%) rotate(180deg);
    }
    
    .builder-cart .cart-items,
    .builder-cart .cart-summary,
    .builder-cart .cart-actions {
        display: none;
    }
    
    .builder-cart.expanded .cart-items,
    .builder-cart.expanded .cart-summary,
    .builder-cart.expanded .cart-actions {
        display: block;
    }
    
    .result-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .configurator-hero h1 {
        font-size: 36px;
    }
    
    .mode-cards {
        grid-template-columns: 1fr;
    }
    
    .ai-assistant-teaser {
        flex-direction: column;
        text-align: center;
    }
    
    .task-grid,
    .scale-grid,
    .budget-grid,
    .wizard-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .quote-form .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .task-grid,
    .budget-grid {
        grid-template-columns: 1fr;
    }
    
    .task-card,
    .scale-card,
    .budget-card,
    .feature-card {
        padding: 24px 16px;
    }
}

/* ========================================
 * AI CHAT STYLES
 * ======================================== */

.modal-chat {
    width: 500px;
    height: 600px;
    min-width: 350px;
    min-height: 400px;
    max-width: none;
    max-height: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    position: absolute;
}

.modal-chat.dragging {
    user-select: none;
    cursor: grabbing;
}

.ai-chat-header {
    cursor: grab;
}

.ai-chat-header:active {
    cursor: grabbing;
}

.modal-chat .resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    background: linear-gradient(135deg, transparent 50%, var(--accent) 50%);
    border-radius: 0 0 var(--radius-lg) 0;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.modal-chat .resize-handle:hover {
    opacity: 1;
}

.ai-product-link {
    color: #60a5fa;
    text-decoration: underline;
    text-decoration-style: solid;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-product-link:hover {
    color: #93c5fd;
    text-decoration-color: #93c5fd;
}

.ai-product-highlight {
    color: #60a5fa;
    font-weight: 600;
}

.ai-chat-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.ai-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.ai-chat-title h3 {
    margin: 0;
    font-size: 18px;
}

.ai-chat-title span {
    font-size: 13px;
    color: var(--text-secondary);
}

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ai-message {
    max-width: 85%;
    animation: messageSlide 0.3s ease;
}

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

.ai-message-bot {
    align-self: flex-start;
}

.ai-message-user {
    align-self: flex-end;
}

.ai-message-content {
    padding: 12px 16px;
    border-radius: 16px;
    line-height: 1.5;
    font-size: 14px;
}

.ai-message-bot .ai-message-content {
    background: var(--bg-tertiary);
    border-bottom-left-radius: 4px;
}

.ai-message-user .ai-message-content {
    background: var(--accent);
    color: white;
    border-bottom-right-radius: 4px;
}

.ai-message-content p {
    margin: 0 0 10px;
}

.ai-message-content p:last-child {
    margin-bottom: 0;
}

.ai-message-content strong {
    color: var(--accent);
}

.ai-message-user .ai-message-content strong {
    color: white;
}

.ai-message-content code {
    background: rgba(0,0,0,0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}

.ai-product-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ai-product-card .product-name {
    font-weight: 600;
    font-size: 14px;
}

.ai-product-card .product-price {
    font-size: 12px;
    color: var(--text-secondary);
}

.ai-product-card .btn-add {
    background: var(--accent);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s;
}

.ai-product-card .btn-add:hover {
    background: var(--accent-light);
}

.ai-chat-input {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.ai-chat-input textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
}

.ai-chat-input textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.ai-chat-send {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s;
}

.ai-chat-send:hover {
    background: var(--accent-light);
    transform: scale(1.05);
}

.ai-chat-send:disabled {
    background: var(--border-color);
    cursor: not-allowed;
    transform: none;
}

.ai-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 24px 20px;
    background: var(--bg-secondary);
}

.ai-suggestion {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-suggestion:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0, 123, 255, 0.05);
}

.ai-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    width: fit-content;
}

.ai-typing span {
    width: 8px;
    height: 8px;
    background: var(--text-secondary);
    border-radius: 50%;
    animation: typing 1.4s infinite;
}

.ai-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.ai-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

.ai-action-buttons {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

.ai-request-btn {
    background: linear-gradient(135deg, var(--accent) 0%, #00d4aa 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

.ai-request-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.ai-request-btn i {
    font-size: 16px;
}

/* ===== Error Pages (404, 500, etc.) ===== */
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 120px 0 60px;
}

.error-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.error-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(37, 99, 235, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

.error-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
    animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.error-content {
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
}

.error-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
    background: var(--accent-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: iconFloat 3s ease-in-out infinite;
}

.error-icon i {
    font-size: 32px;
    color: var(--accent);
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.error-code-wrap {
    margin-bottom: 20px;
}

.error-code {
    font-size: clamp(100px, 20vw, 180px);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent) 0%, #60a5fa 50%, var(--accent) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
    position: relative;
    display: inline-block;
}

.error-code::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    font-size: inherit;
    font-weight: inherit;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(96, 165, 250, 0.1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: blur(30px);
    z-index: -1;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.error-title {
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.error-desc {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 32px;
}

.error-search {
    margin-bottom: 32px;
}

.search-input-wrap {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 6px 6px 6px 20px;
    gap: 12px;
    transition: all var(--transition);
}

.search-input-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-muted);
}

.search-input-wrap i {
    color: var(--text-muted);
    font-size: 16px;
}

.search-input-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 15px;
    padding: 10px 0;
}

.search-input-wrap input::placeholder {
    color: var(--text-muted);
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
}

.error-popular {
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

.error-popular-title {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.error-popular-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.error-popular-links a {
    padding: 8px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 14px;
    color: var(--text-secondary);
    transition: all var(--transition);
}

.error-popular-links a:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-muted);
}

/* Error 500 specific */
.error-500 .error-icon {
    background: rgba(239, 68, 68, 0.15);
}

.error-500 .error-icon i {
    color: #ef4444;
}

.error-500 .error-code {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 50%, #ef4444 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.error-500 .error-glow {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.15) 0%, transparent 70%);
}

/* Error 403 specific */
.error-403 .error-icon {
    background: rgba(245, 158, 11, 0.15);
}

.error-403 .error-icon i {
    color: #f59e0b;
}

.error-403 .error-code {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #f59e0b 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.error-403 .error-glow {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
}

.error-info {
    margin-top: 32px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--text-secondary);
}

.error-info i {
    color: var(--accent);
    margin-right: 8px;
}

/* APK Configurator Mobile */
@media (max-width: 768px) {
    .configurator-wizard .container {
        overflow-x: hidden;
        padding: 0 16px;
    }
    
    .wizard-step {
        overflow: hidden;
    }
    
    .task-grid,
    .scale-grid,
    .budget-grid,
    .wizard-features-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto;
    }
    
    .task-card,
    .scale-card,
    .budget-card,
    .feature-card {
        height: 140px !important;
        min-height: unset !important;
        padding: 16px 12px !important;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }
    
    .task-card i,
    .scale-card i,
    .feature-card i {
        font-size: 24px;
        margin-bottom: 8px;
    }
    
    .task-card span,
    .scale-card span,
    .budget-card span,
    .feature-card span {
        font-size: 13px;
        margin-bottom: 4px;
        line-height: 1.2;
    }
    
    .task-card small,
    .scale-card small,
    .budget-card small,
    .feature-card small {
        font-size: 10px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .budget-icon {
        font-size: 20px;
        margin-bottom: 8px;
    }
    
    .wizard-step h2 {
        font-size: 22px;
    }
    
    .wizard-nav {
        display: flex;
        gap: 12px;
    }
    
    .wizard-nav .btn {
        flex: 1;
        min-width: 0;
        width: 50%;
    }
    
    .wizard-prev,
    .wizard-next,
    .wizard-finish {
        flex: 1 !important;
    }
    
    .mode-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .configurator-hero h1 {
        font-size: 28px;
    }
    
    /* Убираем transform эффекты на мобильной */
    .task-card:hover,
    .scale-card:hover,
    .budget-card:hover,
    .feature-card:hover {
        transform: none !important;
    }
    
    .task-option input:checked + .task-card,
    .scale-option input:checked + .scale-card,
    .budget-option input:checked + .budget-card,
    .feature-option input:checked + .feature-card {
        transform: none !important;
    }
    
    /* AI Chat - полноэкранный на мобильной */
    .modal-chat {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        min-width: unset !important;
        min-height: unset !important;
        border-radius: 0 !important;
        transform: none !important;
    }
    
    .modal-chat .resize-handle {
        display: none !important;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .error-page {
        padding: 100px 20px 40px;
    }
    
    .error-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }
    
    .error-icon i {
        font-size: 24px;
    }
    
    .error-actions {
        flex-direction: column;
    }
    
    .error-actions .btn {
        width: 100%;
    }
    
    .search-input-wrap {
        flex-direction: column;
        padding: 12px;
        gap: 8px;
    }
    
    .search-input-wrap input {
        width: 100%;
        text-align: center;
    }
    
    .search-input-wrap .btn {
        width: 100%;
    }
    
    .search-input-wrap > i {
        display: none;
    }
}

/* ========================================
 * PAGE HEADER - Заголовок страницы
 * ======================================== */
.page-header {
    padding: 160px 0 80px;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 80% 60% at 20% 30%, rgba(6, 182, 212, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.3), transparent);
}

.page-header-content {
    position: relative;
    z-index: 1;
}

.page-header .breadcrumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.page-header .breadcrumbs a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.page-header .breadcrumbs a:hover {
    color: var(--accent-light);
}

.page-header .breadcrumbs .separator {
    color: var(--text-muted);
}

.page-header .breadcrumbs .current {
    color: var(--text-primary);
}

.page-header .page-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
}

.page-header .page-desc {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 600px;
}

@media (max-width: 768px) {
    .page-header {
        padding: 120px 0 40px;
    }
    
    .page-header .page-title {
        font-size: 28px;
    }
    
    .page-header .page-desc {
        font-size: 16px;
    }
}

/* ========================================
 * COURSES SECTION - Учебный центр
 * ======================================== */
.courses-section {
    padding: var(--section-gap) 0;
    background: transparent;
    position: relative;
}

.courses-section > .container {
    position: relative;
    z-index: 1;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.course-card {
    background: linear-gradient(145deg, var(--bg-card) 0%, rgba(15, 23, 42, 0.8) 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), #8b5cf6);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.course-card:hover::before {
    opacity: 1;
}

.course-card:hover {
    border-color: var(--accent);
    transform: translateY(-8px);
    box-shadow: 
        0 25px 50px rgba(37, 99, 235, 0.2),
        0 0 0 1px rgba(6, 182, 212, 0.1);
}

.course-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--accent-muted);
    color: var(--accent-light);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.course-badge.premium {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(234, 88, 12, 0.2));
    color: #f59e0b;
}

.course-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--accent-muted) 0%, rgba(6, 182, 212, 0.15) 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    border: 1px solid rgba(6, 182, 212, 0.2);
    position: relative;
}

.course-icon::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.course-card:hover .course-icon::after {
    opacity: 1;
}

.course-icon i {
    font-size: 28px;
    color: var(--accent-light);
}

.course-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    line-height: 1.4;
}

.course-desc {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.course-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
}

.course-meta .meta-item i {
    color: var(--accent-light);
    font-size: 14px;
}

.course-features {
    margin-bottom: 24px;
}

.course-features .feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.course-features .feature-item i {
    color: #10b981;
    font-size: 12px;
}

.course-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
}

.course-price .price-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.course-price .price-note {
    color: var(--text-muted);
    font-size: 13px;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.courses-cta {
    text-align: center;
    margin-top: 60px;
    padding: 50px 40px;
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.5) 0%, rgba(15, 23, 42, 0.8) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.courses-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.courses-cta p {
    color: var(--text-secondary);
    margin-bottom: 24px;
    font-size: 17px;
}

@media (max-width: 768px) {
    .courses-grid {
        grid-template-columns: 1fr;
    }
    
    .course-card {
        padding: 24px;
    }
    
    .course-title {
        font-size: 18px;
    }
    
    .course-price .price-value {
        font-size: 24px;
    }
}

/* ========================================
 * FOOTER GOV LINKS - Учебный центр
 * ======================================== */
.footer-gov-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.footer-gov-links a {
    color: var(--text-secondary);
    font-size: 13px;
    text-decoration: none;
    transition: var(--transition);
}

.footer-gov-links a:hover {
    color: var(--accent-light);
}

@media (max-width: 768px) {
    .footer-gov-links {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

/* ========================================
 * COURSES SWITCHER - Переключатель курсов
 * ======================================== */
.courses-switcher {
    padding: 40px 0;
    background: transparent;
    position: sticky;
    top: 80px;
    z-index: 90;
    transition: all 0.3s ease;
}

.courses-switcher.is-stuck {
    padding: 30px 0 10px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(6, 182, 212, 0.2);
}

.switcher-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.switcher-track {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.switcher-highlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 2px solid var(--accent);
    border-radius: 20px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 0 30px rgba(6, 182, 212, 0.3),
        inset 0 0 20px rgba(6, 182, 212, 0.1);
}

.switcher-highlight.right {
    left: calc(50% + 10px);
}

.switcher-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    z-index: 1;
}

.switcher-btn:hover {
    background: rgba(30, 41, 59, 0.7);
}

.switcher-btn.active {
    background: transparent;
    border-color: transparent;
}

/* Пульсация для неактивной кнопки */
.switcher-btn:not(.active) {
    animation: pulse-attention 2s ease-in-out infinite;
}

.switcher-btn:not(.active):hover {
    animation: none;
}

@keyframes pulse-attention {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4);
    }
    50% {
        box-shadow: 0 0 20px 5px rgba(6, 182, 212, 0.3);
    }
}

.switcher-btn-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-muted) 0%, rgba(6, 182, 212, 0.2) 100%);
    border-radius: 16px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.switcher-btn.active .switcher-btn-icon {
    background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

.switcher-btn-icon i {
    font-size: 24px;
    color: var(--accent-light);
    transition: all 0.3s ease;
}

.switcher-btn.active .switcher-btn-icon i {
    color: white;
}

.switcher-btn-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.switcher-btn-badge {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-light);
    opacity: 0.8;
}

.switcher-btn-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.switcher-btn.active .switcher-btn-title {
    color: white;
}

.switcher-btn-meta {
    font-size: 13px;
    color: var(--text-muted);
}

/* Course Panel Animation */
.course-panel {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeOut 0.3s ease forwards;
}

.course-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: fadeIn 0.5s ease forwards;
}

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

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

@media (max-width: 768px) {
    .switcher-wrapper {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .switcher-highlight {
        width: 100%;
        height: 50%;
    }
    
    .switcher-highlight.right {
        left: 0;
        top: calc(50% + 6px);
    }
    
    .switcher-btn {
        padding: 16px 20px;
        gap: 16px;
    }
    
    .switcher-btn-icon {
        width: 50px;
        height: 50px;
    }
    
    .switcher-btn-icon i {
        font-size: 20px;
    }
    
    .switcher-btn-title {
        font-size: 16px;
    }
}

/* ========================================
 * COURSE DETAIL PAGE - Страница курсов
 * ======================================== */
.course-detail {
    padding: 80px 0;
    background: transparent;
    position: relative;
}

.course-detail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.2), transparent);
}

.course-detail.alt-bg {
    background: rgba(15, 23, 42, 0.5);
}

.course-detail-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 50px;
    align-items: start;
}

.course-detail-content h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
    line-height: 1.3;
}

.course-lead {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 30px;
}

.course-info-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}

.info-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

.info-card i {
    font-size: 24px;
    color: var(--accent-light);
}

.info-card .info-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.info-card .info-value {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.course-detail-content h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 40px 0 20px;
}

.course-program {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.program-day {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

.day-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-tertiary);
}

.day-number {
    padding: 6px 12px;
    background: var(--accent);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.day-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.day-topics {
    padding: 16px 20px;
    list-style: none;
}

.day-topics li {
    padding: 8px 0;
    padding-left: 24px;
    position: relative;
    color: var(--text-secondary);
    font-size: 14px;
    border-bottom: 1px solid var(--border-color);
}

.day-topics li:last-child {
    border-bottom: none;
}

.day-topics li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
}

.course-includes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.include-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 14px;
}

.include-item i {
    color: #10b981;
}

/* Sidebar */
.course-detail-sidebar {
    position: sticky;
    top: 270px;
}

.course-price-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 30px;
    text-align: center;
    margin-bottom: 20px;
}

.price-header {
    margin-bottom: 24px;
}

.price-label {
    display: block;
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.price-header .price-value {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
}

.price-header .price-note {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.price-info {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 16px;
}

.course-documents {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.course-documents h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.document-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 8px;
    transition: var(--transition);
}

.document-link:last-child {
    margin-bottom: 0;
}

.document-link:hover {
    background: var(--accent-muted);
    color: var(--accent-light);
}

.document-link i {
    color: #ef4444;
    font-size: 18px;
}

@media (max-width: 1024px) {
    .course-detail-grid {
        grid-template-columns: 1fr;
    }
    
    .course-detail-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .course-detail {
        padding: 60px 0;
    }
    
    .course-detail-content h2 {
        font-size: 24px;
    }
    
    .course-info-cards {
        grid-template-columns: 1fr;
    }
    
    .course-includes {
        grid-template-columns: 1fr;
    }
}

/* ========================================
 * INFO PAGE - Сведения об организации
 * ======================================== */
.info-nav-section {
    background: transparent;
    padding: 30px 0;
    position: sticky;
    top: 80px;
    z-index: 90;
    transition: all 0.3s ease;
}

.info-nav-section.is-stuck {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 42px 0px 18px;
    border-bottom: 1px solid rgba(6, 182, 212, 0.2);
}

.info-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.info-nav-item {
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    transition: var(--transition);
}

.info-nav-item:hover,
.info-nav-item.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.a11y-copy-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    margin-top: 8px;
    opacity: 0.6;
    transition: var(--transition);
}

.a11y-copy-link:hover {
    opacity: 1;
    color: var(--accent);
}

.a11y-copy-link i {
    font-size: 11px;
}

.info-section {
    padding: 80px 0;
    background: transparent;
    position: relative;
}

.info-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.2), transparent);
}

.info-section.alt-bg {
    background: rgba(15, 23, 42, 0.4);
}

.info-block h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.info-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--accent);
    color: white;
    border-radius: var(--radius);
    font-size: 18px;
    font-weight: 700;
}

.info-desc {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.info-table {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
}

.info-table:last-child {
    margin-bottom: 0;
}

.info-row {
    display: grid;
    grid-template-columns: 250px 1fr;
    border-bottom: 1px solid var(--border-color);
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    padding: 16px 20px;
    background: var(--bg-tertiary);
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 14px;
}

.info-value {
    padding: 16px 20px;
    color: var(--text-primary);
    font-size: 14px;
}

.info-value a {
    color: var(--accent-light);
}

.info-block h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 30px 0 16px;
}

.info-block h3:first-of-type {
    margin-top: 0;
}

/* Consistent card-style for standalone content in info-block */
.info-block > ul,
.info-block > div[itemprop] > ul {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px 20px 20px 40px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Structure cards */
.structure-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.structure-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
}

.structure-card.main {
    border-color: var(--accent);
}

.structure-icon {
    width: 60px;
    height: 60px;
    background: var(--accent-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.structure-icon i {
    font-size: 24px;
    color: var(--accent-light);
}

.structure-card h4 {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.structure-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.structure-contact {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.structure-info {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
}

.structure-info h4 {
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.structure-info p {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Documents */
.documents-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.documents-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.document-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: var(--transition);
}

.document-item:hover {
    border-color: var(--accent);
    background: var(--accent-muted);
}

.document-item i:first-child {
    color: #ef4444;
    font-size: 20px;
}

.document-item span {
    flex: 1;
}

.document-item i:last-child {
    color: var(--text-muted);
    font-size: 14px;
}

/* Staff table */
.staff-table {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.staff-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--border-color);
}

.staff-row:last-child {
    border-bottom: none;
}

.staff-row.header {
    background: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
}

.staff-row > div {
    padding: 16px 20px;
    font-size: 14px;
    color: var(--text-primary);
}

/* Teachers */
.teachers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.teacher-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
}

.teacher-avatar {
    width: 80px;
    height: 80px;
    background: var(--bg-tertiary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.teacher-avatar i {
    font-size: 32px;
    color: var(--text-muted);
}

.teacher-card h4 {
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.teacher-role {
    color: var(--accent-light);
    font-size: 14px;
    margin-bottom: 4px;
}

.teacher-edu {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 12px;
}

.teacher-programs {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* Equipment */
.equipment-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.equipment-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 14px;
}

.equipment-item i {
    color: var(--accent-light);
    font-size: 18px;
}

@media (max-width: 768px) {
    .info-row {
        grid-template-columns: 1fr;
    }
    
    .info-label {
        border-bottom: 1px solid var(--border-color);
    }
    
    .structure-cards,
    .documents-grid,
    .teachers-grid {
        grid-template-columns: 1fr;
    }
    
    .staff-row {
        grid-template-columns: 1fr;
    }
    
    .staff-row.header {
        display: none;
    }
    
    .equipment-list {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===== Materials Page ===== */
.materials-section {
    padding: var(--section-gap) 0;
}

.materials-notice {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 40px;
}

.materials-notice .notice-icon {
    width: 48px;
    height: 48px;
    background: var(--accent-muted);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.materials-notice .notice-icon i {
    font-size: 20px;
    color: var(--accent);
}

.materials-notice .notice-content h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.materials-notice .notice-content p {
    margin: 0;
    color: var(--text-secondary);
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 60px;
}

.material-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all 0.3s;
}

.material-card:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 40px rgba(6, 182, 212, 0.1);
}

.material-card-icon {
    width: 56px;
    height: 56px;
    background: var(--accent-muted);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.material-card-icon i {
    font-size: 24px;
    color: var(--accent);
}

.material-card-content h3 {
    margin: 0 0 8px;
    font-size: 20px;
}

.material-card-content > p {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.material-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.material-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.material-list li:last-child {
    border-bottom: none;
}

.material-list li i {
    color: #ef4444;
    font-size: 18px;
    flex-shrink: 0;
}

.material-list li a {
    color: var(--text-primary);
    text-decoration: none;
    flex: 1;
}

.material-list li a:hover {
    color: var(--accent);
}

.material-badge {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.material-badge.available {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.material-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.material-link:hover {
    text-decoration: underline;
}

.materials-electronic {
    margin-top: 60px;
}

.electronic-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 30px;
}

.electronic-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 30px;
    text-align: center;
}

.electronic-icon {
    width: 64px;
    height: 64px;
    background: var(--accent-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.electronic-icon i {
    font-size: 28px;
    color: var(--accent);
}

.electronic-card h4 {
    margin: 0 0 12px;
    font-size: 18px;
}

.electronic-card p {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.electronic-note {
    display: inline-block;
    font-size: 13px;
    color: var(--text-muted);
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius);
}

/* ===== License Page ===== */
.license-section {
    padding: var(--section-gap) 0;
}

.license-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
}

.license-card.main-license {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.license-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.05));
    border-bottom: 1px solid var(--border-color);
}

.license-icon {
    width: 56px;
    height: 56px;
    background: rgba(16, 185, 129, 0.2);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.license-icon i {
    font-size: 28px;
    color: #10b981;
}

.status-active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.license-card-body {
    padding: 24px;
}

.license-card-body h2 {
    font-size: 22px;
    margin: 0 0 24px;
}

.license-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.license-detail {
    display: flex;
    gap: 12px;
}

.detail-label {
    color: var(--text-muted);
    font-size: 14px;
    min-width: 120px;
}

.detail-value {
    color: var(--text-primary);
    font-size: 14px;
}

.license-card-footer {
    padding: 24px;
    border-top: 1px solid var(--border-color);
}

.license-types {
    margin-top: 30px;
}

.license-types h3 {
    margin-bottom: 20px;
}

.types-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.type-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.type-icon {
    width: 44px;
    height: 44px;
    background: var(--accent-muted);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.type-icon i {
    font-size: 20px;
    color: var(--accent);
}

.type-card h4 {
    font-size: 15px;
    margin: 0 0 8px;
}

.type-card p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.license-documents h3 {
    margin-bottom: 20px;
}

.documents-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

.document-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px;
    text-decoration: none;
    transition: all 0.3s;
}

.document-item:hover {
    border-color: var(--accent);
}

.document-icon {
    width: 44px;
    height: 44px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.document-icon i {
    font-size: 20px;
    color: #ef4444;
}

.document-info {
    flex: 1;
}

.document-name {
    display: block;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 4px;
}

.document-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.document-action {
    color: var(--text-muted);
}

.registry-info {
    display: flex;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.registry-icon {
    width: 48px;
    height: 48px;
    background: var(--accent-muted);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.registry-icon i {
    font-size: 20px;
    color: var(--accent);
}

.registry-content h4 {
    margin: 0 0 8px;
    font-size: 16px;
}

.registry-content p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.registry-content a {
    color: var(--accent);
    text-decoration: none;
    font-size: 14px;
}

/* ===== Teachers Page ===== */
.teachers-section {
    padding: var(--section-gap) 0;
}

.teachers-section .teachers-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 40px;
}

.teachers-section .teacher-card {
    display: flex;
    gap: 30px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 30px;
    text-align: left;
}

.teacher-photo {
    flex-shrink: 0;
}

.teacher-photo-placeholder {
    width: 120px;
    height: 120px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.teacher-photo-placeholder i {
    font-size: 48px;
    color: var(--text-muted);
}

.teacher-info {
    flex: 1;
}

.teacher-name {
    font-size: 22px;
    margin: 0 0 8px;
}

.teacher-position {
    display: inline-block;
    background: var(--accent-muted);
    color: var(--accent);
    padding: 6px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 20px;
}

.teacher-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.teacher-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.teacher-detail .detail-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.teacher-detail .detail-label i {
    color: var(--accent);
}

.teacher-detail .detail-value {
    font-size: 14px;
    color: var(--text-primary);
    padding-left: 24px;
}

.teacher-desc {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.teacher-courses h4 {
    font-size: 14px;
    margin: 0 0 12px;
    color: var(--text-muted);
}

.teacher-courses ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.teacher-courses li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 8px;
}

.teacher-courses li i {
    color: #10b981;
    margin-top: 3px;
}

.teachers-note {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.teachers-note .note-icon {
    width: 48px;
    height: 48px;
    background: var(--accent-muted);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.teachers-note .note-icon i {
    font-size: 20px;
    color: var(--accent);
}

.teachers-note .note-content h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.teachers-note .note-content p {
    margin: 0;
    color: var(--text-secondary);
}

.teachers-note .note-content a {
    color: var(--accent);
}

/* ===== Sveden Tables ===== */
.sveden-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 16px 0 28px;
    font-size: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.sveden-table thead th {
    background: var(--bg-tertiary);
    color: var(--accent-light);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 14px 16px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 2px solid var(--accent-muted);
}

.sveden-table tbody td {
    padding: 12px 16px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
    line-height: 1.5;
}

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

.sveden-table tbody tr:hover {
    background: var(--bg-card-hover);
}

.sveden-table tbody td a {
    color: var(--accent-light);
    text-decoration: none;
    transition: var(--transition);
}

.sveden-table tbody td a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* Responsive: horizontal scroll wrapper */
.sveden-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 16px 0 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    position: relative;
}

.sveden-table-wrap .sveden-table {
    margin: 0;
    min-width: 900px;
    border: none;
    border-radius: 0;
}

/* Custom scrollbar */
.sveden-table-wrap::-webkit-scrollbar {
    height: 8px;
}

.sveden-table-wrap::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.sveden-table-wrap::-webkit-scrollbar-thumb {
    background: var(--accent-dark);
    border-radius: 4px;
}

.sveden-table-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* Scroll hint gradient */
.sveden-table-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 8px;
    width: 40px;
    background: linear-gradient(to left, var(--bg-card), transparent);
    pointer-events: none;
    border-radius: 0 var(--radius-lg) 0 0;
    opacity: 0.7;
    transition: var(--transition);
}

.sveden-table-wrap.scrolled-end::after {
    opacity: 0;
}

@media (max-width: 768px) {
    .sveden-table {
        font-size: 13px;
    }
    .sveden-table thead th,
    .sveden-table tbody td {
        padding: 10px 12px;
    }
    .sveden-table thead th {
        font-size: 11px;
    }
}

/* ===== Documents List ===== */
.docs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.doc-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition);
}

.doc-item:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-muted);
    transform: translateX(4px);
}

.doc-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-muted);
    border-radius: var(--radius);
    flex-shrink: 0;
}

.doc-icon i {
    font-size: 20px;
    color: var(--accent-light);
}

.doc-info {
    flex: 1;
    min-width: 0;
}

.doc-name {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}

.doc-meta {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.doc-download {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-tertiary);
    flex-shrink: 0;
    transition: all var(--transition);
}

.doc-download i {
    font-size: 14px;
    color: var(--text-muted);
    transition: color var(--transition);
}

.doc-item:hover .doc-download {
    background: var(--accent);
}

.doc-item:hover .doc-download i {
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .doc-item {
        padding: 12px 14px;
        gap: 12px;
    }
    .doc-icon {
        width: 38px;
        height: 38px;
    }
    .doc-icon i {
        font-size: 16px;
    }
    .doc-name {
        font-size: 14px;
    }
}

/* Mobile */
@media (max-width: 991px) {
    .materials-grid,
    .electronic-cards,
    .license-grid,
    .types-grid {
        grid-template-columns: 1fr;
    }
    
    .teachers-section .teacher-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .teacher-detail .detail-value {
        padding-left: 0;
    }
}