:root { --ink:#17232f; --muted:#697783; --line:#e5eaee; --accent:#d86b35; --bg:#f7f8f9; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.hero { background:linear-gradient(120deg,#17232f 0%,#284457 100%); color:white; padding:58px 24px 68px; }
.hero-content, .container { max-width:1180px; margin:auto; }
.eyebrow { margin:0 0 10px; color:#ffb184; font-size:12px; font-weight:800; letter-spacing:.16em; }
h1 { margin:0; font-size:clamp(34px,5vw,60px); letter-spacing:-.04em; }
.subtitle { margin:12px 0 28px; color:#d8e2e8; font-size:18px; }
.search-wrap { display:flex; align-items:center; gap:10px; max-width:680px; padding:0 18px; border-radius:12px; background:white; color:var(--muted); }
.search-wrap span { font-size:28px; line-height:1; }
input { width:100%; border:0; outline:0; padding:16px 0; font:inherit; color:var(--ink); }
.container { padding:30px 24px 70px; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:24px; flex-wrap:wrap; }
.categories { display:flex; flex-wrap:wrap; gap:8px; }
.category { border:1px solid var(--line); border-radius:99px; background:white; color:var(--muted); cursor:pointer; padding:9px 15px; font:inherit; }
.category.active, .category:hover { border-color:var(--accent); background:var(--accent); color:white; }
.count { color:var(--muted); font-size:14px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px; }
.card { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:white; box-shadow:0 5px 16px #1d34400b; transition:transform .18s, box-shadow .18s; }
.card:hover { transform:translateY(-4px); box-shadow:0 12px 25px #1d34401c; }
.cover { display:block; aspect-ratio:4/3; width:100%; object-fit:cover; background:#dfe7eb; }
.card-body { padding:17px; }
.tag { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.card h2 { margin:8px 0 6px; font-size:19px; }
.card p { margin:0; color:var(--muted); font-size:14px; line-height:1.45; }
.open { display:inline-block; margin-top:15px; color:var(--accent); font-size:14px; font-weight:700; text-decoration:none; }
details { margin-top:12px; color:var(--muted); font-size:13px; } details summary { cursor:pointer; color:var(--accent); font-weight:700; } details p { margin-top:8px; }
.empty { padding:50px; color:var(--muted); text-align:center; }
footer { padding:24px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; text-align:center; }
@media (max-width:600px) { .hero { padding:42px 18px 48px; } .container { padding:24px 18px 55px; } .grid { grid-template-columns:1fr 1fr; gap:12px; } .card-body { padding:12px; } .card h2 { font-size:16px; } .card p { font-size:13px; } }
@media (max-width:390px) { .grid { grid-template-columns:1fr; } }