body {
  min-width: 20rem;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.container { width: min(100% - 2rem, var(--container-width)); margin-inline: auto; }
.section { padding-block: var(--space-section); }
.heading { color: var(--color-text); font-family: var(--font-family-heading); font-weight: var(--font-weight-extrabold); letter-spacing: -.045em; line-height: 1.06; text-wrap: balance; }
.heading--hero { font-size: var(--font-size-hero); }
.heading--section { font-size: var(--font-size-h2); }
.eyebrow, .badge { color: var(--color-secondary); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); letter-spacing: .1em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-sm); }
.eyebrow__dot { width: .5rem; height: .5rem; border-radius: var(--radius-pill); background: var(--color-primary); box-shadow: 0 0 0 .25rem rgb(214 166 46 / 14%); }
.badge { display: inline-flex; padding: var(--space-xs) var(--space-sm); border: 1px solid currentColor; border-radius: var(--radius-pill); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 3.125rem; padding: .75rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(.98); }
.button > span[aria-hidden="true"] { transition: transform var(--transition-fast); }
.button:hover > span[aria-hidden="true"] { transform: translateX(3px); }
.button-primary { background: linear-gradient(135deg, var(--color-secondary), var(--color-primary)); box-shadow: 0 10px 24px rgb(214 166 46 / 18%); color: #151008; }
.button-primary:hover { background: linear-gradient(135deg, #f8d775, var(--color-primary)); box-shadow: 0 16px 34px rgb(214 166 46 / 30%); }
.button-secondary { border-color: var(--color-primary); background: transparent; color: var(--color-primary); }
.button-secondary:hover, .button-ghost:hover { border-color: var(--color-text-muted); background: var(--color-surface-elevated); color: var(--color-text); }
.button-ghost { border-color: var(--color-border); background: transparent; color: var(--color-text); }
.card { padding: var(--space-lg); border: 1px solid rgb(205 224 247 / 18%); border-radius: var(--radius-md); background: linear-gradient(145deg, rgb(45 61 85 / 58%), rgb(18 29 47 / 72%)); box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal), color var(--transition-normal); }
.card:hover { transform: translateY(-5px) scale(1.012); border-color: rgb(245 200 90 / 58%); background: linear-gradient(145deg, rgb(60 82 112 / 74%), rgb(23 38 60 / 88%)); box-shadow: var(--shadow-premium), 0 0 0 1px rgb(245 200 90 / 7%) inset; }
.grid { display: grid; gap: var(--space-lg); }
.icon-wrapper { display: inline-grid; width: 2.5rem; aspect-ratio: 1; place-items: center; border-radius: var(--radius-sm); background: rgb(214 166 46 / 15%); color: var(--color-secondary); font-weight: var(--font-weight-extrabold); }
.form-group { display: grid; gap: var(--space-sm); }
.input { width: 100%; min-height: 2.75rem; padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.skip-link { position: fixed; z-index: 10; top: var(--space-sm); left: var(--space-sm); padding: var(--space-sm) var(--space-md); transform: translateY(-200%); border-radius: var(--radius-sm); background: var(--color-focus); color: #000; font-weight: var(--font-weight-bold); }
.skip-link:focus { transform: translateY(0); }
