
:root{
  --bg:#0a0a0a;
  --paper:#fffbeb;
  --ink:#111827;
  --ink-inv:#f9fafb;
  --edge:#111827;
  --accent:#f59e0b;
  --link:#2563eb;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);
  color:var(--ink);
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.wrapper{
  min-height:100%;
  background:
    conic-gradient(from 180deg at 10% 10%, rgba(245,158,11,.15), transparent 20%),
    conic-gradient(from 90deg at 90% 10%, rgba(37,99,235,.12), transparent 25%),
    var(--paper);
  border:6px solid var(--edge);
  border-radius:18px;
  margin:12px;
  overflow:hidden;
}
.topbar{
  display:flex; align-items:center; gap:1rem;
  padding:.8rem 1rem; background:var(--paper);
  border-bottom:6px solid var(--edge);
}
.topbar a{color:var(--ink); text-decoration:none; font-weight:700}
.topbar .spacer{flex:1}
.navlink{padding:.4rem .8rem; border:3px solid var(--edge); border-radius:12px; background:#fff; box-shadow:3px 3px 0 0 var(--edge)}
.navlink:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 0 var(--edge)}
.hero{
  padding:3rem 1rem 1.5rem; background:linear-gradient(180deg, rgba(0,0,0,.03), transparent);
}
.marquee{
  display:block;
  font-size:clamp(2rem, 8vw, 6rem);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.02em;
  text-transform:uppercase;
  border-top:6px solid var(--edge);
  border-bottom:6px solid var(--edge);
  padding:1rem; background:var(--paper);
}
.kicker{display:inline-block; background:var(--ink); color:var(--ink-inv); padding:.2rem .5rem; border-radius:8px; font-size:.85rem}
.lede{max-width:84ch; font-size:1.15rem}
.grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  padding:1rem;
}
.tile{
  background:#fff; border:4px solid var(--edge); border-radius:16px; padding:1rem;
  box-shadow:6px 6px 0 0 var(--edge);
  transition:transform .12s ease;
}
.tile:hover{transform:translate(-2px,-2px)}
.tile h3{margin-top:0}
.cta{
  display:inline-block; padding:1rem 1.25rem; font-weight:800; text-decoration:none;
  background:var(--ink); color:var(--ink-inv); border:4px solid var(--edge); border-radius:16px;
  box-shadow:6px 6px 0 0 var(--edge);
}
.section{padding:1rem 1rem 2rem}
.list{list-style: square; padding-left:1.2rem}
.footer{padding:1rem; border-top:6px solid var(--edge); background:var(--paper)}
a{color:var(--link)}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; background:#fff; border:2px solid var(--edge); padding:.1rem .3rem; border-radius:6px}
.table{width:100%; border-collapse:collapse; border:3px solid var(--edge)}
.table th, .table td{padding:.6rem; border:3px solid var(--edge); background:#fff}
.badge{display:inline-block; border:3px dashed var(--edge); padding:.2rem .5rem; background:#fff; border-radius:10px; margin-left:.4rem}
@media (prefers-reduced-motion: no-preference){
  .wiggle{animation:wig 1.4s ease-in-out infinite}
  @keyframes wig{0%,100%{transform:rotate(0)} 50%{transform:rotate(-2deg)}}
}
