:root {
  --bg: #f4f0fb;
  --ink: #24143f;
  --accent: #06b6d4;
  --accent2: #f59e0b;
  --card: #ffffff;
  --muted: color-mix(in srgb, #24143f 65%, white);
  --line: color-mix(in srgb, #24143f 12%, white);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Manrope', system-ui, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.65; }
.wrap { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; }
h1,h2,h3 { font-family: 'Fraunces', Georgia, serif; line-height: 1.15; }
.notice { background: var(--ink); color: #fff; font-size: .92rem; padding: .75rem 0; }
.notice a { color: var(--accent2); }
.top { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; }
.brand { font-family: 'Fraunces', serif; font-size:1.35rem; font-weight:700; }
.nav { display:flex; gap:1rem; font-weight:600; font-size:.95rem; flex-wrap:wrap; }
.hero { padding:2.5rem 0 1.5rem; display:grid; grid-template-columns:1.2fr .8fr; gap:1.5rem; }
.kicker { text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:700; color:var(--accent); }
.lead { color:var(--muted); max-width:40rem; margin-top:.75rem; }
.hero-box { background:var(--ink); color:#fff; border-radius:18px; padding:1.25rem; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding:1rem 0 2rem; }
.op-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1rem; box-shadow:0 10px 30px rgba(0,0,0,.06); display:flex; flex-direction:column; gap:.55rem; }
.op-card__head { display:flex; justify-content:space-between; align-items:center; }
.rank { font-weight:800; color:var(--accent2); }
.logo img { max-height:28px; width:auto; }
.logo-text { font-size:.95rem; }
.score { font-weight:800; color:var(--accent); }
.tags { display:flex; flex-wrap:wrap; gap:.35rem; }
.tags span { background:var(--bg); border-radius:999px; padding:.2rem .55rem; font-size:.78rem; font-weight:600; }
.btn { display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:var(--ink); font-weight:700; border-radius:999px; padding:.7rem 1rem; margin-top:.25rem; }
.fine { font-size:.78rem; color:var(--muted); }
.panel { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.25rem; margin:1rem 0 2rem; }
.trust { display:flex; flex-wrap:wrap; gap:.75rem; font-size:.85rem; font-weight:600; color:var(--muted); padding:1rem 0; }
.footer { border-top:1px solid var(--line); padding:1.5rem 0 2rem; color:var(--muted); font-size:.92rem; }
.footer nav { display:flex; flex-wrap:wrap; gap:1rem; margin-top:.5rem; }
.gate { position:fixed; inset:0; background:rgba(10,10,20,.72); display:grid; place-items:center; z-index:50; padding:1rem; }
.gate[hidden] { display:none; }
.gate__box { background:#fff; border-radius:18px; padding:1.5rem; max-width:420px; width:100%; text-align:center; }
.gate__box h2 { margin:.5rem 0; }
@media (max-width:900px) { .hero, .grid { grid-template-columns:1fr; } }