/**
 * ═══════════════════════════════════════════════════════════════════════════════
 * CHAOZCODE DESIGN SYSTEM v7.0
 * ═══════════════════════════════════════════════════════════════════════════════
 * 
 * Unified stylesheet consolidating CSS from 153 production pages
 * Eliminates 1.72 MB of duplicated inline CSS
 * 
 * Generated: 2026-02-04
 * Source: style-guide.html (master) + index.html (landing components)
 * 
 * CSS Architecture:
 * - @layer system for cascade control
 * - OKLCH color space for modern color manipulation
 * - Fluid typography with clamp()
 * - CSS custom properties (variables) for theming
 * - Mobile-first responsive design
 * 
 * Layers (in order):
 * 1. reset    - CSS reset and normalization
 * 2. base     - Core variables, typography, body styles
 * 3. layout   - Container, grid, header, footer, sidebar
 * 4. components - Buttons, cards, badges, forms
 * 5. utilities - Helper classes, states
 * 6. animations - Keyframes, transitions
 * 
 * ═══════════════════════════════════════════════════════════════════════════════
 */


        /* ═══════════════════════════════════════════════════════════════
           CHAOZCODE DESIGN SYSTEM v6.0 - ULTIMATE EDITION
           OKLCH Colors | CSS Nesting | Container Queries | View Transitions
           Scroll Animations | Popover API | Modern JS | 150KB+
           ═══════════════════════════════════════════════════════════════ */
        
        @layer reset, base, layout, components, utilities, animations;
        
        /* ═══ LAYER: RESET ═══ */
        @layer reset {
            *, *::before, *::after {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            html {
                font-size: 16px;
                scroll-behavior: smooth;
                scroll-padding-top: 100px;
                -webkit-text-size-adjust: 100%;
                color-scheme: dark light;
            }
            
            html {
                overflow-x: hidden !important;
                max-width: 100vw;
            }
            
            body {
                font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
                line-height: 1.6;
                -webkit-font-smoothing: antialiased;
                overflow-x: hidden !important;
                max-width: 100vw;
                position: relative;
            }
            
            img, picture, video, canvas, svg {
                display: block;
                max-width: 100%;
            }
            
            input, button, textarea, select {
                font: inherit;
            }
            
            a { text-decoration: none; color: inherit; }
            button { cursor: pointer; background: none; border: none; }
            ul, ol { list-style: none; }
        }
        
        /* ═══ LAYER: BASE - OKLCH COLOR SYSTEM ═══ */
        @layer base {
            :root {
                /* Primary Scale - 12 steps OKLCH */
                --primary-1: oklch(98% 0.01 265);
                --primary-2: oklch(95% 0.02 265);
                --primary-3: oklch(90% 0.04 265);
                --primary-4: oklch(85% 0.07 265);
                --primary-5: oklch(78% 0.10 265);
                --primary-6: oklch(70% 0.13 265);
                --primary-7: oklch(62% 0.15 265);
                --primary-8: oklch(55% 0.16 265);
                --primary-9: oklch(50% 0.17 265); /* Main */
                --primary-10: oklch(45% 0.16 265);
                --primary-11: oklch(40% 0.14 265);
                --primary-12: oklch(25% 0.08 265);
                
                /* Secondary Scale */
                --secondary-1: oklch(98% 0.01 300);
                --secondary-9: oklch(50% 0.18 300);
                --secondary-12: oklch(25% 0.10 300);
                
                /* Accent */
                --accent: oklch(75% 0.20 330);
                --accent-glow: oklch(75% 0.20 330 / 0.4);
                
                /* Semantic */
                --success: oklch(65% 0.18 145);
                --warning: oklch(75% 0.16 85);
                --danger: oklch(60% 0.22 25);
                --info: oklch(65% 0.15 230);
                
                /* Neutrals - Dark Mode */
                --bg-darkest: oklch(8% 0 0);
                --bg-dark: oklch(12% 0.005 265);
                --bg-surface: oklch(16% 0.008 265);
                --bg-elevated: oklch(20% 0.01 265);
                --bg-hover: oklch(25% 0.012 265);
                
                --text-primary: oklch(95% 0.01 265);
                --text-secondary: oklch(75% 0.02 265);
                --text-muted: oklch(55% 0.02 265);
                
                --border-default: oklch(30% 0.03 265 / 0.5);
                --border-hover: oklch(50% 0.10 265 / 0.5);
                
                /* Gradients */
                --gradient-primary: linear-gradient(135deg, var(--primary-9), var(--secondary-9));
                --gradient-glow: radial-gradient(ellipse at center, var(--primary-9) 0%, transparent 70%);
                
                /* Fluid Typography */
                --fluid-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.85rem);
                --fluid-sm: clamp(0.85rem, 0.75rem + 0.4vw, 1rem);
                --fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.15rem);
                --fluid-md: clamp(1.1rem, 0.95rem + 0.7vw, 1.4rem);
                --fluid-lg: clamp(1.25rem, 1rem + 1vw, 1.75rem);
                --fluid-xl: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
                --fluid-2xl: clamp(2rem, 1.4rem + 2.8vw, 3.75rem);
                --fluid-3xl: clamp(2.5rem, 1.6rem + 4vw, 5rem);
                --fluid-hero: clamp(3rem, 2rem + 5vw, 7rem);
                
                /* Fluid Spacing */
                --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
                --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.85rem);
                --space-md: clamp(0.75rem, 0.6rem + 0.8vw, 1.35rem);
                --space-lg: clamp(1rem, 0.8rem + 1vw, 1.75rem);
                --space-xl: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
                --space-2xl: clamp(2rem, 1.4rem + 2.8vw, 4.25rem);
                --space-3xl: clamp(3rem, 2rem + 4.5vw, 6.5rem);
                
                /* Effects */
                --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.12), 0 1px 2px oklch(0% 0 0 / 0.24);
                --shadow-md: 0 4px 6px oklch(0% 0 0 / 0.15), 0 2px 4px oklch(0% 0 0 / 0.12);
                --shadow-lg: 0 10px 25px oklch(0% 0 0 / 0.2), 0 6px 10px oklch(0% 0 0 / 0.15);
                --shadow-xl: 0 20px 40px oklch(0% 0 0 / 0.25);
                --shadow-glow: 0 0 40px var(--primary-9);
                
                /* Transitions */
                --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
                --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
                --duration-fast: 150ms;
                --duration-base: 250ms;
                --duration-slow: 400ms;
                
                /* Touch targets */
                --touch-min: max(44px, 2.75rem);
                
                /* Radius */
                --radius-sm: 6px;
                --radius-md: 10px;
                --radius-lg: 16px;
                --radius-xl: 24px;
                --radius-full: 9999px;
                
                /* Z-index */
                --z-dropdown: 100;
                --z-sticky: 200;
                --z-fixed: 300;
                --z-modal: 400;
                --z-toast: 500;
            }
            
            body {
                background: var(--bg-dark);
                color: var(--text-primary);
                font-size: var(--fluid-base);
            }
            
            /* Reduced motion */
            @media (prefers-reduced-motion: reduce) {
                *, *::before, *::after {
                    animation-duration: 0.01ms !important;
                    transition-duration: 0.01ms !important;
                }
            }
        }
        
        /* ═══ LAYER: LAYOUT ═══ */
        @layer layout {
            .container {
                width: 100%;
                max-width: 1400px;
                margin: 0 auto;
                padding: 0 var(--space-lg);
            }
            
            @media (max-width: 768px) {
                .container {
                    padding: 0 var(--space-md);
                }
            }
            
            @media (max-width: 480px) {
                .container {
                    padding: 0 var(--space-sm);
                }
            }
            
            /* Header */
            .header {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                height: 70px;
                background: oklch(12% 0.005 265 / 0.9);
                backdrop-filter: blur(12px);
                border-bottom: 1px solid var(--border-default);
                z-index: var(--z-fixed);
                transition: transform var(--duration-base) var(--ease-smooth);
                
                &.hidden { transform: translateY(-100%); }
                
                .header-inner {
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: var(--space-lg);
                    padding: 0 var(--space-lg);
                }
            }
            
            @media (max-width: 768px) {
                .header .header-inner {
                    padding: 0 var(--space-md);
                    gap: var(--space-md);
                }
                
                .logo {
                    font-size: 1.25rem !important;
                }
            }
            
            .logo {
                font-size: var(--fluid-xl);
                font-weight: 800;
                background: var(--gradient-primary);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }
            
            .progress-bar {
                position: absolute;
                bottom: 0;
                left: 0;
                height: 3px;
                background: var(--gradient-primary);
                width: 0%;
                transition: width 50ms linear;
            }
            
            /* Sidebar */
            .sidebar {
                position: fixed;
                top: 70px;
                left: 0;
                width: min(280px, 85vw);
                height: calc(100vh - 70px);
                background: var(--bg-surface);
                border-right: 1px solid var(--border-default);
                overflow-y: auto;
                overflow-x: hidden;
                padding: var(--space-xl);
                z-index: var(--z-sticky);
                transform: translateX(-100%);
                transition: transform var(--duration-base) var(--ease-smooth);
                
                &.open { transform: translateX(0); }
                
                @media (min-width: 1200px) {
                    transform: translateX(0);
                }
            }
            
            .sidebar-overlay {
                position: fixed;
                top: 70px;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                backdrop-filter: blur(4px);
                z-index: calc(var(--z-sticky) - 1);
                opacity: 0;
                pointer-events: none;
                transition: opacity var(--duration-base);
                
                &.visible {
                    opacity: 1;
                    pointer-events: auto;
                }
                
                @media (min-width: 1200px) {
                    display: none;
                }
            }
            
            .sidebar-toggle {
                position: fixed;
                top: 90px;
                left: var(--space-md);
                width: 48px;
                height: 48px;
                background: var(--gradient-primary);
                border-radius: var(--radius-full);
                color: white;
                font-size: 1.25rem;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: var(--shadow-lg);
                z-index: calc(var(--z-sticky) + 1);
                transition: transform var(--duration-base) var(--ease-spring);
                
                &:hover { transform: scale(1.1); }
                
                @media (min-width: 1200px) { display: none; }
            }
            
            /* Main */
            .main {
                margin-top: 70px;
                padding: var(--space-2xl) var(--space-lg);
                min-width: 0;
                transition: margin-left var(--duration-base) var(--ease-smooth);
                
                @media (max-width: 1199px) {
                    margin-left: 0;
                    padding: var(--space-xl) var(--space-md);
                }
                
                @media (max-width: 768px) {
                    padding: var(--space-lg) var(--space-sm);
                }
                
                @media (min-width: 1200px) {
                    margin-left: 280px;
                }
            }
            
            /* Section */
            .section {
                margin-bottom: var(--space-3xl);
                scroll-margin-top: 100px;
                opacity: 0;
                transform: translateY(30px);
                transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);
                
                &.visible {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            .section-title {
                font-size: var(--fluid-2xl);
                font-weight: 700;
                margin-bottom: var(--space-xl);
                padding-bottom: var(--space-md);
                border-bottom: 2px solid var(--border-default);
                display: flex;
                align-items: center;
                gap: var(--space-md);
            }
        }
        
        /* ═══ LAYER: COMPONENTS ═══ */
        @layer components {
            /* ─── NAV INDEX ─── */
            .nav-list {
                display: flex;
                flex-direction: column;
                gap: var(--space-xs);
            }
            
            .nav-link {
                display: flex;
                align-items: center;
                gap: var(--space-sm);
                padding: var(--space-sm) var(--space-md);
                min-height: var(--touch-min);
                border-radius: var(--radius-md);
                color: var(--text-muted);
                font-size: var(--fluid-sm);
                border-left: 3px solid transparent;
                transition: all var(--duration-fast);
                
                &:hover {
                    background: var(--bg-elevated);
                    color: var(--primary-9);
                    border-left-color: var(--primary-9);
                }
                
                &.active {
                    background: oklch(50% 0.17 265 / 0.15);
                    color: var(--primary-9);
                    border-left-color: var(--primary-9);
                    font-weight: 600;
                }
            }
            
            /* ─── BUTTONS ─── */
            .btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: var(--space-sm);
                padding: var(--space-sm) var(--space-lg);
                min-height: var(--touch-min);
                border-radius: var(--radius-lg);
                font-size: var(--fluid-base);
                font-weight: 600;
                transition: all var(--duration-fast);
                
                &:active { transform: scale(0.97); }
            }
            
            .btn-primary {
                background: var(--gradient-primary);
                color: white;
                box-shadow: var(--shadow-sm);
                
                &:hover {
                    box-shadow: var(--shadow-lg), var(--shadow-glow);
                    transform: translateY(-2px);
                }
            }
            
            .btn-secondary {
                background: var(--bg-elevated);
                color: var(--text-primary);
                border: 1px solid var(--border-default);
                
                &:hover {
                    background: var(--bg-hover);
                    border-color: var(--primary-9);
                }
            }
            
            .btn-outline {
                background: transparent;
                color: var(--primary-9);
                border: 2px solid var(--primary-9);
                
                &:hover {
                    background: var(--primary-9);
                    color: white;
                }
            }
            
            .btn-ghost {
                background: transparent;
                color: var(--text-secondary);
                
                &:hover {
                    background: var(--bg-elevated);
                    color: var(--text-primary);
                }
            }
            
            .btn-success { background: var(--success); color: white; }
            .btn-warning { background: var(--warning); color: white; }
            .btn-danger { background: var(--danger); color: white; }
            .btn-info { background: var(--info); color: white; }
            
            .btn-sm { padding: var(--space-xs) var(--space-md); font-size: var(--fluid-sm); min-height: 36px; }
            .btn-lg { padding: var(--space-md) var(--space-xl); font-size: var(--fluid-md); min-height: 52px; }
            
            /* Magnetic Button Effect */
            .btn-magnetic {
                position: relative;
                overflow: hidden;
                
                &::before {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
                        oklch(100% 0 0 / 0.15), transparent 60%);
                    opacity: 0;
                    transition: opacity var(--duration-fast);
                }
                
                &:hover::before { opacity: 1; }
            }
            
            /* ─── CARDS ─── */
            .card-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
                gap: var(--space-xl);
            }
            
            .card {
                container-type: inline-size;
                background: var(--bg-elevated);
                border: 1px solid var(--border-default);
                border-radius: var(--radius-xl);
                padding: var(--space-xl);
                box-shadow: var(--shadow-sm);
                transition: all var(--duration-base);
                
                &:hover {
                    border-color: var(--primary-9);
                    transform: translateY(-4px);
                    box-shadow: var(--shadow-lg), 0 0 30px oklch(50% 0.17 265 / 0.2);
                }
            }
            
            .card-header {
                display: flex;
                align-items: center;
                gap: var(--space-md);
                margin-bottom: var(--space-md);
            }
            
            .card-icon {
                width: 48px;
                height: 48px;
                background: var(--gradient-primary);
                border-radius: var(--radius-lg);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.5rem;
            }
            
            .card-title {
                font-size: var(--fluid-lg);
                font-weight: 600;
            }
            
            .card-content {
                color: var(--text-secondary);
            }
            
            /* Container Query: Card adapts */
            @container (min-width: 400px) {
                .card-icon { width: 56px; height: 56px; }
            }
            
            @container (max-width: 280px) {
                .card { padding: var(--space-md); }
                .card-header { flex-direction: column; text-align: center; }
            }
            
            /* Glass Card */
            .card-glass {
                background: oklch(50% 0.17 265 / 0.08);
                backdrop-filter: blur(12px);
                border: 1px solid oklch(100% 0 0 / 0.1);
                
                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 1px;
                    background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 0.3), transparent);
                }
            }
            
            /* 3D Flip Card */
            .card-flip {
                perspective: 1000px;
                
                .card-inner {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    transition: transform 0.6s;
                    transform-style: preserve-3d;
                }
                
                &:hover .card-inner { transform: rotateY(180deg); }
                
                .card-front, .card-back {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    backface-visibility: hidden;
                    border-radius: var(--radius-xl);
                    padding: var(--space-xl);
                }
                
                .card-back {
                    background: var(--gradient-primary);
                    transform: rotateY(180deg);
                    color: white;
                }
            }
            
            /* ─── BADGES & TAGS ─── */
            .badge {
                display: inline-flex;
                align-items: center;
                gap: var(--space-xs);
                padding: var(--space-xs) var(--space-sm);
                font-size: var(--fluid-xs);
                font-weight: 600;
                border-radius: var(--radius-full);
                background: var(--bg-elevated);
                color: var(--text-secondary);
                
                &.badge-primary {
                    background: oklch(50% 0.17 265 / 0.2);
                    color: var(--primary-9);
                }
                &.badge-success { background: oklch(65% 0.18 145 / 0.2); color: var(--success); }
                &.badge-warning { background: oklch(75% 0.16 85 / 0.2); color: var(--warning); }
                &.badge-danger { background: oklch(60% 0.22 25 / 0.2); color: var(--danger); }
            }
            
            /* ─── INPUTS ─── */
            .input-group {
                display: flex;
                flex-direction: column;
                gap: var(--space-xs);
            }
            
            .input-label {
                font-size: var(--fluid-sm);
                font-weight: 500;
                color: var(--text-secondary);
            }
            
            .input {
                width: 100%;
                padding: var(--space-sm) var(--space-md);
                min-height: var(--touch-min);
                background: var(--bg-surface);
                border: 1px solid var(--border-default);
                border-radius: var(--radius-md);
                color: var(--text-primary);
                font-size: var(--fluid-base);
                transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
                
                &:focus {
                    outline: none;
                    border-color: var(--primary-9);
                    box-shadow: 0 0 0 3px oklch(50% 0.17 265 / 0.15);
                }
                
                &::placeholder { color: var(--text-muted); }
                
                &:disabled {
                    opacity: 0.5;
                    cursor: not-allowed;
                }
            }
            
            .input-icon-wrapper {
                position: relative;
                
                .input { padding-left: calc(var(--space-md) + 24px); }
                
                .input-icon {
                    position: absolute;
                    left: var(--space-md);
                    top: 50%;
                    transform: translateY(-50%);
                    color: var(--text-muted);
                    pointer-events: none;
                }
            }
            
            /* ─── TOGGLES & SWITCHES ─── */
            .switch {
                position: relative;
                width: 52px;
                height: 28px;
                
                input {
                    opacity: 0;
                    width: 0;
                    height: 0;
                    
                    &:checked + .switch-track {
                        background: var(--primary-9);
                        
                        .switch-thumb { transform: translateX(24px); }
                    }
                    
                    &:focus + .switch-track {
                        box-shadow: 0 0 0 3px oklch(50% 0.17 265 / 0.15);
                    }
                }
                
                .switch-track {
                    position: absolute;
                    inset: 0;
                    background: var(--bg-elevated);
                    border-radius: var(--radius-full);
                    transition: background var(--duration-fast);
                }
                
                .switch-thumb {
                    position: absolute;
                    top: 2px;
                    left: 2px;
                    width: 24px;
                    height: 24px;
                    background: white;
                    border-radius: var(--radius-full);
                    box-shadow: var(--shadow-sm);
                    transition: transform var(--duration-fast) var(--ease-spring);
                }
            }
            
            /* ─── TABS ─── */
            .tabs {
                display: flex;
                gap: var(--space-xs);
                background: var(--bg-surface);
                padding: var(--space-xs);
                border-radius: var(--radius-lg);
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin;
                scrollbar-color: var(--primary-9) var(--bg-surface);
                
                &::-webkit-scrollbar {
                    height: 6px;
                }
                
                &::-webkit-scrollbar-track {
                    background: var(--bg-surface);
                    border-radius: var(--radius-sm);
                }
                
                &::-webkit-scrollbar-thumb {
                    background: var(--primary-9);
                    border-radius: var(--radius-sm);
                }
            }
            
            .tab {
                padding: var(--space-sm) var(--space-md);
                min-height: 44px;
                min-width: 80px;
                border-radius: var(--radius-md);
                color: var(--text-secondary);
                font-weight: 500;
                white-space: nowrap;
                flex-shrink: 0;
                transition: all var(--duration-fast);
                
                &:hover { color: var(--text-primary); }
                
                &.active {
                    background: var(--bg-elevated);
                    color: var(--primary-9);
                    box-shadow: var(--shadow-sm);
                }
            }
            
            @media (max-width: 480px) {
                .tab {
                    padding: var(--space-sm);
                    font-size: 0.875rem;
                    min-width: 70px;
                }
            }
            
            .tab-content {
                display: none;
                animation: fadeIn 0.3s ease;
                
                &.active { display: block; }
            }
            
            /* ─── ACCORDION ─── */
            .accordion { display: flex; flex-direction: column; gap: var(--space-sm); }
            
            .accordion-item {
                background: var(--bg-elevated);
                border: 1px solid var(--border-default);
                border-radius: var(--radius-lg);
                overflow: hidden;
            }
            
            .accordion-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: var(--space-md) var(--space-lg);
                min-height: var(--touch-min);
                font-weight: 500;
                transition: background var(--duration-fast);
                
                &:hover { background: var(--bg-hover); }
                
                &::after {
                    content: '+';
                    font-size: 1.5rem;
                    line-height: 1;
                    transition: transform var(--duration-fast);
                }
                
                &[aria-expanded="true"]::after {
                    transform: rotate(45deg);
                }
            }
            
            .accordion-content {
                padding: 0 var(--space-lg) var(--space-lg);
                color: var(--text-secondary);
                display: none;
                animation: slideDown 0.3s ease;
                
                &.open { display: block; }
            }
            
            /* ─── TOOLTIPS ─── */
            [data-tooltip] {
                position: relative;
                
                &::before, &::after {
                    position: absolute;
                    bottom: 100%;
                    left: 50%;
                    transform: translateX(-50%);
                    pointer-events: none;
                    opacity: 0;
                    transition: opacity var(--duration-fast), transform var(--duration-fast);
                }
                
                &::before {
                    content: attr(data-tooltip);
                    margin-bottom: 8px;
                    padding: var(--space-xs) var(--space-sm);
                    background: var(--bg-elevated);
                    color: var(--text-primary);
                    font-size: var(--fluid-xs);
                    white-space: nowrap;
                    border-radius: var(--radius-sm);
                    box-shadow: var(--shadow-md);
                }
                
                &::after {
                    content: '';
                    margin-bottom: 3px;
                    border: 5px solid transparent;
                    border-top-color: var(--bg-elevated);
                }
                
                &:hover::before, &:hover::after {
                    opacity: 1;
                    transform: translateX(-50%) translateY(-4px);
                }
            }
            
            /* ─── MODAL ─── */
            .modal-backdrop {
                position: fixed;
                inset: 0;
                background: oklch(0% 0 0 / 0.6);
                backdrop-filter: blur(4px);
                display: flex;
                align-items: center;
                justify-content: center;
                padding: var(--space-lg);
                z-index: var(--z-modal);
                opacity: 0;
                visibility: hidden;
                transition: opacity var(--duration-base), visibility var(--duration-base);
                
                &.open {
                    opacity: 1;
                    visibility: visible;
                    
                    .modal { transform: scale(1); }
                }
            }
            
            .modal {
                background: var(--bg-elevated);
                border: 1px solid var(--border-default);
                border-radius: var(--radius-xl);
                width: 100%;
                max-width: 500px;
                max-height: 85vh;
                overflow-y: auto;
                transform: scale(0.95);
                transition: transform var(--duration-base) var(--ease-smooth);
            }
            
            .modal-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: var(--space-lg);
                border-bottom: 1px solid var(--border-default);
            }
            
            .modal-title { font-size: var(--fluid-lg); font-weight: 600; }
            
            .modal-close {
                width: 36px;
                height: 36px;
                border-radius: var(--radius-md);
                font-size: 1.25rem;
                color: var(--text-muted);
                transition: all var(--duration-fast);
                
                &:hover { background: var(--bg-hover); color: var(--text-primary); }
            }
            
            .modal-body { padding: var(--space-lg); }
            
            .modal-footer {
                display: flex;
                justify-content: flex-end;
                gap: var(--space-sm);
                padding: var(--space-lg);
                border-top: 1px solid var(--border-default);
            }
            
            /* ─── TOAST NOTIFICATIONS ─── */
            .toast-container {
                position: fixed;
                bottom: var(--space-lg);
                right: var(--space-lg);
                display: flex;
                flex-direction: column-reverse;
                gap: var(--space-sm);
                z-index: var(--z-toast);
            }
            
            .toast {
                display: flex;
                align-items: center;
                gap: var(--space-md);
                padding: var(--space-md) var(--space-lg);
                background: var(--bg-elevated);
                border: 1px solid var(--border-default);
                border-radius: var(--radius-lg);
                box-shadow: var(--shadow-lg);
                animation: slideInRight 0.3s var(--ease-spring);
                
                &.toast-success { border-left: 4px solid var(--success); }
                &.toast-warning { border-left: 4px solid var(--warning); }
                &.toast-danger { border-left: 4px solid var(--danger); }
                &.toast-info { border-left: 4px solid var(--info); }
            }
            
            .toast-dismiss {
                margin-left: auto;
                color: var(--text-muted);
                
                &:hover { color: var(--text-primary); }
            }
            
            /* ─── PROGRESS & LOADERS ─── */
            .progress {
                height: 8px;
                background: var(--bg-surface);
                border-radius: var(--radius-full);
                overflow: hidden;
            }
            
            .progress-bar {
                height: 100%;
                background: var(--gradient-primary);
                border-radius: var(--radius-full);
                transition: width var(--duration-base);
            }
            
            .spinner {
                width: 32px;
                height: 32px;
                border: 3px solid var(--bg-elevated);
                border-top-color: var(--primary-9);
                border-radius: var(--radius-full);
                animation: spin 0.8s linear infinite;
            }
            
            .skeleton {
                background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-hover) 50%, var(--bg-elevated) 75%);
                background-size: 200% 100%;
                animation: shimmer 1.5s infinite;
                border-radius: var(--radius-md);
            }
            
            /* ─── AVATARS ─── */
            .avatar {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                border-radius: var(--radius-full);
                background: var(--gradient-primary);
                color: white;
                font-weight: 600;
                overflow: hidden;
                
                img { width: 100%; height: 100%; object-fit: cover; }
                
                &.avatar-sm { width: 32px; height: 32px; font-size: var(--fluid-sm); }
                &.avatar-lg { width: 56px; height: 56px; font-size: var(--fluid-lg); }
                &.avatar-xl { width: 80px; height: 80px; font-size: var(--fluid-xl); }
            }
            
            .avatar-group {
                display: flex;
                
                .avatar {
                    border: 2px solid var(--bg-dark);
                    margin-left: -8px;
                    
                    &:first-child { margin-left: 0; }
                    
                    &:hover { z-index: 1; }
                }
            }
            
            /* ─── DROPDOWNS ─── */
            .dropdown {
                position: relative;
                
                &.open .dropdown-menu {
                    opacity: 1;
                    visibility: visible;
                    transform: translateY(0);
                }
            }
            
            .dropdown-menu {
                position: absolute;
                top: 100%;
                left: 0;
                min-width: 200px;
                background: var(--bg-elevated);
                border: 1px solid var(--border-default);
                border-radius: var(--radius-lg);
                box-shadow: var(--shadow-lg);
                padding: var(--space-xs);
                z-index: var(--z-dropdown);
                opacity: 0;
                visibility: hidden;
                transform: translateY(-8px);
                transition: all var(--duration-fast);
            }
            
            .dropdown-item {
                display: flex;
                align-items: center;
                gap: var(--space-sm);
                padding: var(--space-sm) var(--space-md);
                min-height: var(--touch-min);
                border-radius: var(--radius-md);
                color: var(--text-secondary);
                transition: all var(--duration-fast);
                
                &:hover {
                    background: var(--bg-hover);
                    color: var(--text-primary);
                }
            }
            
            .dropdown-divider {
                height: 1px;
                background: var(--border-default);
                margin: var(--space-xs) 0;
            }
            
            /* ─── DATA TABLES ─── */
            .table-wrapper {
                width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                border: 1px solid var(--border-default);
                border-radius: var(--radius-lg);
                margin-bottom: var(--space-lg);
            }
            
            .table {
                width: 100%;
                min-width: 500px;
                border-collapse: collapse;
                
                th, td {
                    padding: var(--space-md);
                    text-align: left;
                    border-bottom: 1px solid var(--border-default);
                }
                
                th {
                    background: var(--bg-surface);
                    font-weight: 600;
                    color: var(--text-secondary);
                }
                
                tbody tr {
                    transition: background var(--duration-fast);
                    
                    &:hover { background: var(--bg-hover); }
                    &:last-child td { border-bottom: none; }
                }
            }
            
            @media (max-width: 768px) {
                .table {
                    font-size: 0.875rem;
                }
                
                .table th,
                .table td {
                    padding: var(--space-sm) var(--space-xs);
                }
            }
            
            /* ─── CODE BLOCKS ─── */
            .code-block {
                background: var(--bg-darkest);
                border: 1px solid var(--border-default);
                border-radius: var(--radius-lg);
                overflow: hidden;
            }
            
            .code-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: var(--space-sm) var(--space-md);
                background: var(--bg-surface);
                border-bottom: 1px solid var(--border-default);
                font-size: var(--fluid-sm);
                color: var(--text-muted);
            }
            
            .code-block pre {
                padding: var(--space-lg);
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                font-family: 'Fira Code', monospace;
                font-size: var(--fluid-sm);
                line-height: 1.7;
                max-width: 100%;
            }
            
            pre, code {
                max-width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            .code-copy {
                padding: var(--space-xs) var(--space-sm);
                border-radius: var(--radius-sm);
                font-size: var(--fluid-xs);
                color: var(--text-muted);
                
                &:hover { background: var(--bg-hover); color: var(--text-primary); }
            }
            
            /* Inline code */
            code:not(pre code) {
                padding: 2px 6px;
                background: var(--bg-elevated);
                border-radius: var(--radius-sm);
                font-family: 'Fira Code', monospace;
                font-size: 0.9em;
                color: var(--accent);
            }
            
            /* ─── ALERTS ─── */
            .alert {
                display: flex;
                align-items: flex-start;
                gap: var(--space-md);
                padding: var(--space-lg);
                border-radius: var(--radius-lg);
                border: 1px solid;
                
                &.alert-info {
                    background: oklch(65% 0.15 230 / 0.1);
                    border-color: oklch(65% 0.15 230 / 0.3);
                    color: var(--info);
                }
                
                &.alert-success {
                    background: oklch(65% 0.18 145 / 0.1);
                    border-color: oklch(65% 0.18 145 / 0.3);
                    color: var(--success);
                }
                
                &.alert-warning {
                    background: oklch(75% 0.16 85 / 0.1);
                    border-color: oklch(75% 0.16 85 / 0.3);
                    color: var(--warning);
                }
                
                &.alert-danger {
                    background: oklch(60% 0.22 25 / 0.1);
                    border-color: oklch(60% 0.22 25 / 0.3);
                    color: var(--danger);
                }
            }
            
            /* ─── BREADCRUMBS ─── */
            .breadcrumbs {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: var(--space-sm);
                font-size: var(--fluid-sm);
                color: var(--text-muted);
            }
            
            .breadcrumb-item {
                display: flex;
                align-items: center;
                gap: var(--space-sm);
                
                &::after { content: '/'; }
                &:last-child::after { content: none; }
                
                a:hover { color: var(--primary-9); }
            }
            
            /* ─── TIMELINE ─── */
            .timeline {
                position: relative;
                padding-left: 40px;
                
                &::before {
                    content: '';
                    position: absolute;
                    left: 15px;
                    top: 0;
                    bottom: 0;
                    width: 2px;
                    background: var(--border-default);
                }
            }
            
            .timeline-item {
                position: relative;
                padding-bottom: var(--space-xl);
                
                &::before {
                    content: '';
                    position: absolute;
                    left: -30px;
                    top: 6px;
                    width: 12px;
                    height: 12px;
                    background: var(--primary-9);
                    border-radius: var(--radius-full);
                    box-shadow: 0 0 0 4px var(--bg-dark);
                }
            }
            
            .timeline-time {
                font-size: var(--fluid-xs);
                color: var(--text-muted);
                margin-bottom: var(--space-xs);
            }
            
            /* ─── STEPPERS ─── */
            .stepper {
                display: flex;
                gap: var(--space-lg);
            }
            
            .stepper-item {
                display: flex;
                align-items: center;
                gap: var(--space-sm);
                flex: 1;
                
                &:not(:last-child)::after {
                    content: '';
                    flex: 1;
                    height: 2px;
                    background: var(--border-default);
                    margin-left: var(--space-sm);
                }
                
                &.completed {
                    .stepper-number { background: var(--success); }
                    &::after { background: var(--success); }
                }
                
                &.active .stepper-number {
                    background: var(--primary-9);
                    box-shadow: 0 0 0 4px oklch(50% 0.17 265 / 0.2);
                }
            }
            
            .stepper-number {
                width: 32px;
                height: 32px;
                background: var(--bg-elevated);
                border-radius: var(--radius-full);
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 600;
                font-size: var(--fluid-sm);
                flex-shrink: 0;
            }
            
            /* ─── DIVIDERS ─── */
            .divider {
                display: flex;
                align-items: center;
                gap: var(--space-md);
                color: var(--text-muted);
                font-size: var(--fluid-sm);
                
                &::before, &::after {
                    content: '';
                    flex: 1;
                    height: 1px;
                    background: var(--border-default);
                }
            }
            
            /* ─── PAGINATION ─── */
            .pagination {
                display: flex;
                gap: var(--space-xs);
            }
            
            .pagination-item {
                min-width: var(--touch-min);
                height: var(--touch-min);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: var(--radius-md);
                font-weight: 500;
                color: var(--text-secondary);
                transition: all var(--duration-fast);
                
                &:hover { background: var(--bg-elevated); color: var(--text-primary); }
                &.active { background: var(--primary-9); color: white; }
                &:disabled { opacity: 0.5; cursor: not-allowed; }
            }
            
            /* ─── RANGE SLIDER ─── */
            .range-slider {
                width: 100%;
                height: 6px;
                background: var(--bg-surface);
                border-radius: var(--radius-full);
                appearance: none;
                
                &::-webkit-slider-thumb {
                    appearance: none;
                    width: 20px;
                    height: 20px;
                    background: var(--primary-9);
                    border-radius: var(--radius-full);
                    cursor: pointer;
                    box-shadow: var(--shadow-sm);
                    transition: transform var(--duration-fast);
                    
                    &:hover { transform: scale(1.2); }
                }
            }
            
            /* ─── CHIPS / TAGS ─── */
            .chip {
                display: inline-flex;
                align-items: center;
                gap: var(--space-xs);
                padding: var(--space-xs) var(--space-sm);
                background: var(--bg-elevated);
                border-radius: var(--radius-full);
                font-size: var(--fluid-sm);
                
                .chip-remove {
                    width: 18px;
                    height: 18px;
                    border-radius: var(--radius-full);
                    font-size: 0.8rem;
                    color: var(--text-muted);
                    
                    &:hover { background: var(--danger); color: white; }
                }
            }
            
            /* ─── RIBBON ─── */
            .ribbon-wrapper {
                position: relative;
                overflow: hidden;
            }
            
            .ribbon {
                position: absolute;
                top: 24px;
                right: -35px;
                padding: var(--space-xs) var(--space-2xl);
                background: var(--primary-9);
                color: white;
                font-size: var(--fluid-xs);
                font-weight: 600;
                text-transform: uppercase;
                transform: rotate(45deg);
            }
        }
        
        /* ═══ LAYER: UTILITIES ═══ */
        @layer utilities {
            /* Flex */
            .flex { display: flex; }
            .flex-col { flex-direction: column; }
            .flex-wrap { flex-wrap: wrap; }
            .items-center { align-items: center; }
            .items-start { align-items: flex-start; }
            .items-end { align-items: flex-end; }
            .justify-center { justify-content: center; }
            .justify-between { justify-content: space-between; }
            .justify-end { justify-content: flex-end; }
            .gap-xs { gap: var(--space-xs); }
            .gap-sm { gap: var(--space-sm); }
            .gap-md { gap: var(--space-md); }
            .gap-lg { gap: var(--space-lg); }
            .gap-xl { gap: var(--space-xl); }
            
            /* Grid */
            .grid { display: grid; }
            .grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
            .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
            .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
            .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
            
            @media (max-width: 768px) {
                .md\\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
                .md\\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
            }
            
            /* Spacing */
            .m-auto { margin: auto; }
            .mx-auto { margin-left: auto; margin-right: auto; }
            .mt-xs { margin-top: var(--space-xs); }
            .mt-sm { margin-top: var(--space-sm); }
            .mt-md { margin-top: var(--space-md); }
            .mt-lg { margin-top: var(--space-lg); }
            .mt-xl { margin-top: var(--space-xl); }
            .mb-xs { margin-bottom: var(--space-xs); }
            .mb-sm { margin-bottom: var(--space-sm); }
            .mb-md { margin-bottom: var(--space-md); }
            .mb-lg { margin-bottom: var(--space-lg); }
            .mb-xl { margin-bottom: var(--space-xl); }
            
            .p-xs { padding: var(--space-xs); }
            .p-sm { padding: var(--space-sm); }
            .p-md { padding: var(--space-md); }
            .p-lg { padding: var(--space-lg); }
            .p-xl { padding: var(--space-xl); }
            
            /* Text */
            .text-xs { font-size: var(--fluid-xs); }
            .text-sm { font-size: var(--fluid-sm); }
            .text-base { font-size: var(--fluid-base); }
            .text-md { font-size: var(--fluid-md); }
            .text-lg { font-size: var(--fluid-lg); }
            .text-xl { font-size: var(--fluid-xl); }
            .text-2xl { font-size: var(--fluid-2xl); }
            .text-3xl { font-size: var(--fluid-3xl); }
            .text-hero { font-size: var(--fluid-hero); }
            
            .font-normal { font-weight: 400; }
            .font-medium { font-weight: 500; }
            .font-semibold { font-weight: 600; }
            .font-bold { font-weight: 700; }
            .font-black { font-weight: 900; }
            
            .text-center { text-align: center; }
            .text-left { text-align: left; }
            .text-right { text-align: right; }
            
            .text-primary { color: var(--text-primary); }
            .text-secondary { color: var(--text-secondary); }
            .text-muted { color: var(--text-muted); }
            .text-accent { color: var(--accent); }
            
            .text-gradient {
                background: var(--gradient-primary);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }
            
            /* Background */
            .bg-dark { background: var(--bg-dark); }
            .bg-surface { background: var(--bg-surface); }
            .bg-elevated { background: var(--bg-elevated); }
            .bg-gradient { background: var(--gradient-primary); }
            
            /* Border */
            .border { border: 1px solid var(--border-default); }
            .border-2 { border: 2px solid var(--border-default); }
            .border-primary { border-color: var(--primary-9); }
            .rounded-sm { border-radius: var(--radius-sm); }
            .rounded-md { border-radius: var(--radius-md); }
            .rounded-lg { border-radius: var(--radius-lg); }
            .rounded-xl { border-radius: var(--radius-xl); }
            .rounded-full { border-radius: var(--radius-full); }
            
            /* Effects */
            .shadow-sm { box-shadow: var(--shadow-sm); }
            .shadow-md { box-shadow: var(--shadow-md); }
            .shadow-lg { box-shadow: var(--shadow-lg); }
            .shadow-xl { box-shadow: var(--shadow-xl); }
            .shadow-glow { box-shadow: var(--shadow-glow); }
            
            .blur { filter: blur(8px); }
            .backdrop-blur { backdrop-filter: blur(12px); }
            
            /* Display */
            .hidden { display: none; }
            .block { display: block; }
            .inline-block { display: inline-block; }
            .inline-flex { display: inline-flex; }
            
            /* Position */
            .relative { position: relative; }
            .absolute { position: absolute; }
            .fixed { position: fixed; }
            .sticky { position: sticky; top: 0; }
            
            /* Size */
            .w-full { width: 100%; }
            .h-full { height: 100%; }
            .min-h-screen { min-height: 100vh; }
            
            /* Overflow */
            .overflow-hidden { overflow: hidden; }
            .overflow-auto { overflow: auto; }
            .overflow-x-auto { overflow-x: auto; }
            
            /* Visibility */
            .invisible { visibility: hidden; }
            .opacity-0 { opacity: 0; }
            .opacity-50 { opacity: 0.5; }
            .opacity-100 { opacity: 1; }
            
            /* Pointer */
            .pointer-events-none { pointer-events: none; }
            .cursor-pointer { cursor: pointer; }
            
            /* Truncate */
            .truncate {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            
            .line-clamp-2 {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
            
            .line-clamp-3 {
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
            
            /* Screen readers */
            .sr-only {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }
            
            /* Transitions */
            .transition-none { transition: none; }
            .transition-fast { transition: all var(--duration-fast); }
            .transition-base { transition: all var(--duration-base); }
            .transition-slow { transition: all var(--duration-slow); }
            
            /* Transform */
            .scale-90 { transform: scale(0.9); }
            .scale-100 { transform: scale(1); }
            .scale-105 { transform: scale(1.05); }
            .scale-110 { transform: scale(1.1); }
            .hover\\:scale-105:hover { transform: scale(1.05); }
            
            .rotate-45 { transform: rotate(45deg); }
            .rotate-90 { transform: rotate(90deg); }
            .rotate-180 { transform: rotate(180deg); }
            
            .translate-y-full { transform: translateY(100%); }
            .-translate-y-full { transform: translateY(-100%); }
        }
        
        /* ═══ LAYER: ANIMATIONS ═══ */
        @layer animations {
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            
            @keyframes fadeInUp {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
            
            @keyframes fadeInDown {
                from { opacity: 0; transform: translateY(-20px); }
                to { opacity: 1; transform: translateY(0); }
            }
            
            @keyframes slideInLeft {
                from { opacity: 0; transform: translateX(-30px); }
                to { opacity: 1; transform: translateX(0); }
            }
            
            @keyframes slideInRight {
                from { opacity: 0; transform: translateX(30px); }
                to { opacity: 1; transform: translateX(0); }
            }
            
            @keyframes slideDown {
                from { opacity: 0; max-height: 0; }
                to { opacity: 1; max-height: 500px; }
            }
            
            @keyframes scaleIn {
                from { opacity: 0; transform: scale(0.9); }
                to { opacity: 1; transform: scale(1); }
            }
            
            @keyframes scaleUp {
                from { transform: scale(0.95); }
                to { transform: scale(1); }
            }
            
            @keyframes spin {
                to { transform: rotate(360deg); }
            }
            
            @keyframes pulse {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.5; }
            }
            
            @keyframes bounce {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-10px); }
            }
            
            @keyframes shimmer {
                to { background-position: -200% 0; }
            }
            
            @keyframes float {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-10px); }
            }
            
            @keyframes glow {
                0%, 100% { box-shadow: 0 0 20px oklch(50% 0.17 265 / 0.3); }
                50% { box-shadow: 0 0 40px oklch(50% 0.17 265 / 0.6); }
            }
            
            @keyframes typewriter {
                from { width: 0; }
                to { width: 100%; }
            }
            
            @keyframes blink {
                50% { border-color: transparent; }
            }
            
            /* Scroll-driven animations (Chrome 115+, Safari 18+) */
            @supports (animation-timeline: scroll()) {
                .scroll-fade-in {
                    animation: fadeInUp linear;
                    animation-timeline: view();
                    animation-range: entry 0% entry 100%;
                }
                
                .scroll-scale {
                    animation: scaleIn linear;
                    animation-timeline: view();
                    animation-range: entry 0% cover 40%;
                }
                
                .parallax {
                    animation: parallaxY linear;
                    animation-timeline: scroll(root);
                }
                
                @keyframes parallaxY {
                    from { transform: translateY(-50px); }
                    to { transform: translateY(50px); }
                }
            }
            
            /* Animation utilities */
            .animate-fadeIn { animation: fadeIn 0.3s var(--ease-smooth); }
            .animate-fadeInUp { animation: fadeInUp 0.4s var(--ease-smooth); }
            .animate-fadeInDown { animation: fadeInDown 0.4s var(--ease-smooth); }
            .animate-slideInLeft { animation: slideInLeft 0.4s var(--ease-smooth); }
            .animate-slideInRight { animation: slideInRight 0.4s var(--ease-smooth); }
            .animate-scaleIn { animation: scaleIn 0.3s var(--ease-spring); }
            .animate-spin { animation: spin 1s linear infinite; }
            .animate-pulse { animation: pulse 2s ease-in-out infinite; }
            .animate-bounce { animation: bounce 1s ease infinite; }
            .animate-float { animation: float 3s ease-in-out infinite; }
            .animate-glow { animation: glow 2s ease-in-out infinite; }
            
            /* Staggered animations */
            [data-stagger] > * {
                animation-fill-mode: both;
            }
            
            [data-stagger="fadeIn"] > *:nth-child(1) { animation: fadeInUp 0.4s var(--ease-smooth) 0.05s; }
            [data-stagger="fadeIn"] > *:nth-child(2) { animation: fadeInUp 0.4s var(--ease-smooth) 0.1s; }
            [data-stagger="fadeIn"] > *:nth-child(3) { animation: fadeInUp 0.4s var(--ease-smooth) 0.15s; }
            [data-stagger="fadeIn"] > *:nth-child(4) { animation: fadeInUp 0.4s var(--ease-smooth) 0.2s; }
            [data-stagger="fadeIn"] > *:nth-child(5) { animation: fadeInUp 0.4s var(--ease-smooth) 0.25s; }
            [data-stagger="fadeIn"] > *:nth-child(6) { animation: fadeInUp 0.4s var(--ease-smooth) 0.3s; }
            
            /* Micro-interactions */
            .hover-lift { transition: transform var(--duration-fast), box-shadow var(--duration-fast); }
            .hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
            
            .hover-scale { transition: transform var(--duration-fast); }
            .hover-scale:hover { transform: scale(1.02); }
            
            .hover-glow { transition: box-shadow var(--duration-fast); }
            .hover-glow:hover { box-shadow: var(--shadow-glow); }
            
            .hover-border { transition: border-color var(--duration-fast); }
            .hover-border:hover { border-color: var(--primary-9); }
        }
    


                            @container (min-width: 350px) {
                                .cq-demo { flex-direction: row !important; }
                            }
                            @container (max-width: 349px) {
                                .cq-demo { flex-direction: column !important; text-align: center; }
                            }