/* =============================================================================
   НОВЫЕ СТИЛИ ДЛЯ ИНТЕРАКТИВНЫХ БЛОКОВ
   Киберпанк дизайн для создания дебаффов, конструктора и подписки
   ============================================================================= */

/* -----------------------------------------------------------------------------
   БЛОК "СОЗДАНИЕ ДЕБАФФОВ" - ИНТЕРАКТИВНЫЕ КАРТОЧКИ
   ----------------------------------------------------------------------------- */

.create-methods-interactive {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
    margin: 3rem 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.create-method-card {
    position: relative;
    padding: 0;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    transform: perspective(1000px) rotateY(0);
}

.create-method-card:hover {
    transform: perspective(1000px) rotateY(-2deg) translateY(-5px);
}

.create-method-card.self-creation:hover {
    transform: perspective(1000px) rotateY(2deg) translateY(-5px);
}

.method-card-inner {
    position: relative;
    background: rgba(var(--card-bg-rgb), 0.8);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 2rem;
    height: 100%;
    min-height: 400px;
    transition: all var(--transition-speed) ease;
}

.method-glow-bg {
    position: absolute;
    inset: 0;
    border-radius: 15px;
    background: linear-gradient(45deg, 
        rgba(var(--primary-color-rgb), 0.1), 
        rgba(var(--accent-color-rgb), 0.05));
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
}

.create-method-card:hover .method-glow-bg {
    opacity: 1;
}

.premium-ready .method-glow-bg.premium-glow {
    background: linear-gradient(45deg, 
        rgba(var(--premium-color-rgb), 0.1), 
        rgba(var(--premium-color-rgb), 0.05));
}

.method-card-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.method-icon-container {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}

.method-icon {
    font-size: 3rem;
    color: var(--accent-color);
    transition: all var(--transition-speed) ease;
}

.premium .method-icon {
    color: var(--premium-color);
}

.method-icon-particles {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.2), transparent);
    opacity: 0;
    transform: scale(0.8);
    transition: all var(--transition-speed) ease;
}

.premium-particles {
    background: radial-gradient(circle, rgba(var(--premium-color-rgb), 0.2), transparent);
}

.create-method-card:hover .method-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px currentColor);
}

.create-method-card:hover .method-icon-particles {
    opacity: 1;
    transform: scale(1.5);
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0%, 100% { transform: scale(1.5); opacity: 0.3; }
    50% { transform: scale(1.8); opacity: 0.1; }
}

.method-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--heading-color);
}

.method-description {
    color: var(--text-color);
    opacity: 0.8;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.method-features-visual {
    margin-bottom: 2rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all var(--transition-speed-fast) ease;
}

.feature-item:hover {
    background: rgba(var(--accent-color-rgb), 0.05);
    transform: translateX(5px);
}

.feature-icon {
    color: var(--accent-color);
    font-size: 0.9rem;
    width: 16px;
}

.method-card-footer {
    margin-top: auto;
}

.method-learn-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    background: transparent;
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--transition-speed) ease;
    position: relative;
    overflow: hidden;
}

.method-learn-btn.premium-btn {
    border-color: var(--premium-color);
    color: var(--premium-color);
}

.method-learn-btn:hover {
    background: var(--accent-color);
    color: var(--bg-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(var(--accent-color-rgb), 0.3);
}

.method-learn-btn.premium-btn:hover {
    background: var(--premium-color);
    box-shadow: 0 5px 15px rgba(var(--premium-color-rgb), 0.3);
}

.btn-arrow {
    transition: transform var(--transition-speed) ease;
}

.method-learn-btn:hover .btn-arrow {
    transform: translateX(3px);
}

/* VS разделитель */
.vs-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.vs-circle {
    position: relative;
    width: 80px;
    height: 80px;
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--card-bg-rgb), 0.9);
    backdrop-filter: blur(10px);
    animation: vs-rotate 4s linear infinite;
}

/* VS разделитель - статичная версия */
.vs-circle-static {
    position: relative;
    width: 80px;
    height: 80px;
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--card-bg-rgb), 0.9);
    backdrop-filter: blur(10px);
}

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

.vs-text {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--accent-color);
    z-index: 2;
}

.vs-lightning {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: conic-gradient(var(--accent-color), transparent, var(--accent-color));
    opacity: 0.3;
    animation: vs-lightning 2s ease-in-out infinite;
}

@keyframes vs-lightning {
    0%, 100% { opacity: 0.1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.1); }
}

/* Информация о формате файлов */
.debuff-format-info {
    margin-top: 3rem;
}

.format-info-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: rgba(var(--card-bg-rgb), 0.6);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
    transition: all var(--transition-speed) ease;
}

