:root {
  --bg: #0b0b0b;
  --panel: #121212;
  --text: #f2f2f2;
  --muted: #c9c9c9;
  --gold: #C8A451;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: min(1100px, 92%); margin: 0 auto; }
header { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom: 1px solid rgba(200,164,81,0.25); position: sticky; top:0; background: rgba(11,11,11,0.9); backdrop-filter: blur(6px); z-index:10; }
header img { width:42px; height:42px; object-fit: cover; border-radius: 6px; }
.brand { font-weight: 800; letter-spacing: 1.2px; }
nav { margin-left:auto; display:flex; gap:16px; }
nav a { font-weight: 700; }
.hero { padding: 72px 0 32px; }
.hero h1 { font-size: clamp(28px, 5vw, 56px); margin: 0 0 10px; line-height: 1.05; }
.hero p { color: var(--muted); font-size: clamp(16px, 2vw, 20px); margin: 6px 0 0; max-width: 800px; }
.section { padding: 42px 0; border-top: 1px solid rgba(200,164,81,0.18); }
.section h2 { margin: 0 0 16px; font-size: clamp(22px,3vw,34px); }
.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.card { background: var(--panel); border: 1px solid rgba(200,164,81,0.22); border-radius: 12px; overflow: hidden; }
.card img { width:100%; aspect-ratio: 4/3; object-fit: cover; }
.two-col { display:grid; grid-template-columns: 1.1fr 1fr; gap: 18px; }
.box { background: var(--panel); border: 1px solid rgba(200,164,81,0.22); border-radius: 12px; padding: 16px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.badge { border:1px solid rgba(200,164,81,0.35); border-radius: 999px; padding: 6px 10px; color: var(--gold); font-weight: 600; font-size: 12px; }
.cta { margin-top: 12px; display:flex; gap:10px; flex-wrap: wrap; }
.btn { background: var(--gold); color:#111; border:none; border-radius: 10px; padding: 12px 16px; font-weight: 800; cursor:pointer; }
small.muted { color: var(--muted); }
footer { padding: 30px 0 60px; color: var(--muted); font-size: 14px; }
input, textarea { width:100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(200,164,81,0.25); background: #0e0e0e; color: var(--text); }
label { display:block; margin: 10px 0 6px; color: var(--muted); }
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
}