/* ─── Page wrapper ───────────────────────────────────────────── */

.page {
  background-color: var(--cod-gray);
  overflow-x: clip;
  position: relative;
  width: 100%;
}

/* ─── Content container ──────────────────────────────────────── */

.container {
  max-width: calc(var(--page-max) + var(--page-pad) * 2);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  position: relative;
  width: 100%;
}

/* ─── CTA button (shared across sections) ───────────────────── */

.bttn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 21px;
  padding: 18px 32px;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.bttn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: rgba(244,245,245,0.01);
  box-shadow: 0 5.28px 7.92px -5.28px rgba(1,114,253,.25),
              0 13.2px 19.8px -3.96px rgba(1,114,253,.25);
}

.bttn:hover {
  border-color: rgba(1,114,253,0.5);
  box-shadow: 0 0 24px rgba(1,114,253,0.15);
}

.bttn__text {
  font-family: var(--font-raleway), sans-serif;
  font-size: var(--fs-32);
  font-weight: 600;
  color: var(--cultured-pearl);
  letter-spacing: 0;
  line-height: 1;
  position: relative;
}

.bttn__icon {
  display: flex;
  align-items: center;
  position: relative;
}

.bttn__icon img {
  width: 32px;
  height: 32px;
}

/* ─── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1600px) {
  :root {
    --page-pad: 80px;
  }
}

@media (max-width: 1280px) {
  :root {
    --page-pad: 40px;
  }
  .bttn__text {
    font-size: var(--fs-24);
  }
}

@media (max-width: 900px) {
  :root {
    --page-pad: var(--page-pad-xs);
  }
  .bttn__text {
    font-size: var(--fs-18);
  }
  .bttn {
    padding: 14px 24px;
  }
}