:root{
  --bg:            #0a0c0a;
  --panel:         #10140f;
  --panel-line:    #1e251a;
  --copper:        #b8703e;
  --copper-dim:    #6e4527;
  --phosphor:      #7fe0a0;
  --phosphor-dim:  #345c43;
  --text:          #ece8df;
  --text-muted:    #838a80;
  --text-faint:    #4d534a;
  --mono:          'JetBrains Mono', monospace;
  --sans:          'IBM Plex Sans', sans-serif;
}

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

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  overflow-x:hidden;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(127,224,160,0.05) 1px, transparent 0);
  background-size:28px 28px;
}

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--copper); color:#0a0c0a; }

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--phosphor);
  outline-offset:3px;
}

/* ---------- layout shell ---------- */
.wrap{
  max-width:920px;
  margin:0 auto;
  padding:0 32px;
  position:relative;
}

/* ---------- signature: PCB trace spine ---------- */
.trace-spine{
  position:absolute;
  left:0;
  top:0;
  width:2px;
  height:100%;
  pointer-events:none;
}
.trace-spine svg{ overflow:visible; }
.trace-line{
  fill:none;
  stroke:var(--copper-dim);
  stroke-width:2;
}
.trace-line.lit{
  stroke:var(--phosphor);
  stroke-dasharray:8 6000;
  stroke-dashoffset:8;
  filter:drop-shadow(0 0 4px rgba(127,224,160,0.6));
  animation:draw-trace linear forwards;
  animation-timeline: scroll();
  animation-range: 0 100%;
}
@keyframes draw-trace{
  from{ stroke-dasharray:8 6000; }
  to{ stroke-dasharray:6000 6000; }
}
.via{
  fill:var(--bg);
  stroke:var(--copper);
  stroke-width:2;
}
.via.lit{ stroke:var(--phosphor); }

@media (max-width:720px){
  .trace-spine{ display:none; }
}

/* ---------- nav ---------- */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,12,10,0.88);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--panel-line);
}
nav.wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:18px;
  padding-bottom:18px;
}
.logo{
  font-family:var(--mono);
  font-weight:700;
  font-size:15px;
  letter-spacing:0.02em;
  color:var(--text);
}
.logo span{ color:var(--phosphor); }
.nav-links{
  display:flex;
  gap:28px;
  font-family:var(--mono);
  font-size:13px;
  color:var(--text-muted);
  list-style:none;
}
.nav-links a{ transition:color .15s ease; position:relative; }
.nav-links a:hover, .nav-links a.active{ color:var(--phosphor); }
.nav-links .idx{ color:var(--copper); margin-right:6px; }

@media (max-width:640px){
  .nav-links{ gap:16px; font-size:12px; }
}

/* ---------- eyebrow / section labels ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--copper);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:18px;
  height:1px;
  background:var(--copper);
}

/* ---------- hero ---------- */
.hero{
  padding:110px 0 90px;
  position:relative;
}
.hero-label{
  font-family:var(--mono);
  font-size:13px;
  color:var(--phosphor);
  letter-spacing:0.08em;
  margin-bottom:22px;
}
.hero-label::before{ content:"// "; color:var(--text-faint); }
h1.name{
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(40px, 7vw, 68px);
  line-height:1.05;
  letter-spacing:-0.01em;
  color:var(--text);
}
h1.name .bracket{ color:var(--copper); }
.role{
  font-family:var(--sans);
  font-size:clamp(16px, 2.4vw, 20px);
  color:var(--text-muted);
  margin-top:18px;
  max-width:540px;
}
.role strong{ color:var(--text); font-weight:600; }

.hero-scope{
  margin-top:56px;
  border:1px solid var(--panel-line);
  background:var(--panel);
  border-radius:4px;
  padding:0;
  overflow:hidden;
}
.scope-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  border-bottom:1px solid var(--panel-line);
  font-family:var(--mono);
  font-size:11px;
  color:var(--text-faint);
  letter-spacing:0.08em;
}
.scope-dot{ width:6px; height:6px; border-radius:50%; background:var(--phosphor); box-shadow:0 0 6px var(--phosphor); }
svg.scope-trace{ display:block; width:100%; height:auto; }
.scope-path{
  fill:none;
  stroke:var(--phosphor);
  stroke-width:1.6;
  filter:drop-shadow(0 0 3px rgba(127,224,160,0.5));
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  animation:sweep 2.6s ease-out .3s forwards;
}
@keyframes sweep{ to{ stroke-dashoffset:0; } }

