:root {
  --cyan: #00f5ff;
  --magenta: #ff0080;
  --yellow: #ffd700;
  --dark: #05050f;
  --dark2: #0a0a1a;
  --dark3: #0f0f28;
  --grid: rgba(0,245,255,0.03);
  --text: #c8d8e8;
  --dim: #4a6070;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--dark);
  color:var(--text);
  font-family:'Share Tech Mono',monospace;
  overflow-x:hidden;
  cursor:crosshair;
}

/* SCANLINES */
body::before{
  content:'';
  position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.15) 2px,rgba(0,0,0,0.15) 4px);
  pointer-events:none;
  z-index:9999;
}

/* GRID BACKGROUND */
body::after{
  content:'';
  position:fixed;inset:0;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
  z-index:0;
}

/* NOISE TEXTURE */
.noise{
  position:fixed;inset:0;
  opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:1;
}

/* CORNER DECORATIONS */
.corner{position:fixed;width:60px;height:60px;z-index:100;}
.corner-tl{top:16px;left:16px;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);}
.corner-tr{top:16px;right:16px;border-top:2px solid var(--magenta);border-right:2px solid var(--magenta);}
.corner-bl{bottom:16px;left:16px;border-bottom:2px solid var(--magenta);border-left:2px solid var(--magenta);}
.corner-br{bottom:16px;right:16px;border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan);}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;
  z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 3rem;
  background:rgba(5,5,15,0.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,245,255,0.1);
}

.nav-logo{
  font-family:'Orbitron',sans-serif;
  font-size:1.1rem;font-weight:900;
  color:var(--cyan);
  text-shadow:0 0 20px rgba(0,245,255,0.8);
  letter-spacing:3px;
}

.nav-logo span{color:var(--magenta);}

.nav-links{display:flex;gap:2.5rem;}

.nav-links a{
  color:var(--dim);
  text-decoration:none;
  font-size:0.75rem;
  letter-spacing:2px;
  text-transform:uppercase;
  transition:all 0.3s;
  position:relative;
}

.nav-links a::after{
  content:'';
  position:absolute;bottom:-4px;left:0;right:0;height:1px;
  background:var(--cyan);
  transform:scaleX(0);
  transition:transform 0.3s;
}

.nav-links a:hover{color:var(--cyan);text-shadow:0 0 10px var(--cyan);}
.nav-links a:hover::after{transform:scaleX(1);}

.nav-status{
  display:flex;align-items:center;gap:8px;
  font-size:0.65rem;color:var(--dim);letter-spacing:1px;
}

.status-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);
  animation:pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 4px var(--cyan);}
  50%{box-shadow:0 0 12px var(--cyan),0 0 24px rgba(0,245,255,0.5);}
}

/* HERO */
#hero{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  padding:6rem 3rem;
  z-index:2;
}

.hero-content{text-align:center;max-width:900px;}

.hero-tag{
  font-size:0.7rem;letter-spacing:4px;
  color:var(--magenta);
  text-transform:uppercase;
  margin-bottom:1.5rem;
  opacity:0;
  animation:fade-up 0.6s 0.3s forwards;
}

.hero-name{
  font-family:'Orbitron',sans-serif;
  font-size:clamp(2.5rem,8vw,7rem);
  font-weight:900;
  line-height:0.9;
  margin-bottom:1rem;
  opacity:0;
  animation:fade-up 0.6s 0.5s forwards;
}

.hero-name .line1{
  display:block;
  color:var(--cyan);
  text-shadow:0 0 30px rgba(0,245,255,0.7),0 0 60px rgba(0,245,255,0.3);
  animation:glitch 8s infinite 2s;
}

.hero-name .line2{
  display:block;
  -webkit-text-stroke:1px var(--magenta);
  color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 0 10px var(--magenta));
}

@keyframes glitch{
  0%,94%,100%{clip-path:none;transform:none;}
  95%{clip-path:inset(20% 0 60% 0);transform:translate(-4px,0);}
  96%{clip-path:inset(60% 0 10% 0);transform:translate(4px,0);}
  97%{clip-path:inset(40% 0 30% 0);transform:translate(-2px,0);}
  98%{clip-path:none;transform:none;}
}