.format-info-card:hover {
    background: rgba(var(--card-bg-rgb), 0.8);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.format-icon {
    font-size: 2.5rem;
    color: var(--accent-color);
}

.format-text h4 {
    color: var(--heading-color);
    margin-bottom: 0.5rem;
}

.format-text p {
    color: var(--text-color);
    opacity: 0.8;
    margin: 0;
}

/* -----------------------------------------------------------------------------
   РАЗДЕЛ "PREMIUM CONTENT" - ГОТОВЫЕ ДЕБАФФЫ И СТИЛИ
   ----------------------------------------------------------------------------- */

.debuff-icon-classic {
    font-size: 2rem;
    z-index: 2;
}

.debuff-info-classic {
    flex-grow: 1;
    z-index: 2;
}

.debuff-name-classic {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.debuff-timer-classic {
    position: relative;
    display: inline-block;
}

.timer-bg-classic {
    position: absolute;
    inset: 0;
    background: #3498db;
    border-radius: 4px;
    opacity: 0.3;
}

.timer-text-classic {
    position: relative;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 0.2rem 0.6rem;
}

/* Синий стиль дебаффов */
.debuff-preview-blue {
    position: relative;
    background: linear-gradient(135deg, #1e3c72, #2a5298);
    border-radius: 12px;
    padding: 1.2rem;
    color: white;
    overflow: hidden;
}

.debuff-border-blue {
    position: absolute;
    inset: 0;
    border: 2px solid #64b5f6;
    border-radius: 12px;
    animation: blue-pulse 2s ease-in-out infinite;
}

@keyframes blue-pulse {
    0%, 100% { border-color: #64b5f6; box-shadow: 0 0 10px rgba(100, 181, 246, 0.3); }
    50% { border-color: #42a5f5; box-shadow: 0 0 20px rgba(66, 165, 245, 0.5); }
}

.debuff-content-blue {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 2;
}

.debuff-icon-blue {
    font-size: 2rem;
}

.debuff-text-blue {
    flex-grow: 1;
}

.debuff-name-blue {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: #e3f2fd;
}

.debuff-timer-blue {
    font-size: 1.3rem;
    font-weight: bold;
    color: #64b5f6;
    background: rgba(100, 181, 246, 0.2);
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
}

/* Превью стилей чата */
.chat-preview-standard {
    background: #2c2f33;
    border-radius: 8px;
    padding: 1rem;
    color: white;
    font-family: 'Segoe UI', sans-serif;
    max-height: 100px;
    overflow: hidden;
}

.chat-message-standard {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
    position: relative;
}

.chat-message-standard.debuff-activation {
    background: rgba(114, 137, 218, 0.1);
    border-left: 3px solid #7289da;
    padding-left: 0.5rem;
    border-radius: 0 6px 6px 0;
}

.message-avatar-standard {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #7289da;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.message-content-standard {
    flex-grow: 1;
    min-width: 0;
}

.message-author-standard {
    color: #7289da;
    font-weight: 600;
    font-size: 0.9rem;
}

.message-text-standard {
    color: #dcddde;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

.message-text-standard.debuff-text {
    background: #43b581;
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.activation-indicator {
    position: absolute;
    right: 0.5rem;
    top: 0.2rem;
    font-size: 0.8rem;
}

/* Минимальный стиль чата */
.chat-preview-minimal {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 0.8rem;
    color: #ccc;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
}

.chat-message-minimal {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chat-message-minimal.debuff-minimal {
    color: #00ff88;
}

.message-author-minimal {
    color: #888;
    font-weight: 500;
}

.message-text-minimal {
    color: #ccc;
}

.status-minimal {
    color: #00ff88;
    font-weight: bold;
}

/* Превью стилей очереди */
.queue-preview-neon {
    background: linear-gradient(135deg, #1a0033, #330066);
    border-radius: 10px;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

.queue-preview-neon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, rgba(255, 0, 255, 0.1), rgba(0, 255, 255, 0.1));
    animation: neon-flow 3s ease-in-out infinite;
}

@keyframes neon-flow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.queue-item-neon {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
    position: relative;
    z-index: 2;
    padding: 0.6rem;
    border-radius: 8px;
    transition: all var(--transition-speed) ease;
}

.queue-item-neon.active {
    background: rgba(255, 0, 255, 0.2);
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
}

.queue-number-neon {
    width: 30px;
    height: 30px;
    background: linear-gradient(45deg, #ff00ff, #00ffff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
}

.queue-debuff-neon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
}

.queue-emoji-neon {
    font-size: 1.2rem;
}

.queue-name-neon {
    font-size: 0.9rem;
    font-weight: 500;
}

.neon-glow-effect {
    position: absolute;
    inset: 0;
    border: 1px solid #ff00ff;
    border-radius: 8px;
    animation: neon-glow 2s ease-in-out infinite;
}

@keyframes neon-glow {
    0%, 100% { box-shadow: 0 0 5px #ff00ff; }
    50% { box-shadow: 0 0 20px #ff00ff, 0 0 30px #ff00ff; }
}

/* Киберпанк стиль очереди */
.queue-preview-cyber {
    background: linear-gradient(135deg, #0f0f0f, #1a1a2e);
    border: 1px solid #00d4ff;
    border-radius: 8px;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

.queue-item-cyber {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
    padding: 0.8rem;
    background: rgba(0, 212, 255, 0.05);
    border-radius: 6px;
    position: relative;
    transition: all var(--transition-speed) ease;
}

.queue-item-cyber.current {
    background: rgba(0, 212, 255, 0.15);
    border: 1px solid #00d4ff;
}

.cyber-border {
    position: absolute;
    inset: 0;
    border: 1px solid #00d4ff;
    border-radius: 6px;
    animation: cyber-pulse 2s ease-in-out infinite;
}

@keyframes cyber-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; box-shadow: 0 0 10px #00d4ff; }
}

.queue-position-cyber {
    width: 24px;
    height: 24px;
    background: #00d4ff;
    color: #0f0f0f;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
}

.queue-content-cyber {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.queue-icon-cyber {
    font-size: 1.1rem;
}

.queue-title-cyber {
    color: #00d4ff;
    font-size: 0.9rem;
    font-weight: 500;
}

.cyber-particles {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: #00d4ff;
    border-radius: 50%;
    box-shadow: 
        8px 0 0 #00d4ff,
        16px 0 0 #00d4ff;
    animation: cyber-particles 1.5s ease-in-out infinite;
}

@keyframes cyber-particles {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; transform: translateY(-50%) translateX(5px); }
}

/* Карточка "Еще стили" */
.more-styles-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1rem;
    text-align: center;
    min-height: 100px;
    justify-content: center;
}

.premium-badge-small {
    background: linear-gradient(45deg, var(--premium-color), #ffeb3b);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    box-shadow: 0 4px 15px rgba(var(--premium-color-rgb), 0.3);
}

.premium-badge-small i {
    font-size: 0.6rem;
}

.styles-count {
    color: var(--text-color);
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Дополнительная информация */
.styles-additional-info {
    margin-top: 3rem;
}

.info-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.info-card-style {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(var(--card-bg-rgb), 0.6);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all var(--transition-speed) ease;
}

.info-card-style:hover {
    background: rgba(var(--card-bg-rgb), 0.8);
    border-color: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(var(--accent-color-rgb), 0.1);
}

.info-icon-style {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-icon-style i {
    color: white;
    font-size: 1.3rem;
}

.info-content-style h4 {
    color: var(--heading-color);
    font-size: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.info-content-style p {
    color: var(--text-color);
    opacity: 0.8;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

/* -----------------------------------------------------------------------------
   ПОДПИСКИ - МОДЕРНЫЕ ИНТЕРАКТИВНЫЕ КАРТОЧКИ
   ----------------------------------------------------------------------------- */

.subscription-tiers-interactive {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 2rem;
    margin: 3rem 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
}

.tier-card-modern {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(var(--card-bg-rgb), 0.8);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    min-height: 500px;
}

.tier-card-modern:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--accent-color);
}

.tier-card-modern.recommended {
    transform: scale(1.05);
    z-index: 10;
}

.tier-card-modern.recommended:hover {
    transform: translateY(-8px) scale(1.08);
}

.tier-card-glow {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
}

.trial-glow {
    background: linear-gradient(45deg, 
        rgba(var(--accent-color-rgb), 0.1), 
        rgba(var(--primary-color-rgb), 0.05));
}

.standard-glow {
    background: linear-gradient(45deg, 
        rgba(var(--primary-color-rgb), 0.15), 
        rgba(var(--accent-color-rgb), 0.1));
}

.premium-glow {
    background: linear-gradient(45deg, 
        rgba(var(--premium-color-rgb), 0.15), 
        rgba(var(--premium-color-rgb), 0.05));
}

.tier-card-modern:hover .tier-card-glow {
    opacity: 1;
}

.recommended-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    z-index: 5;
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3);
}

.tier-header-modern {
    text-align: center;
    padding: 2rem 2rem 1.5rem;
    position: relative;
}

.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(var(--accent-color-rgb), 0.1);
    border: 1px solid var(--accent-color);
    border-radius: 20px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--accent-color);
    margin-bottom: 1rem;
}

.tier-badge.standard {
    background: rgba(var(--primary-color-rgb), 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.tier-badge.premium {
    background: rgba(var(--premium-color-rgb), 0.1);
    border-color: var(--premium-color);
    color: var(--premium-color);
}

.tier-title {
    font-size: 1.3rem;
    color: var(--heading-color);
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.tier-price-container {
    margin-bottom: 1rem;
}

.tier-price-main {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
    margin-bottom: 0.3rem;
}

.tier-price-main.premium {
    color: var(--premium-color);
    background: linear-gradient(45deg, var(--premium-color), #ffeb3b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tier-price-period {
    font-size: 0.9rem;
    color: var(--text-color);
    opacity: 0.7;
}

.tier-content-modern {
    flex-grow: 1;
    padding: 0 2rem;
}

.tier-features-visual {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.feature-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem;
    border-radius: 10px;
    transition: all var(--transition-speed-fast) ease;
}

.feature-row:hover {
    background: rgba(var(--accent-color-rgb), 0.05);
    transform: translateX(5px);
}

.feature-row.limitation {
    opacity: 0.7;
}

.feature-row.premium-feature:hover {
    background: rgba(var(--premium-color-rgb), 0.05);
}

.feature-check {
    font-size: 1rem;
    color: var(--accent-color);
    width: 20px;
    flex-shrink: 0;
}

.feature-check.standard {
    color: var(--primary-color);
}

.feature-check.premium {
    color: var(--premium-color);
}

.feature-clock {
    color: #ff6b35;
    width: 20px;
    flex-shrink: 0;
}

.feature-row span {
    color: var(--text-color);
    font-size: 0.95rem;
    line-height: 1.4;
}

.tier-footer-modern {
    padding: 1.5rem 2rem 2rem;
    margin-top: auto;
}

.tier-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    padding: 1rem 1.5rem;
    background: transparent;
    border: 2px solid var(--accent-color);
    border-radius: 12px;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-speed) ease;
}

.tier-btn.standard-btn {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.tier-btn.premium-btn {
    border-color: var(--premium-color);
    color: var(--premium-color);
}

.btn-bg {
    position: absolute;
    inset: 0;
    background: var(--accent-color);
    transform: translateY(100%);
    transition: transform var(--transition-speed) ease;
}

.standard-btn .btn-bg {
    background: var(--primary-color);
}

.premium-btn .btn-bg {
    background: var(--premium-color);
}

.tier-btn:hover {
    color: var(--bg-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--accent-color-rgb), 0.3);
}

.tier-btn.standard-btn:hover {
    box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.3);
}

.tier-btn.premium-btn:hover {
    box-shadow: 0 8px 25px rgba(var(--premium-color-rgb), 0.3);
}

.tier-btn:hover .btn-bg {
    transform: translateY(0);
}

.btn-text {
    position: relative;
    z-index: 2;
}

.btn-icon {
    position: relative;
    z-index: 2;
    transition: transform var(--transition-speed) ease;
}

.tier-btn:hover .btn-icon {
    transform: scale(1.1);
}

/* Премиум эффекты */
.premium-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.premium-sparkles::before,
.premium-sparkles::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--premium-color);
    border-radius: 50%;
    animation: sparkle 3s infinite;
    opacity: 0;
}

.premium-sparkles::before {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.premium-sparkles::after {
    top: 60%;
    right: 20%;
    animation-delay: 1.5s;
}

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

/* -----------------------------------------------------------------------------
   АДАПТИВНОСТЬ ДЛЯ НОВЫХ БЛОКОВ
   ----------------------------------------------------------------------------- */

/* Планшеты */

/* Мобильные устройства */

.combo-arrow {
    color: var(--accent-color);
    font-size: 1.2rem;
}

/* -----------------------------------------------------------------------------
   ПЕРЕМЕННЫЕ И ОСНОВНАЯ КОНФИГУРАЦИЯ
   ----------------------------------------------------------------------------- */

:root {
    /* Цветовая палитра */
    --primary-color: #8e44ad;          /* Основной фиолетовый */
    --secondary-color: #9b59b6;        /* Вторичный фиолетовый */
    --accent-color: #00e0ff;           /* Акцентный голубой (циан) */
    --premium-color: #ffc107;          /* Цвет для премиум-элементов (золотой) */
    
    /* RGB значения для прозрачности */
    --primary-color-rgb: 142, 68, 173;
    --accent-color-rgb: 0, 224, 255;
    --premium-color-rgb: 255, 193, 7;
    
    /* Цвета текста и фона */
    --text-color: #e0e0e0;            /* Основной цвет текста */
    --heading-color: #ffffff;          /* Цвет заголовков */
    --bg-color: #0a0a0d;              /* Цвет фона страницы */
    --card-bg-rgb: 28, 28, 34;        /* Фон карточек в RGB (для rgba) */
    
    /* Эффекты и тени */
    --glass-opacity: 0.5;             /* Прозрачность для "стеклянных" элементов */
    --glass-blur: 5px;                /* Размытие для "стеклянных" элементов */
    --border-color: rgba(255, 255, 255, 0.07); /* Цвет границ */
    
    /* Тени */
    --shadow-color-light: rgba(0, 0, 0, 0.15);
    --shadow-color-medium: rgba(0, 0, 0, 0.3);
    --shadow-color-strong: rgba(var(--accent-color-rgb), 0.2);
    
    /* Неоновые эффекты */
    --neon-glow-primary: rgba(var(--primary-color-rgb), 0.6);
    --neon-glow-accent: rgba(var(--accent-color-rgb), 0.7);
    --neon-border-color: rgba(var(--accent-color-rgb), 0.5);
    --neon-hover-border-color: rgba(var(--accent-color-rgb), 1);
    
    /* Типографика */
    --font-family-headings: 'Exo 2', sans-serif;  /* Шрифт для заголовков */
    --font-family: 'Inter', sans-serif;            /* Основной шрифт для текста */
    --font-family-chat: 'Rajdhani', sans-serif;   /* Шрифт для виджета чата */
    
    /* Переходы и анимации */
    --transition-speed: 0.3s;         /* Стандартная скорость перехода */
    --transition-speed-fast: 0.2s;    /* Быстрая скорость перехода */
    --animation-speed: 0.6s;          /* Скорость анимаций (например, AOS) */
    
    /* Готовые тени */
    --shadow-soft: 0 2px 6px var(--shadow-color-light);
    --shadow-medium: 0 4px 12px var(--shadow-color-medium);
    --shadow-strong: 0 5px 18px var(--shadow-color-strong);
    
    /* Аура курсора */
    --mouse-x: 50vw;
    --mouse-y: 50vh;                  /* Координаты курсора (обновляются через JS) */
    --cursor-aura-color: rgba(var(--accent-color-rgb), 0.04);
    --cursor-aura-size: 300px;
    
    /* Размеры и отступы */
    --header-height: 65px;            /* Высота шапки */
    --max-width: 1100px;              /* Стандартная максимальная ширина контента */
    --max-width-wide: 1280px;         /* Увеличенная максимальная ширина */
    --max-width-lg: 820px;            /* Максимальная ширина для текстовых блоков */
    --container-padding: 20px;        /* Внутренний отступ контейнеров */
}

/* -----------------------------------------------------------------------------
   СБРОС СТИЛЕЙ И БАЗОВЫЕ НАСТРОЙКИ
   ----------------------------------------------------------------------------- */

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

html {
    scroll-behavior: smooth;          /* Плавная прокрутка для якорных ссылок */
    font-size: 15.5px;               /* Базовый размер шрифта */
    overflow-x: hidden;              /* Предотвращение горизонтальной прокрутки */
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    position: relative;              /* Для позиционирования дочерних элементов */
    overflow-x: hidden;             /* Предотвращение горизонтальной прокрутки */
    min-height: 100vh;
}

/* -----------------------------------------------------------------------------
   АНИМИРОВАННЫЙ ФОН И ЭФФЕКТЫ
   ----------------------------------------------------------------------------- */

/* Контейнер для частиц */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;                    /* Размещается за всем содержимым */
    background-color: var(--bg-color);
}

/* Эффект ауры вокруг курсора */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;           /* Не перехватывает события мыши */
    background: radial-gradient(
        circle var(--cursor-aura-size) at var(--mouse-x) var(--mouse-y), 
        var(--cursor-aura-color), 
        transparent 70%
    );
    z-index: -1;                   /* Между частицами и контентом */
    transition: background 0.1s ease-out; /* Плавное перемещение ауры */
}

/* -----------------------------------------------------------------------------
   ТИПОГРАФИКА И ТЕКСТОВЫЕ СТИЛИ
   ----------------------------------------------------------------------------- */

/* Заголовки */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    margin-bottom: 0.6rem;
    font-weight: 600;
    color: var(--heading-color);
    font-family: var(--font-family-headings);
}

h1 {
    font-size: 2.6rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

h2.section-title {
    font-size: 2.2rem;
    margin-bottom: 0.7rem;
    font-weight: 600;
}

h3.subsection-title {
    font-size: 1.4rem;
    color: var(--secondary-color);
    margin-bottom: 0.8rem;
    margin-top: 1.2rem;
    font-weight: 500;
}

h4 {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

/* Основной текст */
p {
    margin-bottom: 0.9rem;
    opacity: 0.8;
    font-weight: 300;
    font-size: 0.95rem;
}

/* Специальные классы для текста */
.section-description {
    font-size: 1rem;
    color: var(--text-color);
    opacity: 0.75;
    max-width: var(--max-width-lg);
    margin: 0 auto 1.8rem auto;
    line-height: 1.65;
}

.section-sub-description {
    font-size: 0.9rem;
    opacity: 0.7;
    max-width: var(--max-width-lg);
    margin: 1.2rem auto 0 auto;
    line-height: 1.6;
}

/* Утилиты для выравнивания */
.text-center { text-align: center; }
.max-width-lg { 
    max-width: var(--max-width-lg); 
    margin: 0 auto; 
}

/* Ссылки */
a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color var(--transition-speed-fast) ease;
}

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

a.text-link {
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 400;
}

a.text-link:hover {
    text-decoration: none;
}

/* Выделение текста */
.highlight {
    color: var(--accent-color);
    font-weight: 500;
}

.highlight-huge-text {
    color: var(--accent-color);
    font-size: 3rem;
    line-height: 1.15;
    margin-bottom: 0.7rem;
}

/* Стили для клавиш */
kbd {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ddd;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.8em;
    margin: 0 1px;
}

/* Теги платформ */
.platform-tag {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 500;
    margin: 0 1px;
    vertical-align: middle;
    line-height: 1.2;
}

.platform-tag.youtube-sm {
    background-color: rgba(255, 0, 0, 0.7);
    color: white;
}

.platform-tag.twitch-sm {
    background-color: rgba(145, 70, 255, 0.7);
    color: white;
}

.platform-tag.donationalerts-sm {
    background-color: rgba(255, 140, 0, 0.7);
    color: white;
}

/* Премиум элементы */
.premium-icon-inline {
    color: var(--premium-color);
    font-size: 0.85em;
    margin: 0 1px 0 3px;
}

.premium-text {
    font-weight: 500;
    color: var(--premium-color);
}

/* -----------------------------------------------------------------------------
   КОМПОНЕНТЫ: КНОПКИ
   ----------------------------------------------------------------------------- */

/* Неоновая кнопка входа */
.button-login-neon {
    /* Переменные для кнопки */
    --btn-neon-color: var(--primary-color);
    --btn-neon-glow: rgba(var(--primary-color-rgb), 0.5);
    --btn-neon-border: rgba(var(--primary-color-rgb), 0.7);
    --btn-neon-hover-glow: rgba(var(--primary-color-rgb), 0.8);
    --btn-neon-hover-border: rgba(var(--primary-color-rgb), 1);
    
    /* Раскладка и размеры */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    font-size: 0.8rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    
    /* Внешний вид */
    border: 1px solid var(--btn-neon-border);
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    background: transparent;
    color: var(--btn-neon-color);
    text-shadow: 0 0 3px var(--btn-neon-glow), 0 0 5px var(--btn-neon-glow);
    box-shadow: 0 0 5px var(--btn-neon-glow), inset 0 0 3px var(--btn-neon-glow);
    transition: all var(--transition-speed-fast) ease;
}

.button-login-neon .button-icon {
    margin-right: 6px;
    font-size: 0.9em;
}

/* Анимированные линии для неоновой кнопки */
.button-login-neon::before,
.button-login-neon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: var(--btn-neon-color);
    transition: transform 0.3s ease;
    box-shadow: 0 0 3px var(--btn-neon-glow);
}

.button-login-neon::before {
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: left;
}

.button-login-neon::after {
    bottom: 0;
    right: 0;
    transform: scaleX(0);
    transform-origin: right;
}

/* Эффекты при наведении на неоновую кнопку */
.button-login-neon:hover {
    color: var(--heading-color);
    background-color: rgba(var(--primary-color-rgb), 0.1);
    border-color: var(--btn-neon-hover-border);
    box-shadow: 
        0 0 10px var(--btn-neon-hover-glow), 
        0 0 15px var(--btn-neon-hover-glow), 
        inset 0 0 5px var(--btn-neon-hover-glow);
    text-shadow: 0 0 2px rgba(255,255,255,0.5);
}

.button-login-neon:hover::before,
.button-login-neon:hover::after {
    transform: scaleX(1);
}

.button-login-neon:active {
    transform: scale(0.98);
    filter: brightness(0.8);
}

/* Киберпанк кнопка скачивания */
.button-download-cyber {
    /* Переменные для кнопки */
    --btn-cyber-bg: #1a1a1f;
    --btn-cyber-border: var(--accent-color);
    --btn-cyber-glow: var(--neon-glow-accent);
    --btn-cyber-hover-bg: rgba(var(--accent-color-rgb), 0.05);
    --btn-cyber-hover-border: #fff;
    --btn-cyber-hover-glow: rgba(var(--accent-color-rgb), 0.9);
    
    /* Раскладка */
    display: inline-flex;
    align-items: stretch;
    padding: 0;
    font-size: 1rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    
    /* Внешний вид */
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-align: center;
    background: var(--btn-cyber-bg);
    color: var(--btn-cyber-border);
    box-shadow: 0 0 8px var(--btn-cyber-glow), inset 0 0 5px var(--btn-cyber-glow);
    transition: all var(--transition-speed-fast) ease-out;
}

/* Блок иконки в киберпанк кнопке */
.button-download-cyber-icon {
    background-color: rgba(var(--accent-color-rgb), 0.1);
    color: var(--btn-cyber-border);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(var(--accent-color-rgb), 0.2);
    transition: all var(--transition-speed-fast) ease;
    font-size: 1em;
}

/* Блок текста в киберпанк кнопке */
.button-download-cyber-text {
    padding: 12px 22px 12px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    position: relative;
}

/* Анимированные рамки для киберпанк кнопки */
.button-download-cyber-borders {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.button-download-cyber-borders::before,
.button-download-cyber-borders::after {
    content: '';
    position: absolute;
    background: var(--btn-cyber-border);
    transition: transform 0.2s ease-out;
    box-shadow: 0 0 5px var(--btn-cyber-glow);
}

.button-download-cyber-borders::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left;
}

.button-download-cyber-borders::after {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 1px;
    transform: scaleX(0);
    transform-origin: right;
}

/* Анимация при наведении на киберпанк кнопку */
.button-download-cyber:hover .button-download-cyber-borders::before,
.button-download-cyber:hover .button-download-cyber-borders::after {
    transform: scaleX(1);
}

.button-download-cyber:hover {
    background: var(--btn-cyber-hover-bg);
    color: var(--btn-cyber-hover-border);
    box-shadow: 
        0 0 12px var(--btn-cyber-hover-glow), 
        0 0 18px var(--btn-cyber-hover-glow), 
        inset 0 0 8px var(--btn-cyber-hover-glow);
}

.button-download-cyber:hover .button-download-cyber-icon {
    background-color: rgba(var(--accent-color-rgb), 0.15);
    color: var(--btn-cyber-hover-border);
}

.button-download-cyber:active {
    transform: scale(0.97);
    filter: brightness(0.85);
}

/* Премиум кнопка */
.button-premium-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    transition: all var(--transition-speed) ease;
    background: linear-gradient(45deg, var(--premium-color), #ffecb3);
    color: #3E2723;
    box-shadow: 0 4px 15px rgba(var(--premium-color-rgb), 0.25);
    font-size: 0.95rem;
    text-decoration: none;
}

.button-premium-main i {
    margin-right: 7px;
}

.button-premium-main:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(var(--premium-color-rgb), 0.35);
    filter: brightness(1.05);
}

/* -----------------------------------------------------------------------------
   НАВИГАЦИЯ
   ----------------------------------------------------------------------------- */

.navbar {
    background: rgba(var(--bg-color), 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0 var(--container-padding);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
    height: var(--header-height);
    display: flex;
    align-items: center;
    transition: background-color var(--transition-speed) ease;
}

.navbar-container {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Логотип */
.logo {
    font-size: 1.4rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-img {
    height: 28px;
}

/* Меню */
.navbar-menu-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar-menu {
    display: flex;
    align-items: center;
}

.menu-list {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 20px;
}

.menu-item-mobile-only,
.menu-item-mobile-login {
    display: none; /* Скрыты на десктопе */
}

/* Ссылки меню */
.menu-link {
    color: var(--text-color);
    font-weight: 400;
    padding-bottom: 3px;
    position: relative;
    transition: color var(--transition-speed-fast) ease;
    opacity: 0.7;
    font-size: 0.85rem;
}

.menu-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    display: block;
    margin-top: 1px;
    left: 0;
    background: var(--accent-color);
    transition: width var(--transition-speed-fast) ease;
}

.menu-link:hover {
    color: var(--heading-color);
    opacity: 1;
}

.menu-link:hover::after {
    width: 100%;
}

/* Правые кнопки навигации */
.navbar-right-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.line {
    color: var(--text-color);
    opacity: 0.3;
    margin: 0 5px;
}

/* Бургер меню для мобильных */
.burger-menu {
    display: none;
    font-size: 1.6rem;
    color: var(--accent-color);
    background: none;
    border: none;
    padding: 5px;
    line-height: 1;
    z-index: 1050;
    cursor: pointer;
}

/* -----------------------------------------------------------------------------
   АНИМАЦИИ AOS
   ----------------------------------------------------------------------------- */

[data-aos] {
    opacity: 0;
    transition: transform var(--animation-speed) ease-out, opacity var(--animation-speed) ease-out;
}

[data-aos="fade-up"] {
    transform: translateY(25px);
}

[data-aos="fade-left"] {
    transform: translateX(-25px);
}

[data-aos="fade-right"] {
    transform: translateX(25px);
}

[data-aos="zoom-in"] {
    transform: scale(0.97);
}

[data-aos="zoom-in-up"] {
    transform: scale(0.97) translateY(15px);
}

[data-aos].aos-animate {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* -----------------------------------------------------------------------------
   МАКЕТЫ ЭКРАНОВ (СЕКЦИЙ)
   ----------------------------------------------------------------------------- */

/* Базовый стиль экрана */
.screen {
    padding: 50px var(--container-padding);
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--header-height) + 30px);
}

/* Контейнеры для секций */
.section-container {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
}

.section-container-wide {
    max-width: var(--max-width-wide);
    width: 100%;
    margin: 0 auto;
}

/* -----------------------------------------------------------------------------
   ЭКРАН 1: ГЛАВНЫЙ (HERO)
   ----------------------------------------------------------------------------- */

.screen-1 {
    padding-top: var(--header-height);
    min-height: 100vh;
    /* Фон с градиентом и изображением */
    background: 
        linear-gradient(rgba(18, 18, 18, 0.88), rgba(18, 18, 18, 0.92)), 
        url('https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80') 
        no-repeat center center/cover fixed;
    background-attachment: fixed; /* Эффект параллакса */
    color: var(--heading-color);
}

.screen-1-content {
    max-width: var(--max-width);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.screen-1-text-container {
    max-width: 600px;
    text-align: center;
}

.screen-1-huge-text {
    font-size: 3rem;
    line-height: 1.15;
    margin-bottom: 0.7rem;
}

.screen-1-lil-text {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 1.8rem;
    font-weight: 300;
    opacity: 0.8;
}

.download-section {
    margin-top: 1.5rem;
}

/* -----------------------------------------------------------------------------
   ЭКРАН 2: КАК ЭТО РАБОТАЕТ
   ----------------------------------------------------------------------------- */

.screen-how-it-works {
    background-color: rgba(var(--card-bg-rgb), 0.05);
    border-bottom: 1px solid var(--border-color);
    padding-top: 100px;
    padding-bottom: 90px;
}

/* Визуальное представление процесса работы */
.how-it-works-process-visual {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px 30px;
    margin: 2.5rem 0 3rem 0;
    max-width: 100%;
}

.process-step-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 280px;
    width: 100%;
    padding: 25px 20px;
    background: rgba(var(--card-bg-rgb), 0.3);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    position: relative;
    transition: all var(--transition-speed) ease;
}

.process-step-visual:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent-color);
}

.step-number {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--accent-color);
    color: var(--bg-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}

.process-visual-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    min-height: 100px;
    justify-content: center;
}

.process-step-icon {
    font-size: 3.5rem;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
    transition: all var(--transition-speed-fast) ease;
}

.process-step-visual:hover .process-step-icon {
    transform: scale(1.1);
    color: var(--heading-color);
}

.trixman-logo-process {
    max-height: 60px;
    width: auto;
    opacity: 0.9;
}

.process-label-visual {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text-color);
    opacity: 0.85;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
}

/* Анимация линий чтения для шага 2 */
.reading-lines-revised {
    display: flex;
    gap: 4px;
    align-items: center;
}

.reading-lines-revised span {
    width: 20px;
    height: 3px;
    background: var(--accent-color);
    border-radius: 2px;
    animation: reading-pulse 1.5s ease-in-out infinite;
}

.reading-lines-revised span:nth-child(2) {
    animation-delay: 0.2s;
}

.reading-lines-revised span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes reading-pulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.5); }
}

