*{margin:0;padding:0;box-sizing:border-box}
:root{
  --cyan:#00f5ff;
  --green:#00ff88;
  --blue:#0080ff;
  --dark:#02060f;
  --mid:#071428;
  --card:#0a1a30;
  --text:#c8e6f0;
  --dim:#4a7a99;
}
html{scroll-behavior:smooth}
body{
  font-family:'Rajdhani',sans-serif;
  background:var(--dark);
  color:var(--text);
  overflow-x:hidden;
  cursor:none;
}

/* CURSOR */
#cur{
  width:20px;height:20px;
  border:1.5px solid var(--cyan);
  border-radius:50%;
  position:fixed;pointer-events:none;z-index:9999;
  transition:width .2s,height .2s,opacity .2s;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
}
#cur-dot{
  width:5px;height:5px;
  background:var(--cyan);
  border-radius:50%;
  position:fixed;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:transform .05s;
}
body:hover #cur{opacity:1}

/* CANVAS NETWORK */
#netCanvas{
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  z-index:0;pointer-events:none;
  opacity:.6;
}

/* SCAN LINE */
.scanline{
  position:fixed;top:0;left:0;
  width:100%;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  z-index:1;opacity:.4;
  animation:scan 8s linear infinite;
  pointer-events:none;
}
@keyframes scan{from{top:0}to{top:100vh}}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 3rem;
  background:rgba(2,6,15,.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(0,245,255,.12);
}
.nav-logo{
  font-family:'Space Mono',monospace;
  font-size:.9rem;
  color:var(--cyan);
  letter-spacing:.1em;
}
.nav-links{display:flex;gap:2rem}
.nav-links a{
  font-family:'Space Mono',monospace;
  font-size:.75rem;
  color:var(--dim);
  text-decoration:none;
  letter-spacing:.08em;
  transition:color .2s;
  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 .2s;
  transform-origin:left;
}
.nav-links a:hover{color:var(--cyan)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-status{
  font-family:'Space Mono',monospace;
  font-size:.7rem;color:var(--green);
  display:flex;align-items:center;gap:.5rem;
}
.status-dot{
  width:6px;height:6px;
  background:var(--green);
  border-radius:50%;
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,255,136,.4)}50%{opacity:.7;box-shadow:0 0 0 6px transparent}}

/* MAIN */
main{position:relative;z-index:10}

