/* === HEADER === */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            padding: var(--space-4) 0;
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            transition: all var(--transition-base);
            height: var(--header-height);
        }

        .header.scrolled {
            padding: var(--space-3) 0;
            background: rgba(0, 0, 0, 0.98);
        }

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

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

        .logo-img {
            height: 36px;
            width: auto;
            transition: transform var(--transition-fast), filter var(--transition-fast);
            filter: brightness(1);
        }

        .logo:hover .logo-img {
            transform: scale(1.05);
            filter: brightness(1.15);
        }

        .footer-logo-img {
            height: 32px;
            width: auto;
            opacity: 0.9;
            transition: opacity var(--transition-fast);
        }

        .footer-logo-img:hover {
            opacity: 1;
        }

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

        .nav-link {
            font-size: var(--text-sm);
            font-weight: 500;
            color: rgba(255, 255, 255, 0.7);
            transition: color var(--transition-fast);
            position: relative;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--color-accent-gradient);
            transition: width var(--transition-base);
        }

        .nav-link:hover {
            color: #fff;
        }

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

        .nav-cta {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            font-size: var(--text-sm);
            font-weight: 500;
            color: #fff;
            background: var(--color-accent-gradient);
            border-radius: var(--radius-full);
            transition: transform var(--transition-fast), box-shadow var(--transition-fast);
        }

        .nav-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(199, 92, 74, 0.4);
        }

        /* Mobile menu */
        .menu-toggle {
            display: none;
            flex-direction: column;
            gap: 5px;
            background: none;
            border: none;
            cursor: pointer;
            padding: var(--space-2);
        }

        .menu-toggle span {
            display: block;
            width: 24px;
            height: 2px;
            background: var(--color-text-primary);
            transition: all var(--transition-fast);
        }

        .nav-close {
            display: none;
            position: absolute;
            top: var(--space-6);
            right: var(--space-6);
            background: none;
            border: none;
            color: #fff;
            font-size: var(--text-2xl);
            cursor: pointer;
            padding: var(--space-2);
            transition: color var(--transition-fast);
        }

        .nav-close:hover {
            color: var(--color-accent-primary);
        }

        /* === HERO === */
        .hero {
            margin-top: var(--header-height);
            display: flex;
            align-items: center;
            position: relative;
            padding: var(--space-6) 0 var(--space-10);
            overflow: hidden;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 80% 50% at 50% -20%, rgba(199, 92, 74, 0.08), transparent),
                radial-gradient(ellipse 60% 40% at 80% 60%, rgba(230, 126, 34, 0.06), transparent);
            pointer-events: none;
        }

        .hero-grid {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
            background-size: 60px 60px;
            mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent);
            pointer-events: none;
            overflow: hidden;
        }

        .grid-flash {
            position: absolute;
            opacity: 0;
            pointer-events: none;
            z-index: 1;
        }

        .flash-h {
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent, 
                var(--color-accent-primary) 50%, 
                transparent
            );
            background-size: 200px 100%;
            background-repeat: no-repeat;
            animation: flash-move-h 1.2s linear forwards;
            box-shadow: 0 0 10px rgba(199, 92, 74, 0.3);
        }

        .flash-h-reverse {
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent, 
                var(--color-accent-primary) 50%, 
                transparent
            );
            background-size: 200px 100%;
            background-repeat: no-repeat;
            animation: flash-move-h-reverse 1.2s linear forwards;
            box-shadow: 0 0 10px rgba(199, 92, 74, 0.3);
        }

        .flash-v {
            width: 1px;
            height: 100%;
            background: linear-gradient(180deg, 
                transparent, 
                var(--color-accent-primary) 50%, 
                transparent
            );
            background-size: 100% 200px;
            background-repeat: no-repeat;
            animation: flash-move-v 1.2s linear forwards;
            box-shadow: 0 0 10px rgba(199, 92, 74, 0.3);
        }

        .flash-v-reverse {
            width: 1px;
            height: 100%;
            background: linear-gradient(180deg, 
                transparent, 
                var(--color-accent-primary) 50%, 
                transparent
            );
            background-size: 100% 200px;
            background-repeat: no-repeat;
            animation: flash-move-v-reverse 1.2s linear forwards;
            box-shadow: 0 0 10px rgba(199, 92, 74, 0.3);
        }

        @keyframes flash-move-h {
            0% { 
                opacity: 0; 
                background-position: -200px 0;
            }
            20% {
                opacity: 1;
            }
            80% {
                opacity: 1;
            }
            100% { 
                opacity: 0; 
                background-position: calc(100% + 200px) 0;
            }
        }

        @keyframes flash-move-h-reverse {
            0% { 
                opacity: 0; 
                background-position: calc(100% + 200px) 0;
            }
            20% {
                opacity: 1;
            }
            80% {
                opacity: 1;
            }
            100% { 
                opacity: 0; 
                background-position: -200px 0;
            }
        }

        @keyframes flash-move-v {
            0% { 
                opacity: 0; 
                background-position: 0 -200px;
            }
            20% {
                opacity: 1;
            }
            80% {
                opacity: 1;
            }
            100% { 
                opacity: 0; 
                background-position: 0 calc(100% + 200px);
            }
        }

        @keyframes flash-move-v-reverse {
            0% { 
                opacity: 0; 
                background-position: 0 calc(100% + 200px);
            }
            20% {
                opacity: 1;
            }
            80% {
                opacity: 1;
            }
            100% { 
                opacity: 0; 
                background-position: 0 -200px;
            }
        }

        .hero-content {
            position: relative;
            z-index: 1;
            max-width: var(--content-width);
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            margin-bottom: var(--space-6);
            font-size: var(--text-sm);
            font-weight: 500;
            color: var(--color-accent-primary);
            background: rgba(199, 92, 74, 0.1);
            border: 1px solid rgba(199, 92, 74, 0.2);
            border-radius: var(--radius-full);
            animation: fadeInUp 0.6s ease forwards;
            position: relative;
            overflow: hidden;
        }

        .hero-badge::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.4),
                transparent
            );
            animation: badge-shimmer 8s ease-in-out infinite;
        }

        @keyframes badge-shimmer {
            0%, 85% {
                left: -100%;
            }
            90% {
                left: 100%;
            }
            100% {
                left: 100%;
            }
        }

        .hero-badge i {
            animation: pulse-glow 2s ease-in-out infinite;
            border-radius: var(--radius-full);
        }

        .hero-title {
            font-family: var(--font-display);
            font-size: clamp(var(--text-4xl), 8vw, var(--text-6xl));
            font-weight: 800;
            line-height: 1.0;
            letter-spacing: -0.04em;
            margin-bottom: var(--space-6);
            animation: fadeInUp 0.6s ease 0.1s forwards;
            opacity: 0;
        }

        .flicker-text {
            animation: flicker-animation 6s linear infinite, glitch-animation 3s linear infinite;
            display: inline-block;
        }

        .flicker-text-2 {
            animation: flicker-animation 7s linear infinite, glitch-animation 2.5s linear infinite;
            animation-delay: 0.5s;
            display: inline-block;
        }

        .flicker-text-3 {
            animation: flicker-animation 8s linear infinite, glitch-animation 3.5s linear infinite;
            animation-delay: 1.2s;
            display: inline-block;
        }


        @keyframes flicker-animation {
            0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
                opacity: 1;
                filter: brightness(1);
            }
            20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
                opacity: 0.8;
                filter: brightness(0.95);
            }
        }

        @keyframes glitch-animation {
            0%, 20%, 24%, 38%, 41%, 58%, 61%, 80%, 84%, 100% {
                transform: skew(0deg) translateX(0);
            }
            21% {
                transform: skew(15deg) translateX(3px);
            }
            22% {
                transform: skew(-15deg) translateX(-3px);
            }
            41% {
                transform: skew(10deg);
            }
            42% {
                transform: skew(-10deg);
            }
            59% {
                transform: skew(8deg) translateX(4px);
            }
            60% {
                transform: skew(-8deg) translateX(-4px);
            }
            81% {
                transform: skew(12deg) translateX(2px);
            }
            82% {
                transform: skew(-12deg) translateX(-2px);
            }
        }

        .hero-subtitle {
            font-size: var(--text-xl);
            color: var(--color-text-secondary);
            line-height: var(--leading-relaxed);
            margin-bottom: var(--space-8);
            max-width: 600px;
            animation: fadeInUp 0.6s ease 0.2s forwards;
            opacity: 0;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-4);
            animation: fadeInUp 0.6s ease 0.3s forwards;
            opacity: 0;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            padding: var(--space-4) var(--space-6);
            font-family: var(--font-sans);
            font-size: var(--text-base);
            font-weight: 500;
            border-radius: var(--radius-lg);
            border: none;
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .btn-primary {
            color: white;
            background: var(--color-accent-gradient);
            box-shadow: 0 4px 15px var(--color-accent-glow);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(199, 92, 74, 0.4);
        }

        .btn-secondary {
            color: var(--color-text-primary);
            background: var(--color-bg-card);
            border: 1px solid var(--color-border);
        }

        .btn-secondary:hover {
            background: var(--color-bg-card-hover);
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(199, 92, 74, 0.2);
        }

        .hero-stats {
            display: flex;
            gap: var(--space-10);
            margin-top: var(--space-12);
            padding-top: var(--space-8);
            border-top: 1px solid var(--color-border);
            animation: fadeInUp 0.6s ease 0.4s forwards;
            opacity: 0;
        }

        .stat {
            text-align: left;
        }

        .stat-value {
            font-family: var(--font-display);
            font-size: var(--text-3xl);
            font-weight: 800;
            background: var(--color-accent-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .stat-label {
            font-size: var(--text-sm);
            color: var(--color-text-tertiary);
            margin-top: var(--space-1);
        }

        /* Hero Layout */
        .hero-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-16);
            align-items: center;
        }

        /* Wheel / Donut Chart */
        .hero-visual {
            display: flex;
            justify-content: center;
            align-items: center;
            animation: fadeInUp 0.6s ease 0.5s forwards;
            opacity: 0;
        }

        .skills-wheel {
            position: relative;
            width: 320px;
            height: 320px;
        }

        .wheel-svg {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }

        .wheel-segment {
            fill: none;
            stroke-width: 40;
            stroke-linecap: butt;
            transition: all var(--transition-base);
            cursor: pointer;
        }

        .wheel-segment:hover {
            stroke-width: 48;
            filter: brightness(1.1);
        }

        .wheel-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 180px;
            height: 180px;
            background: var(--color-bg-primary);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: var(--space-4);
        }

        .wheel-robot {
            font-size: var(--text-3xl);
            background: var(--color-accent-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: var(--space-2);
        }

        .wheel-subtitle {
            font-size: var(--text-xs);
            color: var(--color-text-tertiary);
            line-height: var(--leading-snug);
        }

        .wheel-icons {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        .wheel-icon {
            position: absolute;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text-sm);
            color: var(--color-text-primary);
            background: var(--color-bg-card);
            border-radius: var(--radius-md);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            transition: all var(--transition-fast);
        }

        .wheel-icon:hover {
            transform: scale(1.15);
            background: #000;
            color: #fff;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        }

        .wheel-icon::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(-4px);
            padding: var(--space-2) var(--space-3);
            font-size: var(--text-xs);
            font-weight: 500;
            color: var(--color-text-primary);
            background: var(--color-bg-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition-fast);
            pointer-events: none;
            z-index: 10;
        }

        .wheel-icon:hover::after {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(-8px);
        }

        @media (max-width: 1024px) {
            .hero-wrapper {
                grid-template-columns: 1fr;
                gap: var(--space-12);
            }

            .hero-visual {
                display: none;
            }
        }

        /* === AI SECTION === */
        .ai-section {
            padding: var(--space-24) 0;
            padding-bottom: var(--space-24);
            background: var(--color-bg-secondary);
            position: relative;
            overflow: visible;
            z-index: 2;
        }

        .ai-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--color-accent-primary), transparent);
        }

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

        .section-label {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--text-sm);
            font-weight: 500;
            color: var(--color-accent-primary);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: var(--space-4);
        }

        .section-title {
            font-family: var(--font-display);
            font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl));
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -0.03em;
            margin-bottom: var(--space-4);
        }

        .section-desc {
            font-size: var(--text-lg);
            color: var(--color-text-secondary);
            line-height: var(--leading-relaxed);
        }

        .ai-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--space-6);
            padding-bottom: var(--space-4);
        }

        .ai-card {
            position: relative;
            padding: var(--space-8);
            background: var(--color-bg-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-xl);
            transition: all var(--transition-base);
            overflow: hidden;
        }

        .ai-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--color-accent-gradient);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform var(--transition-base);
        }

        .ai-card:hover {
            background: var(--color-bg-card-hover);
            border-color: var(--color-border-hover);
            transform: translateY(-4px);
        }

        .ai-card:hover::before {
            transform: scaleX(1);
        }

        .ai-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            margin-bottom: var(--space-5);
            background: rgba(199, 92, 74, 0.1);
            border-radius: var(--radius-lg);
            color: var(--color-accent-primary);
            font-size: var(--text-2xl);
        }

        .ai-card-title {
            font-family: var(--font-display);
            font-size: var(--text-xl);
            font-weight: 700;
            margin-bottom: var(--space-3);
        }

        .ai-card-desc {
            font-size: var(--text-base);
            color: var(--color-text-secondary);
            line-height: var(--leading-relaxed);
        }

        /* Terminal animation */
        .ai-terminal {
            padding: var(--space-6);
            background: #2d2d2d;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-xl);
            font-family: var(--font-mono);
            font-size: var(--text-sm);
            overflow: hidden;
            color: #f5f5f5;
        }

        .terminal-header {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-bottom: var(--space-4);
            padding-bottom: var(--space-4);
            border-bottom: 1px solid var(--color-border);
        }

        .terminal-dot {
            width: 12px;
            height: 12px;
            border-radius: var(--radius-full);
        }

        .terminal-dot.red { background: #ff5f57; }
        .terminal-dot.yellow { background: #febc2e; }
        .terminal-dot.green { background: #28c840; }

        .terminal-title {
            margin-left: var(--space-4);
            color: #888;
            font-size: var(--text-xs);
        }

        .terminal-line {
            display: flex;
            align-items: flex-start;
            gap: var(--space-2);
            margin-bottom: var(--space-2);
        }

        .terminal-prompt {
            color: var(--color-accent-primary);
        }

        .terminal-text {
            color: var(--color-text-secondary);
        }

        .terminal-content {
            height: 270px;
            overflow: hidden;
        }

        .terminal-command {
            color: #f5f5f5;
        }

        .terminal-cursor {
            color: var(--color-accent-primary);
            animation: cursor-blink 1s infinite;
            margin-left: 2px;
        }

        .terminal-cursor.typing {
            animation: none;
        }

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

        .terminal-response {
            margin-top: var(--space-4);
            padding: var(--space-4);
            background: transparent;
            border-left: 2px solid var(--color-accent-primary);
            color: #d4d4d4;
            font-size: var(--text-xs);
            line-height: 1.6;
            white-space: pre;
            overflow-x: auto;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .terminal-response.visible {
            opacity: 1;
        }

        .terminal-response .code-keyword {
            color: #c678dd;
        }

        .terminal-response .code-class {
            color: #e5c07b;
        }

        .terminal-response .code-string {
            color: #98c379;
        }

        .terminal-response .code-comment {
            color: #5c6370;
            font-style: italic;
        }

        .terminal-response .code-function {
            color: #61afef;
        }

        .terminal-response .code-variable {
            color: #e06c75;
        }

        /* AI Demo Layout - Terminal and Use Cases Side by Side */
        .ai-demo-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-8);
            margin-top: var(--space-12);
        }

        /* AI Examples */
        .ai-examples {
            padding: var(--space-8);
            background: var(--color-bg-tertiary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-xl);
        }

        .ai-examples-title {
            font-size: var(--text-lg);
            font-weight: 600;
            margin-bottom: var(--space-6);
            text-align: center;
            color: var(--color-text-secondary);
        }

        .ai-examples-grid {
            margin-top:35px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-4);
        }

        .ai-example {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-4);
            background: var(--color-bg-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            font-size: var(--text-sm);
            color: var(--color-text-secondary);
            transition: all var(--transition-fast);
        }

        .ai-example:hover {
            border-color: var(--color-accent-primary);
            color: var(--color-text-primary);
        }

        .ai-example i {
            color: var(--color-accent-primary);
            font-size: var(--text-lg);
            flex-shrink: 0;
        }

        /* === SERVICES === */
        .services {
            padding: var(--space-24) 0;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: var(--space-6);
        }

        .service-card {
            position: relative;
            padding: var(--space-8);
            background: var(--color-bg-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-xl);
            transition: all var(--transition-base);
            overflow: hidden;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--color-accent-gradient);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform var(--transition-base);
        }

        .service-card:hover {
            background: var(--color-bg-card-hover);
            border-color: var(--color-border-hover);
            transform: translateY(-4px);
        }

        .service-card:hover::before {
            transform: scaleX(1);
        }

        .service-number {
            display: none;
        }

        .service-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            margin-bottom: var(--space-5);
            background: rgba(199, 92, 74, 0.1);
            border-radius: var(--radius-lg);
            color: var(--color-accent-primary);
            font-size: var(--text-2xl);
        }

        .service-title {
            font-family: var(--font-display);
            font-size: var(--text-2xl);
            font-weight: 700;
            margin-bottom: var(--space-4);
        }

        .service-desc {
            font-size: var(--text-base);
            color: var(--color-text-secondary);
            line-height: var(--leading-relaxed);
            margin-bottom: var(--space-6);
        }

        .service-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }

        .service-item {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            font-size: var(--text-sm);
            color: var(--color-text-secondary);
        }

        .service-item i {
            color: var(--color-success);
            font-size: var(--text-xs);
        }

        /* === EXPERTISE === */
        .expertise {
            padding: var(--space-24) 0;
            background: var(--color-bg-secondary);
        }

        .expertise-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-16);
            align-items: center;
        }

        .expertise-text h2 {
            font-family: var(--font-display);
            font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
            font-weight: 800;
            line-height: var(--leading-tight);
            margin-bottom: var(--space-6);
        }

        .expertise-text p {
            font-size: var(--text-lg);
            color: var(--color-text-secondary);
            line-height: var(--leading-relaxed);
            margin-bottom: var(--space-8);
        }

        .tech-stack {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-3);
        }

        .tech-tag {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            font-size: var(--text-sm);
            font-weight: 500;
            color: var(--color-text-secondary);
            background: var(--color-bg-tertiary);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-full);
            transition: all var(--transition-fast);
        }

        .tech-tag:hover {
            color: var(--color-accent-primary);
            border-color: var(--color-accent-primary);
            transform: translateY(-2px);
        }

        .expertise-visual {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-4);
        }

        .expertise-card {
            position: relative;
            padding: var(--space-6);
            background: var(--color-bg-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-xl);
            text-align: center;
            transition: all var(--transition-base);
            overflow: hidden;
        }

        .expertise-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--color-accent-gradient);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform var(--transition-base);
        }

        .expertise-card:hover {
            background: var(--color-bg-card-hover);
            border-color: var(--color-border-hover);
            transform: translateY(-4px);
        }

        .expertise-card:hover::before {
            transform: scaleX(1);
        }

        .expertise-card-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            margin: 0 auto var(--space-4);
            background: rgba(199, 92, 74, 0.1);
            border-radius: var(--radius-lg);
            font-size: var(--text-2xl);
            color: var(--color-accent-primary);
        }

        .expertise-card-title {
            font-size: var(--text-lg);
            font-weight: 600;
            margin-bottom: var(--space-2);
        }

        .expertise-card-desc {
            font-size: var(--text-sm);
            color: var(--color-text-tertiary);
        }

        /* === REFERENCES === */
        .references-wrapper {
            background: #fafaf9;
        }

        .references {
            padding: var(--space-24) 0;
            background: transparent;
        }

        .references-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--space-6);
        }

        .reference-card {
            position: relative;
            padding: var(--space-6);
            background: var(--color-bg-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-xl);
            transition: all var(--transition-base);
            overflow: hidden;
        }

        .reference-card:hover {
            background: var(--color-bg-card-hover);
            border-color: var(--color-border-hover);
            transform: translateY(-4px);
        }

        .reference-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--color-accent-gradient);
            border-radius: var(--radius-xl) var(--radius-xl) 0 0;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform var(--transition-base);
        }

        .reference-card:hover::before {
            transform: scaleX(1);
        }

        .reference-type {
            display: inline-block;
            padding: var(--space-1) var(--space-3);
            margin-bottom: var(--space-4);
            font-size: var(--text-xs);
            font-weight: 500;
            color: var(--color-accent-primary);
            background: rgba(199, 92, 74, 0.1);
            border-radius: var(--radius-full);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .reference-title {
            font-family: var(--font-display);
            font-size: var(--text-lg);
            font-weight: 700;
            margin-bottom: var(--space-2);
        }

        .reference-client {
            font-size: var(--text-sm);
            color: var(--color-text-tertiary);
            margin-bottom: var(--space-4);
        }

        .reference-desc {
            font-size: var(--text-sm);
            color: var(--color-text-secondary);
            line-height: var(--leading-relaxed);
        }

        .reference-partner {
            font-size: var(--text-xs);
            color: var(--color-text-tertiary);
            margin-top: var(--space-3);
            font-style: italic;
        }

        .reference-partner a {
            color: var(--color-accent-primary);
            text-decoration: none;
            transition: color var(--transition-fast);
        }

        .reference-partner a:hover {
            color: var(--color-accent-secondary);
            text-decoration: underline;
        }

        /* === CONTACT === */
        .contact {
            padding: var(--space-24) 0;
        }

        .contact-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-16);
            align-items: start;
        }

        .contact-info h2 {
            font-family: var(--font-display);
            font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
            font-weight: 800;
            line-height: var(--leading-tight);
            margin-bottom: var(--space-6);
        }

        .contact-info p {
            font-size: var(--text-lg);
            color: var(--color-text-secondary);
            line-height: var(--leading-relaxed);
            margin-bottom: var(--space-8);
        }

        .contact-methods {
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
        }

        .contact-method {
            display: flex;
            align-items: center;
            gap: var(--space-4);
            padding: var(--space-4) var(--space-5);
            background: var(--color-bg-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            transition: all var(--transition-fast);
        }

        .contact-method:hover {
            background: var(--color-bg-card-hover);
            border-color: var(--color-accent-primary);
            transform: translateX(8px);
        }

        .contact-method-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            background: rgba(199, 92, 74, 0.1);
            border-radius: var(--radius-md);
            color: var(--color-accent-primary);
            font-size: var(--text-xl);
        }

        .contact-method-content {
            flex: 1;
        }

        .contact-method-label {
            font-size: var(--text-sm);
            color: var(--color-text-tertiary);
            margin-bottom: var(--space-1);
        }

        .contact-method-value {
            font-size: var(--text-base);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: var(--space-3);
        }

        .contact-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #8b7355;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .contact-avatar-icon {
            width: 100%;
            height: 100%;
            border-radius: var(--radius-md);
            object-fit: cover;
        }

        .contact-method-hint {
            font-size: var(--text-sm);
            font-weight: 400;
            color: var(--color-text-tertiary);
        }

        /* Contact CTA */
        .contact-cta-wrapper {
            position: relative;
            padding: var(--space-10);
            background: var(--color-bg-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-2xl);
            text-align: center;
            transition: all var(--transition-base);
            overflow: hidden;
        }

        .contact-cta-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--color-accent-gradient);
            border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform var(--transition-base);
        }

        .contact-cta-wrapper:hover {
            background: var(--color-bg-card-hover);
            border-color: var(--color-border-hover);
            transform: translateY(-4px);
        }

        .contact-cta-wrapper:hover::before {
            transform: scaleX(1);
        }

        .contact-cta-content {
            max-width: 400px;
            margin: 0 auto;
        }

        .contact-cta-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            margin: 0 auto var(--space-6);
            background: rgba(199, 92, 74, 0.1);
            border-radius: var(--radius-xl);
            font-size: var(--text-3xl);
            color: var(--color-accent-primary);
        }

        .contact-cta-title {
            font-size: var(--text-2xl);
            font-weight: 600;
            margin-bottom: var(--space-4);
        }

        .contact-cta-desc {
            font-size: var(--text-base);
            color: var(--color-text-secondary);
            line-height: var(--leading-relaxed);
            margin-bottom: var(--space-6);
        }

        .contact-cta-btn {
            width: 100%;
            margin-bottom: var(--space-4);
        }

        .contact-cta-hint {
            font-size: var(--text-sm);
            color: var(--color-text-tertiary);
        }

        .contact-cta-hint strong {
            color: var(--color-text-secondary);
        }

        /* === FOOTER === */
        .footer {
            padding: var(--space-12) 0;
            background: #000000;
            border-top: none;
        }

        .footer-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: var(--space-6);
        }

        .footer-brand {
            display: flex;
            align-items: center;
            gap: var(--space-4);
        }

        .footer-logo {
            font-size: var(--text-xl);
            font-weight: 700;
        }

        .footer-tagline {
            font-size: var(--text-sm);
            color: rgba(255, 255, 255, 0.7);
        }

        .footer-links {
            display: flex;
            align-items: center;
            gap: var(--space-6);
        }

        .footer-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            font-size: var(--text-xl);
            color: var(--color-text-secondary);
            background: var(--color-bg-tertiary);
            border-radius: var(--radius-lg);
            transition: all var(--transition-fast);
        }

        .footer-link:hover {
            color: var(--color-text-primary);
            background: var(--color-accent-primary);
            transform: translateY(-2px);
        }

        .footer-copyright {
            font-size: var(--text-sm);
            color: rgba(255, 255, 255, 0.6);
        }

        .footer-main {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: var(--space-6);
        }

        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: var(--space-4);
            margin-top: var(--space-6);
            padding-top: var(--space-6);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .footer-privacy {
            font-size: var(--text-xs);
            color: rgba(255, 255, 255, 0.5);
        }

        /* === RESPONSIVE === */
        @media (max-width: 1024px) {
            .expertise-content,
            .contact-wrapper {
                grid-template-columns: 1fr;
                gap: var(--space-12);
            }

            .expertise-visual {
                max-width: 500px;
                margin: 0 auto;
            }
        }

        @media (max-width: 768px) {
            .nav {
                position: fixed;
                top: 0;
                right: -100%;
                width: 80%;
                max-width: 300px;
                height: 100vh;
                flex-direction: column;
                align-items: flex-start;
                gap: var(--space-6);
                padding: var(--space-24) var(--space-8);
                background: #2d2d2d;
                border-left: 1px solid var(--color-border);
                transition: right var(--transition-base);
            }

            .nav.active {
                right: 0;
            }

            .menu-toggle {
                display: flex;
            }

            .nav-close {
                display: block;
            }

            .hero-stats {
                flex-wrap: wrap;
                gap: var(--space-6);
            }

            .services-grid {
                grid-template-columns: 1fr;
            }


            .footer-inner {
                flex-direction: column;
                text-align: center;
            }
        }

        @media (max-width: 480px) {
            :root {
                --space-24: 4rem;
                --space-16: 3rem;
            }

            .hero-actions {
                flex-direction: column;
            }

            .btn {
                width: 100%;
            }

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

        /* === MCP SECTION === */
        .mcp-section {
            padding: var(--space-24) 0;
            background: var(--color-bg-primary);
        }

        .mcp-info-box {
            display: flex;
            gap: var(--space-6);
            padding: var(--space-8);
            margin: var(--space-12) 0;
            background: var(--color-bg-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-xl);
        }

        .mcp-info-icon {
            flex-shrink: 0;
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-accent-gradient);
            border-radius: var(--radius-lg);
            font-size: var(--text-2xl);
            color: white;
        }

        .mcp-info-icon i {
            animation: rotateIcon 6s linear infinite;
        }

        @keyframes rotateIcon {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .mcp-info-content {
            flex: 1;
        }

        .mcp-info-title {
            font-size: var(--text-xl);
            font-weight: var(--font-bold);
            color: var(--color-text-primary);
            margin-bottom: var(--space-3);
        }

        .mcp-info-text {
            font-size: var(--text-base);
            line-height: 1.7;
            color: var(--color-text-secondary);
        }

        /* Claude Animation Styles */
        .claude-animation {
            margin-top: var(--space-12);
            width: 100%;
        }

        .claude-window {
            background: #f5f0e8;
            border: 1px solid #e0d5c7;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .claude-window:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .claude-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: #ebe6dd;
            border-bottom: 1px solid #d9cfc1;
        }

        .claude-dots {
            display: flex;
            gap: 8px;
        }

        .claude-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #d1c4b5;
        }

        .claude-dot:nth-child(1) { background: #ff5f56; }
        .claude-dot:nth-child(2) { background: #ffbd2e; }
        .claude-dot:nth-child(3) { background: #27c93f; }

        .claude-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 500;
            color: #5c4f3f;
        }

        .claude-title i {
            color: #c75c4a;
        }

        .claude-dots-placeholder {
            width: 60px;
        }

        .claude-content {
            padding: 12px;
            height: 700px;
            max-height: 600px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
            background: #f5f0e8;
        }
        
        .claude-content::-webkit-scrollbar {
            width: 8px;
        }
        
        .claude-content::-webkit-scrollbar-track {
            background: #e8dfd4;
            border-radius: 4px;
        }
        
        .claude-content::-webkit-scrollbar-thumb {
            background: #c9b8a6;
            border-radius: 4px;
        }
        
        .claude-content::-webkit-scrollbar-thumb:hover {
            background: #b8a695;
        }

        .claude-message {
            display: flex;
            gap: var(--space-2);
            align-items: flex-start;
            opacity: 0;
            transform: translateY(10px);
            animation: messageSlideIn 0.4s ease forwards;
        }

        @keyframes messageSlideIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .message-avatar {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .user-avatar {
            background: #9b8b7e;
            color: white;
            margin-top: 4px;
        }

        .claude-avatar {
            background: #c75c4a;
            color: white;
            margin-top: 4px;
        }

        .message-bubble {
            flex: 1;
            padding: 8px 12px;
            border-radius: 12px;
            font-size: 14px;
            line-height: 1.6;
            max-width: 80%;
            color: #2d2520;
        }

        .user-bubble {
            background: #e8dfd4;
            border: none;
            max-width: calc(100% - 35px);
        }

        .claude-bubble {
            background: white;
            border: 1px solid #e0d5c7;
        }
        
        .claude-message-wrapper .claude-bubble {
            max-width: calc(100% - 35px);
        }

        .thinking-bubble {
            padding: 8px 16px;
            background: white;
            border: 1px solid #e0d5c7;
        }

        .thinking-dots {
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .thinking-dots span {
            width: 8px;
            height: 8px;
            background: #9b8b7e;
            border-radius: 50%;
            animation: thinkingPulse 1.4s ease-in-out infinite;
        }

        .thinking-dots span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .thinking-dots span:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes thinkingPulse {
            0%, 60%, 100% {
                opacity: 0.3;
                transform: scale(1);
            }
            30% {
                opacity: 1;
                transform: scale(1.3);
            }
        }

        .message-cursor {
            color: #2d2520;
            animation: cursor-blink 1s infinite;
            margin-left: 2px;
        }

        .message-cursor.hidden {
            display: none;
        }

        .mcp-tool-call {
            margin: 8px 0 8px 45px;
            padding: 8px;
            background: #fefdfb;
            border: 1px solid #d9cfc1;
            border-radius: 8px;
            opacity: 0;
            transform: scale(0.95);
            animation: toolCallAppear 0.4s ease forwards;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .mcp-tool-call + .mcp-tool-call {
            margin-top: 4px;
        }

        @keyframes toolCallAppear {
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .tool-call-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: #8b7355;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .tool-call-header i {
            font-size: 14px;
        }

        .tool-call-body {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .tool-call-icon {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #e8dfd4;
            border-radius: 6px;
            color: #8b7355;
        }

        .tool-call-text {
            flex: 1;
            font-size: 13px;
            color: #5c4f3f;
            line-height: 1.5;
        }

        .tool-call-detail {
            color: #2d2520;
            font-weight: 500;
        }

        /* Tasks Table Styles */
        .tasks-table-wrapper {
            margin: 16px 0;
            overflow-x: auto;
        }

        .tasks-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            background: white;
            border: 1px solid #e0d5c7;
            border-radius: 8px;
        }

        .tasks-table thead {
            background: #ebe6dd;
            border-bottom: 2px solid #d9cfc1;
        }

        .tasks-table th {
            padding: 10px 12px;
            text-align: left;
            font-weight: 600;
            color: #5c4f3f;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .tasks-table td {
            padding: 12px;
            border-top: 1px solid #e8dfd4;
            color: #2d2520;
            vertical-align: top;
        }

        .tasks-table tbody tr:hover {
            background: #faf8f5;
        }

        .task-description {
            font-size: 12px;
            color: #6b5d4f;
            margin-top: 4px;
        }

        .task-meta {
            font-size: 11px;
            color: #9b8b7e;
            margin-top: 4px;
            font-style: italic;
        }

        .priority-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            text-align: center;
            white-space: nowrap;
        }

        .priority-badge.high {
            background: #fee2e2;
            color: #dc2626;
        }

        .priority-badge.medium {
            background: #fef3c7;
            color: #d97706;
        }

        .status-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 500;
            background: #e8dfd4;
            color: #5c4f3f;
        }

        .status-badge.status-new {
            background: #dbeafe;
            color: #1e40af;
        }

        .status-badge.status-progress {
            background: #fef3c7;
            color: #92400e;
        }

        .status-badge.status-overdue {
            background: #fee2e2;
            color: #dc2626;
        }

        .deadline {
            display: block;
            font-weight: 500;
        }

        .deadline.overdue {
            color: #dc2626;
        }

        .deadline-note {
            font-size: 11px;
            color: #9b8b7e;
            margin-top: 2px;
        }

        .claude-bubble p {
            margin: 0 0 12px 0;
        }

        .claude-bubble p:last-child {
            margin-bottom: 0;
        }

        /* Responsive MCP Section */
        @media (max-width: 768px) {
            .ai-demo-layout {
                grid-template-columns: 1fr;
                gap: var(--space-6);
            }

            .ai-examples-grid {
                grid-template-columns: 1fr;
            }

            .ai-terminal {
                display: none;
            }

            .ai-examples {
                order: 1;
            }

            /* Tasks Table - Hide secondary info on mobile */
            .tasks-table th:nth-child(2),
            .tasks-table td:nth-child(2) {
                display: none;
            }

            .task-description,
            .task-meta,
            .deadline-note {
                display: none;
            }

            .tasks-table {
                font-size: 12px;
            }

            .tasks-table th,
            .tasks-table td {
                padding: 8px 6px;
            }

            .mcp-info-box {
                flex-direction: column;
                padding: var(--space-6);
                gap: var(--space-4);
            }

            .mcp-info-icon {
                width: 56px;
                height: 56px;
            }

            .claude-content {
                padding: var(--space-6);
                min-height: 350px;
            }

            .message-bubble {
                max-width: 90%;
            }

            .mcp-tool-call {
                margin-left: 0;
            }
        }