.hero-subtitle{
  font-family:'Rajdhani',sans-serif;
  font-size:1.2rem;
  color:var(--dim);
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:2rem;
  opacity:0;
  animation:fade-up 0.6s 0.7s forwards;
}

.typing-container{
  font-size:0.9rem;
  color:var(--cyan);
  min-height:1.5rem;
  margin-bottom:3rem;
  opacity:0;
  animation:fade-up 0.6s 0.9s forwards;
}

.typing-container::after{
  content:'_';
  animation:blink 0.8s infinite;
}

@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}

.hero-cta{
  display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;
  opacity:0;
  animation:fade-up 0.6s 1.1s forwards;
}

.btn{
  padding:0.75rem 2.5rem;
  font-family:'Orbitron',sans-serif;
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  border:none;
  transition:all 0.3s;
  position:relative;
  overflow:hidden;
}

.btn::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
  transform:translateX(-100%);
  transition:transform 0.4s;
}

.btn:hover::before{transform:translateX(100%);}

.btn-primary{
  background:var(--cyan);
  color:var(--dark);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
}

.btn-primary:hover{
  background:#00ccdd;
  box-shadow:0 0 30px rgba(0,245,255,0.6);
  transform:translateY(-2px);
}

.btn-outline{
  background:transparent;
  color:var(--magenta);
  border:1px solid var(--magenta);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 100%,10px 100%);
}

.btn-outline:hover{
  background:rgba(255,0,128,0.1);
  box-shadow:0 0 30px rgba(255,0,128,0.4);
  transform:translateY(-2px);
}

.hero-scroll{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:0.6rem;letter-spacing:3px;color:var(--dim);
}

.scroll-line{
  width:1px;height:50px;
  background:linear-gradient(to bottom,var(--cyan),transparent);
  animation:scroll-line 2s ease-in-out infinite;
}

@keyframes scroll-line{
  0%{transform:scaleY(0);transform-origin:top;}
  50%{transform:scaleY(1);transform-origin:top;}
  51%{transform:scaleY(1);transform-origin:bottom;}
  100%{transform:scaleY(0);transform-origin:bottom;}
}

@keyframes fade-up{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:translateY(0);}
}

/* SECTIONS */
section{
  position:relative;z-index:2;
  padding:6rem 3rem;
  max-width:1200px;margin:0 auto;
}

.section-header{
  display:flex;align-items:center;gap:1.5rem;
  margin-bottom:4rem;
}

.section-num{
  font-family:'Orbitron',sans-serif;
  font-size:0.65rem;
  color:var(--magenta);
  letter-spacing:3px;
}

.section-title{
  font-family:'Orbitron',sans-serif;
  font-size:clamp(1.5rem,4vw,2.5rem);
  font-weight:900;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:2px;
}

.section-line{
  flex:1;height:1px;
  background:linear-gradient(to right,rgba(0,245,255,0.4),transparent);
}

/* ABOUT */
#about .about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start;
}

.about-text p{
  font-family:'Rajdhani',sans-serif;
  font-size:1.05rem;
  color:var(--text);
  line-height:1.9;
  margin-bottom:1.5rem;
}

.about-text p span{color:var(--cyan);}

.terminal-box{
  background:rgba(0,245,255,0.03);
  border:1px solid rgba(0,245,255,0.15);
  border-radius:2px;
  padding:1.5rem;
  position:relative;
}

.terminal-box::before{
  content:'// SYSTEM_INFO';
  position:absolute;top:-0.6rem;left:1rem;
  background:var(--dark);
  padding:0 0.5rem;
  font-size:0.65rem;
  color:var(--cyan);
  letter-spacing:2px;
}

.terminal-line{
  display:flex;gap:1rem;
  margin-bottom:0.6rem;
  font-size:0.8rem;
  align-items:baseline;
}

.terminal-key{
  color:var(--magenta);
  min-width:140px;
  font-size:0.75rem;
}

.terminal-val{color:var(--yellow);}

.terminal-comment{color:var(--dim);}

/* SKILLS */
#skills .skills-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
}

.skill-card{
  background:rgba(0,245,255,0.02);
  border:1px solid rgba(0,245,255,0.1);
  padding:1.8rem;
  position:relative;
  transition:all 0.3s;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}