/* HERO */
#hero{
  min-height:100vh;
  display:flex;align-items:center;
  padding:8rem 3rem 4rem;
  position:relative;
  overflow:hidden;
}
.hero-visuals{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.hero-grid-lines{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(0,245,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.08) 1px, transparent 1px);
  background-size: 90px 90px, 90px 90px;
  opacity:0.18;
  animation: moveGrid 28s linear infinite;
}
.hero-scan-band{
  position:absolute;
  top:45%;
  left:-30%;
  width:160%;
  height:12%;
  background: linear-gradient(90deg, transparent, rgba(0,245,255,0.18), rgba(0,245,255,0.35), rgba(0,245,255,0.18), transparent);
  transform: rotate(5deg);
  filter: blur(1px);
  animation: scanBand 10s linear infinite;
}
.hero-diag-beams{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(135deg, rgba(0,245,255,0.06) 1px, transparent 1px),
    linear-gradient(225deg, rgba(255,80,255,0.05) 1px, transparent 1px);
  background-size:180px 180px, 180px 180px;
  opacity:.18;
  pointer-events:none;
  animation: driftGrid 24s linear infinite;
}
.hero-node-net{
  position:absolute;
  width:220px;
  height:220px;
  top:24%;
  right:12%;
  pointer-events:none;
}
.hero-node-net span{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(0,255,255,0.95);
  box-shadow:0 0 24px rgba(0,255,255,.55);
  animation: nodePulse 3.5s ease-in-out infinite alternate;
}
.hero-node-net .node-1{top:12%; left:18%; animation-delay:0s;}
.hero-node-net .node-2{top:56%; left:24%; animation-delay:.35s;}
.hero-node-net .node-3{top:28%; right:14%; animation-delay:.7s;}
.hero-node-net .node-4{bottom:18%; left:40%; animation-delay:1.1s;}
.hero-node-net .net-line{
  position:absolute;
  width:140%;
  height:140%;
  top:-20%;
  left:-20%;
  background:
    linear-gradient(90deg, transparent 48%, rgba(0,255,255,.24) 49%, rgba(0,255,255,.24) 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(0,255,255,.24) 49%, rgba(0,255,255,.24) 51%, transparent 52%);
  opacity:.24;
  pointer-events:none;
}
.hero-node-net .net-line.net-2{transform:rotate(-38deg); opacity:.16; top:-18%; left:-12%;}
.hero-node-net .net-line.net-3{transform:rotate(70deg); opacity:.14; top:-12%; left:-8%;}
.hero-scan-bars{
  position:absolute;
  bottom:10%;
  left:8%;
  display:flex;
  gap:12px;
  opacity:.72;
  pointer-events:none;
}
.hero-scan-bars span{
  width:8px;
  height:40px;
  background:linear-gradient(180deg, rgba(0,245,255,0.9), rgba(0,245,255,0.12));
  border-radius:999px;
  animation: pulseBar 1.6s ease-in-out infinite alternate;
}
.hero-scan-bars span:nth-child(2){height:62px; animation-delay:.2s;}
.hero-scan-bars span:nth-child(3){height:38px; animation-delay:.4s;}
.hero-scan-bars span:nth-child(4){height:54px; animation-delay:.6s;}
.hero-scan-bars span:nth-child(5){height:30px; animation-delay:.8s;}
.hero-shape{
  position:absolute;
  border:1px solid rgba(0,245,255,0.25);
  border-radius:18px;
  box-shadow:0 0 40px rgba(0,245,255,0.08);
  backdrop-filter: blur(3px);
  opacity:0.55;
  animation: floatShape 8s ease-in-out infinite alternate;
}
.hero-shape-1{
  width:140px;
  height:100px;
  top:12%;
  left:8%;
}
.hero-shape-2{
  width:180px;
  height:130px;
  top:28%;
  right:10%;
  animation-duration:10s;
}
.hero-shape-3{
  width:100px;
  height:100px;
  bottom:18%;
  left:20%;
  animation-duration:9s;
}
.hero-artwork{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-monitor{
  position:absolute;
  width:280px;
  height:180px;
  top:20%;
  left:12%;
  background:rgba(3,12,28,0.9);
  border:1px solid rgba(0,245,255,0.16);
  border-radius:24px;
  box-shadow:0 0 60px rgba(0,255,255,0.08);
  overflow:hidden;
  transform:rotate(-7deg);
  animation: floatMonitor 10s ease-in-out infinite alternate;
}
.monitor-header{
  height:24px;
  background:rgba(0,245,255,0.08);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
}
.monitor-header::before,
.monitor-header::after{
  content:'';
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
}
.monitor-header::before{background:#ff5f56;}
.monitor-header::after{background:#ffbd2e;}
.monitor-screen{
  position:absolute;
  top:32px;
  left:16px;
  right:16px;
  bottom:32px;
  background:radial-gradient(circle at top left, rgba(0,255,255,0.14), transparent 45%),
    linear-gradient(180deg, rgba(0,8,20,0.95), rgba(0,32,64,0.9));
  border-radius:18px;
  overflow:hidden;
}
.monitor-code-line{
  height:10px;
  border-radius:999px;
  background:rgba(0,255,255,0.2);
  margin-bottom:12px;
  opacity:0.85;
  transform-origin:left;
  animation: codePulse 3.5s ease-in-out infinite;
}
.monitor-code-line.line1{width:84%; animation-delay:0s;}
.monitor-code-line.line2{width:72%; animation-delay:0.2s;}
.monitor-code-line.line3{width:90%; animation-delay:0.4s;}
.monitor-code-line.line4{width:62%; animation-delay:0.6s;}
.monitor-base{
  position:absolute;
  bottom:-16px;
  left:40px;
  width:200px;
  height:24px;
  background:rgba(0,245,255,0.08);
  border-radius:12px;
}
.hero-chip{
  position:absolute;
  width:120px;
  height:120px;
  right:15%;
  top:15%;
  background:rgba(0,12,28,0.9);
  border:1px solid rgba(0,245,255,0.14);
  border-radius:24px;
  box-shadow:0 0 50px rgba(0,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  animation: floatMonitor 8s ease-in-out infinite alternate-reverse;
}
.chip-core{
  width:52px;
  height:52px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(0,255,255,0.8), rgba(0,145,255,0.35));
  box-shadow:0 0 20px rgba(0,255,255,0.4);
  position:relative;
}
.chip-core::before,
.chip-core::after{
  content:'';
  position:absolute;
  width:16px;
  height:4px;
  background:rgba(255,255,255,0.75);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(90deg);
}
.chip-core::after{transform:translate(-50%,-50%) rotate(0deg);}
.hero-data-stream{
  position:absolute;
  bottom:16%;
  right:20%;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.hero-data-stream span{
  display:block;
  width:160px;
  height:4px;
  background:linear-gradient(90deg, rgba(0,245,255,0.4), rgba(0,245,255,0.05));
  border-radius:999px;
  opacity:0.9;
  transform:translateX(0);
  animation: dataFlow 5s linear infinite;
}
.hero-data-stream span:nth-child(2){width:120px; animation-delay:0.4s;}
.hero-data-stream span:nth-child(3){width:180px; animation-delay:0.8s;}
.hero-data-stream span:nth-child(4){width:100px; animation-delay:1.2s;}

@keyframes floatMonitor{
  0%{transform:translateY(0) rotate(-7deg)}
  100%{transform:translateY(-18px) rotate(-9deg)}
}
@keyframes codePulse{
  0%,100%{opacity:0.6; transform:scaleX(0.98);}
  50%{opacity:1; transform:scaleX(1);}
}
@keyframes dataFlow{
  0%{transform:translateX(0); opacity:0.7;}
  50%{transform:translateX(-8px); opacity:1;}
  100%{transform:translateX(0); opacity:0.7;}
}
@keyframes driftGrid{
  0%{background-position:0 0,0 0;}
  100%{background-position:260px 260px,-260px -260px;}
}
@keyframes nodePulse{
  0%{transform:scale(1);}
  100%{transform:scale(1.28);box-shadow:0 0 30px rgba(0,255,255,.95);}
}
@keyframes pulseBar{
  0%{transform:scaleY(1);opacity:.7;}
  100%{transform:scaleY(1.45);opacity:1;}
}
@keyframes sectionPulse{
  0%,100%{opacity:.62;}
  50%{opacity:.85;}
}
@keyframes sectionDrift{
  0%{background-position:0 0,0 0,0 0;}
  100%{background-position:320px 0,0 0,180px 180px;}
}
@keyframes sectionGlow{
  0%{opacity:.45;}
  50%{opacity:.75;}
  100%{opacity:.5;}
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  max-width:1300px;
  margin:0 auto;
  width:100%;
  align-items:center;
  position:relative;
  z-index:1;
}
.hero-right{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.hero-profile-card{
  display:flex;
  align-items:center;
  gap:1rem;
  background:rgba(7,20,40,.88);
  border:1px solid rgba(0,245,255,.15);
  border-radius:18px;
  padding:1.2rem;
  backdrop-filter:blur(10px);
}
.profile-photo{
  width:96px;
  height:96px;
  border-radius:22px;
  object-fit:cover;
  border:2px solid rgba(0,245,255,.35);
}
.profile-summary{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.profile-summary p{
  font-size:.95rem;
  line-height:1.65;
  color:var(--text);
  opacity:.9;
}
.profile-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.profile-tag{
  font-family:'Space Mono',monospace;
  font-size:.7rem;
  padding:.35rem .7rem;
  border:1px solid rgba(0,245,255,.18);
  border-radius:999px;
  color:var(--cyan);
}
.terminal-header{
  font-family:'Space Mono',monospace;
  font-size:.75rem;
  color:var(--dim);
  margin-bottom:1.5rem;
  display:flex;align-items:center;gap:.5rem;
}
.terminal-header span{color:var(--green)}
.hero-name{
  font-size:clamp(2.8rem,5vw,5rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.01em;
  color:#fff;
  margin-bottom:.5rem;
}
.hero-name .accent{
  display:block;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-role{
  font-family:'Space Mono',monospace;
  font-size:.9rem;
  color:var(--dim);
  margin-bottom:2rem;
  min-height:1.4em;
}
.typed-cursor{
  display:inline-block;
  animation:blink .7s infinite;
  color:var(--cyan);
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes moveGrid{
  0%{background-position:0 0,0 0}
  100%{background-position:90px 90px,90px -90px}
}
@keyframes scanBand{
  0%{transform:translateX(-100%) rotate(5deg)}
  100%{transform:translateX(100%) rotate(5deg)}
}
@keyframes floatShape{
  0%{transform: translateY(0px) rotate(0deg)}
  100%{transform: translateY(-16px) rotate(2deg)}
}
.hero-desc{
  font-size:1.1rem;
  color:var(--text);
  line-height:1.7;
  max-width:480px;
  margin-bottom:2.5rem;
  opacity:.85;
}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}
.btn-primary{
  font-family:'Space Mono',monospace;
  font-size:.75rem;
  padding:.7rem 1.5rem;
  background:var(--cyan);
  color:var(--dark);
  border:none;
  cursor:pointer;
  letter-spacing:.05em;
  text-decoration:none;
  font-weight:700;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:opacity .2s,transform .2s;
  display:inline-block;
}
.btn-primary:hover{opacity:.85;transform:translateY(-2px)}
.btn-outline{
  font-family:'Space Mono',monospace;
  font-size:.75rem;
  padding:.7rem 1.5rem;
  background:transparent;
  color:var(--cyan);
  border:1px solid rgba(0,245,255,.4);
  cursor:pointer;
  letter-spacing:.05em;
  text-decoration:none;
  transition:all .2s;
  display:inline-block;
}
.btn-outline:hover{background:rgba(0,245,255,.07);border-color:var(--cyan)}

/* HERO RIGHT — terminal */
.terminal-window{
  background:rgba(7,20,40,.95);
  border:1px solid rgba(0,245,255,.2);
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 0 60px rgba(0,245,255,.08);
}
.terminal-bar{
  background:rgba(0,245,255,.05);
  padding:.6rem 1rem;
  display:flex;align-items:center;gap:.5rem;
  border-bottom:1px solid rgba(0,245,255,.1);
}
.t-dot{width:10px;height:10px;border-radius:50%}
.terminal-body{
  padding:1.2rem 1.5rem;
  font-family:'Space Mono',monospace;
  font-size:.75rem;
  line-height:2;
  min-height:340px;
}
.t-line{color:var(--dim);opacity:0;transform:translateY(4px);transition:all .4s}
.t-line.show{opacity:1;transform:none}
.t-prompt{color:var(--green)}
.t-cmd{color:#fff}
.t-out{color:var(--cyan);padding-left:1rem;display:block}
.t-ok{color:var(--green)}
.t-warn{color:#ffaa00}

/* SECTIONS */
section{
  padding:7rem 3rem;
  max-width:1300px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}
section::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.16;
  pointer-events:none;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter: blur(1.2px) saturate(1.3);
  transform: scale(1.02);
}
section > *{position:relative;z-index:1;}
section::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.65;
}

#hero::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.18;
  pointer-events:none;
  background-image:linear-gradient(180deg,rgba(2,6,15,.65),rgba(2,6,15,.9));
  filter: blur(1px) saturate(1.25);
}
#hero::after{
  background-image:
    radial-gradient(circle at 75% 22%, rgba(0,245,255,0.18), transparent 18%),
    radial-gradient(circle at 18% 75%, rgba(255,80,255,0.1), transparent 15%),
    repeating-linear-gradient(60deg, rgba(0,255,255,0.08), rgba(0,255,255,0.08) 1px, transparent 1px, transparent 30px);
  animation: sectionDrift 24s linear infinite;
}
#about::after{
  background-image:
    repeating-linear-gradient(0deg, rgba(0,255,255,0.05), rgba(0,255,255,0.05) 1px, transparent 1px, transparent 22px),
    radial-gradient(circle at 25% 18%, rgba(0,255,255,0.12), transparent 14%),
    radial-gradient(circle at 72% 62%, rgba(0,255,255,0.1), transparent 12%);
  animation: sectionPulse 18s ease-in-out infinite alternate;
}
#experience::after{
  background-image:
    repeating-linear-gradient(90deg, rgba(0,255,255,0.05), rgba(0,255,255,0.05) 1px, transparent 1px, transparent 18px),
    linear-gradient(180deg, rgba(0,255,255,0.08), transparent 15%),
    radial-gradient(circle at 30% 28%, rgba(0,255,255,0.14), transparent 14%);
  animation: sectionDrift 16s linear infinite;
}
#projects::after{
  background-image:
    repeating-linear-gradient(135deg, rgba(255,80,255,0.06), rgba(255,80,255,0.06) 1px, transparent 1px, transparent 26px),
    radial-gradient(circle at 20% 25%, rgba(0,255,255,0.1), transparent 14%),
    radial-gradient(circle at 82% 28%, rgba(0,200,255,0.12), transparent 12%);
  animation: sectionPulse 20s ease-in-out infinite alternate;
}
#certifications::after{
  background-image:
    radial-gradient(circle at 18% 30%, rgba(0,255,255,0.15), transparent 10%),
    radial-gradient(circle at 42% 70%, rgba(255,80,255,0.08), transparent 10%),
    repeating-linear-gradient(0deg, rgba(0,255,255,0.04), rgba(0,255,255,0.04) 1px, transparent 1px, transparent 16px);
  animation: sectionGlow 22s ease-in-out infinite alternate;
}
#contact::after{
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 1px, transparent 1px, transparent 20px),
    linear-gradient(90deg, rgba(0,255,255,0.06), transparent 20%),
    radial-gradient(circle at 30% 20%, rgba(0,255,255,0.12), transparent 12%);
  animation: sectionDrift 20s linear infinite;
}
#experience::before{
  background-image:linear-gradient(180deg,rgba(2,6,15,.72),rgba(2,6,15,.88));
}
#projects::before{
  background-image:linear-gradient(180deg,rgba(2,6,15,.72),rgba(2,6,15,.88));
}
#certifications::before{
  background-image:linear-gradient(180deg,rgba(2,6,15,.72),rgba(2,6,15,.88));
}
#contact::before{
  background-image:linear-gradient(180deg,rgba(2,6,15,.72),rgba(2,6,15,.88));
}

