:root{
  --bg:#060a0f;--bg2:#0a1018;--bg3:#0d1520;
  --cyan:#00d4ff;--cyan2:#0099cc;--green:#00ff88;
  --red:#ff3355;--yellow:#ffcc00;--purple:#aa66ff;
  --text:#c8d8e8;--muted:#7d9ab8;--border:#1a2a3a;
  --mono:'JetBrains Mono',monospace;--sans:'Syne',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--mono);font-size:14px;line-height:1.6;
  overflow-x:hidden;cursor:none;
}

#cursor{
  position:fixed;width:22px;height:22px;
  border:1.5px solid var(--cyan);border-radius:50%;
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:transform 0.15s,border-color 0.2s,background 0.2s;
}
#cursor-dot{
  position:fixed;width:4px;height:4px;
  background:var(--cyan);border-radius:50%;
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  box-shadow:0 0 8px var(--cyan);
}

body::before{
  content:'';position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,212,255,0.012) 2px,rgba(0,212,255,0.012) 4px);
  pointer-events:none;z-index:100;
  animation: crtFlicker 0.15s infinite;
}
@keyframes crtFlicker {
  0% { opacity: 0.9; }
  50% { opacity: 1; }
  100% { opacity: 0.95; }
}

#bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}

@keyframes glitch{
  0%,88%,100%{clip-path:none;transform:none;text-shadow:none;}
  90%{clip-path:polygon(0 15%,100% 15%,100% 22%,0 22%);transform:translateX(-5px);text-shadow: 3px 0 var(--red), -3px 0 var(--cyan);}
  91%{clip-path:none;transform:none;text-shadow:none;}
  94%{clip-path:polygon(0 65%,100% 65%,100% 72%,0 72%);transform:translateX(5px);text-shadow: -3px 0 var(--red), 3px 0 var(--cyan);}
  95%{clip-path:none;transform:none;text-shadow:none;}
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,212,255,0.5)}50%{box-shadow:0 0 0 10px rgba(0,212,255,0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes scanDown{from{top:0}to{top:100vh}}
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}

.reveal{opacity:0;transform:translateY(60px);transition:opacity 0.9s ease,transform 0.9s ease}
.reveal.on{opacity:1;transform:translateY(0)}
.reveal-l{opacity:0;transform:translateX(-60px);transition:opacity 0.9s ease,transform 0.9s ease}
.reveal-l.on{opacity:1;transform:translateX(0)}
.reveal-r{opacity:0;transform:translateX(60px);transition:opacity 0.9s ease,transform 0.9s ease}
.reveal-r.on{opacity:1;transform:translateX(0)}

#scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--purple));
  z-index:9000;box-shadow:0 0 10px var(--cyan);
  transition:width 0.08s linear;pointer-events:none;
}

nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  padding:20px 60px;display:flex;justify-content:space-between;align-items:center;
  background:rgba(6,10,15,0.75);backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(26,42,58,0.5);transition:padding 0.3s;
}
nav.scrolled{padding:12px 60px}
.nav-logo{font-family:var(--mono);font-size:13px;color:var(--cyan);letter-spacing:2px;text-decoration:none}
.nav-logo span{color:var(--muted)}
.nav-links{display:flex;gap:36px}
.nav-links a{
  color:var(--muted);text-decoration:none;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;transition:color 0.2s;
  position:relative;padding-bottom:4px;
}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--cyan);transition:width 0.3s}
.nav-links a:hover,.nav-links a.active{color:var(--cyan)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:none;padding:4px;z-index:501;
}
.nav-toggle span{
  display:block;width:22px;height:1.5px;background:var(--cyan);
  transition:transform 0.3s,opacity 0.3s;
}
.nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

#back-top{
  position:fixed;bottom:52px;right:28px;z-index:600;
  width:40px;height:40px;background:rgba(6,10,15,0.9);
  border:1px solid var(--cyan2);color:var(--cyan);
  font-family:var(--mono);font-size:16px;cursor:none;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity 0.3s,border-color 0.3s,box-shadow 0.3s,transform 0.3s;
  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
}
#back-top.visible{opacity:1;pointer-events:auto}
#back-top:hover{border-color:var(--cyan);box-shadow:0 0 20px rgba(0,212,255,0.35);transform:translateY(-3px)}

