:root {
            --primary: #06D6A0;
            --primary-light: #26e7b3;
            --secondary: #118AB2;
            --accent: #EF476F;
            --accent-glow: #ff5a85;
            --neutral: #FEFFFE;
            --dark: #073B4C;
            --gaming-purple: #9D4EDD;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        body {
            font-family: 'Space Grotesk', sans-serif;
            background: var(--dark);
            color: white;
            overflow-x: hidden;
        }
        
        /* Original Pixel Characters Background */
        .retro-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            overflow: hidden;
        }
        
        .pixel-char {
            position: absolute;
            width: 50px;
            height: 50px;
            opacity: 0.12;
            animation: charFloat 20s linear infinite;
        }
        
        .pixel-char::before {
            content: '';
            position: absolute;
            width: 6px;
            height: 6px;
        }
        
        /* BOB - Blue Slime Character with brushes */
        .bob::before {
            box-shadow: 
                /* Hair tuft */
                18px 0 0 var(--secondary),
                24px 0 0 var(--secondary),
                /* Head top */
                12px 6px 0 var(--secondary),
                18px 6px 0 var(--secondary),
                24px 6px 0 var(--secondary),
                30px 6px 0 var(--secondary),
                /* Head sides & eyes */
                6px 12px 0 var(--secondary),
                12px 12px 0 var(--secondary),
                18px 12px 0 var(--secondary),
                24px 12px 0 var(--secondary),
                30px 12px 0 var(--secondary),
                36px 12px 0 var(--secondary),
                /* Face with tongue */
                6px 18px 0 var(--secondary),
                12px 18px 0 var(--secondary),
                18px 18px 0 var(--accent),
                24px 18px 0 var(--secondary),
                30px 18px 0 var(--secondary),
                36px 18px 0 var(--secondary),
                /* Body */
                12px 24px 0 var(--secondary),
                18px 24px 0 var(--secondary),
                24px 24px 0 var(--secondary),
                30px 24px 0 var(--secondary),
                /* Left arm with brush holder */
                0 18px 0 var(--secondary),
                0 24px 0 var(--secondary),
                /* Right arm */
                42px 18px 0 var(--secondary),
                42px 24px 0 var(--secondary);
        }
        
        /* BOOKMAN - Book Character with pages */
        .bookman::before {
            box-shadow: 
                /* Pages on top */
                18px 0 0 var(--primary),
                24px 0 0 var(--primary),
                30px 0 0 var(--primary),
                /* Book cover top */
                12px 6px 0 var(--primary),
                18px 6px 0 var(--primary),
                24px 6px 0 var(--primary),
                30px 6px 0 var(--primary),
                36px 6px 0 var(--primary),
                /* Eyes row */
                12px 12px 0 var(--primary),
                18px 12px 0 var(--primary),
                30px 12px 0 var(--primary),
                36px 12px 0 var(--primary),
                /* Cover middle */
                12px 18px 0 var(--primary),
                36px 18px 0 var(--primary),
                /* Smile */
                18px 24px 0 var(--primary),
                24px 24px 0 var(--primary),
                30px 24px 0 var(--primary),
                /* Cover continues */
                12px 30px 0 var(--primary),
                36px 30px 0 var(--primary),
                /* Arms */
                0 18px 0 var(--primary),
                0 24px 0 var(--primary),
                42px 18px 0 var(--primary),
                42px 24px 0 var(--primary),
                /* Legs */
                18px 36px 0 var(--primary),
                30px 36px 0 var(--primary),
                /* Book spine */
                42px 6px 0 var(--primary),
                42px 12px 0 var(--primary),
                42px 18px 0 var(--primary),
                42px 24px 0 var(--primary),
                42px 30px 0 var(--primary);
        }
        
        /* VIL - Red Triangle Warrior with sword & shield */
        .vil::before {
            box-shadow: 
                /* Triangle top point */
                24px 0 0 var(--accent),
                /* Triangle upper */
                18px 6px 0 var(--accent),
                24px 6px 0 var(--accent),
                30px 6px 0 var(--accent),
                /* Eyes angry */
                18px 12px 0 var(--accent),
                30px 12px 0 var(--accent),
                /* Triangle middle */
                12px 12px 0 var(--accent),
                24px 12px 0 var(--accent),
                36px 12px 0 var(--accent),
                /* Mouth angry */
                18px 18px 0 var(--accent),
                24px 18px 0 var(--accent),
                30px 18px 0 var(--accent),
                /* Triangle wider */
                12px 18px 0 var(--accent),
                36px 18px 0 var(--accent),
                /* Triangle base */
                6px 24px 0 var(--accent),
                12px 24px 0 var(--accent),
                18px 24px 0 var(--accent),
                24px 24px 0 var(--accent),
                30px 24px 0 var(--accent),
                36px 24px 0 var(--accent),
                42px 24px 0 var(--accent),
                /* Sword (left) */
                0 12px 0 var(--accent),
                0 18px 0 var(--accent),
                /* Shield (right) */
                48px 12px 0 var(--accent),
                48px 18px 0 var(--accent);
        }
        
        /* COIN - Spinning coin */
        .coin::before {
            box-shadow: 
                /* Outer ring */
                12px 6px 0 var(--primary-light),
                18px 6px 0 var(--primary-light),
                24px 6px 0 var(--primary-light),
                30px 6px 0 var(--primary-light),
                6px 12px 0 var(--primary-light),
                36px 12px 0 var(--primary-light),
                6px 18px 0 var(--primary-light),
                36px 18px 0 var(--primary-light),
                6px 24px 0 var(--primary-light),
                36px 24px 0 var(--primary-light),
                12px 30px 0 var(--primary-light),
                18px 30px 0 var(--primary-light),
                24px 30px 0 var(--primary-light),
                30px 30px 0 var(--primary-light),
                /* Inner symbol */
                18px 12px 0 var(--primary),
                24px 12px 0 var(--primary),
                18px 18px 0 var(--primary),
                24px 18px 0 var(--primary),
                18px 24px 0 var(--primary),
                24px 24px 0 var(--primary);
        }
        
        /* CHERRY - Double cherry */
        .cherry::before {
            box-shadow: 
                /* Stems */
                18px 0 0 var(--primary),
                24px 0 0 var(--primary),
                18px 6px 0 var(--primary),
                30px 6px 0 var(--primary),
                /* Left cherry */
                12px 12px 0 var(--accent),
                18px 12px 0 var(--accent),
                6px 18px 0 var(--accent),
                12px 18px 0 var(--accent),
                18px 18px 0 var(--accent),
                12px 24px 0 var(--accent),
                18px 24px 0 var(--accent),
                /* Right cherry */
                30px 12px 0 var(--accent),
                36px 12px 0 var(--accent),
                30px 18px 0 var(--accent),
                36px 18px 0 var(--accent),
                42px 18px 0 var(--accent),
                30px 24px 0 var(--accent),
                36px 24px 0 var(--accent);
        }
        
        /* MATE - Argentine Mate with bombilla */
        .mate::before {
            box-shadow: 
                /* Bombilla (straw) top */
                30px 0 0 var(--secondary),
                30px 6px 0 var(--secondary),
                30px 12px 0 var(--secondary),
                /* Mate cup rim */
                12px 18px 0 var(--primary),
                18px 18px 0 var(--primary),
                24px 18px 0 var(--primary),
                30px 18px 0 var(--primary),
                36px 18px 0 var(--primary),
                /* Mate body */
                12px 24px 0 var(--primary),
                18px 24px 0 var(--primary),
                24px 24px 0 var(--primary),
                30px 24px 0 var(--primary),
                36px 24px 0 var(--primary),
                /* Yerba (leaves inside) */
                18px 24px 0 var(--primary),
                24px 24px 0 var(--primary),
                /* Mate bottom */
                12px 30px 0 var(--primary),
                18px 30px 0 var(--primary),
                24px 30px 0 var(--primary),
                30px 30px 0 var(--primary),
                36px 30px 0 var(--primary),
                18px 36px 0 var(--primary),
                24px 36px 0 var(--primary),
                30px 36px 0 var(--primary);
        }
        
        @keyframes charFloat {
            0% {
                transform: translateX(-100px) translateY(0);
                opacity: 0;
            }
            5% {
                opacity: 0.12;
            }
            95% {
                opacity: 0.12;
            }
            100% {
                transform: translateX(calc(100vw + 100px)) translateY(-30px);
                opacity: 0;
            }
        }
        
        .pixel-char:nth-child(1) { top: 8%; animation-delay: 0s; animation-duration: 25s; }
        .pixel-char:nth-child(2) { top: 22%; animation-delay: 5s; animation-duration: 30s; }
        .pixel-char:nth-child(3) { top: 38%; animation-delay: 10s; animation-duration: 28s; }
        .pixel-char:nth-child(4) { top: 52%; animation-delay: 15s; animation-duration: 32s; }
        .pixel-char:nth-child(5) { top: 68%; animation-delay: 20s; animation-duration: 27s; }
        .pixel-char:nth-child(6) { top: 82%; animation-delay: 8s; animation-duration: 29s; }
        .pixel-char:nth-child(7) { top: 15%; animation-delay: 12s; animation-duration: 26s; }
        .pixel-char:nth-child(8) { top: 45%; animation-delay: 18s; animation-duration: 31s; }
        .pixel-char:nth-child(9) { top: 62%; animation-delay: 3s; animation-duration: 33s; }
        .pixel-char:nth-child(10) { top: 75%; animation-delay: 22s; animation-duration: 28s; }
        
        /* Particles */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }
        
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--primary);
            border-radius: 50%;
            opacity: 0;
            animation: particleFloat 6s ease-in-out infinite;
        }
        
        .particle:nth-child(1) { left: 10%; animation-delay: 0s; }
        .particle:nth-child(2) { left: 30%; animation-delay: 2s; }
        .particle:nth-child(3) { left: 50%; animation-delay: 1s; }
        .particle:nth-child(4) { left: 70%; animation-delay: 3s; }
        .particle:nth-child(5) { left: 90%; animation-delay: 1.5s; }
        
        @keyframes particleFloat {
            0%, 100% { 
                transform: translateY(100vh) scale(0);
                opacity: 0;
            }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100px) scale(1); }
        }
        
        /* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            padding: 0.5rem 0.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            backdrop-filter: blur(10px);
            background: rgba(7, 59, 76, 0.8);
            border-bottom: 1px solid rgba(6, 214, 160, 0.2);
            transition: all 0.3s ease;
        }
        
        header.scrolled {
            padding: 1rem 3rem;
            background: rgba(7, 59, 76, 0.95);
            box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
        }
        
        .logo {
            font-family: 'JetBrains Mono', monospace;
            font-weight: 700;
            font-size: 1.5rem;
            color: white;
            letter-spacing: -1px;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            text-decoration: none;
        }
        
        .logo-icon {
            width: 35px;
            height: 35px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            box-shadow: 0 0 20px rgba(6, 214, 160, 0.4);
            animation: logoPulse 3s ease-in-out infinite;
        }
        
        @keyframes logoPulse {
            0%, 100% { box-shadow: 0 0 20px rgba(6, 214, 160, 0.4); }
            50% { box-shadow: 0 0 30px rgba(6, 214, 160, 0.6); }
        }
        
        .logo span {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        nav {
            display: flex;
            gap: 2rem;
            align-items: center;
        }
    	img.logo {
			height:50px;width:auto;
		}
    	.visually-hidden{
			position:absolute;
			width:1px;
			height:1px;
			margin:-1px;
			padding:0;
			overflow:hidden;
			clip:rect(0 0 0 0);
			border:0;
        }
        
        nav a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            position: relative;
            transition: all 0.3s ease;
            padding: 0.5rem 0;
        }
        
        nav a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            transition: width 0.3s ease;
        }
        
        nav a:hover,
        nav a.active {
            color: var(--primary);
        }
        
        nav a:hover::after,
        nav a.active::after {
            width: 100%;
        }
        
        .mobile-menu-toggle {
            display: none;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        /* Hero Section */
        .hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 8rem 3rem 4rem;
            z-index: 10;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            width: 100%;
        }
        
        .hero-content {
            text-align: center;
            animation: fadeInUp 1s ease-out;
        }
        
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            background: rgba(6, 214, 160, 0.15);
            border: 2px solid var(--primary);
            padding: 0.6rem 1.5rem;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 2rem;
            font-family: 'JetBrains Mono', monospace;
            box-shadow: 0 0 20px rgba(6, 214, 160, 0.3);
            animation: badgeGlow 2s ease-in-out infinite;
        }
        
        @keyframes badgeGlow {
            0%, 100% { box-shadow: 0 0 20px rgba(6, 214, 160, 0.3); }
            50% { box-shadow: 0 0 30px rgba(6, 214, 160, 0.5); }
        }
        
        .hero h1 {
            font-size: 5rem;
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 1.5rem;
        }
        
        .hero h1 .gradient-text {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .hero h1 .accent-text {
            color: var(--accent);
            text-shadow: 0 0 30px rgba(239, 71, 111, 0.5);
        }
        
        .hero-subtitle {
            font-size: 1.3rem;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.8);
            max-width: 800px;
            margin: 0 auto 3rem;
        }
        
        .cta-buttons {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 1.2rem 3rem;
            font-size: 1.05rem;
            font-weight: 700;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            font-family: 'Space Grotesk', sans-serif;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            box-shadow: 0 0 30px rgba(6, 214, 160, 0.4);
        }
        
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 40px rgba(6, 214, 160, 0.6);
        }
        
        .btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
        }
        
        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: var(--primary);
            transform: translateY(-3px);
        }
        
        /* About Section */
        .about {
            position: relative;
            padding: 6rem 3rem;
            z-index: 10;
        }
        
        .about-content {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }
        
        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 2rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .about-text {
            font-size: 1.2rem;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 2rem;
        }
        
        .about-text strong {
            color: var(--primary);
            font-weight: 700;
        }
        
        /* Meet the Studio Section */
        .meet-studio {
            position: relative;
            padding: 6rem 3rem;
            z-index: 10;
        }
        
        .meet-studio-intro {
            font-size: 1.2rem;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 2rem;
            text-align: center;
        }
        
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2.5rem;
            margin-top: 3rem;
        }
        
        .team-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(6, 214, 160, 0.2);
            padding: 2.5rem;
            border-radius: 24px;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .team-card::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 24px;
            padding: 2px;
            background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .team-card:hover::before {
            opacity: 1;
        }
        
        .team-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }
        
        .team-header {
            margin-bottom: 1.5rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid rgba(6, 214, 160, 0.2);
        }
        
        .team-name {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .team-role {
            font-size: 1.1rem;
            color: var(--accent);
            font-weight: 600;
            font-family: 'JetBrains Mono', monospace;
        }
        
        .team-bio p {
            font-size: 1rem;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 0.8rem;
        }
        
        .team-bio p strong {
            color: var(--primary);
            font-weight: 700;
        }
        
        /* Services Section */
        .services {
            position: relative;
            padding: 6rem 3rem;
            z-index: 10;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }
        
        .service-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(6, 214, 160, 0.2);
            padding: 2.5rem;
            border-radius: 24px;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .service-card::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 24px;
            padding: 2px;
            background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .service-card:hover::before {
            opacity: 1;
        }
        
        .service-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }
        
        .service-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            display: block;
            filter: drop-shadow(0 0 10px rgba(6, 214, 160, 0.5));
        }
        
        .service-card h3 {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: white;
        }
        
        .service-card p {
            font-size: 1rem;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.7);
        }
        
        /* How We Work Section */
        .how-we-work {
            position: relative;
            padding: 6rem 3rem;
            z-index: 10;
        }

        .how-we-work-intro {
            font-size: 1.2rem;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 2rem;
            text-align: center;
        }        
        .how-we-work-intro2 {
            text-align: center;
            max-width: 900px;
            margin: 0 auto 4rem;
            font-size: 1.2rem;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.8);
        }
        
        .process-steps {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2.5rem;
            margin-top: 3rem;
        }
        
        .process-step {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(6, 214, 160, 0.2);
            padding: 2.5rem;
            border-radius: 24px;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .process-step::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 24px;
            padding: 2px;
            background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .process-step:hover::before {
            opacity: 1;
        }
        
        .process-step:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }
        
        .step-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            display: block;
            filter: drop-shadow(0 0 10px rgba(6, 214, 160, 0.5));
        }
        
        .step-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.8rem;
            color: white;
        }
        
        .step-duration {
            display: inline-block;
            padding: 0.3rem 1rem;
            background: rgba(6, 214, 160, 0.15);
            border: 1px solid var(--primary);
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 1.5rem;
            font-family: 'JetBrains Mono', monospace;
        }
        
        .step-details {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .step-details li {
            font-size: 1rem;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.7);
            padding-left: 1.5rem;
            position: relative;
            margin-bottom: 0.8rem;
        }
        
        .step-details li::before {
            content: '▹';
            position: absolute;
            left: 0;
            color: var(--primary);
            font-weight: bold;
        }
        
        .process-cta {
            text-align: center;
            margin-top: 4rem;
        }
        
        /* Contact Section */
        .contact {
            position: relative;
            padding: 6rem 3rem;
            z-index: 10;
        }
        
        .contact-content {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }
        
        .contact-text {
            font-size: 1.2rem;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 3rem;
        }
        
        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            align-items: center;
            margin-bottom: 3rem;
        }
        
        .contact-email {
            display: inline-flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 2rem;
            background: rgba(6, 214, 160, 0.1);
            border: 2px solid var(--primary);
            border-radius: 50px;
            color: var(--primary);
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 600;
            font-family: 'JetBrains Mono', monospace;
            transition: all 0.3s ease;
        }
        
        .contact-email:hover {
            background: rgba(6, 214, 160, 0.2);
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(6, 214, 160, 0.3);
        }
        
        .social-link {
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            padding: 1rem 2rem;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            color: white;
            text-decoration: none;
            font-size: 1.05rem;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .social-link:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: var(--primary);
            color: var(--primary);
            transform: translateY(-3px);
        }
        
        /* Footer */
        footer {
            position: relative;
            padding: 3rem;
            text-align: center;
            border-top: 1px solid rgba(6, 214, 160, 0.2);
            z-index: 10;
        }
        
        footer p {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.95rem;
        }
        footer a {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.95rem;
        }
        footer a hover {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.95rem;
        }
        
        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Responsive */
        @media (max-width: 968px) {
            header {
                padding: 0.5rem 0.5rem;
            }
            
            nav {
                position: fixed;
                left: 0;
                right: 0;
                background: rgba(7, 59, 76, 0.98);
                flex-direction: column;
                padding: 0.5rem;
                gap: 0.5rem;
                transform: translateY(-100%);
                opacity: 0;
                transition: all 0.3s ease;
                border-bottom: 1px solid rgba(6, 214, 160, 0.2);
            }
            
            nav.active {
                transform: translateY(0);
                opacity: 1;
            }
            
            .mobile-menu-toggle {
                display: block;
            }
            
            .hero {
                padding: 6rem 1.5rem 3rem;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .hero-subtitle {
                font-size: 1.1rem;
            }
            
            .about,
            .meet-studio,
            .services,
            .how-we-work,
            .contact {
                padding: 4rem 1.5rem;
            }
            
            .services-grid,
            .team-grid,
            .process-steps {
                grid-template-columns: 1fr;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .cta-buttons {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
                justify-content: center;
            }
        }
	.timeline-container {
		text-align: center;
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px 20px;
	}
	
	.timeline-line {
		position: absolute;
		top: 100px;
		left: 0;
		right: 0;
		height: 4px;
		background: linear-gradient(to right, #3b82f6, #8b5cf6);
		z-index: 0;
	}
	
	.timeline-step {
		display: inline-block;
		width: 22%;
		vertical-align: top;
		text-align: center;
		position: relative;
		margin: 0 0.5%;
	}
	
	.timeline-dot {
		position: relative;
		width: 80px;
		height: 80px;
		margin: 0 auto 20px;
		background: rgba(255, 255, 255, 0.05);
		border: 4px solid #3b82f6;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		z-index: 1;
		box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
		transition: all 0.3s ease;
	}
	
	.timeline-dot:hover {
		transform: scale(1.1);
		box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
	}
	
	.step-icon {
		font-size: 2.5rem;
	}
	
	.timeline-content {
		background: rgba(255, 255, 255, 0.05);
		padding: 16px;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		min-height: 200px;
		transition: all 0.3s ease;
	}
	
	.timeline-content:hover {
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
		transform: translateY(-4px);
	}
	
	.step-title {
		font-size: 1.25rem;
		font-weight: 700;
		color: white;
		margin-bottom: 8px;
	}
	
	.step-duration {
		display: inline-block;
		font-size: 0.875rem;
		color: #3b82f6;
		font-weight: 600;
		background: #eff6ff;
		padding: 4px 12px;
		border-radius: 12px;
		margin-bottom: 12px;
	}
	
	.step-description {
		font-size: 0.85rem;
		line-height: 1.5;
		margin-top: 12px;
	}

	       /* Case Studies Section - NEW */
        .case-studies {
            position: relative;
            padding: 6rem 3rem;
            z-index: 10;
        }
        
        .cases-container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px 20px;
        }
        
        .cases-slider {
            display: flex;
            gap: 1.5rem;
            overflow-x: auto;
            padding: 2rem 0;
            scroll-snap-type: x mandatory;
            scrollbar-width: thin;
            scrollbar-color: var(--primary) rgba(255, 255, 255, 0.1);
        }
        
        .cases-slider::-webkit-scrollbar {
            height: 8px;
        }
        
        .cases-slider::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
        }
        
        .cases-slider::-webkit-scrollbar-thumb {
            background: var(--primary);
            border-radius: 10px;
        }
        
        .case-card-compact {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(6, 214, 160, 0.2);
            border-radius: 16px;
        }
        
        .case-card-compact:hover {
            transform: translateY(-5px);
            border-color: var(--primary);
            box-shadow: 0 10px 30px rgba(6, 214, 160, 0.2);
        }
        
        .case-image {
            width: 100%;
            height: 300px;
            object-fit: cover;
			padding: 10px;
        }
        
        .case-content {
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
        }
        
        .case-tagline {
            font-size: 0.7rem;
            color: var(--primary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: 'JetBrains Mono', monospace;
        }
        
        .case-title {
            font-size: 1rem;
            font-weight: 600;
            color: white;
            line-height: 1.4;
            min-height: 60px;
        }
        
        .case-metric {
            font-size: 0.85rem;
            font-weight: 600;
            color: rgba(6, 214, 160, 0.9);
            font-family: 'JetBrains Mono', monospace;
            padding-top: 0.8rem;
            border-top: 1px solid rgba(6, 214, 160, 0.15);
        }
		
	/* Responsive */
	@media (max-width: 1024px) {
		.timeline-step {
			width: 48%;
			margin-bottom: 40px;
		}
		
		.timeline-line {
			display: none;
		}
	}
	
	@media (max-width: 640px) {
		.timeline-step {
			width: 100%;
			margin-bottom: 30px;
		}
		
		.timeline-dot {
			width: 70px;
			height: 70px;
		}
		
		.step-icon {
			font-size: 2rem;
		}
		
		.timeline-content {
			min-height: auto;
		}
	}
/* Base form layout */
.contact-form {
  max-width: 820px;               /* match your screenshot width feel */
  margin: 0 auto;
}

/* Put label and input in one line */
.form-row {
  display: grid;
  grid-template-columns: 140px 1fr; /* label width + flexible input */
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

/* Textarea row should let the textarea take a full line while keeping the label aligned */
.form-row--full {
  grid-template-columns: 220px 1fr; /* wider label looks nicer here; tweak as needed */
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

/* Make labels look like your heading style if desired */
.contact-form label {
  font-weight: 700;
  color: #20e0c2;                  /* teal-like from your image */
  text-align: center;              /* centers label within its 140/220px cell */
}

/* Inputs and textarea fill the available space */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 4px;
  border: 2px solid #21b9b0;       /* adjust to match your UI */
  background: rgba(6, 214, 160, 0.1);
  color: #edf0f5;
  box-sizing: border-box;
}

/* Center the captcha */
.captcha-wrap {
  display: flex;
  justify-content: center;
  margin: 18px 0;
}

/* Center the text in the button and optionally make it full width */
.form-btn {
  display: inline-flex;            /* lets us center content reliably */
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;                     /* full-width like your screenshot; remove if not desired */
  padding: 14px 18px;
  font-weight: 800;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, #20e0c2, #1b8bd6);
  color: #fff;
}

/* Hide honeypot field */
.hp { display: none !important; }

/* Responsive: stack label above control on small screens */
@media (max-width: 560px) {
  .form-row, .form-row--full {
    grid-template-columns: 1fr;    /* single column */
  }
  .contact-form label {
    text-align: left;              /* reads better when stacked */
  }
}

.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

/* Responsive */
@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
}

/* Botón de cambio de idioma */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(0, 217, 255, 0.15);
    border: 2px solid #00d9ff;
    border-radius: 8px;
    color: #00d9ff !important;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-left: 12px;
}

.lang-switch:hover {
    background: rgba(0, 217, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 217, 255, 0.4);
}

.lang-switch i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.lang-switch:hover i {
    transform: rotate(15deg);
}

/* Ajuste para mobile */
@media (max-width: 768px) {
    .lang-switch {
        margin-left: 0;
        margin-top: 8px;
    }
}