*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #0088ff;--secondary: #00d4ff;--bg: #0a0a0f;--text: #e0e0e0;--card-bg: rgba(20, 20, 30, .6)}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}#particles{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;contain:paint}.container{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem}.hero{text-align:center;margin:10vh 0 5vh;position:relative}.glitch-wrapper{position:relative;display:inline-block}.glitch{font-size:clamp(3rem,10vw,8rem);font-weight:900;text-transform:uppercase;position:relative;color:var(--primary);letter-spacing:.1em;text-shadow:0 0 10px var(--primary),0 0 20px var(--primary),0 0 40px var(--primary);animation:glow 2s ease-in-out infinite}@keyframes glow{0%,to{text-shadow:0 0 10px var(--primary),0 0 20px var(--primary),0 0 40px var(--primary)}50%{text-shadow:0 0 20px var(--primary),0 0 40px var(--primary),0 0 80px var(--primary),0 0 120px var(--secondary)}}.glitch:before,.glitch:after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;opacity:0}.glitch:hover:before{animation:glitch-1 .3s infinite;color:var(--secondary);z-index:-1}.glitch:hover:after{animation:glitch-2 .3s infinite;color:#f08;z-index:-2}@keyframes glitch-1{0%{transform:translate(0);opacity:1}20%{transform:translate(-2px,2px);opacity:.8}40%{transform:translate(-2px,-2px);opacity:.8}60%{transform:translate(2px,2px);opacity:.8}80%{transform:translate(2px,-2px);opacity:.8}to{transform:translate(0);opacity:1}}@keyframes glitch-2{0%{transform:translate(0);opacity:1}20%{transform:translate(2px,-2px);opacity:.7}40%{transform:translate(2px,2px);opacity:.7}60%{transform:translate(-2px,-2px);opacity:.7}80%{transform:translate(-2px,2px);opacity:.7}to{transform:translate(0);opacity:1}}.tagline{font-size:clamp(1rem,3vw,1.5rem);color:var(--text);margin-top:1rem;letter-spacing:.3em;opacity:.8;font-weight:300}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.content{max-width:900px;width:100%;display:grid;gap:2rem;margin-bottom:4rem}.card{opacity:0;background:var(--card-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,255,136,.2);border-radius:15px;padding:2rem;position:relative;overflow:hidden;transition:transform .3s ease,border-color .3s ease}.card.revealed{animation:fadeInUp .6s ease forwards}.card:hover{transform:translateY(-5px);border-color:var(--primary)}.card-glow{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,var(--primary) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none}.card:hover .card-glow{opacity:.1}.card h2{color:var(--primary);margin-bottom:1rem;font-size:1.8rem;font-weight:700}.card p{line-height:1.6;opacity:.9}.project-list{list-style:none;padding:0}.project-item-wrapper{padding:.75rem 0;display:flex;align-items:flex-start;gap:1rem;opacity:0;animation:projectSlideIn .5s ease forwards;border-bottom:1px solid rgba(0,136,255,.08);transition:background .3s ease,transform .2s ease}.project-item-wrapper:last-child{border-bottom:none}.project-item-wrapper:hover{background:#0088ff0d;transform:translate(4px)}@keyframes projectSlideIn{0%{opacity:0;transform:translate(-15px)}to{opacity:1;transform:translate(0)}}.project-item{display:flex;flex-direction:column;gap:.35rem;flex:1}.project-link{color:var(--primary);text-decoration:none;font-weight:600;font-size:1.1rem;position:relative;display:inline-flex;align-items:center;gap:.5rem;transition:all .3s ease}.project-arrow{opacity:0;transform:translate(-5px);transition:all .3s ease}.project-link:hover .project-arrow{opacity:1;transform:translate(0)}.project-link:after{content:"";position:absolute;width:100%;height:2px;bottom:-2px;left:0;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.project-link:hover{color:var(--secondary);text-shadow:0 0 10px var(--primary)}.project-link:hover:after{transform:scaleX(1)}.project-desc{color:var(--text);opacity:.8;font-size:.95rem}.project-tags{display:flex;gap:.4rem;flex-wrap:wrap}.project-tags .tag{font-size:.7rem;padding:.2rem .5rem;background:#0088ff26;border-radius:4px;color:var(--secondary);text-transform:uppercase;letter-spacing:.05em}.dot{width:8px;height:8px;min-width:8px;background:var(--primary);border-radius:50%;animation:pulse 2s infinite;flex-shrink:0}@keyframes pulse{0%,to{box-shadow:0 0 5px var(--primary);transform:scale(1)}50%{box-shadow:0 0 20px var(--primary);transform:scale(1.2)}}.links{display:flex;gap:1rem;flex-wrap:wrap}.link-btn{position:relative;padding:.8rem 2rem;background:#00ff881a;border:1px solid var(--primary);border-radius:8px;color:var(--primary);text-decoration:none;font-weight:600;overflow:hidden;transition:all .3s ease}.link-btn span{position:relative;z-index:2}.link-glow{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:var(--primary);transform:translate(-50%,-50%);transition:width .4s ease,height .4s ease;opacity:.2;z-index:1}.link-btn:hover{color:var(--bg);border-color:var(--primary);box-shadow:0 0 20px var(--primary)}.link-btn:hover .link-glow{width:300px;height:300px}footer{text-align:center;padding:2rem;opacity:.5;font-size:.9rem}@media (max-width: 768px){.container{padding:1rem}.links{flex-direction:column}.link-btn{width:100%;text-align:center}}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--primary);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--secondary)}
