/* ===== CSS VARIABLES ===== */
:root {
    /* Colors - Dark Theme */
    --color-bg: #000000;
    --color-bg-elevated: #0a0a0a;
    --color-surface: #111111;
    --color-surface-elevated: #1a1a1a;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-hover: rgba(255, 255, 255, 0.15);

    /* Text */
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.6);
    --color-text-tertiary: rgba(255, 255, 255, 0.4);

    /* Accent - Electric Violet */
    --color-accent: #8B5CF6;
    --color-accent-light: #A78BFA;
    --color-accent-dark: #7C3AED;
    --color-accent-glow: rgba(139, 92, 246, 0.5);

    /* Secondary Accents */
    --color-cyan: #22D3EE;
    --color-emerald: #10B981;
    --color-rose: #F43F5E;
    --color-amber: #F59E0B;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #8B5CF6 0%, #06B6D4 100%);
    --gradient-mesh: radial-gradient(at 40% 20%, rgba(139, 92, 246, 0.3) 0px, transparent 50%),
                    radial-gradient(at 80% 0%, rgba(6, 182, 212, 0.2) 0px, transparent 50%),
                    radial-gradient(at 0% 50%, rgba(139, 92, 246, 0.2) 0px, transparent 50%),
                    radial-gradient(at 80% 50%, rgba(16, 185, 129, 0.15) 0px, transparent 50%),
                    radial-gradient(at 0% 100%, rgba(244, 63, 94, 0.15) 0px, transparent 50%);

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    --space-5xl: 128px;
    --space-6xl: 192px;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Sizing */
    --max-width: 1400px;
    --header-height: 72px;

    /* Effects */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* ===== BASE ===== */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;
}

::selection {
    background: var(--color-accent);
    color: white;
}

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

img {
    max-width: 100%;
    height: auto;
}

/* ===== CURSOR GLOW ===== */
.cursor-glow {
    position: fixed;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--color-accent-glow) 0%, transparent 70%);
    pointer-events: none;
    z-index: 9999;
    opacity: 0.15;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

/* ===== NOISE OVERLAY ===== */
.noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
    opacity: 0.015;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ===== UTILITIES ===== */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

/* ===== HEADER ===== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    z-index: 1000;
    transition: all var(--transition);
}

.header-blur {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--color-border);
    opacity: 0;
    transition: opacity var(--transition);
}

.header.scrolled .header-blur {
    opacity: 1;
}

.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    z-index: 1;
}

.logo {
    display: flex;
    align-items: center;
    height: 32px;
}

.logo-svg {
    height: 24px;
    width: auto;
}

@keyframes logo-gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

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

.nav-link:hover {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-lg);
    transition: all var(--transition);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset,
                0 4px 20px rgba(139, 92, 246, 0.3);
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--transition);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset,
                0 8px 40px rgba(139, 92, 246, 0.4),
                0 0 80px rgba(139, 92, 246, 0.2);
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-border-hover);
    transform: translateY(-2px);
}

.btn-lg {
    padding: 16px 32px;
    font-size: 16px;
    border-radius: var(--radius-xl);
}

.btn-icon {
    width: 20px;
    height: 20px;
    transition: transform var(--transition);
}

.btn:hover .btn-icon {
    transform: translateX(4px);
}

/* ===== HERO ===== */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Hero positioned - for absolute children */

.hero-gradient-mesh {
    position: absolute;
    inset: 0;
    background: var(--gradient-mesh);
    opacity: 0.8;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: float 20s ease-in-out infinite;
}

.hero-orb-1 {
    width: 600px;
    height: 600px;
    background: var(--color-accent);
    opacity: 0.15;
    top: -200px;
    right: -100px;
    animation-delay: 0s;
}

.hero-orb-2 {
    width: 400px;
    height: 400px;
    background: var(--color-cyan);
    opacity: 0.1;
    bottom: -100px;
    left: -100px;
    animation-delay: -5s;
}

.hero-orb-3 {
    width: 300px;
    height: 300px;
    background: var(--color-emerald);
    opacity: 0.08;
    top: 40%;
    left: 60%;
    animation-delay: -10s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(-30px, -20px) scale(1.02); }
}

.hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 15vh var(--space-xl) 15vh !important;
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* ACT 3: Hero content becomes visible after rescue */
.hero-content.visible {
    opacity: 1;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 16px 8px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2xl);
    backdrop-filter: blur(10px);
    animation: fade-up 1s ease forwards;
    animation-delay: 0.2s;
    opacity: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s ease,
                background 0.4s ease,
                color 0.4s ease,
                box-shadow 0.4s ease;
}

.hero-eyebrow.animation-complete {
    opacity: 1;
}

.hero-eyebrow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(139, 92, 246, 0.4),
        rgba(6, 182, 212, 0.4),
        transparent
    );
    transition: left 0.6s ease;
}

.hero-eyebrow::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--gradient-primary);
    border-radius: 100px;
    z-index: -1;
    opacity: 0;
    filter: blur(12px);
    transition: opacity 0.4s ease, filter 0.4s ease;
}

.hero-eyebrow:hover {
    border-color: var(--color-accent);
    background: rgba(139, 92, 246, 0.15);
    color: var(--color-text-primary);
    box-shadow:
        0 0 30px rgba(139, 92, 246, 0.5),
        0 0 60px rgba(139, 92, 246, 0.3),
        0 0 100px rgba(139, 92, 246, 0.15),
        0 10px 40px rgba(0, 0, 0, 0.3);
    transform: scale(1.05) translateY(-2px);
}

.hero-eyebrow:hover::before {
    animation: eyebrow-shimmer-loop 2s ease-in-out infinite;
}

.hero-eyebrow:hover::after {
    opacity: 0.8;
    animation: eyebrow-glow-pulse 1.5s ease-in-out infinite;
}

/* Rakete auf Betriebstemperatur - Zittern via Box-Shadow Trick */
@keyframes eyebrow-glow-pulse {
    0%, 100% {
        opacity: 0.6;
        filter: blur(12px);
        transform: translate(0, 0);
    }
    12% { transform: translate(0.5px, -0.5px); }
    25% {
        opacity: 0.8;
        filter: blur(15px);
        transform: translate(-0.5px, 0.5px);
    }
    37% { transform: translate(0.5px, 0.3px); }
    50% {
        opacity: 1;
        filter: blur(18px);
        transform: translate(-0.3px, -0.5px);
    }
    62% { transform: translate(0.3px, 0.5px); }
    75% {
        opacity: 0.8;
        filter: blur(15px);
        transform: translate(-0.5px, -0.3px);
    }
    87% { transform: translate(0.5px, 0.3px); }
}

@keyframes eyebrow-shimmer-loop {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.hero-eyebrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--gradient-primary);
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
}

.hero-eyebrow:hover .hero-eyebrow-icon {
    transform: rotate(360deg) scale(1.15);
    animation: icon-glow-pulse 0.8s ease-in-out infinite;
    animation-delay: 0.4s;
}

@keyframes icon-glow-pulse {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(139, 92, 246, 0.8),
            0 0 40px rgba(139, 92, 246, 0.4);
    }
    50% {
        box-shadow:
            0 0 30px rgba(139, 92, 246, 1),
            0 0 60px rgba(139, 92, 246, 0.7),
            0 0 80px rgba(6, 182, 212, 0.4);
    }
}

.hero-eyebrow-icon svg {
    display: block;
    width: 12px;
    height: 12px;
    stroke: white;
    fill: none;
    transition: all 0.3s ease;
    transform: translate(0.5px, -0.5px);
}

.hero-eyebrow:hover .hero-eyebrow-icon svg {
    stroke: white;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
    animation: icon-star-flicker 0.1s ease-in-out infinite;
}

@keyframes icon-star-flicker {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1)); }
    50% { opacity: 0.9; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)); }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   PROJECT CONTROL DASHBOARD - Premium Level
   ============================================ */

/* Container */
#hero-alerts {
    position: absolute;
    top: 35vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: 90%;
    max-width: 700px;
    transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dashboard */
.project-dashboard {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    padding: 32px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* Header */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.dashboard-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: all 0.4s ease;
}

.status-indicator[data-status="healthy"] {
    background: #22C55E;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
}

.status-indicator[data-status="warning"] {
    background: #FB923C;
    box-shadow: 0 0 12px rgba(251, 146, 60, 0.6);
    animation: pulse-warning 1.5s ease-in-out infinite;
}

.status-indicator[data-status="critical"] {
    background: #EF4444;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.8);
    animation: pulse-critical 1s ease-in-out infinite;
}

.dashboard-title-text {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

.dashboard-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.status-text {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    transition: all 0.4s ease;
}

.status-text[data-status="healthy"] {
    background: rgba(34, 197, 94, 0.2);
    color: #22C55E;
}

.status-text[data-status="warning"] {
    background: rgba(251, 146, 60, 0.2);
    color: #FB923C;
}

.status-text[data-status="critical"] {
    background: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

/* Metrics Grid */
.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Metric Card */
.metric-card {
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid;
    border-radius: 10px;
    transition: all 0.5s ease;
}

.metric-card[data-severity="success"] {
    border-color: rgba(34, 197, 94, 0.3);
}

.metric-card[data-severity="warning"] {
    border-color: rgba(251, 146, 60, 0.4);
    background: rgba(251, 146, 60, 0.03);
}

.metric-card[data-severity="critical"] {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.05);
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.metric-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.metric-value {
    font-size: 20px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    color: rgba(255, 255, 255, 0.95);
    transition: color 0.4s ease;
}

.metric-card[data-severity="critical"] .metric-value {
    color: #EF4444;
}

/* Progress Bar */
.metric-bar-container {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.metric-bar {
    height: 100%;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.5s ease;
    border-radius: 3px;
}

.metric-card[data-severity="success"] .metric-bar {
    background: linear-gradient(90deg, #22C55E, #10B981);
}

.metric-card[data-severity="warning"] .metric-bar {
    background: linear-gradient(90deg, #FB923C, #F59E0B);
}

.metric-card[data-severity="critical"] .metric-bar {
    background: linear-gradient(90deg, #EF4444, #DC2626);
}

.metric-status {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.4s ease;
}

.metric-card[data-severity="critical"] .metric-status {
    color: #EF4444;
    font-weight: 500;
}

/* System Failure Glitch */
.project-dashboard.system-failure {
    animation: dashboard-glitch 0.8s ease;
    border-color: rgba(239, 68, 68, 0.8);
}

@keyframes dashboard-glitch {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-3px) skewX(-2deg); }
    20% { transform: translateX(3px) skewX(2deg); }
    30% { transform: translateX(-3px) skewX(-2deg); }
    40% { transform: translateX(3px) skewX(2deg); }
    50% { transform: translateX(-2px); }
    60% { transform: translateX(2px); }
}

@keyframes pulse-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes pulse-critical {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.15); }
}

/* ============================================
   FAILURE MESSAGES
   ============================================ */

#hero-failure-messages {
    position: absolute !important;
    top: 40vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 101;
    text-align: center;
    opacity: 0;
    transition: opacity 0.8s ease !important;
    pointer-events: none;
}

.failure-headline {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: #EF4444;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.failure-question {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

/* ============================================
   GUARANTEE SECTION - Enterprise Premium
   ============================================ */

.guarantee-section {
    padding: 8rem 0;
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.4) 0%,
        rgba(139, 92, 246, 0.05) 50%,
        rgba(15, 23, 42, 0.4) 100%
    );
    border-top: 1px solid rgba(139, 92, 246, 0.2);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.guarantee-title {
    text-align: center;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #8B5CF6, #06B6D4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.guarantee-headline {
    text-align: center;
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    margin-bottom: 4rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.guarantee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.guarantee-item {
    padding: 2.5rem 2rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(139, 92, 246, 0.2);
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;
}

.guarantee-item:hover {
    border-color: rgba(139, 92, 246, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(139, 92, 246, 0.15);
}

.guarantee-number {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: 1rem;
    font-family: 'Courier New', monospace;
}

.guarantee-item-title {
    font-size: 20px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.guarantee-item-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.guarantee-start {
    text-align: center;
    padding: 3rem 2rem 0;
    border-top: 1px solid rgba(139, 92, 246, 0.15);
}

.guarantee-start-label {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.75rem;
}

.guarantee-start-desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.guarantee-cta {
    display: inline-flex;
}

/* Success Metrics - Premium Dashboard Style */
.hero-success-metrics {
    display: flex;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
    flex-wrap: wrap;
}

.success-metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 16px;
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    min-width: 140px;
}

.metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(34, 197, 94, 0.2);
    border-radius: 50%;
    color: #22C55E;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 4px;
}

.metric-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
}

.metric-status {
    font-size: 14px;
    font-weight: 600;
    color: #22C55E;
    letter-spacing: 0.01em;
}

/* Hero Promise - Minimal & Premium */
.hero-promise {
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    text-align: center;
    margin-bottom: 16px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.01em;
}

.hero-title {
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.04em;
    margin-bottom: 32px;
    animation: fade-up 1s ease forwards;
    animation-delay: 0.4s;
    opacity: 0;
    overflow: visible;
}

.hero-title-line {
    display: block;
    padding-bottom: 4px;
}

.hero-title-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 400;
    color: var(--color-text-secondary);
    max-width: 600px;
    line-height: 1.6;
    margin-bottom: var(--space-2xl);
    animation: fade-up 1s ease forwards;
    animation-delay: 0.6s;
    opacity: 0;
}

.hero-cta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    justify-content: center;
    animation: fade-up 1s ease forwards;
    animation-delay: 0.8s;
    opacity: 0;
    margin-top: 48px;
}

/* Hero Visual */
/* ===== PREMIUM LIVING EXPERTISE SHOWCASE ===== */

/* 3D Entrance animations for showcase elements */
@keyframes fly-in-3d-left {
    0% {
        opacity: 0;
        transform: perspective(1000px) translateX(-100px) translateZ(-200px) rotateY(25deg);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) translateX(0) translateZ(0) rotateY(0deg);
        filter: blur(0);
    }
}

@keyframes fly-in-3d-right {
    0% {
        opacity: 0;
        transform: perspective(1000px) translateX(100px) translateZ(-200px) rotateY(-25deg);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) translateX(0) translateZ(0) rotateY(0deg);
        filter: blur(0);
    }
}

@keyframes fly-in-3d-up {
    0% {
        opacity: 0;
        transform: perspective(1000px) translateY(80px) translateZ(-150px) rotateX(-15deg);
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) translateY(0) translateZ(0) rotateX(0deg);
        filter: blur(0);
    }
}

@keyframes fly-in-3d-down {
    0% {
        opacity: 0;
        transform: perspective(1000px) translateY(-60px) translateZ(-150px) rotateX(15deg);
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) translateY(0) translateZ(0) rotateX(0deg);
        filter: blur(0);
    }
}

@keyframes fly-in-3d-center {
    0% {
        opacity: 0;
        transform: perspective(1000px) translateZ(-300px) scale(0.7);
        filter: blur(10px);
    }
    60% {
        opacity: 1;
        transform: perspective(1000px) translateZ(20px) scale(1.02);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) translateZ(0) scale(1);
        filter: blur(0);
    }
}

@keyframes scale-in-3d {
    0% {
        opacity: 0;
        transform: perspective(1000px) scale(0.6) translateZ(-100px);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) scale(1) translateZ(0);
        filter: blur(0);
    }
}

@keyframes pop-in-3d {
    0% {
        opacity: 0;
        transform: perspective(1000px) translateZ(-80px) scale(0.8);
    }
    70% {
        opacity: 1;
        transform: perspective(1000px) translateZ(15px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) translateZ(0) scale(1);
    }
}

.hero-visual {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: var(--space-4xl) auto 0;
    padding: 0 var(--space-xl);
    animation: fade-up 1.2s ease forwards;
    animation-delay: 1s;
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-visual-container {
    position: relative;
    width: 100%;
    background: linear-gradient(180deg, rgba(8, 8, 12, 0.98) 0%, rgba(4, 4, 8, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 50px 100px -20px rgba(0, 0, 0, 0.5),
        0 30px 60px -30px rgba(139, 92, 246, 0.15);
}

.hero-visual-glow {
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg,
        rgba(139, 92, 246, 0.15) 0%,
        transparent 50%,
        rgba(6, 182, 212, 0.1) 100%);
    border-radius: 24px;
    z-index: -1;
    opacity: 1;
}

/* Ambient Light Effect */
.hero-visual-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 70% 80%, rgba(6, 182, 212, 0.06) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

/* ===== EXPERTISE INTRO (Outside Card) ===== */
.expertise-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-xl);
    text-align: center;
}

/* ===== EXPERTISE CAROUSEL NAV ===== */
.expertise-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xl);
    margin-bottom: var(--space-lg);
}

.expertise-nav-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.expertise-nav-arrow:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.15);
}

.expertise-nav-arrow:active {
    transform: scale(0.95);
}

.expertise-nav-arrow svg {
    width: 18px;
    height: 18px;
}

.expertise-nav-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 220px;
}

.expertise-nav-dots {
    display: flex;
    gap: 12px;
}

.expertise-nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.expertise-nav-dot:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.3);
}

.expertise-nav-dot.active {
    background: var(--color-accent);
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.6);
    transform: scale(1.2);
}

.expertise-nav-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    min-width: 200px;
    text-align: center;
}

.expertise-nav-label.fade-out {
    opacity: 0;
    transform: translateY(-5px);
}

.expertise-nav-label.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Hide old header */
.expertise-header {
    display: none;
}


.expertise-title {
    font-size: 28px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.03em;
    position: relative;
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.expertise-tabs {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.02);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.expertise-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    background: transparent;
}

.expertise-tab:hover {
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.03);
}

.expertise-tab.active {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.expertise-tab-icon {
    width: 16px;
    height: 16px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.expertise-tab.active .expertise-tab-icon {
    opacity: 1;
}

.expertise-tab svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.expertise-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 100px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    user-select: none;
    min-width: 130px;
    justify-content: center;
}

.expertise-indicator-text {
    min-width: 75px;
    text-align: center;
}

.expertise-indicator:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--color-border);
}

.expertise-indicator-dot {
    width: 6px;
    height: 6px;
    background: var(--color-emerald);
    border-radius: 50%;
    animation: pulse-subtle 2s ease-in-out infinite;
    transition: background 0.3s ease;
}

.expertise-indicator.paused .expertise-indicator-dot {
    background: var(--color-amber);
    animation: none;
}

.expertise-indicator-toggle {
    width: 14px;
    height: 14px;
    margin-left: 4px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.expertise-indicator:hover .expertise-indicator-toggle {
    opacity: 1;
}

.expertise-indicator-toggle svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

@keyframes pulse-subtle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}

/* ===== MAIN SHOWCASE AREA ===== */
.expertise-showcase {
    display: grid;
    grid-template-columns: 1fr 300px;
    min-height: 480px;
    position: relative;
}

/* Canvas Area */
.expertise-canvas {
    position: relative;
    padding: 32px;
    overflow: hidden;
}

/* Individual Expertise Panels */
.expertise-panel {
    position: absolute;
    inset: 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(60px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.expertise-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.expertise-panel.slide-left {
    transform: translateX(-60px);
    opacity: 0;
}

.expertise-panel.slide-right {
    transform: translateX(60px);
    opacity: 0;
}

/* ===== PM PANEL ===== */
.exp-pm {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 0;
}

.exp-pm-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    flex: 1;
    min-height: 0;
}

.exp-pm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.exp-pm-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

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

.exp-pm-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-text-tertiary);
}

