:root{
    /* Colours */
    --background: #F8FAFD;
    --button-bg: #1F2A44;
    --callout-bg: #ECF3FF;
    --callout-card-bg: #FAFAFA;
    --text-primary: #000000;
    --text-secondary: #1F2A44;
    --text-muted: #A9AEBB;
    --text-inverse: #FFFFFF;
    --accent-primary: #4A7CEB;
    --accent-secondary: #7ED4C1;
    --border: #1F2A44;
    --shadow: #000000;

    /* Spacing scale (px) */
    --space-0: 4px;
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;

    /* Typography */
    --font: 'Manrope', sans-serif;
    --fs-xxl: 64px;
    --fs-xl: 48px;
    --fs-lg: 32px;
    --fs-md: 24px;
    --fs-sm: 16px;

    /* Radius */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;

    /* Breakpoints */
    --bp-sm: 640px;
    --bp-md: 1024px;
    --bp-lg: 1280px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font);
  color:var(--text-primary);
  background:var(--background);
  margin:0;
  line-height:1.45;
  font-size:var(--fs-md);
  padding-top: 95px; /* To offset fixed header height */
}

/* Container utility */
.container{
  max-width:1240px;
  margin: 0 auto;
  display: flex;
  width: 100%;
  justify-content: center;
  padding-left:var(--space-2);
  padding-right:var(--space-2);
}

@media(min-width:640px){
  .container{
    padding-left:var(--space-3);
    padding-right:var(--space-3);
  }
}

/* ============================================
   Scroll Animation Styles
   ============================================ */

/* Initial state: Hidden and slightly moved down */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animated state: Visible and in original position */
.animate-on-scroll.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}