/* ================================
   RESET И БАЗОВЫЕ СТИЛИ
   ================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: rgb(19,18,20);
    color: #fff;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ================================
   CSS ПЕРЕМЕННЫЕ
   ================================ */
:root {
    /* Фоны */
    --background-header: rgba(0, 0, 0, 0.95);
    --background-main: rgb(19,18,20);
    --background-primary: #1e1f23;
    --background-secondary: #2a2b30;
    --background-card: rgba(255, 255, 255, 0.05);
    --background-dark: rgb(19,18,20);
    --background-darker: #0f0f0f;
    
    /* Градиенты */
    --gradient-primary: linear-gradient(135deg, #8b5cf6, #a855f7);
    --gradient-secondary: linear-gradient(135deg, #7c3aed, #9333ea);
    --gradient-purple: linear-gradient(135deg, #7728AF 0%, #A557A7 50%, #E750E2 100%);
    
    /* Цвета текста */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.6);
    --text-accent: #8b5cf6;
    
    /* Цвета кнопок */
    --button-primary-bg: var(--gradient-primary);
    --button-primary-hover: var(--gradient-secondary);
    --button-secondary-bg: transparent;
    --button-secondary-border: rgba(255, 255, 255, 0.2);
    --button-special-border: rgba(255, 255, 255, 0.1);
    --button-special-hover: rgba(255, 255, 255, 0.05);
    
    /* Тени */
    --shadow-header: 0 2px 20px rgba(139, 92, 246, 0.1);
    --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.2);
    --shadow-dropdown: 0 6px 12px 0 rgba(25, 26, 30, 0.45);
    
    /* Акцентные цвета */
    --accent-purple: rgb(192, 56, 243);
    --accent-pink: #E750E2;
    --accent-gold: #FFD700;
    --accent-cyan: #00FFFF;
    
    /* Размеры */
    --header-height: 60px;
    --container-padding: 80px;
    --border-radius: 12px;
    --border-radius-large: 20px;
    
    /* Enhanced Typography System - Based on Carbon Design System */
    /* Font families - IBM Plex with fallbacks */
    --font-family-primary: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'IBM Plex Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    
    /* Fluid Type Scale - Responsive typography with optimal reading sizes */
    --font-size-xs: clamp(0.75rem, 2vw, 0.8125rem);     /* 12px - 13px */
    --font-size-sm: clamp(0.8125rem, 2.5vw, 0.875rem);  /* 13px - 14px */
    --font-size-base: clamp(0.875rem, 2.5vw, 1rem);     /* 14px - 16px */
    --font-size-lg: clamp(1rem, 3vw, 1.125rem);         /* 16px - 18px */
    --font-size-xl: clamp(1.125rem, 4vw, 1.25rem);      /* 18px - 20px */
    --font-size-2xl: clamp(1.25rem, 5vw, 1.5rem);       /* 20px - 24px */
    --font-size-3xl: clamp(1.5rem, 5vw, 1.75rem);       /* 24px - 28px */
    --font-size-4xl: clamp(1.75rem, 4vw, 2.25rem);      /* 28px - 36px */
    --font-size-5xl: clamp(2.25rem, 6vw, 3rem);         /* 36px - 48px */
    
    /* Line Heights - Optimized for readability */
    --line-height-tight: 1.25;     /* Headlines and large text */
    --line-height-snug: 1.375;     /* Subheadings */
    --line-height-normal: 1.5;     /* General text */
    --line-height-relaxed: 1.6;    /* Body text - optimal for reading */
    --line-height-loose: 2;        /* Spacious text */
    
    /* Letter Spacing - Relative units for better scaling */
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0em;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;
    
    /* Font Weights - IBM Plex Sans weight scale */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Reading Constraints - Optimal line lengths for different contexts */
    --measure-narrow: 45ch;   /* Narrow reading line for captions */
    --measure-base: 65ch;     /* Optimal reading line for body text */
    --measure-wide: 75ch;     /* Wide reading line for large text */
    
    /* Spacing Scale - Consistent vertical rhythm */
    --space-xs: 0.25rem;     /* 4px */
    --space-sm: 0.5rem;      /* 8px */
    --space-md: 0.75rem;     /* 12px */
    --space-lg: 1rem;        /* 16px */
    --space-xl: 1.25rem;     /* 20px */
    --space-2xl: 1.5rem;     /* 24px */
    --space-3xl: 2rem;       /* 32px */
    --space-4xl: 2.5rem;     /* 40px */
    --space-5xl: 3rem;       /* 48px */
}

/* ================================
   АНИМАЦИИ (ЕДИНЫЕ)
   ================================ */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(3deg);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.05);
        opacity: 0.8;
    }
    100% { 
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}

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

/* ================================
   LAYOUT И КОНТЕЙНЕРЫ
   ================================ */
.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.layout__main {
    flex: 1;
    padding-top: var(--header-height);
}

.container {
    width: 100%;
    margin: 0;
    padding: 0 var(--container-padding);
}

main {
    margin-top: var(--header-height);
    min-height: 100vh;
    width: 100%;
}

/* ================================
   ОБЩИЕ КЛАССЫ УТИЛИТЫ
   ================================ */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(26, 26, 26, 0.5);
}

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

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

.wp-block-group {
    margin: 0;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.glow-effect {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

.pulse-animation {
    animation: pulse 2s infinite;
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

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

.fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
}

/* ================================
   ТЕКСТОВЫЕ ПРАВИЛА ДЛЯ РУССКОГО ЯЗЫКА
   ================================ */
p, h1, h2, h3, h4, h5, h6, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Специальные правила для длинных слов */
.text-content, .content, .description {
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
}