/* ==========================================================================
   Á CHÂU ELECTRIC — BRAND DESIGN SYSTEM
   02 · TYPOGRAPHY (§3) + SECTION / LAYOUT PRIMITIVES (§8)
   ========================================================================== */

/* 3. TYPOGRAPHY
   ========================================================================== */
.ae-header,
.ae-footer,
.ae-home {
  font-family: var(--ae-font);
  font-size: var(--ae-fs-body);
  line-height: var(--ae-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* In-page anchors must clear the sticky brand header */
.ae-home [id],
#main [id] {
  scroll-margin-top: calc(var(--ae-header-h) + 18px);
}

.ae-h1,
.ae-home h1 {
  font-family: var(--ae-font);
  font-size: var(--ae-fs-h1);
  line-height: var(--ae-lh-tight);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 var(--ae-space-4);
  color: var(--ae-white);
  text-transform: none;
}
.ae-h2,
.ae-home .ae-section h2 {
  font-family: var(--ae-font);
  font-size: var(--ae-fs-h2);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 var(--ae-space-4);
  color: var(--ae-white);
}
.ae-h3 {
  font-size: var(--ae-fs-h3);
  line-height: 1.28;
  font-weight: 700;
  margin: 0 0 var(--ae-space-3);
  color: var(--ae-white);
}
.ae-h4 {
  font-size: var(--ae-fs-h4);
  line-height: 1.35;
  font-weight: 700;
  margin: 0 0 var(--ae-space-2);
  color: var(--ae-white);
}
.ae-body {
  font-size: var(--ae-fs-body);
  color: var(--ae-text-muted);
  margin: 0 0 var(--ae-space-4);
}
.ae-small {
  font-size: var(--ae-fs-small);
  color: var(--ae-text-muted);
}
.ae-caption {
  font-size: var(--ae-fs-caption);
  color: var(--ae-text-dim);
}
.ae-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ae-space-2);
  font-size: var(--ae-fs-caption);
  font-weight: 700;
  letter-spacing: var(--ae-ls-wide);
  text-transform: uppercase;
  color: var(--ae-gold);
  margin: 0 0 var(--ae-space-3);
}
.ae-eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, var(--ae-blue), var(--ae-orange));
}
.ae-lead {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.1875rem);
  color: var(--ae-text-muted);
  max-width: 62ch;
  margin: 0 0 var(--ae-space-5);
}
.ae-home p a,
.ae-footer a {
  color: var(--ae-white);
}
.ae-slogan {
  font-size: var(--ae-fs-small);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ae-gold);
  margin: 0;
}
.ae-text-gradient {
  background: linear-gradient(96deg, var(--ae-blue) 0%, var(--ae-orange) 70%, var(--ae-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ae-blue);
}

/* 8. SECTION PRIMITIVES
   ========================================================================== */
.ae-section {
  position: relative;
  padding: clamp(48px, 6vw, var(--ae-space-9)) 0;
  background-color: var(--ae-dark);
  color: var(--ae-text);
}
.ae-section--raised {
  background-color: var(--ae-dark-1);
  border-top: 1px solid var(--ae-line);
  border-bottom: 1px solid var(--ae-line);
}
.ae-section--grid {
  background-image: linear-gradient(rgba(248, 248, 248, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248, 248, 248, 0.028) 1px, transparent 1px);
  background-size: 48px 48px;
}
.ae-container {
  width: 100%;
  max-width: var(--ae-container);
  margin-inline: auto;
  padding-inline: var(--ae-gutter);
}
.ae-container--narrow {
  max-width: var(--ae-container-narrow);
}
.ae-section-head {
  max-width: 780px;
  margin-bottom: clamp(28px, 3.4vw, var(--ae-space-8));
}
.ae-section-head--center {
  margin-inline: auto;
  text-align: center;
}
.ae-section-head--center .ae-eyebrow {
  justify-content: center;
}
.ae-section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ae-space-5);
  max-width: none;
}
.ae-section-head--split > div {
  max-width: 720px;
}
.ae-grid {
  display: grid;
  gap: var(--ae-space-5);
}
.ae-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ae-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ae-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ae-grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.ae-grid--tight {
  gap: var(--ae-space-4);
}
.ae-divider {
  height: 1px;
  background: linear-gradient(90deg, var(--ae-blue-soft), var(--ae-line), var(--ae-orange-soft));
  border: 0;
  margin: 0;
}
.ae-note {
  margin: var(--ae-space-5) 0 0;
  padding: var(--ae-space-4) var(--ae-space-5);
  border-left: 2px solid var(--ae-orange);
  background: var(--ae-dark-2);
  border-radius: 0 var(--ae-radius) var(--ae-radius) 0;
  font-size: var(--ae-fs-small);
  color: var(--ae-text-muted);
}