:root{
  --bg:#0a0d0f;
  --panel:#12181b;
  --panel-line:#1f2b2e;
  --signal:#ffb400;
  --cyan:#59d6c4;
  --paper:#eae6da;
  --muted:#66767a;

  --font-mono: 'JetBrains Mono','DejaVu Sans Mono','Liberation Mono','Cascadia Code', ui-monospace, monospace;
  --font-sans: -apple-system,'Segoe UI','Noto Sans',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:radial-gradient(ellipse at 50% -10%, #16201f 0%, var(--bg) 55%);
  color:var(--paper);
  font-family:var(--font-sans);
  min-height:100vh;
  padding:32px 20px 60px;
  display:flex;
  justify-content:center;
}
.wrap{width:100%;max-width:920px;}

header{margin-bottom:32px;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--signal);
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 8px var(--signal);
}
h1{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(28px,4vw,40px);
  letter-spacing:-0.01em;
  margin:0 0 8px;
}
header p{
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
  margin:0;
  max-width:560px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:18px;
}

.card{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:12px;
  padding:24px;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card:hover{
  border-color:var(--signal);
  transform:translateY(-2px);
  box-shadow:0 8px 24px -8px rgba(255,180,0,0.25);
}
.card:hover .icon{
  filter:drop-shadow(0 0 6px rgba(255,180,0,0.55));
}

.icon{width:64px;height:64px;transition:filter .15s ease;}

.card-body h2{
  font-family:var(--font-mono);
  font-size:17px;
  font-weight:600;
  margin:0 0 6px;
  color:var(--paper);
}
.card-body p{
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
  margin:0;
}

footer{
  margin-top:32px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
  text-align:center;
}