@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root{
  --ink: #0a0c11;
  --ink-2: #0e1117;
  --panel: #12151d;
  --panel-2: #171b25;
  --border: rgba(255,255,255,0.10);
  --border-soft: rgba(255,255,255,0.06);
  --ink-text: #e8e9ee;
  --text-dim: #9aa0ad;
  --text-faint: #565c68;
  --accent: #ff7e3d;
  --accent-dim: #d9631f;
  --cyan: #57c7d4;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Source Sans 3', -apple-system, sans-serif;
  --radius: 3px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
body{
  margin:0; background:var(--ink); color:var(--ink-text);
  font-family:var(--sans); line-height:1.65; font-size:16px;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 42px 42px;
}
a{color:var(--accent);}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
::selection{background:var(--accent-dim); color:#0a0c11;}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}
h1,h2,h3{font-family:var(--sans); font-weight:700; margin:0;}
p{margin:0 0 12px 0;}
p:last-child{margin-bottom:0;}

/* ---------- HEADER ---------- */
header{position:sticky; top:0; z-index:60; background:rgba(10,12,17,0.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-soft);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 28px; gap:20px;}
.logo-brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink-text);}
.logo-text{font-family:var(--mono); font-weight:600; font-size:14px; letter-spacing:0.03em;}
.accent-dot{color:var(--accent);}
.nav-links{display:flex; gap:28px; font-family:var(--mono); font-size:13.5px;}
.nav-links a{color:var(--text-dim); text-decoration:none; padding-bottom:3px; border-bottom:1px solid transparent; transition:color .15s, border-color .15s;}
.nav-links a:hover{color:var(--accent);}
.nav-links a.active{color:var(--accent); border-color:var(--accent);}
.nav-toggle{display:none; background:none; border:1px solid var(--border); color:var(--ink-text); padding:6px 10px; border-radius:var(--radius); font-size:16px;}
@media (max-width:760px){
  .nav-links{position:fixed; top:63px; left:0; right:0; background:var(--ink-2); border-bottom:1px solid var(--border); flex-direction:column; gap:0; padding:0 28px; max-height:0; overflow:hidden; transition:max-height .3s ease;}
  .nav-links.open{max-height:320px; padding:12px 28px 18px;}
  .nav-links a{padding:11px 0; border-bottom:1px solid var(--border-soft);}
  .nav-toggle{display:inline-flex;}
}

/* ---------- PANELS / CORNER BRACKETS ---------- */
.panel{position:relative; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:26px;}
.corner-br, .corner-bl{position:absolute; width:16px; height:16px; pointer-events:none;}
.corner-br{top:-1px; left:-1px; border-top:2px solid var(--accent); border-left:2px solid var(--accent);}
.corner-bl{bottom:-1px; right:-1px; border-bottom:2px solid var(--cyan); border-right:2px solid var(--cyan);}
.sheet-tag{position:absolute; top:-11px; left:16px; background:var(--ink); padding:0 8px; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--text-faint);}

/* ---------- HERO ---------- */
.hero{padding:64px 0 56px;}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:0.12em; color:var(--text-faint); margin-bottom:16px; text-transform:uppercase;}
.hero h1{font-size:clamp(30px,4.6vw,46px); line-height:1.18; margin-bottom:14px;}
.hero h1 .accent{color:var(--accent);}
.role{font-family:var(--mono); font-size:14px; color:var(--cyan); margin-bottom:16px;}
.desc{color:var(--text-dim); font-size:16px; max-width:52ch; margin-bottom:22px;}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:34px;}
.btn{
  font-family:var(--mono); font-size:13.5px; padding:11px 18px; border-radius:var(--radius);
  border:1px solid var(--border); color:var(--ink-text); text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  transition:border-color .15s, color .15s, transform .15s, background .15s;
}
.btn:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px);}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#0a0c11; font-weight:600;}
.btn-primary:hover{background:#ff9257; color:#0a0c11;}
.hero-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; border-top:1px solid var(--border-soft); padding-top:22px;}
@media (max-width:520px){ .hero-stats{grid-template-columns:repeat(2,1fr);} }
.stat-num{font-family:var(--mono); font-size:24px; font-weight:700; color:var(--accent);}
.stat-label{font-family:var(--mono); font-size:11px; color:var(--text-faint); margin-top:4px; text-transform:uppercase; letter-spacing:0.04em;}

/* schematic svg */
.schematic{min-height:340px; display:flex; align-items:center; justify-content:center;}
.schematic svg{width:100%; height:auto; max-width:360px;}
.schem-node{fill:var(--panel-2); stroke:var(--border); stroke-width:1;}
.schem-label{font-family:var(--mono); font-size:9.5px; fill:var(--text-dim); letter-spacing:0.02em;}
.schem-line{fill:none; stroke:var(--cyan); stroke-width:1.4; stroke-dasharray:6 4; opacity:0.7;
  stroke-dashoffset:60; animation:dash 2.4s linear infinite;}
