:root{
  --bg:#050a08;
  --fg:#e8fff6;
  --muted:#a6d9c5;
  --accent:#00ff9a;
  --accent2:#00c9ff;
  --card:rgba(10, 25, 18, .74);
  --border:rgba(0,255,154,.18);
  --shadow: 0 18px 70px rgba(0,0,0,.55);
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--mono);
  color:var(--fg);
  background: radial-gradient(1200px 600px at 20% 10%, rgba(0,255,154,.12), transparent 55%),
              radial-gradient(900px 500px at 80% 40%, rgba(0,201,255,.09), transparent 60%),
              linear-gradient(180deg, var(--bg), #020403 70%);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
a:hover{color:var(--accent)}
.skip{position:absolute; left:-999px; top:0; background:var(--accent); color:#00150b; padding:.6rem 1rem; border-radius:.8rem;}
.skip:focus{left:1rem; top:1rem; z-index:9999}

#matrix{position:fixed; inset:0; z-index:-3; opacity:.35}
.scanlines{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 6px);
  mix-blend-mode:overlay; opacity:.25;
}
.vignette{position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(1200px 700px at 50% 20%, transparent 35%, rgba(0,0,0,.62) 78%);}

.container{width:min(1120px, calc(100% - 2.2rem)); margin:0 auto}

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(2,4,3,.88), rgba(2,4,3,.34));
  border-bottom:1px solid rgba(0,255,154,.10);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}

.brand{display:flex; align-items:center; gap:.8rem}
.brand__mark{
  width:36px; height:36px;
  display:grid; place-items:center;
  color:#001a10;
  background: linear-gradient(135deg, var(--accent), rgba(0,255,154,.25));
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(0,255,154,.16);
  font-weight:800;
}
.brand__name{font-weight:800; letter-spacing:.02em}
.brand__role{font-size:.82rem; color:var(--muted)}

.nav{display:flex; gap:1rem; align-items:center}
.nav a{font-size:.92rem; color:rgba(232,255,246,.92); display:flex; align-items:center; gap:.45rem}
.nav a:hover{color:var(--accent)}

.nav__toggle{display:none; background:transparent; border:0; padding:.4rem}
.nav__toggle span{display:block; width:26px; height:2px; margin:5px 0; background:rgba(232,255,246,.9)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.78rem 1.05rem;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(0,255,154,.95), rgba(0,201,255,.55));
  color:#00140b;
  font-weight:800;
  border:1px solid rgba(0,255,154,.25);
  box-shadow: 0 18px 55px rgba(0,255,154,.10);
}
.btn:hover{filter:brightness(1.06)}
.btn--ghost{
  background:rgba(0,255,154,.06);
  color:var(--fg);
  border:1px solid rgba(0,255,154,.22);
  box-shadow:none;
}
.btn--ghost:hover{background:rgba(0,255,154,.10)}

.hero{padding:4.4rem 0 2.4rem}
.hero__grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:1.4rem; align-items:start}
.badge{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.45rem .8rem;
  background: rgba(0,255,154,.06);
  border:1px solid rgba(0,255,154,.20);
  border-radius:999px;
  color:var(--muted);
  font-size:.82rem;
}
.dot{width:8px; height:8px; background:var(--accent); border-radius:999px; box-shadow: 0 0 18px rgba(0,255,154,.7)}

.lead{font-size:1.05rem; line-height:1.8; color:rgba(232,255,246,.92); max-width:60ch}
.accent{color:var(--accent)}
.hero__cta{display:flex; gap:.8rem; margin:1.2rem 0 1.3rem}

.glitch{
  font-size: clamp(2.05rem, 4.2vw, 3.2rem);
  line-height:1.08;
  margin:.9rem 0 1rem;
  position:relative;
  text-shadow: 0 0 24px rgba(0,255,154,.18);
}
.glitch::before, .glitch::after{
  content:attr(data-text);
  position:absolute; left:0; top:0;
  opacity:.65; pointer-events:none;
}
.glitch::before{
  transform: translate(2px, -1px);
  color: rgba(0,201,255,.75);
  animation: glitch 2.6s infinite linear alternate-reverse;
}
.glitch::after{
  transform: translate(-2px, 1px);
  color: rgba(0,255,154,.75);
  animation: glitch2 2.2s infinite linear alternate-reverse;
}
@keyframes glitch{
  0%{clip-path: inset(0 0 92% 0)}
  15%{clip-path: inset(12% 0 72% 0)}
  30%{clip-path: inset(52% 0 30% 0)}
  45%{clip-path: inset(70% 0 18% 0)}
  60%{clip-path: inset(20% 0 58% 0)}
  75%{clip-path: inset(40% 0 40% 0)}
  100%{clip-path: inset(0 0 86% 0)}
}
@keyframes glitch2{
  0%{clip-path: inset(80% 0 5% 0)}
  20%{clip-path: inset(10% 0 65% 0)}
  40%{clip-path: inset(55% 0 25% 0)}
  60%{clip-path: inset(25% 0 55% 0)}
  80%{clip-path: inset(65% 0 15% 0)}
  100%{clip-path: inset(85% 0 5% 0)}
}

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:1.1rem;
  box-shadow: var(--shadow);
}
.card h3{margin:.2rem 0 .55rem; font-size:1.05rem}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.card__divider{height:1px; background: rgba(0,255,154,.14); margin:1rem 0}