.exp-pm-stat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.exp-pm-stat-dot.green { background: var(--color-emerald); }
.exp-pm-stat-dot.amber { background: var(--color-amber); }
.exp-pm-stat-dot.red { background: var(--color-rose); }

/* Kanban Mini */
.exp-kanban {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    gap: 10px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.exp-kanban-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

.exp-kanban-col::-webkit-scrollbar {
    width: 4px;
}

.exp-kanban-col::-webkit-scrollbar-track {
    background: transparent;
}

.exp-kanban-col::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 2px;
}

.exp-kanban-col-header {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    justify-content: space-between;
}

.exp-kanban-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.exp-kanban-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateY(-1px);
}

.exp-kanban-card-title {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.exp-kanban-card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--color-text-tertiary);
}

.exp-kanban-card-priority {
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.exp-kanban-card-priority.high { background: var(--color-rose); }
.exp-kanban-card-priority.medium { background: var(--color-amber); }
.exp-kanban-card-priority.low { background: var(--color-emerald); }

/* === PASSIVE MICRO-ANIMATIONS === */

/* Kanban cards subtle float */
.expertise-panel.active .exp-kanban-card:nth-child(1) {
    animation: card-float 4s ease-in-out infinite;
}
.expertise-panel.active .exp-kanban-card:nth-child(2) {
    animation: card-float 4.5s ease-in-out infinite 0.5s;
}
.expertise-panel.active .exp-kanban-card:nth-child(3) {
    animation: card-float 5s ease-in-out infinite 1s;
}

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

/* Risk dots subtle pulse */
.expertise-panel.active .exp-risk-dot {
    animation: risk-pulse 3s ease-in-out infinite;
}

@keyframes risk-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.8; }
}

/* Timeline progress animation */
.expertise-panel.active .exp-timeline-progress {
    animation: timeline-grow 8s ease-in-out infinite;
}

@keyframes timeline-grow {
    0% { width: 25%; }
    50% { width: 85%; }
    100% { width: 25%; }
}

/* Automation nodes sequential glow */
.expertise-panel.active .exp-auto-node:nth-child(1) {
    animation: node-glow 6s ease-in-out infinite;
}
.expertise-panel.active .exp-auto-node:nth-child(2) {
    animation: node-glow 6s ease-in-out infinite 1.5s;
}
.expertise-panel.active .exp-auto-node:nth-child(3) {
    animation: node-glow 6s ease-in-out infinite 3s;
}
.expertise-panel.active .exp-auto-node:nth-child(4) {
    animation: node-glow 6s ease-in-out infinite 4.5s;
}

@keyframes node-glow {
    0%, 100% {
        box-shadow: none;
        border-color: rgba(255, 255, 255, 0.08);
    }
    25%, 35% {
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
        border-color: var(--color-accent);
    }
}

/* Log lines typing effect */
.expertise-panel.active .exp-auto-log-line {
    animation: log-appear 4s ease-in-out infinite;
}
.expertise-panel.active .exp-auto-log-line:nth-child(2) {
    animation-delay: 1.3s;
}
.expertise-panel.active .exp-auto-log-line:nth-child(3) {
    animation-delay: 2.6s;
}

@keyframes log-appear {
    0%, 100% { opacity: 0.4; }
    20%, 80% { opacity: 1; }
}

/* Migration arrow flow */
.expertise-panel.active .exp-migrate-arrow-line::after {
    animation: arrow-flow 2s ease-in-out infinite;
}

@keyframes arrow-flow {
    0% { transform: translateX(-40px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(0px); opacity: 0; }
}

/* Migration tables highlight cycle */
.expertise-panel.active .exp-migrate-table:nth-child(1) {
    animation: table-highlight 8s ease-in-out infinite;
}
.expertise-panel.active .exp-migrate-table:nth-child(2) {
    animation: table-highlight 8s ease-in-out infinite 2s;
}
.expertise-panel.active .exp-migrate-table:nth-child(3) {
    animation: table-highlight 8s ease-in-out infinite 4s;
}

@keyframes table-highlight {
    0%, 100% {
        background: rgba(255, 255, 255, 0.02);
        border-color: rgba(255, 255, 255, 0.05);
    }
    15%, 25% {
        background: rgba(139, 92, 246, 0.1);
        border-color: rgba(139, 92, 246, 0.3);
    }
}

/* Test pyramid layers - no auto-animation */

/* Coverage bar animate */
.expertise-panel.active .exp-test-coverage-fill {
    animation: coverage-fill 6s ease-in-out infinite;
}

@keyframes coverage-fill {
    0%, 100% { width: 78%; }
    50% { width: 92%; }
}

/* === DRAG AND DROP SYSTEM === */

/* Draggable Kanban Cards */
.exp-kanban-card {
    cursor: grab;
    touch-action: none;
}

.exp-kanban-card.dragging {
    opacity: 0.9;
    cursor: grabbing;
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.4);
    border-color: var(--color-accent);
    transform: rotate(3deg) scale(1.05);
}

.exp-kanban-col.drag-over {
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--color-accent);
}

.exp-kanban-col.drag-over .exp-kanban-col-header {
    color: var(--color-accent-light);
}

/* Drop indicator */
.exp-kanban-drop-indicator {
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px;
    margin: 4px 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.exp-kanban-col.drag-over .exp-kanban-drop-indicator {
    opacity: 1;
}

/* Draggable Automation Nodes */
.exp-auto-node {
    cursor: grab;
    touch-action: none;
}

.exp-auto-node.dragging {
    cursor: grabbing;
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.5);
}

.exp-auto-node.connecting {
    animation: node-connect-pulse 0.5s ease-in-out infinite;
}

@keyframes node-connect-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }
}

/* Connection line being drawn */
.exp-auto-connection-line {
    stroke: url(#auto-gradient);
    stroke-width: 2;
    stroke-dasharray: 8 4;
    fill: none;
    animation: connection-dash 0.5s linear infinite;
}

@keyframes connection-dash {
    to { stroke-dashoffset: -12; }
}

/* Established connection */
.exp-auto-connection-established {
    stroke: url(#auto-gradient);
    stroke-width: 2;
    fill: none;
    opacity: 0.8;
}

/* Data flow particles */
.exp-auto-particle {
    fill: var(--color-accent);
    filter: blur(1px);
}

/* Draggable Migration Tables */
.exp-migrate-table {
    cursor: grab;
    touch-action: none;
}

.exp-migrate-table.dragging {
    cursor: grabbing;
    z-index: 1000;
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.4);
    border-color: var(--color-accent);
    transform: scale(1.05);
}

.exp-migrate-target.can-drop {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--color-emerald);
}

.exp-migrate-target.can-drop .exp-migrate-icon {
    background: rgba(16, 185, 129, 0.2);
}

/* Migration progress indicator - inside target container */
.exp-migrate-target .exp-migrate-progress {
    margin-top: 12px;
    height: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.exp-migrate-target .exp-migrate-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), var(--color-emerald));
    width: 0%;
    transition: width 0.5s ease;
}

/* Result Toast */
.exp-result-toast {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(16, 185, 129, 0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    z-index: 100;
}

.exp-result-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.exp-result-toast.error {
    background: rgba(239, 68, 68, 0.9);
}

/* Interactive Test Layers */
.exp-test-layer {
    cursor: pointer;
    transition: all 0.3s ease;
}

.exp-test-layer:hover {
    transform: scaleX(1.03);
}

.exp-test-layer.selected {
    box-shadow: 0 0 0 2px var(--color-accent);
}

.exp-test-runner {
    padding: 6px 14px;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.exp-test-runner:hover {
    background: var(--color-accent-light);
}

.exp-test-runner.running {
    background: var(--color-cyan);
    animation: pulse-subtle 1s ease-in-out infinite;
}

/* Risk Matrix Mini */
.exp-risk {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 14px;
    position: relative;
    overflow: visible;
    transition: all 0.5s ease;
}

/* Danger mode - all risks in critical zone */
.exp-risk.danger-mode {
    background: rgba(244, 63, 94, 0.15);
    border-color: rgba(244, 63, 94, 0.4);
    box-shadow:
        0 0 30px rgba(244, 63, 94, 0.3),
        inset 0 0 20px rgba(244, 63, 94, 0.1);
    animation: danger-pulse 2s ease-in-out infinite;
}

@keyframes danger-pulse {
    0%, 100% {
        box-shadow:
            0 0 30px rgba(244, 63, 94, 0.3),
            inset 0 0 20px rgba(244, 63, 94, 0.1);
    }
    50% {
        box-shadow:
            0 0 50px rgba(244, 63, 94, 0.5),
            inset 0 0 30px rgba(244, 63, 94, 0.2);
    }
}

.exp-risk-title {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.exp-risk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 28px);
    gap: 3px;
}

.exp-risk-cell {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    position: relative;
    transition: all 0.2s ease;
}

.exp-risk-cell:hover {
    background: rgba(255, 255, 255, 0.05);
}

.exp-risk-cell.high { background: rgba(244, 63, 94, 0.15); }
.exp-risk-cell.medium { background: rgba(245, 158, 11, 0.12); }
.exp-risk-cell.low { background: rgba(16, 185, 129, 0.1); }

.exp-risk-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    cursor: grab;
    transition: all 0.2s ease;
}

.exp-risk-dot:hover {
    transform: translate(-50%, -50%) scale(1.3);
}

.exp-risk-dot.dragging {
    cursor: grabbing;
    opacity: 0.5;
}

/* Hide tooltip content in drag ghost image */
.exp-risk-dot.dragging .exp-risk-tooltip,
.exp-risk-dot.dragging .exp-risk-tooltip * {
    display: none !important;
}

/* Timeline Mini */
.exp-timeline {
    grid-column: 1 / -1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 14px;
    position: relative;
    overflow: visible;
}

.exp-timeline-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.exp-timeline-title {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.exp-timeline-months {
    display: flex;
    gap: 24px;
    font-size: 9px;
    color: var(--color-text-tertiary);
}

.exp-timeline-tracks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.exp-timeline-track {
    display: flex;
    align-items: center;
    gap: 10px;
}

.exp-timeline-track-label {
    font-size: 9px;
    color: var(--color-text-tertiary);
    width: 60px;
    flex-shrink: 0;
}

.exp-timeline-track-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.exp-timeline-track-fill {
    position: absolute;
    height: 100%;
    border-radius: 3px;
    transition: width 1s ease;
}

.exp-timeline-track-fill.purple { background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light)); }
.exp-timeline-track-fill.cyan { background: linear-gradient(90deg, #0891B2, var(--color-cyan)); }
.exp-timeline-track-fill.emerald { background: linear-gradient(90deg, #059669, var(--color-emerald)); }

/* Timeline Milestones */
.exp-timeline-milestones {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.exp-timeline-milestone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.exp-timeline-milestone:hover {
    transform: translateY(-2px);
}

.exp-timeline-milestone-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.exp-timeline-milestone-icon svg {
    width: 10px;
    height: 10px;
    fill: none;
    stroke: var(--color-text-tertiary);
    stroke-width: 2;
}

.exp-timeline-milestone.completed .exp-timeline-milestone-icon {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--color-emerald);
}

.exp-timeline-milestone.completed .exp-timeline-milestone-icon svg {
    stroke: var(--color-emerald);
}

.exp-timeline-milestone.active .exp-timeline-milestone-icon {
    background: rgba(139, 92, 246, 0.2);
    border-color: var(--color-accent);
    animation: milestone-pulse 2s ease-in-out infinite;
}

.exp-timeline-milestone.active .exp-timeline-milestone-icon svg {
    stroke: var(--color-accent);
}

.exp-timeline-milestone.finish .exp-timeline-milestone-icon {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
}

.exp-timeline-milestone.finish .exp-timeline-milestone-icon svg {
    stroke: #F59E0B;
}

.exp-timeline-milestone.finish:hover .exp-timeline-milestone-icon {
    background: rgba(245, 158, 11, 0.3);
    transform: scale(1.1);
}

.exp-timeline-milestone-label {
    font-size: 7px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

@keyframes milestone-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(139, 92, 246, 0); }
}

/* Firework Animation */
.exp-firework-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 100;
}

.exp-firework-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: firework-burst 1s ease-out forwards;
}

@keyframes firework-burst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

.exp-firework-sparkle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: sparkle-fade 0.8s ease-out forwards;
}

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

/* Risk Matrix Enhanced */
.exp-risk-dot {
    cursor: grab;
    touch-action: none;
    z-index: 10;
}

.exp-risk-dot.dragging {
    cursor: grabbing;
    z-index: 100;
    transform: translate(-50%, -50%) scale(1.5);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.6);
}

.exp-risk-cell.drag-over {
    outline: 2px dashed var(--color-accent);
    outline-offset: -2px;
    background: rgba(139, 92, 246, 0.15) !important;
}

.exp-risk-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 15, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 140px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 200;
    pointer-events: none;
}

.exp-risk-dot:hover .exp-risk-tooltip,
.exp-risk-dot.show-tooltip .exp-risk-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Hide tooltip while dragging */
.exp-risk-dot.dragging .exp-risk-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
}

.exp-risk-tooltip-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.exp-risk-tooltip-detail {
    font-size: 9px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.exp-risk-tooltip-level {
    display: inline-block;
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
}

.exp-risk-tooltip-level.high {
    background: rgba(244, 63, 94, 0.2);
    color: #F43F5E;
}

.exp-risk-tooltip-level.medium {
    background: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
}

.exp-risk-tooltip-level.low {
    background: rgba(16, 185, 129, 0.2);
    color: #10B981;
}

.exp-risk-legend {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.exp-risk-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 8px;
    color: var(--color-text-tertiary);
}

.exp-risk-legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.exp-risk-legend-dot.high { background: #F43F5E; }
.exp-risk-legend-dot.medium { background: #F59E0B; }
.exp-risk-legend-dot.low { background: #10B981; }

.exp-risk-hint {
    font-size: 8px;
    color: var(--color-text-tertiary);
    text-align: center;
    opacity: 0.6;
    margin-top: 4px;
}

/* ===== AUTOMATION PANEL ===== */
.exp-auto {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 16px;
}

.exp-auto-canvas {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.exp-auto-grid {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.03) 1px, transparent 0);
    background-size: 24px 24px;
}

.exp-auto-nodes {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    z-index: 2;
    padding: 0 10px;
}

/* Node group for stacked LLM options */
.exp-auto-node-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.exp-auto-node-or {
    font-size: 9px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.6;
}

.exp-auto-node {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(20, 20, 28, 0.95) 0%, rgba(28, 28, 40, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.exp-auto-node::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.5) 0%, rgba(6, 182, 212, 0.5) 100%);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.exp-auto-node:hover {
    transform: translateY(-4px) scale(1.05);
    border-color: transparent;
}

.exp-auto-node:hover::before {
    opacity: 1;
    filter: blur(8px);
}

.exp-auto-node.active {
    border-color: var(--color-cyan);
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.3);
}

/* Sealed Vault special styling */
.exp-auto-node.sealed-vault {
    border-color: rgba(16, 185, 129, 0.3);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(20, 20, 28, 0.95) 100%);
}

.exp-auto-node.sealed-vault::before {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.4) 0%, rgba(6, 182, 212, 0.3) 100%);
}

.exp-auto-node.sealed-vault .exp-auto-node-icon svg {
    stroke: var(--color-emerald);
}

.exp-auto-node-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 6px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(6, 182, 212, 0.8) 100%);
    border-radius: 6px;
    font-size: 7px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

/* Disabled state for alternative LLM when one is selected */
.exp-auto-node.disabled {
    opacity: 0.3;
    pointer-events: none;
    transform: scale(0.9);
}

.exp-auto-node.sealed-vault.disabled {
    opacity: 0.3;
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(20, 20, 28, 0.95) 0%, rgba(28, 28, 40, 0.9) 100%);
}

.exp-auto-node.sealed-vault.disabled .exp-auto-node-icon svg {
    stroke: var(--color-text-tertiary);
}

.exp-auto-node.sealed-vault.disabled .exp-auto-node-badge {
    opacity: 0.3;
}

.exp-auto-node-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exp-auto-node-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--color-text-secondary);
    stroke-width: 1.5;
    fill: none;
}

.exp-auto-node:hover .exp-auto-node-icon svg,
.exp-auto-node.active .exp-auto-node-icon svg {
    stroke: var(--color-cyan);
}

.exp-auto-node-label {
    font-size: 9px;
    font-weight: 500;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Node Dragging State */
.exp-auto-node.node-dragging {
    cursor: grabbing;
    z-index: 100;
    transform: scale(1.1);
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.4);
    border-color: var(--color-accent);
}

/* Connection line styles - ESTABLISHED (solid) */
.exp-auto-connection-established {
    stroke: #8b5cf6;
    stroke-width: 3;
    stroke-dasharray: none;
    stroke-linecap: round;
    fill: none;
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.5));
}

.exp-auto-connection-established.flow-active {
    stroke: #10b981;
    stroke-dasharray: 8 4;
    animation: flowDash 0.6s linear infinite;
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.6));
}

/* Connection line styles - PREVIEW (dashed, follows mouse) */
.exp-auto-connection-preview {
    stroke: rgba(139, 92, 246, 0.35);
    stroke-width: 2;
    stroke-dasharray: 6 8;
    stroke-linecap: round;
    pointer-events: none;
    fill: none;
    opacity: 1;
}

@keyframes previewPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

@keyframes flowDash {
    to { stroke-dashoffset: -12; }
}

/* Node states */
.exp-auto-node {
    position: relative;
}

.exp-auto-node.has-connection::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    background: var(--color-emerald);
    border-radius: 50%;
    border: 2px solid var(--color-bg-primary);
}

.exp-auto-node.selecting {
    transform: scale(1.08);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
    border-color: var(--color-accent);
    z-index: 10;
}

.exp-auto-node.selecting .exp-auto-node-icon svg {
    stroke: var(--color-accent-light);
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.8));
}

.exp-auto-node.valid-target {
    border-color: var(--color-emerald);
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.35);
    animation: pulse-glow 1.5s ease-in-out infinite;
}

.exp-auto-node.valid-target .exp-auto-node-icon svg {
    stroke: var(--color-emerald);
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.7));
}

.exp-auto-node.dimmed {
    opacity: 0.35;
    transform: scale(0.95);
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 30px rgba(16, 185, 129, 0.6); }
}

/* Node states for complete flow - elegant glow effect */
.exp-auto-node.flow-active {
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.3);
    animation: flowNodePulse 2.5s ease-in-out infinite;
}

.exp-auto-node.flow-active .exp-auto-node-icon svg {
    stroke: var(--color-emerald);
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.8));
}

.exp-auto-node.flow-active .exp-auto-node-label {
    color: var(--color-emerald);
}

@keyframes flowNodePulse {
    0%, 100% {
        box-shadow: 0 0 25px rgba(16, 185, 129, 0.3);
    }
    50% {
        box-shadow: 0 0 35px rgba(16, 185, 129, 0.45);
    }
}

/* Flow status indicator */
.exp-auto-flow-status {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-tertiary);
    transition: all 0.3s ease;
}

.exp-auto-flow-status.complete {
    color: var(--color-emerald);
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
}

.exp-auto-flow-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-amber);
}

.exp-auto-flow-status.complete .exp-auto-flow-status-dot {
    background: var(--color-emerald);
    box-shadow: 0 0 8px var(--color-emerald);
    animation: pulse 1.5s ease-in-out infinite;
}