.skill-card:hover{
  background:rgba(0,245,255,0.05);
  border-color:rgba(0,245,255,0.3);
  transform:translateY(-4px);
}

.skill-card::after{
  content:'';
  position:absolute;top:0;right:0;
  width:16px;height:16px;
  border-top:1px solid var(--cyan);
  border-right:1px solid var(--cyan);
}

.skill-category{
  font-family:'Orbitron',sans-serif;
  font-size:0.65rem;
  color:var(--magenta);
  letter-spacing:3px;
  margin-bottom:1rem;
}

.skill-name{
  font-size:0.9rem;
  color:#fff;
  margin-bottom:0.8rem;
}

.skill-bar{
  height:2px;
  background:rgba(255,255,255,0.05);
  position:relative;
  margin-bottom:0.3rem;
}

.skill-fill{
  height:100%;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  position:relative;
  animation:fill-bar 1.5s cubic-bezier(0.4,0,0.2,1) forwards;
  transform-origin:left;
}

@keyframes fill-bar{from{transform:scaleX(0);}to{transform:scaleX(1);}}

.skill-pct{
  font-size:0.65rem;
  color:var(--dim);
  text-align:right;
}

/* EXPERIENCE */
#experience .timeline{
  position:relative;
  padding-left:2rem;
}

#experience .timeline::before{
  content:'';
  position:absolute;left:0;top:0;bottom:0;
  width:1px;
  background:linear-gradient(to bottom,var(--cyan),var(--magenta),transparent);
}

.timeline-item{
  position:relative;
  margin-bottom:3rem;
  padding-left:2rem;
}

.timeline-item::before{
  content:'';
  position:absolute;left:calc(-2rem - 5px);top:6px;
  width:10px;height:10px;
  border:1px solid var(--cyan);
  background:var(--dark);
  transform:rotate(45deg);
  box-shadow:0 0 10px rgba(0,245,255,0.5);
}

.exp-date{
  font-size:0.65rem;
  color:var(--magenta);
  letter-spacing:3px;
  margin-bottom:0.4rem;
}

.exp-title{
  font-family:'Orbitron',sans-serif;
  font-size:1rem;
  font-weight:700;
  color:#fff;
  margin-bottom:0.3rem;
}

.exp-company{
  font-size:0.8rem;
  color:var(--cyan);
  margin-bottom:0.8rem;
}

.exp-desc{
  font-family:'Rajdhani',sans-serif;
  font-size:1rem;
  color:var(--text);
  line-height:1.7;
}

.exp-tags{
  display:flex;flex-wrap:wrap;gap:0.5rem;
  margin-top:1rem;
}

.tag{
  padding:0.2rem 0.8rem;
  border:1px solid rgba(0,245,255,0.2);
  font-size:0.65rem;
  color:var(--cyan);
  letter-spacing:1px;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}

/* PROJECTS */
#projects .projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:1.5rem;
}

.project-card{
  background:rgba(5,5,15,0.8);
  border:1px solid rgba(0,245,255,0.1);
  overflow:hidden;
  transition:all 0.3s;
  position:relative;
}

.project-card:hover{
  border-color:rgba(0,245,255,0.4);
  transform:translateY(-6px);
  box-shadow:0 20px 60px rgba(0,245,255,0.1),0 0 0 1px rgba(0,245,255,0.15);
}

.project-img{
  width:100%;height:160px;
  object-fit:cover;
  filter:saturate(0.3) brightness(0.6);
  transition:all 0.3s;
}

.project-card:hover .project-img{
  filter:saturate(0.6) brightness(0.8);
}

.project-img-placeholder{
  width:100%;height:160px;
  background:linear-gradient(135deg,rgba(0,245,255,0.05),rgba(255,0,128,0.05));
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',sans-serif;
  font-size:2rem;
  color:rgba(0,245,255,0.2);
  border-bottom:1px solid rgba(0,245,255,0.1);
}

.project-body{padding:1.5rem;}

.project-type{
  font-size:0.6rem;
  color:var(--magenta);
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:0.5rem;
}

.project-name{
  font-family:'Orbitron',sans-serif;
  font-size:0.9rem;
  font-weight:700;
  color:#fff;
  margin-bottom:0.7rem;
  letter-spacing:1px;
}

