:root{--font-display:"Space Grotesk", sans-serif;--font-body:"Outfit", sans-serif;--bg-dark:#111218;--bg-dark-rgb:17, 18, 24;--panel-bg:#161823ad;--border-color:#ffffff1f;--border-glow:#00f2fe40;--color-cyan:#00f2fe;--color-cyan-glow:#00f2fe66;--color-purple:#9b51e0;--color-purple-glow:#9b51e066;--color-hot-orange:#ff4757;--color-gold:#e5c158;--text-primary:#fff;--text-secondary:#a8aab3;--text-muted:#6b6b76;--radius-lg:16px;--radius-md:10px;--radius-sm:6px;--header-height:80px;--transition-smooth:all .4s cubic-bezier(.16, 1, .3, 1);--transition-fast:all .2s ease}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;background-color:var(--bg-dark);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;scroll-snap-type:y mandatory;overflow-x:clip}body{min-height:100vh;overflow-x:clip}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-cyan)}#canvas-container{z-index:1;pointer-events:none;width:100vw;height:100vh;position:fixed;top:0;left:0}#webgl-canvas{width:100%;height:100%;display:block}.hamburger-btn{z-index:210;border:1px solid var(--border-color);-webkit-backdrop-filter:blur(10px);border-radius:var(--radius-md);cursor:pointer;width:50px;height:50px;transition:var(--transition-smooth);background:#0d0d12a6;outline:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;display:flex;position:fixed;top:2rem;right:2.5rem}.hamburger-btn:hover{border-color:var(--color-cyan);box-shadow:0 0 12px var(--color-cyan-glow);background:#0d0d12d9}.hamburger-bar{background-color:var(--text-primary);width:22px;height:2px;transition:var(--transition-smooth);border-radius:1px}.hamburger-btn.open .hamburger-bar:first-child{background-color:var(--color-cyan);transform:translateY(7px)rotate(45deg)}.hamburger-btn.open .hamburger-bar:nth-child(2){opacity:0;transform:scaleX(0)}.hamburger-btn.open .hamburger-bar:nth-child(3){background-color:var(--color-cyan);transform:translateY(-7px)rotate(-45deg)}.hamburger-btn.open{border-color:var(--color-cyan);box-shadow:0 0 15px var(--color-cyan-glow)}.nav-drawer{z-index:200;-webkit-backdrop-filter:blur(25px);border-left:1px solid var(--border-color);background:#070709d1;flex-direction:column;justify-content:space-between;width:380px;height:100vh;padding:8rem 3rem 3rem;transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s;display:flex;position:fixed;top:0;right:0;transform:translate(100%)}.nav-drawer.open{transform:translate(0);box-shadow:-20px 0 50px #000000bf}.drawer-links{flex-direction:column;gap:2.2rem;margin-top:2rem;display:flex}.drawer-link{font-family:var(--font-display);text-transform:uppercase;letter-spacing:1.5px;color:var(--text-secondary);transition:var(--transition-smooth);align-items:center;gap:1.5rem;font-size:1.8rem;font-weight:700;text-decoration:none;display:flex}.drawer-link:hover{color:var(--text-primary);transform:translate(8px)}.drawer-link.active{color:var(--color-cyan);text-shadow:0 0 10px var(--color-cyan-glow)}.link-num{color:var(--color-cyan);opacity:.85;font-size:.85rem}.drawer-footer{border-top:1px solid var(--border-color);flex-direction:column;gap:2rem;padding-top:2rem;display:flex}.drawer-socials{gap:1.5rem;display:flex}.drawer-socials a{color:var(--text-secondary);font-family:var(--font-display);letter-spacing:1px;border:1px solid var(--border-color);border-radius:var(--radius-sm);transition:var(--transition-fast);background:#ffffff05;padding:.5rem 1rem;font-size:.8rem;font-weight:600;text-decoration:none}.drawer-socials a:hover{color:var(--text-primary);border-color:var(--color-cyan);box-shadow:0 0 8px var(--color-cyan-glow);background:#00f2fe0d}.drawer-status{flex-direction:column;gap:.6rem;display:flex}.status-indicator{border-radius:var(--radius-sm);letter-spacing:1px;background:#00f2fe0d;border:1px solid #00f2fe26;align-self:flex-start;align-items:center;gap:.5rem;padding:.4rem .8rem;font-size:.75rem;font-weight:600;display:flex}.pulse-dot{background-color:var(--color-cyan);width:8px;height:8px;box-shadow:0 0 8px var(--color-cyan);border-radius:50%;animation:2s infinite pulse}.telemetry-readout{color:var(--text-muted);font-size:.8rem}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 #00f2feb3}70%{transform:scale(1);box-shadow:0 0 0 6px #00f2fe00}to{transform:scale(.95);box-shadow:0 0 #00f2fe00}}.scroll-progress-bar{background:linear-gradient(to right, var(--color-cyan), var(--color-purple));z-index:101;width:0%;height:3px;position:fixed;top:0;left:0}.side-navigation{z-index:90;flex-direction:column;gap:1.2rem;display:flex;position:fixed;top:50%;right:2.5rem;transform:translateY(-50%)}.side-dot{background:var(--text-muted);cursor:pointer;width:10px;height:10px;transition:var(--transition-fast);border:none;border-radius:50%;outline:none}.side-dot:hover,.side-dot.active{background:var(--color-cyan);box-shadow:0 0 8px var(--color-cyan);transform:scale(1.3)}#scroll-container{z-index:2;width:100%;position:relative}.scroll-section{scroll-snap-align:start;scroll-snap-stop:always;align-items:center;width:100%;min-height:100vh;padding:0 8%;display:flex;position:relative;overflow:hidden}.section-content{z-index:10;max-width:550px;position:relative}.section-content:not(.gallery-content){background:var(--panel-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:3rem;box-shadow:0 30px 60px #00000073}.section-content.left-align{margin-right:auto}.section-content.right-align{margin-left:auto}.cyber-badge{font-family:var(--font-display);letter-spacing:2px;color:var(--color-cyan);text-transform:uppercase;margin-bottom:1rem;font-size:.75rem;font-weight:700;display:inline-block;position:relative}.cyber-badge:after{content:"";background-color:var(--color-cyan);width:20px;height:1.5px;position:absolute;bottom:-4px;left:0}h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-primary);font-weight:700;line-height:1.1}h1{letter-spacing:-2px;margin-bottom:1.5rem;font-size:4.5rem}h1 span,h2 span,h3 span{background:linear-gradient(135deg, var(--color-cyan), var(--color-purple));-webkit-text-fill-color:transparent;-webkit-background-clip:text}h2{letter-spacing:-.5px;margin-bottom:1.5rem;font-size:3rem}p{color:var(--text-secondary);margin-bottom:2rem;font-size:1.05rem;font-weight:300;line-height:1.6}.hero-content{text-align:center;max-width:700px;margin:0 auto;padding:4rem 3rem 3rem}.hero-tagline{color:var(--text-secondary);font-size:1.25rem}.scroll-down-hint{color:var(--text-muted);font-size:.75rem;font-family:var(--font-display);letter-spacing:2px;text-transform:uppercase;flex-direction:column;align-items:center;gap:.6rem;margin-top:4rem;animation:2.5s ease-in-out infinite float;display:flex}.mouse-icon{border:2px solid var(--text-muted);border-radius:12px;width:20px;height:32px;position:relative}.mouse-icon .wheel{background-color:var(--color-cyan);border-radius:2px;width:4px;height:8px;animation:2s linear infinite scrollWheel;position:absolute;top:6px;left:50%;transform:translate(-50%)}@keyframes scrollWheel{0%{opacity:0;transform:translate(-50%)}15%{opacity:1}50%{opacity:1;transform:translate(-50%,6px)}75%{opacity:0}to{opacity:0}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}to{transform:translateY(0)}}.spec-grid{grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.5rem;display:grid}.spec-card{background:var(--panel-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);text-align:center;-webkit-backdrop-filter:blur(8px);transition:var(--transition-fast);padding:1.2rem}.spec-card:hover{border-color:var(--color-cyan);transform:translateY(-4px);box-shadow:0 0 15px #00f2fe1a}.spec-value{font-family:var(--font-display);color:var(--text-primary);margin-bottom:.3rem;font-size:1.4rem;font-weight:700;display:block}.spec-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.75rem;display:block}.customizer-left-col{flex-direction:column;gap:1.5rem;display:flex}.config-panel{background:var(--panel-bg);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(12px);border-radius:var(--radius-lg);width:100%;margin-top:1.5rem;padding:2rem;box-shadow:0 20px 40px #0006}.control-group{margin-bottom:1.8rem}.control-group label{font-family:var(--font-display);text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:.8rem;font-size:.8rem;display:block}.material-chips{grid-template-columns:repeat(2,1fr);gap:.8rem;display:grid}.material-chip{border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-family:var(--font-body);cursor:pointer;transition:var(--transition-fast);text-align:left;background:#ffffff08;align-items:center;gap:.6rem;padding:.8rem 1rem;font-size:.85rem;font-weight:500;display:flex}.material-chip:hover{color:var(--text-primary);background:#ffffff0f;border-color:#fff3}.material-chip.active{border-color:var(--color-cyan);color:var(--text-primary);background:#00f2fe14;box-shadow:0 0 12px #00f2fe26}.color-preview{border-radius:50%;flex-shrink:0;width:12px;height:12px;display:inline-block}.material-details-box{border-radius:var(--radius-md);background:#0003;border:1px solid #ffffff08;padding:1.2rem}.material-details-box h4{margin-bottom:.5rem;font-size:1.1rem}.material-details-box p{color:var(--text-secondary);margin-bottom:1.2rem;font-size:.85rem;line-height:1.5}.stat-bars{flex-direction:column;gap:.8rem;display:flex}.stat-bar{flex-direction:column;gap:.3rem;display:flex}.stat-bar span{color:var(--text-secondary);font-size:.75rem}.bar-bg{background:#ffffff14;border-radius:2px;width:100%;height:4px;overflow:hidden}.bar-fill{background:linear-gradient(to right, var(--color-cyan), var(--color-purple));border-radius:2px;height:100%;transition:width .6s cubic-bezier(.16,1,.3,1)}.gallery-content{text-align:center;max-width:1100px;margin:0 auto}.portfolio-grid{text-align:left;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem;display:grid}.portfolio-card{background:var(--panel-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);transition:var(--transition-smooth);-webkit-backdrop-filter:blur(12px);flex-direction:column;display:flex;overflow:hidden;box-shadow:0 15px 35px #0006}.portfolio-card:hover{border-color:#00f2fe59;transform:translateY(-8px);box-shadow:0 20px 40px #00f2fe26}.portfolio-media{background:#070709;width:100%;height:220px;position:relative;overflow:hidden}.portfolio-media img{object-fit:cover;width:100%;height:100%;transition:var(--transition-smooth)}.portfolio-card:hover .portfolio-media img{transform:scale(1.04)}.portfolio-tag{color:var(--color-cyan);font-family:var(--font-display);border-radius:var(--radius-sm);letter-spacing:.5px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00f2fe26;border:1px solid #00f2fe59;padding:.3rem .6rem;font-size:.7rem;font-weight:700;position:absolute;top:1rem;left:1rem}.portfolio-info{flex-direction:column;flex-grow:1;justify-content:space-between;padding:1.5rem;display:flex}.portfolio-info h4{color:var(--text-primary);font-size:1.2rem;font-weight:700;font-family:var(--font-display);margin-bottom:.6rem}.portfolio-info p{color:var(--text-secondary);margin-bottom:1.5rem;font-size:.88rem;font-weight:300;line-height:1.55}.portfolio-specs{border-top:1px solid var(--border-color);flex-direction:column;gap:.5rem;padding-top:1rem;display:flex}.spec-dot{font-family:var(--font-display);color:var(--text-secondary);align-items:center;gap:.6rem;font-size:.8rem;display:flex}.spec-dot span{color:var(--color-cyan);font-size:.95rem}.action-row{margin-top:auto}.cyber-btn{color:var(--text-primary);border:1px solid var(--border-color);font-family:var(--font-display);text-transform:uppercase;letter-spacing:1.5px;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast);text-align:center;background:0 0;outline:none;padding:.9rem 1.8rem;font-size:.85rem;font-weight:600;display:inline-block}.cyber-btn:hover{background:var(--text-primary);color:var(--bg-dark);box-shadow:0 0 15px #fff3}.cyber-btn.glow{border-color:var(--color-cyan);color:var(--color-cyan)}.cyber-btn.glow:hover{background:var(--color-cyan);color:var(--bg-dark);box-shadow:0 0 20px var(--color-cyan-glow)}.cyber-btn.glow-purple{border-color:var(--color-purple);color:var(--text-primary);background:linear-gradient(135deg,#9b51e033,#00f2fe1a)}.cyber-btn.glow-purple:hover{background:linear-gradient(135deg, var(--color-purple), var(--color-cyan));color:var(--text-primary);border-color:#0000;box-shadow:0 0 25px #9b51e066}#hotspot-overlay{z-index:5;pointer-events:none;width:100vw;height:100vh;position:fixed;top:0;left:0}.hotspot-card{align-items:center;gap:1rem;transition:opacity .3s,transform .1s;display:flex;position:absolute;transform:translate(-50%,-50%)}.hotspot-indicator{background:var(--color-cyan);border:2px solid var(--text-primary);width:20px;height:20px;box-shadow:0 0 10px var(--color-cyan);cursor:pointer;pointer-events:auto;border-radius:50%;position:relative}.hotspot-indicator .ping{border:2.5px solid var(--color-cyan);opacity:0;border-radius:50%;width:28px;height:28px;animation:2s cubic-bezier(.1,.8,.3,1) infinite pingAnimation;position:absolute;top:-6px;left:-6px}@keyframes pingAnimation{0%{opacity:0;transform:scale(.5)}25%{opacity:.8}to{opacity:0;transform:scale(1.4)}}.hotspot-content{-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-md);opacity:0;pointer-events:none;background:#0b0c12eb;border:1px solid #ffffff2e;max-width:230px;padding:1rem 1.2rem;transition:opacity .3s,transform .3s;transform:translate(-10px);box-shadow:0 10px 25px #0006}.hotspot-indicator:hover+.hotspot-content,.hotspot-card:hover .hotspot-content{opacity:1;transform:translate(0)}.hotspot-content h4{color:var(--color-cyan);font-size:.85rem;font-weight:600;font-family:var(--font-display);margin-bottom:.3rem}.hotspot-content p{color:var(--text-secondary);margin-bottom:0;font-size:.75rem;line-height:1.4}.hotspot-card.align-right{flex-direction:row-reverse}.hotspot-card.align-right .hotspot-content{transform:translate(10px)}.hotspot-card.align-right .hotspot-indicator:hover+.hotspot-content{transform:translate(0)}.app-footer{border-top:1px solid var(--border-color);width:100%;color:var(--text-muted);scroll-snap-align:end;background:#070709e6;justify-content:space-between;align-items:center;padding:3rem 8%;font-size:.8rem;display:flex}.footer-meta{gap:1.5rem;display:flex}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:none!important}.pulse-dot,.hotspot-indicator .ping,.scroll-down-hint{animation:none!important}.bar-fill{transition:none!important}}@media (width<=1024px){h1{font-size:3.5rem}h2{font-size:2.5rem}.portfolio-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}}@media (width<=768px){h1{font-size:2.8rem}h2{font-size:2rem}.side-navigation{display:none}.scroll-section{padding:8% 5%}.section-content{max-width:100%}.spec-grid{grid-template-columns:1fr;gap:.8rem}.portfolio-grid{grid-template-columns:1fr;gap:1.5rem}.app-footer{text-align:center;flex-direction:column;gap:1rem}}