:root{ --bg:#0b0b0b; --card:#141414; --gold:#d4af37; --text:#f1f1f1; --muted:#9a9a9a; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.wrap{max-width:1200px;margin:1rem auto;padding:0 1rem}
h1,h2,h3{margin:.5rem 0}
.card{background:var(--card);border:1px solid rgba(212,175,55,.25);border-radius:16px;padding:1rem;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.btn{appearance:none;border:0;cursor:pointer;padding:.6rem 1rem;border-radius:999px;font-weight:800;color:#000;background:var(--gold)}
.btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.small{color:var(--muted);font-size:.9rem}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:1rem}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.nav{position:sticky;top:0;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);border-bottom:1px solid rgba(212,175,55,.25);z-index:50}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem}
.nav a{color:var(--text);text-decoration:none;margin-left:1rem;font-weight:700}
.nav a:hover{color:var(--gold)}
footer{margin:2rem 0;color:var(--muted);text-align:center}
.ad-slot{min-height:260px;background:#0d0d0d;border:1px dashed #444;border-radius:12px;display:flex;align-items:center;justify-content:center}
.ad-slot.small{min-height:120px}
.canvas-wrap{position:relative; background:#000; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.08)}
.controls{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.6rem}
input[type=range]{width:220px}
label{font-size:.9rem;color:#cfcfcf;margin-right:.25rem}
.hero{min-height:58vh;border:1px solid rgba(212,175,55,.18);border-radius:16px;background:#000 url('/assets/mbcc-hero-desktop.png') right center/cover no-repeat}
@media(max-width:700px){.hero{min-height:70vh;background-image:url('/assets/mbcc-hero-mobile.png')}}