:root {
  --bg: #0b0f12;
  --bg-soft: #12181d;
  --panel: #161d25;
  --text: #e6eef7;
  --muted: #9fb0c0;
  --brand: #00d084;   /* Strength green */
  --brand-2: #58a6ff; /* Iron blue */
  --accent: #f59e0b;  /* PR gold */
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--bg); color: var(--text); font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.header { position: sticky; top:0; z-index:50; backdrop-filter: blur(8px); background: color-mix(in srgb, var(--bg), transparent 20%); border-bottom:1px solid rgba(255,255,255,.06); }
.header .row { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); }
.logo-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background: linear-gradient(135deg, var(--brand-2), var(--brand)); color:#0a0f14; font-weight:900; }
.logo-title { font-weight:900; letter-spacing:.2px; }

nav a { color: var(--muted); text-decoration: none; margin-left: 16px; }
nav a:hover { color: var(--text); }

.hero {
  --ring: radial-gradient(600px 260px at 40% -20%, color-mix(in srgb, var(--brand-2), transparent 80%), transparent),
           radial-gradient(600px 260px at 60% 120%, color-mix(in srgb, var(--brand), transparent 80%), transparent);
  background:
    url('/assets/svg/pattern.svg'), var(--ring), var(--bg);
  background-size: auto, cover, auto;
  padding: 80px 0 56px;
}
.hero h1 { font-size: clamp(34px, 6vw, 64px); line-height:1.08; margin:0; }
.hero p { max-width: 760px; margin: 12px 0 0; color: var(--muted); }
.cta { margin-top: 22px; display:flex; gap: 12px; flex-wrap: wrap; }
.btn { padding: 12px 18px; border-radius: 14px; border:1px solid rgba(255,255,255,.1); color: var(--text); text-decoration:none; display:inline-flex; gap:10px; align-items:center; }
.btn.primary { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color:#0a0f14; border-color: transparent; font-weight: 700; }
.btn.ghost { background: var(--panel); }
.kicker { display:inline-block; padding:6px 10px; border-radius:10px; background: rgba(88,166,255,.12); color:#9fccff; font-size: 12px; letter-spacing: .3px; }

.section { padding: 56px 0; }
.h2 { font-size: 28px; font-weight: 800; margin: 0 0 10px; }
.muted { color: var(--muted); }

.grid-3 { display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--panel); border: 1px solid rgba(255,255,255,.06); border-radius: 16px; padding: 18px; }
.card h3 { margin: 0 0 8px; font-size: 18px; }

.split { display:grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 900px){ .split { grid-template-columns: 1.2fr 1fr; } }

.steel { background: linear-gradient(180deg, rgba(255,255,255,.04), transparent), url('/assets/svg/steel-bg.svg'); background-size: cover; }

.list { display:grid; gap:10px; padding-left: 18px; }
.list li { margin-left: 6px; }

.gallery { display:grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gallery .shot { position:relative; border-radius: 14px; overflow:hidden; border:1px solid rgba(255,255,255,.06); background: #0f1418; }
.gallery .shot svg, .gallery .shot img { width: 100%; height: 180px; object-fit: cover; display:block; }

.footer { border-top: 1px solid rgba(255,255,255,.06); padding: 18px 0; color: var(--muted); }
.badge { display:inline-flex; gap:8px; align-items:center; background: rgba(0,0,0,.3); padding:6px 10px; border-radius: 999px; border:1px solid rgba(255,255,255,.06); font-size:12px; }
hr.sep { border: none; border-top:1px solid rgba(255,255,255,.06); margin: 28px 0; }

blockquote.creed { margin:0; padding: 0 0 0 14px; border-left: 3px solid var(--brand); color: var(--text); }


.img-merch {
  max-width: 320px;   /* control width */
  width: 100%;        /* responsive */
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 0 auto;     /* center it */
}