:root{

  --bg: #0b0f14;

  --bg2:#0f1622;

  --card:#0e1621cc;

  --text:#e7eef7;

  --muted:#9db0c7;

  --line:#1b2a3a;

  --accent:#56d364;      /* green */

  --accent2:#7aa2ff;     /* blue */

  --warn:#f59e0b;

  --danger:#ef4444;



  --shadow: 0 20px 60px rgba(0,0,0,.35);

  --radius: 18px;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

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

}



[data-theme="light"]{

  --bg:#f6f7fb;

  --bg2:#ffffff;

  --card:#ffffffcc;

  --text:#0b1220;

  --muted:#51607a;

  --line:#dbe3ee;

  --accent:#1f9d55;

  --accent2:#2b5bff;

  --shadow: 0 20px 60px rgba(0,0,0,.10);

}



*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{

  margin:0;

  font-family:var(--ui);

  background: radial-gradient(1200px 800px at 20% 10%, rgba(122,162,255,.18), transparent 60%),

              radial-gradient(1000px 700px at 80% 20%, rgba(86,211,100,.16), transparent 55%),

              var(--bg);

  color:var(--text);

}



.bg-grid{

  position:fixed;

  inset:0;

  pointer-events:none;

  opacity:.35;

  background-image:

    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),

    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);

  background-size: 64px 64px;

  mask-image: radial-gradient(700px 450px at 50% 10%, #000 35%, transparent 75%);

  z-index:-1;

}



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

.mono{font-family:var(--mono)}

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

.mt{margin-top:18px}

.hide-sm{display:inline}



.section{

  padding: 72px 22px;

  max-width: 1120px;

  margin: 0 auto;

}



.section-head{

  margin-bottom: 18px;

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:16px;

}

.section-head h2{

  margin:0;

  font-size: 26px;

  letter-spacing:-.02em;

}

.section-head p{margin:0}



.topbar{

  position:sticky;

  top:0;

  z-index:50;

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding: 14px 18px;

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

  background: linear-gradient(to bottom, rgba(15,22,34,.85), rgba(15,22,34,.55));

  backdrop-filter: blur(10px);

}



.brand{

  display:flex;

  align-items:center;

  gap:10px;

  font-weight:700;

  letter-spacing:.02em;

}

.brand-dot{

  width:10px;height:10px;border-radius:99px;

  background: var(--accent);

  box-shadow: 0 0 0 6px rgba(86,211,100,.12);

}



.nav{

  display:flex;

  gap:14px;

  padding: 6px 10px;

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

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

  border-radius: 999px;

}

.nav a{

  font-size: 13px;

  color: var(--muted);

  padding: 8px 10px;

  border-radius:999px;

}

.nav a:hover{color:var(--text); background: rgba(255,255,255,.05)}



.topbar-actions{

  display:flex;

  gap:10px;

  align-items:center;

}



.btn{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding: 10px 14px;

  border-radius: 999px;

  background: linear-gradient(135deg, rgba(86,211,100,.18), rgba(122,162,255,.12));

  border:1px solid rgba(122,162,255,.35);

  color:var(--text);

  box-shadow: 0 14px 35px rgba(0,0,0,.18);

  font-weight:600;

  font-size: 13px;

}

.btn:hover{transform: translateY(-1px)}

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

.btn-ghost{

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

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

  box-shadow:none;

}

.icon{font-family:var(--mono)}



.nav-toggle{

  display:none;

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

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

  color:var(--text);

  border-radius: 12px;

  padding: 8px 10px;

  font-size: 18px;

}



.drawer{

  position:fixed;

  top:0; right:-360px;

  width: 320px;

  height: 100%;

  background: var(--bg2);

  border-left:1px solid var(--line);

  box-shadow: var(--shadow);

  transition: right .25s ease;

  z-index: 70;

  padding: 18px;

}

.drawer.is-open{right:0}

.drawer-head{

  display:flex;

  align-items:center;

  justify-content:space-between;

  margin-bottom: 12px;

}

.drawer-title{font-weight:700}

