body{
  margin:0;
  background:#0a0f14;
  color:white;
  font-family:'Inter',sans-serif;
  }
  
  /* BACKGROUND */
  
  .cyber-bg{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url("../assets/neural-network-bg.svg") center/cover no-repeat;
  opacity:0.85;
  z-index:-1;
  }
  
  /* HEADER */
  
  header{
  text-align:center;
  padding:60px 20px 20px 20px;
  }
  
  /* HERO TITLE */
  
  .hero-title{
  
  font-family:'Orbitron',sans-serif;
  
  font-size:48px;
  
  font-weight:700;
  
  letter-spacing:2px;
  
  margin-bottom:8px;
  
  background:linear-gradient(90deg,#00ffd0,#6ee7ff,#00ffd0);
  
  -webkit-background-clip:text;
  
  -webkit-text-fill-color:transparent;
  
  }
  
  /* animated scan line under name */
  
  .hero-scanline{
  
  width:240px;
  height:2px;
  
  margin:8px auto 18px auto;
  
  background:linear-gradient(
  90deg,
  transparent,
  #00ffd0,
  #6ee7ff,
  #00ffd0,
  transparent
  );
  
  background-size:200%;
  
  animation:scanline 5s linear infinite;
  
  }
  
  @keyframes scanline{
  
  0%{background-position:0%}
  100%{background-position:200%}
  
  }
  
  /* tagline */
  
  .tagline{
  
  opacity:0.85;
  
  font-size:15px;
  
  letter-spacing:0.5px;
  
  color:#9fb3c8;
  
  margin-bottom:20px;
  
  }
  
  /* expertise pills */
  
  .expertise{
  
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  
  gap:12px;
  
  margin:18px 0 20px 0;
  
  }
  
  .skill-pill{
  
  padding:6px 14px;
  
  border-radius:20px;
  
  font-size:13px;
  
  border:1px solid rgba(0,255,200,0.35);
  
  background:rgba(0,255,200,0.05);
  
  color:#7fffe1;
  
  letter-spacing:0.4px;
  
  position:relative;
  
  overflow:hidden;
  
  }
  
  /* telemetry animation */
  
  .skill-pill::before{
  
  content:"";
  
  position:absolute;
  
  top:0;
  left:-100%;
  
  width:100%;
  height:100%;
  
  background:linear-gradient(
  120deg,
  transparent,
  rgba(0,255,200,0.35),
  transparent
  );
  
  animation:telemetry 6s infinite;
  
  }
  
  @keyframes telemetry{
  
  0%{left:-100%}
  100%{left:200%}
  
  }
  
  /* hover glow */
  
  .skill-pill:hover{
  
  border-color:#00ffd0;
  
  background:rgba(0,255,200,0.12);
  
  box-shadow:
  0 0 8px rgba(0,255,200,0.4),
  0 0 16px rgba(0,255,200,0.15);
  
  }
  
  /* SEARCH */
  
  #search{
  
  margin-top:10px;
  
  padding:12px;
  
  width:300px;
  
  border-radius:6px;
  
  border:none;
  
  }
  
  /* CYBER DIVIDER */
  
  .section-divider{
  
  width:320px;
  height:2px;
  
  margin:25px auto 10px auto;
  
  background:linear-gradient(
  90deg,
  transparent,
  #ff4d6d,
  #ff7b00,
  #ff3cac,
  transparent
  );
  
  background-size:200%;
  
  animation:cyberline 6s linear infinite;
  
  }
  
  @keyframes cyberline{
  
  0%{background-position:0%}
  100%{background-position:200%}
  
  }
  
  /* PROJECTS */
  
  .projects{
  
  max-width:1200px;
  
  margin:auto;
  
  padding:20px 40px 40px 40px;
  
  }
  
  .projects h2{
  
  margin-bottom:20px;
  
  }
  
  /* GRID */
  
  .repo-grid{
  
  display:grid;
  
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  
  gap:25px;
  
  }
  
  /* CARD */
  
  .repo-card{
  
  background:rgba(15,25,35,0.7);
  
  border:1px solid rgba(0,255,200,0.2);
  
  padding:22px;
  
  border-radius:12px;
  
  backdrop-filter:blur(8px);
  
  transition:all 0.25s;
  
  }
  
  .repo-card:hover{
  
  transform:translateY(-6px);
  
  box-shadow:0 0 18px rgba(0,255,200,0.25);
  
  }
  
  /* repo title */
  
  .repo-title a{
  
  color:#00ffd0;
  
  text-decoration:none;
  
  font-weight:600;
  
  font-size:20px;
  
  }
  
  .repo-title a:hover{
  
  color:#7affea;
  
  text-shadow:0 0 6px rgba(0,255,200,0.6);
  
  }
  
  /* TAGS */
  
  .repo-tags{
  
  margin-top:10px;
  
  display:flex;
  
  flex-wrap:wrap;
  
  gap:6px;
  
  }
  
  .repo-tag{
  
  font-size:11px;
  
  padding:4px 10px;
  
  border-radius:14px;
  
  text-transform:capitalize;
  
  }
  
  /* DOMAIN COLORS */
  
  .tag-ai{background:#5b2cff;color:#fff;}
  .tag-cloud{background:#0088ff;color:#fff;}
  .tag-security{background:#ff4d6d;color:#fff;}
  .tag-detection{background:#ff8c00;color:#fff;}
  .tag-os{background:#00c896;color:#000;}
  .tag-default{background:#334155;color:#fff;}
  
  /* LANGUAGE */
  
  .repo-language{
  
  margin-top:10px;
  
  display:flex;
  
  align-items:center;
  
  gap:6px;
  
  font-size:13px;
  
  opacity:0.9;
  
  }
  
  .repo-language i{
  
  font-size:18px;
  
  }
  
  /* responsive */
  
  @media (max-width:768px){
  
  .hero-title{
  font-size:34px;
  }
  
  }