:root{
  --bg: #05070d;
  --ink: #eaf4f8;
  --muted: #7f95a6;
  --accent: #29ffc6;
  --accent-2: #4c8dff;
  --violet: #8b5cf6;
  --danger: #ff5d6c;
  --amber: #ffc65c;
  --line: rgba(130, 190, 220, .13);
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Space Grotesk', sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
  cursor: none;
}

a{ color: inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:600; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
.mono{ font-family: var(--mono); }
.muted{ color: var(--muted); }

::selection{ background: var(--accent); color:#03110c; }

/* ============ BACKGROUND FX ============ */
.bg-fx{ position: fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.blob{
  position:absolute;
  width: 55vmax; height: 55vmax;
  border-radius: 50%;
  filter: blur(50px);
  opacity:.14;
  will-change: transform;
  transform: translateZ(0);
}
.blob-a{
  background: radial-gradient(circle, var(--accent-2), transparent 65%);
  top:-25vmax; right:-18vmax;
  animation: blobDrift 26s ease-in-out infinite alternate;
}
.blob-b{
  background: radial-gradient(circle, var(--violet), transparent 65%);
  bottom:-28vmax; left:-20vmax;
  animation: blobDrift 32s ease-in-out infinite alternate-reverse;
}
@keyframes blobDrift{
  from{ transform: translate(0,0) scale(1); }
  to{ transform: translate(-8vmax, 6vmax) scale(1.15); }
}
.grid-bg{
  position:absolute; inset:-8%;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse at 60% 30%, black 20%, transparent 75%);
  animation: gridDrift 50s linear infinite;
}
@keyframes gridDrift{ from{ transform: translate(0,0);} to{ transform: translate(52px,52px);} }

/* ============ CUSTOM CURSOR ============ */
#cursor-dot, #cursor-ring{
  position: fixed; top:0; left:0;
  pointer-events:none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  will-change: transform;
}
#cursor-dot{
  width:7px; height:7px;
  background: var(--accent);
  border-radius:50%;
  box-shadow: 0 0 12px var(--accent);
  opacity:0;
  transition: opacity .3s ease;
}
#cursor-ring{
  width:36px; height:36px;
  border:1.5px solid rgba(41,255,198,.55);
  border-radius:50%;
  opacity:0;
  display:flex; align-items:center; justify-content:center;
  transition: width .25s ease, height .25s ease, border-color .25s ease,
              background .25s ease, opacity .3s ease;
  backdrop-filter: invert(0);
}
body.cursor-on #cursor-dot, body.cursor-on #cursor-ring{ opacity:1; }
#cursor-ring.hover{
  width:74px; height:74px;
  background: rgba(41,255,198,.08);
  border-color: var(--accent);
}
#cursor-ring.drag{
  width:92px; height:92px;
  background: rgba(76,141,255,.12);
  border-color: var(--accent-2);
}
#cursor-label{
  font-family: var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform: uppercase; color: var(--ink);
  opacity:0; transition: opacity .2s ease;
}
#cursor-ring.hover #cursor-label, #cursor-ring.drag #cursor-label{ opacity:1; }

@media (hover:none), (pointer:coarse){
  body{ cursor:auto; }
  #cursor-dot, #cursor-ring{ display:none; }
}

/* ============ LAYOUT ============ */
main{ position:relative; z-index:2; }
.section{
  position:relative;
  padding: 14vh 8vw;
  border-bottom: 1px solid var(--line);
}
.section-inner{ max-width: 1060px; margin:0 auto; }
.center{ text-align:center; }
.center-h{ justify-content:center; }

.section h2{
  font-size: clamp(30px, 4.4vw, 48px);
  display:flex; align-items:baseline; gap:16px;
  margin-bottom: 40px;
  letter-spacing:-.01em;
}
.idx{ font-size:14px; color: var(--accent); }

