/* ===== Global Reset / Base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.25;
  background: var(--color-bg);
  color: var(--color-white);
  text-rendering: optimizeLegibility;
}

/* ===== Design Tokens ===== */
:root {
  /* Colors (from your Figma sheet) */
  --color-bg: #6E767B;        /* main light background */
  --color-bg-light: #eeedf1;    /* main light background */
  --color-surface: #3d4448;   /* panels, cards */
  --color-purple: #361e63;    /* button / accent 1 */
  --color-blue: #00aae3;      /* button / accent 2 */
  --color-teal: #008ea0;      /* alt accent */
  --color-green: #69bd45;     /* success / CTA alt */
  --color-gray: #8c9397;      /* body-muted */
  --color-gray-light: #dfe1e5;
  --color-offwhite: #f0f1f4;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-dark-blue:#1f2a86;

  /* Typography */
  --font-heading: "din-2014", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "din-2014", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Type scale (from screenshot) */
  --fs-h1: 3.875rem; /* 62px */
  --fs-h2: 3.25rem;  /* 52px */
  --fs-h3: 2.625rem; /* 42px */
  --fs-h4: 2rem;     /* 32px */
  --fs-h5: 1.75rem;  /* 28px */
  --fs-h6: 1.375rem; /* 22px-ish */
  --fs-body-lg: 1.25rem; /* 20px */
  /* --fs-body: 1rem;       16px */

  /* Line heights (your Figma shows 110% on big heads, 120-125% small) */
  --lh-tight: 1.1;
  --lh-normal: 1.25;
  --lh-relaxed: 1.4;

  /* Spacing */
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-60: 3.75rem;

  /* Container */
  --container: min(1180px, 100% - 3rem);

  /* Radius */
  --radius-6: 6px;
  --radius-pill: 999px;

  /* Shadow (optional) */
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.15);
}

/* ===== Layout helpers ===== */
.wrapper,
.container {
  width: var(--container);
  margin: 0 auto;
}

/* ===== Typography ===== */
h1, .heading-1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-20);
}
h2, .heading-2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-16);

}
h3, .heading-3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-16);

}
h4, .heading-4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.2;
  margin: 0 0 var(--space-12);
}
h5, .heading-5 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h5);
  line-height: 1.2;
  margin: 0 0 var(--space-12);
}
h6, .heading-6 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h6);
  line-height: 1.2;
  margin: 0 0 var(--space-12);
}

p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  margin: 0 0 var(--space-16);
  color: var(--color-black);
}

.small {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-gray);
}

.color-purple{
    color: #272672;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.6rem;
  border-radius: var(--radius-pill);
  border: none;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.btn:active {
  transform: translateY(1px);
}

.btn--purple {
  background: var(--color-purple);
  color: #fff;
}
.btn--blue {
  background: var(--color-blue);
  color: #fff;
}
.btn--ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
}

.btn--purple:hover,
.btn--blue:hover {
  box-shadow: var(--shadow-sm);
}

/* ===== Sections ===== */
.section {
  padding: var(--space-60) 0;
}
.section--dark {
  background: var(--color-bg);
}
.section--surface {
  background: var(--color-surface);
}

.section--light {
  background: var(--color-bg-light);
}

.section--blue{
  background: var(--color-dark-blue) !important;
}

/* ===== Utilities ===== */
.text-muted { color: var(--color-gray); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-16 { margin-bottom: var(--space-16); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-40 { margin-bottom: var(--space-40); }

/* ===== Responsive tweaks ===== */
@media (max-width: 1024px) {
  :root {
    --fs-h1: 3.25rem;
    --fs-h2: 2.75rem;
    --fs-h3: 2.25rem;
  }
  .wrapper,
  .container {
    width: min(100%, 100% - 2rem);
  }
}

@media (max-width: 640px) {
  :root {
    --fs-h1: 2.5rem;
    --fs-h2: 2.1rem;
    --fs-h3: 1.85rem;
    --fs-body-lg: 1.05rem;
  }
  .section {
    padding: 2.5rem 0;
  }
  .btn {
    width: 100%;
    justify-content: center;
  }
}