.drawer-nav{display:flex;flex-direction:column;gap:10px}

.drawer-nav a{

  padding: 12px 12px;

  border-radius: 14px;

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

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

  color: var(--muted);

}

.drawer-nav a:hover{color:var(--text)}



.hero{padding-top: 54px}

.hero-inner{

  display:grid;

  grid-template-columns: 1.15fr .85fr;

  gap: 22px;

  align-items:stretch;

}

.kicker{display:flex;gap:10px;flex-wrap:wrap}

.pill{

  font-family:var(--mono);

  font-size: 12px;

  padding: 8px 10px;

  border-radius:999px;

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

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

  color: var(--muted);

}



.title{

  margin: 14px 0 10px;

  font-size: 42px;

  letter-spacing:-.04em;

  line-height: 1.05;

}

.subtitle{

  margin:0 0 16px;

  color: var(--muted);

  font-size: 16px;

  max-width: 60ch;

}

.chips{

  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin: 12px 0 18px;

}

.chip{

  display:inline-flex;

  gap:10px;

  align-items:center;

  padding: 10px 12px;

  border-radius: 14px;

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

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

  color: var(--text);

  font-size: 13px;

}

.chip .badge{

  font-family:var(--mono);

  font-size: 12px;

  color: var(--accent);

}



.hero-actions{display:flex; gap:10px; flex-wrap:wrap}



.terminal{

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

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

  border-radius: var(--radius);

  overflow:hidden;

  box-shadow: var(--shadow);

}

.terminal-top{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding: 10px 12px;

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

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

}

.dots{display:flex; gap:8px}

.dot{width:10px;height:10px;border-radius:99px}

.dot.red{background: var(--danger)}

.dot.yellow{background: var(--warn)}

.dot.green{background: var(--accent)}

.terminal-title{font-size: 12px; color: var(--muted); font-family:var(--mono)}

.terminal-body{padding: 12px}

.terminal-body pre{

  margin:0;

  min-height: 150px;

  font-size: 12.5px;

  line-height: 1.55;

  color: var(--text);

  white-space: pre-wrap;

}

.cursor-line{display:flex; gap:8px; align-items:center; color: var(--muted); margin-top: 10px}

.cursor{

  width:10px;height:18px;

  background: var(--accent);

  display:inline-block;

  opacity:.9;

  animation: blink 1s steps(2,end) infinite;

}

@keyframes blink{50%{opacity:0}}



.hero-metrics{

  margin-top: 12px;

  display:grid;

  grid-template-columns: repeat(2, minmax(0,1fr));

  gap: 10px;

}

.metric{

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

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

  border-radius: 16px;

  padding: 12px;

}

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

.metric .v{font-size: 20px; font-weight:700; margin-top:6px}



.card{

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

  background: var(--card);

  border-radius: var(--radius);

  padding: 18px;

  box-shadow: var(--shadow);

}

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

.hr{height:1px; background: var(--line); margin: 14px 0}



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

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



.list{margin:0; padding-left: 18px; color: var(--muted)}

.list li{margin: 8px 0}

.stack{display:flex; flex-direction:column; gap:10px}



.link{

  color: var(--accent2);

  text-decoration: underline;

  text-decoration-thickness: 1px;

  text-underline-offset: 3px;

}

.link:hover{opacity:.9}



.platforms{

  display:grid;

  grid-template-columns: repeat(4, minmax(0,1fr));

  gap: 12px;

}

.platform{

  display:flex;

  flex-direction:column;

  gap:8px;

  padding: 14px;

  border-radius: 16px;

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

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

}

.platform .top{

  display:flex; align-items:center; justify-content:space-between; gap:10px;

}

.platform .name{font-weight:700}

.platform .handle{font-family:var(--mono); color: var(--muted); font-size: 12px}

.platform .meta{font-size: 12px; color: var(--muted)}

.platform:hover{transform: translateY(-1px); border-color: rgba(122,162,255,.45)}



.badge-row{display:flex; gap:8px; flex-wrap:wrap}

