*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
body{background:#05080f;color:#eaf0ff;overflow-x:hidden;}

/* CANVAS */
#bg{position:fixed;inset:0;z-index:-1;}

/* CUSTOM CURSOR */
.cursor{width:20px;height:20px;border:2px solid #00e5ff;border-radius:50%;position:fixed;pointer-events:none;transform:translate(-50%,-50%);transition:0.08s;}
.cta {
  margin-top: 35px;
  padding: 14px 42px;
  border: 2px solid #00eaff;
  color: #00eaff;
  text-decoration: none;
  transition: 0.4s;
}
.cta:hover {
  background: #00eaff;
  color: #000;
  box-shadow: 0 0 30px #00eaff;
}

/* HEADER */
.projects-header{text-align:center;padding:80px 20px 40px 20px;position:relative;z-index:1;}
.glitch{font-size:3rem;color:#00e5ff;position:relative;}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;}
.glitch::before{top:-2px;color:#ff00ff;animation:glitch 1.5s infinite;}
.glitch::after{top:2px;color:#7c4dff;animation:glitch 2s infinite;}
@keyframes glitch{0%{clip-path:inset(0 0 90% 0);}50%{clip-path:inset(10% 0 30% 0);}100%{clip-path:inset(80% 0 0 0);}}

/* GRID */
.projects-grid{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;padding:40px 5%;opacity:1;transform:translateY(0);transition:none;}

/* PROJECT CARD */
.project-card{position:relative;width:280px;border-radius:15px;overflow:hidden;cursor:pointer;transition:transform 0.4s,box-shadow 0.4s;}
.project-card:hover{transform:scale(1.05) translateY(-10px);box-shadow:0 0 40px #00e5ff;}
.project-img{width:100%;display:block;transition:transform 0.4s;}
.project-card:hover .project-img{transform:scale(1.1);}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,0.85);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;padding:20px;transition:opacity 0.4s;text-align:center;}
.project-card:hover .overlay{opacity:1;}
.project-icon{width:50px;margin-bottom:15px;}
.btn{margin-top:10px;padding:10px 20px;border:1px solid #00e5ff;color:#00e5ff;text-decoration:none;transition:0.3s;}
.btn:hover{background:#00e5ff;color:#000;}

/* MODAL */
.modal{display:none;position:fixed;z-index:100;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.9);overflow:auto;padding:60px 20px;transition:0.3s;}
.modal-content{max-width:700px;margin:auto;background:#11162a;border-radius:15px;padding:30px;text-align:center;color:#fff;animation:modalShow 0.4s;}
.modal-content img{max-width:100%;border-radius:10px;margin-bottom:20px;}
.close{color:#00e5ff;float:right;font-size:28px;cursor:pointer;}
@keyframes modalShow{0%{transform:translateY(-30px);opacity:0;}100%{transform:translateY(0);opacity:1;}}

/* SCROLL REVEAL */
.reveal.active{opacity:1;transform:translateY(0);}