*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --green: #00ff41; --green-dim: #00cc33; --green-glow: rgba(0,255,65,.3);
  --red: #ff0040; --cyan: #00e5ff; --yellow: #ffd700;
  --bg: #000000; --bg2: #020d02; --text: #c0ffc0; --font: 'JetBrains Mono', monospace;
}
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--green); font-family: var(--font); overflow-x: hidden; }
body::after {
  content:''; position:fixed; inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px);
  pointer-events:none; z-index:9998;
}

/* NAV */
nav { position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;justify-content:space-between;align-items:center;padding:.9rem 2.5rem;border-bottom:1px solid rgba(0,255,65,.15);background:rgba(0,0,0,.88);backdrop-filter:blur(10px); }
.nav-logo { font-size:.82rem;letter-spacing:.15em; }
.nav-logo em { color:var(--red);font-style:normal; }
.nav-remote { font-size:.65rem;border:1px solid var(--green);color:var(--green);padding:.2rem .65rem;letter-spacing:.12em;animation:pulseGreen 2.5s infinite; }
@keyframes pulseGreen { 0%,100%{box-shadow:0 0 0 0 rgba(0,255,65,.4)} 50%{box-shadow:0 0 0 6px transparent} }
nav ul { list-style:none;display:flex;gap:2rem;align-items:center; }
nav ul li a { color:rgba(0,255,65,.5);text-decoration:none;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;transition:color .2s,text-shadow .2s; }
nav ul li a:hover { color:var(--green);text-shadow:0 0 10px var(--green-glow); }

/* HERO */
#hero { position:relative;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 7vw;overflow:hidden; }
#matrix-canvas { position:absolute;inset:0;width:100%;height:100%;opacity:.13; }
.hero-content { position:relative;z-index:2; }
.hero-pre { font-size:.78rem;color:var(--green-dim);letter-spacing:.2em;margin-bottom:1.2rem;opacity:.65; }
.hero-name { font-size:clamp(2.8rem,8vw,7rem);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--green);text-shadow:0 0 30px var(--green-glow),0 0 80px rgba(0,255,65,.08);position:relative;display:inline-block; }
@keyframes glitch1 { 0%{clip-path:inset(5% 0 80% 0);transform:translateX(-5px)} 20%{clip-path:inset(50% 0 30% 0);transform:translateX(5px)} 40%{clip-path:inset(20% 0 60% 0);transform:translateX(-3px)} 60%{clip-path:inset(75% 0 5% 0);transform:translateX(4px)} 80%{clip-path:inset(35% 0 45% 0);transform:translateX(-4px)} 100%{clip-path:inset(90% 0 0 0);transform:translateX(0)} }
@keyframes glitch2 { 0%{clip-path:inset(80% 0 5% 0);transform:translateX(5px)} 25%{clip-path:inset(10% 0 70% 0);transform:translateX(-5px)} 50%{clip-path:inset(45% 0 35% 0);transform:translateX(3px)} 75%{clip-path:inset(60% 0 20% 0);transform:translateX(-3px)} 100%{clip-path:inset(0 0 88% 0);transform:translateX(0)} }
.hero-name::before,.hero-name::after { content:attr(data-text);position:absolute;inset:0;width:100%;height:100%; }
.hero-name::before { animation:glitch1 3.8s infinite steps(1);color:var(--red);opacity:.75; }
.hero-name::after  { animation:glitch2 4.3s infinite steps(1) .5s;color:var(--cyan);opacity:.55; }
.hero-title { font-size:clamp(.95rem,2.2vw,1.3rem);color:var(--text);margin-top:1.2rem;font-weight:300;letter-spacing:.06em;min-height:2rem; }
.typed-cursor { display:inline-block;width:10px;height:1.15em;background:var(--green);margin-left:3px;animation:blink .7s step-end infinite;vertical-align:text-bottom; }
@keyframes blink { 50%{opacity:0} }
.hero-stats { margin-top:1.8rem;display:flex;gap:2.5rem;flex-wrap:wrap; }
.hero-stat { display:flex;flex-direction:column;gap:.2rem; }
.hero-stat-num { font-size:clamp(1.4rem,3vw,2rem);font-weight:800;color:var(--green);line-height:1; }
.hero-stat-num span { color:var(--red); }
.hero-stat-label { font-size:.63rem;color:rgba(0,255,65,.45);letter-spacing:.15em;text-transform:uppercase; }
.hero-sub { margin-top:1.4rem;font-size:.76rem;color:rgba(0,255,65,.38);letter-spacing:.12em; }
.hero-cta { margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap; }