/* Действия под описанием процесса */
.how-it-works-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 30px;
    margin: 2.5rem 0 1rem 0;
}

.action-item {
    text-align: center;
    width: 120px;
    transition: all var(--transition-speed-fast) ease;
}

.action-item:hover {
    transform: translateY(-3px);
}

.action-icon {
    font-size: 2.2rem;
    color: var(--accent-color);
    margin-bottom: 0.4rem;
    display: inline-block;
    opacity: 0.7;
    transition: all var(--transition-speed-fast) ease;
}

.action-item:hover .action-icon {
    opacity: 1;
    transform: scale(1.05);
    color: white;
}

.action-item p {
    font-size: 0.85rem;
    opacity: 0.65;
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   ЭКРАН 3: СОЗДАНИЕ ДЕБАФФОВ (НОВЫЙ)
   ----------------------------------------------------------------------------- */

.screen-create-debuffs {
    padding-top: 80px;
    padding-bottom: 80px;
    background: linear-gradient(
        rgba(var(--card-bg-rgb), 0.1), 
        rgba(var(--bg-color), 0.8) 90%
    ), var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}

.create-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 2.5rem;
}

.create-option-card {
    background: rgba(var(--card-bg-rgb), 0.4);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all var(--transition-speed) ease;
    position: relative;
    overflow: hidden;
}

