/* ============================
   ROOT & RESET
============================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--green); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }
::selection { background: var(--green); color: #000; }

.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

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

:root {
  --bg: #050a0e;
  --bg2: #0a1628;
  --bg3: #0d1f3c;
  --green: #00f5a0;
  --cyan: #00d9f5;
  --blue: #4f8ef7;
  --purple: #a855f7;
  --red: #f75f4f;
  --text: #e2e8f0;
  --muted: #64748b;
  --border: rgba(0,245,160,0.15);
  --card: rgba(10,22,40,0.85);
  --font-mono: 'Share Tech Mono', monospace;
  --font-head: 'Orbitron', sans-serif;
  --font-body: 'Inter', sans-serif;
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); overflow-x: hidden; line-height: 1.6; }
#particleCanvas { position: fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; }

/* Custom Cursor */
#cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background: var(--green); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); box-shadow: 0 0 10px var(--green); transition: transform 0.1s; }
#cursor-ring { position: fixed; top: 0; left: 0; width: 30px; height: 30px; border: 2px solid var(--green); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s, border-color 0.2s; box-shadow: 0 0 15px rgba(0, 245, 160, 0.3); }
section { position: relative; z-index: 1; padding: 100px 5%; }

/* NAV */
#navbar {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 5%;
  background: rgba(5,10,14,0.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border); transition: all 0.3s ease;
}
.nav-brand { font-family:var(--font-head); font-size:1.4rem; font-weight:900; color:var(--green); letter-spacing:2px; }
.brand-brackets { color: var(--cyan); }
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-link { font-family:var(--font-mono); font-size:0.85rem; color:var(--muted); text-decoration:none; transition:color 0.2s; letter-spacing:1px; }
.nav-link:hover, .active-link { color: var(--green); }
.nav-status { display:flex; align-items:center; gap:8px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2s infinite; }
.status-text { font-family:var(--font-mono); font-size:0.75rem; color:var(--green); }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.3)} }

/* HERO */
#hero { min-height:100vh; display:flex; align-items:center; justify-content:center; padding-top:80px; }
.hero-content { display:grid; grid-template-columns:1fr 1.3fr; gap:60px; align-items:center; max-width:1200px; width:100%; margin:0 auto; }

