/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; margin: 0 0 var(--space-sm); font-size: 2rem; }
h2, h3 { font-family: var(--font-heading); line-height: 1.2; margin: 0 0 var(--space-sm); }
p { margin: 0 0 var(--space-sm); }

/* ---------- Design Tokens ---------- */
:root {
  --color-bg: #15120e;
  --color-surface: #1f1a14;
  --color-surface-alt: #2a2218;
  --color-border: #3a2f22;
  --color-border-ink: #0a0806;
  --color-text: #f2ece1;
  --color-text-muted: #b3a593;
  --color-accent: #f2871b;
  --color-accent-dark: #c96a0f;
  --color-good: #4fd19f;
  --color-good-bg: rgba(79, 209, 159, 0.15);
  --color-caution: #f2871b;
  --color-caution-bg: rgba(242, 135, 27, 0.18);

  --font-display: 'Anton', system-ui, sans-serif;
  --font-heading: 'Oswald', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  --max-width: 1140px;
  --radius: 8px;
}

/* ---------- Layout ---------- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); }
.page-section { padding: var(--space-lg) 0; }

/* ---------- Eyebrow ---------- */
.eyebrow { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem; font-weight: 600; color: var(--color-accent); margin: 0 0 var(--space-xs); }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--color-border); background-color: var(--color-surface); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) 0; }
.brand { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-text); }
.brand:hover { text-decoration: none; }
.brand__mark { width: 28px; height: 28px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.02em; text-transform: uppercase; }
.brand__tagline { font-family: var(--font-body); font-size: 0.65rem; font-weight: 400; color: var(--color-text-muted); text-transform: none; letter-spacing: 0; }
.site-nav { display: flex; gap: var(--space-md); }
.site-nav a { color: var(--color-text-muted); font-weight: 500; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-accent); }

/* ---------- Footer ---------- */
.site-footer { position: relative; border-top: 1px solid var(--color-border); background-color: var(--color-surface); margin-top: var(--space-xl); padding: var(--space-lg) 0 var(--space-md); }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background-image: repeating-radial-gradient(circle at 0 0, rgba(242, 135, 27, 0.3) 0, rgba(242, 135, 27, 0.3) 1px, transparent 1px, transparent 6px); background-size: 6px 6px; }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-lg); justify-content: space-between; }
.site-footer__brand { max-width: 36ch; }
.site-footer__contact a { display: block; color: var(--color-text); margin-bottom: var(--space-xs); }
.site-footer__legal { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.85rem; }

/* ---------- Buttons ---------- */
.button { display: inline-block; padding: 0.65rem 1.25rem; border-radius: 4px; font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; border: 2px solid var(--color-border-ink); box-shadow: 3px 3px 0 var(--color-border-ink); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--color-border-ink); text-decoration: none; }
.button--primary { background-color: var(--color-accent); color: #1a0e00; }
.button--primary:hover { background-color: var(--color-accent-dark); }
.button--secondary { background-color: var(--color-surface); color: var(--color-text); }
.button--secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 0.2rem 0.6rem; border: 1.5px solid var(--color-border-ink); border-radius: 3px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-heading); transform: skewX(-6deg); }
.badge--tested { background-color: var(--color-good-bg); color: var(--color-good); }
.badge--asis { background-color: var(--color-caution-bg); color: var(--color-caution); }

/* ---------- Catalog Grid & Cards ---------- */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
.listing-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.15s ease, border-color 0.15s ease; }
.listing-card:hover { transform: translateY(-2px); border-color: var(--color-accent); }
.listing-card__image { width: 100%; height: 160px; object-fit: contain; background-color: var(--color-surface-alt); padding: var(--space-md); }
.listing-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); }
.listing-card__title { font-size: 1.05rem; margin: var(--space-xs) 0 0; }
.listing-card__price { color: var(--color-text-muted); font-weight: 600; margin: 0; }
.listing-card__specs { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: var(--space-xs) 0; }
.listing-card__specs th { text-align: left; color: var(--color-text-muted); font-weight: 500; padding: 0.2rem 0.5rem 0.2rem 0; vertical-align: top; white-space: nowrap; }
.listing-card__specs td { padding: 0.2rem 0; }
.listing-card__description { font-size: 0.9rem; color: var(--color-text-muted); }
.listing-card__actions { display: flex; gap: var(--space-xs); margin-top: var(--space-xs); flex-wrap: wrap; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: var(--space-xl) 0 calc(var(--space-xl) + 28px);
  background-image:
    repeating-radial-gradient(circle at 0 0, rgba(242, 135, 27, 0.12) 0, rgba(242, 135, 27, 0.12) 1.5px, transparent 1.5px, transparent 10px),
    radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
  background-size: 10px 10px, 100% 100%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
}
.hero h1 { font-size: 2.75rem; max-width: 42ch; margin-top: var(--space-xs); text-shadow: 4px 4px 0 var(--color-border-ink); }
.hero__stat { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); background-color: var(--color-surface); border: 2px solid var(--color-border-ink); box-shadow: 3px 3px 0 var(--color-border-ink); transform: skewX(-4deg); }
.hero__stat-label { display: block; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); transform: skewX(4deg); }
.hero__stat-number { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--color-accent); line-height: 1; transform: skewX(4deg); }
.hero__stat-sub { display: block; font-family: var(--font-body); font-size: 0.75rem; color: var(--color-text-muted); transform: skewX(4deg); }
.hero__subhead { max-width: 60ch; color: var(--color-text-muted); font-size: 1.1rem; }
.hero__actions { display: flex; gap: var(--space-sm); margin-top: var(--space-md); flex-wrap: wrap; }
.hero__tagline { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 var(--space-sm); }

/* ---------- Trust Points ---------- */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); margin: var(--space-lg) 0; }
.trust-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-md); }
.trust-card h3 { font-size: 1.05rem; color: var(--color-accent); }

/* ---------- Filter Bar ---------- */
.filter-bar { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border); }
.filter-bar select { background-color: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.5rem 0.75rem; }
.catalog-empty { padding: var(--space-lg) 0; color: var(--color-text-muted); text-align: center; }

/* ---------- Contact Actions ---------- */
.contact-actions { display: flex; gap: var(--space-sm); margin: var(--space-md) 0; flex-wrap: wrap; }

/* ---------- Section Accent (stamp callout) ---------- */
.section-accent { display: flex; gap: var(--space-md); align-items: flex-start; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-md); clip-path: polygon(0 14px, 100% 0, 100% 100%, 0 100%); margin: var(--space-md) 0; }
.section-accent > div { flex: 1; }
.stamp-mark { flex-shrink: 0; width: 96px; height: 96px; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .site-header__inner { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
  .site-nav { gap: var(--space-sm); flex-wrap: wrap; }
  .section-accent { flex-direction: column; }
}