.create-option-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    transition: left 0.5s ease;
}

.create-option-card:hover::before {
    left: 100%;
}

.create-option-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-strong);
    border-color: var(--accent-color);
}

.create-option-icon {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    display: inline-block;
    transition: all var(--transition-speed) ease;
}

.create-option-card.self-create .create-option-icon {
    color: var(--accent-color);
}

.create-option-card.premium-ready .create-option-icon {
    color: var(--premium-color);
}

.create-option-card:hover .create-option-icon {
    transform: scale(1.1);
}

.create-option-title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: var(--heading-color);
    font-weight: 600;
}

.create-option-description {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.8;
    margin-bottom: 1.5rem;
}

.create-option-features {
    list-style: none;
    text-align: left;
    margin-bottom: 1.5rem;
}

.create-option-features li {
    padding: 0.3rem 0;
    font-size: 0.9rem;
    opacity: 0.8;
    position: relative;
    padding-left: 20px;
}

.create-option-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
}

.create-option-card.premium-ready .create-option-features li::before {
    color: var(--premium-color);
}

/* -----------------------------------------------------------------------------
   ЭКРАН 5: ИДЕИ (СОХРАНЯЕТСЯ)
   ----------------------------------------------------------------------------- */

.screen-ideas {
    background-color: rgba(var(--card-bg-rgb), 0.05);
    border-bottom: 1px solid var(--border-color);
    padding-top: 80px;
    padding-bottom: 80px;
}