/* Instruction bar at bottom */
.exp-auto-instructions {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 12px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 14px;
    font-size: 9px;
    color: var(--color-accent-light);
    transition: all 0.3s ease;
}

.exp-auto-instructions.selecting {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--color-emerald);
}

.exp-auto-instructions.complete {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.4);
    color: var(--color-emerald);
}

/* Connection Lines SVG */
.exp-auto-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.exp-auto-path {
    fill: none;
    stroke: url(#auto-gradient);
    stroke-width: 2;
    stroke-dasharray: 8 6;
    opacity: 0.4;
    animation: dash-flow 1.5s linear infinite;
}

.exp-auto-path.active {
    opacity: 1;
    stroke-width: 2.5;
    filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.5));
}

@keyframes dash-flow {
    to { stroke-dashoffset: -28; }
}

/* Data Particle */
.exp-auto-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--color-cyan);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--color-cyan);
    z-index: 3;
    opacity: 0;
}

/* Automation Hint */
.exp-auto-hint {
    text-align: center;
    font-size: 9px;
    color: var(--color-text-tertiary);
    opacity: 0.7;
    margin: 8px 0;
    transition: opacity 0.3s ease;
}

.exp-auto-hint.hidden {
    opacity: 0;
}

/* Log Output */
.exp-auto-log {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 10px;
    max-height: 80px;
    overflow: hidden;
}

.exp-auto-log-line {
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
    opacity: 0;
    animation: log-appear 0.3s ease forwards;
}

@keyframes log-appear {
    to { opacity: 1; }
}

.exp-auto-log-time {
    color: var(--color-text-tertiary);
}

.exp-auto-log-msg {
    color: var(--color-text-secondary);
}

.exp-auto-log-msg.success { color: var(--color-emerald); }
.exp-auto-log-msg.process { color: var(--color-cyan); }

/* ===== MIGRATION PANEL ===== */
.exp-migrate {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: 16px;
    height: 100%;
    align-items: center;
}

.exp-migrate-source,
.exp-migrate-target {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 16px;
    height: 100%;
}

.exp-migrate-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.exp-migrate-icon {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exp-migrate-icon svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-text-tertiary);
    stroke-width: 1.5;
    fill: none;
}

.exp-migrate-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.exp-migrate-tables {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.exp-migrate-table {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.exp-migrate-table:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}

.exp-migrate-table.active {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.4);
}

.exp-migrate-table-name {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-family: 'SF Mono', Monaco, monospace;
}

.exp-migrate-table-count {
    font-size: 9px;
    color: var(--color-text-tertiary);
    margin-top: 2px;
    transition: color 0.3s ease;
}

/* Source table states - override auto-animations */
.exp-migrate-table.migrating {
    animation: data-shrink 1.5s ease-out forwards !important;
    pointer-events: none;
    background: rgba(139, 92, 246, 0.15) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
}

.exp-migrate-table.migrated {
    opacity: 0.5 !important;
    transform: scale(0.95) !important;
    pointer-events: none;
    cursor: default;
    animation: none !important;
    background: rgba(255, 255, 255, 0.01) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

.exp-migrate-table.migrated .exp-migrate-table-count {
    color: var(--color-emerald) !important;
}

@keyframes data-shrink {
    0% {
        transform: scale(1);
        opacity: 1;
        background: rgba(139, 92, 246, 0.2);
    }
    50% {
        transform: scale(0.97);
        opacity: 0.7;
        box-shadow: 0 0 25px rgba(139, 92, 246, 0.5);
        background: rgba(139, 92, 246, 0.15);
    }
    100% {
        transform: scale(0.95);
        opacity: 0.5;
        background: rgba(255, 255, 255, 0.01);
    }
}

/* Target table states */
.exp-migrate-table.syncing {
    animation: data-grow 1.5s ease-out !important;
    border-color: rgba(139, 92, 246, 0.6) !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3) !important;
    background: rgba(139, 92, 246, 0.12) !important;
}

.exp-migrate-table.synced {
    border-color: rgba(16, 185, 129, 0.5) !important;
    background: rgba(16, 185, 129, 0.1) !important;
    animation: none !important;
}

.exp-migrate-table.synced .exp-migrate-table-count {
    color: var(--color-emerald) !important;
}

@keyframes data-grow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(139, 92, 246, 0);
        background: rgba(139, 92, 246, 0.05);
    }
    40% {
        transform: scale(1.03);
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
        background: rgba(139, 92, 246, 0.15);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
        background: rgba(139, 92, 246, 0.12);
    }
}

/* Data flow particles on arrow during migration */
.exp-migrate-arrow.flowing .exp-migrate-arrow-line::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
    top: -2px;
    left: 0;
    animation: particle-flow 0.6s linear infinite;
    box-shadow: 0 0 8px var(--color-accent);
}

@keyframes particle-flow {
    0% { left: 0; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Migration Flow */
.exp-migrate-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.exp-migrate-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.exp-migrate-arrow-line {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-cyan));
    position: relative;
}

.exp-migrate-arrow-line::after {
    content: '';
    position: absolute;
    right: -4px;
    top: -3px;
    border: 4px solid transparent;
    border-left-color: var(--color-cyan);
}

.exp-migrate-arrow-label {
    font-size: 8px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
}

.exp-migrate-progress {
    text-align: center;
}

.exp-migrate-progress-value {
    font-size: 20px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.exp-migrate-progress-label {
    font-size: 9px;
    color: var(--color-text-tertiary);
}

/* ===== TESTING PANEL ===== */
.exp-test {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 20px;
    height: 100%;
}

.exp-test-pyramid {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.exp-test-layer {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 12px 16px;
    border-radius: 10px;
    transition: background 0.2s ease, border-color 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    transform: none !important;
    animation: none !important;
}

.exp-test-layer:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}

.exp-test-layer.active {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}

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

.exp-test-layer-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.exp-test-layer-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--color-text-tertiary);
    stroke-width: 1.5;
    fill: none;
}

.exp-test-layer.pass {
    border-color: rgba(16, 185, 129, 0.2);
    background: rgba(16, 185, 129, 0.05);
}

.exp-test-layer.pass:hover {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.12);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}

.exp-test-layer.pass .exp-test-layer-icon {
    background: rgba(16, 185, 129, 0.15);
}

.exp-test-layer.pass .exp-test-layer-icon svg {
    stroke: var(--color-emerald);
}

.exp-test-layer.running {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.08);
}

.exp-test-layer.running:hover {
    border-color: rgba(139, 92, 246, 0.6);
    background: rgba(139, 92, 246, 0.15);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.25);
}

.exp-test-layer.running .exp-test-layer-icon {
    background: rgba(139, 92, 246, 0.15);
}

.exp-test-layer.running .exp-test-layer-icon svg {
    stroke: var(--color-accent);
    animation: spin 1s linear infinite;
}

.exp-test-layer-info {
    flex: 1;
}

.exp-test-layer-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 2px;
}

.exp-test-layer-meta {
    font-size: 9px;
    color: var(--color-text-tertiary);
}

.exp-test-layer-bar {
    width: 80px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.exp-test-layer-bar-fill {
    height: 100%;
    background: var(--color-emerald);
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* Coverage Ring */
.exp-test-coverage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.exp-test-ring {
    position: relative;
    width: 100px;
    height: 100px;
}

.exp-test-ring svg {
    transform: rotate(-90deg);
}

.exp-test-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 8;
}

.exp-test-ring-progress {
    fill: none;
    stroke: url(#coverage-gradient);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 251;
    stroke-dashoffset: 251;
    transition: stroke-dashoffset 1s ease;
}

.exp-test-ring-value {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.exp-test-ring-percent {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.exp-test-ring-label {
    font-size: 9px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
}

.exp-test-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.exp-test-stat {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
}

.exp-test-stat-label {
    color: var(--color-text-tertiary);
}

.exp-test-stat-value {
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* ===== CONTEXT PANEL (RIGHT SIDE) ===== */
.expertise-context {
    background: rgba(0, 0, 0, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.04);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.context-section {
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.4s ease;
}

.context-section.visible {
    opacity: 1;
    transform: translateX(0);
}

.context-title {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.context-metric {
    margin-bottom: 16px;
}

.context-metric-value {
    font-size: 28px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 4px;
}

.context-metric-label {
    font-size: 11px;
    color: var(--color-text-tertiary);
}

.context-metric-change {
    font-size: 10px;
    color: var(--color-emerald);
    margin-top: 4px;
}

.context-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.context-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.context-list-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(139, 92, 246, 0.2);
}

.context-list-item.active {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.2);
}

.context-list-item.active .context-list-icon {
    background: rgba(139, 92, 246, 0.3);
}

.context-list-item.active .context-list-icon svg {
    stroke: var(--color-accent);
}

/* Achieved milestone state - green */
.context-list-item.achieved {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.15);
}

.context-list-item.achieved .context-list-icon {
    background: rgba(16, 185, 129, 0.2);
}

.context-list-item.achieved .context-list-icon svg {
    stroke: var(--color-emerald);
}

.context-list-item.achieved .context-list-title {
    color: var(--color-emerald);
}

.context-list-icon {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.context-list-icon svg {
    width: 14px;
    height: 14px;
    stroke: var(--color-text-tertiary);
    stroke-width: 2;
    fill: none;
}

.context-list-text {
    flex: 1;
}

.context-list-title {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-bottom: 1px;
}

.context-list-meta {
    font-size: 9px;
    color: var(--color-text-tertiary);
}

/* Progress Bar Style */
.context-progress {
    margin-top: 16px;
}

.context-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.context-progress-label {
    font-size: 10px;
    color: var(--color-text-tertiary);
}

.context-progress-value {
    font-size: 10px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.context-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
}

.context-progress-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 2px;
    transition: width 1s ease;
}

/* ===== FOOTER BAR ===== */
.expertise-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(0, 0, 0, 0.2);
}

.expertise-footer-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.expertise-footer-stat {
    display: flex;
    align-items: center;
    gap: 8px;
}

.expertise-footer-stat-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
}

.expertise-footer-stat-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.expertise-footer-stat-text {
    font-size: 11px;
    color: var(--color-text-tertiary);
}

.expertise-footer-stat-value {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.expertise-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.expertise-footer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-emerald);
    animation: pulse-subtle 2s ease-in-out infinite;
}

.expertise-footer-text {
    font-size: 11px;
    color: var(--color-text-tertiary);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .expertise-showcase {
        grid-template-columns: 1fr;
    }

    .expertise-context {
        display: none;
    }

    .expertise-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 640px) {
    .hero-visual {
        padding: 0 var(--space-md);
        margin-top: var(--space-2xl);
    }

    .expertise-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .expertise-tab span {
        display: none;
    }

    .exp-pm {
        grid-template-columns: 1fr;
    }

    .exp-migrate {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .exp-migrate-flow {
        flex-direction: row;
        transform: rotate(90deg);
    }
}

/* Neural Grid Background */
.hero-neural-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

/* Floating Particles Container */
.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--color-cyan);
    border-radius: 50%;
    opacity: 0;
    animation: particle-float 4s ease-in-out infinite;
}

.hero-particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.hero-particle:nth-child(2) { left: 25%; top: 60%; animation-delay: 0.5s; }
.hero-particle:nth-child(3) { left: 40%; top: 30%; animation-delay: 1s; }
.hero-particle:nth-child(4) { left: 55%; top: 70%; animation-delay: 1.5s; }
.hero-particle:nth-child(5) { left: 70%; top: 40%; animation-delay: 2s; }
.hero-particle:nth-child(6) { left: 85%; top: 65%; animation-delay: 2.5s; }
.hero-particle:nth-child(7) { left: 15%; top: 80%; animation-delay: 3s; }
.hero-particle:nth-child(8) { left: 60%; top: 15%; animation-delay: 3.5s; }

@keyframes particle-float {
    0%, 100% { opacity: 0; transform: translateY(20px) scale(0); }
    20% { opacity: 1; transform: translateY(0) scale(1); }
    80% { opacity: 1; transform: translateY(-20px) scale(1); }
    100% { opacity: 0; transform: translateY(-40px) scale(0); }
}

/* Browser Chrome */
.hero-browser {
    background: transparent;
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.hero-browser-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
}

.browser-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.browser-dot-red { background: #FF5F57; }
.browser-dot-yellow { background: #FEBC2E; }
.browser-dot-green { background: #28C840; }

.browser-dot:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px currentColor;
}

.browser-url {
    flex: 1;
    margin-left: var(--space-lg);
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--color-text-tertiary);
    font-family: 'SF Mono', Monaco, monospace;
    display: flex;
    align-items: center;
    gap: 8px;
}

.browser-url::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--color-emerald);
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

.hero-browser-content {
    padding: var(--space-xl);
    min-height: 480px;
    display: grid;
    grid-template-columns: 200px 1fr 280px;
    gap: var(--space-lg);
    position: relative;
}

/* ===== LEFT SIDEBAR - System Status ===== */
.hero-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.hero-sidebar-section {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.hero-sidebar-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

/* System Status Items */
.hero-system-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hero-system-item:last-child {
    border-bottom: none;
}

.hero-system-item:hover {
    background: rgba(255, 255, 255, 0.02);
    margin: 0 -12px;
    padding: 8px 12px;
    border-radius: 6px;
}

.hero-system-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hero-system-dot.online { background: var(--color-emerald); box-shadow: 0 0 8px var(--color-emerald); }
.hero-system-dot.processing { background: var(--color-cyan); animation: pulse-dot 1s ease-in-out infinite; }
.hero-system-dot.warning { background: var(--color-amber); }

.hero-system-name {
    flex: 1;
    font-size: 11px;
    color: var(--color-text-secondary);
    font-family: 'SF Mono', Monaco, monospace;
}

.hero-system-value {
    font-size: 10px;
    color: var(--color-text-tertiary);
    font-family: 'SF Mono', Monaco, monospace;
}

/* Mini Metrics */
.hero-mini-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
}

.hero-mini-metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero-mini-metric-label {
    font-size: 10px;
    color: var(--color-text-tertiary);
}

.hero-mini-metric-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-cyan);
    font-family: 'SF Mono', Monaco, monospace;
}

.hero-mini-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.hero-mini-bar-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 2px;
    transition: width 1s ease;
}

/* ===== CENTER - Neural Network Canvas ===== */
.hero-canvas {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.hero-canvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-canvas-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.hero-canvas-title h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.hero-canvas-badge {
    padding: 3px 8px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 100px;
    font-size: 9px;
    font-weight: 600;
    color: var(--color-emerald);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-canvas-actions {
    display: flex;
    gap: var(--space-xs);
}

.hero-canvas-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hero-canvas-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
    color: var(--color-text-primary);
}

.hero-canvas-btn svg {
    width: 14px;
    height: 14px;
}

/* Neural Network Visualization */
.hero-neural-canvas {
    flex: 1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    position: relative;
    overflow: hidden;
    min-height: 320px;
}

/* SVG Neural Connections */
.hero-neural-svg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-neural-path {
    fill: none;
    stroke: url(#neural-gradient);
    stroke-width: 2;
    opacity: 0.4;
    stroke-dasharray: 8 4;
    animation: neural-flow 2s linear infinite;
}

.hero-neural-path.active {
    opacity: 1;
    stroke-width: 3;
    filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.5));
}

@keyframes neural-flow {
    from { stroke-dashoffset: 24; }
    to { stroke-dashoffset: 0; }
}

/* Data Pulse Animation */
.hero-data-pulse {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-cyan);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--color-cyan);
    animation: data-pulse-move 3s ease-in-out infinite;
    opacity: 0;
}

@keyframes data-pulse-move {
    0% { opacity: 0; offset-distance: 0%; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; offset-distance: 100%; }
}

/* Neural Nodes */
.hero-neural-nodes {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    z-index: 2;
}

.hero-neural-layer {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
}

.hero-neural-node {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, rgba(20, 20, 25, 0.9) 0%, rgba(30, 30, 40, 0.8) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.hero-neural-node::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--gradient-primary);
    border-radius: calc(var(--radius-md) + 2px);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.hero-neural-node:hover {
    transform: scale(1.1) translateY(-4px);
    border-color: transparent;
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
}

.hero-neural-node:hover::before {
    opacity: 1;
    filter: blur(8px);
}

.hero-neural-node.active {
    border-color: var(--color-cyan);
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.4);
    animation: node-pulse 2s ease-in-out infinite;
}

@keyframes node-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); }
    50% { box-shadow: 0 0 40px rgba(6, 182, 212, 0.6); }
}

.hero-neural-node.processing {
    animation: node-process 1s ease-in-out infinite;
}

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

.hero-neural-node-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.hero-neural-node-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-text-secondary);
}

.hero-neural-node:hover .hero-neural-node-icon svg {
    stroke: var(--color-text-primary);
}

.hero-neural-node.active .hero-neural-node-icon svg {
    stroke: var(--color-cyan);
}

.hero-neural-node-label {
    font-size: 9px;
    font-weight: 500;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-neural-node:hover .hero-neural-node-label {
    color: var(--color-text-secondary);
}

/* Node Tooltip on Hover */
.hero-neural-node-tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
}

.hero-neural-node-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
}

.hero-neural-node:hover .hero-neural-node-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.hero-neural-node-tooltip-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.hero-neural-node-tooltip-desc {
    font-size: 10px;
    color: var(--color-text-tertiary);
}

/* Processing Status Bar */
.hero-processing-bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
}

.hero-processing-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero-processing-dot {
    width: 8px;
    height: 8px;
    background: var(--color-cyan);
    border-radius: 50%;
    animation: processing-blink 1.5s ease-in-out infinite;
}

@keyframes processing-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.hero-processing-text {
    font-size: 11px;
    font-family: 'SF Mono', Monaco, monospace;
    color: var(--color-text-secondary);
}

.hero-processing-progress {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.hero-processing-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), var(--color-cyan));
    border-radius: 2px;
    width: 0%;
    animation: processing-fill 4s ease-in-out infinite;
}

@keyframes processing-fill {
    0% { width: 0%; }
    50% { width: 100%; }
    50.1% { width: 0%; }
    100% { width: 0%; }
}

.hero-processing-value {
    font-size: 11px;
    font-weight: 600;
    font-family: 'SF Mono', Monaco, monospace;
    color: var(--color-cyan);
    min-width: 45px;
    text-align: right;
}

