:root{

  --bg: #0b1020;

  --bg2:#070b16;

  --card:#0f1730;

  --stroke: rgba(255,255,255,.08);

  --stroke2: rgba(255,255,255,.12);

  --text:#e7eaf0;

  --muted:#9aa4b2;

  --accent:#3b82f6;

  --ok:#22c55e;

  --shadow: 0 12px 40px rgba(0,0,0,.35);

  --radius: 18px;

}



*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{

  margin:0;

  color:var(--text);

  background:

    radial-gradient(900px 600px at 15% 10%, rgba(59,130,246,.12), transparent 55%),

    radial-gradient(900px 600px at 85% 20%, rgba(34,197,94,.07), transparent 60%),

    linear-gradient(180deg, var(--bg), var(--bg2));

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  line-height:1.6;

}



a{ color:inherit; text-decoration:none; }

a:hover{ text-decoration:underline; text-decoration-color: rgba(255,255,255,.35); }



.container{

  width:min(1020px, 92vw);

  margin:0 auto;

  padding: 22px 0;

}



.mono{ font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

.muted{ color:var(--muted); }

.tiny{ font-size: 12px; }



.skip{

  position:absolute; left:-9999px; top:auto;

  width:1px; height:1px; overflow:hidden;

}

.skip:focus{

  left: 16px; top: 16px; width:auto; height:auto;

  background: rgba(255,255,255,.04);

  padding: 10px 12px;

  border: 1px solid var(--stroke);

  border-radius: 12px;

  z-index: 9999;

}



.topbar{

  position: sticky;

  top: 0;

  z-index: 50;

  backdrop-filter: blur(10px);

  background: rgba(7,11,22,.55);

  border-bottom: 1px solid var(--stroke);

}

.bar{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap: 16px;

  padding: 14px 0;

}

.brand{

  display:flex;

  align-items:center;

  gap: 10px;

  font-weight: 700;

  letter-spacing: .2px;

}

.dot{

  width: 10px;

  height: 10px;

  border-radius: 99px;

  background: var(--accent);

  box-shadow: 0 0 0 5px rgba(59,130,246,.18);

}



.nav{

  display:flex;

  gap: 14px;

  align-items:center;

  flex-wrap:wrap;

  color: rgba(231,234,240,.92);

}

.nav a{ opacity:.85; }

.nav a:hover{ opacity:1; }



.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap: 10px;

  padding: 12px 14px;

  border-radius: 14px;

  border: 1px solid var(--stroke2);

  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));

  box-shadow: 0 8px 18px rgba(0,0,0,.25);

  text-decoration:none !important;

  transition: transform .12s ease, border-color .12s ease;

  cursor: pointer;

}

.btn:hover{ transform: translateY(-1px); border-color: rgba(59,130,246,.35); }

.btn:active{ transform: translateY(0px); }



.btn.ghost{

  background: transparent;

  box-shadow:none;

}

.btn.small{ padding: 9px 12px; border-radius: 12px; }



.hero{

  display:grid;

  grid-template-columns: 1.3fr .9fr;

  gap: 18px;

  padding: 26px 0 8px;

}

@media (max-width: 860px){

  .hero{ grid-template-columns: 1fr; }

}



.kicker{

  display:inline-block;

  padding: 6px 10px;

  border: 1px solid var(--stroke);

  border-radius: 999px;

  background: rgba(255,255,255,.03);

}



h1{

  font-size: clamp(28px, 3.5vw, 44px);

  line-height: 1.15;

  margin: 12px 0 10px;

  letter-spacing: -.3px;

}

.lead{

  font-size: 16px;

  color: rgba(231,234,240,.88);

  max-width: 60ch;

  margin: 0 0 14px;

}

.hero-cta{

  display:flex;

  gap: 10px;

  flex-wrap:wrap;

  margin: 14px 0 12px;

}



.badges{

  display:flex;

  flex-wrap:wrap;

  gap: 8px;

}

.badge{

  padding: 7px 10px;

  border-radius: 999px;

  border: 1px solid var(--stroke);

  background: rgba(255,255,255,.02);

  color: rgba(231,234,240,.92);

  font-size: 13px;

}



.panel{

  border-radius: var(--radius);

  border: 1px solid var(--stroke);

  background:

    radial-gradient(700px 300px at 40% 0%, rgba(59,130,246,.12), transparent 55%),

    rgba(255,255,255,.02);

  box-shadow: var(--shadow);

  padding: 16px;

}

