html,
body {
  min-height: 100%;
}

body {
  min-width: 320px;

  position: relative;
  isolation: isolate;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(108, 24, 170, 0.12),
      transparent 40%
    ),
    var(--color-bg);

  color: var(--color-text);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  line-height: 1.5;
}

/* --------------------------------------------------
   GLOBAL FIXED WORKFLOW BACKGROUND
   Decorative workflow image stays fixed while
   the page content scrolls over it.
-------------------------------------------------- */

body::before {
  content: "";

  position: fixed;
  inset: 0;

  z-index: -1;

  background-image:
    url("../assets/images/backgrounds/results-workflow.png");

  background-repeat: no-repeat;
  background-position: center center;
  background-size: min(92vw, 1800px) auto;

  opacity: 0.18;

  pointer-events: none;
}

/* Keep page sections transparent so the fixed
   workflow background remains visible behind them. */

.course-section,
.results-section,
.faq-section {
  background: transparent;
}

.container {
  width: min(
    calc(100% - (var(--container-padding) * 2)),
    var(--container-width)
  );

  margin-inline: auto;
}

.section {
  position: relative;
  min-height: 100vh;
  scroll-margin-top: var(--header-height);
}

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

  min-height: 56px;
  padding: 0 36px;

  border-radius: var(--radius-sm);

  font-weight: 700;

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.button--primary {
  background: var(--gradient-primary);

  box-shadow:
    0 0 24px rgba(255, 29, 187, 0.2);
}

.button--primary:hover {
  transform: translateY(-2px);

  box-shadow:
    0 0 34px rgba(255, 29, 187, 0.4);
}

.section-heading h2 {
  font-size: clamp(42px, 5vw, 76px);
  line-height: 0.95;
}

.section-heading strong {
  color: var(--color-pink);
}

/* --------------------------------------------------
   RESPONSIVE CONTAINER WIDTH
-------------------------------------------------- */

@media (min-width: 1600px) {
  :root {
    --container-width: 1600px;
  }

  body::before {
    background-size: min(90vw, 2100px) auto;
    opacity: 0.19;
  }
}

@media (min-width: 2200px) {
  :root {
    --container-width: 2100px;
    --container-padding: 48px;
  }

  body::before {
    background-size: min(90vw, 2600px) auto;
    opacity: 0.22;
  }
}

@media (min-width: 3000px) {
  :root {
    --container-width: 2800px;
    --container-padding: 72px;
  }

  body::before {
    background-size: min(88vw, 3200px) auto;
    opacity: 0.24;
  }
}

/* --------------------------------------------------
   MOBILE
-------------------------------------------------- */

@media (max-width: 767px) {
  body::before {
    background-size: auto 72vh;
    background-position: 60% center;
    opacity: 0.11;
  }
}

/* ==================================================
   GLOBAL GET THE COURSE BUTTON
================================================== */

.button--primary {
  background:
    linear-gradient(
      90deg,
      #ff2dbb 0%,
      #a645ff 100%
    );

  color: #ffffff;

  border: 5px solid rgba(255, 245, 253, 0.96);

  border-radius: 24px;

  font-weight: 700;

  box-shadow:
    0 0 0 3px rgba(255, 45, 187, 0.75),
    0 0 14px rgba(255, 255, 255, 0.55),
    0 0 30px rgba(255, 45, 187, 0.72),
    0 0 55px rgba(166, 69, 255, 0.45),
    0 12px 28px rgba(0, 0, 0, 0.42);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    filter 0.2s ease;
}

.button--primary:hover {
  transform: translateY(-3px) scale(1.025);

  border-color: #ffffff;

  filter: brightness(1.08);

  box-shadow:
    0 0 0 4px rgba(255, 45, 187, 0.9),
    0 0 18px rgba(255, 255, 255, 0.8),
    0 0 38px rgba(255, 45, 187, 0.95),
    0 0 70px rgba(166, 69, 255, 0.65),
    0 15px 34px rgba(0, 0, 0, 0.46);
}

.button--primary:active {
  transform: translateY(0) scale(0.99);
}