@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";
:root{--bg-deep:#050505;--bg-panel:#0a0a0a;--bg-card:#0a0a0acc;--bg-card-hover:#0f0f0fe6;--line-color:#ffffff14;--accent-blue:#3b82f6;--accent-cyan:#06b6d4;--accent-glow:#06b6d44d;--text-main:#ececec;--text-muted:#888;--text-inverse:#000;--font-display:"Space Grotesk",sans-serif;--font-mono:"JetBrains Mono",monospace;--shadow-card:0 4px 6px -1px #00000080;--shadow-card-hover:0 0 15px var(--accent-glow),0 0 30px #06b6d41a}[data-theme=light]{--bg-deep:#f8fafc;--bg-panel:#fff;--bg-card:#ffffffb3;--bg-card-hover:#fff;--line-color:#00000014;--accent-blue:#2563eb;--accent-cyan:#0891b2;--accent-glow:#0891b233;--text-main:#0f172a;--text-muted:#64748b;--text-inverse:#fff;--shadow-card:0 4px 6px -1px #94a3b81a;--shadow-card-hover:0 10px 25px -5px #94a3b84d,0 0 10px var(--accent-glow)}*{box-sizing:border-box}body{background-color:var(--bg-deep);color:var(--text-main);font-family:var(--font-display);background-image:linear-gradient(var(--line-color)1px,transparent 1px),linear-gradient(90deg,var(--line-color)1px,transparent 1px);background-size:40px 40px;min-height:100vh;margin:0;padding:0;transition:background-color .3s,color .3s;overflow-x:hidden}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.anim-enter{opacity:0;animation:.6s cubic-bezier(.16,1,.3,1) forwards fadeInUp}.stagger-1{animation-delay:.1s}.stagger-2{animation-delay:.2s}.stagger-3{animation-delay:.3s}.stagger-4{animation-delay:.4s}h1,h2,h3{letter-spacing:-.03em;margin:0;font-weight:700}p{color:var(--text-muted);line-height:1.6}.mono{font-family:var(--font-mono)}.main-container{max-width:1400px;margin:0 auto;padding:80px 40px}.header-section{border-left:4px solid var(--accent-cyan);margin-bottom:80px;padding-left:24px}.header-title{background:linear-gradient(to right,var(--text-main),var(--text-muted));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:16px;font-size:4rem}.project-grid{grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:32px;display:grid}.project-card{background:var(--bg-card);border:1px solid var(--line-color);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;height:100%;box-shadow:var(--shadow-card);border-radius:12px;flex-direction:column;padding:32px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);animation:.5s cubic-bezier(.16,1,.3,1) backwards fadeInUp;display:flex;position:relative;overflow:hidden}.project-card:first-child{animation-delay:50ms}.project-card:nth-child(2){animation-delay:.1s}.project-card:nth-child(3){animation-delay:.15s}.project-card:nth-child(4){animation-delay:.2s}.project-card:nth-child(5){animation-delay:.25s}.project-card:nth-child(6){animation-delay:.3s}.project-card:nth-child(n+7){animation-delay:.35s}.project-card:before{content:"";background:linear-gradient(90deg,transparent,var(--accent-cyan),transparent);opacity:0;width:100%;height:3px;transition:opacity .3s,transform .6s;position:absolute;top:0;left:0;transform:translate(-100%)}.project-card:after{content:"";pointer-events:none;z-index:1;background:linear-gradient(120deg,#0000 30%,#ffffff0d 45%,#ffffff1a 50%,#ffffff0d 55%,#0000 70%);transition:transform .6s;position:absolute;inset:0;transform:translateY(100%)translate(-100%)rotate(0)}.project-card:hover{border-color:var(--accent-cyan);box-shadow:var(--shadow-card-hover);background:var(--bg-card-hover);transform:translateY(-8px)scale(1.01)}.project-card:hover:before{opacity:1;transform:translate(0)}.project-card:hover:after{transition:transform .8s;transform:translateY(-100%)translate(100%)rotate(0)}.card-header{z-index:2;justify-content:space-between;align-items:flex-start;margin-bottom:24px;display:flex;position:relative}.project-icon{width:40px;height:40px;color:var(--accent-cyan);background:#7d7d7d1a;border-radius:8px;justify-content:center;align-items:center;transition:color .3s,background .3s;display:flex}.project-card:hover .project-icon{background:var(--accent-cyan);color:var(--text-inverse);box-shadow:0 0 15px var(--accent-glow)}.project-category{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--line-color);color:var(--text-muted);border-radius:100px;padding:6px 12px;font-size:.75rem}.card-title{color:var(--text-main);z-index:2;margin-bottom:12px;font-size:1.5rem;position:relative}.card-desc{z-index:2;flex-grow:1;margin-bottom:24px;font-size:.95rem;position:relative}.tech-stack{z-index:2;flex-wrap:wrap;gap:8px;margin-top:auto;display:flex;position:relative}.tech-tag{font-size:.7rem;font-family:var(--font-mono);color:var(--text-muted);background:#7d7d7d0d;border:1px solid #0000;border-radius:4px;padding:4px 8px;transition:all .3s}.project-card:hover .tech-tag{border-color:var(--accent-cyan);color:var(--accent-cyan);background:#06b6d41a}.view-btn{border-top:1px solid var(--line-color);color:var(--accent-cyan);opacity:.6;z-index:2;align-items:center;gap:8px;margin-top:24px;padding-top:24px;font-size:.8rem;font-weight:600;transition:opacity .2s;display:flex;position:relative}.project-card:hover .view-btn{opacity:1}.modal-overlay{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:100;background:#000000d9;justify-content:center;align-items:center;width:100%;height:100%;padding:40px;animation:.3s ease-out fadeIn;display:flex;position:fixed;top:0;left:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--bg-panel);border:1px solid var(--line-color);width:100%;max-width:1200px;height:90vh;color:var(--text-main);border-radius:16px;flex-direction:column;animation:.4s cubic-bezier(.16,1,.3,1) modalScaleUp;display:flex;overflow:hidden;box-shadow:0 25px 50px -12px #000000b3}@keyframes modalScaleUp{0%{opacity:0;transform:scale(.9)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.modal-header{border-bottom:1px solid var(--line-color);background:#7d7d7d05;justify-content:space-between;align-items:center;padding:24px 32px;display:flex}.close-btn{color:var(--text-main);cursor:pointer;background:0 0;border:none;border-radius:50%;padding:8px;transition:background .2s}.close-btn:hover{background:#7d7d7d1a}.modal-body{flex-grow:1;grid-template-columns:350px 1fr;display:grid;overflow-y:auto}.modal-sidebar{border-right:1px solid var(--line-color);background:#7d7d7d08;padding:32px}.modal-main{background:var(--bg-deep);padding:32px}.detail-label{font-family:var(--font-mono);text-transform:uppercase;color:var(--accent-cyan);margin-bottom:8px;font-size:.7rem;display:block}.detail-text{color:var(--text-muted);margin-bottom:32px;font-size:.95rem}.tab-content-anim{animation:.3s ease-out fadeIn}.tilt-card{perspective:1000px;transform-style:preserve-3d;flex-direction:column;display:flex;position:relative}.tilt-content{width:100%;height:100%;transform:rotateX(var(--rx))rotateY(var(--ry));transform-style:preserve-3d;z-index:1;flex-direction:column;transition:transform .1s ease-out,background .4s,border-color .4s,box-shadow .4s;display:flex;position:relative}.project-card.tilt-content{transition:transform .1s ease-out,background .4s,border-color .4s,box-shadow .4s,color .3s}.tilt-card:hover .tilt-content{transform:rotateX(var(--rx))rotateY(var(--ry))scale(1.02)translateZ(10px)}.glow-overlay{pointer-events:none;z-index:2;background:radial-gradient(800px circle at var(--mouse-x)var(--mouse-y),#ffffff0f,transparent 40%);opacity:0;mix-blend-mode:overlay;border-radius:12px;width:100%;height:100%;transition:opacity .3s;position:absolute;top:0;left:0}[data-theme=light] .glow-overlay{background:radial-gradient(800px circle at var(--mouse-x)var(--mouse-y),#0000000d,transparent 40%)}.tilt-card:hover .glow-overlay{opacity:1}.parallax-layer{will-change:transform;transition:transform .1s cubic-bezier(0,0,.2,1)}.diagram-container{background:var(--bg-panel);border:1px solid var(--line-color);border-radius:12px;justify-content:center;align-items:center;min-height:400px;padding:24px;display:flex;overflow:auto}@media (max-width:1024px){.modal-body{grid-template-columns:1fr}.modal-sidebar{border-right:none;border-bottom:1px solid var(--line-color)}}