/* ============================================================
   HEROBOTS · Base layer
   Element defaults + a few brand utilities. Tokens come first.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

/* overflow-x: hidden (longhand) forces overflow-y to compute as auto per
   spec, turning html/body into scroll containers and breaking
   `position: sticky` for anything inside (e.g. .hb-prodnav) — overflow-x:
   clip avoids that side effect while still preventing horizontal scroll. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--hb-orange); color: #fff; }

/* ---- Type helpers ---- */
.hb-mega    { font-size: var(--fs-mega);    font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.hb-display { font-size: var(--fs-display); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.hb-h1      { font-size: var(--fs-h1);      font-weight: var(--fw-bold);     line-height: var(--lh-snug);  letter-spacing: var(--ls-tight); }
.hb-h2      { font-size: var(--fs-h2);      font-weight: var(--fw-bold);     line-height: var(--lh-snug);  letter-spacing: var(--ls-tight); }
.hb-h3      { font-size: var(--fs-h3);      font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.hb-body    { font-size: var(--fs-body);    font-weight: var(--fw-regular);  line-height: var(--lh-relaxed); }
.hb-label   { font-size: var(--fs-small);   font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--text-tertiary); }
.hb-accent  { color: var(--accent); }

/* ---- Signature glass-ember capsule (as used on the logo lockup) ---- */
.hb-capsule {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--glass-ember);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: inset 0 0 0 1px rgba(255,123,66,0.9);
}

/* ---- The thin orange rule that bleeds off page edges ---- */
.hb-rule-accent { background: var(--hb-orange); border: 0; }