/* ==========================================================================
   Layout Primitives
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.section {
  padding-block: var(--space-7);
  position: relative;
}

.section--tight {
  padding-block: var(--space-6);
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-5);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-en);
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--color-accent);
  display: inline-block;
}

/* ---------- Grid system (CSS Grid only) ---------- */
.grid {
  display: grid;
  gap: var(--space-4);
}

.grid--services {
  grid-template-columns: repeat(4, 1fr);
}

.grid--why {
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-6);
}

.grid--footer {
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--space-5);
}

.grid--hero {
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-5);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 500;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              backdrop-filter var(--duration-base) var(--ease-standard);
}

.site-header.is-scrolled {
  background: rgba(248, 250, 252, 0.9);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--shadow-sm);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--gradient-navy);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}

.site-footer .container {
  position: relative;
  z-index: 1;
  padding-block: var(--space-7) var(--space-4);
}

.footer-bottom {
  border-top: 1px solid rgba(248, 250, 252, 0.12);
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--fs-small);
  color: var(--color-text-inverse-muted);
}

/* ==========================================================================
   Signature element — lattice motif derived from the iAI logo's
   interlocking diamond mark. Used as a quiet structural texture, not decoration.
   ========================================================================== */
.lattice-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.lattice-bg svg {
  position: absolute;
  opacity: 0.5;
}

.lattice-divider {
  height: 56px;
  width: 100%;
  display: block;
  color: var(--color-border);
}

.lattice-bg svg.lattice--tl { left: -40px; top: -60px; }
.lattice-bg svg.lattice--br { right: -40px; bottom: -60px; }
.lattice-bg svg.lattice--corner { left: -100px; top: -100px; }

/* ---------- Section title utility (replaces inline font-size) ---------- */
.section-title {
  font-size: var(--fs-h2);
}

.section-title--spaced {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-3);
}

/* ---------- Panel with navy gradient background (why-us visual) ---------- */
.panel-navy {
  background: var(--gradient-navy);
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.panel-navy svg {
  width: 70%;
}

/* ---------- Fit-content button ---------- */
.btn-fit {
  width: fit-content;
}