.panel-header{

  display:flex;

  align-items:center;

  gap: 12px;

  padding-bottom: 12px;

  border-bottom: 1px solid var(--stroke);

  margin-bottom: 12px;

}

.panel-title{ font-weight: 700; }

.panel-sub{ color: var(--muted); font-size: 13px; }



.pulse{

  width: 12px;

  height: 12px;

  border-radius: 99px;

  background: var(--ok);

  box-shadow: 0 0 0 6px rgba(34,197,94,.14);

  animation: pulse 1.6s ease-in-out infinite;

}

@keyframes pulse{

  0%,100%{ transform: scale(1); opacity: 1; }

  50%{ transform: scale(1.2); opacity: .7; }

}



.panel-grid{

  display:grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

}

.stat{

  padding: 12px;

  border-radius: 14px;

  border: 1px solid var(--stroke);

  background: rgba(0,0,0,.12);

}

.stat-k{ color: var(--muted); font-size: 12px; }

.stat-v{ margin-top: 4px; font-weight: 600; }



.panel-footer{

  margin-top: 12px;

  padding-top: 12px;

  border-top: 1px solid var(--stroke);

  color: rgba(231,234,240,.85);

}



.section{

  padding: 26px 0 8px;

}

.section-head{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap: 16px;

  margin-bottom: 12px;

  flex-wrap:wrap;

}

h2{

  margin: 0;

  font-size: 22px;

  letter-spacing: -.2px;

}



.grid{

  display:grid;

  gap: 14px;

}

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

.grid-3{ grid-template-columns: repeat(3, 1fr); }

@media (max-width: 860px){

  .grid-2, .grid-3{ grid-template-columns: 1fr; }

}



.card{

  border-radius: var(--radius);

  border: 1px solid var(--stroke);

  background: rgba(255,255,255,.02);

  padding: 16px;

  box-shadow: 0 10px 26px rgba(0,0,0,.25);

  transition: transform .12s ease, border-color .12s ease;

}

.card:hover{

  transform: translateY(-2px);

  border-color: rgba(59,130,246,.25);

}



.card-top{

  display:flex;

  align-items:center;

  gap: 10px;

  margin-bottom: 8px;

}

.icon{

  display:inline-flex;

  width: 34px;

  height: 34px;

  border-radius: 12px;

  align-items:center;

  justify-content:center;

  border: 1px solid var(--stroke);

  background: rgba(255,255,255,.03);

}

h3{ margin:0; font-size: 16px; }



.list{

  margin: 10px 0 0;

  padding-left: 18px;

  color: rgba(231,234,240,.85);

}

.list li{ margin: 6px 0; }



.kv{ margin-top: 10px; }

.kv-row{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap: 12px;

  padding: 10px 0;

  border-top: 1px dashed rgba(255,255,255,.10);

}

.kv-row:first-child{ border-top: 0; }

.kv-k{ color: var(--muted); }

.kv-v{ color: rgba(231,234,240,.92); font-weight: 600; }



.callout{

  margin-top: 14px;

  padding: 14px 16px;

  border-radius: var(--radius);

  border: 1px solid rgba(59,130,246,.18);

  background: rgba(59,130,246,.06);

}

.callout-title{ font-weight: 700; margin-bottom: 6px; }



.proj{

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap: 12px;

}

.tag{

  padding: 6px 10px;

  border-radius: 999px;

  border: 1px solid var(--stroke);

  background: rgba(255,255,255,.02);

  color: rgba(231,234,240,.9);

  font-size: 12px;

}



.chips{

  display:flex;

  flex-wrap:wrap;

  gap: 8px;

  margin-top: 10px;

}

.chip{

  padding: 6px 9px;

  border-radius: 999px;

  border: 1px solid var(--stroke);

  background: rgba(0,0,0,.10);

  color: rgba(231,234,240,.86);

  font-size: 12px;

}



.actions{

  display:flex;

  gap: 10px;

  flex-wrap:wrap;

  margin-top: 12px;

}



.links{

  list-style:none;

  padding:0;

  margin: 10px 0 0;

  display:grid;

  gap: 10px;

}

.links a{

  display:flex;

  padding: 10px 12px;

  border-radius: 14px;

  border: 1px solid var(--stroke);

  background: rgba(0,0,0,.10);

}

.links a:hover{

  border-color: rgba(59,130,246,.25);

  text-decoration:none;

}



.footer{

  padding: 28px 0 40px;

  border-top: 1px solid var(--stroke);

  margin-top: 18px;

}

.footer-inner{

  display:flex;

  justify-content:space-between;

  gap: 12px;

  flex-wrap:wrap;

}