:root{--color-black:#0a0a0a;--color-charcoal:#1a1a1a;--color-dark-gray:#252525;--color-gray:#666666;--color-light-gray:#888888;--color-lighter-gray:#f5f5f5;--color-white:#ffffff;--text-primary:#0a0a0a;--text-secondary:#444444;--text-tertiary:#666666;--color-electric-blue:#007cc0;--color-blue-dark:#007cc0;--color-neon-green:#2db310;--color-cyber-purple:#6223cc;--color-orange:#FF9500;--color-whatsapp:#25D366;--gradient-primary:linear-gradient(135deg,var(--color-electric-blue) 0%,var(--color-cyber-purple) 100%);--gradient-secondary:linear-gradient(135deg,var(--color-neon-green) 0%,var(--color-electric-blue) 100%);--gradient-text-blue:linear-gradient(135deg,var(--color-blue-dark) 0%,var(--color-electric-blue) 100%);--glass-bg:rgba(255,255,255,0.7);--glass-border:rgba(0,0,0,0.05);--glass-blur:blur(20px);--card-shadow:0 10px 30px rgba(0,0,0,0.05);--font-heading:'Space Grotesk',sans-serif;--font-body:'Inter',sans-serif;--space-xs:0.5rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2rem;--space-xl:3rem;--space-2xl:5rem;--space-3xl:8rem;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:30px;--radius-full:9999px;--transition-fast:0.2s ease;--transition-base:0.3s ease;--transition-slow:0.5s ease;--z-cursor:9999;--z-nav:1000;--z-modal:2000} *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;font-size:16px} body{font-family:var(--font-body);background-color:var(--color-white);color:var(--text-primary);line-height:1.6;overflow-x:hidden;cursor:auto} a{color:inherit;text-decoration:none;transition:var(--transition-base)} button{font-family:inherit;cursor:pointer;border:none;background:none} img{max-width:100%;display:block} ul,ol{list-style:none} .container{max-width:1400px;margin:0 auto;padding:0 var(--space-lg)} @media (max-width:768px){.container{padding:0 var(--space-sm)} } h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:600;line-height:1.2;color:var(--text-primary)} .gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero-tagline,.section-label{color:var(--color-blue-dark) !important} .section-label{display:inline-block;font-size:0.875rem;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:var(--space-sm)} .section-title{font-size:clamp(2.5rem,5vw,4rem);margin-bottom:var(--space-lg);color:var(--text-primary)} .section-header{text-align:center;margin-bottom:var(--space-2xl)} .glass-card{background:rgba(255,255,255,0.8);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-lg);transition:var(--transition-base);box-shadow:var(--card-shadow)} .glass-card:hover{background:#ffffff;border-color:var(--color-electric-blue);transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,212,255,0.1)} .btn{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);font-family:var(--font-heading);font-size:1rem;font-weight:500;border-radius:var(--radius-full);transition:var(--transition-base);position:relative;overflow:hidden;cursor:pointer} @media (min-width:769px){.btn{cursor:none} } .btn-primary{background:var(--gradient-primary);color:var(--color-white);border:none;box-shadow:0 4px 15px rgba(0,212,255,0.3)} .btn-primary::before{content:'';position:absolute;inset:0;background:var(--gradient-secondary);opacity:0;transition:var(--transition-base)} .btn-primary:hover::before{opacity:1} .btn-primary:hover{box-shadow:0 8px 25px rgba(0,212,255,0.4)} .btn-primary span,.btn-primary svg{position:relative;z-index:1} .btn-secondary{background:transparent;color:var(--text-primary);border:1px solid rgba(0,0,0,0.1)} .btn-secondary:hover{background:var(--color-lighter-gray);border-color:var(--color-electric-blue);color:var(--color-electric-blue)} .btn-large{padding:var(--space-md) var(--space-xl);font-size:1.125rem} .btn-arrow{width:20px;height:20px;transition:transform var(--transition-base)} .btn:hover .btn-arrow{transform:translateX(4px)} .reveal{opacity:0;transform:translateY(40px);transition:opacity 0.8s ease,transform 0.8s ease;transition-delay:var(--delay,0s)} .reveal.active{opacity:1;transform:translateY(0)} .navbar{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);padding:var(--space-md) 0;transition:var(--transition-base);background:transparent} .navbar.scrolled{background:rgba(255,255,255,0.9);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);padding:var(--space-sm) 0} .nav-container{max-width:1400px;margin:0 auto;padding:0 var(--space-lg);display:flex;align-items:center;justify-content:space-between} .logo{font-family:var(--font-heading);font-size:1.5rem;font-weight:700;display:flex;gap:2px} .logo-loop{color:var(--text-primary)} .logo-lab{color:var(--color-electric-blue)} .logo-360{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .nav-links{display:flex;align-items:center;gap:var(--space-xl)} .nav-links a{font-size:0.9375rem;font-weight:500;color:var(--text-secondary);transition:var(--transition-fast)} .nav-links a:hover{color:var(--color-electric-blue)} .nav-cta{padding:var(--space-xs) var(--space-md) !important;background:var(--gradient-primary);color:var(--color-white) !important;border-radius:var(--radius-full)} .nav-cta:hover{transform:scale(1.05)} .mobile-menu-btn{display:none;flex-direction:column;gap:6px;padding:var(--space-xs)} .mobile-menu-btn span{display:block;width:28px;height:2px;background:var(--text-primary);transition:var(--transition-base)} .mobile-menu-btn.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)} .mobile-menu-btn.active span:nth-child(2){opacity:0} .mobile-menu-btn.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)} @media (max-width:900px){.mobile-menu-btn{display:flex} .nav-links{position:fixed;top:0;right:-100%;width:100%;height:100vh;background:var(--color-white);flex-direction:column;justify-content:center;gap:var(--space-lg);transition:var(--transition-base)} .nav-links.active{right:0} .nav-links a{font-size:1.5rem} } .hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:var(--space-3xl) 0;overflow:hidden;background:var(--color-white)} .hero-bg{position:absolute;inset:0;z-index:0} .loop-animation{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)} .loop-ring{position:absolute;border:1px solid rgba(0,212,255,0.3);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);animation:pulse 4s ease-in-out infinite} .loop-ring-1{width:300px;height:300px;border-color:rgba(0,212,255,0.4);animation-delay:0s} .loop-ring-2{width:500px;height:500px;border-color:rgba(123,44,255,0.3);animation-delay:1s} .loop-ring-3{width:700px;height:700px;border-color:rgba(57,255,20,0.2);animation-delay:2s} .loop-ring-4{width:900px;height:900px;border-color:rgba(0,0,0,0.05);animation-delay:3s} @keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1} 50%{transform:translate(-50%,-50%) scale(1.05);opacity:0.7} } .gradient-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.15;animation:float 20s ease-in-out infinite} .gradient-orb-1{width:400px;height:400px;background:var(--color-electric-blue);top:10%;left:10%;animation-delay:0s} .gradient-orb-2{width:300px;height:300px;background:var(--color-cyber-purple);top:60%;right:10%;animation-delay:5s} .gradient-orb-3{width:350px;height:350px;background:var(--color-neon-green);bottom:10%;left:30%;opacity:0.1;animation-delay:10s} @keyframes float{0%,100%{transform:translate(0,0) rotate(0deg)} 25%{transform:translate(30px,-30px) rotate(10deg)} 50%{transform:translate(-20px,20px) rotate(-5deg)} 75%{transform:translate(20px,10px) rotate(5deg)} } .hero-content{text-align:center;max-width:1000px;padding:0 var(--space-lg);z-index:1} .hero-tagline{font-size:0.9375rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--color-electric-blue);margin-bottom:var(--space-lg)} .hero-title{font-size:clamp(3rem,10vw,7rem);font-weight:700;line-height:1.1;margin-bottom:var(--space-lg);color:var(--text-primary)} .title-line{display:block} .hero-subtitle{font-size:clamp(1.125rem,2vw,1.375rem);color:var(--text-secondary);max-width:600px;margin:0 auto var(--space-xl)} .hero-ctas{display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap} .scroll-indicator{position:absolute;bottom:var(--space-xl);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);animation:bounce 2s ease-in-out infinite;z-index:1} .mouse{width:26px;height:40px;border:2px solid var(--text-secondary);border-radius:20px;position:relative} .wheel{width:4px;height:8px;background:var(--color-electric-blue);border-radius:2px;position:absolute;top:8px;left:50%;transform:translateX(-50%);animation:scroll 2s ease-in-out infinite} @keyframes scroll{0%,100%{transform:translateX(-50%) translateY(0);opacity:1} 50%{transform:translateX(-50%) translateY(10px);opacity:0} } .scroll-indicator span{font-size:0.75rem;color:var(--text-secondary);letter-spacing:0.1em;text-transform:uppercase} @keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-10px)} } .about{padding:var(--space-3xl) 0;background:var(--color-white)} .about-statement{font-size:clamp(1.25rem,3vw,1.75rem);text-align:center;max-width:900px;margin:0 auto var(--space-2xl);color:var(--text-secondary);line-height:1.7} .about-statement strong{color:var(--color-blue-dark)} .about-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-lg)} .about-card{padding:var(--space-xl);text-align:center;background:var(--color-lighter-gray);border:1px solid transparent} .about-card:hover{background:var(--color-white);border-color:var(--color-electric-blue)} .card-icon{width:80px;height:80px;margin:0 auto var(--space-md)} .card-icon svg{width:100%;height:100%} .about-card h3{font-size:1.375rem;margin-bottom:var(--space-sm);color:var(--text-primary)} .about-card p{color:var(--text-secondary)} .services{padding:var(--space-3xl) 0;background:var(--color-lighter-gray)} .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-lg)} .service-card{padding:var(--space-xl);position:relative;overflow:hidden;background:var(--color-white);border:1px solid rgba(0,0,0,0.05)} .service-number{font-family:var(--font-heading);font-size:4rem;font-weight:700;position:absolute;top:var(--space-md);right:var(--space-md);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:0.1} .service-icon{width:64px;height:64px;margin-bottom:var(--space-md);color:var(--color-electric-blue)} .service-icon svg{width:100%;height:100%;stroke-width:1.5} .service-card h3{font-size:1.375rem;margin-bottom:var(--space-sm);color:var(--text-primary)} .service-card p{color:var(--text-secondary);margin-bottom:var(--space-md)} .service-tags{display:flex;flex-wrap:wrap;gap:var(--space-xs)} .service-tags span{font-size:0.75rem;padding:4px 12px;background:rgba(0,212,255,0.05);border:1px solid rgba(0,212,255,0.3);border-radius:var(--radius-full);color:var(--color-blue-dark)} .work{padding:var(--space-3xl) 0;background:var(--color-white)} .work-filters{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-xl)} .filter-btn{padding:var(--space-xs) var(--space-md);font-size:0.875rem;font-weight:500;color:var(--text-secondary);border:1px solid rgba(0,0,0,0.1);border-radius:var(--radius-full);transition:var(--transition-base)} .filter-btn:hover,.filter-btn.active{color:var(--color-electric-blue);background:rgba(0,212,255,0.05);border-color:var(--color-electric-blue)} .work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-lg)} .work-item{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;background:#f0f0f0} .work-item-wide{grid-column:span 2;aspect-ratio:2/1} @media (max-width:768px){.work-item-wide{grid-column:span 1;aspect-ratio:4/3} } .work-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transition:var(--transition-slow)} .work-placeholder svg{width:40%;height:40%;opacity:0.7} .work-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.8) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--space-lg);opacity:0;transform:translateY(20px);transition:var(--transition-base);color:white} .work-item:hover .work-overlay{opacity:1;transform:translateY(0)} .work-item:hover .work-image{transform:scale(1.1)} .work-category{font-size:0.75rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-blue-dark);margin-bottom:var(--space-xs)} .work-overlay h3{font-size:1.5rem;margin-bottom:var(--space-xs);color:white} .work-overlay p{color:rgba(255,255,255,0.8);font-size:0.9375rem} .philosophy{padding:var(--space-3xl) 0;position:relative;overflow:hidden;background:var(--color-lighter-gray)} .philosophy-bg{position:absolute;inset:0;z-index:0} .floating-shapes .shape{position:absolute;border-radius:50%;filter:blur(100px);opacity:0.1} .shape-1{width:500px;height:500px;background:var(--color-cyber-purple);top:-200px;left:-200px} .shape-2{width:400px;height:400px;background:var(--color-electric-blue);bottom:-200px;right:-200px} .shape-3{width:300px;height:300px;background:var(--color-neon-green);top:50%;left:50%;transform:translate(-50%,-50%);opacity:0.05} .philosophy-content{position:relative;z-index:1;text-align:center} .philosophy-quote{font-family:var(--font-heading);font-size:clamp(1.5rem,4vw,2.5rem);font-weight:600;line-height:1.4;max-width:1000px;margin:0 auto var(--space-2xl);color:var(--text-primary)} .quote-mark{font-size:3em;line-height:0;vertical-align:middle;opacity:0.2;color:var(--color-electric-blue)} .philosophy-loop{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-md)} .loop-step{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)} .step-icon{font-size:2rem} .loop-step span{font-family:var(--font-heading);font-weight:500;font-size:0.9375rem;color:var(--text-secondary)} .loop-arrow{font-size:1.5rem;color:var(--color-electric-blue)} .loop-return{font-size:2rem;color:var(--color-neon-green)} .why-us{padding:var(--space-3xl) 0;background:var(--color-white)} .why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-lg)} .why-card{padding:var(--space-xl);background:var(--color-lighter-gray);border-radius:var(--radius-lg)} .why-icon{width:48px;height:48px;margin-bottom:var(--space-md)} .why-icon svg{width:100%;height:100%} .why-card h3{font-size:1.25rem;margin-bottom:var(--space-sm);color:var(--text-primary)} .why-card p{color:var(--text-secondary);font-size:0.9375rem} .cta{padding:var(--space-3xl) 0;position:relative;overflow:hidden;background:var(--color-white)} .cta-bg{position:absolute;inset:0;z-index:0} .cta-gradient{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(123,44,255,0.1) 0%,transparent 70%)} .cta-content{position:relative;z-index:1;text-align:center;max-width:800px;margin:0 auto} .cta-title{font-size:clamp(2.5rem,6vw,4rem);margin-bottom:var(--space-md);color:var(--text-primary)} .cta-subtitle{font-size:1.125rem;color:var(--text-secondary);margin-bottom:var(--space-xl);line-height:1.7} .cta-buttons{display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap} .footer{padding:var(--space-2xl) 0 var(--space-lg);background:var(--color-lighter-gray);border-top:1px solid rgba(0,0,0,0.05)} .footer-content{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-xl);margin-bottom:var(--space-xl)} @media (max-width:900px){.footer-content{grid-template-columns:1fr 1fr} } @media (max-width:600px){.footer-content{grid-template-columns:1fr;text-align:center} } .footer-brand .logo{margin-bottom:var(--space-sm)} .footer-tagline{color:var(--text-secondary);font-size:0.9375rem;margin-bottom:var(--space-xs)} .footer-location{color:var(--text-tertiary);font-size:0.875rem} .footer-col h4,.footer-social h4{font-size:0.875rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-primary);margin-bottom:var(--space-md)} .footer-col a{display:block;color:var(--text-secondary);font-size:0.9375rem;padding:var(--space-xs) 0;transition:var(--transition-fast)} .footer-col a:hover{color:var(--color-electric-blue)} .social-icons{display:flex;gap:var(--space-sm)} @media (max-width:600px){.social-icons{justify-content:center} } .logo-img{height:40px;width:auto;border-radius:var(--radius-md);filter:saturate(1.2) brightness(1.1);transition:var(--transition-base);margin-right:var(--space-xs)} .social-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,0.1);border-radius:var(--radius-md);color:var(--text-secondary);transition:var(--transition-base)} .social-icon svg{width:20px;height:20px} .social-icon:hover{background:var(--color-white);border-color:var(--color-electric-blue);color:var(--color-electric-blue)} .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-lg);border-top:1px solid rgba(0,0,0,0.05);color:var(--text-tertiary);font-size:0.875rem} @media (max-width:600px){.footer-bottom{flex-direction:column;gap:var(--space-sm);text-align:center} } .whatsapp-fab{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));right:calc(18px + env(safe-area-inset-right,0px));width:64px;height:64px;border-radius:50%;background:var(--color-whatsapp);color:white;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(37,211,102,0.35);z-index:var(--z-modal);transform:translateZ(0);transition:transform var(--transition-base),box-shadow var(--transition-base),opacity var(--transition-base);cursor:pointer} .whatsapp-icon svg{width:28px;height:28px;display:block} .whatsapp-fab:hover,.whatsapp-fab:focus-visible{transform:translateY(-4px) scale(1.03);box-shadow:0 16px 40px rgba(37,211,102,0.45)} .whatsapp-tooltip{position:absolute;right:82px;padding:0.5rem 0.75rem;background:rgba(0,0,0,0.85);color:white;border-radius:var(--radius-md);font-size:0.85rem;white-space:nowrap;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity var(--transition-fast),transform var(--transition-fast)} .whatsapp-fab:hover .whatsapp-tooltip,.whatsapp-fab:focus-visible .whatsapp-tooltip{opacity:1;transform:translateY(0)} .whatsapp-hidden{opacity:0;pointer-events:none;transform:translateY(20px)} @media (max-width:768px){.whatsapp-fab{width:56px;height:56px;bottom:calc(14px + env(safe-area-inset-bottom,0px));right:calc(14px + env(safe-area-inset-right,0px))} .whatsapp-tooltip{display:none} } @media (max-width:480px){.whatsapp-fab{width:52px;height:52px} } @media (max-width:480px){.hero-title{font-size:2.5rem} .section-title{font-size:2rem} .about-statement{font-size:1.125rem} .philosophy-quote{font-size:1.25rem} .btn{padding:0.75rem 1.25rem;font-size:0.9375rem} .btn-large{padding:1rem 1.5rem;font-size:1rem} } @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important} html{scroll-behavior:auto} }:focus-visible{outline:2px solid var(--color-electric-blue);outline-offset:4px}::selection{background:var(--color-electric-blue);color:white} .footer-legal-links{display:flex;gap:var(--space-sm);align-items:center} .footer-legal-links a{color:var(--text-tertiary);font-size:0.875rem;transition:var(--transition-fast)} .footer-legal-links a:hover{color:var(--color-electric-blue);text-decoration:underline} .footer-legal-links .divider{color:var(--text-tertiary);opacity:0.5} @media (max-width:600px){.footer-legal-links{order:2;margin:var(--space-xs) 0} } .mobile-sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:2000;background:rgba(255,255,255,0.98);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(0,0,0,0.05);padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 20px rgba(0,0,0,0.05);transform:translateY(100%);transition:transform 0.3s cubic-bezier(0.16,1,0.3,1)} .mobile-sticky-cta.active{transform:translateY(0)} .sticky-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:var(--radius-full);font-size:0.9375rem;font-weight:600;text-decoration:none;transition:transform 0.2s ease} .sticky-btn:active{transform:scale(0.96)} .sticky-whatsapp{background:#25D366;color:white;margin-right:8px} .sticky-project{background:var(--color-electric-blue);color:white;margin-left:8px} .sticky-btn svg{display:block} @media (max-width:768px){.mobile-sticky-cta{display:flex;justify-content:space-between} .whatsapp-fab{display:none !important} .footer{padding-bottom:80px} }