/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* Sections - dark by default, massive breathing room */
.section {
  padding-block: var(--space-section);
  position: relative;
}

/* Alternating dark surfaces for visual rhythm */
.section--alt {
  background: var(--gradient-surface-2);
}

.section--elevated {
  background: var(--gradient-surface-3);
}

/* Accent section with subtle primary glow orbs */
.section--accent {
  background: var(--surface-raised);
  position: relative;
  overflow: hidden;
}

.section--accent::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -20%;
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.10) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.section--accent::after {
  content: '';
  position: absolute;
  bottom: -30%;
  right: -15%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.07) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.section--dark {
  background: var(--gradient-surface-3);
  position: relative;
  overflow: hidden;
}

.section--dark::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -20%;
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.10) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

/* CTA variant: premium cinematic background image layered over the dark gradient.
   Opt-in via `.section--cta` on the bottom-of-page CTA blocks. */
.section--dark.section--cta {
  background-color: var(--surface-raised);
  background-image:
    linear-gradient(180deg, rgba(6, 12, 26, 0.62) 0%, rgba(11, 21, 40, 0.78) 55%, rgba(6, 12, 26, 0.62) 100%),
    image-set(
      url('../assets/images/cta-bg.webp') type('image/webp'),
      url('../assets/images/cta-bg.png') type('image/png')
    );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Global Network variant: atmospheric bg with faint world-map/constellation imagery.
   Opt-in via `.section--global` on dark sections that frame a global-reach story. */
.section--dark.section--global {
  background-color: var(--surface-raised);
  background-image:
    linear-gradient(180deg, rgba(6, 12, 26, 0.80) 0%, rgba(11, 21, 40, 0.88) 50%, rgba(6, 12, 26, 0.80) 100%),
    image-set(
      url('../assets/images/global-section-bg.webp') type('image/webp'),
      url('../assets/images/global-section-bg.png') type('image/png')
    );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section--gray {
  background: var(--surface-raised);
  position: relative;
  overflow: hidden;
}

.section--gray::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.06) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.section--light-blue {
  background: var(--surface-overlay);
}

/* Section headers - centered, with massive titles */
.section__header {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-3xl);
  text-align: center;
}

.section__header .section__title {
  letter-spacing: var(--ls-tighter);
}

/* Eyebrow tag - microscopic pill badge */
.section__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.35rem 1rem;
  font-family: var(--font-heading);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--color-secondary);
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-lg);
}

.section__title {
  margin-bottom: var(--space-md);
}

.section__subtitle {
  font-size: var(--fs-body-lg);
  color: var(--text-tertiary);
  line-height: var(--lh-relaxed);
}

/* Grid */
.grid {
  display: grid;
  gap: var(--space-xl);
}

.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(300px, 1fr));
}

/* Bento Grid - asymmetric, premium layout */
.grid--bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-lg);
}

.grid--bento > :nth-child(1) {
  grid-column: span 7;
}

.grid--bento > :nth-child(2) {
  grid-column: span 5;
}

.grid--bento > :nth-child(3) {
  grid-column: span 5;
}

.grid--bento > :nth-child(4) {
  grid-column: span 7;
}

/* Flex utilities */
.flex {
  display: flex;
}

.flex--center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.flex--col {
  display: flex;
  flex-direction: column;
}

.flex--gap-sm { gap: var(--space-sm); }
.flex--gap-md { gap: var(--space-md); }
.flex--gap-lg { gap: var(--space-lg); }
.flex--gap-xl { gap: var(--space-xl); }

/* Two-column content layout */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.split--reverse > :first-child {
  order: 2;
}

.split--reverse > :last-child {
  order: 1;
}