.status-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:500;
  background:rgba(6,10,15,0.96);border-top:1px solid var(--border);
  padding:7px 60px;display:flex;gap:40px;align-items:center;
  font-size:11px;color:var(--muted);backdrop-filter:blur(10px);
}
.si2{display:flex;gap:8px;align-items:center}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:pulse 2s infinite}
.sdot.y{background:var(--yellow)}

#hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;
  padding:120px 80px 100px;z-index:2;overflow:hidden;
  background:transparent;
}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,212,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,0.025) 1px,transparent 1px);
  background-size:60px 60px;pointer-events:none;
}
.hero-scan{
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  animation:scanDown 5s linear infinite;pointer-events:none;opacity:0.28;
}
.hero-content{position:relative;max-width:700px}
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--cyan);font-size:11px;letter-spacing:4px;text-transform:uppercase;
  margin-bottom:28px;animation:slideIn 0.6s ease forwards;
}
.hero-tag::before{content:'[';color:rgba(0,212,255,0.4)}
.hero-tag::after{content:']';color:rgba(0,212,255,0.4)}
.hero-name{
  font-family:var(--sans);
  font-size:clamp(64px,9.5vw,124px);
  font-weight:800;line-height:0.88;letter-spacing:-2px;
  margin-bottom:0;animation:fadeUp 0.8s ease 0.1s both;
}
.hero-name .line1{display:block;color:#fff}
.hero-name .line2{
  display:block;color:transparent;
  -webkit-text-stroke:2px var(--cyan);
  animation:glitch 9s infinite 4s;
}
.hero-sub{
  font-size:13px;letter-spacing:2px;color:var(--muted);
  margin:28px 0 20px;animation:fadeUp 0.8s ease 0.3s both;
}
.hero-sub .sl{color:var(--cyan)}
.t-line{font-size:12px;margin-bottom:6px;color:var(--muted);animation:fadeUp 0.8s ease 0.5s both}
.t-prompt{color:var(--cyan)}.t-cmd{color:var(--text)}.t-out{color:var(--green)}
.hero-ctas{
  display:flex;gap:16px;margin-top:40px;
  animation:fadeUp 0.8s ease 0.65s both;flex-wrap:wrap;
}
.btn-p{
  background:var(--cyan);color:var(--bg);border:none;
  padding:14px 34px;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;cursor:none;text-decoration:none;
  transition:all 0.3s;clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
}
.btn-p:hover{box-shadow:0 0 50px rgba(0,212,255,0.5);transform:translateY(-3px)}
.btn-o{
  background:transparent;color:var(--cyan);border:1px solid var(--cyan2);
  padding:14px 34px;font-family:var(--mono);font-size:11px;
  letter-spacing:2px;text-transform:uppercase;cursor:none;text-decoration:none;
  transition:all 0.3s;clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
}
.btn-o:hover{background:rgba(0,212,255,0.08);border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 0 30px rgba(0,212,255,0.2)}

.hero-photo{
  position:absolute;right:80px;top:50%;transform:translateY(-50%);
  animation:fadeUp 1s ease 0.85s both;z-index:3;
}
.photo-frame{position:relative;width:240px;height:380px;}
.photo-frame picture {
  display:block; width:100%; height:100%;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
  overflow:hidden;
}
.photo-frame img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  filter:grayscale(10%) contrast(1.1);
  transform:scale(1.03);
}
.photo-frame::before{
  content:'';position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;
  background:linear-gradient(135deg,var(--cyan),var(--purple),transparent,var(--cyan));
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
  z-index:-1;animation:float 4s ease-in-out infinite;
}
.photo-frame::after{
  content:'';position:absolute;top:14px;left:14px;right:-14px;bottom:-14px;
  border:1px solid rgba(0,212,255,0.15);
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
  z-index:-2;
}
.photo-badge{
  position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);
  background:var(--bg);border:1px solid var(--cyan);color:var(--cyan);
  font-size:10px;letter-spacing:2px;padding:4px 14px;white-space:nowrap;
}
.photo-scan{
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  animation:scanDown 3s linear infinite;opacity:0.7;pointer-events:none;
}
@media(max-width:900px){.hero-photo{display:none}}

