:root { --bg:#0e1210; --card:#18211c; --ink:#f3f7f4; --muted:#b7c4bb; --acc:#c6f54e; }
* { box-sizing:border-box; }
body { margin:0; font-family:ui-sans-serif,system-ui,sans-serif; background:
  radial-gradient(640px 320px at 0% -80px, #1f4d32, transparent 60%), var(--bg); color:var(--ink); }
a { color:inherit; }
header, footer, main { width:min(920px,calc(100% - 28px)); margin:0 auto; }
header { display:flex; justify-content:space-between; align-items:center; min-height:64px; }
.logo { text-decoration:none; font-weight:900; letter-spacing:.04em; font-size:24px; color:var(--acc); }
header span, footer { color:var(--muted); font-size:13px; }
.eye { margin:0; color:var(--acc); font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
h1 { font-size:clamp(30px,5vw,48px); line-height:1; letter-spacing:-.045em; margin:6px 0 14px; max-width:14ch; }
.must { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.must article { background:var(--card); border:1px solid #2c4034; border-radius:16px; padding:12px 14px; }
.must span { display:block; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.must strong { display:block; font-size:clamp(22px,3vw,32px); margin:4px 0; }
.must p { margin:0; font-size:13px; line-height:1.35; color:#d7e4db; }
.must .rate { background:var(--acc); color:#14210a; border-color:var(--acc); }
.must .rate span, .must .rate p { color:#2d4218; }
.list { display:grid; gap:10px; padding:14px 0 28px; }
.card { display:grid; grid-template-columns:140px 1fr auto; gap:12px; align-items:center; background:var(--card); border:1px solid #2c4034; border-radius:18px; padding:10px 10px 10px 12px; }
.card img { width:140px; height:50px; object-fit:contain; background:#fff; border-radius:12px; padding:6px; }
.card h2 { margin: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:#24352b; color:var(--acc); border-radius:999px; padding:4px 8px; font-size:12px; font-weight:700; }
.go { display:inline-flex; align-items:center; justify-content:center; min-width:118px; background:var(--acc); color:#14210a; text-decoration:none; font-weight:900; border-radius:14px; padding:14px 18px; font-size:16px; }
.go:hover { filter:brightness(1.08); }
footer { padding-bottom:24px; }
@media (max-width:760px) {
  h1 { font-size:28px; margin-bottom:10px; }
  .must { grid-template-columns:1fr; gap:6px; }
  .must article { padding:10px 12px; }
  .must strong { font-size:24px; }
  .card { grid-template-columns:88px 1fr; }
  .card img { width:88px; height:42px; }
  .go { grid-column:1 / -1; min-height:48px; }
}