/* ============ HERO ============ */
#hero{
  position:relative;
  min-height: 100vh;
  display:grid;
  grid-template-columns: minmax(340px, 1fr) 1.2fr;
  align-items:center;
  padding: 6vh 5vw 10vh;
  gap: 2vw;
  overflow:hidden;
}
.hero-copy{ position:relative; z-index:5; }
.eyebrow{
  color: var(--accent); font-size:12px; letter-spacing:.18em;
  margin-bottom:20px; display:flex; align-items:center; gap:10px;
}
.live-dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(41,255,198,.5);
  animation: livePulse 1.8s ease-out infinite;
}
@keyframes livePulse{
  0%{ box-shadow: 0 0 0 0 rgba(41,255,198,.5); }
  70%{ box-shadow: 0 0 0 12px rgba(41,255,198,0); }
  100%{ box-shadow: 0 0 0 0 rgba(41,255,198,0); }
}
.hero-name{
  font-size: clamp(44px, 6.2vw, 86px);
  line-height:.96;
  letter-spacing:-.03em;
  font-weight:700;
}
.hero-name .stroke{
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(234,244,248,.85);
}
.hero-sub{
  margin-top:22px;
  font-size: clamp(13px, 1.4vw, 16px);
  color: var(--muted);
  min-height:24px;
}
.caret{ color: var(--accent); animation: caretBlink 1s steps(2) infinite; }
@keyframes caretBlink{ 50%{ opacity:0; } }
.hero-actions{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; }
.hint{
  margin-top:46px; font-size:11px; letter-spacing:.08em;
  color: var(--muted); opacity:0;
  animation: fadeIn 1s ease 1.2s forwards;
}
@keyframes fadeIn{ to{ opacity:1; } }

.btn{
  display:inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--accent);
  color:#03110c;
  font-weight:600; font-size:14px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.btn:hover{ transform: translateY(-3px); box-shadow: 0 12px 34px -8px rgba(41,255,198,.55); }
.btn-ghost{
  background:transparent; color:var(--ink);
  border:1px solid var(--line);
}
.btn-ghost:hover{ border-color: var(--accent); box-shadow: 0 12px 34px -14px rgba(41,255,198,.4); }

.scroll-cue{
  position:absolute; bottom:26px; left:50%;
  transform: translateX(-50%);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--muted);
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 50%{ transform: translateX(-50%) translateY(8px); } }

/* ============ TOPOLOGY ============ */
#topo{
  position:relative;
  height: min(78vh, 720px);
  z-index:4;
}
#topo-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
}
.t-link{
  stroke: rgba(41,255,198,.28);
  stroke-width:1.5;
  transition: stroke .25s ease;
}
.t-link.hot{ stroke: rgba(41,255,198,.75); }
.t-pkt{ opacity:.95; }
.t-ripple{
  fill:none;
  stroke: var(--accent);
  stroke-width:2;
  pointer-events:none;
}