section{
  position:relative;z-index:2;
  padding:130px 80px;
  border-top:1px solid rgba(26,42,58,0.6);
}
#about{background:rgba(10,16,24,0.92)}
#skills{background:rgba(6,10,15,0.90)}
#experience{background:rgba(10,16,24,0.92)}
#projects{background:rgba(6,10,15,0.90)}
#certs{background:rgba(10,16,24,0.92);padding-bottom:60px}
#education{background:rgba(6,10,15,0.90)}
#contact{background:rgba(10,16,24,0.92);text-align:center;padding-bottom:140px}

.sh{display:flex;align-items:center;gap:20px;margin-bottom:70px}
.sn{font-size:11px;color:var(--cyan);letter-spacing:4px}
.st{font-family:var(--sans);font-size:clamp(28px,3.5vw,44px);font-weight:800;color:#fff}
.sl-line{flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}

.about-layout { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; max-width: 1100px; }
.about-img-container { flex: 0 0 260px; position: relative; }
.about-img-container img { width: 100%; border: 1px solid var(--border); filter: grayscale(10%) contrast(1.1); border-top: 3px solid var(--cyan); }
.about-img-container::before { content: ''; position: absolute; inset: -4px; border: 1px solid rgba(0,212,255,0.15); z-index: -1; }
.tw{
  flex: 1; min-width: 300px;
  background:rgba(13,21,32,0.95);border:1px solid var(--border);
  overflow:hidden;backdrop-filter:blur(8px);
}
.ttb{
  background:rgba(10,16,24,0.8);border-bottom:1px solid var(--border);
  padding:12px 18px;display:flex;align-items:center;gap:8px;
}
.td{width:10px;height:10px;border-radius:50%}
.td.r{background:#ff5f57}.td.y{background:#febc2e}.td.g{background:#28c840}
.tfn{margin-left:8px;font-size:12px;color:var(--muted);letter-spacing:1px}
.tb{padding:30px 36px;font-size:13px;line-height:2}
.tl{margin-bottom:2px}
.tc{color:var(--cyan)}.tv{color:var(--text)}.ts{color:var(--yellow)}
.tt{color:var(--purple)}.tm{color:var(--muted);font-style:italic}
.tg{margin-bottom:20px}.thi{color:var(--green)}.tcmd{color:var(--cyan)}

.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.sb{
  background:rgba(10,16,24,0.88);border:1px solid var(--border);
  padding:30px;position:relative;overflow:hidden;
  transition:border-color 0.3s,transform 0.3s,box-shadow 0.3s;
  backdrop-filter:blur(6px);
}
.sb::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;background:var(--cyan);transition:height 0.4s}
.sb:hover{border-color:rgba(0,212,255,0.4);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,212,255,0.06)}
.sb:hover::before{height:100%}
.sb.g::before{background:var(--green)}.sb.g:hover{border-color:rgba(0,255,136,0.4);box-shadow:0 20px 50px rgba(0,255,136,0.06)}
.sb.p::before{background:var(--purple)}.sb.p:hover{border-color:rgba(170,102,255,0.4);box-shadow:0 20px 50px rgba(170,102,255,0.06)}
.sb.y::before{background:var(--yellow)}.sb.y:hover{border-color:rgba(255,204,0,0.4);box-shadow:0 20px 50px rgba(255,204,0,0.06)}
.si{font-size:20px;margin-bottom:14px}
.sn2{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--cyan);margin-bottom:18px}
.sb.g .sn2{color:var(--green)}.sb.p .sn2{color:var(--purple)}.sb.y .sn2{color:var(--yellow)}
.stags{display:flex;flex-wrap:wrap;gap:8px}
.tag{
  font-size:11px;padding:4px 10px;background:rgba(13,21,32,0.8);
  border:1px solid var(--border);color:var(--muted);letter-spacing:0.5px;transition:all 0.2s;
}
.tag:hover{border-color:var(--cyan);color:var(--cyan)}
.tag.hot{border-color:var(--cyan);color:var(--cyan);background:rgba(0,212,255,0.05)}
.sb.g .tag.hot{border-color:var(--green);color:var(--green);background:rgba(0,255,136,0.05)}
.sb.g .tag:hover{border-color:var(--green);color:var(--green)}

