:root{
  --bg:#0a0a0a;
  --panel:#111213;
  --panel-2:#141516;
  --text:#f5f5f5;
  --muted:#c8c8c8;
  --red:#ef4444;
  --red-2:#b91c1c;
  --ring:#262626;
  --card-h:120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
}

/* Background grid + glow */
.grid-bg{position:fixed;inset:0;z-index:-2;opacity:.07;
  background-image:linear-gradient(to right,rgba(255,255,255,.18) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(255,255,255,.18) 1px,transparent 1px);
  background-size:32px 32px;
}
.glow{position:fixed;inset:0;z-index:-1;pointer-events:none}
.glow::before,.glow::after{content:"";position:absolute;border-radius:9999px;filter:blur(100px);animation:breathe 6s ease-in-out infinite;will-change:transform,opacity}
.glow::before{width:420px;height:420px;left:-80px;top:-60px;background:radial-gradient(closest-side,rgba(239,68,68,.6),transparent)}
.glow::after{width:520px;height:520px;right:-120px;bottom:-60px;background:radial-gradient(closest-side,rgba(239,68,68,.45),transparent);animation-duration:8.5s}
@keyframes breathe{0%,100%{opacity:.25;transform:scale(.88)}50%{opacity:1;transform:scale(1.32)}}

/* Header */
header{max-width:72rem;margin:0 auto;padding:6rem 1.25rem 1rem}
h1{margin:0;font-size: clamp(2rem, 4vw + .5rem, 4rem);font-weight:900;letter-spacing:-.02em;text-align:center}
.accent{color:var(--red)}
.subtitle{margin:.75rem auto 0;max-width:40rem;text-align:center;color:#d6d6d6;opacity:.9}
.chip{display:inline-flex;align-items:center;gap:.5rem;margin:1rem auto 0;padding:.5rem .875rem;border-radius:999px;border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.08);color:#ffd6d6;font-size:.9rem}
.dot{width:8px;height:8px;border-radius:9999px;background:#f87171;animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1)}}

/* Grid */
main{max-width:72rem;margin:0 auto;padding:1rem 1.25rem 5rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;align-items:stretch}

/* Cards */
.card{position:relative;border-radius:18px;padding:2px;height:var(--card-h);
  background:radial-gradient(1200px 1200px at var(--mx,50%) var(--my,50%),rgba(239,68,68,.6),transparent 40%),
             linear-gradient(180deg,#1a1b1e,#0f1012);
  overflow:hidden;transition:transform .25s ease, box-shadow .3s ease;
}
.card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 8px 25px rgba(239,68,68,.4)}
.card-inner{position:relative;background:linear-gradient(180deg,var(--panel),var(--panel-2));border-radius:16px;padding:16px;border:1px solid var(--ring);height:100%}
.row{display:flex;align-items:center;gap:14px}

/* Icon (SVG) */
.icon{
  width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  background:#18181b;border:1px solid #2a2a2a;color:#ffbfbf;
  transition:transform .3s ease;
}
.icon .i{width:24px;height:24px;display:block}
.card:hover .icon{transform:scale(1.15) rotate(-5deg)}

.meta{min-width:0}
.name{
  font-weight:700;
  margin:0 0 4px 0;
}
.name-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tag{margin:0;color:#cfcfcf;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arrow{margin-left:auto;display:none}
@media(min-width:768px){.arrow{display:block}}
.arrow svg{width:22px;height:22px;color:#f87171;transition:transform .2s ease}
.card:hover .arrow svg{transform:translateX(3px)}
.underline{height:2px;background:linear-gradient(90deg,transparent,#ef4444,transparent);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;margin-top:10px}
.card:hover .underline{transform:scaleX(1)}

/* Shine effect */
.card::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(120deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,0) 80%);transform:skewX(-20deg)}
.card:hover::after{animation:shine .8s forwards}
@keyframes shine{100%{left:125%}}

/* Footer */
footer{max-width:72rem;margin:0 auto;padding:2.5rem 1.25rem 4rem;text-align:center;color:#c9c9c9}
.top{display:inline-block;margin-top:.75rem;padding:.5rem .9rem;border-radius:999px;border:1px solid #2a2a2a;background:#121214;color:#e5e5e5;text-decoration:none}
.top:hover{border-color:var(--red-2);color:#ffdede}
a.card-link{color:inherit;text-decoration:none;outline:none;display:block;height:100%}
a.card-link:focus-visible .card-inner{box-shadow:0 0 0 3px rgba(239,68,68,.45)}

/* Mobile tweak */
@media (max-width:420px){ header{padding-top:4rem} }
@media (prefers-reduced-motion: reduce){
  .glow::before,.glow::after{animation:none}
}