:root{
  --bg:#070809;
  --card:#0e1011;
  --card-hover:#131516;
  --line:#222525;
  --ink:#f4f4f2;
  --muted:#8d908f;
  --lime:#d8ff3f;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(900px 600px at 20% -10%, #12140f 0%, transparent 60%),
    radial-gradient(700px 500px at 100% 110%, #0f1310 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:Manrope,Arial,sans-serif;
  display:grid;
  place-items:center;
  padding:clamp(20px,4vw,56px);
  min-height:100vh;
}
.shell{width:min(100%,1040px)}
.head{margin-bottom:clamp(28px,5vw,48px)}
.tag{
  display:inline-block;
  font:500 10px/1 'DM Mono',monospace;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--lime);
  border:1px solid #d8ff3f40;
  border-radius:999px;
  padding:7px 12px;
  margin-bottom:22px;
}
h1{
  margin:0 0 14px;
  font-size:clamp(34px,6.4vw,64px);
  font-weight:500;
  letter-spacing:-.055em;
  line-height:1.02;
}
.sub{margin:0;color:var(--muted);font-size:clamp(13px,1.6vw,15px)}
.grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:22px;
  min-height:210px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
  color:inherit;
  text-decoration:none;
  transition:background .25s,border-color .25s,transform .25s;
  outline:none;
}
.card:hover,.card:focus-visible{
  background:var(--card-hover);
  border-color:#3a3f31;
  transform:translateY(-3px);
}
.card:focus-visible{box-shadow:0 0 0 2px var(--lime)}
.icon{display:block;width:64px;height:64px;flex:0 0 auto}
.icon svg{display:block;width:100%;height:100%;border-radius:15px;transition:transform .3s}
.card:hover .icon svg,.card:focus-visible .icon svg{transform:scale(1.05) rotate(-2deg)}
.meta{margin-top:auto;display:flex;flex-direction:column;gap:4px}
.meta strong{font-size:19px;font-weight:600;letter-spacing:-.03em}
.meta small{font:400 11px/1.4 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.go{
  position:absolute;
  top:20px;
  right:20px;
  font:400 16px/1 Manrope,sans-serif;
  color:#5d6258;
  transition:color .25s,transform .25s;
}
.card:hover .go,.card:focus-visible .go{color:var(--lime);transform:translate(2px,-2px)}
.foot{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:clamp(26px,4vw,40px);
  font:400 10px/1 'DM Mono',monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#636663;
}
.dot{width:3px;height:3px;border-radius:50%;background:#3c403c}
@media (max-width:760px){
  .grid{grid-template-columns:1fr}
  .card{min-height:0;flex-direction:row;align-items:center;gap:16px;padding:18px}
  .icon{width:56px;height:56px}
  .meta{margin:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}