:root { --bg:#e8eef8; --ink:#10233f; --muted:#5c6d86; --acc:#1d4ed8; }
* { box-sizing:border-box; }
body { margin:0; font-family:ui-sans-serif,system-ui,sans-serif; background:var(--bg); color:var(--ink); }
a { color:inherit; }
header, footer, main { width:min(1040px,calc(100% - 32px)); margin:0 auto; }
header { display:flex; justify-content:space-between; align-items:center; min-height:76px; }
.logo { background:var(--ink); color:#fff; text-decoration:none; font-weight:800; letter-spacing:.12em; padding:8px 12px; border-radius:6px; }
header span, footer { color:var(--muted); font-size:13px; }
.eye { margin:0; color:var(--acc); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
h1 { font-size:clamp(30px,4.4vw,46px); line-height:1.05; letter-spacing:-.04em; margin:8px 0 16px; max-width:18ch; }
.must { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.must article { background:#fff; border-radius:12px; border-left:6px solid var(--acc); padding:16px 16px 16px 14px; }
.must span { display:block; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.must strong { display:block; font-size:clamp(26px,3vw,34px); margin:6px 0; letter-spacing:-.03em; }
.must p { margin:0; font-size:14px; color:#31445f; }
.must .rate { background:var(--ink); color:#fff; border-left-color:#93c5fd; }
.must .rate span { color:#93c5fd; }
.must .rate p { color:#d5e2f5; }
.list { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:20px 0 36px; }
.card { background:#fff; border-radius:12px; padding:14px; display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center; }
.card img { width:120px; height:44px; object-fit:contain; }
.card h2 { margin:4px 0 0; font-size:18px; }
.card ul { display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:8px 0 0; padding:0; }
.card li { background:#e8eef8; border-radius:999px; padding:3px 8px; font-size:12px; }
.go { background:var(--acc); color:#fff; text-decoration:none; font-weight:700; border-radius:8px; padding:10px 14px; }
footer { padding-bottom:28px; }
@media (max-width:800px) {
  .must, .list, .card { grid-template-columns:1fr; }
  .go { text-align:center; }
}