/* ================================================
   BASE.CSS
   ------------------------------------------------
   1. CSS Reset — removes browser default margins
   2. Global body styles
   3. Reusable utility classes used across sections
      (buttons, section tags, gradient text, etc.)
================================================ */


/* ── 1. CSS RESET ─────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* smooth scrolling for anchor links */
}


/* ── 2. GLOBAL BODY ───────────────────────────── */
body {
  font-family: var(--font-main);
  color: var(--navy);
  background: var(--white);
  overflow-x: hidden; /* prevent horizontal scroll */
  line-height: 1.5;
}


/* ── 3. REUSABLE UTILITY CLASSES ──────────────── */

/* --- Section Wrapper ---
   Wraps each page section with consistent padding.
   Usage: <section class="section"> ... </section>
*/
.section {
  padding: var(--space-3xl) var(--space-2xl);
}

/* Alternate light background for section variety */
.section--light {
  background: #fafafa;
}

/* Soft purple-teal gradient background */
.section--gradient {
  background: linear-gradient(135deg, #f8fafc 0%, #f5f3ff 100%);
}


/* --- Text Alignment Helper --- */
.text-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* --- Section Pill Tag ---
   The small colored badge above section titles.
   Usage: <div class="section-tag">✨ Label</div>
*/
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}
/* Color variants */
.section-tag--teal   { background: #e6fdf5; border: 1.5px solid #0db88e33; color: var(--teal); }
.section-tag--purple { background: #f5f3ff; border: 1.5px solid #7c3aed33; color: var(--purple); }
.section-tag--orange { background: #fff7ed; border: 1.5px solid #f9731633; color: var(--orange); }
.section-tag--pink   { background: #fdf2f8; border: 1.5px solid #e879a833; color: var(--pink); }


/* --- Section Title ---
   Large heading used in each section.
*/
.section-title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 16px;
}

/* --- Section Subtitle --- */
.section-sub {
  font-size: var(--text-md);
  color: var(--gray);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}


/* --- Gradient Text ---
   Makes text show a gradient color.
   Usage: <span class="grad-teal">word</span>
*/
.grad-teal {
  background: var(--grad-teal-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-purple {
  background: var(--grad-purple-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* --- BUTTONS ─────────────────────────────────────
   Reusable button styles used site-wide.
   .btn-primary  → teal-purple gradient (main CTA)
   .btn-outline  → white with border
   .btn-dark     → dark background (used in CTA section)
*/

/* Primary button: gradient fill */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--grad-primary);
  color: var(--white);
  font-family: var(--font-main);
  font-size: var(--text-base);
  font-weight: 700;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition), opacity var(--transition);
}
.btn-primary:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

/* Outline button: white with border */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-main);
  font-size: var(--text-base);
  font-weight: 600;
  padding: 13px 26px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition), transform var(--transition);
}
.btn-outline:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}

/* Dark button: for use on dark backgrounds */
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1e293b;
  color: var(--white);
  font-family: var(--font-main);
  font-size: var(--text-base);
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  border: 1px solid #334155;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition);
}
.btn-dark:hover {
  background: #334155;
}


/* --- Scroll Reveal Animation ---
   Cards fade in from below when scrolled into view.
   Applied by JS in main.js
*/
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}