/* Hang Loose Tactical React SPA overrides */
:root {
  --hlt-yellow: #F5C94A;
}
body {
  background: #0b0c10;
  color: #eaeaea;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
a { color: var(--hlt-yellow); text-decoration: none; }
a:hover { text-decoration: underline; }
.navbar { display:flex; gap:1rem; align-items:center; padding:14px 20px; position:sticky; top:0; backdrop-filter:saturate(160%) blur(8px); background: rgba(17,17,20,.65); border-bottom: 1px solid rgba(255,255,255,.06); z-index: 40;}
.brand { font-weight: 800; letter-spacing:.6px; text-transform: uppercase; }
.container { max-width: 1200px; margin: 0 auto; padding: 16px; }
.hero { padding: 64px 16px; background: radial-gradient(1200px 600px at 60% -10%, rgba(245,201,74,.08), transparent), linear-gradient(#0b0c10,#0d0f14); border-bottom:1px solid rgba(255,255,255,.06); }
.hero h1 { font-size: clamp(2rem, 3.2vw, 3.25rem); margin: 0 0 14px; }
.card-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.card { background:#12141a; border:1px solid rgba(255,255,255,.06); border-radius: 14px; overflow:hidden; transition: transform .15s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.card img { width: 100%; height: 180px; object-fit: cover; display:block; }
.card .p { padding: 12px 14px 16px; }
.footer { border-top:1px solid rgba(255,255,255,.06); padding: 32px 16px; background:#0d0f14; color:#b8b8b8; }
.badge { font-size:.75rem; padding:3px 8px; border-radius:9999px; border:1px solid rgba(255,255,255,.18); }
input, textarea { background:#0f1117; color:#eaeaea; border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:10px 12px; width:100%; }
button { background: var(--hlt-yellow); color:#151515; border:none; border-radius:10px; padding:10px 14px; font-weight:700; cursor:pointer; }
button:hover { filter: brightness(1.05); }