/* Section header */
.sec-tag{
  font-family:'Space Mono',monospace;
  font-size:.7rem;
  color:var(--cyan);
  letter-spacing:.15em;
  display:block;
  margin-bottom:.5rem;
}
.sec-title{
  font-size:clamp(1.8rem,3vw,2.8rem);
  font-weight:700;
  color:#fff;
  margin-bottom:3rem;
  position:relative;
  display:inline-block;
}
.sec-title::after{
  content:'';
  position:absolute;
  bottom:-8px;left:0;
  width:60px;height:2px;
  background:linear-gradient(90deg,var(--cyan),transparent);
}

/* ABOUT */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:start;
}
.about-text{
  font-size:1.1rem;
  line-height:1.8;
  color:var(--text);
  opacity:.9;
}
.about-text p{margin-bottom:1.2rem}
.stats-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.stat-card{
  background:var(--card);
  border:1px solid rgba(0,245,255,.12);
  padding:1.5rem;
  position:relative;
  overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
  transition:border-color .3s,transform .3s;
}
.stat-card:hover{border-color:rgba(0,245,255,.4);transform:translateY(-3px)}
.stat-card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  opacity:.5;
}
.stat-num{
  font-size:2rem;
  font-weight:700;
  color:var(--cyan);
  font-family:'Space Mono',monospace;
  display:block;
}
.stat-label{
  font-size:.85rem;
  color:var(--dim);
  display:block;
  margin-top:.3rem;
}

