:root{
  --bg:#0a0e13; --surface:#11181f; --surface-2:#0d141a;
  --border:#1f2a35; --border-soft:#2a3744;
  --text:#aab6c1; --text-dim:#8a98a5; --head:#f3f7fb;
  --accent:#34d399; --accent-ink:#06241a;
  --accent2:#a78bfa; --accent2-dim:#7c5cd6;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --maxw:1080px; --pad:clamp(20px,5vw,40px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
::selection{background:rgba(52,211,153,.28); color:#eafff6}

.skip{position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--accent-ink); padding:10px 16px; z-index:100}
.skip:focus{left:0}

/* ===== NAV ===== */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:16px var(--pad);
  background:transparent; border-bottom:1px solid transparent;
  transition:background .25s ease, backdrop-filter .25s ease, border-color .25s ease;
}
.nav.scrolled{background:rgba(10,14,19,.8); backdrop-filter:blur(10px); border-bottom-color:var(--border)}
.wordmark{font-weight:700; letter-spacing:.5px; color:var(--head); font-size:18px}
.wordmark .dot{color:var(--accent)}
.links{display:flex; gap:24px; font-family:var(--mono); font-size:12px; letter-spacing:1px; color:var(--text-dim)}
.links a{transition:color .2s ease}
.links a:hover,.links a:focus,.links a.active{color:var(--accent)}

