body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[role='list'],ol[role='list']{list-style:none;margin:0;padding:0}
img,picture{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}


:root{
    --bg:#ffffff; --bg-soft:#f8fafc; --surface:#ffffff;
    --text:#111827; --muted:#6b7280; --border:#e5e7eb;
    --primary:#2563eb; --accent:#0ea5e9; --ring:rgba(37,99,235,.22);
    --container: 1120px;
    --r-lg:16px; --r-xl:24px;
    --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem; --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem; --s-20:5rem;
    --f-12:.75rem; --f-14:.875rem; --f-16:1rem; --f-18:1.125rem; --f-20:1.25rem; --f-24:1.5rem; --f-28:1.75rem; --f-32:2rem; --f-40:2.5rem; --f-56:3.5rem;
}
@media (max-width:1024px){:root{--f-56:3rem;--f-40:2.25rem}}
@media (max-width:640px){:root{--f-56:2.25rem;--f-40:1.875rem;--f-32:1.5rem}}


body{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;line-height:1.55;color:var(--text);background:linear-gradient(180deg,var(--bg),var(--bg-soft))}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--s-6)}


/* Header */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.75);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding-block:var(--s-4);gap:var(--s-6)}
.brand{display:flex;align-items:center;gap:var(--s-3)}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 6px 18px rgba(37,99,235,.25)}
.brand-title{font-weight:800;font-size:var(--f-18)}
.nav-links{display:flex;gap:var(--s-5);align-items:center}
.nav-links a{font-size:var(--f-14);}


/* Hero */
.hero{padding-block:var(--s-16)}
.h1{font-size:var(--f-56);line-height:1.1;letter-spacing:-.02em}
.lead{font-size:var(--f-18);color:var(--muted);margin-top:var(--s-5);max-width:860px}


/* Controls */
.controls{margin-top:var(--s-8);display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center}
.field{display:flex;align-items:center;gap:.5rem;padding:.8rem 1rem;border:1px solid var(--border);border-radius:12px;background:#fff}
.field input{border:0;outline:0;min-width:240px}
.tags{display:flex;gap:.5rem;flex-wrap:wrap}
.tag{padding:.5rem .7rem;border:1px solid var(--border);border-radius:999px;background:#fff;font-size:var(--f-14);color:var(--muted);cursor:pointer}
.tag.active{border-color:var(--accent);color:#0f172a;box-shadow:0 0 0 6px rgba(14,165,233,.08)}


/* Grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);margin-top:var(--s-10)}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 6px 24px rgba(2,6,23,.06);display:flex;flex-direction:column}
.card img{aspect-ratio:16/9}
.pad{padding:var(--s-6)}
.card h3{font-size:var(--f-20);margin:.25rem 0}
.meta{font-size:var(--f-12);color:var(--muted)}
.excerpt{color:var(--muted);margin-top:.5rem}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
.chip{font-size:var(--f-12);padding:.25rem .5rem;border:1px solid var(--border);border-radius:999px;color:var(--muted)}


/* Pagination */
.pager{display:flex;justify-content:center;gap:.5rem;margin-top:var(--s-12)}
.page-btn{padding:.6rem .9rem;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer}
.page-btn[disabled]{opacity:.4;cursor:not-allowed}


/* Footer */
.footer{padding-block:var(--s-12);border-top:1px solid var(--border);margin-top:var(--s-16)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap;color:var(--muted)}
.foot a{text-decoration:underline;color:var(--muted)}


@media (max-width:1024px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid{grid-template-columns:1fr}.hero{padding-block:var(--s-12)}}


/* reveal */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .6s, transform .6s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}