:root{
  --bg: #f5f7fb;
  --surface: #ffffff;
  --muted: #556070;
  --border: #e6e9ef;
  --primary: #0b5fff;
  --accent: #06b6d4;
  --radius: 12px;
  --card-shadow: 0 6px 20px rgba(15,23,42,0.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg);
  color:#0f1724;
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{width:min(1100px,95%);margin:0 auto;padding:2rem 0}
h1{font-size:1.6rem;margin:0 0 1rem;color:#0b2545}

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

.card{
  background:var(--surface);
  border-radius:var(--radius);
  padding:12px;
  border:1px solid var(--border);
  box-shadow:var(--card-shadow);
  transition:transform .28s cubic-bezier(.2,.9,.2,1),box-shadow .28s;
  transform:translateY(0) scale(1);
  will-change:transform,opacity;
  overflow:hidden;
}
.card:focus{outline:3px solid color-mix(in srgb, var(--primary) 18%, white);outline-offset:4px}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(11,18,40,0.08)}

.thumb{width:100%;height:0;padding-bottom:56.25%;position:relative;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#eef2ff,#fff)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.thumb .placeholder-svg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:0.95rem}

.card h3{margin:12px 0 6px;font-size:1.05rem;color:#092045}
.card p{color:var(--muted);font-size:0.95rem;margin:0}

.actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--primary);color:#fff;text-decoration:none;font-weight:600;border:0}
.btn.secondary{background:transparent;color:#0b2545;border:1px solid var(--border)}
.btn:focus{box-shadow:0 6px 18px rgba(11,92,255,0.12)}

/* entrance animation */
.card{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.9,.2,1),box-shadow .28s}
.card.inview{opacity:1;transform:none}

/* responsive tweaks */
@media (max-width:520px){
  body{padding:0}
  .container{padding:1rem}
  h1{font-size:1.3rem}
}

/* accessibility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

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