.ideas-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 2rem;
}

/* Четырехколоночная версия для равных размеров */
.ideas-showcase-grid-four-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 2rem;
}

.idea-showcase-card {
    background-color: rgba(var(--card-bg-rgb), 0.4);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all var(--transition-speed) ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.idea-showcase-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
    border-color: var(--secondary-color);
}

.idea-showcase-card.premium-idea {
    border-left: 4px solid var(--premium-color);
}

.idea-showcase-card.premium-idea:hover {
    border-color: var(--premium-color);
}

.idea-showcase-icon {
    font-size: 2rem;
    color: var(--secondary-color);
    margin-bottom: 0.8rem;
}

.idea-showcase-card.premium-idea .idea-showcase-icon {
    color: var(--premium-color);
}

.idea-showcase-title {
    font-size: 1.2rem;
    color: var(--heading-color);
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.idea-showcase-desc {
    font-size: 0.9rem;
    opacity: 0.75;
    line-height: 1.55;
    margin-bottom: 1rem;
    flex-grow: 1;
    font-weight: 300;
}

.idea-showcase-tags {
    margin-top: auto;
}

.idea-tag {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 2px;
}

/* -----------------------------------------------------------------------------
   ЭКРАН 6: ГОТОВЫЕ ДЕБАФФЫ И СТИЛИ (НОВЫЙ)
   ----------------------------------------------------------------------------- */

.screen-premium-content {
    padding-top: 80px;
    padding-bottom: 80px;
    background: linear-gradient(
        rgba(var(--premium-color-rgb), 0.03), 
        rgba(var(--bg-color), 0.9) 70%
    ), var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}

.premium-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 2.5rem;
}

