/**
 * ============================================================
 * base.css — RESET & SHARED UTILITIES
 * ============================================================
 *
 * Global reset, body styles, and reusable components that
 * appear in multiple sections (buttons, eyebrows, titles).
 *
 * ============================================================
 */


/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: auto; /* GSAP handles smooth scroll, not CSS */
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  overflow-x: hidden;
}


/* ── Shared Buttons ──────────────────────────────────────────
   Used throughout the site. Edit here to change all buttons.
────────────────────────────────────────────────────────────── */

/* Solid purple button */
.btn-fill {
  background: var(--purple);
  color: #fff;
  padding: 15px 34px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
  transition: all .4s var(--ease-smooth);
}
.btn-fill:hover {
  background: var(--purple-lt);
  box-shadow: 0 0 44px rgba(139,92,246,.55);
  transform: scale(1.05);
}

/* Ghost / outline button */
.btn-line {
  background: transparent;
  color: rgba(255,255,255,.6);
  padding: 15px 34px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.13);
  font-family: var(--font-body);
  transition: all .4s var(--ease-smooth);
}
.btn-line:hover {
  color: #fff;
  border-color: rgba(255,255,255,.32);
  transform: scale(1.03);
}


/* ── Section Labels ──────────────────────────────────────────
   The small uppercase text above each section title.
   e.g. "WHAT WE OFFER" above "Built For Every Need."
────────────────────────────────────────────────────────────── */
.section-eyebrow {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cyan);
  display: block;
  margin-bottom: 22px;
}

/* ── Section Titles ──────────────────────────────────────────
   Large heading used at the top of each section.
   Font size scales with viewport width (clamp).
────────────────────────────────────────────────────────────── */
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(38px, 5.5vw, 84px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: .95;
  margin-bottom: 72px;
}