/*
  Layout stylesheet for page-level structure.
  Use this file for wrappers, grids, spacing systems, and responsive layout primitives.
  Do not store customer data, CRM data, emails, secrets, or private company records here.
*/

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  display: block;
  min-height: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.76);
  border-bottom: 1px solid rgba(31, 28, 24, 0.08);
  color: var(--ink);
  box-shadow: 0 0 0 rgba(48, 35, 20, 0);
  backdrop-filter: saturate(1.35) blur(18px);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(31, 28, 24, 0.14);
  box-shadow: 0 12px 34px rgba(48, 35, 20, 0.08);
}

.header-nav-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  padding: 10px clamp(18px, 4vw, 56px);
}

.nav {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 24px);
  flex-wrap: wrap;
}

.header-actions,
.hero-actions,
.preorder-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.section {
  padding: clamp(64px, 9vw, 116px) clamp(18px, 5vw, 72px);
}

.split,
.field-band,
.experience-section,
.preorder-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  align-items: center;
  gap: clamp(34px, 6vw, 80px);
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.feature-grid,
.demo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.technical-grid,
.technical-intro,
.status-section,
.cred-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 4vw, 42px);
}

.audience-panel {
  grid-column: 1 / -1;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}