/* ===== HERO ===== */
.hero{
  position:relative; overflow:hidden;
  display:flex; align-items:center; min-height:clamp(340px,46vh,440px);
}
.pcb{
  position:absolute; top:50%; right:0; transform:translateY(-50%);
  width:min(48%,480px); height:auto; z-index:0; opacity:.9; pointer-events:none;
}
/* hero signal pulses — CSS (was SMIL; SMIL pauses in iOS Low Power Mode / in-app browsers) */
.pulse path{stroke-dashoffset:0}
.pulse-1{animation:pulse-flow 10s linear infinite}
.pulse-2{animation:pulse-flow 13s linear infinite; animation-delay:2s}
.pulse-3{animation:pulse-flow 16s linear infinite; animation-delay:4s}
@keyframes pulse-flow{from{stroke-dashoffset:-200}to{stroke-dashoffset:0}}
#dataPackets path{animation:pkt-flow var(--pkt-dur,2s) linear forwards}
@keyframes pkt-flow{from{stroke-dashoffset:var(--pkt-from)}to{stroke-dashoffset:var(--pkt-to)}}
.hero-content{position:relative; z-index:1; max-width:var(--maxw); width:100%; margin:0 auto; padding:48px var(--pad)}
.eyebrow{font-family:var(--mono); color:var(--accent); font-size:12px; letter-spacing:2px; margin:0 0 18px}
h1{
  color:var(--head); font-weight:800; letter-spacing:-.025em;
  font-size:clamp(34px,6.2vw,56px); line-height:1.04; margin:0 0 20px; max-width:14ch;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.lede{font-size:clamp(16px,2.2vw,19px); line-height:1.55; max-width:480px; margin:0 0 34px; color:#b6c2cd}

.hero-actions{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.hero-links{display:flex; gap:18px; font-family:var(--mono); font-size:13px; color:var(--text-dim)}
.hero-links a{transition:color .2s ease}
.hero-links a:hover{color:var(--accent)}

/* ===== BUTTONS (outline, fill on hover) ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:48px; padding:0 22px; border-radius:10px;
  font-family:var(--sans); font-size:14.5px; font-weight:600; letter-spacing:.005em; line-height:1;
  white-space:nowrap; cursor:pointer;
  border:1px solid var(--border-soft); background:transparent; color:#dbe4ec;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background .2s ease,border-color .2s ease,color .2s ease,box-shadow .25s ease;
}
.btn:hover{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(52,211,153,.55)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.btn-solid{border-color:rgba(52,211,153,.5); color:var(--accent)}

/* ===== SECTIONS ===== */
.section{max-width:var(--maxw); margin:0 auto; padding:clamp(44px,6.5vw,72px) var(--pad); scroll-margin-top:72px}
.kicker{font-family:var(--mono); color:var(--accent2); font-size:11px; letter-spacing:2px; margin:0 0 28px; display:flex; align-items:center; gap:12px}
.kicker::before{content:""; width:24px; height:1px; background:var(--accent2)}

.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}

/* ===== CARDS (shared by Work + What I do) ===== */
.card{
  position:relative; display:block; overflow:hidden;
  background:linear-gradient(165deg,#121b23,#0e151c);
  border:1px solid var(--border); border-radius:14px; padding:22px;
  transition:border-color .25s ease,transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;
}
.card::before{content:""; position:absolute; left:0; top:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(52,211,153,.6),transparent); opacity:0; transition:opacity .3s ease}
.card:hover{border-color:rgba(52,211,153,.42); transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(52,211,153,.07)}
.card:hover::before{opacity:1}

/* work cards get an external-link mark */
a.card::after{content:"↗"; position:absolute; top:18px; right:20px; color:#3a4a57; font-size:15px; transition:color .25s ease,transform .25s ease}
a.card:hover::after{color:var(--accent); transform:translate(2px,-2px)}

.card-top{display:flex; align-items:baseline; gap:10px}
.card-name{color:var(--head); font-weight:700; font-size:18px; letter-spacing:-.01em}
.stars{font-family:var(--mono); color:var(--accent2); font-size:12px; padding:3px 8px; border:1px solid rgba(167,139,250,.3); border-radius:20px; background:rgba(167,139,250,.06)}
.card-desc{margin:12px 0 0; font-size:14px; line-height:1.55; color:#9fb0bd}
.card-meta{font-family:var(--mono); color:#5b6b7a; font-size:11px; margin:16px 0 0; letter-spacing:.5px}

/* static (What I do) */
.card-static{cursor:default}
.cap-label{font-family:var(--mono); color:var(--accent); font-size:11px; letter-spacing:1.5px; margin:0 0 12px}
.card-static h3{color:var(--head); font-size:19px; margin:0 0 10px; font-weight:700; letter-spacing:-.01em}
.card-static p{margin:0; font-size:14px; line-height:1.6; color:#9fb0bd}

.more{margin:24px 0 0; font-family:var(--mono); font-size:13px}
.more a{color:var(--accent)}

/* ===== ABOUT (centered card) ===== */
.about-card{max-width:680px; margin:0 auto; text-align:center; border:1px solid var(--border); border-radius:16px; background:linear-gradient(160deg,#11181f,#0d141a); padding:clamp(32px,5vw,48px) clamp(24px,5vw,44px)}
.about-icon{width:30px; height:30px; color:var(--accent2); display:block; margin:0 auto 16px}
.about-card .kicker{justify-content:center; margin:0 0 16px}
.about-card .kicker::before{display:none}
.about-text{font-size:clamp(16px,2vw,18px); line-height:1.6; margin:0 auto 18px; color:var(--text); max-width:560px}
.about-text strong{color:var(--head)}
.about-link a{color:var(--accent); font-family:var(--mono); font-size:14px; margin:0 8px}

/* ===== CONTACT BAND ===== */
.cta-band{
  text-align:center; border:1px solid var(--border); border-radius:16px;
  background:linear-gradient(160deg,#11181f,#0d141a); padding:clamp(36px,6vw,56px) var(--pad);
}
.cta-band .eyebrow{margin-bottom:14px; color:var(--accent2)}
.cta-band h2{color:var(--head); font-size:clamp(26px,4.5vw,38px); font-weight:800; letter-spacing:-.02em; margin:0 0 14px; line-height:1.08}
.cta-lede{max-width:540px; margin:0 auto 28px; font-size:clamp(15px,2vw,17px)}

/* ===== GENERATED PCB DIVIDER (CSS-drawn on scroll — mobile-reliable, no SMIL) ===== */
.divider{max-width:1200px; margin:0 auto; padding:0 var(--pad)}
.dsvg{display:block; width:100%; height:auto; opacity:.45}
/* simple dividers (1 & 2): traces draw left→right, hold, fade, loop (matches old SMIL cadence) */
.divider .dtrace{stroke-dasharray:1; stroke-dashoffset:1; opacity:0}
.divider.in .dtrace{animation:dtrace-loop 5.5s linear infinite}
.divider.in .dtrace-b{animation-delay:2.7s}
@keyframes dtrace-loop{
  0%{stroke-dashoffset:1; opacity:0}
  12%{opacity:1}
  55%{stroke-dashoffset:0}
  72%{stroke-dashoffset:0; opacity:1}
  100%{stroke-dashoffset:0; opacity:0}
}
.divider .dvia{opacity:0}
.divider.in .dvia{animation:dvia-loop 5.5s linear infinite}
.divider.in .dvia:nth-child(3),.divider.in .dvia:nth-child(4){animation-delay:2.7s}
@keyframes dvia-loop{0%,25%{opacity:0}35%,72%{opacity:1}100%{opacity:0}}
/* PCB strip (divider 3): pulses flow along the static skeleton */
.dflow{stroke-dashoffset:0}
.dflow-1{animation:dflow1 7s linear infinite}
.dflow-2{animation:dflow2 9s linear infinite}
.dflow-3{animation:dflow3 11s linear infinite}
@keyframes dflow1{to{stroke-dashoffset:-1263}}
@keyframes dflow2{to{stroke-dashoffset:-1245}}
@keyframes dflow3{to{stroke-dashoffset:-1239}}

/* ===== WORK CARD ART (showcase) ===== */
.card-art{height:86px; margin:-22px -22px 16px; border-bottom:1px solid var(--border); border-radius:14px 14px 0 0; overflow:hidden; background:linear-gradient(180deg,#13202a,#0e151c)}
.card-art svg{width:100%; height:100%; display:block}

/* glyphs static at rest; ONE thematic motion per card. Fires on scroll-into-view (.in — mobile,
   no hover) for a bounded burst, AND on :hover (desktop) infinitely. */
.work-card .ah-ping{transform-box:fill-box; transform-origin:center; opacity:0}
.work-card.in .ah-ping{animation:ah-ping 1.9s ease-out 3}
.work-card:hover .ah-ping{animation:ah-ping 1.9s ease-out infinite}
@keyframes ah-ping{0%{transform:scale(.45);opacity:.85}75%{transform:scale(2.6);opacity:0}100%{opacity:0}}

.work-card .ds-ring{opacity:.45}
.work-card.in .ds-ring{animation:ds-pulse 1.9s ease 3}
.work-card:hover .ds-ring{animation:ds-pulse 1.9s ease infinite}
@keyframes ds-pulse{0%,100%{opacity:.35}50%{opacity:.95}}

.work-card .ps-check{stroke-dasharray:36}
.work-card.in .ps-check{animation:ps-draw .7s ease}
.work-card:hover .ps-check{animation:ps-draw .7s ease}
@keyframes ps-draw{from{stroke-dashoffset:36}to{stroke-dashoffset:0}}

.work-card .mo-glitch{opacity:0}
.work-card.in .mo-glitch{animation:mo-flick 1.7s steps(10,end) 3}
.work-card:hover .mo-glitch{animation:mo-flick 1.7s steps(10,end) infinite}
@keyframes mo-flick{0%,100%{opacity:0}30%{opacity:.85}50%{opacity:0}70%{opacity:.5}}

/* ===== SERVICE ICON ===== */
.svc-icon{width:26px; height:26px; color:var(--accent); display:block; margin:0 0 14px}

/* ===== FOOTER ===== */
.footer{border-top:1px solid var(--border); padding:32px var(--pad); margin-top:24px}
.footer-row{max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px}
.footer-links{display:flex; gap:20px; font-family:var(--mono); font-size:12px; color:var(--text-dim)}
.footer-links a:hover{color:var(--accent)}
.copyright{max-width:var(--maxw); margin:18px auto 0; font-family:var(--mono); font-size:11px; color:#48555f}

/* ===== REVEAL (directional, staggered, "constructed") ===== */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.22,.7,.25,1), transform .8s cubic-bezier(.22,.7,.25,1)}
.reveal.in{opacity:1; transform:none}
/* cards build in from alternating sides */
.grid>.reveal:nth-child(odd){transform:translate(-48px,10px)}
.grid>.reveal:nth-child(even){transform:translate(48px,10px)}
.grid>.reveal.in{transform:none}
/* staggered entrance — CSS-driven so no inline-style write (CSP style-src 'self' safe) */
.hero-content>.reveal.in:nth-child(2){transition-delay:90ms}
.hero-content>.reveal.in:nth-child(3){transition-delay:180ms}
.hero-content>.reveal.in:nth-child(4){transition-delay:270ms}
.grid>.reveal.in:nth-child(2){transition-delay:90ms}
.grid>.reveal.in:nth-child(3){transition-delay:180ms}
.grid>.reveal.in:nth-child(4){transition-delay:270ms}
.section>.more.reveal.in{transition-delay:90ms}

/* ===== RESPONSIVE ===== */
@media (max-width:720px){
  .grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .pcb{width:78%; opacity:.32; top:34%}
  .hero{min-height:auto}
  .hero-content{padding:48px var(--pad) 40px}
  .links{gap:16px}
  h1{font-size:clamp(30px,9vw,40px)}
  .hero-actions{gap:18px}
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .btn:hover,.card:hover{transform:none}
  .work-card .ah-ping,.work-card .ds-ring,.work-card .ps-check,.work-card .mo-glitch,
  .work-card.in .ah-ping,.work-card.in .ds-ring,.work-card.in .ps-check,.work-card.in .mo-glitch{animation:none}
  .pcb .pulse{animation:none}
  /* dividers render fully drawn + vias visible (static art), never blank */
  .divider .dtrace,.divider.in .dtrace{stroke-dashoffset:0; animation:none}
  .divider .dvia,.divider.in .dvia{opacity:1; animation:none}
  .dflow,.dflow-1,.dflow-2,.dflow-3{animation:none}
}