.ec{display:grid;grid-template-columns:1fr 2fr;gap:70px;max-width:1100px}
.et{position:relative}
.el{position:absolute;left:0;top:12px;bottom:0;width:1px;background:var(--border)}
.ei{position:relative;padding-left:28px;margin-bottom:48px}
.edot{
  position:absolute;left:-6px;top:6px;width:12px;height:12px;
  background:var(--cyan);border:2px solid var(--bg);border-radius:50%;animation:pulse 2s infinite;
}
.eco{font-size:16px;font-weight:500;color:#fff;margin-bottom:4px}
.ero{font-size:11px;color:var(--cyan);letter-spacing:2px;margin-bottom:4px}
.epe{font-size:11px;color:var(--muted)}
.bl{list-style:none;display:flex;flex-direction:column;gap:14px}
.bl li{
  padding:16px 20px;background:rgba(13,21,32,0.8);
  border:1px solid var(--border);border-left:2px solid var(--cyan);
  font-size:13px;color:var(--text);line-height:1.7;
  transition:border-left-color 0.2s,transform 0.25s,box-shadow 0.25s;
  backdrop-filter:blur(4px);
}
.bl li:hover{border-left-color:var(--green);transform:translateX(6px);box-shadow:-6px 0 24px rgba(0,255,136,0.08)}
.bl li code{color:var(--yellow);background:rgba(255,204,0,0.08);padding:1px 6px;font-size:12px}

.pg{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.pc{
  background:rgba(10,16,24,0.88);border:1px solid var(--border);padding:30px;
  position:relative;overflow:hidden;transition:all 0.4s;cursor:none;
  backdrop-filter:blur(6px);
}
.pc::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,212,255,0.07) 0%,transparent 55%);
  opacity:0;transition:opacity 0.35s;pointer-events:none;
}
.pc::after{content:'';position:absolute;top:0;left:0;width:3px;height:0;background:var(--cyan);transition:height 0.4s;pointer-events:none}
.pc:hover{border-color:rgba(0,212,255,0.35);transform:translateY(-6px);box-shadow:0 30px 60px rgba(0,0,0,0.5)}
.pc:hover::before{opacity:1}
.pc:hover::after{height:100%}
.pid{font-size:10px;color:var(--muted);letter-spacing:3px;margin-bottom:10px}
.pn{font-family:var(--sans);font-size:18px;font-weight:700;color:#fff;margin-bottom:12px;line-height:1.3}
.pd{font-size:12px;color:var(--muted);line-height:1.8;margin-bottom:22px}
.pst{display:flex;flex-wrap:wrap;gap:6px}
.pt{font-size:10px;padding:3px 8px;letter-spacing:1px;border:1px solid}
.pt.aws{color:var(--yellow);border-color:rgba(255,204,0,0.3);background:rgba(255,204,0,0.04)}
.pt.oci{color:var(--cyan);border-color:rgba(0,212,255,0.3);background:rgba(0,212,255,0.04)}
.pt.py{color:var(--green);border-color:rgba(0,255,136,0.3);background:rgba(0,255,136,0.04)}
.pt.sec{color:var(--red);border-color:rgba(255,51,85,0.3);background:rgba(255,51,85,0.04)}
.pt.ml{color:var(--purple);border-color:rgba(170,102,255,0.3);background:rgba(170,102,255,0.04)}
.ptype{
  position:absolute;top:20px;right:20px;font-size:9px;color:var(--cyan);
  border:1px solid rgba(0,212,255,0.3);padding:3px 10px;letter-spacing:2px;
}
.ptype.per{color:var(--purple);border-color:rgba(170,102,255,0.3)}
.ptype.acad{color:var(--green);border-color:rgba(0,255,136,0.3)}
.ptype.int{color:var(--muted);border-color:rgba(74,96,128,0.3)}

.cg{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.cc{border:1px solid var(--border);padding:26px;transition:all 0.3s;backdrop-filter:blur(4px);position:relative;overflow:hidden}
.cc::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;background:var(--cyan);transition:height 0.4s}
.cc.ip::before{background:var(--yellow)}
.cc:hover::before{height:100%}
.cc:hover{transform:translateY(-3px);border-color:rgba(0,212,255,0.35);box-shadow:0 20px 50px rgba(0,212,255,0.06)}
.cc.ip:hover{border-color:rgba(255,204,0,0.5);box-shadow:0 20px 50px rgba(255,204,0,0.06)}
.cc.ip{border-color:rgba(255,204,0,0.5);background:rgba(255,204,0,0.02)}
.cc.dn{background:rgba(10,16,24,0.8)}
.cbg{font-size:9px;letter-spacing:2px;padding:3px 10px;margin-bottom:14px;display:inline-block}
.cc.ip .cbg{color:var(--yellow);border:1px solid var(--yellow)}
.cc.dn .cbg{color:var(--muted);border:1px solid var(--border)}
.cn{font-size:14px;color:#fff;font-weight:500;margin-bottom:4px}
.ci{font-size:12px;color:var(--muted)}
.cp{margin-top:18px;height:2px;background:var(--border);overflow:hidden}
.cpb{height:100%;background:linear-gradient(90deg,var(--yellow),var(--cyan))}

.edu-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.edu-item{position:relative}
.edu-dot{
  display:inline-flex;align-items:center;justify-content:center;
  width:37px;height:28px;border:1px solid var(--cyan);
  background:var(--bg2);font-size:10px;color:var(--cyan);letter-spacing:1px;
  clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
  margin-bottom:14px;
}
.educard{
  background:rgba(10,16,24,0.9);border:1px solid var(--border);border-top:3px solid var(--cyan);
  padding:32px 28px;transition:transform 0.3s,box-shadow 0.3s,border-color 0.3s;
  backdrop-filter:blur(6px);position:relative;overflow:hidden;height:100%;
}
.educard.inter{border-top-color:var(--purple)}
.educard.ssc{border-top-color:var(--muted)}
.educard::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;background:var(--cyan);transition:height 0.4s}
.educard.inter::before{background:var(--purple)}
.educard.ssc::before{background:var(--muted)}
.educard:hover::before{height:100%}
.educard:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,212,255,0.1);border-color:rgba(0,212,255,0.4)}
.educard.inter:hover{box-shadow:0 20px 40px rgba(170,102,255,0.1);border-color:rgba(170,102,255,0.4)}
.educard.ssc:hover{box-shadow:0 20px 40px rgba(74,96,128,0.15);border-color:rgba(74,96,128,0.4)}
.edd{font-family:var(--sans);font-size:22px;font-weight:700;color:#fff;margin-bottom:8px}
.eds{font-size:13px;color:var(--cyan);margin-bottom:4px}
.educard.inter .eds{color:var(--purple)}
.educard.ssc .eds{color:var(--muted)}
.edp{font-size:12px;color:var(--muted);margin-bottom:20px}
.edtags{display:flex;gap:8px;flex-wrap:wrap}
.edt{font-size:11px;padding:4px 12px;background:rgba(13,21,32,0.8);border:1px solid var(--border);color:var(--muted)}

@media(max-width:900px){
  .edu-timeline{grid-template-columns:1fr}
  .educard{padding:24px 20px}
}

.cpre{font-size:11px;color:var(--muted);letter-spacing:4px;text-transform:uppercase;margin-bottom:20px}
.ch{
  font-family:var(--sans);font-size:clamp(36px,6vw,72px);font-weight:800;
  margin-bottom:18px;
  background:linear-gradient(90deg,#fff,var(--cyan),var(--purple),var(--cyan),#fff);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:shimmer 5s linear infinite;
}
.cs{font-size:14px;color:var(--muted);margin-bottom:52px}
.clinks{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cl{
  display:flex;align-items:center;gap:10px;padding:18px 32px;
  border:1px solid var(--border);text-decoration:none;color:var(--text);
  font-size:13px;transition:all 0.3s;letter-spacing:1px;
  position:relative;overflow:hidden;backdrop-filter:blur(4px);
  background:rgba(10,16,24,0.8);
}
.cl::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,212,255,0.12),rgba(170,102,255,0.08));
  transform:scaleX(0);transform-origin:left;transition:transform 0.35s;z-index:-1;
}
.cl:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-3px)}
.cl:hover::before{transform:scaleX(1)}
.ico{font-size:16px}