/* ===== RIGHT PANEL - AI Assistant ===== */
.hero-ai-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.hero-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-ai-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.hero-ai-icon {
    width: 24px;
    height: 24px;
    background: var(--gradient-primary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.hero-ai-title span {
    font-size: 12px;
    font-weight: 600;
}

.hero-ai-status {
    padding: 3px 8px;
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 100px;
    font-size: 9px;
    font-weight: 600;
    color: var(--color-cyan);
    text-transform: uppercase;
}

/* AI Chat Container */
.hero-ai-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    max-height: 280px;
    overflow-y: auto;
}

.hero-ai-message {
    display: flex;
    gap: var(--space-sm);
    animation: message-appear 0.3s ease;
}

@keyframes message-appear {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-ai-message.user {
    flex-direction: row-reverse;
}

.hero-ai-avatar {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

.hero-ai-avatar.ai {
    background: var(--gradient-primary);
}

.hero-ai-avatar.user {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-ai-bubble {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    border-top-left-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    max-width: 85%;
}

.hero-ai-message.user .hero-ai-bubble {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    border-top-right-radius: 4px;
}

.hero-ai-bubble.typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
}

.hero-ai-bubble.typing span {
    width: 6px;
    height: 6px;
    background: var(--color-text-tertiary);
    border-radius: 50%;
    animation: typing-bounce 1.4s ease-in-out infinite;
}

.hero-ai-bubble.typing span:nth-child(1) { animation-delay: 0s; }
.hero-ai-bubble.typing span:nth-child(2) { animation-delay: 0.2s; }
.hero-ai-bubble.typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

/* AI Response with Code */
.hero-ai-code {
    margin-top: 8px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 10px;
    color: var(--color-cyan);
    overflow-x: auto;
}

/* AI Input */
.hero-ai-input {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    cursor: text;
}

.hero-ai-input:hover {
    border-color: rgba(139, 92, 246, 0.3);
}

.hero-ai-input-text {
    flex: 1;
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.hero-ai-input-cursor {
    width: 2px;
    height: 16px;
    background: var(--color-accent);
    animation: cursor-blink 1s step-end infinite;
}

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

.hero-ai-input-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hero-ai-input-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.hero-ai-input-btn svg {
    width: 14px;
    height: 14px;
    stroke: white;
}

/* Quick Stats */
.hero-ai-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.hero-ai-stat {
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hero-ai-stat:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}

.hero-ai-stat-value {
    font-size: 18px;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-ai-stat-label {
    font-size: 9px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* ===== Selected/Interactive States ===== */
.hero-neural-node.selected {
    border-color: var(--color-cyan) !important;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.1) 100%) !important;
    transform: scale(1.15);
}

.hero-neural-node.selected::before {
    background: linear-gradient(135deg, var(--color-cyan), var(--color-accent));
    opacity: 1;
    filter: blur(12px);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .hero-browser-content {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero-sidebar {
        display: none;
    }

    .hero-ai-panel {
        order: -1;
    }

    .hero-neural-canvas {
        min-height: 250px;
    }
}

@media (max-width: 640px) {
    .hero-visual {
        margin-top: var(--space-2xl);
        padding: 0 var(--space-md);
    }

    .hero-browser-content {
        padding: var(--space-md);
    }

    .hero-neural-node {
        width: 56px;
        height: 56px;
    }

    .hero-neural-node-label {
        display: none;
    }
}

/* Legacy support - keep for compatibility */
.dash-chat {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
}

.dash-chat-message {
    display: flex;
    gap: var(--space-sm);
    max-width: 85%;
}

.dash-chat-message.ai {
    align-self: flex-start;
}

.dash-chat-message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.dash-chat-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.dash-chat-avatar.ai {
    background: var(--gradient-primary);
}

.dash-chat-avatar.user {
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
}

.dash-chat-bubble {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.dash-chat-bubble.ai {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.2);
}

.dash-chat-typing {
    display: flex;
    gap: 4px;
    padding: var(--space-sm) var(--space-md);
}

.dash-chat-typing span {
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
    animation: typing-bounce 1.4s ease-in-out infinite;
}

.dash-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.dash-chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-8px); }
}

/* ===== CLIENTS ===== */
.clients {
    padding: var(--space-4xl) 0;
    border-bottom: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}

.clients-label {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-xl);
}

.clients-track {
    display: flex;
    width: max-content;
    animation: scroll-logos 30s linear infinite;
}

.clients-logos {
    display: flex;
    align-items: center;
    gap: var(--space-4xl);
    padding: 0 var(--space-2xl);
    flex-shrink: 0;
}

@keyframes scroll-logos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Ensure track fills viewport width initially */
.clients-wrapper {
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 80px;
    opacity: 0.5;
    transition: opacity var(--transition);
}

.client-logo:hover {
    opacity: 1;
}

.client-logo svg {
    height: 24px;
    width: auto;
}

.client-logo img {
    height: 20px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* ===== PROBLEM SECTION ===== */
.problem-section {
    padding: var(--space-5xl) 0;
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
}

.problem-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
    max-width: 1000px;
    margin: 0 auto;
}

.problem-content {
    max-width: 540px;
}

.problem-eyebrow {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-rose);
    margin-bottom: var(--space-md);
}

.problem-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--space-lg);
}

.problem-list {
    list-style: none;
    margin: var(--space-xl) 0;
}

.problem-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 1.5;
    border-bottom: 1px solid var(--color-border);
}

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

.problem-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.problem-solution {
    color: var(--color-accent);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    padding-left: 0.5rem;
    margin-top: 0.25rem;
}

.problem-list-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(244, 63, 94, 0.1);
    border-radius: 50%;
    color: var(--color-rose);
}

.problem-list-icon svg {
    width: 12px;
    height: 12px;
}

.problem-transition {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius-lg);
}

.problem-transition-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.problem-transition-text span {
    color: var(--color-accent-light);
}

/* Comparison Visual */
.comparison-visual {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-xl);
    position: relative;
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto;
}

.comparison-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
}

.comparison-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.comparison-col-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-tertiary);
}

.comparison-col-title.highlight {
    color: var(--color-accent-light);
}

.comparison-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    padding: var(--space-xl) var(--space-md);
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

/* Numbers removed - cleaner design */

.comparison-row:last-child {
    border-bottom: none;
}

.comparison-cell {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.comparison-cell.old {
    color: var(--color-text-secondary);
    opacity: 0.85;
}

.comparison-cell.new {
    color: var(--color-accent);
    font-weight: 500;
    padding-left: var(--space-md);
    /* Border removed - icons provide enough separation */
}

.comparison-label {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 2px;
}

.comparison-value {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
}

.comparison-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 6px;
    line-height: 1.3;
}

.comparison-desc {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.6;
    opacity: 0.8;
}

.problem-icon-wrapper {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.06);
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.12);
    transition: all 0.3s ease;
}

.comparison-row:hover .problem-icon-wrapper {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
    transform: scale(1.05);
}

.problem-icon {
    width: 22px;
    height: 22px;
    color: rgba(239, 68, 68, 0.8);
}

/* Solution Icons */
.solution-icon-wrapper {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.06);
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.12);
    transition: all 0.3s ease;
}

.comparison-row:hover .solution-icon-wrapper {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.25);
    transform: scale(1.05);
}

.solution-icon {
    width: 22px;
    height: 22px;
    color: rgba(16, 185, 129, 0.8);
}

/* ===== SPARKLINE SECTION ===== */
.sparkline-section {
    padding: var(--space-5xl) 0;
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 50%, var(--color-bg) 100%);
    position: relative;
}

.sparkline-flow {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Sparkline Cards */
.sparkline-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    position: relative;
    transition: all 0.3s ease;
}

.sparkline-card.problem-card {
    border-left: 4px solid rgba(239, 68, 68, 0.6);
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.03) 0%,
        rgba(15, 23, 42, 0.6) 100%
    );
}

.sparkline-card.solution-card {
    border-left: 4px solid rgba(16, 185, 129, 0.6);
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.03) 0%,
        rgba(15, 23, 42, 0.6) 100%
    );
    margin-bottom: var(--space-3xl); /* Extra space after solution before next problem */
}

.sparkline-card:hover {
    transform: translateX(8px);
    border-left-width: 6px;
}

/* Card Label */
.card-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-md);
    opacity: 0.5;
}

.problem-card .card-label {
    color: rgba(239, 68, 68, 0.8);
}

.solution-card .card-label {
    color: rgba(16, 185, 129, 0.8);
}

/* Card Content */
.card-content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
}

.card-text {
    flex: 1;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: rgba(255, 255, 255, 0.95);
}

.card-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    line-height: 1.6;
}

.card-value {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    font-weight: 500;
}

/* Sparkline Transition */
.sparkline-transition {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    position: relative;
}

.transition-arrow {
    width: 32px;
    height: 32px;
    color: rgba(139, 92, 246, 0.4);
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-5px);
        opacity: 0.4;
    }
    50% {
        transform: translateY(5px);
        opacity: 0.8;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .sparkline-flow {
        max-width: 100%;
        gap: var(--space-sm);
    }

    .sparkline-card {
        padding: var(--space-lg);
    }

    .card-content {
        gap: var(--space-md);
    }

    .card-title {
        font-size: 1.1rem;
    }

    .card-value {
        font-size: 1rem;
    }

    .sparkline-transition {
        height: 30px;
    }

    .transition-arrow {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 900px) {
    .problem-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .problem-content {
        max-width: 100%;
    }
}

/* ===== SECTIONS ===== */
section {
    position: relative;
    padding: var(--space-6xl) 0;
}

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-4xl);
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px 12px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent-light);
    margin-bottom: var(--space-lg);
}

.section-title {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-lg);
}

.section-desc {
    font-size: 18px;
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
}

/* ===== INNOFLOW SECTION ===== */
.innoflow-section {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.innoflow-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-4xl);
    align-items: center;
}

.innoflow-content {
    max-width: 500px;
}

.innoflow-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.innoflow-logo-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.innoflow-logo-icon svg {
    width: 24px;
    height: 24px;
    stroke: white;
}

.innoflow-logo-text {
    font-size: 24px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.innoflow-title {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: var(--space-lg);
}

.innoflow-desc {
    font-size: 17px;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
}

.innoflow-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.innoflow-feature {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.1);
    border-radius: var(--radius-md);
    transition: all var(--transition);
}

.innoflow-feature:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.2);
    transform: translateX(4px);
}

.innoflow-feature-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: rgba(139, 92, 246, 0.15);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-light);
}

.innoflow-feature-icon svg {
    width: 18px;
    height: 18px;
}

.innoflow-feature-text {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.innoflow-cta {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Innoflow Visual */
.innoflow-visual {
    position: relative;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    min-height: 400px;
    overflow: hidden;
}

.innoflow-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-primary);
}

.innoflow-visual-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-lg);
}

.innoflow-visual-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.innoflow-visual-badge {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-emerald);
}

.innoflow-visual-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--color-emerald);
    border-radius: 50%;
    animation: pulse-subtle 2s ease-in-out infinite;
}

.innoflow-modules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.innoflow-module {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    transition: all var(--transition);
}

.innoflow-module:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.innoflow-module-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.innoflow-module-icon {
    width: 28px;
    height: 28px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-light);
}

.innoflow-module-icon svg {
    width: 14px;
    height: 14px;
}

.innoflow-module-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.innoflow-module-desc {
    font-size: 12px;
    color: var(--color-text-tertiary);
    line-height: 1.4;
}

@media (max-width: 900px) {
    .innoflow-grid {
        grid-template-columns: 1fr;
    }

    .innoflow-content {
        max-width: 100%;
    }

    .innoflow-modules {
        grid-template-columns: 1fr;
    }
}

/* ===== FEATURE ROWS (Linear Style) ===== */
.features-section {
    background: var(--color-bg);
}

.feature-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-6xl);
}

.feature-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-4xl);
    align-items: center;
    scroll-margin-top: calc(var(--header-height) + var(--space-xl));
}

.feature-row.reverse {
    grid-template-columns: 1.2fr 1fr;
}

.feature-row.reverse .feature-content {
    order: 2;
}

.feature-row.reverse .feature-visual {
    order: 1;
}

.feature-content {
    max-width: 480px;
}

.feature-eyebrow {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent-light);
    margin-bottom: var(--space-md);
}

.feature-title {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: var(--space-lg);
}

.feature-desc {
    font-size: 17px;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
}

.feature-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-accent-light);
    transition: all var(--transition);
}

.feature-link:hover {
    gap: var(--space-md);
    color: var(--color-text-primary);
}

.feature-link svg {
    width: 16px;
    height: 16px;
}

.feature-visual {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl);
    position: relative;
    overflow: hidden;
    transition: all var(--transition);
    min-height: 400px;
}

.feature-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-primary);
}

.feature-visual:hover {
    border-color: var(--color-accent);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
                0 0 60px rgba(139, 92, 246, 0.1);
}

/* Compact visuals for smaller cards */
.feature-visual-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.feature-visual-single {
    min-height: 300px;
}

@media (max-width: 900px) {
    .feature-row,
    .feature-row.reverse {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .feature-row.reverse .feature-content,
    .feature-row.reverse .feature-visual {
        order: unset;
    }

    .feature-content {
        max-width: 100%;
    }

    .feature-visual-compact {
        grid-template-columns: 1fr;
    }
}

/* Legacy bento styles for visual components */
.bento-visual {
    margin-top: 0;
    flex: 1;
    min-height: 200px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* ===== WORKFLOW AUTOMATION - ENTERPRISE ETL PIPELINE ===== */
.viz-workflow {
    position: relative;
    width: 100%;
    height: 100%;
    padding: var(--space-md);
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
}

.workflow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.workflow-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.workflow-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-emerald);
    animation: status-pulse 2s ease-in-out infinite;
}

.workflow-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.workflow-run-id {
    font-size: 9px;
    color: var(--color-text-tertiary);
}

.workflow-pipeline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.workflow-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.workflow-node {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 8px 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    flex: 1;
    max-width: 140px;
}

.workflow-node:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
}

.workflow-node.completed {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.05);
}

.workflow-node.active {
    border-color: rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.08);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
}

.workflow-node.error {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
}

.workflow-node.skipped {
    opacity: 0.4;
}

.workflow-node-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.workflow-node-icon svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.workflow-node-icon.system {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

.workflow-node-icon.transform {
    background: rgba(139, 92, 246, 0.15);
    color: var(--color-accent);
}

.workflow-node-icon.condition {
    background: rgba(251, 191, 36, 0.15);
    color: var(--color-amber);
}

.workflow-node-icon.success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-emerald);
}

.workflow-node-icon.error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-rose);
}

.workflow-node-info {
    flex: 1;
    min-width: 0;
}

.workflow-node-name {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workflow-node-meta {
    font-size: 8px;
    color: var(--color-text-tertiary);
}

.workflow-node-status {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.workflow-node-status svg {
    width: 10px;
    height: 10px;
    stroke-width: 2;
    fill: none;
}

.workflow-node.completed .workflow-node-status svg {
    stroke: var(--color-emerald);
}

.workflow-node.active .workflow-node-status {
    animation: spin 1s linear infinite;
}

.workflow-node.active .workflow-node-status svg {
    stroke: var(--color-accent);
}

.workflow-node.error .workflow-node-status svg {
    stroke: var(--color-rose);
}

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

.workflow-connector {
    width: 20px;
    height: 2px;
    background: rgba(255,255,255,0.1);
    position: relative;
    flex-shrink: 0;
}

.workflow-connector.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-accent);
    animation: connector-pulse 1.5s ease-in-out infinite;
}

@keyframes connector-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.workflow-branch {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 30px;
    position: relative;
}

.workflow-branch::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255,255,255,0.1);
}

.workflow-branch-label {
    font-size: 8px;
    color: var(--color-text-tertiary);
    padding: 2px 6px;
    background: rgba(255,255,255,0.03);
    border-radius: 3px;
    position: absolute;
    left: 0;
    transform: translateX(-50%) rotate(-90deg);
    transform-origin: center;
}

.workflow-condition {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 8px;
    color: var(--color-amber);
    padding: 4px 8px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 4px;
}

.workflow-condition svg {
    width: 10px;
    height: 10px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.workflow-logs {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 8px;
    color: var(--color-text-tertiary);
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 40px;
    overflow: hidden;
}

.workflow-log-line {
    display: flex;
    gap: 8px;
    opacity: 0;
    animation: log-appear 0.3s ease forwards;
}

.workflow-log-line:nth-child(1) { animation-delay: 0.1s; }
.workflow-log-line:nth-child(2) { animation-delay: 0.3s; }
.workflow-log-line:nth-child(3) { animation-delay: 0.5s; }

@keyframes log-appear {
    to { opacity: 1; }
}

.workflow-log-time {
    color: var(--color-text-tertiary);
    opacity: 0.6;
}

.workflow-log-msg {
    color: var(--color-text-secondary);
}

.workflow-log-msg.success { color: var(--color-emerald); }
.workflow-log-msg.error { color: var(--color-rose); }

.workflow-node.selected {
    border-color: var(--color-cyan) !important;
    background: rgba(6, 182, 212, 0.1) !important;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3) !important;
}

/* ===== DATA MIGRATION - ENTERPRISE DATA HUB ===== */
.viz-migration {
    position: relative;
    width: 100%;
    height: 100%;
    padding: var(--space-md);
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    display: flex;
    flex-direction: column;
}

.migration-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.migration-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.migration-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-emerald);
    animation: status-pulse 2s ease-in-out infinite;
}

.migration-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.migration-progress-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.migration-progress-bar {
    width: 60px;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}

.migration-progress-fill {
    height: 100%;
    background: var(--color-emerald);
    border-radius: 2px;
    animation: progress-animate 4s ease-in-out infinite;
}

@keyframes progress-animate {
    0% { width: 68%; }
    50% { width: 78%; }
    100% { width: 68%; }
}

.migration-progress-text {
    font-size: 9px;
    color: var(--color-emerald);
    font-weight: 600;
}

.migration-content {
    flex: 1;
    display: flex;
    gap: var(--space-md);
}

.migration-sources {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 90px;
}

.migration-source {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 5px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.migration-source.active {
    border-color: rgba(251, 146, 60, 0.4);
    background: rgba(251, 146, 60, 0.05);
}

.migration-source.completed {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.05);
}

.migration-source-icon {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    flex-shrink: 0;
}

