:root{--primary-blue: #0f172a;--accent-turquoise: #2dd4bf;--accent-purple: #8b5cf6;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--text-color: #ffffff}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}body{font-family:Outfit,sans-serif;background-color:var(--primary-blue);color:var(--text-color);height:100vh;overflow-x:hidden;overflow-y:auto;scroll-behavior:smooth}.section{width:100vw;min-height:100vh;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden;contain:layout style}.parallax-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-2;overflow:hidden;background:var(--primary-blue)}.bg-layer{position:absolute;top:-10%;left:-10%;width:120%;height:120%;pointer-events:none;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}#layer1{background:radial-gradient(circle at 30% 40%,rgba(45,212,191,.15) 0%,transparent 50%);filter:blur(60px)}#layer2{background:radial-gradient(circle at 70% 60%,rgba(139,92,246,.12) 0%,transparent 60%);filter:blur(80px)}#layer3{background:radial-gradient(circle at 50% 50%,rgba(45,212,191,.05) 0%,transparent 70%);filter:blur(40px)}.grid-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(var(--glass-border) 1px,transparent 1px),linear-gradient(90deg,var(--glass-border) 1px,transparent 1px);background-size:50px 50px;opacity:.1;z-index:-1}.no-pointer-events{pointer-events:none}.pointer-cursor{cursor:pointer}header{margin-top:2rem;text-align:center;z-index:10}h1{font-size:3rem;letter-spacing:.15em;text-transform:uppercase;margin:0;background:linear-gradient(90deg,#fff,#2dd4bf,#fff);background-size:200% auto;color:transparent;-webkit-background-clip:text;background-clip:text;animation:shimmer 4s linear infinite}@keyframes shimmer{to{background-position:200% center}}.subtitle{font-size:1rem;color:var(--accent-turquoise);opacity:.8;margin-top:.5rem}.container{flex:1;display:flex;justify-content:center;align-items:center;width:100%;max-width:1200px;margin:0 auto;position:relative;gap:4rem;padding:0 2rem}.side-column{display:flex;flex-direction:column;gap:2rem;z-index:2;align-items:center}.bubble{width:90px;height:90px;border-radius:50%;background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;cursor:grab;transition:transform .2s,box-shadow .3s;position:relative;box-shadow:0 4px 15px #0003;overflow:visible;animation:liquid-wave 8s ease-in-out infinite,float 6s ease-in-out infinite;outline:none;will-change:transform,border-radius;backface-visibility:hidden;transform:translateZ(0)}.bubble:focus-visible{box-shadow:0 0 0 3px var(--accent-turquoise),0 4px 15px #0006}.bubble:after{content:attr(data-title);position:absolute;bottom:-35px;left:50%;transform:translate(-50%) translateY(10px);background:#0f172ae6;border:1px solid var(--glass-border);padding:4px 12px;border-radius:20px;font-size:.75rem;color:#fff;white-space:nowrap;opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.34,1.56,.64,1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 12px #0000004d;z-index:100}.bubble:hover:after,.bubble:focus-visible:after{opacity:1;transform:translate(-50%) translateY(0)}.side-column:first-of-type .bubble:nth-child(1){transform:translate3d(-20px,0,0)}.side-column:first-of-type .bubble:nth-child(2){transform:translate3d(20px,10px,0)}.side-column:last-of-type .bubble:nth-child(1){transform:translate3d(20px,-10px,0)}.side-column:last-of-type .bubble:nth-child(2){transform:translate3d(-20px,15px,0)}.side-column:last-of-type .bubble:nth-child(3){transform:translate3d(10px,5px,0)}.bubble:nth-child(1){animation-delay:0s}.bubble:nth-child(2){animation-delay:-2s}.bubble:nth-child(3){animation-delay:-5s}.bubble:nth-child(4){animation-delay:-1.5s}.bubble:nth-child(5){animation-delay:-3s,-4s}@keyframes liquid-wave{0%{border-radius:50%}25%{border-radius:52% 48% 51% 49%/51% 48% 52% 49%}50%{border-radius:49% 51% 48% 52%/49% 51%}75%{border-radius:51% 49% 52% 48%/52% 49% 51% 48%}to{border-radius:50%}}@keyframes float{0%,to{transform:translateZ(0)}25%{transform:translate3d(3px,-5px,0)}50%{transform:translate3d(5px,0,0)}75%{transform:translate3d(-3px,5px,0)}}.bubble:hover{transform:scale(1.15) translate3d(calc(var(--wave-x, 0) * 15px),calc(var(--wave-y, 0) * 15px),0);border-color:var(--accent-turquoise);box-shadow:calc(var(--wave-x, 0) * 10px) calc(var(--wave-y, 0) * 10px) 25px #2dd4bf66,0 0 10px #2dd4bf33;z-index:10}.bubble:active{cursor:grabbing}.bubble.dragging{animation:none!important;transition:none!important}.bubble img{width:100%;height:100%;object-fit:cover;border-radius:50%;opacity:.7;transition:opacity .3s;pointer-events:none}.bubble:hover img{opacity:1}.core-wrapper{position:relative;width:350px;height:350px;display:flex;justify-content:center;align-items:center;flex-shrink:0}.magnetic-field{position:absolute;width:100%;height:100%;border-radius:50%;border:1px dashed rgba(45,212,191,.3);animation:rotate 20s linear infinite}.core{width:280px;height:280px;border-radius:50%;background:#0f172a99;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;transition:all .4s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 0 50px #0000004d;z-index:1;overflow:hidden;transform-origin:center center}.core h2{font-weight:300;font-size:1.5rem;margin-bottom:.5rem;pointer-events:none}.core p{font-size:.8rem;color:var(--accent-turquoise);letter-spacing:1px;text-transform:uppercase;pointer-events:none}.preview-overlay{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:#000;opacity:0;transform:scale(0);transition:all .5s ease;z-index:10}.core.show-preview .preview-overlay{opacity:1;transform:scale(1);border-radius:20px;width:100%;height:100%}.preview-content{width:100%;height:100%;object-fit:cover;border-radius:50%;transition:border-radius .5s ease}.core.show-preview .preview-content{border-radius:20px}.reset-btn{position:absolute;bottom:-60px;left:50%;padding:12px 28px;background:#ffffff26;color:#fff;border:2px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:30px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;font-size:.8rem;cursor:pointer;opacity:0;pointer-events:none;transition:all .4s cubic-bezier(.34,1.56,.64,1);transform:translate(-50%) translateY(30px) scale(.8);box-shadow:0 10px 30px #0006;z-index:20}.reset-btn:hover{background:#ffffff40;border-color:var(--accent-turquoise);box-shadow:0 0 30px #2dd4bf80;transform:translate(-50%) translateY(0) scale(1.1)}@keyframes btn-entrance{0%{opacity:0;transform:translate(-50%) translateY(30px) scale(.8)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}.core.show-preview{position:fixed;top:5vh;left:5vw;width:90vw;height:90vh;margin:0;transform:none;border-radius:20px;z-index:100;box-shadow:0 0 100px #000c,0 0 50px #2dd4bf33}.core.show-preview.mobile-preview{top:0;left:0;right:0;bottom:0;margin:auto;width:393px;height:852px;max-height:90vh;border-radius:40px}.core.show-preview.mobile-preview .preview-overlay,.core.show-preview.mobile-preview .preview-content{border-radius:40px}.core.show-preview .preview-overlay,.core.show-preview .preview-content{border-radius:20px}.core.show-preview~.reset-btn{position:fixed;bottom:40px;left:50%;opacity:1;pointer-events:all;animation:btn-entrance .6s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:.4s;z-index:2000}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse-ring{0%{transform:scale(.8);opacity:0}50%{opacity:.3}to{transform:scale(1.3);opacity:0}}@keyframes pulse-core{0%{transform:scale(1);box-shadow:0 0 20px #2dd4bf33,inset 0 0 10px #2dd4bf1a}50%{transform:scale(1.08);box-shadow:0 0 50px #2dd4bf66,inset 0 0 30px #2dd4bf33}to{transform:scale(1);box-shadow:0 0 20px #2dd4bf33,inset 0 0 10px #2dd4bf1a}}.magnetic-pulse{position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid var(--accent-turquoise);opacity:0;pointer-events:none}.core.active{border-color:var(--accent-turquoise);animation:pulse-core 1.5s infinite ease-in-out}.core.active .magnetic-pulse{animation:pulse-ring 1.5s infinite}.project-info{position:absolute;bottom:0;left:0;width:100%;padding:20px;background:linear-gradient(to top,rgba(15,23,42,.9),transparent);color:#fff;opacity:0;transform:translateY(20px);transition:all .5s ease .3s;text-align:left;border-bottom-left-radius:20px;border-bottom-right-radius:20px}.core.show-preview .project-info{opacity:1;transform:translateY(0)}.project-info h3{margin:0 0 5px;font-size:1.5rem;color:var(--accent-turquoise)}.project-info p{margin:0 0 15px;font-size:.9rem;opacity:.8;text-transform:none}.mission-brief-header{font-size:.7rem;text-transform:uppercase;letter-spacing:2px;color:var(--accent-turquoise);margin-bottom:5px;opacity:.6}.case-study-btn{background:var(--glass-bg);border:1px solid var(--glass-border);padding:8px 16px;border-radius:20px;color:#fff;font-size:.8rem;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.case-study-btn:hover{background:var(--accent-turquoise);color:var(--primary-blue);border-color:var(--accent-turquoise)}.iframe-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;overflow:hidden;display:none}.core.show-preview .iframe-container{display:block}#prototypeFrame{width:100%;height:100%;background:#fff;opacity:0;transition:opacity .8s ease}#prototypeFrame.loaded{opacity:1}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--accent-turquoise);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.scroll-hint{position:absolute;bottom:30px;left:50%;transform:translate(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;animation:bounce 2s infinite;transition:all .5s cubic-bezier(.4,0,.2,1)}.scroll-hint span{font-size:.7rem;text-transform:uppercase;letter-spacing:4px;font-weight:500;background:linear-gradient(90deg,#fff,#2dd4bf,#fff);background-size:200% auto;color:transparent;-webkit-background-clip:text;background-clip:text;animation:shimmer 3s linear infinite;opacity:.8}.scroll-hint.hidden{opacity:0;pointer-events:none;transform:translate(-50%) translateY(30px)}.chevron{width:14px;height:14px;border-bottom:3px solid var(--accent-turquoise);border-right:3px solid var(--accent-turquoise);transform:rotate(45deg);margin-top:-6px;filter:drop-shadow(0 0 5px rgba(45,212,191,.5));opacity:.8}@keyframes bounce{0%,20%,50%,80%,to{transform:translate(-50%) translateY(0)}40%{transform:translate(-50%) translateY(10px)}60%{transform:translate(-50%) translateY(5px)}}#particleCanvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none}.contact-section{background:#0f172a80;display:flex;flex-direction:row!important;justify-content:center;align-items:center;padding:0 10%}.contact-container{display:flex;width:100%;height:70%;max-width:1200px;align-items:stretch;gap:60px}.contact-half{flex:1;display:flex;flex-direction:column;justify-content:center}.contact-form{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);padding:40px;border-radius:30px;box-shadow:0 20px 50px #0000004d}.contact-form h2{font-size:2.5rem;margin-bottom:30px;letter-spacing:-1px}.form-group{margin-bottom:20px;position:relative}.form-group label{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:2px;margin-bottom:8px;opacity:.6}.contact-form input,.contact-form textarea{width:100%;background:#ffffff08;border:1px solid var(--glass-border);padding:12px 18px;border-radius:12px;color:#fff;font-family:inherit;transition:all .3s ease}.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent-turquoise);background:#ffffff0f;box-shadow:0 0 15px #2dd4bf33}.send-btn{background:var(--accent-turquoise);color:var(--primary-blue);border:none;padding:12px 30px;border-radius:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);margin-top:10px;align-self:flex-start}.send-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 10px 20px #2dd4bf66}.divider-container{width:2px;height:100%;background:#ffffff0d;position:relative;margin:0 20px}.glowing-line{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent,var(--accent-turquoise),var(--accent-purple),transparent);box-shadow:0 0 20px #2dd4bf80,0 0 40px #8b5cf64d;animation:lineFlow 5s linear infinite,dividerPulse 3s ease-in-out infinite}@keyframes dividerPulse{0%,to{opacity:.6;filter:brightness(1)}50%{opacity:1;filter:brightness(1.5)}}@keyframes lineFlow{0%{background-position:0% 0%}to{background-position:0% 200%}}.contact-info h3{font-size:1rem;text-transform:uppercase;letter-spacing:4px;color:var(--accent-turquoise);margin-bottom:40px}.info-item{margin-bottom:30px}.info-label{font-size:.7rem;text-transform:uppercase;letter-spacing:2px;opacity:.5;margin-bottom:5px}.info-value{font-size:1.4rem;font-weight:500}.info-toggle{position:fixed;bottom:30px;right:30px;width:40px;height:40px;border-radius:50%;background:var(--glass-bg);border:1px solid var(--glass-border);color:#fff;font-family:serif;font-style:italic;font-size:1.2rem;cursor:pointer;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.info-toggle:hover{background:var(--accent-turquoise);color:var(--primary-blue)}.info-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#0f172af2;display:flex;justify-content:center;align-items:center;z-index:5000;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);opacity:0;pointer-events:none;transition:all .5s ease}.info-modal.active{opacity:1;pointer-events:all}.info-content{background:var(--glass-bg);border:1px solid var(--glass-border);padding:40px;border-radius:30px;max-width:500px;position:relative;transform:scale(.9);transition:all .5s cubic-bezier(.34,1.56,.64,1)}.info-modal.active .info-content{transform:scale(1)}.info-close{position:absolute;top:20px;right:20px;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;opacity:.5;transition:opacity .3s}.info-close:hover{opacity:1}.bio-tag{display:inline-block;padding:4px 12px;background:var(--accent-turquoise);color:var(--primary-blue);border-radius:20px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}.info-content h2{font-size:2rem;margin-bottom:15px}.info-content p{line-height:1.6;opacity:.8;margin-bottom:30px}.info-footer{display:flex;gap:20px}.info-footer a{color:var(--accent-turquoise);text-decoration:none;font-size:.9rem;transition:opacity .3s}.info-footer a:hover{opacity:.7}.glass-bg:before,.bubble:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");opacity:.03;pointer-events:none;z-index:1;mix-blend-mode:overlay;border-radius:inherit}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}*:focus{outline:2px solid var(--accent-turquoise);outline-offset:2px}button:focus,input:focus,textarea:focus{outline:2px solid var(--accent-turquoise);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 1366px){.container{gap:3rem;max-width:1100px}.core-wrapper{width:320px;height:320px}.core{width:260px;height:260px}.bubble{width:85px;height:85px}}@media (max-width: 1024px){.container{gap:2.5rem;max-width:900px;padding:0 2rem}.core-wrapper{width:300px;height:300px}.core{width:240px;height:240px}.bubble{width:80px;height:80px}h1{font-size:2.8rem}.contact-container{gap:40px}}@media (max-width: 768px){.section{height:auto;min-height:100vh;padding-bottom:50px;overflow:visible}header{margin-top:1.5rem;margin-bottom:1rem}h1{font-size:2.5rem}.container{flex-direction:column;gap:2.5rem;justify-content:flex-start;align-items:center;height:auto;padding:0 1.5rem}.core-wrapper{width:280px;height:280px;margin:0 auto 1rem;order:-1}.core{width:220px;height:220px}.side-column{display:flex;flex-direction:row;justify-content:center;gap:1.5rem;flex-wrap:wrap;max-width:100%;margin:0 auto;padding:0 1rem}.bubble{width:75px;height:75px}.side-column:first-of-type .bubble:nth-child(1),.side-column:first-of-type .bubble:nth-child(2),.side-column:last-of-type .bubble:nth-child(1),.side-column:last-of-type .bubble:nth-child(2),.side-column:last-of-type .bubble:nth-child(3){transform:none}.bubble:after{font-size:.6rem;bottom:-25px}.contact-container{flex-direction:column;padding:20px;gap:2rem}.contact-half{width:100%;padding:1rem}.divider-container{width:100%;height:2px;margin:20px 0}.glowing-line{background:linear-gradient(to right,transparent,var(--accent-turquoise),var(--accent-purple),transparent)}.scroll-hint{position:relative;bottom:auto;left:auto;transform:none;margin-top:2rem;margin-bottom:2rem}.info-toggle{bottom:20px;right:20px}}@media (max-width: 480px){h1{font-size:2.2rem;letter-spacing:.1em}.container{gap:2rem;padding:0 1rem}.core-wrapper{width:250px;height:250px}.core{width:200px;height:200px}.bubble{width:65px!important;height:65px!important}.side-column{gap:1rem}.contact-form{padding:25px}.contact-form h2{font-size:1.8rem}.info-content{padding:30px 20px;width:90%;margin:0 auto}.info-content h2{font-size:1.5rem}.core.show-preview.mobile-preview{width:90vw;max-width:393px;height:85vh;border-radius:30px}}@media (max-width: 360px){h1{font-size:1.8rem}.core-wrapper{width:220px;height:220px}.core{width:180px;height:180px}.bubble{width:60px!important;height:60px!important}}.form-result{margin-top:1rem;padding:.75rem;border-radius:8px;font-weight:500;text-align:center}.form-result.success{background-color:#22c55e1a;color:#22c55e;border:1px solid rgba(34,197,94,.3)}.form-result.error{background-color:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.3)}input:disabled,textarea:disabled,button:disabled{opacity:.6;cursor:not-allowed}