.premium-benefit-card {
    background: rgba(var(--card-bg-rgb), 0.4);
    border: 2px solid var(--premium-color);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all var(--transition-speed) ease;
    position: relative;
    overflow: hidden;
}

.premium-benefit-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(var(--premium-color-rgb), 0.1), transparent 50%);
    transform: scale(0);
    transition: transform 0.6s ease;
}

.premium-benefit-card:hover::before {
    transform: scale(1);
}

.premium-benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(var(--premium-color-rgb), 0.3);
}

.premium-benefit-icon {
    font-size: 3rem;
    color: var(--premium-color);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.premium-benefit-title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--heading-color);
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.premium-benefit-description {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.85;
    position: relative;
    z-index: 1;
}

/* -----------------------------------------------------------------------------
   ЭКРАН 9: МОДЕЛИ ПОДПИСКИ (ОБНОВЛЕННЫЙ)
   ----------------------------------------------------------------------------- */

.screen-subscription-tiers {
    background: linear-gradient(
        rgba(var(--premium-color-rgb), 0.03), 
        rgba(var(--bg-color), 0.9) 70%
    ), var(--bg-color);
    padding-top: 80px;
    padding-bottom: 80px;
    border-bottom: 1px solid var(--border-color);
}

.subscription-tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 2.5rem;
}

.tier-card {
    background: rgba(var(--card-bg-rgb), 0.4);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all var(--transition-speed) ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.tier-card.premium-tier {
    border-color: var(--premium-color);
    box-shadow: 0 0 20px rgba(var(--premium-color-rgb), 0.2);
}

.tier-card.premium-tier::before {
    content: 'РЕКОМЕНДУЕМ';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--premium-color);
    color: var(--bg-color);
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.tier-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-strong);
}

.tier-header {
    margin-bottom: 2rem;
}

.tier-name {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--heading-color);
    font-weight: 600;
}