footer{
  position:relative;z-index:2;
  background:rgba(6,10,15,0.98);border-top:1px solid var(--border);
  padding:28px 60px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;
  font-size:11px;color:var(--muted);letter-spacing:1.5px;
}
.sec-icon{color:var(--cyan)}.faws{color:var(--yellow)}

::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--cyan2)}
::-webkit-scrollbar-thumb:hover{background:var(--cyan)}

@media(max-width:900px){
  body{cursor:auto}
  #cursor,#cursor-dot{display:none}
  #back-top, a, button, .pc, .cl {cursor:pointer}
  nav{padding:14px 24px}
  nav.scrolled{padding:10px 24px}
  .nav-toggle{display:flex}
  .nav-links{
    display:none;position:fixed;top:0;left:0;right:0;bottom:0;
    flex-direction:column;align-items:center;justify-content:center;gap:32px;
    background:rgba(6,10,15,0.97);backdrop-filter:blur(20px);z-index:499;
  }
  .nav-links.open{display:flex}
  .nav-links a{font-size:15px;letter-spacing:3px}
  #hero{padding:100px 24px 80px}
  section{padding:90px 28px}
  .ec{grid-template-columns:1fr}
  .status-bar{padding:6px 24px;gap:16px;font-size:10px}
  #visitor-count{display:none !important}
  footer{padding:22px 24px}
  .about-layout{flex-direction:column}
  .about-img-container{flex:0 0 auto;width:100%;max-width:260px}
  .hero-name{font-size:clamp(32px,10vw,80px);word-wrap:break-word}
  .hero-ctas{flex-direction:column}
  .btn-p,.btn-o{padding:14px 20px;text-align:center}
  .sn{white-space:nowrap}
  .st{font-size:clamp(24px,7vw,44px);line-height:1.2}
  .tb{padding:20px 16px;font-size:11px;word-break:break-word}
  .ttb{padding:10px 12px}
}

