.draft-bar {
  display: none; position: sticky; top: 0; z-index: 100;
  padding: .45rem var(--gutter); text-align: center; font-size: var(--fs-small);
  color: var(--c-ink-inverse); background: var(--c-accent-2);
}
[data-mode='draft'] .draft-bar { display: block; }
.draft-pill {
  display: none; width: fit-content; border: 1px solid color-mix(in srgb, var(--c-accent) 65%, white);
  border-radius: var(--radius-pill); padding: .35rem .7rem; background: rgba(255,255,255,.12); color: inherit;
  font-size: var(--fs-small); font-weight: 800; letter-spacing: .04em;
}
[data-mode='draft'] .draft-pill { display: inline-flex; gap: .4rem; align-items: center; }
.site-header {
  position: sticky; top: 0; z-index: 90; min-height: var(--header-h);
  background: color-mix(in srgb, var(--c-surface-raised) 92%, transparent);
  backdrop-filter: blur(16px); border-bottom: 1px solid var(--c-line);
}
.site-header__inner { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; text-decoration: none; }
.nav { display: flex; align-items: center; gap: 1rem; }
.nav a { min-height: var(--tap-min); display: inline-flex; align-items: center; text-decoration: none; font-weight: 700; }
.nav-toggle { display: none; min-height: var(--tap-min); min-width: var(--tap-min); border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: var(--c-surface-raised); }
.hero { position: relative; overflow: hidden; color: var(--c-ink-inverse); background: radial-gradient(circle at 20% 20%, var(--c-accent-2-bright), transparent 34%), linear-gradient(135deg, var(--c-dark), var(--c-dark-deep)); }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.68), rgba(0,0,0,.2)); pointer-events: none; }
.hero__inner { position: relative; z-index: 1; display: grid; align-items: center; min-height: min(78vh, 760px); padding-block: var(--space-section); }
.hero__content { max-width: 720px; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.cta-primary, .cta-ghost { min-height: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); padding: .8rem 1.1rem; font-weight: 900; text-decoration: none; }
.cta-primary { background: var(--c-accent); color: var(--c-dark-deep); box-shadow: var(--shadow-card); }
.cta-ghost { border: 1px solid currentColor; color: inherit; }
.quick-facts, .card { background: var(--c-surface-raised); border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.quick-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; }
.quick-fact { padding: 1rem; border-right: 1px solid var(--c-line); }
.quick-fact:last-child { border-right: 0; }
.card { padding: var(--space-card); }
.card__meta { display: inline-flex; border-radius: var(--radius-pill); padding: .28rem .65rem; background: var(--c-surface-deep); color: var(--c-accent-deep); font-size: var(--fs-small); font-weight: 800; }
.notice-band { padding: 1rem; border-block: 1px solid var(--c-line); background: var(--c-surface-deep); }
.gallery-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 320px); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-block: .5rem 1rem; }
.gallery-strip > * { scroll-snap-align: start; }
.demo-form { display: grid; gap: 1rem; }
.demo-form input, .demo-form textarea, .demo-form select { width: 100%; min-height: var(--tap-min); border: 1px solid var(--c-line-strong); border-radius: var(--radius-md); padding: .75rem; background: var(--c-surface-raised); color: var(--c-ink); }
.site-footer { padding-block: var(--space-block); color: var(--c-ink-inverse); background: var(--c-dark-deep); }
.disclosure { font-size: var(--fs-small); color: color-mix(in srgb, var(--c-ink-inverse) 78%, transparent); }
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav { position: fixed; inset: var(--header-h) 0 auto 0; display: none; flex-direction: column; align-items: stretch; padding: 1rem var(--gutter); background: var(--c-surface-raised); border-bottom: 1px solid var(--c-line); }
  .nav.is-open { display: flex; }
  .nav a { justify-content: center; }
  .quick-facts { grid-template-columns: 1fr; }
  .quick-fact { border-right: 0; border-bottom: 1px solid var(--c-line); }
}