:root{
  --bg:#07111f;
  --bg-soft:#0b1728;
  --card:#0d1a2d;
  --card-2:#101f36;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --line:rgba(148,163,184,.18);
  --accent:#4ade80;
  --accent-2:#38bdf8;
  --shadow:0 18px 50px rgba(0,0,0,.28);
  --radius:24px;
  --max:1180px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{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;
  background:
    radial-gradient(1000px 800px at 15% 0%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(900px 700px at 85% 10%, rgba(74,222,128,.10), transparent 55%),
    linear-gradient(180deg, #07111f 0%, #081423 100%);
  color:var(--text);
  line-height:1.65;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
p{margin:0 0 1rem}
h1,h2,h3,h4{line-height:1.1; margin:0 0 .75rem}
h1{font-size:clamp(2.45rem, 4vw, 4.8rem); letter-spacing:-.03em}
h2{font-size:clamp(1.6rem, 2.2vw, 2.4rem); letter-spacing:-.025em}
h3{font-size:1.2rem}
small,.muted{color:var(--muted)}
.container{width:min(100% - 2rem, var(--max)); margin-inline:auto}
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; padding:.75rem 1rem; z-index:9999;
  background:#fff; color:#000; border-radius:12px;
}
.site-header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(14px);
  background:rgba(7,17,31,.72);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0;
}
.brand{display:flex; align-items:center; gap:.85rem; font-weight:700}
.brand-mark{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(74,222,128,.18), rgba(56,189,248,.18));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.brand-mark svg{width:26px; height:26px}
.brand-text{display:flex; flex-direction:column; line-height:1.05}
.brand-text span:last-child{color:var(--muted); font-weight:500; font-size:.84rem}
.nav-links{
  display:flex; gap:.4rem; flex-wrap:wrap; align-items:center;
}
.nav-links a{
  color:var(--muted); padding:.65rem .92rem; border-radius:999px; transition:all .2s var(--ease);
}
.nav-links a:hover,.nav-links a.active{
  color:var(--text); background:rgba(148,163,184,.10); border:1px solid var(--line);
}
.nav-cta{
  display:flex; align-items:center; gap:.65rem;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1.15rem; border-radius:999px; border:1px solid transparent;
  font-weight:600; transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#03111a;
}
.btn-secondary{
  background:rgba(255,255,255,.02);
  border-color:var(--line);
  color:var(--text);
}
.menu-btn{
  display:none; background:transparent; color:var(--text); border:1px solid var(--line);
  border-radius:14px; padding:.75rem; cursor:pointer;
}
.hero{
  padding:5.5rem 0 2rem;
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center;
}
.kicker{
  display:inline-flex; gap:.55rem; align-items:center; padding:.45rem .8rem;
  border:1px solid var(--line); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.02);
  margin-bottom:1rem; font-size:.95rem;
}
.kicker b{color:var(--text)}
.hero p.lead{font-size:1.12rem; color:#cbd5e1; max-width:60ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:.85rem; margin:1.6rem 0 1.1rem}
.hero-card{
  background:linear-gradient(180deg, rgba(16,31,54,.96), rgba(9,21,38,.96));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.25rem;
}
.metric-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:.9rem; margin-top:1.1rem;
}
.metric{
  background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:18px; padding:1rem;
}
.metric strong{display:block; font-size:1.55rem; margin-bottom:.2rem}
.metric span{color:var(--muted); font-size:.95rem}
.section{padding:2.4rem 0}
.section-head{
  display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.2rem;
}
.section-head p{max-width:70ch; color:var(--muted)}
.grid{
  display:grid; gap:1rem;
}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:linear-gradient(180deg, rgba(16,31,54,.9), rgba(9,21,38,.94));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:var(--shadow);
}
.card.flat{background:rgba(255,255,255,.02)}
.card h3{margin-bottom:.5rem}
.pill-row{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.85rem}
.pill{
  display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .72rem;
  border-radius:999px; border:1px solid var(--line); color:#dbeafe; font-size:.9rem;
  background:rgba(255,255,255,.015);
}
.stat-strip{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem;
}
.stat{
  padding:1rem 1.1rem; border-radius:20px; border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.stat strong{display:block; font-size:1.65rem}
.stat span{color:var(--muted); font-size:.92rem}
.section-surface{
  position:relative;
}
.section-surface::before{
  content:""; position:absolute; inset:0; border-radius:32px; pointer-events:none;
  background:linear-gradient(180deg, rgba(74,222,128,.04), rgba(56,189,248,.03));
}
.page-hero{
  padding:4rem 0 1.2rem;
}
.page-hero .hero-card{padding:1.5rem}
.breadcrumbs{color:var(--muted); font-size:.95rem; margin-bottom:.9rem}
.prose{
  color:#dbeafe;
}
.prose p{max-width:75ch}
.timeline{
  display:grid; gap:.9rem;
}
.timeline-item{
  display:grid; grid-template-columns:140px 1fr; gap:1rem; align-items:start;
  padding:1rem; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.02);
}
.timeline-item .date{color:var(--accent); font-weight:700; font-size:.95rem}
.project-card{
  display:flex; flex-direction:column; gap:.85rem; height:100%;
}
.project-meta{
  display:flex; gap:.5rem; flex-wrap:wrap;
}
.tag{
  font-size:.82rem; padding:.32rem .6rem; border-radius:999px;
  border:1px solid var(--line); color:#cbd5e1; background:rgba(255,255,255,.02);
}
.filterbar{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1rem;
}
.filterbar button{
  background:rgba(255,255,255,.03); color:var(--text); border:1px solid var(--line);
  padding:.65rem .9rem; border-radius:999px; cursor:pointer;
}
.filterbar button[aria-pressed="true"]{
  background:linear-gradient(135deg, rgba(74,222,128,.18), rgba(56,189,248,.18));
  color:var(--text);
}
.list-check{
  list-style:none; padding:0; margin:0;
}
.list-check li{
  position:relative; padding-left:1.55rem; margin-bottom:.72rem; color:#dbeafe;
}
.list-check li::before{
  content:""; position:absolute; left:0; top:.52rem; width:.72rem; height:.72rem; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 0 0 4px rgba(74,222,128,.08);
}
.forms{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
input,textarea{
  width:100%; background:rgba(255,255,255,.03); color:var(--text); border:1px solid var(--line);
  border-radius:18px; padding:.9rem 1rem; font:inherit;
}
textarea{min-height:160px; resize:vertical}
label{display:block; margin:.2rem 0 .45rem; color:#dbeafe}
.footer{
  margin-top:3rem; border-top:1px solid var(--line); padding:1.6rem 0 2.5rem; color:var(--muted);
}
.footer-grid{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.table-wrap{overflow:auto; border-radius:20px; border:1px solid var(--line)}
table{width:100%; border-collapse:collapse; min-width:720px; background:rgba(255,255,255,.02)}
th,td{padding:.9rem 1rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
th{color:#f8fafc; background:rgba(255,255,255,.03)}
code,kbd{font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
pre{
  overflow:auto; padding:1rem; border-radius:18px; background:#08111f; border:1px solid var(--line);
}
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.in-view{opacity:1; transform:none}
@media (max-width: 980px){
  .hero-grid,.grid.cols-4,.grid.cols-3,.grid.cols-2,.forms,.stat-strip{grid-template-columns:1fr 1fr}
  .timeline-item{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .nav{gap:.75rem}
  .menu-btn{display:inline-flex}
  .nav-links{
    position:absolute; left:1rem; right:1rem; top:76px; padding:1rem;
    display:none; flex-direction:column; align-items:stretch;
    background:rgba(8,17,31,.98); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
  }
  .nav-links.open{display:flex}
  .nav-cta{display:none}
  .hero-grid,.grid.cols-4,.grid.cols-3,.grid.cols-2,.forms,.stat-strip,.metric-grid{grid-template-columns:1fr}
  .hero{padding-top:3.8rem}
  .section-head{flex-direction:column; align-items:start}
}