:root {
  --gold: #f4b400;
  --gold-dark: #9c7000;
  --text: #f8f8f8;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; min-height: 100%; overflow-x: hidden; font-family: Arial, Helvetica, sans-serif; }
body { min-height: 100vh; display: grid; place-items: center; padding: clamp(40px, 11vh, 190px) 16px; color: var(--text); background-color: #050505; background-image: linear-gradient(135deg, transparent 46%, rgba(255,255,255,.065) 47%, rgba(255,255,255,.065) 49%, transparent 50%), linear-gradient(45deg, transparent 46%, rgba(255,255,255,.065) 47%, rgba(255,255,255,.065) 49%, transparent 50%); background-size: 280px 280px; }
.landing-card { width: 100%; max-width: 420px; min-width: 0; overflow: hidden; padding: 8px; border: 1px solid var(--gold-dark); border-radius: 16px; background: linear-gradient(180deg, #070707, #111 70%, #080808); box-shadow: 0 18px 50px #000; }
.brand-bar { height: 48px; position: relative; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--gold-dark); }
.brand-bar img { width: 172px; max-height: 38px; object-fit: contain; }
.status-dot { position: absolute; top: 14px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.hero { margin-top: 8px; overflow: hidden; border: 1px solid #3c2b00; background: #170009; }
.hero img { display: block; width: 100%; max-width: 100%; height: auto; }
.support-copy { margin: 11px 8px; color: var(--gold); text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .8px; line-height: 1.45; }
.actions { display: grid; gap: 8px; }
.button { height: 50px; display: grid; place-items: center; border-radius: 7px; color: var(--gold); text-decoration: none; font-size: 14px; font-weight: 800; letter-spacing: 1px; transition: transform .15s, filter .15s; cursor: pointer; }
.button:hover { transform: translateY(-1px); filter: brightness(1.1); }
.button:active { transform: translateY(0); }
.button-primary { border: 2px solid #ffd04d; color: #090909; background: var(--gold); box-shadow: inset 0 0 0 2px #7b5900; }
.button-secondary { border: 2px solid var(--gold); background: #060606; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.metrics div { min-width: 0; height: 35px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border: 1px solid #282000; border-radius: 6px; background: #050505; }
.metrics span { color: #999; font-size: 9px; }
.metrics strong { color: var(--gold); font-size: 12px; }
.site-info { margin: 16px 0 0; padding: 8px 12px; border: 1px solid var(--gold-dark); border-radius: 8px; background: #080808; }
.site-info div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid #2d260f; }
.site-info div:last-child { border-bottom: 0; }
.site-info dt { color: var(--gold); font-size: 10px; font-weight: 800; }
.site-info dd { margin: 0; font-size: 11px; font-weight: 700; }
footer { margin-top: 14px; padding: 18px 8px 10px; border-top: 1px solid #3a2e08; color: #a98b32; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .7px; }

@media (max-width: 480px) {
  body { display: block; padding: 12px 10px; background-size: 190px 190px; }
  .landing-card { width: calc(100vw - 20px); max-width: calc(100vw - 20px); margin: 0 auto; border-radius: 12px; }
  .brand-bar { height: 43px; }
  .hero { margin-top: 6px; }
  .metrics { gap: 6px; }
  .site-info div { grid-template-columns: 110px minmax(0, 1fr); }
  .site-info dd { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 350px) {
  .metrics { grid-template-columns: 1fr; }
  .site-info div { grid-template-columns: 1fr; gap: 4px; }
}