.badge{

  font-family:var(--mono);

  font-size: 12px;

  padding: 7px 10px;

  border-radius:999px;

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

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

  color: var(--muted);

}

.badge strong{color:var(--text); font-weight:700}



.finding{

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:12px;

  padding: 12px;

  border-radius: 16px;

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

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

}

.finding .left{display:flex; flex-direction:column; gap:6px}

.finding .title{font-weight:700; font-size: 13px; margin:0}

.finding .desc{font-size: 12px; color: var(--muted); margin:0}

.finding .tags{display:flex; gap:8px; flex-wrap:wrap}

.tag{

  font-family:var(--mono);

  font-size: 11px;

  padding: 6px 8px;

  border-radius: 999px;

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

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

  color: var(--muted);

}



.filters{display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 16px}

.chip-btn{

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

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

  color: var(--muted);

  border-radius: 999px;

  padding: 9px 12px;

  font-family: var(--mono);

  font-size: 12px;

  cursor:pointer;

}

.chip-btn.is-active{

  color: var(--text);

  border-color: rgba(86,211,100,.45);

  background: rgba(86,211,100,.10);

}



.writeup{

  display:flex; flex-direction:column; gap:10px;

}

.writeup .title{margin:0; font-size: 14px; font-weight:800}

.writeup .meta{font-size: 12px; color: var(--muted)}

.writeup .desc{margin:0; color: var(--muted); font-size: 13px}

.writeup .foot{display:flex; justify-content:space-between; align-items:center; gap:10px}

.writeup .go{font-family:var(--mono); font-size: 12px; color: var(--accent2)}



.timeline{

  display:flex;

  flex-direction:column;

  gap: 10px;

}

.step{

  display:grid;

  grid-template-columns: 140px 1fr;

  gap: 14px;

  padding: 14px;

  border-radius: 16px;

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

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

}

.step .when{font-family:var(--mono); color: var(--muted); font-size: 12px}

.step .what{font-weight:800; margin:0}

.step .detail{margin:6px 0 0; color: var(--muted); font-size: 13px}



.contact-row{

  display:grid;

  grid-template-columns: 90px 1fr auto;

  gap: 10px;

  align-items:center;

  padding: 10px 0;

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

}

.contact-row:last-child{border-bottom:none}

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

.value{font-size: 13px}

.link-btn{

  margin-top: 10px;

  border:none;

  background: transparent;

  color: var(--accent2);

  font-family: var(--mono);

  cursor:pointer;

  padding: 0;

}

.reveal{display:none; margin-top: 10px; color: var(--muted); font-size: 13px}

.reveal.is-open{display:block}



.footer{

  margin-top: 18px;

  padding-top: 14px;

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

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  flex-wrap:wrap;

}



.toast{

  position: fixed;

  bottom: 18px;

  right: 18px;

  background: var(--bg2);

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

  box-shadow: var(--shadow);

  padding: 12px 14px;

  border-radius: 14px;

  color: var(--text);

  opacity:0;

  transform: translateY(8px);

  transition: opacity .2s ease, transform .2s ease;

  z-index: 90;

  max-width: 360px;

}

.toast.show{

  opacity:1;

  transform: translateY(0);

}



/* Active section highlight (nav) */

.nav a.is-active{color: var(--text); background: rgba(255,255,255,.06); border:1px solid rgba(122,162,255,.35)}



/* Responsive */

@media (max-width: 980px){

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

  .platforms{grid-template-columns: repeat(2, minmax(0,1fr))}

  .grid-3{grid-template-columns: repeat(2, minmax(0,1fr))}

  .hide-sm{display:none}

}



@media (max-width: 720px){

  .nav{display:none}

  .nav-toggle{display:block}

  .grid-2{grid-template-columns: 1fr}

  .grid-3{grid-template-columns: 1fr}

  .platforms{grid-template-columns: 1fr}

  .title{font-size: 34px}

  .step{grid-template-columns: 1fr}

  .contact-row{grid-template-columns: 1fr; gap:6px}

}