.profile{display:grid; gap:1rem}
.avatar-wrap{
  width:180px; height:180px;
  margin: .2rem auto .4rem;
  position:relative;
}
.avatar{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:999px;
  border:1px solid rgba(0,255,154,.35);
  box-shadow: 0 0 35px rgba(0,255,154,.18);
  filter: contrast(1.05) saturate(1.05);
}
.avatar-ring{
  position:absolute; inset:-10px;
  border-radius:999px;
  border:2px solid rgba(0,201,255,.35);
  box-shadow: 0 0 40px rgba(0,201,255,.10), inset 0 0 40px rgba(0,255,154,.06);
  animation: ring 4.2s linear infinite;
}
@keyframes ring{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
.profile__name{font-weight:800; font-size:1.15rem; text-align:center}
.profile__tagline{color:var(--muted); text-align:center; font-size:.88rem}

.stats{display:grid; grid-template-columns: 1fr; gap:.7rem; margin-top:.2rem}
.stat{display:flex; align-items:center; justify-content:space-between; gap:.8rem}
.stat__k{font-size:.82rem; color:var(--muted); display:flex; align-items:center; gap:.5rem}
.stat__v{font-size:1.0rem; font-weight:800}

.section{padding:3rem 0}
.section--alt{background: linear-gradient(180deg, rgba(0,255,154,.03), rgba(0,0,0,0)); border-top:1px solid rgba(0,255,154,.06); border-bottom:1px solid rgba(0,255,154,.06)}
.section__head{margin-bottom:1.2rem}
.section__head h2{margin:.2rem 0 .35rem; font-size:1.35rem; display:flex; align-items:center; gap:.55rem}
.section__head p{margin:0; color:var(--muted)}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}

.list{margin:.6rem 0 0; padding-left:1.1rem}
.list li{margin:.4rem 0; color:rgba(232,255,246,.9)}

.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{
  padding:.35rem .6rem;
  border-radius:999px;
  background: rgba(0,255,154,.06);
  border:1px solid rgba(0,255,154,.20);
  color:rgba(232,255,246,.88);
  font-size:.85rem;
  display:inline-flex; align-items:center; gap:.45rem;
}
.chip--link:hover{background: rgba(0,255,154,.10)}

.project{position:relative; overflow:hidden}
.project::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(500px 220px at 20% 10%, rgba(0,255,154,.10), transparent 60%),
              radial-gradient(520px 240px at 80% 60%, rgba(0,201,255,.08), transparent 60%);
  opacity:.75;
  pointer-events:none;
}
.project__icon{
  width:42px; height:42px;
  border-radius:14px;
  display:grid; place-items:center;
  background: rgba(0,255,154,.08);
  border:1px solid rgba(0,255,154,.22);
  box-shadow: 0 18px 55px rgba(0,255,154,.08);
}
.project__head{display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; margin-top:.7rem}
.project__tags{display:flex; gap:.35rem; flex-wrap:wrap; justify-content:flex-end}
.tag{
  font-size:.78rem; padding:.2rem .5rem; border-radius:999px;
  border:1px solid rgba(0,201,255,.22);
  background: rgba(0,201,255,.06);
  color: rgba(232,255,246,.86);
}
.project__links{display:flex; gap:.9rem; margin-top:.8rem}
.project__links a{color:var(--accent); display:flex; align-items:center; gap:.45rem}
.project__links a:hover{color:var(--accent2)}

label{display:block; margin:.7rem 0}
label span{display:block; font-size:.85rem; color:var(--muted); margin-bottom:.35rem}
input, textarea{
  width:100%;
  padding:.75rem .85rem;
  border-radius:14px;
  border:1px solid rgba(0,255,154,.18);
  background: rgba(0,0,0,.28);
  color: var(--fg);
  outline:none;
}
input:focus, textarea:focus{border-color: rgba(0,255,154,.5); box-shadow: 0 0 0 3px rgba(0,255,154,.12)}

.timeline{list-style:none; margin:0; padding:0}
.timeline li{
  display:grid; grid-template-columns: 70px 1fr; gap:1rem;
  padding:.9rem 0;
  border-bottom:1px dashed rgba(0,255,154,.14)
}
.timeline li:last-child{border-bottom:0}
.t__k{color:var(--muted); font-size:.88rem}
.t__v a{color:var(--accent)}

.terminal{
  border-radius:18px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(0,255,154,.22);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.terminal__bar{
  display:flex; align-items:center; gap:.35rem;
  padding:.55rem .75rem;
  background: rgba(0,255,154,.05);
  border-bottom:1px solid rgba(0,255,154,.14);
}
.pill{width:10px; height:10px; border-radius:999px; background:rgba(232,255,246,.25)}
.terminal__title{margin-left:.55rem; font-size:.82rem; color:var(--muted)}
.terminal__body{padding:.85rem .95rem; font-size:.92rem}
.termline{margin:.28rem 0}
.prompt{color:rgba(0,255,154,.95)}
.out{color:rgba(232,255,246,.92)}
.ok{color:var(--accent); font-weight:800}
.cursor{display:inline-block; width:.6ch; background:rgba(232,255,246,.65); margin-left:2px; animation: blink 1s infinite}
@keyframes blink{50%{opacity:0}}

.footer{padding:2rem 0}
.footer__inner{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid rgba(0,255,154,.10); padding-top:1rem
}

.links{margin-top:1.1rem; color:rgba(232,255,246,.75); font-size:.92rem}
.sep{opacity:.5; margin:0 .35rem}

@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}

  .nav{display:none}
  .nav.is-open{
    display:flex;
    position:absolute;
    right:1rem; top:64px;
    flex-direction:column;
    background: rgba(2,4,3,.95);
    border:1px solid rgba(0,255,154,.18);
    padding:.8rem;
    border-radius:16px;
    width:min(260px, calc(100% - 2rem));
  }
  .nav__toggle{display:block}
}