@keyframes toastIn{from{opacity:0;transform:translateY(-20px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-20px) scale(0.95)}}
@keyframes scanBar{0%{left:-60%}100%{left:110%}}
@keyframes toastTimer{from{transform:scaleX(1)}to{transform:scaleX(0)}}

#resume-toast,
#email-toast,
#consult-toast{
  position:fixed;right:28px;z-index:9998;
  background:rgba(6,10,15,0.96);
  border:1px solid var(--cyan);
  backdrop-filter:blur(18px);
  padding:22px 28px 20px;
  max-width:340px;width:calc(100vw - 56px);
  clip-path:polygon(12px 0%,100% 0%,calc(100% - 12px) 100%,0% 100%);
  box-shadow:0 0 40px rgba(0,212,255,0.18),0 20px 60px rgba(0,0,0,0.6);
  animation:toastIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
  overflow:hidden;
}
#resume-toast{top:90px}
#email-toast{top:180px}
#consult-toast{top:270px}

@media(prefers-reduced-motion:reduce){
    .hero-name .line2,
  .hero-scan, .hero-grid,
  .photo-scan, .photo-frame::before,
  .edot, .sdot, .sdot.y,
  .t-scan, body::before { animation:none !important; }
    .reveal,.reveal-l,.reveal-r{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
    #bg-canvas { display:none !important; }
    *, *::before, *::after { transition-duration:0.01ms !important; }
}

#resume-toast.hide,
#email-toast.hide,
#consult-toast.hide{animation:toastOut 0.35s ease forwards}

#resume-toast .t-scan,
#email-toast .t-scan,
#consult-toast .t-scan{
  position:absolute;top:0;left:-60%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,0.06),transparent);
  animation:scanBar 2s linear infinite;pointer-events:none;
}
#resume-toast .t-header,
#email-toast .t-header,
#consult-toast .t-header{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
#resume-toast .t-icon,
#email-toast .t-icon,
#consult-toast .t-icon{font-size:20px;line-height:1;}