.schem-line.delay1{animation-delay:0s;}
.schem-line.delay2{animation-delay:.3s;}
.schem-line.delay3{animation-delay:.6s;}
.schem-line.delay4{animation-delay:.9s;}
@keyframes dash{ to{ stroke-dashoffset:0; } }
.schematic:hover .schem-node{stroke:var(--accent); transition:stroke .25s;}

/* ---------- SECTION HEADS ---------- */
section{padding:64px 0; scroll-margin-top:76px; border-top:1px solid var(--border-soft);}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:34px; gap:16px; flex-wrap:wrap;}
.section-head h2{font-size:26px;}
.section-num{font-family:var(--mono); font-size:12px; color:var(--text-faint); letter-spacing:0.08em;}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ---------- ABOUT ---------- */
.about-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:start;}
@media (max-width:800px){ .about-grid{grid-template-columns:1fr;} }
.about-text p{color:var(--text-dim); font-size:15.5px;}
.about-text strong{color:var(--ink-text);}
.info-table{display:flex; flex-direction:column; gap:0;}
.info-row{display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--border-soft); font-size:14px;}
.info-row:last-child{border-bottom:none;}
.info-row span:first-child{font-family:var(--mono); color:var(--text-faint); font-size:12px; text-transform:uppercase; letter-spacing:0.04em;}
.info-row span:last-child{color:var(--ink-text); text-align:right;}

/* ---------- SKILLS ---------- */
.skills-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-soft); border:1px solid var(--border-soft);}
@media (max-width:820px){ .skills-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .skills-grid{grid-template-columns:1fr;} }
.skill-cell{background:var(--panel); padding:20px; transition:background .2s;}
.skill-cell:hover{background:var(--panel-2);}
.skill-cell-wide{grid-column:span 2;}
@media (max-width:480px){ .skill-cell-wide{grid-column:span 1;} }
.skill-cat{font-family:var(--mono); font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:12px;}
.skill-items{display:flex; flex-wrap:wrap; gap:8px;}
.skill-chip{font-family:var(--mono); font-size:12.5px; padding:5px 10px; border:1px solid var(--border); border-radius:var(--radius); color:var(--text-dim); transition:border-color .15s, color .15s, transform .15s;}
.skill-chip:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px);}

/* ---------- PROJECT / EXPERIENCE CARDS ---------- */
.projects-list{display:flex; flex-direction:column; gap:1px; background:var(--border-soft); border:1px solid var(--border-soft);}
.project-card{
  background:var(--panel); display:grid; grid-template-columns:80px 1fr auto; gap:22px; padding:24px; align-items:start;
  transition:background .2s;
}
.project-card:hover{background:var(--panel-2);}
@media (max-width:700px){ .project-card{grid-template-columns:1fr; gap:10px;} }
.project-fig{font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:0.06em; padding-top:3px;}
.project-title{font-weight:600; font-size:16px; margin-bottom:8px; color:var(--ink-text);}
.project-desc{color:var(--text-dim); font-size:14.5px; margin-bottom:10px;}
.project-tags{display:flex; flex-wrap:wrap; gap:8px;}
.tag{font-family:var(--mono); font-size:11.5px; padding:4px 9px; border:1px solid var(--border); border-radius:var(--radius); color:var(--text-faint);}
.project-date{font-family:var(--mono); font-size:12px; color:var(--text-faint); white-space:nowrap;}
.project-date a{color:var(--cyan); text-decoration:none;}
.project-date a:hover{text-decoration:underline;}

/* ---------- CREDENTIALS ---------- */
.split-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
@media (max-width:760px){ .split-grid{grid-template-columns:1fr;} }
.split-col h3{font-size:15px; font-family:var(--mono); color:var(--text-dim); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid var(--border-soft);}
.doc-item{padding:12px 0; border-bottom:1px solid var(--border-soft);}
.doc-item:last-child{border-bottom:none;}
.doc-title{font-size:14.5px; color:var(--ink-text);}
.doc-title a{color:var(--ink-text); text-decoration:none;}
.doc-title a:hover{color:var(--accent);}
.doc-meta{font-family:var(--mono); font-size:11.5px; color:var(--text-faint); margin-top:3px;}

/* ---------- CONTACT ---------- */
.contact-panel{text-align:center; padding:52px 32px; max-width:680px; margin:0 auto;}
.center-eyebrow{text-align:center;}
.contact-panel h2{font-size:28px; margin-bottom:14px;}
.contact-panel p{color:var(--text-dim); max-width:52ch; margin:0 auto 26px;}
.contact-links{display:flex; flex-wrap:wrap; justify-content:center; gap:12px;}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--border-soft); padding:26px 0;}
.footer-row{display:flex; justify-content:center; font-family:var(--mono); font-size:12px; color:var(--text-faint);}