.migration-source-icon.postgres {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

.migration-source-icon.oracle {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

.migration-source-icon.csv {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-emerald);
}

.migration-source-info {
    flex: 1;
    min-width: 0;
}

.migration-source-name {
    font-size: 8px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.migration-source-rows {
    font-size: 7px;
    color: var(--color-text-tertiary);
}

.migration-transform {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.migration-transform-header {
    font-size: 8px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.migration-schema-map {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.migration-mapping {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 8px;
}

.migration-field {
    padding: 3px 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 3px;
    color: var(--color-text-secondary);
    min-width: 50px;
}

.migration-arrow {
    color: var(--color-accent);
    font-size: 10px;
}

.migration-mapping.active .migration-arrow {
    animation: arrow-pulse 0.5s ease-in-out infinite;
}

@keyframes arrow-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.migration-mapping.valid .migration-field:last-child {
    border-color: rgba(16, 185, 129, 0.3);
}

.migration-target {
    width: 90px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.migration-target-box {
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 5px;
    padding: 8px;
    text-align: center;
}

.migration-target-icon {
    width: 24px;
    height: 24px;
    margin: 0 auto 4px;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.migration-target-icon svg {
    width: 14px;
    height: 14px;
    stroke: var(--color-emerald);
    stroke-width: 2;
    fill: none;
}

.migration-target-name {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.migration-target-meta {
    font-size: 7px;
    color: var(--color-text-tertiary);
}

.migration-validation {
    margin-top: 4px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.migration-validation-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 7px;
}

.migration-validation-label {
    color: var(--color-text-tertiary);
}

.migration-validation-value {
    font-weight: 600;
}

.migration-validation-value.success { color: var(--color-emerald); }
.migration-validation-value.warning { color: var(--color-amber); }

.migration-source.selected {
    border-color: var(--color-cyan) !important;
    background: rgba(6, 182, 212, 0.1) !important;
}

.migration-source,
.migration-mapping {
    cursor: pointer;
}

.migration-mapping.active .migration-field {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}

.migration-pipe-stats {
    font-size: 10px;
    font-family: 'SF Mono', Monaco, monospace;
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.migration-pipe-throughput {
    color: var(--color-accent);
    font-weight: 600;
}

/* ===== TEST AUTOMATION - AI TEST SUITE ===== */
.viz-testing {
    position: relative;
    width: 100%;
    height: 100%;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
}

.test-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.test-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.test-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-emerald);
    animation: status-pulse 2s ease-in-out infinite;
}

.test-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.test-ai-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 4px;
    font-size: 8px;
    color: var(--color-accent-light);
}

.test-ai-badge svg {
    width: 10px;
    height: 10px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.test-content {
    flex: 1;
    display: flex;
    gap: var(--space-md);
}

.test-stages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.test-stage {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.test-stage.completed {
    border-color: rgba(16, 185, 129, 0.2);
}

.test-stage.running {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.05);
}

.test-stage-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.test-stage-icon svg {
    width: 8px;
    height: 8px;
    stroke-width: 2;
    fill: none;
}

.test-stage.completed .test-stage-icon {
    background: rgba(16, 185, 129, 0.15);
}

.test-stage.completed .test-stage-icon svg {
    stroke: var(--color-emerald);
}

.test-stage.running .test-stage-icon {
    background: rgba(139, 92, 246, 0.15);
    animation: spin 1s linear infinite;
}

.test-stage.running .test-stage-icon svg {
    stroke: var(--color-accent);
}

.test-stage-info {
    flex: 1;
    min-width: 0;
}

.test-stage-name {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.test-stage-meta {
    font-size: 7px;
    color: var(--color-text-tertiary);
}

.test-stage-count {
    font-size: 8px;
    color: var(--color-text-tertiary);
    padding: 2px 6px;
    background: rgba(255,255,255,0.04);
    border-radius: 3px;
}

.test-stage.completed .test-stage-count {
    color: var(--color-emerald);
    background: rgba(16, 185, 129, 0.1);
}

.test-sidebar {
    width: 110px;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.test-coverage {
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    padding: 8px;
}

.test-coverage-header {
    font-size: 8px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.test-coverage-ring {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    position: relative;
}

.test-coverage-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.test-coverage-ring circle {
    fill: none;
    stroke-width: 6;
}

.test-coverage-ring .bg {
    stroke: rgba(255,255,255,0.06);
}

.test-coverage-ring .progress {
    stroke: var(--color-emerald);
    stroke-dasharray: 157;
    stroke-dashoffset: 16;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.test-coverage-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-emerald);
}

.test-security {
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    padding: 8px;
}

.test-security-header {
    font-size: 8px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.test-security-header svg {
    width: 10px;
    height: 10px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.test-security-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 8px;
    padding: 3px 0;
}

.test-security-label {
    color: var(--color-text-tertiary);
}

.test-security-value {
    font-weight: 600;
}

.test-security-value.success { color: var(--color-emerald); }
.test-security-value.warning { color: var(--color-amber); }

.test-ai-generated {
    margin-top: auto;
    padding: 6px 8px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.test-ai-generated-icon {
    width: 16px;
    height: 16px;
    background: rgba(139, 92, 246, 0.2);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.test-ai-generated-icon svg {
    width: 10px;
    height: 10px;
    stroke: var(--color-accent-light);
    stroke-width: 2;
    fill: none;
}

.test-ai-generated-info {
    flex: 1;
}

.test-ai-generated-label {
    font-size: 7px;
    color: var(--color-text-tertiary);
}

.test-ai-generated-value {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-accent-light);
}

.test-stage {
    cursor: pointer;
}

.test-stage:hover {
    background: rgba(255,255,255,0.04);
}

/* ===== ON-PREMISE VAULT VISUALIZATION ===== */
.viz-vault {
    position: relative;
    width: 100%;
    height: 100%;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    overflow: hidden;
}

.vault-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vault-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vault-title-icon {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vault-title-icon svg {
    width: 14px;
    height: 14px;
    stroke: var(--color-emerald);
    stroke-width: 2;
    fill: none;
}

.vault-title-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.vault-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 100px;
    font-size: 9px;
    font-weight: 600;
    color: var(--color-emerald);
}

.vault-badge-dot {
    width: 6px;
    height: 6px;
    background: var(--color-emerald);
    border-radius: 50%;
    animation: pulse-subtle 2s ease-in-out infinite;
}

/* Vault 3D Visualization */
.vault-visual {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 500px;
}

.vault-container {
    position: relative;
    width: 140px;
    height: 100px;
    transform-style: preserve-3d;
    animation: vault-float 4s ease-in-out infinite;
}

@keyframes vault-float {
    0%, 100% { transform: translateY(0) rotateX(5deg) rotateY(-10deg); }
    50% { transform: translateY(-8px) rotateX(5deg) rotateY(-10deg); }
}

.vault-box {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(20, 25, 30, 0.95) 0%, rgba(30, 35, 45, 0.9) 100%);
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(16, 185, 129, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.vault-lock {
    width: 36px;
    height: 36px;
    background: rgba(16, 185, 129, 0.15);
    border: 2px solid rgba(16, 185, 129, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.vault-lock::before {
    content: '';
    position: absolute;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 50%;
    animation: lock-pulse 2s ease-in-out infinite;
}

@keyframes lock-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0; }
}

@keyframes vault-lock-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(16, 185, 129, 0.2);
        transform: scale(1.05);
    }
}

.vault-lock svg {
    width: 18px;
    height: 18px;
    stroke: var(--color-emerald);
    stroke-width: 2;
    fill: none;
}

.vault-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Data Flow Particles */
.vault-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.vault-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--color-cyan);
    border-radius: 50%;
    opacity: 0;
}

.vault-particle.incoming {
    animation: particle-in 3s ease-in-out infinite;
}

.vault-particle.secured {
    animation: particle-secure 3s ease-in-out infinite;
}

@keyframes particle-in {
    0% { opacity: 0; left: -10px; top: 50%; }
    20% { opacity: 1; }
    50% { opacity: 1; left: 45%; top: 50%; }
    51% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes particle-secure {
    0%, 50% { opacity: 0; }
    51% { opacity: 0; left: 55%; top: 50%; }
    70% { opacity: 1; }
    100% { opacity: 0; left: 110%; top: 50%; }
}

.vault-particle:nth-child(1) { animation-delay: 0s; }
.vault-particle:nth-child(2) { animation-delay: 0.5s; }
.vault-particle:nth-child(3) { animation-delay: 1s; }
.vault-particle:nth-child(4) { animation-delay: 1.5s; }

/* Vault Features */
.vault-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.vault-feature {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vault-feature:hover {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.2);
}

.vault-feature.active {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.vault-feature-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.vault-feature-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vault-feature-icon svg {
    width: 12px;
    height: 12px;
    stroke: var(--color-emerald);
    stroke-width: 2;
    fill: none;
}

.vault-feature-name {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.vault-feature-desc {
    font-size: 8px;
    color: var(--color-text-tertiary);
    line-height: 1.4;
}

/* ===== ROI DASHBOARD VISUALIZATION ===== */
.viz-roi {
    position: relative;
    width: 100%;
    height: 100%;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
}

.roi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.roi-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.roi-period {
    display: flex;
    gap: 4px;
}

.roi-period-btn {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    font-size: 9px;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.roi-period-btn:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-secondary);
}

.roi-period-btn.active {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
    color: var(--color-accent-light);
}

/* ROI Big Number */
.roi-hero {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 16px 0;
}

.roi-hero-value {
    font-size: 42px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-emerald) 0%, var(--color-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.roi-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 6px;
}

.roi-hero-label {
    font-size: 10px;
    color: var(--color-text-tertiary);
}

.roi-hero-change {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-emerald);
}

.roi-hero-change svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* ROI Chart */
.roi-chart {
    flex: 1;
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 12px;
    overflow: hidden;
    min-height: 120px;
}

.roi-chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 100px;
    gap: 4px;
}

.roi-chart-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    height: 100%;
    cursor: pointer;
}

.roi-chart-bar {
    width: 100%;
    background: linear-gradient(180deg, var(--color-accent) 0%, rgba(139, 92, 246, 0.3) 100%);
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
    position: relative;
}

.roi-chart-bar-wrapper:hover .roi-chart-bar {
    background: linear-gradient(180deg, var(--color-cyan) 0%, rgba(6, 182, 212, 0.3) 100%);
    transform: scaleY(1.05);
}

.roi-chart-bar-value {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 600;
    color: var(--color-text-secondary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.roi-chart-bar-wrapper:hover .roi-chart-bar-value {
    opacity: 1;
}

.roi-chart-label {
    font-size: 8px;
    color: var(--color-text-tertiary);
}

/* ROI Metrics Grid */
.roi-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.roi-metric {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.roi-metric:hover {
    background: rgba(139, 92, 246, 0.05);
    border-color: rgba(139, 92, 246, 0.2);
}

.roi-metric-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.roi-metric-label {
    font-size: 8px;
    color: var(--color-text-tertiary);
}

.roi-metric-value.positive { color: var(--color-emerald); }
.roi-metric-value.highlight { color: var(--color-cyan); }

.roi-metric.highlighted {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}

.roi-hero-value {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.roi-metric-value {
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}

.roi-chart-bar.selected {
    background: linear-gradient(180deg, var(--color-emerald) 0%, var(--color-cyan) 100%) !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

/* ===== HEALTH DASHBOARD ===== */
.viz-health {
    position: relative;
    width: 100%;
    height: 100%;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
}

.health-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.health-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.health-status-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--color-emerald);
}

.health-status-badge.success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
    color: var(--color-emerald);
}

/* Health Metrics */
.health-metrics {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.health-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.health-metric:hover {
    background: rgba(139, 92, 246, 0.05);
    border-color: rgba(139, 92, 246, 0.2);
    transform: translateX(4px);
}

.health-metric.status-success {
    border-left: 3px solid rgba(16, 185, 129, 0.6);
}

.health-metric.status-warning {
    border-left: 3px solid rgba(251, 191, 36, 0.6);
}

.health-metric-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.health-metric.status-success .health-metric-icon {
    color: rgba(16, 185, 129, 0.8);
}

.health-metric.status-warning .health-metric-icon {
    color: rgba(251, 191, 36, 0.8);
}

.health-metric-icon svg {
    width: 20px;
    height: 20px;
}

.health-metric-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.health-metric-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-tertiary);
}

.health-metric-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.health-metric-detail {
    font-size: 9px;
    color: var(--color-text-tertiary);
    opacity: 0.7;
}

.health-metric-status {
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.health-metric.status-success .health-metric-status {
    color: rgba(16, 185, 129, 0.8);
}

.health-metric.status-warning .health-metric-status {
    color: rgba(251, 191, 36, 0.8);
}

.vault-box {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vault-feature {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== PROJECT MANAGEMENT - EXECUTIVE DASHBOARD ===== */
.viz-pm-dashboard {
    position: relative;
    width: 100%;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
}

.pm-tabs {
    display: flex;
    gap: 2px;
    padding: var(--space-sm) var(--space-md);
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pm-tab {
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pm-tab:hover {
    color: var(--color-text-secondary);
    background: rgba(255,255,255,0.04);
}

.pm-tab.active {
    color: var(--color-text-primary);
    background: rgba(255,255,255,0.08);
}

.pm-tab-icon {
    width: 12px;
    height: 12px;
    opacity: 0.7;
}

.pm-tab.active .pm-tab-icon {
    opacity: 1;
}

.pm-content {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 270px;
}

.pm-panel {
    position: absolute;
    inset: 0;
    padding: var(--space-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.3s ease;
}

.pm-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* KANBAN TAB */
.viz-kanban {
    display: flex;
    gap: var(--space-sm);
    height: 100%;
}

.kanban-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.kanban-column-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) 0;
}

.kanban-column-indicator {
    width: 3px;
    height: 12px;
    border-radius: 1px;
}

.kanban-column.backlog .kanban-column-indicator { background: var(--color-text-tertiary); }
.kanban-column.progress .kanban-column-indicator { background: var(--color-accent); }
.kanban-column.done .kanban-column-indicator { background: var(--color-emerald); }

.kanban-column-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.kanban-column-count {
    font-size: 9px;
    color: var(--color-text-tertiary);
    margin-left: auto;
}

.kanban-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
}

.kanban-item {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 5px;
    padding: 7px 9px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.kanban-item:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-1px);
}

.kanban-item-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: 3px;
}

.kanban-item-priority {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kanban-item-priority.p1 { background: var(--color-rose); }
.kanban-item-priority.p2 { background: var(--color-amber); }
.kanban-item-priority.p3 { background: var(--color-text-tertiary); }

.kanban-item-id {
    font-size: 8px;
    color: var(--color-text-tertiary);
}

.kanban-item-title {
    font-size: 10px;
    color: var(--color-text-primary);
    line-height: 1.3;
    margin-bottom: 5px;
}

.kanban-item-footer {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.kanban-item-label {
    font-size: 8px;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(139, 92, 246, 0.1);
    color: var(--color-accent-light);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.kanban-item-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.kanban-item.active {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.05);
}

.kanban-item-progress {
    margin-top: 5px;
    height: 2px;
    background: rgba(255,255,255,0.06);
    border-radius: 1px;
    overflow: hidden;
}

.kanban-item-progress-bar {
    height: 100%;
    background: var(--color-accent);
    border-radius: 1px;
}

.kanban-item.selected {
    border-color: var(--color-cyan) !important;
    background: rgba(6, 182, 212, 0.1) !important;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
}

.kanban-column {
    cursor: pointer;
    transition: background 0.2s ease;
}

.kanban-column:hover {
    background: rgba(255,255,255,0.02);
    border-radius: 6px;
}

/* RISK MATRIX TAB */
.risk-matrix {
    display: grid;
    grid-template-columns: 24px 1fr;
    grid-template-rows: 1fr 20px;
    gap: var(--space-xs);
    height: 100%;
}

.risk-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.risk-y-label {
    font-size: 7px;
    color: var(--color-text-tertiary);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 0.05em;
}

.risk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3px;
    background: rgba(0,0,0,0.2);
    border-radius: var(--radius-md);
    padding: 3px;
}

.risk-cell {
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.risk-cell:hover {
    transform: scale(1.02);
}

.risk-cell.low { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.2); }
.risk-cell.medium { background: rgba(251, 191, 36, 0.15); border: 1px solid rgba(251, 191, 36, 0.2); }
.risk-cell.high { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.2); }
.risk-cell.critical { background: rgba(239, 68, 68, 0.25); border: 1px solid rgba(239, 68, 68, 0.4); }

.risk-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-primary);
    box-shadow: 0 0 8px rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.risk-dot:hover {
    transform: scale(1.3);
}

.risk-dot::after {
    content: attr(data-label);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 7px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    margin-bottom: 4px;
}

.risk-dot:hover::after {
    opacity: 1;
    visibility: visible;
}

.risk-x-axis {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
}

.risk-x-label {
    font-size: 7px;
    color: var(--color-text-tertiary);
    letter-spacing: 0.05em;
}

.risk-legend {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: rgba(0,0,0,0.4);
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.06);
}

.risk-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 7px;
    color: var(--color-text-tertiary);
}

.risk-legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* BUDGET TAB */
.budget-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    height: 100%;
}

.budget-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.budget-total {
    display: flex;
    flex-direction: column;
}

.budget-total-label {
    font-size: 9px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.budget-total-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.budget-total-sub {
    font-size: 10px;
    color: var(--color-text-tertiary);
}

.budget-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 4px;
}

.budget-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-emerald);
}

.budget-status-text {
    font-size: 9px;
    color: var(--color-emerald);
    font-weight: 600;
}

.budget-chart {
    flex: 1;
    position: relative;
    background: rgba(0,0,0,0.2);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
}

.budget-chart-bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding-bottom: var(--space-sm);
}

.budget-bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.budget-bar-container {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
}

.budget-bar {
    width: 8px;
    border-radius: 2px 2px 0 0;
    transition: height 0.5s ease;
}

.budget-bar.planned {
    background: rgba(255,255,255,0.15);
}

.budget-bar.actual {
    background: var(--color-accent);
}

.budget-bar-label {
    font-size: 7px;
    color: var(--color-text-tertiary);
}

.budget-forecast-line {
    position: absolute;
    left: var(--space-sm);
    right: var(--space-sm);
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--color-amber) 0, var(--color-amber) 4px, transparent 4px, transparent 8px);
    top: 30%;
}

.budget-legend {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(255,255,255,0.06);
}

.budget-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 8px;
    color: var(--color-text-tertiary);
}

.budget-legend-bar {
    width: 12px;
    height: 6px;
    border-radius: 1px;
}

/* TIMELINE TAB */
.timeline-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    height: 100%;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.timeline-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.timeline-period {
    font-size: 9px;
    color: var(--color-text-tertiary);
}

.timeline-months {
    display: flex;
    padding-left: 80px;
}

.timeline-month {
    flex: 1;
    font-size: 8px;
    color: var(--color-text-tertiary);
    text-align: center;
}

.timeline-month.current {
    color: var(--color-accent);
    font-weight: 600;
}

.timeline-tracks {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
}

.timeline-track {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    height: 28px;
}

.timeline-track-label {
    width: 72px;
    font-size: 9px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-track-bar {
    flex: 1;
    height: 100%;
    position: relative;
    background: rgba(255,255,255,0.02);
    border-radius: 3px;
}

.timeline-bar {
    position: absolute;
    height: 18px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 3px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    font-size: 8px;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.timeline-bar:hover {
    filter: brightness(1.2);
    transform: translateY(-50%) scale(1.02);
}

.timeline-bar.completed {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.timeline-bar.in-progress {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.15));
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.timeline-bar.upcoming {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}

.timeline-today {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-accent);
    z-index: 10;
}

.timeline-today::before {
    content: 'Heute';
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    color: var(--color-accent);
    white-space: nowrap;
}

.timeline-milestone {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--color-amber);
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
    cursor: pointer;
    z-index: 5;
}

.timeline-milestone::after {
    content: attr(data-label);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
    font-size: 7px;
    color: var(--color-amber);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.timeline-milestone:hover::after {
    opacity: 1;
}

/* Interactive styles for Budget */
.budget-bar-group {
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.budget-bar-group:hover .budget-bar {
    filter: brightness(1.2);
}

/* Interactive styles for Timeline */
.timeline-bar {
    cursor: pointer;
}

.timeline-milestone {
    cursor: pointer;
}

/* ===== STATS ===== */
.stats {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4xl) 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.stat-card {
    text-align: center;
    padding: var(--space-xl);
    position: relative;
}

.stat-card::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: var(--color-border);
}

.stat-card:last-child::after {
    display: none;
}

.stat-value {
    font-size: clamp(48px, 6vw, 72px);
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: var(--space-sm);
}

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

/* ===== TESTIMONIAL ===== */
.testimonial {
    background: var(--color-bg);
    position: relative;
    overflow: hidden;
}

.testimonial-gradient {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.testimonial-card {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: var(--space-4xl);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    backdrop-filter: blur(20px);
}

.testimonial-quote-icon {
    margin-bottom: var(--space-xl);
    opacity: 0.3;
}

.testimonial-quote-icon svg {
    width: 48px;
    height: 48px;
    fill: var(--color-accent);
}

.testimonial-text {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: var(--space-2xl);
}

.testimonial-highlight {
    font-weight: 600;
    background: linear-gradient(
        90deg,
        #8B5CF6,
        #06B6D4,
        #A78BFA,
        #22D3EE,
        #8B5CF6
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: testimonial-gradient-shift 8s ease-in-out infinite;
}

@keyframes testimonial-gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
}

.testimonial-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-accent);
    box-shadow: 0 0 30px var(--color-accent-glow);
}

