/* ===========================================
   GLOBAL CSS VARIABLES & RESET
   =========================================== */

/* ===========================================
   GLOBAL CSS VARIABLES & RESET
   =========================================== */

:root {
  /* Brand Colors — Sky Blue Palette */
  --teal:        #38A9E4;   /* Primary — Sky Blue */
  --teal-dark:   #2589C4;
  --teal-deep:   #1B658F;
  --teal-light:  #EAF6FD;   /* Soft sky-blue surface */
  --teal-mid:    #8FD1F2;
  --navy:        #1E3A48;   /* Deep blue-charcoal, tuned to sky blue */
  --green:       #6FB98F;   /* Calming Sage Green, cooled slightly to sit with sky blue */
  --green-dark:  #4E9370;
  --green-light: #EFF7F2;
  --orange:      #F0975E;   /* Warm accent for CTAs — brightened to contrast sky blue */
  --orange-dark: #D97A3E;
  --gold:        #E7B96A;   /* Warm Sand, kept as a warm counterpoint to sky blue */

  /* Neutrals */
  --white:      #ffffff;
  --bg-soft:    #FAF9F6;   /* Aesthetic Pearl / Off-White background */
  --bg-lighter: #FDFDFD;
  --border:     #E3E1DE;
  --border-light:#F0EFEA;

  /* Text — black everywhere on light backgrounds */
  --text:       #000000;
  --text-mid:   #000000;
  --text-muted: #000000;
  --text-light: #1a1a1a;

  /* Shadows (Very soft, warm-tinted shadows) */
  --shadow-xs: 0 1px 4px rgba(42, 44, 46, 0.04);
  --shadow-sm: 0 4px 14px rgba(42, 44, 46, 0.06);
  --shadow-md: 0 8px 28px rgba(42, 44, 46, 0.08);
  --shadow-lg: 0 12px 48px rgba(42, 44, 46, 0.12);

  /* Radii (Slightly softer curves for an aesthetic feel) */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  50px;

  /* Transitions */
  --t: .25s ease;
}
/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 17px; }
body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  letter-spacing: .1px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4,
.sec-title, .navbar__logo-text .brand-name,
.hero__title {
  font-family: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', Arial, sans-serif;
  letter-spacing: -.2px;
}
p    { text-align: justify; text-justify: inter-word; }
a    { text-decoration: none; color: inherit; }
img  { max-width: 100%; display: block; }
ul   { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; }
input, select, textarea { font-family: inherit; outline: none; }

/* === LAYOUT === */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 64px 0; }

/* === TYPOGRAPHY UTILITIES === */
.sec-title {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 800;
  color: var(--text);
  text-align: center;
  line-height: 1.25;
  letter-spacing: -.3px;
  margin-bottom: 10px;
}
.sec-sub {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-muted);
  text-align: center;
  max-width: 620px;
  margin: 0 auto 40px;
  line-height: 1.75;
}

/* === BUTTON UTILITIES === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--r-xl);
  font-size: 16px;
  font-weight: 700;
  transition: background var(--t), transform var(--t), color var(--t);
  cursor: pointer;
  border: none;
}
.btn-teal   { background: var(--teal);   color: #fff; }
.btn-teal:hover { background: var(--teal-dark); transform: translateY(-1px); }
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: var(--orange-dark); }
.btn-outline {
  background: transparent;
  color: var(--teal);
  border: 2px solid var(--teal);
}

.btn-outline:hover {
  background: var(--teal);
  color: #fff;
}

.btn-teal {
  background: var(--teal);
  color: #fff;
}

.btn-teal:hover {
  background: var(--teal-dark);
  transform: translateY(-1px);
}


/* Center buttons on mobile */
@media (max-width: 700px) {
  .btn-outline,
  .btn-teal {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: center;
  }
}
/* === STAR RATING === */
.stars-filled { color: #f4b942; }
.stars-empty  { color: #ddd; }

/* ===========================================
   HOMEPAGE ANIMATIONS
   =========================================== */

/* Scroll-reveal: sections fade + slide up into view
   as the visitor scrolls (activated by app.js via
   IntersectionObserver, homepage only). */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
  .hero__rating, .hero__sub, .hero__form-card, .hero__title-word {
    animation: none; opacity: 1; transform: none;
  }
}

/* Hero entrance: title/subtitle/form stagger in on load */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__rating, .hero__sub, .hero__form-card {
  animation: heroFadeUp .8s cubic-bezier(.22,.61,.36,1) both;
}
.hero__rating    { animation-delay: .05s; }
.hero__sub       { animation-delay: .28s; }
.hero__form-card { animation-delay: .4s; }

/* Hero title: each word slides/fades up in sequence (see Hero.js) */
.hero__title-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  animation: heroWordUp .6s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes heroWordUp {
  from { opacity: 0; transform: translateY(60%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Gentle float used on stat icons / badges once revealed */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.stat-card__icon { animation: floatY 3.2s ease-in-out infinite; }
.stat-card:nth-child(2) .stat-card__icon { animation-delay: .3s; }
.stat-card:nth-child(3) .stat-card__icon { animation-delay: .6s; }

/* ===========================================
   DISCOUNT HIGHLIGHT — shared blink/pulse effect
   used by the popup form and hero form promo notes
   =========================================== */
@keyframes discountBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(240,151,94,.45); }
  50%      { opacity: .78; box-shadow: 0 0 0 6px rgba(240,151,94,0); }
}
.discount-highlight {
  animation: discountBlink 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .discount-highlight { animation: none; }
}