.tier-price {
    font-size: 2rem;
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.tier-card.premium-tier .tier-price {
    color: var(--premium-color);
}

.tier-period {
    font-size: 0.9rem;
    opacity: 0.7;
}

.tier-features {
    list-style: none;
    text-align: left;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.tier-features li {
    padding: 0.5rem 0;
    font-size: 0.9rem;
    position: relative;
    padding-left: 25px;
    opacity: 0.85;
}

.tier-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
}

.tier-card.premium-tier .tier-features li::before {
    color: var(--premium-color);
}

.tier-cta {
    margin-top: auto;
}

.tier-button {
    width: 100%;
    padding: 12px 20px;
    border: 2px solid var(--accent-color);
    background: transparent;
    color: var(--accent-color);
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    text-decoration: none;
    display: inline-block;
}

.tier-button:hover {
    background: var(--accent-color);
    color: var(--bg-color);
}

.tier-card.premium-tier .tier-button {
    border-color: var(--premium-color);
    color: var(--premium-color);
}

.tier-card.premium-tier .tier-button:hover {
    background: var(--premium-color);
    color: var(--bg-color);
}

/* -----------------------------------------------------------------------------
   ЭКРАН 10: ФИНАЛЬНЫЙ ПРИЗЫВ (СОХРАНЯЕТСЯ)
   ----------------------------------------------------------------------------- */

.screen-cta {
    background: linear-gradient(
        rgba(var(--bg-color), 0.95), 
        var(--bg-color)
    ), linear-gradient(
        to top, 
        rgba(var(--primary-color-rgb), 0.05), 
        transparent
    );
    padding: 45px var(--container-padding);
}

.screen-cta .section-title {
    font-size: 2rem;
    margin-bottom: 0.6rem;
}

.screen-cta .section-description {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.cta-buttons-final {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.link-secondary-cta {
    color: var(--accent-color);
    font-size: 0.8rem;
    opacity: 0.65;
}

.link-secondary-cta:hover {
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   ПОДВАЛ
   ----------------------------------------------------------------------------- */

.footer {
    background-color: #08080a;
    padding: 25px var(--container-padding);
    border-top: 1px solid var(--border-color);
    margin-top: 25px;
    color: rgba(255, 255, 255, 0.45);
}

.footer-container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
}

.footer-logo-img {
    height: 22px;
}

.footer-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8rem;
}

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

.footer-copy {
    font-size: 0.75rem;
    text-align: center;
    width: 100%;
    margin-top: 10px;
    opacity: 0.5;
}

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

/* Планшеты (≤ 992px) */

/* Мобильные телефоны (≤ 767px) */

/* Очень маленькие экраны (≤ 480px) */
/* СТИЛИ ДЛЯ РАЗДЕЛА 5 */
.additional-features-container {
    max-width: var(--max-width, 1100px);
    margin: 0 auto;
    padding: 2rem var(--container-padding, 20px);
}

.additional-features-section {
    margin: 4rem 0;
}

.additional-features-title {
    font-family: var(--font-family-headings, 'Exo 2', sans-serif);
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--heading-color, #ffffff);
    text-align: center;
    margin-bottom: 1rem;
}

.additional-features-description {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-color, #e0e0e0);
    max-width: 800px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

/* Сетка возможностей 2x2 */
.additional-capabilities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 3rem 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.additional-capability-card {
    background: rgba(28, 28, 34, 0.8);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 15px;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 250px;
    display: flex;
    flex-direction: column;
}

.additional-capability-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 224, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 224, 255, 0.1);
}

.additional-capability-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, 
        rgba(142, 68, 173, 0.05), 
        rgba(0, 224, 255, 0.02));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.additional-capability-card:hover::before {
    opacity: 1;
}

