:root{--bg-black: #050505;--bg-deep: #000000;--electric-blue: #e8e8e8;--neon-blue: #d4af37;--neon-purple: #c5a059;--dark-purple: #8b733b;--silver-liquid: #e0e0e0;--text-white: #ffffff;--text-gray: #a0a0a5;--glass-bg: rgba(10, 10, 10, .45);--glass-border: rgba(255, 255, 255, .08);--glass-glow-blue: rgba(255, 255, 255, .03);--glass-glow-purple: rgba(212, 175, 55, .03);--font-inter: "Inter", sans-serif;--font-orbitron: "Syne", sans-serif;--transition-premium: all .6s cubic-bezier(.16, 1, .3, 1)}*{margin:0;padding:0;box-sizing:border-box;cursor:none}@media (pointer: coarse){*{cursor:auto!important}}html,body{background-color:var(--bg-black);color:var(--text-white);font-family:var(--font-inter);overflow-x:hidden;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-black)}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--electric-blue)}.custom-cursor{width:30px;height:30px;border:2px solid var(--electric-blue);border-radius:50%;position:fixed;transform:translate(-50%,-50%);pointer-events:none;z-index:9999;transition:width .3s,height .3s,border-color .3s,background-color .3s;mix-blend-mode:screen}.custom-cursor-dot{width:6px;height:6px;background-color:var(--neon-purple);border-radius:50%;position:fixed;transform:translate(-50%,-50%);pointer-events:none;z-index:9999;transition:background-color .3s}.custom-cursor.hovered{width:60px;height:60px;background-color:#00e5ff1a;border-color:var(--neon-purple)}.custom-cursor-dot.hovered{background-color:var(--electric-blue)}#webgl-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1;pointer-events:none}.ambient-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none;background:radial-gradient(circle at 10% 20%,rgba(0,85,255,.05) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(123,31,162,.07) 0%,transparent 45%),radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.8) 100%)}.scroll-container{position:relative;z-index:3;width:100%}.section{min-height:100vh;width:100%;position:relative;padding:100px 8% 80px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.text-gradient{background:linear-gradient(135deg,var(--electric-blue) 0%,var(--neon-purple) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.font-orbitron{font-family:var(--font-orbitron);letter-spacing:2px}.text-glow{text-shadow:0 0 15px rgba(255,255,255,.1)}.text-glow-purple{text-shadow:0 0 15px rgba(212,175,55,.1);letter-spacing:4px;color:var(--neon-purple)}.text-muted{color:var(--text-gray);font-weight:300}.main-header{position:fixed;top:0;left:0;width:100%;padding:25px 8%;display:flex;justify-content:space-between;align-items:center;z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--glass-border);background:#03030366}.header-logo{font-family:var(--font-orbitron);font-size:1.5rem;font-weight:900;letter-spacing:1px}.nav-links{display:flex;align-items:center;gap:30px}.nav-link{color:var(--text-gray);text-decoration:none;font-size:.9rem;font-weight:600;text-transform:uppercase;transition:var(--transition-premium);position:relative}.nav-link:hover,.nav-link.active{color:var(--text-white)}.nav-link:after{content:"";position:absolute;bottom:-6px;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--electric-blue),var(--neon-purple));transition:var(--transition-premium)}.nav-link:hover:after,.nav-link.active:after{width:100%}.btn-header-cta{padding:10px 22px;background:linear-gradient(135deg,#00e5ff1a,#d500f91a);border:1px solid var(--glass-border);border-radius:30px;font-size:.85rem!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-header-cta:hover{border-color:var(--electric-blue);box-shadow:0 0 15px #00e5ff33}.btn-header-cta:after{display:none}.hero-section{padding-top:150px;position:relative;z-index:4}.video-bg-container{position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:hidden;z-index:0}.hero-video{width:100%;height:100%;object-fit:cover;opacity:.35;filter:saturate(1.2) contrast(1.1)}.video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,transparent 30%,var(--bg-black) 90%),linear-gradient(0deg,var(--bg-black) 0%,transparent 30%,transparent 70%,var(--bg-black) 100%)}.hero-content{max-width:800px;z-index:5}.hero-subtitle{font-size:.9rem;font-weight:800;margin-bottom:20px;color:var(--electric-blue)}.hero-title{font-size:4.5rem;line-height:1.1;font-weight:900;margin-bottom:30px}.hero-description{font-size:1.2rem;line-height:1.6;margin-bottom:45px;max-width:600px}.scroll-indicator-container{display:flex;flex-direction:column;align-items:flex-start;gap:15px}.scroll-text{font-size:.8rem;letter-spacing:3px;color:var(--text-gray);font-weight:600}.scroll-indicator{width:28px;height:48px;border:2px solid var(--text-gray);border-radius:20px;position:relative;display:flex;justify-content:center}.scroll-dot{width:6px;height:10px;background:linear-gradient(to bottom,var(--electric-blue),var(--neon-purple));border-radius:3px;position:absolute;top:8px;animation:scrollMove 2s infinite ease-in-out}@keyframes scrollMove{0%{transform:translateY(0);opacity:1}50%{transform:translateY(18px);opacity:.3}to{transform:translateY(0);opacity:1}}.section-header{text-align:center;margin-bottom:60px}.section-title{font-size:2.8rem;font-family:var(--font-orbitron);font-weight:900;margin-bottom:15px}.section-desc{font-size:1.1rem;color:var(--text-gray);font-weight:300}.services-section{background:transparent;z-index:5}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;width:100%}.service-card{height:500px;perspective:1000px}.card-inner{position:relative;width:100%;height:100%;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:24px;overflow:hidden;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);transition:border-color .5s ease;transform-style:preserve-3d}.service-card:hover .card-inner{border-color:#00e5ff66}.card-image-wrapper{width:100%;height:45%;position:relative;overflow:hidden}.card-image{width:100%;height:100%;object-fit:cover;filter:grayscale(30%) contrast(1.1);transition:var(--transition-premium);transform:scale(1.05)}.service-card:hover .card-image{transform:scale(1.15) rotate(1deg);filter:grayscale(0%) contrast(1.15)}.card-image-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent 30%,var(--bg-black) 100%)}.card-content{padding:30px;height:55%;display:flex;flex-direction:column;justify-content:space-between;transform:translateZ(30px)}.card-icon{font-size:2rem;margin-bottom:15px}.card-content h3{font-family:var(--font-orbitron);font-size:1.35rem;font-weight:700;margin-bottom:10px;color:var(--text-white)}.card-content p{font-size:.95rem;color:var(--text-gray);line-height:1.5;margin-bottom:15px}.card-action{font-size:.9rem;font-weight:700;color:var(--electric-blue);display:flex;align-items:center;gap:8px;transition:var(--transition-premium);margin-top:auto}.service-card:hover .card-action{color:var(--neon-purple);transform:translate(5px)}.card-glow{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),rgba(255,255,255,.06) 0%,transparent 60%);pointer-events:none}.reveal-section{z-index:5}.reveal-container-wrapper{display:flex;justify-content:center;align-items:center;width:100%}.reveal-container{position:relative;width:1000px;height:550px;border-radius:32px;overflow:hidden;box-shadow:0 25px 60px #000c,0 0 40px #00e5ff1a;border:1px solid var(--glass-border)}.image-box{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.reveal-img{width:1000px;height:550px;object-fit:cover;display:block;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}.after-image-box{width:100%;clip-path:inset(0 50% 0 0);z-index:2}.badge{position:absolute;bottom:25px;padding:8px 18px;background:#000000b3;border:1px solid rgba(255,255,255,.1);border-radius:20px;font-family:var(--font-orbitron);font-size:.8rem;font-weight:700;color:var(--text-white);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:5;pointer-events:none;transition:opacity .2s ease-out,transform .2s ease-out,filter .2s ease-out}.before-badge{right:25px;border-color:var(--neon-purple);box-shadow:0 0 10px #d500f933}.after-badge{left:25px;border-color:var(--electric-blue);box-shadow:0 0 10px #00e5ff33}.reveal-handle{position:absolute;top:0;left:50%;height:100%;width:4px;background:linear-gradient(to bottom,var(--electric-blue),var(--neon-purple));z-index:10;transform:translate(-50%);cursor:ew-resize;box-shadow:0 0 15px #00e5ffcc}.testimonials-section{z-index:5}.testimonials-slider{display:flex;justify-content:center;gap:40px;width:100%;flex-wrap:wrap}.glass-panel{background:#0a0a1473;border:1px solid var(--glass-border);border-radius:32px;padding:45px;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);box-shadow:0 30px 60px #0006,inset 0 1px #ffffff1a;position:relative;overflow:hidden}.glass-panel:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(125deg,transparent 35%,rgba(255,255,255,.03) 40%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 60%,transparent 65%);transform:rotate(25deg);animation:glassShine 10s infinite linear;pointer-events:none}@keyframes glassShine{0%{transform:translate(-30%,-30%) rotate(25deg)}to{transform:translate(30%,30%) rotate(25deg)}}.testimonial-card{flex:1;max-width:680px;min-width:320px;transition:var(--transition-premium);cursor:pointer}.testimonials-slider:hover .testimonial-card:not(:hover){opacity:.55;transform:scale(.97) translateY(5px);filter:brightness(.6) blur(.5px)}.testimonial-card:hover{transform:translateY(-12px) scale(1.02);border-color:#c5a0598c;box-shadow:0 40px 80px #000000b3,0 0 30px #c5a05926}.testimonial-rating{color:var(--electric-blue);font-size:.95rem;margin-bottom:25px}.testimonial-text{font-size:1.1rem;line-height:1.7;color:var(--text-white);font-style:italic;font-weight:300;margin-bottom:35px}.testimonial-author{display:flex;align-items:center;gap:20px}.author-avatar{width:60px;height:60px;border-radius:50%;background-size:cover;background-position:center;border:2px solid var(--glass-border)}.testimonial-card:hover .author-avatar{border-color:var(--neon-purple)}.author-info h4{font-size:1.1rem;font-weight:700;color:var(--text-white);margin-bottom:4px}.author-info span{font-size:.85rem;color:var(--text-gray);font-weight:500}.cta-section{align-items:center;text-align:center;padding-bottom:20px;z-index:5}.cta-logo-container{margin-bottom:50px}.cta-logo-glow{width:150px;height:150px;border-radius:50%;background:#000c;display:flex;justify-content:center;align-items:center;position:relative;padding:10px;border:2px solid rgba(255,255,255,.1);box-shadow:0 0 50px #00e5ff26;transition:var(--transition-premium)}.cta-logo-img{width:100%;height:100%;object-fit:cover;border-radius:50%}.cta-logo-glow:before{content:"";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border-radius:50%;background:linear-gradient(135deg,var(--electric-blue),var(--neon-purple));z-index:-1;opacity:.5;filter:blur(10px);animation:rotateGlow 6s infinite linear}@keyframes rotateGlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cta-content{max-width:700px}.cta-title{font-size:2.8rem;font-family:var(--font-orbitron);font-weight:900;line-height:1.2;margin-bottom:25px;background:linear-gradient(135deg,var(--text-white) 30%,var(--electric-blue) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.cta-desc{font-size:1.15rem;margin-bottom:45px}.btn-whatsapp{display:inline-flex;align-items:center;gap:12px;padding:18px 45px;background:#25d366;border:none;border-radius:50px;font-family:var(--font-orbitron);font-size:1rem;font-weight:900;color:var(--text-white);text-decoration:none;letter-spacing:1px;box-shadow:0 15px 30px #25d3664d,0 0 20px #25d36633;transition:var(--transition-premium);position:relative;overflow:hidden}.btn-whatsapp:after{content:"";position:absolute;top:-50%;width:200%;height:200%;background:linear-gradient(to right,transparent,rgba(255,255,255,.2),transparent);transform:rotate(30deg);transition:.8s;left:-150%}.btn-whatsapp:hover:after{left:150%}.btn-whatsapp:hover{transform:scale(1.05) translateY(-3px);box-shadow:0 20px 40px #25d36666,0 0 30px #25d36666;background:#20ba59}.mini-footer{margin-top:100px;width:100%;border-top:1px solid var(--glass-border);padding-top:30px;font-size:.85rem;color:#ffffff4d}.service-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1000;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;pointer-events:none}.service-modal-overlay.active{opacity:1;visibility:visible;pointer-events:all}.service-modal-content{width:90%;max-width:600px;background:#0a0a14b3;border:1px solid rgba(0,229,255,.3);border-radius:24px;padding:40px;position:relative;transform:translateY(30px) scale(.95);box-shadow:0 40px 100px #000c,0 0 40px #00e5ff1a}.modal-close{position:absolute;top:20px;right:20px;background:transparent;border:none;color:var(--text-gray);font-size:1.5rem;cursor:pointer;transition:var(--transition-premium);z-index:10}.modal-close:hover{color:var(--neon-purple);transform:rotate(90deg)}.modal-header{display:flex;align-items:center;gap:15px;margin-bottom:25px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:15px}.modal-icon{font-size:2.2rem}.modal-header h3{font-family:var(--font-orbitron);font-size:1.8rem;color:var(--text-white)}.modal-body{margin-bottom:30px}.modal-section{margin-bottom:20px}.modal-section h4{font-size:1.1rem;margin-bottom:10px}.modal-section ul{list-style:none;padding:0}.modal-section ul li{position:relative;padding-left:20px;margin-bottom:8px;color:var(--text-gray);font-size:.95rem}.modal-section ul li:before{content:"▹";position:absolute;left:0;color:var(--electric-blue)}.modal-section p{color:var(--text-white);font-size:1rem;font-weight:600}.modal-footer{display:flex;justify-content:center}.gallery-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000e6;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);z-index:1500;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;pointer-events:none}.gallery-modal.active{opacity:1;visibility:visible;pointer-events:all}.gallery-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%}.gallery-modal-content{width:95%;max-width:1000px;height:80vh;background:#0a0a1480;border:1px solid rgba(213,0,249,.3);border-radius:24px;padding:20px;position:relative;transform:translateY(30px) scale(.95);box-shadow:0 40px 100px #000000e6,0 0 60px #d500f926;display:flex;flex-direction:column}.gallery-modal-close{position:absolute;top:20px;right:20px;background:#00000080;border:1px solid rgba(255,255,255,.2);border-radius:50%;width:40px;height:40px;color:var(--text-white);font-size:1.2rem;cursor:pointer;transition:var(--transition-premium);z-index:20;display:flex;justify-content:center;align-items:center}.gallery-modal-close:hover{background:var(--neon-purple);border-color:var(--neon-purple);transform:rotate(90deg)}.carousel-container{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:16px;margin-top:30px}.carousel-track-container{width:100%;height:100%;overflow:hidden;position:relative}.carousel-track{display:flex;height:100%;transition:transform .5s cubic-bezier(.65,0,.35,1)}.carousel-slide{min-width:100%;height:100%;display:flex;justify-content:center;align-items:center}.carousel-slide img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 10px 30px #00000080}.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:#0009;border:1px solid rgba(255,255,255,.1);color:#fff;width:50px;height:50px;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:10;font-size:1.2rem;transition:var(--transition-premium);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.carousel-btn:hover{background:var(--electric-blue);border-color:var(--electric-blue);box-shadow:0 0 15px #00e5ff80}.prev-btn{left:20px}.next-btn{right:20px}.carousel-nav{display:flex;justify-content:center;gap:10px;margin-top:20px;padding-bottom:10px}.carousel-dot{width:10px;height:10px;border-radius:50%;background:#fff3;border:none;cursor:pointer;transition:.3s}.carousel-dot.active{background:var(--electric-blue);box-shadow:0 0 10px var(--electric-blue);transform:scale(1.2)}.gallery-client-name{position:absolute;top:25px;left:30px;font-family:var(--font-orbitron);color:var(--text-white);font-size:1.2rem;margin:0}.btn-gallery{margin-top:20px;padding:10px 20px;background:transparent;border:1px solid rgba(213,0,249,.4);border-radius:20px;color:var(--text-white);font-family:var(--font-orbitron);font-size:.85rem;cursor:pointer;transition:var(--transition-premium);display:flex;align-items:center;gap:8px;width:max-content}.btn-gallery:hover{background:#d500f91a;border-color:var(--neon-purple);box-shadow:0 0 15px #d500f94d;transform:translateY(-2px)}.lead-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000d9;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);z-index:2000;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:var(--transition-premium)}.lead-modal-overlay.active{opacity:1;visibility:visible;pointer-events:all}.lead-modal-content{width:90%;max-width:500px;background:#0f0f19b3;border:1px solid rgba(213,0,249,.3);border-radius:24px;padding:40px;position:relative;transform:translateY(30px) scale(.95);box-shadow:0 40px 100px #000000e6,0 0 50px #d500f926;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}.lead-modal-overlay.active .lead-modal-content{transform:translateY(0) scale(1)}.glass-input{width:100%;padding:15px 20px;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;color:var(--text-white);font-family:var(--font-inter);font-size:1rem;transition:var(--transition-premium);outline:none}.glass-input:focus{background:#ffffff0f;border-color:var(--electric-blue);box-shadow:0 0 15px #00e5ff33}.glass-input::placeholder{color:#ffffff4d}.preloader{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--bg-black);z-index:9999;display:flex;justify-content:center;align-items:center;flex-direction:column;overflow:hidden}.preloader-content{display:flex;flex-direction:column;align-items:center;gap:30px;max-width:90vw;padding:0 20px;box-sizing:border-box}.preloader-logo{font-family:var(--font-orbitron);font-size:2.5rem;font-weight:900;letter-spacing:2px;animation:pulseLogo 2s infinite ease-in-out}@keyframes pulseLogo{0%{opacity:.7;text-shadow:0 0 10px rgba(0,229,255,.2)}50%{opacity:1;text-shadow:0 0 30px rgba(0,229,255,.8),0 0 40px rgba(213,0,249,.6)}to{opacity:.7;text-shadow:0 0 10px rgba(0,229,255,.2)}}.preloader-loader{width:200px;height:2px;background:#ffffff1a;border-radius:2px;overflow:hidden;position:relative}.preloader-bar{position:absolute;top:0;left:0;height:100%;width:0%;background:linear-gradient(90deg,var(--electric-blue),var(--neon-purple));box-shadow:0 0 15px var(--electric-blue);animation:loadingBar 2s infinite cubic-bezier(.65,0,.35,1)}@keyframes loadingBar{0%{left:-50%;width:30%}to{left:100%;width:100%}}.preloader-text{font-family:var(--font-orbitron);font-size:.8rem;color:var(--text-gray);letter-spacing:2px;text-transform:uppercase;animation:blinkText 1.5s infinite}@keyframes blinkText{0%,to{opacity:.3}50%{opacity:1}}@media (max-width: 1200px){.reveal-container,.reveal-img{width:800px;height:440px}}@media (max-width: 992px){.services-grid{grid-template-columns:1fr;gap:40px}.service-card{height:450px}.hero-title{font-size:3.2rem}.reveal-container,.reveal-img{width:600px;height:330px}}@media (max-width: 768px){.nav-links{display:none}.main-header{justify-content:center}.section{padding:80px 5% 60px}.hero-title{font-size:clamp(1.8rem,8vw,2.5rem);word-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.section-title{font-size:clamp(1.5rem,7vw,2.2rem);word-wrap:break-word}.reveal-container,.reveal-img{width:100%;height:250px}.badge{font-size:.65rem;padding:5px 10px}.glass-panel{padding:30px}.btn-whatsapp{padding:15px 30px;font-size:.85rem}.cta-title{font-size:clamp(1.4rem,6vw,2rem);word-wrap:break-word}.gallery-client-name{font-size:.9rem;top:28px;left:20px;max-width:65%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gallery-modal-close{top:15px;right:15px;width:35px;height:35px;font-size:1rem}.preloader-logo{font-size:clamp(1.2rem,6.5vw,2.5rem);text-align:center;display:flex;flex-wrap:wrap;justify-content:center;gap:5px;width:100%;padding:0 10px}.preloader-text{font-size:.65rem;letter-spacing:1px;text-align:center;padding:0 10px;width:100%;word-wrap:break-word}}.johnhat-signature{font-size:.8rem;color:var(--text-gray);margin-top:8px;font-weight:300}.johnhat-signature a{color:var(--text-gray);text-decoration:none;transition:var(--transition-premium)}.johnhat-signature a:hover{color:var(--electric-blue);text-decoration:underline}.hero-conceptual-attribution{font-size:.75rem;color:var(--silver-liquid);opacity:.7;margin-bottom:15px;letter-spacing:.5px;font-weight:300}.hero-conceptual-attribution a{color:var(--neon-purple);text-decoration:none;transition:var(--transition-premium)}.hero-conceptual-attribution a:hover{color:var(--text-white);opacity:1}