#resume-toast .t-label,
#email-toast .t-label,
#consult-toast .t-label{
  font-size:9px;letter-spacing:3px;color:var(--cyan);text-transform:uppercase;
  border:1px solid rgba(0,212,255,0.4);padding:2px 10px;
}
#resume-toast .t-close,
#email-toast .t-close,
#consult-toast .t-close{
  margin-left:auto;background:none;border:none;color:var(--muted);
  font-family:var(--mono);font-size:16px;cursor:pointer;
  line-height:1;padding:0 2px;transition:color 0.2s;
}
#resume-toast .t-close:hover,
#email-toast .t-close:hover,
#consult-toast .t-close:hover{color:var(--cyan)}

#resume-toast .t-title,
#email-toast .t-title,
#consult-toast .t-title{
  font-family:var(--sans);font-size:17px;font-weight:700;color:#fff;
  margin-bottom:6px;
}
#resume-toast .t-msg,
#email-toast .t-msg,
#consult-toast .t-msg{
  font-size:12px;color:var(--muted);line-height:1.7;margin-bottom:16px;
}
#resume-toast .t-msg span,
#email-toast .t-msg span,
#consult-toast .t-msg span{color:var(--cyan)}

#resume-toast .t-bar,
#email-toast .t-bar,
#consult-toast .t-bar{height:2px;background:var(--border);overflow:hidden;}

#resume-toast .t-bar-fill,
#email-toast .t-bar-fill,
#consult-toast .t-bar-fill{
  height:100%;width:100%;
  background:linear-gradient(90deg,var(--cyan),var(--purple));
  transform-origin:left;
  animation:toastTimer var(--toast-dur,4s) linear forwards;
}

#terminal { padding:80px 40px; max-width:980px; margin:0 auto; }

.trm-wrap{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 0 40px rgba(0,212,255,0.08), 0 0 0 1px rgba(0,212,255,0.05);
  transition:box-shadow .3s;
}
.trm-wrap:focus-within{
  box-shadow:0 0 60px rgba(0,212,255,0.18), 0 0 0 1px rgba(0,212,255,0.2);
}

.trm-chrome{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;
  background:var(--bg3);
  border-bottom:1px solid var(--border);
}
.trm-dot{
  width:12px;height:12px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 6px rgba(255,255,255,0.2);
}
.trm-title{
  flex:1;text-align:center;
  font-size:11px;color:var(--muted);letter-spacing:0.5px;
}

.trm-body{
  padding:20px 24px;
  min-height:240px;max-height:420px;
  overflow-y:auto;
  overflow-x:hidden;
  overflow-wrap:break-word;
  word-break:break-word;
  font-size:14px;line-height:1.8;
}
.trm-body::-webkit-scrollbar{width:4px}
.trm-body::-webkit-scrollbar-track{background:transparent}
.trm-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

.trm-line{
  display:flex;align-items:flex-start;gap:10px;
  margin-bottom:4px;
}
.trm-prompt{color:var(--green);font-weight:700;flex-shrink:0;}
.trm-cmd-echo{color:var(--cyan);}
.trm-output{
  padding:6px 0 14px 0;
  color:var(--text);
  border-left:2px solid var(--border);
  padding-left:16px;
  margin-left:2px;
  margin-bottom:12px;
}
.trm-err{color:var(--red);}

.trm-suggestions{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:12px 24px;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,0.2);
}
.trm-sug{
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
  font-family:var(--mono);font-size:11px;
  padding:4px 12px;border-radius:4px;
  cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.trm-sug:hover{
  border-color:var(--cyan);color:var(--cyan);
  background:rgba(0,212,255,0.06);
}

.trm-input-row{
  display:flex;align-items:center;gap:10px;
  padding:14px 24px;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,0.3);
}
.trm-input{
  flex:1;background:transparent;border:none;outline:none;
  font-family:var(--mono);font-size:14px;color:var(--cyan);
  caret-color:var(--green);
}
.trm-input::placeholder{color:var(--muted);font-size:12px;}