/* SKILL BARS */
.skill-list{margin-top:1rem}
.skill-row{margin-bottom:1.2rem}
.skill-meta{
  display:flex;justify-content:space-between;
  margin-bottom:.4rem;
}
.skill-name{font-size:.9rem;font-weight:600;color:#fff;letter-spacing:.05em}
.skill-pct{
  font-family:'Space Mono',monospace;
  font-size:.75rem;
  color:var(--cyan);
}
.skill-track{
  height:3px;
  background:rgba(0,245,255,.1);
  position:relative;
  overflow:hidden;
}
.skill-fill{
  height:100%;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  width:0;
  transition:width 1.2s cubic-bezier(.16,1,.3,1);
  position:relative;
}
.skill-fill::after{
  content:'';
  position:absolute;right:0;top:-2px;
  width:6px;height:6px;
  background:var(--cyan);
  border-radius:50%;
  transform:translateX(50%);
}

/* EXPERIENCE */
.exp-timeline{position:relative;padding-left:2rem}
.exp-timeline::before{
  content:'';
  position:absolute;left:.5rem;top:0;bottom:0;
  width:1px;
  background:linear-gradient(180deg,var(--cyan),rgba(0,245,255,.05));
}
.exp-item{
  position:relative;
  margin-bottom:2.5rem;
  opacity:0;
  transform:translateX(-20px);
}
.exp-item.in{opacity:1;transform:none;transition:all .6s cubic-bezier(.16,1,.3,1)}
.exp-dot{
  position:absolute;
  left:-1.7rem;top:.4rem;
  width:12px;height:12px;
  border:2px solid var(--cyan);
  border-radius:50%;
  background:var(--dark);
  box-shadow:0 0 10px rgba(0,245,255,.4);
}
.exp-dot.active{background:var(--cyan)}
.exp-date{
  font-family:'Space Mono',monospace;
  font-size:.7rem;
  color:var(--cyan);
  letter-spacing:.05em;
  margin-bottom:.3rem;
}
.exp-company{
  font-size:1.05rem;
  font-weight:700;
  color:#fff;
  margin-bottom:.2rem;
}
.exp-role{
  font-size:.95rem;
  color:var(--dim);
  margin-bottom:.5rem;
}
.exp-desc{
  font-size:.9rem;
  color:var(--text);
  opacity:.75;
  line-height:1.6;
}

/* PROJECTS */
.proj-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.5rem;
}
.proj-card{
  background:var(--card);
  border:1px solid rgba(0,245,255,.12);
  padding:2rem;
  position:relative;
  overflow:hidden;
  transition:all .3s;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
}
.proj-card::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);
  transition:transform .3s;
  transform-origin:left;
}
.proj-card:hover{
  border-color:rgba(0,245,255,.35);
  transform:translateY(-5px);
  background:rgba(10,26,48,1);
}
.proj-card:hover::after{transform:scaleX(1)}
.proj-icon{
  font-size:2rem;
  margin-bottom:1rem;
  display:block;
}
.proj-title{
  font-size:1.25rem;
  font-weight:700;
  color:#fff;
  margin-bottom:.75rem;
}
.proj-desc{
  font-size:1rem;
  color:var(--dim);
  line-height:1.75;
  margin-bottom:1.2rem;
}
.proj-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.proj-tag{
  font-family:'Space Mono',monospace;
  font-size:.75rem;
  padding:.4rem .75rem;
  background:rgba(0,128,255,.1);
  border:1px solid rgba(0,128,255,.3);
  color:#7fc5ff;
}
.proj-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
  margin-top:1rem;
}
.proj-demo-btn,
.proj-link{
  font-family:'Space Mono',monospace;
  font-size:.8rem;
  padding:.6rem 1rem;
  border-radius:999px;
  text-decoration:none;
  transition:all .2s;
}
.proj-demo-btn{
  background:var(--cyan);
  color:var(--dark);
  border:none;
  cursor:pointer;
}
.proj-demo-btn:hover{
  opacity:.9;
}
.proj-link{
  background:rgba(0,245,255,.08);
  color:var(--cyan);
  border:1px solid rgba(0,245,255,.15);
  display:inline-flex;
  align-items:center;
}
.proj-link:hover{
  background:rgba(0,245,255,.12);
}
.demo-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease;
  z-index:200;
}
.demo-modal{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) scale(.95);
  width:min(98vw,1000px);
  max-height:90vh;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease,transform .25s ease;
  z-index:210;
}
.demo-modal-card{
  background:rgba(8,18,34,.98);
  border:1px solid rgba(0,245,255,.18);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 25px 80px rgba(0,0,0,.5);
}
.demo-modal.open{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, -50%) scale(1);
}
.demo-modal-header{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
  padding:1.5rem 1.5rem 1rem;
}
.demo-modal-tag{
  font-family:'Space Mono',monospace;
  font-size:.75rem;
  color:var(--cyan);
  letter-spacing:.15em;
  margin-bottom:.5rem;
}
.demo-modal-title{
  font-size:1.5rem;
  margin:0;
  color:#fff;
  line-height:1.2;
}
.demo-modal-close{
  font-size:2rem;
  line-height:1;
  background:transparent;
  border:none;
  color:#fff;
  cursor:pointer;
}
.demo-modal-body{
  padding:1rem 1.5rem 1.5rem;
}
.demo-modal-description{
  font-size:1rem;
  color:var(--dim);
  line-height:1.8;
  margin-bottom:1rem;
}
.demo-code{
  width:100%;
  min-height:260px;
  background:rgba(0,14,28,.98);
  border:1px solid rgba(0,245,255,.12);
  color:#dff;
  font-family:'Courier New',monospace;
  font-size:.95rem;
  line-height:1.6;
  border-radius:14px;
  padding:1rem;
  resize:vertical;
  margin-bottom:1rem;
}
.demo-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-bottom:1rem;
}
.demo-btn{
  font-family:'Space Mono',monospace;
  font-size:.85rem;
  padding:.75rem 1rem;
  border:none;
  border-radius:999px;
  background:var(--cyan);
  color:var(--dark);
  cursor:pointer;
}
.demo-btn.outline{
  background:transparent;
  border:1px solid rgba(0,245,255,.2);
  color:var(--cyan);
}
.demo-console{
  min-height:160px;
  border-radius:14px;
  background:rgba(0,14,28,.98);
  border:1px solid rgba(0,245,255,.12);
  color:#fff;
  padding:1rem;
  overflow:auto;
  font-family:'Courier New',monospace;
  font-size:.92rem;
  line-height:1.6;
}