.project-desc{
  font-family:'Rajdhani',sans-serif;
  font-size:0.95rem;
  color:var(--dim);
  line-height:1.6;
  margin-bottom:1.2rem;
}

.project-links{display:flex;gap:1rem;}

.project-link{
  font-size:0.65rem;
  color:var(--cyan);
  text-decoration:none;
  letter-spacing:2px;
  text-transform:uppercase;
  transition:all 0.2s;
  display:flex;align-items:center;gap:4px;
}

.project-link:hover{
  color:#fff;
  text-shadow:0 0 8px var(--cyan);
}

/* CONTACT */
#contact .contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start;
}

.contact-info{display:flex;flex-direction:column;gap:1.5rem;}

.contact-item{
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.5rem;
  background:rgba(0,245,255,0.02);
  border:1px solid rgba(0,245,255,0.08);
  transition:all 0.3s;
  text-decoration:none;
}

.contact-item:hover{
  background:rgba(0,245,255,0.05);
  border-color:rgba(0,245,255,0.25);
  transform:translateX(6px);
}

.contact-icon{
  font-size:1.2rem;
  width:36px;text-align:center;
}

.contact-label{
  font-size:0.6rem;
  color:var(--dim);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:2px;
}

.contact-val{
  font-size:0.85rem;
  color:var(--cyan);
}

.contact-form{display:flex;flex-direction:column;gap:1rem;}

.form-group{position:relative;}

.form-group input,
.form-group textarea{
  width:100%;
  background:rgba(0,245,255,0.02);
  border:1px solid rgba(0,245,255,0.12);
  color:#fff;
  padding:0.9rem 1.2rem;
  font-family:'Share Tech Mono',monospace;
  font-size:0.85rem;
  outline:none;
  transition:all 0.3s;
  resize:none;
}

.form-group input::placeholder,
.form-group textarea::placeholder{color:var(--dim);}

.form-group input:focus,
.form-group textarea:focus{
  border-color:var(--cyan);
  background:rgba(0,245,255,0.04);
  box-shadow:0 0 0 1px rgba(0,245,255,0.1);
}

.form-group textarea{height:140px;}

/* FOOTER */
footer{
  position:relative;z-index:2;
  text-align:center;
  padding:3rem;
  border-top:1px solid rgba(0,245,255,0.08);
}

.footer-text{
  font-size:0.7rem;
  color:var(--dim);
  letter-spacing:2px;
}

.footer-text span{color:var(--magenta);}

/* DECORATIVE ELEMENTS */
.hex-grid{
  position:absolute;
  right:-100px;top:50%;transform:translateY(-50%);
  width:300px;height:300px;
  opacity:0.04;
  pointer-events:none;
}

.data-stream{
  position:fixed;right:1.5rem;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:4px;
  z-index:100;
  opacity:0.3;
}

.data-bit{
  font-size:0.5rem;
  color:var(--cyan);
  animation:data-flow 3s linear infinite;
}

.data-bit:nth-child(odd){animation-delay:1.5s;color:var(--magenta);}

@keyframes data-flow{
  0%{opacity:0;transform:translateY(-10px);}
  20%{opacity:1;}
  80%{opacity:1;}
  100%{opacity:0;transform:translateY(10px);}
}

/* CURSOR */
.cursor{
  position:fixed;pointer-events:none;z-index:9998;
  width:12px;height:12px;
  border:1px solid var(--cyan);
  transform:translate(-50%,-50%);
  transition:all 0.1s;
  mix-blend-mode:screen;
}

.cursor-trail{
  position:fixed;pointer-events:none;z-index:9997;
  width:4px;height:4px;
  background:var(--magenta);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:all 0.2s;
  opacity:0.6;
}

/* ANIMATIONS */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.7s,transform 0.7s;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* SCROLLBAR */
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--dark);}
::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:2px;}

/* RESPONSIVE */
@media(max-width:768px){
  nav{padding:1rem 1.5rem;}
  .nav-links{display:none;}
  section{padding:4rem 1.5rem;}
  #about .about-grid,
  #contact .contact-grid{grid-template-columns:1fr;}
  .data-stream{display:none;}
}

/* SELECTION */
::selection{background:rgba(0,245,255,0.2);color:var(--cyan);}
</style>