@media(max-width:640px){
  #terminal{padding:60px 20px;}
  .trm-suggestions{gap:6px;}
  .trm-body{padding:16px;overflow-x:auto;white-space:pre;}
  .trm-chrome{padding:8px 12px;}
  .trm-input-row{padding:12px 16px;}
  .clinks{flex-direction:column;width:100%;}
  .cl{width:100%;justify-content:flex-start;padding:14px 16px;word-break:break-word;font-size:11px;}
}

.mag-btn {
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), background 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.3s !important;
}
.mag-btn .btn-text {
  display: inline-block;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.mag-btn:hover {
    transform: none !important;
}

#boot-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--cyan);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.boot-text {
  width: 90%;
  max-width: 600px;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.6;
}
.boot-text .green { color: var(--green); }
.boot-text .red { color: var(--red); }
.boot-text .muted { color: var(--muted); }

/* Architecture Modal & Buttons */
.p-btn {
  padding: 8px 16px;
  font-size: 0.85rem;
  border: 1px solid var(--cyan);
  background: transparent;
  color: var(--cyan);
  cursor: pointer;
  border-radius: 4px;
}
.p-btn:hover {
  background: rgba(0,212,255,0.1);
}

.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(6, 10, 15, 0.95);
  backdrop-filter: blur(10px);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.modal.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.modal-close {
  position: absolute;
  top: 30px;
  right: 40px;
  background: transparent;
  border: none;
  color: var(--cyan);
  font-size: 3rem;
  cursor: pointer;
  transition: color 0.2s;
}
.modal-close:hover {
  color: #fff;
}
.modal-content {
  width: 90%;
  max-width: 1000px;
  height: 80vh;
  overflow: auto;
  border: 1px solid rgba(0,212,255,0.2);
  border-radius: 12px;
  background: rgba(10, 16, 24, 0.95);
  padding: 40px;
  box-shadow: 0 0 40px rgba(0,212,255,0.05);
}
.modal-title {
  color: var(--muted);
  font-family: var(--font-mono);
  margin-bottom: 30px;
  font-size: 0.9rem;
  text-align: center;
  letter-spacing: 2px;
}
.mermaid {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* ---- Light Mode ---- */
[data-theme="light"]{
  --bg:#ffffff;--bg2:#f4f8fb;--bg3:#eaf0f7;
  --text:#0a1628;--muted:#4a6080;--border:#d0dce8;
  --cyan:#0088bb;--cyan2:#006699;--green:#007a3d;
}
[data-theme="light"] .hero-name .line1{color:var(--text)}
[data-theme="light"] .hero-name .line2{-webkit-text-stroke-color:#00d4ff}
[data-theme="light"] #bg-canvas{display:none}
[data-theme="light"] .tw{color:#c8d8e8}
[data-theme="light"] .tw .tv{color:#c8d8e8}
[data-theme="light"] .tw .tc,[data-theme="light"] .tw .tcmd{color:#00d4ff}
[data-theme="light"] .tw .tm{color:#7d9ab8}
[data-theme="light"] .tw .thi{color:#00ff88}

body,#navbar,section,.pc,.cc,.bl li,.sb,.tw,.tb{
  transition:background-color 0.3s ease,color 0.3s ease,border-color 0.3s ease;
}

.theme-toggle{
  background:transparent;border:1px solid rgba(0,212,255,0.3);border-radius:6px;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--cyan);transition:border-color 0.2s,color 0.2s;flex-shrink:0;
}
.theme-toggle:hover{border-color:var(--cyan)}
.theme-toggle svg{width:15px;height:15px;pointer-events:none}
.theme-toggle .icon-sun{display:block}
.theme-toggle .icon-moon{display:none}
[data-theme="light"] .theme-toggle .icon-sun{display:none}
[data-theme="light"] .theme-toggle .icon-moon{display:block}