@media (prefers-reduced-motion: reduce){
  .scope-path{ animation:none; stroke-dashoffset:0; }
  .trace-line.lit{ animation:none; stroke-dasharray:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- section base ---------- */
section{
  padding:80px 0;
  border-top:1px solid var(--panel-line);
}
h2.h-title{
  font-family:var(--mono);
  font-weight:600;
  font-size:clamp(24px,3.4vw,32px);
  color:var(--text);
  margin-bottom:20px;
}
.lede{
  color:var(--text-muted);
  max-width:600px;
  font-size:15.5px;
  margin-bottom:44px;
}

/* ---------- about ---------- */
.about-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:48px;
  align-items:start;
}
.about-copy p{ color:var(--text-muted); margin-bottom:16px; font-size:15.5px; }
.about-copy strong{ color:var(--text); font-weight:600; }

.stat-panel{
  border:1px solid var(--panel-line);
  background:var(--panel);
  border-radius:4px;
  padding:22px;
}
.stat-row{
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid var(--panel-line);
  font-family:var(--mono);
  font-size:13px;
}
.stat-row:last-child{ border-bottom:none; }
.stat-row .k{ color:var(--text-faint); }
.stat-row .v{ color:var(--phosphor); }

@media (max-width:720px){
  .about-grid{ grid-template-columns:1fr; }
}

/* ---------- projects ---------- */
.proj-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.proj-card{
  position:relative;
  border:1px solid var(--panel-line);
  background:var(--panel);
  border-radius:4px;
  padding:26px;
  transition:border-color .2s ease, transform .2s ease;
}
.proj-card:hover{ border-color:var(--copper); transform:translateY(-2px); }
.proj-card::before, .proj-card::after{
  content:"";
  position:absolute;
  width:10px; height:10px;
  border:1px solid var(--copper);
}
.proj-card::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.proj-card::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
.proj-tag{
  font-family:var(--mono);
  font-size:11px;
  color:var(--copper);
  letter-spacing:0.06em;
  margin-bottom:10px;
  text-transform:uppercase;
}
.proj-title{
  font-family:var(--mono);
  font-weight:600;
  font-size:18px;
  margin-bottom:10px;
  color:var(--text);
}
.proj-desc{ color:var(--text-muted); font-size:14.5px; margin-bottom:18px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-family:var(--mono);
  font-size:11px;
  color:var(--text-muted);
  border:1px solid var(--panel-line);
  padding:4px 9px;
  border-radius:3px;
}

@media (max-width:720px){
  .proj-grid{ grid-template-columns:1fr; }
}

/* ---------- skills as datasheet ---------- */
.datasheet{
  border:1px solid var(--panel-line);
  border-radius:4px;
  overflow:hidden;
}
.ds-row{
  display:grid;
  grid-template-columns:180px 1fr 90px;
  gap:16px;
  padding:16px 20px;
  border-bottom:1px solid var(--panel-line);
  align-items:center;
}
.ds-row:last-child{ border-bottom:none; }
.ds-row:nth-child(odd){ background:var(--panel); }
.ds-cat{
  font-family:var(--mono);
  font-size:13px;
  color:var(--text);
  font-weight:600;
}
.ds-items{ color:var(--text-muted); font-size:13.5px; }
.ds-bar-track{
  width:100%;
  height:4px;
  background:var(--panel-line);
  border-radius:2px;
  overflow:hidden;
}
.ds-bar-fill{
  height:100%;
  background:var(--phosphor);
  box-shadow:0 0 6px rgba(127,224,160,0.5);
}

@media (max-width:640px){
  .ds-row{ grid-template-columns:1fr; gap:8px; }
  .ds-bar-track{ max-width:140px; }
}

/* ---------- contact as connector pinout ---------- */
.pinout{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--panel-line);
  border:1px solid var(--panel-line);
  border-radius:4px;
  overflow:hidden;
}
.pin{
  background:var(--panel);
  padding:22px;
  display:flex;
  align-items:center;
  gap:16px;
  transition:background .15s ease;
}
.pin:hover{ background:#161b12; }
.pin-num{
  font-family:var(--mono);
  font-size:11px;
  color:var(--copper);
  border:1px solid var(--copper-dim);
  border-radius:50%;
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pin-label{ font-family:var(--mono); font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; }
.pin-value{ font-size:14.5px; color:var(--text); margin-top:2px; word-break:break-word; }

@media (max-width:640px){
  .pinout{ grid-template-columns:1fr; }
}

footer{
  padding:40px 0 60px;
  text-align:center;
  font-family:var(--mono);
  font-size:12px;
  color:var(--text-faint);
}