:root{
  --bg:#0e1013;
  --card:#151920;
  --card-hover:#181d24;
  --line:#252b35;
  --text:#eaedf0;
  --muted:#98a1ad;
  --faint:#78828f;
  --accent:#4f8cff;
  --ok:#36d399;
  --radius:6px;
}

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
  background:var(--bg);
  color:var(--text);
  font-family:"Inter","SF Pro Text",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ---------- background ---------- */

.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.15}
.g1{width:520px;height:520px;background:var(--accent);top:-160px;left:-120px;animation:drift1 26s ease-in-out infinite alternate}
.g2{width:460px;height:460px;background:#2563eb;bottom:-180px;right:-140px;animation:drift2 30s ease-in-out infinite alternate}
.grid-lines{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse at 50% -10%,black 0%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% -10%,black 0%,transparent 72%);
}
@keyframes drift1{to{transform:translate(90px,60px) scale(1.1)}}
@keyframes drift2{to{transform:translate(-80px,-50px) scale(1.06)}}

/* ---------- header ---------- */

.top{
  max-width:1120px;margin:0 auto;padding:40px 24px 6px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:14px}
.logo{
  width:42px;height:42px;border:1px solid var(--line);border-radius:5px;
  display:grid;place-items:center;background:#10141a;flex:none;
}
.logo svg{width:24px;height:24px}
.logo rect{
  fill:none;stroke:rgba(234,237,240,.85);stroke-width:5;
  stroke-linejoin:miter;
}
.logo rect:nth-child(2){stroke:var(--accent)}
.brand-text h1{margin:0;font-size:20px;font-weight:650;letter-spacing:.02em;line-height:1.1}
.brand-text p{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.meta{display:flex;gap:8px}
.pill{
  border:1px solid var(--line);border-radius:4px;padding:5px 11px;
  font-size:11.5px;color:var(--muted);letter-spacing:.05em;white-space:nowrap;
}
.pill-dim{color:var(--faint)}

/* ---------- grid / cards ---------- */

.grid{
  max-width:1120px;margin:0 auto;padding:30px 24px 56px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;
}
.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 15px;text-decoration:none;color:inherit;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
  animation:rise .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--i) * 45ms);
}
.card:hover{
  transform:translateY(-3px);background:var(--card-hover);
  border-color:rgba(79,140,255,.55);
  box-shadow:0 16px 40px -18px rgba(0,0,0,.75);
}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.icon{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:5px;background:#10141a;
  color:#c6ccd6;transition:color .22s ease,border-color .22s ease;
}
.icon svg{width:20px;height:20px}
.card:hover .icon{color:var(--accent);border-color:rgba(79,140,255,.4)}
.card-title{margin:0;font-size:15px;font-weight:620;letter-spacing:.01em}
.card-desc{margin:0 0 12px;font-size:12.8px;line-height:1.5;color:var(--muted)}
.card-domain{
  margin:0 0 13px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.6px;color:var(--faint);letter-spacing:.01em;
}
.card-foot{display:flex;align-items:center;gap:8px;margin-top:auto}
.tag{
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--line);border-radius:4px;
  color:#8b95a1;background:#10141a;
}
.spacer{flex:1}
.arrow{
  width:16px;height:16px;color:var(--accent);
  opacity:0;transform:translateX(-5px);transition:opacity .22s ease,transform .22s ease;
}
.card:hover .arrow{opacity:1;transform:none}

/* ---------- footer ---------- */

.foot{
  max-width:1120px;margin:0 auto;padding:0 24px 36px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:12px;color:var(--faint);
}
.foot a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.foot a:hover{color:var(--text);border-color:var(--accent)}
.dot{opacity:.4}

/* ---------- anims / responsive ---------- */

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (max-width:560px){
  .top{padding-top:26px}
  .grid{grid-template-columns:1fr;padding:22px 16px 40px;gap:12px}
  .foot{flex-wrap:wrap}
  .meta{width:100%;justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .card,.glow{animation:none}
  .card{transition:none}
}