@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Poppins:wght@400;500;600;700;800&family=Roboto+Slab:wght@400;500&display=swap');

:root {
  --color-primary: #6EC1E4;
  --color-primary-dark: #3c8cbc;
  --color-navy: #1C244B;
  --color-dark-blue: #29335C;
  --color-green: #0BBB38;
  --color-orange: #F78816;
  --color-text: #3E3E3E;
  --color-text-light: #7A7A7A;
  --color-bg: #FFFFFF;
  --color-bg-light: #F6F6F6;
  --color-bg-very-light: #F5F8FB;
  --color-border: #DBDBDB;
  --color-border-light: #EEEEEE;

  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --font-secondary: 'Roboto Slab', serif;

  --container-max: 1140px;
  --radius: 8px;
  --radius-sm: 4px;
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 30px rgba(0,0,0,0.14);
  --transition: 0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--color-text); background: var(--color-bg); }

h1 { font-size: 2.5rem; font-weight: 600; line-height: 1.3; color: var(--color-text); }
h2 { font-size: 2rem; font-weight: 600; color: var(--color-text); }
h3 { font-size: 1.5rem; font-weight: 600; color: var(--color-text); }
h4 { font-size: 1.25rem; font-weight: 600; color: var(--color-text); }

p { margin-bottom: 1rem; color: var(--color-text-light); }
a { color: var(--color-primary-dark); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary); }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section--light { background: var(--color-bg-light); }
.section--very-light { background: var(--color-bg-very-light); }
.section--navy { background: var(--color-navy); color: white; }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy p { color: white; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius);
  font-family: var(--font-heading); font-size: 16px; font-weight: 600;
  cursor: pointer; border: 2px solid transparent;
  transition: all var(--transition); text-decoration: none;
}
.btn--primary { background: var(--color-primary); color: white; }
.btn--primary:hover { background: var(--color-primary-dark); color: white; }
.btn--outline { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: white; }
.btn--navy { background: var(--color-navy); color: white; }
.btn--navy:hover { background: var(--color-dark-blue); color: white; }
.btn--white { background: white; color: var(--color-navy); }
.btn--white:hover { background: var(--color-bg-light); color: var(--color-navy); }

.badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; background: var(--color-primary); color: white; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.card { background: white; border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px; transition: box-shadow var(--transition); }
.card:hover { box-shadow: var(--shadow-hover); }

.divider { height: 3px; width: 60px; background: var(--color-primary); margin: 16px 0 24px; }
.divider--center { margin-left: auto; margin-right: auto; }

.text-center { text-align: center; }
.text-white { color: white !important; }
.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-40 { margin-bottom: 40px; }
.mt-40 { margin-top: 40px; }

@media (max-width: 1024px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding: 48px 0; }
}