.testimonial-info {
    text-align: left;
}

.testimonial-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.testimonial-role-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
}

.testimonial-company-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-accent-light);
}

.testimonial-roles {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.testimonial-role-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

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

.testimonial-company {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-accent);
}

.testimonial-separator {
    color: var(--color-text-tertiary);
    opacity: 0.5;
}

/* ===== PROCESS / ABLAUF ===== */
.process {
    background: var(--color-bg-elevated);
    position: relative;
    overflow: hidden;
}

.process::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

.process-timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* Connecting Line */
.process-line {
    position: absolute;
    top: 60px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg,
        var(--color-accent) 0%,
        var(--color-cyan) 50%,
        var(--color-emerald) 100%);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}

.process-line-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
        var(--color-accent) 0%,
        var(--color-cyan) 50%,
        var(--color-emerald) 100%);
    transition: width 1s ease-out;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    position: relative;
    z-index: 1;
    background: transparent;
}

.process-step {
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.process-step:hover {
    transform: translateY(-4px);
}

.process-step-node {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--space-lg);
    position: relative;
    z-index: 2;
}

.process-step-circle {
    width: 100%;
    height: 100%;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.process-step:hover .process-step-circle,
.process-step.active .process-step-circle {
    border-color: var(--color-accent);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
}

.process-step.active .process-step-circle {
    background: #1a1424;
}

.process-step-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.process-step-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-accent);
    stroke-width: 2;
}

.process-step:hover .process-step-icon {
    transform: scale(1.1);
}

.process-step-number {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    background: var(--color-accent);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'SF Mono', monospace;
}

.process-step-pulse {
    position: absolute;
    inset: -4px;
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    opacity: 0;
    animation: process-pulse 2s ease-out infinite;
}

.process-step.active .process-step-pulse {
    animation-play-state: running;
}

@keyframes process-pulse {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.3); opacity: 0; }
}

.process-step-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.process-step-duration {
    font-size: 12px;
    font-family: 'SF Mono', monospace;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.process-step-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Process Detail Panel */
.process-detail {
    margin-top: var(--space-3xl);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl);
    display: none;
    animation: fadeSlideUp 0.4s ease;
}

.process-detail.active {
    display: block;
}

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

.process-detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.process-detail-icon {
    width: 56px;
    height: 56px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-detail-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-accent);
    stroke-width: 2;
}

.process-detail-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.process-detail-subtitle {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.process-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
}

.process-detail-section h4 {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-md);
}

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

.process-detail-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.process-detail-list li::before {
    content: '→';
    color: var(--color-accent);
    font-weight: 600;
}

.process-detail-deliverables {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.process-deliverable {
    padding: 8px 14px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 100px;
    font-size: 13px;
    color: var(--color-accent-light);
}

/* Process CTA */
.process-cta {
    margin-top: var(--space-3xl);
    text-align: center;
}

.process-cta-text {
    font-size: 18px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}

.process-cta-text strong {
    color: var(--color-text-primary);
}

/* ===== FAQ ===== */
.faq {
    background: var(--color-bg-elevated);
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    max-width: 1000px;
    margin: 0 auto;
    align-items: start;
}

.faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.3s ease;
    height: fit-content;
}

.faq-item:hover {
    border-color: rgba(139, 92, 246, 0.3);
}

.faq-item.open {
    border-color: var(--color-accent);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.1);
}

.faq-question {
    width: 100%;
    padding: var(--space-lg) var(--space-xl);
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.02);
}

.faq-question-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.4;
}

.faq-question-icon {
    width: 32px;
    height: 32px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.faq-question-icon svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-accent);
    stroke-width: 2;
    fill: none;
    transition: transform 0.3s ease;
}

.faq-item.open .faq-question-icon {
    background: var(--color-accent);
}

.faq-item.open .faq-question-icon svg {
    stroke: white;
    transform: rotate(180deg);
}

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

.faq-item.open .faq-answer {
    max-height: 300px;
}

.faq-answer-content {
    padding: 0 var(--space-xl) var(--space-xl);
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.faq-answer-content strong {
    color: var(--color-text-primary);
}

.faq-answer-content ul {
    margin: var(--space-sm) 0;
    padding-left: var(--space-lg);
}

.faq-answer-content li {
    margin-bottom: var(--space-xs);
}

.faq-highlight {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 4px;
    color: var(--color-emerald);
    font-weight: 600;
    font-size: 13px;
}

/* ===== CASES ===== */
.cases {
    background: var(--color-bg-elevated);
}

.cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.case-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    transition: all var(--transition);
    position: relative;
    group: case;
}

.case-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-8px);
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4),
                0 0 60px rgba(139, 92, 246, 0.15);
}

.case-image {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.case-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.case-card:hover .case-image img {
    transform: scale(1.1);
}

.case-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
}

.case-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 64px;
    height: 64px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    opacity: 0;
    transition: all var(--transition);
    box-shadow: 0 8px 32px var(--color-accent-glow);
}

.case-card:hover .case-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.case-content {
    padding: var(--space-xl);
}

.case-tag {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent-light);
    margin-bottom: var(--space-md);
}

.case-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.case-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.case-stats {
    display: flex;
    gap: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.case-stat {
    flex: 1;
}

.case-stat-value {
    font-size: 24px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.case-stat-label {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

/* ===== TOOLS ===== */
.tools {
    background: var(--color-bg);
}

.tools-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
}

.tools-content {
    max-width: 500px;
}

.tools-content .section-eyebrow {
    display: inline-flex;
}

.tools-content .section-title {
    text-align: left;
    margin-bottom: var(--space-md);
}

.tools-content .section-desc {
    text-align: left;
    margin: 0 0 var(--space-xl);
}

.tools-list {
    list-style: none;
    margin-bottom: var(--space-xl);
}

.tools-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    transition: all var(--transition);
    cursor: pointer;
}

.tools-list-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-accent);
    transform: translateX(8px);
}

.tools-list-icon {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tools-list-icon svg {
    width: 22px;
    height: 22px;
    stroke: white;
    fill: none;
}

.tools-list-text h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}

.tools-list-text p {
    font-size: 13px;
    color: var(--color-text-tertiary);
}

.tools-visual {
    position: relative;
}

.tools-mockup {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4);
}

.tools-mockup-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid var(--color-border);
}

.tools-mockup-content {
    padding: var(--space-xl);
}

.tools-input-area {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.tools-input-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-sm);
}

.tools-input-text {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.tools-output-area {
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.tools-output-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.tools-output-icon {
    width: 24px;
    height: 24px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tools-output-icon svg {
    width: 12px;
    height: 12px;
    stroke: white;
    fill: none;
}

.tools-output-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent-light);
}

.tools-output-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    font-size: 13px;
    color: var(--color-text-secondary);
}

.tools-output-bullet {
    color: var(--color-accent);
    font-weight: bold;
}

/* ===== TEAM ===== */
.team {
    background: var(--color-bg);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-xl);
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
}

.team-card {
    text-align: center;
    position: relative;
}

.team-avatar-wrapper {
    position: relative;
    margin-bottom: var(--space-lg);
}

.team-avatar {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-xl);
    filter: grayscale(100%);
    transition: all var(--transition);
    border: 2px solid var(--color-border);
}

.team-card:hover .team-avatar {
    filter: grayscale(0%);
    border-color: var(--color-accent);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
}

.team-avatar-glow {
    position: absolute;
    inset: -2px;
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    opacity: 0;
    transition: opacity var(--transition);
    z-index: -1;
    filter: blur(15px);
}

.team-card:hover .team-avatar-glow {
    opacity: 0.5;
}

.team-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px;
}

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

/* ===== TEAM STACK - TIME MACHINE STYLE ===== */
.team-stack-wrapper {
    max-width: 700px;
    margin: 0 auto;
    perspective: 1500px;
}

.team-stack-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-cyan);
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: var(--space-2xl);
}

.team-stack-container {
    position: relative;
    min-height: 350px;
    transform-style: preserve-3d;
}

/* Team Card Stack - positioned absolutely for layering */
.team-card-stack {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 24px;
    padding: var(--space-3xl);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.team-card-stack::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}

/* Stack Positions - Time Machine Style */
.team-card-stack[data-position="current"] {
    z-index: 4;
    transform: translateZ(0) translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.team-card-stack[data-position="next"] {
    z-index: 3;
    transform: translateZ(-20px) translateY(-18px) scale(0.97);
    opacity: 0.5;
    pointer-events: none;
}

.team-card-stack[data-position="next-2"] {
    z-index: 2;
    transform: translateZ(-40px) translateY(-36px) scale(0.94);
    opacity: 0.3;
    pointer-events: none;
}

.team-card-stack[data-position="hidden"] {
    z-index: 1;
    transform: translateZ(-60px) translateY(-54px) scale(0.91);
    opacity: 0;
    pointer-events: none;
}

.team-card-stack[data-position="prev"] {
    z-index: 5;
    transform: translateZ(150px) scale(1.08);
    opacity: 0;
    pointer-events: none;
}

/* Animation for card flying toward user (Time Machine style) */
.team-card-stack.leaving-forward {
    animation: teamCardFlyForward 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transition: none !important;
    z-index: 10 !important;
}

@keyframes teamCardFlyForward {
    0% {
        transform: translateZ(0) translateY(0) scale(1);
        opacity: 1;
        filter: blur(0px);
    }
    100% {
        transform: translateZ(160px) translateY(55px) scale(1.04);
        opacity: 0;
        filter: blur(7px);
    }
}

/* Backward Animation - card slides back into stack */
.team-card-stack.leaving-backward {
    animation: teamCardSlideBack 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transition: none !important;
}

@keyframes teamCardSlideBack {
    0% {
        transform: translateZ(0) translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateZ(-20px) translateY(-18px) scale(0.97);
        opacity: 0.5;
    }
}

/* Previous card coming from stack to front */
.team-card-stack.entering-from-back {
    animation: teamCardEnterFromBack 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transition: none !important;
    z-index: 5 !important;
}

@keyframes teamCardEnterFromBack {
    0% {
        transform: translateZ(160px) translateY(55px) scale(1.04);
        opacity: 0;
        filter: blur(7px);
    }
    100% {
        transform: translateZ(0) translateY(0) scale(1);
        opacity: 1;
        filter: blur(0px);
    }
}

/* Shadows for depth */
.team-card-stack[data-position="current"]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5);
    z-index: -1;
}

.team-card-stack[data-position="next"]::after,
.team-card-stack[data-position="next-2"]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.3);
    z-index: -1;
}

.team-card-content {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
}

.team-card-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
    width: 140px;
    height: 140px;
}

.team-card-avatar {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid rgba(15, 23, 42, 0.95);
    margin: 10px;
    display: block;
}

/* Progress Ring - in each avatar-wrapper, only visible for current card */
.team-progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 140px;
    transform: rotate(-90deg);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.team-card-stack[data-position="current"] .team-progress-ring {
    opacity: 1;
}

.progress-ring-bg {
    fill: none;
    stroke: rgba(139, 92, 246, 0.15);
    stroke-width: 3;
}

.progress-ring-fill {
    fill: none;
    stroke: url(#team-progress-gradient);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 415;
    stroke-dashoffset: 415;
    transition: stroke-dashoffset 0.3s ease;
}

.team-card-info {
    flex: 1;
    text-align: left;
}

.team-card-name {
    font-size: 1.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: var(--space-xs);
    letter-spacing: -0.02em;
}

.team-card-role {
    font-size: 1rem;
    color: var(--color-cyan);
    font-weight: 600;
    margin-bottom: var(--space-lg);
}

.team-card-quote {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
    line-height: 1.7;
    padding-left: var(--space-lg);
    border-left: 3px solid rgba(139, 92, 246, 0.4);
}

/* Manual Controls */
.team-stack-controls {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-3xl);
}

.team-stack-arrow {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--color-cyan);
}

.team-stack-arrow:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.4);
    transform: scale(1.15);
    box-shadow: 0 10px 20px rgba(139, 92, 246, 0.25);
}

.team-stack-arrow svg {
    width: 22px;
    height: 22px;
}

/* Team Stack Mobile */
@media (max-width: 768px) {
    .team-stack-container {
        min-height: 450px;
    }

    .team-card-content {
        flex-direction: column;
        text-align: center;
        gap: var(--space-lg);
    }

    .team-card-info {
        text-align: center;
    }

    .team-card-avatar-wrapper {
        width: 120px;
        height: 120px;
    }

    .team-card-avatar {
        width: 100px;
        height: 100px;
    }

    .team-progress-ring {
        width: 120px;
        height: 120px;
        top: 10px;
        left: 0;
        right: 0;
        margin: auto;
    }

    .team-card-quote {
        border-left: none;
        border-top: 2px solid rgba(139, 92, 246, 0.3);
        padding-left: 0;
        padding-top: var(--space-md);
    }

    .team-card-name {
        font-size: 1.4rem;
    }

    .team-stack-arrow {
        width: 44px;
        height: 44px;
    }
}

/* ===== TRUST ===== */
.trust {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3xl) 0;
}

.trust-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4xl);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.trust-icon {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-accent);
    stroke-width: 2;
    fill: none;
}

.trust-text {
    font-size: 15px;
    font-weight: 600;
}

.trust-label {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

/* ===== CTA ===== */
.cta {
    background: var(--color-bg);
    position: relative;
    overflow: hidden;
}

.cta-gradient-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, transparent 70%);
    transform: translate(-50%, -50%);
}

.cta-gradient-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, transparent 70%);
    transform: translate(50%, 50%);
}

.cta-content {
    position: relative;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    margin-bottom: 80px;
}

.cta-title {
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
}

.cta-desc {
    font-size: 18px;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 0;
}

/* Vision Timeline */
.vision-timeline {
    max-width: 600px;
    margin: var(--space-4xl) auto;
    position: relative;
}

.vision-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    position: relative;
}

.vision-icon-wrapper {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.08);
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 50%;
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
}

.vision-step:hover .vision-icon-wrapper {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.6);
    transform: scale(1.1);
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.3);
}

.vision-icon {
    width: 28px;
    height: 28px;
    color: rgba(16, 185, 129, 0.9);
}

.vision-content {
    flex: 1;
    padding-top: 8px;
}

.vision-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: var(--space-xs);
    line-height: 1.3;
}

.vision-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
}

/* Timeline Connector */
.vision-connector {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg,
        rgba(16, 185, 129, 0.4) 0%,
        rgba(16, 185, 129, 0.1) 100%
    );
    margin-left: 27px;
    position: relative;
}

.new-bliss-closing {
    text-align: center;
    margin-top: var(--space-4xl);
    padding-top: var(--space-3xl);
    border-top: 1px solid rgba(139, 92, 246, 0.15);
}

.new-bliss-tagline {
    font-size: 1.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: var(--space-md);
    line-height: 1.3;
}

@media (max-width: 768px) {
    .vision-timeline {
        max-width: 100%;
    }

    .vision-icon-wrapper {
        width: 48px;
        height: 48px;
    }

    .vision-icon {
        width: 24px;
        height: 24px;
    }

    .vision-title {
        font-size: 1.1rem;
    }

    .vision-desc {
        font-size: 0.9rem;
    }

    .vision-connector {
        height: 32px;
        margin-left: 23px;
    }

    .new-bliss-tagline {
        font-size: 1.35rem;
    }
}

.cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* ===== FOOTER ===== */
.footer {
    background: var(--color-surface);
    padding: var(--space-5xl) 0 var(--space-xl);
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-accent) 20%,
        var(--color-cyan) 50%,
        var(--color-accent) 80%,
        transparent 100%);
    opacity: 0.5;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-4xl);
    margin-bottom: var(--space-4xl);
}

.footer-brand {
    max-width: 350px;
}

.footer-logo {
    margin-bottom: var(--space-xl);
    display: inline-block;
}

.footer-logo-svg {
    height: 32px;
    width: auto;
}

.footer-desc {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.footer-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-accent-light);
    margin-bottom: var(--space-xl);
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: var(--space-md);
}

.footer-links a {
    font-size: 14px;
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.footer-links a:hover {
    color: var(--color-text-primary);
    transform: translateX(4px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-text-tertiary);
}

.footer-legal {
    display: flex;
    gap: var(--space-xl);
}

.footer-legal a {
    color: var(--color-text-tertiary);
    transition: color var(--transition-fast);
}

.footer-legal a:hover {
    color: var(--color-text-secondary);
}

/* ===== ANIMATIONS ===== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .hero-browser-content {
        grid-template-columns: 200px 1fr;
    }

    .dash-panel {
        display: none;
    }

    .bento-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .bento-card-1 { grid-column: span 6; grid-row: span 1; }
    .bento-card-2 { grid-column: span 3; }
    .bento-card-3 { grid-column: span 3; }
    .bento-card-4 { grid-column: span 6; }
    .bento-card-5 { grid-column: span 3; }
    .bento-card-6 { grid-column: span 3; }

    .viz-kanban {
        gap: var(--space-sm);
    }

    .kanban-card-title {
        font-size: 10px;
    }
}

@media (max-width: 1024px) {
    .tools-layout {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }

    .tools-content {
        max-width: 100%;
    }

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

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-card:nth-child(2)::after {
        display: none;
    }

    .cases-grid {
        grid-template-columns: 1fr;
    }

    .viz-migration {
        gap: var(--space-xl);
    }

    .migration-db-icon {
        width: 60px;
        height: 80px;
    }
}

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

    .hero-visual {
        display: none;
    }

    /* Hero Alert System - Mobile */
    .hero-alert-system {
        flex-direction: column;
        gap: var(--space-sm);
        max-width: 100%;
    }

    .hero-alert {
        font-size: 12px;
        padding: 6px 10px;
    }

    .alert-badge {
        font-size: 9px;
    }

    /* Success Metrics - Mobile */
    .hero-success-metrics {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .success-metric {
        min-width: auto;
        width: 100%;
    }

    /* Customer Message - Mobile */
    .hero-customer-message {
        font-size: 16px;
        padding: 0 var(--space-md);
    }

    .bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-card-1,
    .bento-card-2,
    .bento-card-3,
    .bento-card-4,
    .bento-card-5,
    .bento-card-6 {
        grid-column: span 1 !important;
        grid-row: span 1;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .workflow-step-label {
        font-size: 9px;
    }

    .workflow-step-node {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .viz-kanban {
        flex-direction: column;
        gap: var(--space-md);
    }

    .kanban-column {
        max-height: 120px;
    }

    .kanban-cards {
        flex-direction: row;
        overflow-x: auto;
    }

    .kanban-card {
        min-width: 140px;
    }

    .trust-grid {
        flex-direction: column;
        gap: var(--space-xl);
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }

    /* Logo animation enabled on mobile */
    .clients-track {
        animation: scroll-logos 20s linear infinite;
    }

    .clients-logos {
        gap: var(--space-2xl);
    }

    /* Process Section Mobile */
    .process-steps {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    .process-line {
        display: none;
    }

    .process-step-node {
        width: 80px;
        height: 80px;
    }

    .process-step-icon svg {
        width: 24px;
        height: 24px;
    }

    .process-step-number {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .process-step-title {
        font-size: 14px;
    }

    .process-step-duration {
        font-size: 10px;
    }

    .process-step-desc {
        font-size: 12px;
    }

    .process-detail-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .process-detail-header {
        flex-direction: column;
        text-align: center;
    }

    /* FAQ Mobile */
    .faq-grid {
        grid-template-columns: 1fr;
    }

    .faq-question-text {
        font-size: 14px;
    }

    .faq-answer-content {
        font-size: 13px;
    }
}

/* Risk cell transition for smooth glow changes */
.exp-risk-cell {
    transition: background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
}

/* ===== LEGAL PAGES (Impressum, Datenschutz) ===== */
.legal-page {
    background: var(--color-bg);
    min-height: 100vh;
}

/* Header auf Legal Pages immer mit Glaseffekt */
.legal-page .header {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
}

.legal-main {
    padding-top: calc(var(--header-height) + var(--space-3xl));
    padding-bottom: var(--space-3xl);
    position: relative;
    z-index: 1;
}

.legal-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.legal-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-md);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.legal-subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
}

.legal-section {
    padding: 0;
    margin-bottom: var(--space-2xl);
}

.legal-section h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: var(--color-text-primary);
    position: relative;
    padding-left: var(--space-md);
}

.legal-section h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 2px;
}

.legal-section p {
    color: var(--color-text-secondary);
    line-height: 1.75;
    margin-bottom: var(--space-md);
}

.legal-section p:last-child {
    margin-bottom: 0;
}

.legal-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: border-color var(--transition);
}

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

