@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&display=swap";:root{--bg-primary:#0a0e1a;--bg-secondary:#0f1528;--bg-card:#0f1528b3;--cyan:#00f0ff;--purple:#a855f7;--green:#0f8;--pink:#ff006e;--yellow:#f7df1e;--text-primary:#e2e8f0;--text-secondary:#94a3b8;--glass:#0f152899;--glass-border:#00f0ff26;--font-code:"JetBrains Mono", monospace;--font-body:"Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--cyan) var(--bg-primary)}body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);cursor:none;overflow-x:hidden}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:3px}.grid-bg{pointer-events:none;z-index:0;background-image:radial-gradient(circle at 1px 1px,#00f0ff12 1px,#0000 0);background-size:40px 40px;position:fixed;inset:0}.section{z-index:1;padding:100px 0;position:relative}.container{max-width:1200px;margin:0 auto;padding:0 24px}.section-title{font-family:var(--font-code);margin-bottom:60px;font-size:clamp(1.8rem,4vw,2.5rem);display:inline-block;position:relative}.section-title .prefix{color:var(--cyan);margin-right:8px;font-weight:300}.section-title .underscore{color:var(--purple)}.glass-panel{background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:16px;padding:24px;transition:all .3s}.glass-panel:hover{border-color:#00f0ff59;box-shadow:0 0 30px #00f0ff14}.neon-btn{font-family:var(--font-code);border:1px solid var(--cyan);color:var(--cyan);cursor:none;background:0 0;border-radius:8px;align-items:center;gap:8px;padding:12px 28px;font-size:.9rem;text-decoration:none;transition:all .3s;display:inline-flex;position:relative;overflow:hidden}.neon-btn:before{content:"";background:var(--cyan);opacity:0;z-index:-1;transition:opacity .3s;position:absolute;inset:0}.neon-btn:hover{color:var(--bg-primary);box-shadow:0 0 25px #00f0ff66}.neon-btn:hover:before{opacity:1}.neon-btn.purple{border-color:var(--purple);color:var(--purple)}.neon-btn.purple:before{background:var(--purple)}.neon-btn.purple:hover{color:#fff;box-shadow:0 0 25px #a855f766}.tag{font-family:var(--font-code);color:var(--cyan);background:#00f0ff0d;border:1px solid #00f0ff33;border-radius:20px;padding:4px 10px;font-size:.7rem}.custom-cursor{border:2px solid var(--cyan);pointer-events:none;z-index:9999;mix-blend-mode:difference;border-radius:50%;width:20px;height:20px;transition:width .2s,height .2s,border-color .2s;position:fixed;transform:translate(-50%,-50%)}.custom-cursor.hover{border-color:var(--purple);background:#a855f71a;width:50px;height:50px}.cursor-dot{background:var(--cyan);pointer-events:none;z-index:10000;border-radius:50%;width:6px;height:6px;position:fixed;transform:translate(-50%,-50%)}.click-ripple{border:2px solid var(--cyan);pointer-events:none;z-index:9998;border-radius:50%;animation:.6s ease-out forwards rippleOut;position:fixed}@keyframes rippleOut{0%{opacity:1;width:0;height:0;transform:translate(-50%,-50%)}to{opacity:0;width:150px;height:150px;transform:translate(-50%,-50%)}}.scroll-progress-ring{z-index:100;width:50px;height:50px;position:fixed;bottom:30px;right:30px}.scroll-progress-ring circle{fill:none;stroke-width:3px;transform-origin:50%;transform:rotate(-90deg)}.scroll-progress-ring .bg{stroke:#00f0ff1a}.scroll-progress-ring .progress{stroke:var(--cyan);stroke-linecap:round;transition:stroke-dashoffset .1s}.glitch{position:relative}.glitch:hover{animation:.3s infinite glitch}@keyframes glitch{0%{text-shadow:2px 0 var(--cyan), -2px 0 var(--pink)}25%{text-shadow:-2px -1px var(--cyan), 2px 1px var(--pink)}50%{text-shadow:1px 2px var(--cyan), -1px -2px var(--pink)}75%{text-shadow:-1px 1px var(--cyan), 1px -1px var(--pink)}to{text-shadow:2px 0 var(--cyan), -2px 0 var(--pink)}}.terminal{font-family:var(--font-code);background:#0d1117;border:1px solid #30363d;border-radius:12px;font-size:.85rem;overflow:hidden}.terminal-bar{cursor:grab;background:#161b22;border-bottom:1px solid #30363d;align-items:center;gap:8px;padding:12px 16px;display:flex}.terminal-bar:active{cursor:grabbing}.terminal-dot{border-radius:50%;width:12px;height:12px}.terminal-dot.red{background:#ff5f57}.terminal-dot.yellow{background:#ffbd2e}.terminal-dot.green{background:#28c840}.terminal-title{color:var(--text-secondary);margin-left:8px;font-size:.75rem}.terminal-body{max-height:350px;padding:16px;overflow-y:auto}.terminal-line{margin-bottom:8px;line-height:1.6}.terminal-prompt{color:var(--green)}.terminal-cmd{color:var(--text-primary)}.terminal-output{color:var(--text-secondary);white-space:pre-wrap;padding-left:8px}.terminal-cursor{background:var(--green);vertical-align:middle;width:8px;height:16px;margin-left:2px;animation:1s step-end infinite blink;display:inline-block}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.floating-element{font-family:var(--font-code);color:#00f0ff1f;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:1.5rem;position:absolute}.responsive-grid-2{grid-template-columns:1fr 1fr;align-items:start;gap:48px;display:grid}.canvas-container{z-index:0;position:absolute;inset:0}.canvas-container canvas{touch-action:none}.navbar{z-index:1000;padding:16px 0;transition:all .3s;position:fixed;top:0;left:0;right:0}.navbar.scrolled{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);background:#0a0e1ad9}.navbar .container{justify-content:space-between;align-items:center;display:flex}.nav-logo{font-family:var(--font-code);color:var(--cyan);font-size:1.2rem;font-weight:700;text-decoration:none}.nav-logo span{color:var(--purple)}.nav-links{gap:32px;list-style:none;display:flex}.nav-links a{font-family:var(--font-code);color:var(--text-secondary);font-size:.85rem;text-decoration:none;transition:color .3s;position:relative}.nav-links a:hover,.nav-links a.active{color:var(--cyan)}.nav-links a:after{content:"";background:var(--cyan);width:0;height:2px;transition:width .3s;position:absolute;bottom:-4px;left:0}.nav-links a:hover:after,.nav-links a.active:after{width:100%}.nav-toggle{cursor:pointer;z-index:1001;background:0 0;border:none;flex-direction:column;gap:5px;padding:8px;display:none}.nav-toggle span{background:var(--cyan);width:25px;height:2px;transition:all .3s}@media (width<=1024px){.section{padding:80px 0}.section-title{margin-bottom:48px}.responsive-grid-2{gap:36px}}@media (width<=768px){body{cursor:auto}.custom-cursor,.cursor-dot,.click-ripple{display:none!important}.neon-btn{cursor:pointer}.section{padding:60px 0}.section-title{margin-bottom:36px;font-size:clamp(1.4rem,5vw,1.8rem)}.container{padding:0 16px}.responsive-grid-2{grid-template-columns:1fr;gap:28px}.scroll-progress-ring{width:40px;height:40px;bottom:16px;right:16px}.nav-toggle{display:flex}.nav-links{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-left:1px solid var(--glass-border);z-index:1000;background:#0a0e1af7;flex-direction:column;gap:24px;width:75%;max-width:300px;height:100dvh;padding:100px 32px 40px;transition:right .35s cubic-bezier(.4,0,.2,1);position:fixed;top:0;right:-100%;overflow-y:auto}.nav-links.open{right:0}.nav-links a{font-size:1rem}.terminal{font-size:.75rem}.terminal-bar{padding:10px 12px}.terminal-body{max-height:280px;padding:12px}.terminal-title{font-size:.65rem}.terminal-dot{width:10px;height:10px}.glass-panel{border-radius:12px;padding:18px}.neon-btn{padding:10px 20px;font-size:.8rem}.tag{padding:3px 8px;font-size:.65rem}.floating-element{display:none!important}}@media (width<=480px){.section{padding:48px 0}.section-title{margin-bottom:28px}.container{padding:0 14px}.responsive-grid-2{gap:20px}.glass-panel{border-radius:10px;padding:14px}.neon-btn{gap:6px;padding:10px 16px;font-size:.75rem}.scroll-progress-ring{width:36px;height:36px;bottom:12px;right:12px}.terminal{border-radius:8px;font-size:.7rem}.terminal-body{max-height:220px;padding:10px}.terminal-bar{gap:6px;padding:8px 10px}.terminal-dot{width:8px;height:8px}.terminal-title{margin-left:4px;font-size:.6rem}}@media (width<=360px){.section{padding:40px 0}.container{padding:0 12px}.section-title{margin-bottom:24px;font-size:1.3rem}.neon-btn{padding:8px 14px;font-size:.7rem}}@media (hover:none) and (pointer:coarse){body{cursor:auto}.custom-cursor,.cursor-dot,.click-ripple{display:none!important}.neon-btn{cursor:pointer}.terminal-bar,.terminal-bar:active{cursor:default}.floating-element{display:none!important}}