/* CERT SECTION */
.cert-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1.2rem;
}
.cert-card{
  background:var(--card);
  border:1px solid rgba(0,245,255,.12);
  padding:1.5rem;
  display:flex;align-items:flex-start;gap:1rem;
  transition:all .3s;
}
.cert-card:hover{border-color:rgba(0,245,255,.3);transform:translateX(4px)}
.cert-icon{
  font-size:1.8rem;
  flex-shrink:0;
  line-height:1;
}
.cert-name{
  font-size:1rem;
  font-weight:600;
  color:#fff;
  margin-bottom:.3rem;
}
.cert-issuer{
  font-family:'Space Mono',monospace;
  font-size:.7rem;
  color:var(--cyan);
  margin-bottom:.3rem;
}
.cert-date{font-size:.8rem;color:var(--dim)}

/* CONTACT */
#contact{text-align:center;padding:5rem 2rem 6rem}
.contact-inner{max-width:600px;margin:0 auto}
.contact-title{
  font-size:clamp(2rem,4vw,3.5rem);
  font-weight:700;
  color:#fff;
  margin-bottom:1rem;
}
.contact-sub{
  font-size:1.1rem;
  color:var(--dim);
  margin-bottom:2.5rem;
  line-height:1.7;
}
.contact-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem;
}
.contact-link{
  font-family:'Space Mono',monospace;
  font-size:.75rem;
  padding:.6rem 1.2rem;
  border:1px solid rgba(0,245,255,.2);
  color:var(--cyan);
  text-decoration:none;
  transition:all .2s;
  display:flex;align-items:center;gap:.5rem;
}
.contact-link:hover{background:rgba(0,245,255,.06);border-color:var(--cyan)}