.legal-company {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.legal-card > p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.legal-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.legal-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
}

.legal-label {
    font-size: 0.875rem;
    color: var(--color-text-tertiary);
    font-weight: 500;
}

.legal-detail-row span:last-child {
    color: var(--color-text-primary);
    font-weight: 500;
}

.legal-email {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-accent-light);
    transition: color var(--transition);
}

.legal-email:hover {
    color: var(--color-accent);
}

.legal-email::before {
    content: '→';
    opacity: 0;
    transform: translateX(-8px);
    transition: all var(--transition);
}

.legal-email:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* Footer legal link active state */
.footer-legal a.active {
    color: var(--color-accent-light);
}

/* ===== CONTACT FORM ===== */
.contact-form-wrapper {
    margin-top: var(--space-3xl);
}

/* Mode Toggle */
.contact-toggle {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-xs);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--color-border);
}

.contact-toggle-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
    z-index: 2;
}

.contact-toggle-btn:hover {
    color: var(--color-text-primary);
}

.contact-toggle-btn.active {
    color: var(--color-text-primary);
}

.contact-toggle-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.contact-toggle-slider {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    width: calc(50% - var(--space-xs));
    height: calc(100% - var(--space-sm));
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-spring);
    z-index: 1;
    opacity: 0.15;
}

.contact-toggle-btn[data-mode="contact"].active ~ .contact-toggle-slider {
    transform: translateX(100%);
}

/* Form Container */
.contact-form-container {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-2xl);
    align-items: start;
}

/* Form */
.contact-form {
    background: transparent;
    border: none;
    border-radius: var(--radius-xl);
    padding: 0;
    position: relative;
    perspective: 1000px;
    min-height: 420px;
}

/* 3D Card Stack Container */
.form-steps-stack {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    padding-top: 60px; /* Space for stacked cards peeking from top */
}

/* Form Step Cards */
.form-step {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;
    overflow: hidden;
}

.form-step::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-mesh);
    opacity: 0.3;
    pointer-events: none;
    border-radius: inherit;
}

/* Terminal Boot Card (Step 0) */
.form-step-terminal {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    gap: 0;
    background: transparent;
    border: none;
}

.form-step-terminal::before {
    display: none;
}

/* Hide all other cards while terminal is active */
.form-step-terminal[data-position="current"] ~ .form-step {
    visibility: hidden;
}

/* Show cards once terminal starts leaving */
.form-step-terminal.leaving-forward ~ .form-step,
.form-step-terminal[data-position="prev"] ~ .form-step {
    visibility: visible;
}

.form-step-terminal .form-terminal-header {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border: 1px solid rgba(255,255,255,0.15);
    border-bottom: none;
}

.form-step-terminal .form-init-message {
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    border: 1px solid rgba(255,255,255,0.15);
    border-top: none;
    padding: var(--space-xl) var(--space-lg);
    min-height: 200px;
}

.form-terminal-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(20,20,30,0.9));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border: 1px solid rgba(255,255,255,0.1);
    border-bottom: none;
}

.terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5f57;
    box-shadow: 0 0 6px #ff5f57;
}

.terminal-dot:nth-child(2) {
    background: #ffbd2e;
    box-shadow: 0 0 6px #ffbd2e;
}

.terminal-dot:nth-child(3) {
    background: #28ca41;
    box-shadow: 0 0 6px #28ca41;
}

.terminal-title {
    margin-left: auto;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.02em;
}

.form-init-message {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(10,10,20,0.7));
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.1);
    border-top: none;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.init-line {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(-5px);
}

/* Animations only start when .animate class is added (viewport trigger) */
.form-init-message.animate .init-line-1 {
    animation: lineAppear 0.3s ease-out 0.2s forwards;
}

.form-init-message.animate .init-line-2 {
    animation: lineAppear 0.3s ease-out 1.2s forwards;
}

.form-init-message.animate .init-line-3 {
    animation: lineAppear 0.3s ease-out 1.8s forwards;
}

.form-init-message.animate .init-line-4 {
    animation: lineAppear 0.3s ease-out 2.5s forwards;
}

@keyframes lineAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.init-prefix {
    color: var(--color-text-muted);
    font-weight: 600;
}

.init-cursor {
    width: 8px;
    height: 16px;
    background: var(--color-primary);
    animation: cursorBlink 1s step-end infinite;
    box-shadow: 0 0 10px var(--color-primary);
}

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

.init-text {
    color: rgba(255,255,255,0.7);
    font-size: 0.82rem;
    font-weight: 500;
}

.init-line-1 .init-text {
    color: var(--color-primary);
    text-shadow: 0 0 15px var(--color-primary);
}

.init-success {
    color: #28ca41;
    text-shadow: 0 0 8px #28ca41;
    margin-right: 4px;
}

.init-ready .init-text {
    color: var(--color-secondary);
    text-shadow: 0 0 15px var(--color-secondary);
}

.init-blink {
    animation: cursorBlink 1s step-end infinite;
}

.init-dots span {
    opacity: 0;
}

.form-init-message.animate .init-line-1 .init-dots span {
    animation: dotFade 0.4s ease-in-out forwards;
}

.form-init-message.animate .init-line-1 .init-dots span:nth-child(1) { animation-delay: 0.4s; }
.form-init-message.animate .init-line-1 .init-dots span:nth-child(2) { animation-delay: 0.6s; }
.form-init-message.animate .init-line-1 .init-dots span:nth-child(3) { animation-delay: 0.8s; }

@keyframes dotFade {
    to { opacity: 1; }
}

/* Success Card (Step 5) - Celebration State */
.form-step-success {
    text-align: center;
    padding: var(--space-2xl) var(--space-xl);
}

/* Hide success card until needed - never show in stack */
.form-step-success:not([data-position="current"]) {
    visibility: hidden !important;
    opacity: 0 !important;
}

.success-celebration {
    position: relative;
    margin-bottom: var(--space-xl);
}

.success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: successPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    box-shadow: 0 0 40px rgba(var(--color-primary-rgb), 0.4);
}

.success-icon svg {
    width: 40px;
    height: 40px;
    stroke: white;
    animation: checkDraw 0.6s ease-out 0.3s forwards;
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
}

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

@keyframes checkDraw {
    to { stroke-dashoffset: 0; }
}

/* Confetti */
.success-confetti {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.success-confetti span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    animation: confettiBurst 1s ease-out forwards;
    opacity: 0;
}

.success-confetti span:nth-child(1) { background: var(--color-primary); animation-delay: 0.2s; --confetti-x: -60px; --confetti-y: -80px; }
.success-confetti span:nth-child(2) { background: var(--color-secondary); animation-delay: 0.25s; --confetti-x: 60px; --confetti-y: -70px; }
.success-confetti span:nth-child(3) { background: #28ca41; animation-delay: 0.3s; --confetti-x: -80px; --confetti-y: -20px; }
.success-confetti span:nth-child(4) { background: #ffbd2e; animation-delay: 0.35s; --confetti-x: 80px; --confetti-y: -30px; }
.success-confetti span:nth-child(5) { background: var(--color-primary); animation-delay: 0.4s; --confetti-x: -40px; --confetti-y: 60px; }
.success-confetti span:nth-child(6) { background: var(--color-secondary); animation-delay: 0.45s; --confetti-x: 50px; --confetti-y: 50px; }
.success-confetti span:nth-child(7) { background: #28ca41; animation-delay: 0.5s; --confetti-x: 0px; --confetti-y: -90px; }
.success-confetti span:nth-child(8) { background: #ffbd2e; animation-delay: 0.55s; --confetti-x: -70px; --confetti-y: 40px; }
.success-confetti span:nth-child(9) { background: var(--color-primary); animation-delay: 0.6s; --confetti-x: 70px; --confetti-y: 30px; }

@keyframes confettiBurst {
    0% { transform: translate(0, 0) rotate(0deg) scale(0); opacity: 1; }
    100% { transform: translate(var(--confetti-x), var(--confetti-y)) rotate(360deg) scale(1); opacity: 0; }
}

/* Success Content */
.success-content {
    margin-bottom: var(--space-xl);
}

.success-badge {
    display: inline-block;
    padding: 0.4em 1em;
    background: rgba(40, 202, 65, 0.15);
    color: #28ca41;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
    animation: fadeSlideUp 0.5s ease-out 0.4s backwards;
}

.success-headline {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm) 0;
    animation: fadeSlideUp 0.5s ease-out 0.5s backwards;
}

.success-message {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    animation: fadeSlideUp 0.5s ease-out 0.6s backwards;
}

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

/* Next Steps */
.success-next-steps {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    animation: fadeSlideUp 0.5s ease-out 0.7s backwards;
}

.success-step-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.success-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.success-step {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-align: left;
}

.success-step-number {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.1);
    padding: 0.25em 0.5em;
    border-radius: var(--radius-sm);
}

.success-step-text {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}


/* Card positions in stack - Time Machine style (stacked upward, centered) */
.form-step[data-position="current"] {
    z-index: 4;
    transform: translateZ(0) translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.form-step[data-position="next"] {
    z-index: 3;
    transform: translateZ(-20px) translateY(-18px) scale(0.97);
    opacity: 0.5;
    pointer-events: none;
}

.form-step[data-position="next-2"] {
    z-index: 2;
    transform: translateZ(-40px) translateY(-36px) scale(0.94);
    opacity: 0.3;
    pointer-events: none;
}

.form-step[data-position="hidden"] {
    z-index: 1;
    transform: translateZ(-60px) translateY(-54px) scale(0.91);
    opacity: 0;
    pointer-events: none;
}

.form-step[data-position="prev"] {
    z-index: 5;
    transform: translateZ(150px) scale(1.08);
    opacity: 0;
    pointer-events: none;
}

/* Animation for card flying toward user (Time Machine style) */
.form-step.leaving-forward {
    animation: cardFlyForward 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transition: none !important;
    z-index: 10 !important;
}

@keyframes cardFlyForward {
    0% {
        transform: translateZ(0) translateY(0) scale(1);
        opacity: 1;
        filter: blur(0px);
    }
    100% {
        transform: translateZ(160px) translateY(35px) scale(1.04);
        opacity: 0;
        filter: blur(8px);
    }
}

/* Animation for current card going back into stack */
.form-step.leaving-backward {
    animation: cardSlideBack 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transition: none !important;
}

@keyframes cardSlideBack {
    0% {
        transform: translateZ(0) translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateZ(-20px) translateY(-18px) scale(0.97);
        opacity: 0.5;
    }
}

/* Animation for card coming back from front */
.form-step.entering-from-front {
    animation: cardReturnFromFront 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transition: none !important;
    z-index: 10 !important;
}

@keyframes cardReturnFromFront {
    0% {
        transform: translateZ(160px) translateY(35px) scale(1.04);
        opacity: 0;
        filter: blur(8px);
    }
    100% {
        transform: translateZ(0) translateY(0) scale(1);
        opacity: 1;
        filter: blur(0px);
    }
}

/* Card shadow for depth */
.form-step[data-position="current"]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    z-index: -1;
}

.form-step[data-position="next"]::after,
.form-step[data-position="next-2"]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.3);
    z-index: -1;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Form Step Title - Clean header for each step */
.form-step-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.form-step-number {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.1);
    padding: 0.3em 0.6em;
    border-radius: var(--radius-sm);
    letter-spacing: 0.05em;
}

.form-step-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.form-optional {
    font-weight: 400;
    color: var(--color-text-tertiary);
    font-size: 0.8em;
}

/* Inline Field Tests - Code-Style Validation Pipeline */
.field-tests {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-sm);
}

.field-tests-label {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.3);
    margin-right: 2px;
}

/* ALL PASSED Badge */
.field-tests-passed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-emerald);
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 4px;
    opacity: 0;
    transform: translateX(-10px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.field-tests-passed::before {
    content: '✓';
    font-size: 0.7rem;
}

.field-tests.all-passed .field-tests-passed {
    opacity: 1;
    transform: translateX(0) scale(1);
    box-shadow:
        0 0 20px rgba(16, 185, 129, 0.3),
        inset 0 0 15px rgba(16, 185, 129, 0.1);
    animation: allPassedGlow 2s ease infinite;
}

@keyframes allPassedGlow {
    0%, 100% {
        box-shadow:
            0 0 15px rgba(16, 185, 129, 0.2),
            inset 0 0 10px rgba(16, 185, 129, 0.05);
    }
    50% {
        box-shadow:
            0 0 25px rgba(16, 185, 129, 0.4),
            inset 0 0 20px rgba(16, 185, 129, 0.15);
    }
}

.field-test {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.field-test::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.field-test .test-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

/* Testing state - active validation */
.field-test.testing {
    border-color: rgba(139, 92, 246, 0.5);
    color: var(--color-accent);
    background: rgba(139, 92, 246, 0.08);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.15);
}

.field-test.testing::before {
    animation: testScan 1.5s ease infinite;
}

.field-test.testing .test-icon {
    opacity: 1;
    animation: iconPulse 0.8s ease infinite;
    box-shadow: 0 0 8px var(--color-accent);
}

/* Passed state - validated */
.field-test.passed {
    border-color: rgba(16, 185, 129, 0.6);
    color: var(--color-emerald);
    background: rgba(16, 185, 129, 0.1);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.1);
}

.field-test.passed .test-icon {
    opacity: 1;
    animation: passedPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 0 6px var(--color-emerald);
}

/* Failed state */
.field-test.failed {
    border-color: rgba(239, 68, 68, 0.6);
    color: var(--color-red);
    background: rgba(239, 68, 68, 0.1);
    animation: failShake 0.4s ease;
}

.field-test.failed .test-icon {
    opacity: 1;
    box-shadow: 0 0 6px var(--color-red);
}

@keyframes testScan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes iconPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
        box-shadow: 0 0 4px var(--color-accent);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
        box-shadow: 0 0 12px var(--color-accent);
    }
}

@keyframes passedPop {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.4); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes failShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-3px); }
    40%, 80% { transform: translateX(3px); }
}

.form-input-wrapper {
    position: relative;
}

.form-input {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    padding-right: 48px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: all var(--transition);
}

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

.form-input:focus {
    outline: none;
    border-color: var(--color-accent);
    background: rgba(139, 92, 246, 0.05);
    box-shadow: 0 0 0 3px var(--color-accent-glow);
}

.form-input.valid {
    border-color: var(--color-emerald);
}

.form-input-check {
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    opacity: 0;
    color: var(--color-emerald);
    transition: all var(--transition);
}

.form-input.valid ~ .form-input-check {
    opacity: 1;
    animation: checkPop 0.3s ease;
}

@keyframes checkPop {
    0% { transform: translateY(-50%) scale(0); }
    50% { transform: translateY(-50%) scale(1.2); }
    100% { transform: translateY(-50%) scale(1); }
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
    padding-right: var(--space-lg);
}

.form-char-count {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    text-align: right;
}

/* Days Grid */
.form-days-grid {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.form-days-separator,
.form-time-separator {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    padding: 0 var(--space-xs);
    flex-shrink: 0;
}

.form-day-all {
    min-width: 60px;
    flex-shrink: 0;
}

.form-day-all span {
    white-space: nowrap;
}

.form-day-all.active span {
    background: rgba(139, 92, 246, 0.15);
    border-color: var(--color-accent);
    color: var(--color-accent-light);
}

.form-time-all {
    flex-shrink: 0;
}

.form-time-all.active span {
    background: rgba(139, 92, 246, 0.15);
    border-color: var(--color-accent);
    color: var(--color-accent-light);
}

.form-day-btn {
    flex: 1;
    position: relative;
    cursor: pointer;
}

.form-day-btn input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form-day-btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition);
}

.form-day-btn:hover span {
    border-color: var(--color-border-hover);
    color: var(--color-text-primary);
}

.form-day-btn input:checked + span {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 15px var(--color-accent-glow);
}

/* Time Options */
.form-time-options {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.form-time-btn {
    flex: 1;
    position: relative;
    cursor: pointer;
}

.form-time-btn input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form-time-btn span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition);
    text-align: center;
}

.form-time-btn span small {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}

.form-time-btn:hover span {
    border-color: var(--color-border-hover);
    color: var(--color-text-primary);
}

.form-time-btn input:checked + span {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 15px var(--color-accent-glow);
}

/* Time Section */
.form-time-section {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

/* Contact Method Cards */
.form-contact-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.form-contact-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    text-align: left;
    overflow: hidden;
}

.form-contact-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(6, 182, 212, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.form-contact-card:hover {
    border-color: var(--color-border-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.form-contact-card:hover::before {
    opacity: 1;
}

.form-contact-card.active {
    border-color: var(--color-accent);
    background: rgba(139, 92, 246, 0.1);
    box-shadow: 0 0 0 1px var(--color-accent), 0 8px 24px rgba(139, 92, 246, 0.2);
}

.form-contact-card.active::before {
    opacity: 1;
}

.contact-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.contact-card-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-text-secondary);
    transition: stroke 0.3s ease;
}

.form-contact-card.active .contact-card-icon {
    background: rgba(139, 92, 246, 0.2);
}

.form-contact-card.active .contact-card-icon svg {
    stroke: var(--color-accent-light);
}

.contact-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 1;
}

.contact-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    transition: color 0.3s ease;
}

.form-contact-card.active .contact-card-title {
    color: var(--color-accent-light);
}

.contact-card-desc {
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
}

.contact-card-check {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-card-check svg {
    width: 14px;
    height: 14px;
    stroke: white;
}

.form-contact-card.active .contact-card-check {
    opacity: 1;
    transform: scale(1);
}

/* Phone Details Section */
.form-phone-details {
    display: none;
    flex-direction: column;
    gap: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    animation: slideDown 0.3s ease;
}

.form-phone-details.visible {
    display: flex;
}

/* Keep time selection always visible inside phone details */
.form-phone-details .form-time-selection {
    display: flex;
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: none;
}

/* Time Selection (shown when not flexibel) */
.form-time-selection {
    display: none;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    animation: slideDown 0.3s ease;
}

.form-time-selection.visible {
    display: flex;
}

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

.form-time-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.form-time-row-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 60px;
}

.form-time-btn input:checked + span small {
    color: rgba(255, 255, 255, 0.8);
}

/* Form Navigation Buttons */
.form-nav-buttons {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.form-back-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}

.form-back-btn:hover {
    border-color: var(--color-border-hover);
    color: var(--color-text-primary);
}