.additional-capability-icon {
    font-size: 2.5rem;
    color: var(--accent-color, #00e0ff);
    margin-bottom: 1rem;
    display: block;
}

.additional-capability-title {
    font-family: var(--font-family-headings, 'Exo 2', sans-serif);
    font-size: 1.3rem;
    color: var(--heading-color, #ffffff);
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.additional-capability-description {
    color: var(--text-color, #e0e0e0);
    line-height: 1.6;
    position: relative;
    z-index: 1;
    flex-grow: 1;
}

/* Сетка идей "Используй по-своему" - 3 в ряд */
.additional-ideas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
}

.additional-idea-card {
    background: rgba(28, 28, 34, 0.9);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
    padding: 2.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.additional-idea-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(0, 224, 255, 0.4);
    box-shadow: 0 15px 40px rgba(0, 224, 255, 0.15);
}

.additional-idea-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(0, 224, 255, 0.08), 
        rgba(142, 68, 173, 0.03));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.additional-idea-card:hover::before {
    opacity: 1;
}

.additional-idea-number {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: linear-gradient(135deg, var(--accent-color, #00e0ff), var(--primary-color, #8e44ad));
    color: #000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0, 224, 255, 0.3);
}

.additional-idea-icon {
    font-size: 3rem;
    color: var(--accent-color, #00e0ff);
    margin-bottom: 1.5rem;
    display: block;
    filter: drop-shadow(0 0 10px rgba(0, 224, 255, 0.3));
}

.additional-idea-title {
    font-family: var(--font-family-headings, 'Exo 2', sans-serif);
    font-size: 1.5rem;
    color: var(--heading-color, #ffffff);
    margin-bottom: 1rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.additional-idea-description {
    color: var(--text-color, #e0e0e0);
    line-height: 1.7;
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

.additional-main-title {
    font-family: var(--font-family-headings, 'Exo 2', sans-serif);
    font-size: 3rem;
    font-weight: 700;
    color: var(--heading-color, #ffffff);
    text-align: center;
    margin: 2rem 0;
    background: linear-gradient(135deg, var(--accent-color, #00e0ff), var(--primary-color, #8e44ad));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Адаптивность для новых блоков */

/* =============================================================================
   НОВЫЕ СТИЛИ ДЛЯ УЛУЧШЕННЫХ РАЗДЕЛОВ  
   ============================================================================= */

/* Стили для новой секции категорий стилей виджетов */
.styles-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.style-category-card {
    background: rgba(var(--card-bg-rgb), 0.7);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    transition: all var(--transition-speed) ease;
}

.style-category-card:hover {
    background: rgba(var(--card-bg-rgb), 0.9);
    border-color: var(--accent-color);
    transform: translateY(-5px);
}

.category-header {
    margin-bottom: 1.5rem;
}

.category-icon {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
}

.category-header h3 {
    color: var(--heading-color);
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.category-header p {
    color: var(--text-color);
    opacity: 0.8;
    font-size: 0.9rem;
}

.category-styles {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
}

.style-preview-mini {
    width: 60px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    background: rgba(var(--card-bg-rgb), 0.5);
    cursor: pointer;
    transition: all var(--transition-speed-fast) ease;
    position: relative;
    overflow: hidden;
}

.style-preview-mini:hover {
    border-color: var(--accent-color);
    transform: scale(1.05);
}

/* Стили дебаффов */
.mini-debuff-icon {
    font-size: 1.2rem;
    margin-right: 0.3rem;
}

.mini-debuff-info {
    display: flex;
    flex-direction: column;
    font-size: 0.6rem;
    line-height: 1;
}

.mini-name {
    color: var(--heading-color);
    font-weight: bold;
    margin-bottom: 0.1rem;
}

.mini-timer {
    color: var(--accent-color);
    font-weight: bold;
}

.style-preview-mini.blue {
    background: linear-gradient(45deg, rgba(106, 17, 203, 0.1), rgba(37, 117, 252, 0.1));
    border-color: #2575fc;
}

.style-preview-mini.blue .mini-timer {
    color: #2575fc;
}

/* Стили чата */
.mini-chat-msg {
    display: flex;
    flex-direction: column;
    font-size: 0.55rem;
    line-height: 1.1;
}

.mini-author {
    color: #ffb380;
    font-weight: bold;
    margin-bottom: 0.1rem;
}

.mini-text {
    color: var(--text-color);
}

.style-preview-mini.chat-standard {
    background: rgba(10, 10, 20, 0.6);
    border-left: 2px solid #9146FF;
}

.style-preview-mini.chat-minimal {
    background: rgba(20, 20, 20, 0.8);
    border-left: 2px solid #3498db;
}

.style-preview-mini.chat-minimal .mini-author {
    color: #3498db;
}

/* Стили очереди */
.mini-queue-card {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6rem;
}

.mini-queue-number {
    background: linear-gradient(135deg, #ff4757, #c44569);
    color: white;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.5rem;
}
.actions-description-container {
    text-align: center;
}
.mini-queue-name {
    color: var(--heading-color);
    font-weight: 600;
}

.style-preview-mini.queue-neon {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(45, 45, 45, 0.95));
    border-color: rgba(255, 71, 87, 0.4);
}

.style-preview-mini.queue-cyber {
    background: rgba(10, 20, 30, 0.85);
    border-color: #00ffff;
    clip-path: polygon(0 20%, 20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
}

.style-preview-mini.queue-cyber .mini-queue-number {
    background: #ff00ff;
    color: #000;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Заглушки */
.style-preview-mini.placeholder {
    background: repeating-linear-gradient(
        45deg,
        rgba(var(--accent-color-rgb), 0.1),
        rgba(var(--accent-color-rgb), 0.1) 10px,
        rgba(var(--accent-color-rgb), 0.05) 10px,
        rgba(var(--accent-color-rgb), 0.05) 20px
    );
    border: 1px dashed var(--accent-color);
    color: var(--accent-color);
    font-weight: 500;
    opacity: 0.7;
}

/* Адаптивность для новых блоков */


/* =============================================================================
   СТИЛИ ДЛЯ УЛУЧШЕННОГО КОНСТРУКТОРА ДЕБАФФОВ
   ============================================================================= */

/* Основной контейнер возможностей конструктора */
.constructor-capabilities-showcase {
    margin: 3rem 0;
}

.capabilities-section {
    margin-bottom: 4rem;
    position: relative;
}

.capabilities-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 2rem;
    color: var(--heading-color);
    margin-bottom: 1rem;
    text-align: center;
}

.capabilities-title i {
    color: var(--accent-color);
    font-size: 2.5rem;
}

.capabilities-description {
    text-align: center;
    color: var(--text-color);
    opacity: 0.9;
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Сетки возможностей */
.capabilities-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.basic-actions {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.logic-blocks {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Карточки возможностей */
.capability-item {
    background: rgba(var(--card-bg-rgb), 0.6);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all var(--transition-speed) ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.capability-item:hover {
    background: rgba(var(--card-bg-rgb), 0.8);
    border-color: var(--accent-color);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 30px rgba(var(--accent-color-rgb), 0.2);
}

.capability-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
}

.capability-item:hover::before {
    opacity: 1;
}

.capability-icon {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
    position: relative;
    transition: all var(--transition-speed) ease;
}

.capability-item:hover .capability-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(var(--accent-color-rgb), 0.5));
}

.capability-item h4 {
    color: var(--heading-color);
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.capability-item p {
    color: var(--text-color);
    opacity: 0.8;
    line-height: 1.5;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.capability-example {
    background: rgba(var(--accent-color-rgb), 0.1);
    border: 1px solid rgba(var(--accent-color-rgb), 0.3);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    color: var(--accent-color);
    font-weight: 500;
    font-style: italic;
}

/* Специальные стили для разных типов действий */
.capability-item[data-action="keyboard"] .capability-icon {
    color: #4CAF50;
}

.capability-item[data-action="mouse"] .capability-icon {
    color: #2196F3;
}

.capability-item[data-action="sound"] .capability-icon {
    color: #FF9800;
}

.capability-item[data-action="image"] .capability-icon {
    color: #9C27B0;
}

.capability-item[data-action="wait"] .capability-icon {
    color: #607D8B;
}

/* Блоки логики с особыми цветами */
.capability-item[data-block="chance"] .capability-icon {
    color: #E91E63;
}

.capability-item[data-block="loop"] .capability-icon {
    color: #00BCD4;
}

.capability-item[data-block="parallel"] .capability-icon {
    color: #FFEB3B;
}

.capability-item[data-block="random"] .capability-icon {
    color: #FF5722;
}

.capability-item[data-block="sensitivity"] .capability-icon {
    color: #795548;
}

.capability-item[data-block="shuffle"] .capability-icon {
    color: #3F51B5;
}

/* Примеры комбинирования */
.combination-examples {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.combo-example {
    background: rgba(var(--card-bg-rgb), 0.6);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 2rem;
    transition: all var(--transition-speed) ease;
}

.combo-example:hover {
    background: rgba(var(--card-bg-rgb), 0.8);
    border-color: var(--accent-color);
    transform: translateY(-3px);
}

.combo-chain {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.combo-block {
    background: rgba(var(--accent-color-rgb), 0.1);
    border: 1px solid var(--accent-color);
    border-radius: 10px;
    padding: 0.8rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-color);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--transition-speed-fast) ease;
}

.combo-block:hover {
    background: rgba(var(--accent-color-rgb), 0.2);
    transform: scale(1.05);
}

.combo-action {
    background: rgba(var(--primary-color-rgb), 0.1);
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    padding: 0.8rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--transition-speed-fast) ease;
}

.combo-action:hover {
    background: rgba(var(--primary-color-rgb), 0.2);
    transform: scale(1.05);
}

.combo-multi {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.combo-arrow {
    color: var(--text-color);
    opacity: 0.6;
    font-size: 1.2rem;
}

.combo-result {
    text-align: center;
    color: var(--text-color);
    opacity: 0.9;
    font-style: italic;
    font-size: 0.95rem;
    padding: 1rem;
    background: rgba(var(--accent-color-rgb), 0.05);
    border-radius: 8px;
    border-left: 3px solid var(--accent-color);
}

/* Адаптивность для конструктора */


/* =============================================================================
   АДАПТИВНЫЕ СТИЛИ ДЛЯ НОВЫХ ИНТЕРАКТИВНЫХ РАЗДЕЛОВ
   ============================================================================= */

/* Мобильная адаптация для конструктора */

/* Мобильная адаптация для стилей */