/* ==========================================================================
   AE Creative — Shared UI primitives
   Small cross-cutting pieces used across multiple sections that aren't
   big enough to warrant their own file: the eyebrow/section-heading kit
   and the pill badge. Buttons, cards, header and footer now each have
   their own dedicated stylesheet — see PROJECT_STRUCTURE.md.
   ========================================================================== */

/* ---- Section heading (eyebrow + title) ---- */
.eyebrow-row{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.eyebrow-row--center{display:inline-flex}
.eyebrow-line{width:29px;height:2.5px;background:var(--brand)}
.eyebrow-label{font-family:var(--ff-mono);font-size:13.5px;font-weight:600;letter-spacing:.2em;color:var(--brand)}

.section-title{
  font-family:var(--ff-display);font-weight:700;letter-spacing:-.03em;
  line-height:1.15;margin:0;font-size:clamp(30px,5vw,50px);
}
.section-title--lg{font-size:clamp(30px,5vw,52px)}

/* ---- Eyebrow pill badge (hero / final CTA) ---- */
.eyebrow-badge{
  display:inline-flex;align-items:center;gap:9px;padding:8px 15px;
  border:1px solid var(--brand-line);border-radius:99px;
  background:rgba(107,95,255,.12);backdrop-filter:blur(8px);
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.14em;color:#fff;
}
.eyebrow-badge__dot{
  width:7px;height:7px;border-radius:99px;background:var(--grad);
  animation:cae-pulse 2.5s infinite;
}

/* ---- Placeholder content grid ----
   Generic 3-up card grid used by every interior page's placeholder
   section (see pages/*.html) — one definition instead of repeating the
   same inline grid style on every page. Breakpoint tiers in
   responsive.css. */
.placeholder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}