:root { --bg:#0a0a0a; --fg:#fff; --gold:#d4af37; --red:#c40000; }
html,body { margin:0; background:var(--bg); color:var(--fg); font-family:system-ui, Arial, sans-serif; }
header.mcc { padding:1rem 1.25rem; border-bottom:1px solid #222; display:flex; align-items:center; gap:1rem; }
.mcc .brand { font-weight:700; letter-spacing:.2px; }
.mcc nav a { color:#aaa; text-decoration:none; margin:0 .6rem; }
.mcc nav a.active, .mcc nav a:hover { color:var(--gold); }
.hero { padding:2rem 1.25rem; color:#fff; }
.hero--red { background:linear-gradient(90deg, #000 0%, var(--red) 150%); }
.frame-wrap { height: calc(100vh - 190px); }
iframe { width:100%; height:100%; border:0; background:#000; }
footer.mcc { padding:1rem 1.25rem; border-top:1px solid #222; color:#aaa; font-size:.9rem; }
.wrap { max-width:960px; margin:0 auto; padding:2rem 1.25rem; }
.card { background:#111; border:1px solid #222; border-radius:12px; padding:1rem 1.25rem; margin:.75rem 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1rem; }
.tile { background:#111; border:1px solid #222; border-radius:12px; padding:1rem; }
.cta { display:inline-block; margin-top:.75rem; padding:.6rem 1rem; background:var(--gold); color:#000; border-radius:8px; text-decoration:none; font-weight:600; }