/* FOOTER */
footer{
  text-align:center;
  padding:1.5rem;
  border-top:1px solid rgba(0,245,255,.08);
  font-family:'Space Mono',monospace;
  font-size:.7rem;
  color:var(--dim);
}

/* SCROLL INDICATOR */
.scroll-ind{
  position:fixed;right:1.5rem;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.5rem;
  z-index:100;
}
.si-dot{
  width:4px;height:4px;
  border-radius:50%;
  background:rgba(0,245,255,.3);
  cursor:pointer;
  transition:all .3s;
}
.si-dot.active{
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
  height:20px;
  border-radius:2px;
}

/* TOP BORDER ACCENT */
body::before{
  content:'';
  position:fixed;top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),var(--cyan),var(--green),transparent);
  z-index:200;
}

/* REVEAL CLASSES */
.reveal{opacity:0;transform:translateY(30px)}
.reveal.visible{animation:revealIn .8s cubic-bezier(.16,1,.3,1) forwards}
@keyframes revealIn{to{opacity:1;transform:none}}

/* GRID LINE DECORATION */
.grid-lines{
  position:absolute;
  inset:0;pointer-events:none;
  overflow:hidden;opacity:.03;
}

/* ========== ANIMASI TAMBAHAN (VIDEO REFERENCE) ========== */
/* Efek partikel bercahaya di sekitar kursor */
.cursor-particle {
  position: fixed;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, #0ff, #00aaff);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  filter: blur(1px);
  box-shadow: 0 0 6px #0ff;
  opacity: 0.8;
}

/* Efek neon pulse pada elemen interaktif */
.glow-text {
  transition: text-shadow 0.2s;
}
.glow-text:hover {
  text-shadow: 0 0 8px var(--cyan), 0 0 12px var(--blue);
}

/* Efek garis koneksi dinamis dari kursor */
#cursorLineCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

@media(max-width:768px){
  nav{padding:.8rem 1.5rem}
  .nav-links{display:none}
  .hero-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  section{padding:5rem 1.5rem}
  .stats-grid{grid-template-columns:1fr 1fr}
}