/* BTNS */
.btn { font-family:var(--font);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;padding:.75rem 1.8rem;border:1px solid var(--green);background:transparent;color:var(--green);text-decoration:none;transition:all .25s;position:relative;overflow:hidden;display:inline-block; }
.btn::before { content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--green);transition:left .3s;z-index:-1; }
.btn:hover { color:#000;text-shadow:none; }
.btn:hover::before { left:0; }
.btn-ghost { border-color:rgba(0,255,65,.25);color:rgba(0,255,65,.5); }
.btn-ghost:hover { border-color:var(--green);color:#000; }
.btn-cyan { border-color:var(--cyan);color:var(--cyan); }
.btn-cyan::before { background:var(--cyan); }
.btn-cyan:hover { color:#000; }

/* SECTIONS */
section { padding:6rem 7vw; }
.divider { border:none;height:1px;background:linear-gradient(90deg,transparent,rgba(0,255,65,.2),transparent); }
.section-cmd { font-size:.72rem;color:var(--red);letter-spacing:.2em;margin-bottom:.5rem; }
.section-title { font-size:clamp(2rem,5vw,3.5rem);font-weight:800;letter-spacing:-.02em;color:var(--green);text-shadow:0 0 20px var(--green-glow);margin-bottom:2.5rem; }

/* ABOUT */
#about { background:var(--bg2); }
.about-grid { display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;max-width:1000px; }
.terminal-window { background:#020d02;border:1px solid rgba(0,255,65,.25);border-radius:4px;box-shadow:0 0 50px rgba(0,255,65,.07),0 0 1px rgba(0,255,65,.4); }
.terminal-titlebar { display:flex;align-items:center;gap:.45rem;padding:.6rem 1rem;border-bottom:1px solid rgba(0,255,65,.12);background:rgba(0,255,65,.02); }
.t-dot { width:12px;height:12px;border-radius:50%; }
.t-dot.red{background:#ff5f57} .t-dot.yellow{background:#ffbd2e} .t-dot.green{background:#28c840}
.terminal-title-text { font-size:.68rem;color:rgba(0,255,65,.35);margin-left:.4rem;letter-spacing:.1em; }
.terminal-body { padding:1.4rem;font-size:.81rem;line-height:1.85;min-height:260px;max-height:320px;overflow-y:auto; }
.terminal-body::-webkit-scrollbar{width:4px} .terminal-body::-webkit-scrollbar-thumb{background:var(--green-dim)}
.t-line { margin-bottom:.2rem; }
.t-comment { color:rgba(0,255,65,.3); }
.t-input-zone { display:flex;align-items:center;gap:.4rem;padding:.6rem 1.4rem 1.2rem;border-top:1px solid rgba(0,255,65,.08); }
#t-input { background:transparent;border:none;outline:none;color:var(--green);font-family:var(--font);font-size:.81rem;flex:1;caret-color:var(--green); }

/* ABOUT SIDE */
.about-side { display:flex;flex-direction:column;gap:1.4rem;justify-content:center; }
.about-card { border:1px solid rgba(0,255,65,.15);padding:1.2rem 1.4rem;background:rgba(0,255,65,.02); }
.about-card-label { font-size:.65rem;color:var(--red);letter-spacing:.18em;text-transform:uppercase;margin-bottom:.5rem; }
.about-card-text { font-size:.8rem;color:var(--text);opacity:.8;line-height:1.7; }
.about-card-text strong { color:var(--green);font-weight:700; }
.flag { font-size:.75rem; }
.availability-badge { display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;color:var(--green);border:1px solid rgba(0,255,65,.3);padding:.4rem .9rem;margin-top:.5rem; }
.badge-dot { width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulseGreen 1.8s infinite; }

/* SKILLS */
.skills-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;max-width:820px; }
.skill-item { display:flex;flex-direction:column;gap:.45rem; }
.skill-header { display:flex;justify-content:space-between;font-size:.78rem; }
.skill-name{color:var(--green)} .skill-pct{color:var(--red)}
.skill-bar-bg { height:7px;background:rgba(0,255,65,.08);border:1px solid rgba(0,255,65,.18);position:relative;overflow:hidden; }
.skill-bar-fill { height:100%;width:0%;background:linear-gradient(90deg,var(--green-dim),var(--green));transition:width 1.3s cubic-bezier(.22,1,.36,1);box-shadow:0 0 8px var(--green-glow);position:relative; }
.skill-bar-fill::after { content:'';position:absolute;top:0;right:0;width:2px;height:100%;background:#fff;box-shadow:0 0 5px #fff; }
.skill-meta { font-size:.67rem;color:rgba(0,255,65,.38);letter-spacing:.1em; }
.skills-note { margin-top:2rem;max-width:820px;font-size:.75rem;color:rgba(0,255,65,.35);border-left:2px solid rgba(0,255,65,.2);padding-left:1rem;line-height:1.7; }
.skills-note strong { color:var(--green-dim); }

/* PROJECTS */
.projects-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem; }
.project-card { border:1px solid rgba(0,255,65,.18);background:#020d02;padding:1.8rem;transition:border-color .3s,box-shadow .3s,transform .3s;position:relative;overflow:hidden;transform-style:preserve-3d; }
.project-card::before { content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--red),var(--green));transform:scaleX(0);transform-origin:left;transition:transform .4s; }
.project-card:hover { border-color:rgba(0,255,65,.5);box-shadow:0 0 30px rgba(0,255,65,.08); }
.project-card:hover::before { transform:scaleX(1); }
.proj-header { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.6rem; }
.proj-id { font-size:.65rem;color:var(--red);letter-spacing:.15em; }
.proj-status { font-size:.62rem;letter-spacing:.1em;padding:.15rem .5rem;border:1px solid; }
.proj-name { font-size:1.15rem;font-weight:700;color:var(--green);margin-bottom:.3rem; }
.proj-impact { font-size:.72rem;color:var(--cyan);margin-bottom:.8rem;letter-spacing:.05em; }
.proj-impact strong { color:var(--yellow); }
.proj-desc { font-size:.78rem;color:var(--text);opacity:.65;line-height:1.65;margin-bottom:1.1rem; }
.proj-tags { display:flex;flex-wrap:wrap;gap:.35rem; }
.tag { font-size:.62rem;letter-spacing:.1em;border:1px solid rgba(0,255,65,.25);padding:.2rem .55rem;color:var(--green-dim); }
.proj-links { display:flex;gap:.8rem;margin-top:1.1rem;opacity:0;transition:opacity .3s; }
.project-card:hover .proj-links { opacity:1; }
.proj-link { font-size:.68rem;color:var(--cyan);letter-spacing:.1em;text-decoration:none;border-bottom:1px solid rgba(0,229,255,.3);padding-bottom:1px;transition:border-color .2s; }
.proj-link:hover { border-color:var(--cyan); }

/* MODAL */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:2000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px); }
.modal-overlay.active { display:flex; }
.modal-terminal { background:#020d02;border:1px solid var(--green);width:90%;max-width:680px;max-height:82vh;overflow-y:auto;box-shadow:0 0 60px rgba(0,255,65,.18);animation:modalIn .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes modalIn { from{opacity:0;transform:scale(.94) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal-body { padding:2rem;font-size:.82rem;line-height:1.9; }
.modal-close { background:transparent;border:none;color:var(--red);font-family:var(--font);font-size:.72rem;float:right;letter-spacing:.1em;opacity:.7;transition:opacity .2s; }
.modal-close:hover { opacity:1; }
.modal-metric { display:inline-block;border:1px solid rgba(0,229,255,.3);padding:.3rem .8rem;margin:.2rem;font-size:.75rem;color:var(--cyan); }
.modal-metric strong { color:var(--yellow); }

/* CONTACT */
#contact { background:var(--bg2); }
.contact-layout { display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;max-width:1000px; }
.contact-terminal { border:1px solid rgba(0,255,65,.25);background:#020d02;box-shadow:0 0 40px rgba(0,255,65,.05); }
.contact-form { padding:1.8rem; }
.form-line { display:flex;align-items:flex-start;margin-bottom:1.4rem;gap:.6rem; }
.form-prompt { color:var(--green-dim);font-size:.81rem;white-space:nowrap;padding-top:3px;min-width:75px; }
.form-prompt em { color:var(--red);font-style:normal; }
.form-input,.form-textarea { background:transparent;border:none;border-bottom:1px solid rgba(0,255,65,.25);outline:none;color:var(--green);font-family:var(--font);font-size:.81rem;width:100%;padding:.25rem .4rem;transition:border-color .3s;caret-color:var(--green); }
.form-textarea { resize:none;height:80px; }
.form-input:focus,.form-textarea:focus { border-bottom-color:var(--green);box-shadow:0 2px 0 rgba(0,255,65,.18); }
.submit-line { margin-top:1.8rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap; }
.form-status { font-size:.76rem;color:var(--green-dim);min-height:1.4em; }

/* CONTACT SIDE */
.contact-side { display:flex;flex-direction:column;gap:1rem;justify-content:center; }
.contact-link-card { border:1px solid rgba(0,255,65,.15);padding:1rem 1.2rem;display:flex;align-items:center;gap:1rem;text-decoration:none;transition:border-color .3s,background .3s; }
.contact-link-card:hover { border-color:rgba(0,255,65,.5);background:rgba(0,255,65,.03); }
.clc-icon { font-size:1.1rem;width:30px;text-align:center; }
.clc-info { display:flex;flex-direction:column;gap:.15rem; }
.clc-label { font-size:.62rem;color:rgba(0,255,65,.4);letter-spacing:.15em;text-transform:uppercase; }
.clc-value { font-size:.78rem;color:var(--green); }
.contact-note { font-size:.72rem;color:rgba(0,255,65,.3);border-left:2px solid rgba(0,255,65,.15);padding-left:.8rem;line-height:1.7;margin-top:.5rem; }

/* FOOTER */
footer { text-align:center;padding:2rem;font-size:.68rem;color:rgba(0,255,65,.2);border-top:1px solid rgba(0,255,65,.07);letter-spacing:.15em; }

/* SCROLL REVEAL */
.reveal { opacity:0;transform:translateY(28px);transition:opacity .65s,transform .65s; }
.reveal.visible { opacity:1;transform:translateY(0); }

@media(max-width:768px){
  .about-grid,.contact-layout { grid-template-columns:1fr; }
  .skills-grid { grid-template-columns:1fr; }
  .hero-stats { gap:1.5rem; }
  nav ul { gap:1.1rem; }
  nav ul li a { font-size:.62rem; }
  .nav-remote { display:none; }
}
@media(max-width:480px){
  nav { padding:.9rem 1.2rem; }
  section { padding:4rem 5vw; }
}