.terminal-window { background:#0d1117; border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 0 40px rgba(0,245,160,0.1),0 20px 60px rgba(0,0,0,0.5); }
.terminal-bar { background:#161b22; padding:12px 16px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border); }
.t-dot { width:12px; height:12px; border-radius:50%; }
.t-dot.red{background:#ff5f57} .t-dot.yellow{background:#febc2e} .t-dot.green{background:#28c840}
.terminal-title { font-family:var(--font-mono); font-size:0.8rem; color:var(--muted); margin-left:8px; }
.terminal-body { padding:20px; min-height:160px; }
.terminal-line { font-family:var(--font-mono); font-size:0.9rem; margin-bottom:6px; }
.t-prompt{color:var(--green);margin-right:8px} .t-cmd{color:var(--cyan)}
.terminal-output { font-family:var(--font-mono); font-size:0.85rem; color:#a3e635; margin-bottom:12px; padding-left:16px; }
.blink-cursor { animation:blink 1s step-end infinite; }
@keyframes blink { 50%{opacity:0} }

.hero-greeting { font-family:var(--font-mono); color:var(--green); font-size:0.9rem; letter-spacing:2px; margin-bottom:8px; }
.hero-name { font-family:var(--font-head); font-size:clamp(2rem,4vw,3.2rem); font-weight:900; line-height:1.1; margin-bottom:16px; background:linear-gradient(135deg,var(--green),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.glitch { position:relative; }
.glitch::before,.glitch::after { content:attr(data-text); position:absolute; top:0; left:0; width:100%; background:linear-gradient(135deg,var(--green),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.glitch::before { animation:glitch1 4s infinite; clip-path:polygon(0 20%,100% 20%,100% 40%,0 40%); }
.glitch::after { animation:glitch2 4s infinite; clip-path:polygon(0 60%,100% 60%,100% 80%,0 80%); }
@keyframes glitch1 { 0%,95%,100%{transform:translate(0)} 96%{transform:translate(-3px,1px)} 97%{transform:translate(3px,-1px)} 98%{transform:translate(-2px,2px)} }
@keyframes glitch2 { 0%,95%,100%{transform:translate(0)} 96%{transform:translate(3px,-1px)} 97%{transform:translate(-3px,1px)} 98%{transform:translate(2px,-2px)} }

.hero-role-wrap { display: flex; align-items: center; gap: 12px; font-size: 1.2rem; font-family: var(--font-mono); margin-bottom: 20px; flex-wrap: wrap; }
.role-prefix { color: var(--muted); }
.role-rotator { position: relative; display: inline-block; height: 30px; overflow: hidden; color: var(--green); flex: 1; min-width: 280px; }
.role-item { position: absolute; top: 100%; left: 0; white-space: nowrap; opacity: 0; transition: all 0.5s ease; }
.role-item.active { top: 0; opacity: 1; }
.role-item.prev { top: -100%; opacity: 0; }
.hero-sub { color:var(--muted); line-height:1.7; margin-bottom:32px; }
.highlight { color:var(--green); font-weight:600; }
.hero-cta { display:flex; gap:16px; margin-bottom:32px; flex-wrap:wrap; }
.btn-primary { padding:12px 28px; border-radius:8px; background:linear-gradient(135deg,var(--green),var(--cyan)); color:#000; font-weight:700; font-size:0.9rem; text-decoration:none; border:none; cursor:pointer; transition:all 0.3s ease; box-shadow:0 0 20px rgba(0,245,160,0.3); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 0 30px rgba(0,245,160,0.5); }
.btn-secondary { padding:12px 28px; border-radius:8px; border:1px solid var(--green); color:var(--green); font-weight:600; font-size:0.9rem; text-decoration:none; background:transparent; transition:all 0.3s ease; cursor:pointer; }
.btn-secondary:hover { background:rgba(0,245,160,0.1); }
.btn-resume { padding:12px 28px; border-radius:8px; border:1px solid var(--cyan); color:var(--cyan); font-family:var(--font-mono); font-weight:700; background:transparent; cursor:pointer; transition:all 0.3s ease; text-decoration:none; display:inline-block; min-width:220px; text-align:center; font-size:0.9rem; }
.btn-resume:hover { background:rgba(0,217,245,0.1); box-shadow:0 0 15px rgba(0,217,245,0.3); }
.w-full { width:100%; text-align:center; display:block; }
.hero-badges { display:flex; gap:12px; flex-wrap:wrap; }
.badge { display:flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; background:var(--card); border:1px solid var(--border); font-size:0.8rem; color:var(--muted); }

.scroll-indicator { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0.7; }
.scroll-mouse { width: 26px; height: 40px; border: 2px solid var(--green); border-radius: 20px; display: flex; justify-content: center; padding-top: 6px; }
.scroll-wheel { width: 4px; height: 8px; background: var(--green); border-radius: 2px; animation: scrollWheel 1.5s infinite; }
.scroll-indicator span { font-family:var(--font-mono); font-size:0.65rem; letter-spacing:3px; color:var(--green); }
@keyframes scrollWheel { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }

/* SECTION HEADER */
.section-header { display:flex; align-items:center; gap:16px; margin-bottom:60px; }
.section-tag { font-family:var(--font-mono); font-size:0.8rem; color:var(--green); opacity:0.7; }
.section-header h2 { font-family:var(--font-head); font-size:clamp(1.5rem,3vw,2.2rem); font-weight:700; background:linear-gradient(135deg,#fff,var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.section-line { flex:1; height:1px; background:linear-gradient(to right,var(--border),transparent); }

/* ABOUT */
#about { background:linear-gradient(180deg,transparent,rgba(10,22,40,0.3),transparent); }
.about-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:60px; align-items:start; max-width:1100px; }
.about-avatar { display:flex; flex-direction:column; align-items:center; gap:32px; }
.avatar-ring { position:relative; width:180px; height:180px; }
.ring-svg { position:absolute; top:0;left:0; width:100%;height:100%; animation:spin 8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.avatar-inner { position:absolute; top:10px;left:10px;right:10px;bottom:10px; border-radius:50%; background:linear-gradient(135deg,var(--bg2),var(--bg3)); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; }
.avatar-initials { font-family:var(--font-head); font-size:2.5rem; font-weight:900; background:linear-gradient(135deg,var(--green),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.about-stats { display:flex; gap:16px; }
.stat-card { display:flex; flex-direction:column; align-items:center; padding:16px 20px; border-radius:10px; background:var(--card); border:1px solid var(--border); min-width:70px; }
.stat-num { font-family:var(--font-head); font-size:1.5rem; font-weight:900; color:var(--green); }
.stat-label { font-size:0.7rem; color:var(--muted); margin-top:2px; }
.about-text { display:flex; flex-direction:column; gap:16px; }
.about-para { color:var(--muted); line-height:1.8; }
.about-para strong { color:var(--text); }
.about-highlights { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; }
.highlight-item { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:8px; background:var(--card); border:1px solid var(--border); font-size:0.85rem; color:var(--text); transition:border-color 0.3s; }
.highlight-item:hover { border-color:var(--green); }
.hl-icon { font-size:1.2rem; }

/* SKILLS */
.skills-categories { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:48px; max-width:1100px; }
.skill-cat { padding:24px; border-radius:12px; background:var(--card); border:1px solid var(--border); transition:border-color 0.3s; }
.skill-cat:hover { border-color:var(--green); }
.cat-title { font-family:var(--font-mono); font-size:0.9rem; color:var(--cyan); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.skill-pills { display:flex; flex-wrap:wrap; gap:8px; }
.pill { padding:4px 12px; border-radius:20px; font-size:0.78rem; background:rgba(0,245,160,0.08); border:1px solid rgba(0,245,160,0.2); color:var(--green); font-family:var(--font-mono); transition:all 0.2s; }
.pill:hover { background:rgba(0,245,160,0.2); transform:translateY(-1px); }
.accent-pill { background:rgba(0,217,245,0.08); border-color:rgba(0,217,245,0.2); color:var(--cyan); }
.accent-pill:hover { background:rgba(0,217,245,0.2); }
.blue-pill { background:rgba(79,142,247,0.08); border-color:rgba(79,142,247,0.2); color:var(--blue); }
.blue-pill:hover { background:rgba(79,142,247,0.2); }

.radar-container { width:100%; max-width:450px; margin:0 auto; position:relative; aspect-ratio:1/1; }
.radar-container canvas { width:100%; height:100%; display:block; }

/* PROJECTS */
#projects { background:linear-gradient(180deg,transparent,rgba(10,22,40,0.4),transparent); }
.projects-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:1100px; }
.project-card { position:relative; overflow:hidden; padding:28px; border-radius:16px; background:var(--card); border:1px solid var(--border); transition:all 0.4s ease; transform-style: preserve-3d; perspective: 1000px; }
.project-card > * { position: relative; z-index: 1; transform: translateZ(20px); transition: transform 0.3s; }
.card-glow, .card-border-anim { transform: translateZ(0); }
.project-card:hover { border-color:var(--green); transform:translateY(-4px); }
.card-glow { position:absolute; top:-40px; right:-40px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle,rgba(0,245,160,0.15),transparent 70%); pointer-events:none; }
.card-glow.glow-blue { background:radial-gradient(circle,rgba(79,142,247,0.15),transparent 70%); }
.card-glow.glow-purple { background:radial-gradient(circle,rgba(168,85,247,0.15),transparent 70%); }
.card-glow.glow-red { background:radial-gradient(circle,rgba(247,95,79,0.15),transparent 70%); }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card-icon-wrap { font-size:2rem; }
.card-badges { display:flex; gap:8px; }
.card-badge { padding:2px 10px; border-radius:20px; font-size:0.7rem; font-family:var(--font-mono); }
.card-badge.security { background:rgba(0,245,160,0.1); color:var(--green); border:1px solid rgba(0,245,160,0.2); }
.card-badge.fullstack { background:rgba(0,217,245,0.1); color:var(--cyan); border:1px solid rgba(0,217,245,0.2); }
.card-badge.platform { background:rgba(79,142,247,0.1); color:var(--blue); border:1px solid rgba(79,142,247,0.2); }
.card-badge.desktop { background:rgba(168,85,247,0.1); color:var(--purple); border:1px solid rgba(168,85,247,0.2); }
.card-badge.enterprise { background:rgba(247,95,79,0.1); color:var(--red); border:1px solid rgba(247,95,79,0.2); }
.card-title { font-family:var(--font-head); font-size:1.3rem; font-weight:700; color:var(--text); margin-bottom:4px; }
.card-sub { font-family:var(--font-mono); font-size:0.8rem; color:var(--green); margin-bottom:12px; }
.card-desc { font-size:0.88rem; color:var(--muted); line-height:1.7; margin-bottom:16px; }
.card-tech { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.card-tech span { padding:2px 10px; border-radius:4px; font-size:0.72rem; background:rgba(255,255,255,0.06); color:var(--text); font-family:var(--font-mono); border:1px solid var(--border); }
.card-features { display:flex; flex-direction:column; gap:6px; }
.feature-item { font-size:0.8rem; color:var(--muted); }

/* CARD BORDER TRACE EFFECT */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.card-border-anim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 16px; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.card-border-anim::before { content: ""; position: absolute; inset: -1px; border-radius: 17px; background: conic-gradient(from var(--angle), transparent 70%, var(--green)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; animation: borderSpin 4s linear infinite; }
.blue-border::before { background: conic-gradient(from var(--angle), transparent 70%, var(--blue)); }
.purple-border::before { background: conic-gradient(from var(--angle), transparent 70%, var(--purple)); }
.red-border::before { background: conic-gradient(from var(--angle), transparent 70%, var(--red)); }
.project-card:hover .card-border-anim { opacity: 1; }
@keyframes borderSpin { to { --angle: 360deg; } }

/* TIMELINE */
.timeline { position:relative; max-width:900px; }
.timeline::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:linear-gradient(to bottom,var(--green),transparent); transform:translateX(-50%); }
.timeline-item { display:flex; margin-bottom:40px; position:relative; }
.timeline-item.left { justify-content:flex-start; padding-right:calc(50% + 30px); }
.timeline-item.right { justify-content:flex-end; padding-left:calc(50% + 30px); }
.timeline-dot { position:absolute; left:50%; top:20px; width:14px; height:14px; border-radius:50%; background:var(--green); border:2px solid var(--bg); transform:translateX(-50%); box-shadow:0 0 10px var(--green); z-index:2; }
.timeline-dot.accent-dot { background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.timeline-dot.blue-dot { background:var(--blue); box-shadow:0 0 10px var(--blue); }
.timeline-card { padding:20px 24px; border-radius:12px; background:var(--card); border:1px solid var(--border); transition:border-color 0.3s; width:100%; }
.timeline-card:hover { border-color:var(--green); }
.tl-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; flex-wrap:wrap; gap:8px; }
.tl-type { font-family:var(--font-mono); font-size:0.75rem; padding:2px 10px; border-radius:20px; }
.tl-type.work { background:rgba(0,245,160,0.1); color:var(--green); border:1px solid rgba(0,245,160,0.2); }
.tl-type.edu { background:rgba(0,217,245,0.1); color:var(--cyan); border:1px solid rgba(0,217,245,0.2); }
.tl-type.security { background:rgba(247,95,79,0.1); color:var(--red); border:1px solid rgba(247,95,79,0.2); }
.tl-type.intern { background:rgba(168,85,247,0.1); color:var(--purple); border:1px solid rgba(168,85,247,0.2); }
.tl-date { font-family:var(--font-mono); font-size:0.75rem; color:var(--muted); }
.tl-title { font-family:var(--font-head); font-size:1rem; font-weight:700; color:var(--text); margin-bottom:4px; }
.tl-org { font-size:0.85rem; color:var(--green); margin-bottom:10px; }
.tl-detail { font-size:0.85rem; color:var(--muted); }
.tl-bullets { list-style:none; display:flex; flex-direction:column; gap:6px; }
.tl-bullets li { font-size:0.83rem; color:var(--muted); padding-left:14px; position:relative; }
.tl-bullets li::before { content:'›'; position:absolute; left:0; color:var(--green); }

/* CONTACT */
.contact-wrap { display:grid; grid-template-columns:1fr 1fr; gap:60px; max-width:1100px; }
.contact-intro { font-size:1.05rem; color:var(--muted); line-height:1.8; margin-bottom:28px; }
.contact-intro strong { color:var(--text); }
.contact-links { display:flex; flex-direction:column; gap:14px; }
.contact-card { display:flex; align-items:center; gap:16px; padding:16px 20px; border-radius:10px; background:var(--card); border:1px solid var(--border); text-decoration:none; transition:all 0.3s; }
.contact-card:hover { border-color:var(--green); transform:translateX(4px); }
.cc-icon { font-size:1.5rem; }
.cc-label { font-size:0.75rem; color:var(--muted); font-family:var(--font-mono); }
.cc-value { font-size:0.9rem; color:var(--text); }
.contact-form-wrap { padding:32px; border-radius:16px; background:var(--card); border:1px solid var(--border); }
.form-title { font-family:var(--font-head); font-size:1.1rem; color:var(--text); margin-bottom:24px; }
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-group label { font-size:0.8rem; color:var(--muted); font-family:var(--font-mono); }
.form-group input,.form-group textarea,.form-group select { padding:12px 16px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid var(--border); color:var(--text); font-family:var(--font-body); font-size:0.9rem; outline:none; resize:none; transition:border-color 0.3s; }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus { border-color:var(--green); }
.form-group select option { background: var(--bg2); color: var(--text); }

/* OVERDRIVE MODE */
body.overdrive { --green: #ff003c; --cyan: #ff003c; animation: shake 0.5s ease-in-out infinite; }
body.overdrive #particleCanvas { filter: hue-rotate(150deg); }
.glitch-overlay { position: fixed; inset: 0; background: rgba(255, 0, 60, 0.1); pointer-events: none; z-index: 9999; display: none; align-items: center; justify-content: center; }
body.overdrive .glitch-overlay { display: flex; }
.glitch-text-huge { font-family: var(--font-head); font-size: clamp(3rem, 8vw, 6rem); font-weight: 900; color: #ff003c; text-shadow: 4px 4px 0px rgba(0,0,0,0.8); animation: glitch2 0.2s infinite; text-align: center; }
@keyframes shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2px, 2px); } 50% { transform: translate(2px, -2px); } 75% { transform: translate(-2px, -2px); } }

/* FOOTER */
#footer { position:relative; z-index:1; padding:40px 5%; border-top:1px solid var(--border); text-align:center; }
.footer-inner { display:flex; flex-direction:column; align-items:center; gap:8px; }
.footer-brand { font-family:var(--font-head); font-size:1.2rem; color:var(--green); margin-bottom:4px; }
.footer-copy { font-size:0.85rem; color:var(--muted); }
.footer-stack { font-family:var(--font-mono); font-size:0.75rem; color:rgba(100,116,139,0.5); }

/* RESPONSIVE */
@media (max-width:900px) {
  .hero-content { grid-template-columns:1fr; gap:40px; }
  .about-grid { grid-template-columns:1fr; }
  .skills-categories,.proficiency-grid,.projects-grid,.contact-wrap { grid-template-columns:1fr; }
  .timeline::before { left:20px; }
  .timeline-item.left,.timeline-item.right { padding:0 0 0 50px; justify-content:flex-start; }
  .timeline-dot { left:20px; }
  .nav-links { display:none; }
}