.form-back-btn svg {
    width: 18px;
    height: 18px;
}

.form-next-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 4px 15px var(--color-accent-glow);
}

.form-next-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--color-accent-glow);
}

.form-next-btn svg {
    width: 18px;
    height: 18px;
}

/* Submit Button */
.form-submit-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 4px 15px var(--color-accent-glow);
    position: relative;
    overflow: hidden;
}

.form-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--color-accent-glow);
}

.form-submit-icon svg,
.form-submit-loading svg,
.form-submit-success svg {
    width: 18px;
    height: 18px;
}

.form-submit-loading,
.form-submit-success {
    display: none;
}

.form-submit-btn.loading .form-submit-text,
.form-submit-btn.loading .form-submit-icon {
    display: none;
}

.form-submit-btn.loading .form-submit-loading {
    display: block;
    animation: spin 1s linear infinite;
}

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

.form-submit-btn.success {
    background: var(--color-emerald);
}

.form-submit-btn.success .form-submit-text,
.form-submit-btn.success .form-submit-icon,
.form-submit-btn.success .form-submit-loading {
    display: none;
}

.form-submit-btn.success .form-submit-success {
    display: block;
    animation: checkPop 0.3s ease;
}

.form-privacy {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    text-align: center;
    margin-top: var(--space-md);
}

.form-privacy a {
    color: var(--color-accent-light);
    text-decoration: underline;
}

/* Discovery-only elements */
.contact-form-wrapper[data-mode="contact"] .discovery-only {
    display: none !important;
}

/* Ticket */
.contact-ticket {
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Show ticket when terminal leaves */
.contact-form:has(.form-step-terminal.leaving-forward) ~ .contact-ticket,
.contact-form:has(.form-step-terminal[data-position="prev"]) ~ .contact-ticket {
    opacity: 1;
    transform: translateY(0);
}

.contact-ticket-inner {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    position: relative;
    overflow: hidden;
}

.contact-ticket-inner::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    z-index: -1;
    opacity: 0.5;
    filter: blur(20px);
}

.contact-ticket-header {
    text-align: center;
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.contact-ticket-badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: var(--gradient-primary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.contact-ticket-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-text-primary);
}

/* Ticket Tests - QA Pipeline */
.contact-ticket-tests {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.ticket-test {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    transition: all var(--transition);
}

.ticket-test.testing {
    border-color: var(--color-accent);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
}

.ticket-test.passed {
    border-color: var(--color-emerald);
    background: rgba(16, 185, 129, 0.05);
}

.ticket-test.failed {
    border-color: var(--color-rose);
    background: rgba(244, 63, 94, 0.05);
}

.ticket-test-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.ticket-test-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: all var(--transition);
}

.ticket-test-icon svg {
    width: 14px;
    height: 14px;
    position: absolute;
    transition: all var(--transition);
}

/* Pending state */
.ticket-test-icon.pending {
    background: var(--color-surface-elevated);
    border: 2px solid var(--color-border);
}

.ticket-test-icon.pending .icon-pending {
    opacity: 1;
    color: var(--color-text-tertiary);
}

.ticket-test-icon.pending .icon-testing,
.ticket-test-icon.pending .icon-passed,
.ticket-test-icon.pending .icon-failed {
    opacity: 0;
}

/* Testing state */
.ticket-test-icon.testing {
    background: var(--color-surface-elevated);
    border: 2px solid var(--color-accent);
    box-shadow: 0 0 15px var(--color-accent-glow);
}

.ticket-test-icon.testing .icon-testing {
    opacity: 1;
    color: var(--color-accent);
    animation: spinTest 2s linear infinite;
}

.ticket-test-icon.testing .icon-pending,
.ticket-test-icon.testing .icon-passed,
.ticket-test-icon.testing .icon-failed {
    opacity: 0;
}

@keyframes spinTest {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Passed state */
.ticket-test-icon.passed {
    background: var(--color-emerald);
    border: 2px solid var(--color-emerald);
    animation: testPassed 0.5s ease;
}

@keyframes testPassed {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.ticket-test-icon.passed .icon-passed {
    opacity: 1;
    color: white;
    animation: checkDraw 0.3s ease 0.2s both;
}

@keyframes checkDraw {
    from {
        stroke-dasharray: 24;
        stroke-dashoffset: 24;
    }
    to {
        stroke-dasharray: 24;
        stroke-dashoffset: 0;
    }
}

.ticket-test-icon.passed .icon-pending,
.ticket-test-icon.passed .icon-testing,
.ticket-test-icon.passed .icon-failed {
    opacity: 0;
}

/* Failed state */
.ticket-test-icon.failed {
    background: var(--color-rose);
    border: 2px solid var(--color-rose);
    animation: testFailed 0.4s ease;
}

@keyframes testFailed {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-3px); }
    40%, 80% { transform: translateX(3px); }
}

.ticket-test-icon.failed .icon-failed {
    opacity: 1;
    color: white;
}

.ticket-test-icon.failed .icon-pending,
.ticket-test-icon.failed .icon-testing,
.ticket-test-icon.failed .icon-passed {
    opacity: 0;
}

.ticket-test-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ticket-test-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ticket-test-status {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.ticket-test.pending .ticket-test-status {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-tertiary);
}

.ticket-test.testing .ticket-test-status {
    background: rgba(139, 92, 246, 0.2);
    color: var(--color-accent-light);
    animation: pulse 1.5s ease infinite;
}

.ticket-test.passed .ticket-test-status {
    background: rgba(16, 185, 129, 0.2);
    color: var(--color-emerald);
}

.ticket-test.failed .ticket-test-status {
    background: rgba(244, 63, 94, 0.2);
    color: var(--color-rose);
}

.ticket-test-detail {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-top: var(--space-xs);
    padding-left: 32px;
    transition: all var(--transition);
}

.ticket-test.passed .ticket-test-detail {
    color: var(--color-text-secondary);
}

/* Celebration particles */
.ticket-test.celebrating::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, var(--color-emerald) 0%, transparent 70%);
    opacity: 0;
    animation: celebratePulse 0.6s ease;
    pointer-events: none;
    border-radius: var(--radius-md);
}

@keyframes celebratePulse {
    0% { opacity: 0.4; transform: scale(0.8); }
    100% { opacity: 0; transform: scale(1.2); }
}

/* Ticket Progress */
.contact-ticket-progress {
    padding-top: var(--space-md);
    margin-bottom: var(--space-md);
}

.ticket-progress-bar {
    height: 6px;
    background: var(--color-surface-elevated);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

.ticket-progress-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 3px;
    width: 0%;
    transition: width 0.5s ease;
}

.ticket-progress-fill.complete {
    background: var(--color-emerald);
}

.ticket-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

#ticket-progress-percent {
    font-weight: 700;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    color: var(--color-accent-light);
}

/* Launch Zone */
.contact-ticket-launch {
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    text-align: center;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.launch-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--color-text-tertiary);
    font-size: 0.8125rem;
}

.launch-dots {
    display: flex;
    gap: 4px;
}

.launch-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    transition: all var(--transition);
}

.launch-dots span.filled {
    background: var(--color-emerald);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.launch-ready {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--color-emerald);
    font-size: 0.875rem;
    font-weight: 600;
}

.launch-icon {
    width: 20px;
    height: 20px;
    animation: rocketPulse 1.5s ease infinite;
}

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

/* Launch ready state */
.contact-ticket-launch.ready {
    border-color: var(--color-emerald);
    background: rgba(16, 185, 129, 0.1);
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.2);
}

.contact-ticket-launch.ready .launch-status {
    display: none;
}

.contact-ticket-launch.ready .launch-ready {
    display: flex;
    animation: launchReady 0.5s ease;
}

@keyframes launchReady {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Success State */
.contact-ticket-success {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-2xl);
    position: absolute;
    inset: 0;
    background: var(--color-surface);
    z-index: 10;
    border-radius: var(--radius-xl);
}

.contact-ticket-inner.success .contact-ticket-tests,
.contact-ticket-inner.success .contact-ticket-progress,
.contact-ticket-inner.success .contact-ticket-launch,
.contact-ticket-inner.success .contact-ticket-header {
    opacity: 0;
    pointer-events: none;
}

.contact-ticket-inner.success .contact-ticket-success {
    display: flex;
    animation: successReveal 0.6s ease;
}

@keyframes successReveal {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.success-animation {
    margin-bottom: var(--space-lg);
}

.success-rocket {
    width: 64px;
    height: 64px;
    color: var(--color-emerald);
    animation: rocketLaunch 1s ease forwards;
}

@keyframes rocketLaunch {
    0% { transform: translateY(0) rotate(-45deg); opacity: 1; }
    50% { transform: translateY(-30px) rotate(-45deg); opacity: 1; }
    100% { transform: translateY(-60px) rotate(-45deg); opacity: 0; }
}

.success-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-emerald);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
    animation: successBounce 0.6s ease 0.3s both;
}

@keyframes successBounce {
    0% { opacity: 0; transform: translateY(20px); }
    60% { transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0); }
}

.success-subtitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
    animation: successBounce 0.6s ease 0.4s both;
}

.success-message {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
    animation: successBounce 0.6s ease 0.5s both;
}

.success-ticket-id {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface-elevated);
    border-radius: var(--radius-sm);
    animation: successBounce 0.6s ease 0.6s both;
}

/* Mobile Styles */
@media (max-width: 900px) {
    .contact-form-container {
        grid-template-columns: 1fr;
    }

    .contact-ticket {
        order: -1;
        position: relative;
        top: 0;
    }

    .contact-form {
        padding: var(--space-xl);
    }
}

@media (max-width: 600px) {
    .contact-toggle {
        flex-direction: column;
        max-width: 100%;
    }

    .contact-toggle-slider {
        width: calc(100% - var(--space-sm));
        height: calc(50% - var(--space-xs));
    }

    .contact-toggle-btn[data-mode="contact"].active ~ .contact-toggle-slider {
        transform: translateY(100%);
    }

    .form-days-grid {
        flex-wrap: wrap;
    }

    .form-day-btn {
        flex: 0 0 calc(33.333% - var(--space-sm));
    }

    .form-time-options {
        flex-direction: column;
    }

    .form-nav-buttons {
        flex-direction: column-reverse;
    }

    .form-back-btn {
        justify-content: center;
    }

    .contact-form {
        padding: var(--space-lg);
    }

    .contact-ticket-inner {
        padding: var(--space-lg);
    }
}

/* Legal page responsive */
@media (max-width: 768px) {
    .legal-main {
        padding-top: calc(var(--header-height) + var(--space-xl));
        padding-bottom: var(--space-xl);
    }

    .legal-header {
        margin-bottom: var(--space-lg);
    }

    .legal-title {
        word-break: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
    }

    .legal-section {
        margin-bottom: var(--space-lg);
    }

    .legal-card {
        padding: var(--space-md);
    }

    .legal-detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
}

/* ===== MOBILE FIXES (v6.1) ===== */

/* --- Mobile Menu Toggle (Hamburger) --- */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 10000;
    position: relative;
}

.hamburger-line {
    width: 24px;
    height: 2px;
    background: var(--color-text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

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

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

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

/* --- Mobile Navigation Styles --- */
@media (max-width: 768px) {
    /* Show hamburger menu */
    .mobile-menu-toggle {
        display: flex;
    }

    /* Mobile nav overlay */
    .nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgb(5, 5, 10);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        padding: 100px var(--space-xl) var(--space-xl);
        gap: var(--space-md);
        align-items: center;
        justify-content: flex-start;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-20px);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
        z-index: 9999;
    }

    .nav.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .nav-link {
        font-size: 18px;
        padding: 16px 24px;
        width: 100%;
        text-align: center;
    }

    .nav .btn-primary {
        margin-top: var(--space-lg);
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    /* --- Hero Visual: Hide on Mobile --- */
    .hero-visual {
        display: none !important;
    }

    /* --- Comparison Section: Full-width colored cards on Mobile --- */
    .comparison-visual {
        background: transparent !important;
        border: none !important;
        padding: var(--space-sm) !important;
    }

    .comparison-visual::before {
        display: none !important;
    }

    .comparison-header {
        display: none !important;
    }

    .comparison-row {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        padding: var(--space-md) 0;
    }

    .comparison-cell {
        padding: var(--space-md) !important;
        border-radius: var(--radius-md) !important;
        flex-wrap: wrap;
    }

    .comparison-cell.old {
        background: rgba(239, 68, 68, 0.05) !important;
        border: 1px solid rgba(239, 68, 68, 0.15) !important;
    }

    .comparison-cell.old::before {
        content: 'DIE HERAUSFORDERUNG';
        display: block;
        width: 100%;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: rgba(239, 68, 68, 0.7);
        margin-bottom: var(--space-sm);
    }

    .comparison-cell.new {
        background: rgba(16, 185, 129, 0.05) !important;
        border: 1px solid rgba(16, 185, 129, 0.15) !important;
    }

    .comparison-cell.new::before {
        content: 'IHR NEUER ANSATZ';
        display: block;
        width: 100%;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: rgba(16, 185, 129, 0.7);
        margin-bottom: var(--space-sm);
    }

    .problem-icon-wrapper,
    .solution-icon-wrapper {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    /* --- Feature Visuals: Full-width on Mobile --- */
    .feature-visual {
        margin: 0 calc(-1 * var(--space-xl)) !important;
        width: calc(100% + 2 * var(--space-xl)) !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        padding: var(--space-md) !important;
        min-height: auto !important;
    }

    .feature-visual::before {
        display: none !important;
    }

    /* --- Process/Zusammenarbeit: Vertical Stack on Mobile --- */
    .process-steps {
        display: none !important;
    }

    .process-line {
        display: none !important;
    }

    .process-detail {
        display: block !important;
        opacity: 1 !important;
        position: relative !important;
        transform: none !important;
        margin-bottom: var(--space-lg);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: var(--space-lg);
    }

    .process-detail-header {
        margin-bottom: var(--space-md);
    }

    .process-detail-title {
        font-size: 18px;
    }

    .process-detail-subtitle {
        font-size: 13px;
    }

    .process-detail-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-md);
    }

    .process-detail-list li {
        font-size: 13px;
    }

    .process-detail-deliverables {
        flex-wrap: wrap;
    }

    /* --- Contact Form: Hide QA Pipeline on Mobile --- */
    .contact-ticket {
        display: none !important;
    }

    /* --- Contact Form: Full-width on Mobile --- */
    .contact-form-wrapper {
        padding: var(--space-sm) 0 !important;
        margin: 0 calc(-1 * var(--space-md)) !important;
        width: calc(100% + 2 * var(--space-md)) !important;
    }

    .contact-form-container {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
    }

    .contact-form {
        padding: var(--space-sm) !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    .form-step {
        padding: var(--space-sm) !important;
    }

    .form-group {
        margin-bottom: var(--space-md);
    }

    .form-input,
    .form-textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: var(--space-sm) var(--space-md) !important;
    }

    .field-tests {
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .field-test {
        font-size: 10px;
    }

    .form-step-title {
        margin-bottom: var(--space-md);
    }

    .form-step-number {
        font-size: 12px;
    }

    .form-step-label {
        font-size: 14px;
    }

    .form-nav-buttons {
        flex-direction: row !important;
        gap: var(--space-sm);
        margin-top: var(--space-md);
    }

    .form-back-btn {
        flex: 0 0 auto;
        padding: var(--space-sm) var(--space-md) !important;
        font-size: 13px !important;
    }

    .form-next-btn,
    .form-submit-btn {
        flex: 1;
        padding: var(--space-sm) var(--space-md) !important;
        font-size: 14px !important;
        min-width: 0;
    }

    /* Contact method buttons - vertical layout */
    .form-contact-methods {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--space-sm) !important;
    }

    .form-contact-card {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: var(--space-md) var(--space-sm) !important;
        gap: var(--space-xs) !important;
    }

    .contact-card-icon {
        margin-bottom: var(--space-xs);
    }

    .contact-card-content {
        text-align: center;
    }

    .contact-card-title {
        font-size: 14px !important;
    }

    .contact-card-desc {
        font-size: 10px !important;
        line-height: 1.3;
    }

    /* Phone form - hide only time selection, keep phone input */
    .form-time-selection,
    .form-time-selection + br,
    label[for="contact-phone"] ~ .form-time-selection {
        display: none !important;
    }

    /* Hide the label "Bevorzugtes Zeitfenster" */
    .form-group .form-label:nth-last-child(2) {
        display: none !important;
    }

    /* --- More space for phone form --- */
    .form-steps-stack {
        min-height: 550px !important;
    }

    /* --- Stats Section: Single column on Mobile --- */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-lg);
    }

    .stat-card {
        padding: var(--space-lg);
    }

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

    .stat-value {
        font-size: 48px;
    }

    /* --- Testimonial: Better typography on Mobile --- */
    .testimonial-card {
        padding: var(--space-xl);
    }

    .testimonial-text {
        font-size: 18px;
        line-height: 1.6;
        text-align: left;
    }

    .testimonial-author {
        flex-direction: column;
        gap: var(--space-md);
    }

    .testimonial-info {
        text-align: center;
    }

    /* --- Guarantee Section: Fix overflow --- */
    .guarantee-title {
        font-size: clamp(24px, 6vw, 48px);
        word-break: break-word;
        hyphens: auto;
        padding: 0 var(--space-sm);
    }

    /* --- Team Section: Reduce empty space --- */
    .team-stack-container {
        min-height: 350px;
    }

    /* --- Contact Section: Remove excessive space --- */
    .new-bliss-closing {
        margin-top: var(--space-xl);
        padding-top: var(--space-xl);
    }

    /* --- Fix Tab overflow in Kanban --- */
    .feature-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: var(--space-sm);
    }

    .feature-tabs::-webkit-scrollbar {
        display: none;
    }

    .feature-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* --- Hero Dashboard Mobile Fixes --- */
@media (max-width: 768px) {
    #hero-alerts {
        top: 20vh;
    }

    #hero-failure-messages {
        top: 25vh !important;
    }

    .hero-content {
        padding-top: 5vh !important;
    }

    .project-dashboard {
        padding: 16px;
        border-radius: 12px;
    }

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
        padding-bottom: 12px;
    }

    .dashboard-status {
        width: 100%;
        justify-content: flex-start;
    }

    .status-text {
        font-size: 10px;
        padding: 3px 8px;
        white-space: nowrap;
    }

    .dashboard-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .metric-card {
        padding: 10px;
        min-width: 0;
    }

    .metric-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin-bottom: 6px;
    }

    .metric-label {
        font-size: 9px;
    }

    .metric-value {
        font-size: 16px;
        min-width: 45px;
        text-align: left;
    }

    .metric-status {
        font-size: 10px;
    }

    .metric-bar-container {
        height: 4px;
        margin-bottom: 6px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .hero-visual {
        transform: scale(0.75);
    }

    .testimonial-text {
        font-size: 16px;
    }

    .guarantee-title {
        font-size: 22px;
    }

    .stat-value {
        font-size: 40px;
    }

    .comparison-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .problem-icon-wrapper,
    .solution-icon-wrapper {
        width: 40px;
        height: 40px;
    }

    /* Hero Dashboard - Extra small */
    #hero-alerts {
        max-width: 320px;
    }

    .dashboard-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .metric-card {
        padding: 8px;
    }

    .metric-value {
        font-size: 14px;
    }

    .metric-label {
        font-size: 8px;
    }

    .metric-status {
        font-size: 9px;
    }
}