.node{
  position:absolute;
  left: var(--x); top: var(--y);
  width:76px;
  margin-left:-38px;
  text-align:center;
  touch-action:none;
  cursor:none;
  z-index:5;
}
.node-box{
  position:relative;
  width:64px; height:64px;
  margin:0 auto;
  border-radius:18px;
  background: linear-gradient(160deg, rgba(20,32,44,.92), rgba(8,14,22,.92));
  border:1px solid rgba(41,255,198,.35);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.node:hover .node-box, .node.is-dragging .node-box{
  border-color: var(--accent);
  box-shadow: 0 0 26px -4px rgba(41,255,198,.5), 0 10px 30px -12px rgba(0,0,0,.8);
}
.node.is-dragging{ z-index:20; }
.node-box svg{ width:34px; height:34px; overflow:visible; }
.ic{ fill:none; stroke: var(--accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.ic.thin{ stroke-width:2.2; opacity:.85; }
.node-fw .ic{ stroke: var(--danger); }
.node[data-id="net"] .ic{ stroke: var(--accent-2); }
.node[data-id="srv"] .ic, .node[data-id="ws"] .ic{ stroke: var(--amber); }

.node-pulse{
  position:absolute; left:50%; top:32px;
  width:64px; height:64px;
  margin-left:-32px; margin-top:-32px;
  border-radius:18px;
  border:1px solid rgba(41,255,198,.4);
  animation: nodePulse 3s ease-out infinite;
  pointer-events:none;
}
@keyframes nodePulse{
  0%{ transform: scale(1); opacity:.7; }
  100%{ transform: scale(1.7); opacity:0; }
}
.node-tag{
  display:inline-block;
  margin-top:8px;
  font-size:9.5px; letter-spacing:.14em;
  color: var(--muted);
  background: rgba(6,12,18,.7);
  border:1px solid var(--line);
  padding:3px 8px;
  border-radius:999px;
  backdrop-filter: blur(4px);
}

#topo-status{
  position:absolute; bottom:-10px; left:50%;
  transform: translateX(-50%);
  white-space:nowrap;
  font-size:11px; letter-spacing:.06em;
  color: var(--muted);
  background: rgba(8,14,20,.7);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 18px;
  backdrop-filter: blur(8px);
}
#topo-status b{ color: var(--accent); font-weight:700; }
#topo-status .sep{ margin:0 8px; opacity:.4; }

/* ============ MARQUEE ============ */
.marquee{
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding: 16px 0;
  background: rgba(10,16,24,.5);
  position:relative; z-index:2;
}
.marquee-track{
  display:flex;
  width:max-content;
  font-size:13px; letter-spacing:.22em;
  color: var(--accent);
  animation: marquee 28s linear infinite;
}
.marquee-track span{ white-space:nowrap; }
@keyframes marquee{ to{ transform: translateX(-50%); } }

/* ============ ABOUT ============ */
.split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items:start;
}
.lead{
  font-size: clamp(16px, 1.9vw, 20px);
  color: var(--muted);
  line-height:1.65;
  max-width:640px;
}
.lead strong{ color: var(--ink); }
.stat-row{ display:grid; grid-template-columns: repeat(2,1fr); gap:30px 40px; margin-top:50px; }
.stat .num{
  font-size: clamp(36px, 4vw, 52px);
  font-weight:700; color: var(--accent);
  display:block; font-family: var(--mono);
}
.stat .label{ color: var(--muted); font-size:12px; letter-spacing:.05em; }

/* terminal */
.terminal{
  border:1px solid var(--line);
  border-radius:14px;
  background: rgba(6,10,16,.85);
  overflow:hidden;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
}
.term-bar{
  display:flex; align-items:center; gap:7px;
  padding: 11px 14px;
  border-bottom:1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.term-dot{ width:11px; height:11px; border-radius:50%; }
.term-dot.r{ background:#ff5f57; } .term-dot.y{ background:#febc2e; } .term-dot.g{ background:#28c840; }
.term-title{ margin-left:8px; font-size:11px; color: var(--muted); }
.term-body{
  margin:0;
  padding: 18px;
  font-size: 12px;
  line-height:1.75;
  min-height: 300px;
  color:#9fd8c8;
  white-space: pre-wrap;
  word-break: break-word;
}
.term-body .ok{ color: var(--accent); }
.term-body .dim{ color: var(--muted); }
.term-body .cmd{ color: var(--ink); font-weight:700; }

/* ============ SKILLS ============ */
.skill-groups{ display:grid; grid-template-columns: repeat(2,1fr); gap:22px; }
.skill-card{
  position:relative;
  border:1px solid var(--line);
  border-radius:20px;
  padding:28px;
  background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,0));
  transition: border-color .3s ease;
  will-change: transform;
}
.skill-card:hover{ border-color: rgba(41,255,198,.55); }
.skill-card h3{
  color: var(--accent); font-size:13px;
  letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:18px;
}
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tags span{
  border:1px solid var(--line);
  padding:7px 13px;
  border-radius:999px;
  font-size:12.5px;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.tags span:hover{ background: rgba(41,255,198,.12); border-color: var(--accent); transform: translateY(-2px); }
.card-badge{
  position:absolute; top:24px; right:24px;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:#03110c; background: var(--accent);
  padding:4px 10px; border-radius:999px; font-weight:700;
}

/* ============ PROOF OF WORK — LIVE LABS ============ */
.lab-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
  margin-top:50px;
}
.lab-card{
  display:block;
  border:1px solid var(--line);
  border-radius:20px;
  padding:30px;
  background: linear-gradient(160deg, rgba(41,255,198,.05), rgba(255,255,255,0));
  transition: border-color .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.lab-card:hover{
  border-color: rgba(41,255,198,.6);
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -24px rgba(41,255,198,.35);
}
.lab-card h3{
  color: var(--accent);
  font-size:14px; letter-spacing:.16em;
  margin-bottom:14px;
}
.lab-card p{
  color: var(--muted);
  font-size:14.5px; line-height:1.6;
  margin-bottom:20px;
}
.lab-card-cta{
  font-size:12px; letter-spacing:.1em;
  color: var(--ink);
  border-bottom:1px solid rgba(41,255,198,.5);
  padding-bottom:3px;
  transition: color .2s ease;
}
.lab-card:hover .lab-card-cta{ color: var(--accent); }

#latest-cases{ margin-top:36px; }
.latest-label{
  font-size:10px; letter-spacing:.2em;
  color: var(--accent);
  margin-bottom:14px;
}
.case-row{
  display:flex; align-items:center; gap:18px;
  padding:14px 18px;
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:8px;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.case-row:hover{
  border-color: rgba(41,255,198,.5);
  background: rgba(41,255,198,.04);
  transform: translateX(4px);
}
.case-row-id{ font-size:11px; color: var(--accent); letter-spacing:.06em; flex-shrink:0; }
.case-row-title{ font-size:14px; color: var(--ink); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.case-row-meta{ font-size:10.5px; color: var(--muted); letter-spacing:.05em; flex-shrink:0; }
@media (max-width:720px){
  .lab-cards{ grid-template-columns:1fr; }
  .case-row{ flex-wrap:wrap; gap:8px; }
  .case-row-title{ width:100%; flex:none; white-space:normal; }
}

/* ============ TIMELINE ============ */
.timeline{ position:relative; padding-left:32px; border-left:1px solid var(--line); }
.tl-item{ position:relative; padding-bottom:56px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{
  position:absolute; left:-38px; top:5px;
  width:12px; height:12px; border-radius:50%;
  background: var(--bg);
  border:2px solid var(--accent);
  box-shadow: 0 0 0 5px var(--bg), 0 0 14px rgba(41,255,198,.6);
}
.tl-date{ color: var(--accent); font-size:12px; letter-spacing:.1em; margin-bottom:8px; }
.tl-content h3{ font-size:22px; margin-bottom:3px; }
.tl-org{ color: var(--muted); font-size:14px; margin-bottom:16px; }
.tl-list li{
  position:relative;
  color: var(--muted);
  line-height:1.6;
  font-size:14.5px;
  padding: 0 0 10px 20px;
  max-width: 760px;
}
.tl-list li::before{
  content:'▸';
  position:absolute; left:0; top:0;
  color: var(--accent);
}

/* ============ CREDENTIALS ============ */
.cred-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.cred-card{
  position:relative;
  border:1px solid var(--line);
  border-radius:20px;
  padding:32px;
  background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,0));
  transition: border-color .3s ease;
  will-change: transform;
}
.cred-card:hover{ border-color: rgba(41,255,198,.55); }
.cred-kicker{ font-size:11px; letter-spacing:.2em; color: var(--accent); margin-bottom:14px; }
.cred-card h3{ font-size:21px; margin-bottom:8px; }
.badge{
  position:absolute; top:28px; right:28px;
  font-family: var(--mono); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase;
  color: var(--accent);
  border:1px solid rgba(41,255,198,.45);
  padding:3px 10px; border-radius:999px;
}

/* ============ CONTACT ============ */
.contact-links{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin:36px 0 30px; }
.foot{ font-size:12px; letter-spacing:.1em; }

/* ============ REVEAL ============ */
.reveal{ opacity:0; transform: translateY(44px); }
.reveal.in{ animation: revealUp .9s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes revealUp{ to{ opacity:1; transform: translateY(0); } }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  #hero{ grid-template-columns: 1fr; padding-top: 10vh; }
  #topo{ height: 56vh; margin-top: 4vh; }
  .split{ grid-template-columns: 1fr; }
  .skill-groups, .cred-row{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .node{ width:64px; margin-left:-32px; }
  .node-box{ width:52px; height:52px; border-radius:14px; }
  .node-pulse{ width:52px; height:52px; margin-left:-26px; margin-top:-26px; top:26px; }
  .node-box svg{ width:28px; height:28px; }
  .stat-row{ grid-template-columns: 1fr 1fr; gap:24px; }
  #topo-status{ font-size:10px; padding:7px 12px; }
}