/* Container */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
.container-sm {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
.container-xs {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Sections */
.section     { padding: var(--space-3xl) 0; }
.section-sm  { padding: var(--space-2xl) 0; }
.section-lg  { padding: 7rem 0; }

/* Section header */
.section-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}
.section-header h2 {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-md);
}
.section-header .lead {
  max-width: 660px;
  margin: 0 auto;
}

/* Divider bar */
.divider {
  width: 56px;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  margin: var(--space-md) auto;
}
.divider-left { margin-left: 0; }

/* Grids */
.grid { display: grid; gap: var(--space-lg); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Flex helpers */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-wrap    { flex-wrap: wrap; }
.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }
.flex-1  { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Spacing utilities */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl{ margin-bottom: var(--space-2xl); }

/* Backgrounds */
.bg-primary   { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }
.bg-surface   { background: var(--bg-surface); }

/* Page hero */
.page-hero {
  padding: calc(var(--nav-height) + 5rem) 0 5rem;
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(37,99,235,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(16,185,129,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }

/* Relative/absolute helpers */
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }

/* Width helpers */
.w-full { width: 100%; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }