:root{
  --bg:#0b1020;
  --panel:#11182c;
  --panel2:#151f38;
  --text:#f4f6fb;
  --muted:#a9b3c7;
  --line:#25314f;
  --accent:#7dd3fc;
  --accent2:#c4b5fd;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 0%, rgba(125,211,252,.12), transparent 28rem),
    radial-gradient(circle at 90% 10%, rgba(196,181,253,.10), transparent 26rem),
    var(--bg);
  line-height:1.65;
}
a{color:inherit}
.container{width:min(var(--max), calc(100% - 2.2rem)); margin:auto}
.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:blur(14px);
  background:rgba(11,16,32,.82);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{
  min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{text-decoration:none; font-weight:800; letter-spacing:.01em}
.brand span{color:var(--accent)}
.nav-links{display:flex; gap:1.1rem; flex-wrap:wrap; align-items:center}
.nav-links a{color:var(--muted); text-decoration:none; font-size:.95rem}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.05rem; border-radius:999px; text-decoration:none;
  border:1px solid var(--line); background:#fff; color:#0b1020; font-weight:750;
}
.btn.secondary{background:transparent; color:var(--text)}
.hero{padding:7rem 0 4rem}
.eyebrow{
  text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; color:var(--accent); font-weight:800;
}
h1,h2,h3{line-height:1.12; margin:.35em 0 .5em}
h1{font-size:clamp(2.8rem,7vw,5.7rem); max-width:12ch; letter-spacing:-.04em}
h2{font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-.025em}
h3{font-size:1.25rem}
.lede{font-size:clamp(1.15rem,2vw,1.45rem); color:var(--muted); max-width:760px}

.hero-name{
  font-size:clamp(3rem,6vw,5.1rem);
  max-width:14ch;
  margin:.22em 0 .12em;
  letter-spacing:-.045em;
}
.hero-alias{
  color:var(--accent);
  font-size:clamp(1rem,1.5vw,1.15rem);
  font-weight:750;
  letter-spacing:.02em;
  margin-bottom:1.35rem;
}
.hero-statement{
  font-size:clamp(2rem,4.2vw,3.7rem);
  max-width:17ch;
  margin:.2em 0 .55em;
  letter-spacing:-.035em;
}

.hero-actions{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.7rem}
.grid{display:grid; gap:1rem}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.025));
  border:1px solid var(--line); border-radius:22px; padding:1.4rem;
}
.card p,.muted{color:var(--muted)}
.metric{font-size:2rem; font-weight:850; letter-spacing:-.04em}
.section{padding:4.5rem 0}
.section.compact{padding:2.5rem 0}
.rule{border-top:1px solid var(--line)}
.kicker{font-size:.86rem; color:var(--accent2); font-weight:800}
.link-arrow{color:var(--accent); text-decoration:none; font-weight:750}
.link-arrow:hover{text-decoration:underline}
.prose{max-width:780px}
.prose p,.prose li{color:#d6dbea}
.prose h2{margin-top:1.5em}
.prose h3{margin-top:1.4em}
.list-clean{list-style:none; padding:0; margin:0}
.list-clean li{padding:.65rem 0; border-bottom:1px solid var(--line)}
.tag{
  display:inline-block; border:1px solid var(--line); border-radius:999px;
  padding:.32rem .65rem; margin:.18rem .18rem .18rem 0; color:var(--muted); font-size:.88rem
}
.quote{
  border-left:3px solid var(--accent); padding-left:1rem; color:#dfe7f6; font-size:1.15rem
}
.site-footer{padding:2rem 0 3rem; border-top:1px solid var(--line); color:var(--muted)}
.footer-row{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.small{font-size:.9rem}
.article-meta{color:var(--muted); font-size:.95rem}
.breadcrumbs{padding-top:2rem; color:var(--muted); font-size:.9rem}
.breadcrumbs a{color:var(--muted)}
.notice{
  border:1px solid var(--line); background:rgba(125,211,252,.06);
  padding:1rem 1.1rem; border-radius:16px; color:#dfe7f6
}
@media (max-width:820px){
  .grid.three,.grid.two{grid-template-columns:1fr}
  .nav{align-items:flex-start; padding:1rem 0}
  .nav-links{justify-content:flex-end}
  .hero{padding-top:4.5rem}
}

.career-item{
  padding:1.25rem 0 2rem;
  border-bottom:1px solid var(--line);
}
.career-item + .career-item{padding-top:2rem}
.career-item h2{margin-bottom:.25rem}
.career-item h3{color:#dfe7f6; margin-top:.2rem}