/* MISSION CONTROL — tokens inherited from OPSDECK */
:root{
  --void:#000000;
  --ink:#05070B;
  --raise:#0A0D14;
  --hair:rgba(255,255,255,.09);
  --hair-2:rgba(255,255,255,.16);
  --text:#F2F4F8;
  --dim:#7C8496;
  --faint:#4A5162;
  --ion:#7DE2FF;
  --ion-dim:rgba(125,226,255,.10);
  --ok:#5BE6A4;
  --err:#FF7A6B;
  --amber:#FFC46B;
  --accent:var(--ion);
  --purple:#B79BFF;
  --radius:2px;
  --font:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --micro:11px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--void);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(125,226,255,.22)}
a{color:inherit;text-decoration:none}

/* microtype: mono all-caps label */
.eyebrow,.tagline,.card .status,.badge,footer{
  font-family:var(--mono);
  font-size:var(--micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
}

/* ---------- backdrop (from OPSDECK) ---------- */
#starfield{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;pointer-events:none}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1000px 700px at 78% -10%, rgba(125,226,255,.05), transparent 62%),
    radial-gradient(800px 600px at 8% 108%, rgba(183,155,255,.045), transparent 60%);
}

/* ---------- hero ---------- */
main{max-width:960px;margin:0 auto;padding:0 24px}
.hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:14vh 0 9vh;
}
/* mark rests at #C3C9D4, ignites white + one 360° revolution on hover.
   Keyframe (not transition) so the spin is one-shot per hover entry. */
.mark{display:block;width:96px;height:96px;color:#C3C9D4;transition:color .3s}
.mark svg{width:100%;height:100%;display:block;overflow:visible}
.mark:hover{color:#FFFFFF;animation:markSpin .9s cubic-bezier(.45,.05,.25,1)}
@keyframes markSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

h1.wordmark{
  margin-top:30px;
  font-family:var(--font);font-weight:600;
  font-size:clamp(26px,5vw,44px);
  letter-spacing:.24em;text-indent:.24em;
}
.tagline{margin-top:14px;color:var(--dim)}

/* ---------- project cards ---------- */
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  padding-bottom:12vh;
}
.card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--ink);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:22px 20px 20px;
  transition:transform .18s ease,border-color .18s,box-shadow .18s;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(125,226,255,.45);
  box-shadow:0 0 0 1px rgba(125,226,255,.18),0 14px 34px -18px rgba(125,226,255,.35);
}
.card h2{
  font-family:var(--mono);font-weight:500;font-size:14px;
  letter-spacing:.18em;text-transform:uppercase;
}
.card p{color:var(--dim);font-size:14px;flex:1}
.card .status{display:flex;align-items:center;gap:8px;color:var(--faint)}
/* dot is neutral gray until js/status.js confirms up/down */
.dot{width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none}
.dot.up{background:var(--ok);box-shadow:0 0 6px rgba(91,230,164,.6)}
.dot.down{background:var(--err);box-shadow:0 0 6px rgba(255,122,107,.6)}
.badge{
  border:1px solid var(--hair-2);border-radius:var(--radius);
  color:var(--amber);padding:1px 7px;margin-left:auto;
}

footer{
  text-align:center;color:var(--faint);padding:0 0 40px;
}
footer a:hover{color:var(--dim)}

/* ---- hero nav ---- */
.hero-nav{margin-top:18px}
.hero-nav a{
  font-family:var(--mono);font-size:var(--micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
  border:1px solid var(--hair);border-radius:var(--radius);padding:3px 10px;
}
.hero-nav a:hover{color:var(--ion);border-color:rgba(125,226,255,.45)}

/* ---- market strip ---- */
.market-strip{
  font-family:var(--mono);font-size:var(--micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
  border:1px solid var(--hair);border-radius:var(--radius);
  padding:9px 14px;margin:0 0 28px;text-align:center;
  background:var(--ink);
}
.market-strip a{color:var(--ion)}
.market-strip a:hover{text-decoration:underline}

/* ---- grid footer microtext ---- */
.grid-foot{
  font-family:var(--mono);font-size:var(--micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
  text-align:right;margin:-10vh 0 6vh;
}

/* ---- github telemetry ---- */
.telemetry{padding-bottom:10vh}
.telemetry .eyebrow{color:var(--faint);margin-bottom:14px}
.telemetry ul{list-style:none}
.telemetry li{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--dim);padding:7px 2px;border-bottom:1px solid var(--hair);
}
.telemetry li:first-child{border-top:1px solid var(--hair)}

/* ---- /uses page ---- */
.uses{padding-bottom:12vh}
.uses .hero{padding:10vh 0 6vh}
.uses section{margin-top:34px}
.uses h2{
  font-family:var(--mono);font-weight:500;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ion);
  margin-bottom:12px;
}
.uses ul{list-style:none}
.uses li{padding:8px 2px;border-bottom:1px solid var(--hair);font-size:14px}
.uses li strong{font-weight:600;color:var(--text)}
.uses li span{color:var(--dim)}

/* ---------- 404 ---------- */
.lost{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:24px}
.lost .code{font-family:var(--mono);font-size:64px;color:var(--faint);letter-spacing:.1em}
.lost a{color:var(--ion);font-family:var(--mono);font-size:var(--micro);letter-spacing:.16em;text-transform:uppercase}
.lost a:hover{text-decoration:underline}

@media (max-width:760px){
  .grid{grid-template-columns:1fr}
  .hero{padding:10vh 0 7vh}
}
@media (prefers-reduced-motion:reduce){
  .mark:hover{animation:none}
  .card,.card:hover{transform:none}
}