@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Syne:wght@700;800&display=swap');

:root {
  --c-primary:      #1A6B8A;
  --c-primary-600:  #2589AD;
  --c-primary-400:  #4DB8D9;
  --c-primary-100:  #E3F4FA;
  --c-primary-50:   #F0FAFF;
  --c-accent:       #E07B39;
  --c-accent-dark:  #C05E1F;
  --c-accent-light: #F5A66A;
  --c-accent-100:   #FEF0E7;
  --c-hope:         #27AE60;
  --c-hope-100:     #E8F8EF;
  --c-purple:       #7B5EA7;
  --c-purple-100:   #F3EEFB;
  --c-danger:       #E53E3E;
  --c-bg:           #F5F8FA;
  --c-bg-alt:       #EDF2F7;
  --c-surface:      #FFFFFF;
  --c-border:       #D8E6EF;
  --c-text-100:     #1A2A3A;
  --c-text-300:     #2D4A5F;
  --c-text-500:     #4A6580;
  --c-text-700:     #8AAABB;
  --c-dark:         #0D2233;
  --c-dark-2:       #132B40;
  --font-heading:   'Plus Jakarta Sans', sans-serif;
  --font-body:      'Inter', sans-serif;
  --font-display:   'Syne', sans-serif;
  --container-max:  1320px;
  --container-pad:  clamp(1rem, 4vw, 2.5rem);
  --navbar-h:       72px;
  --section-py:     clamp(3.5rem, 7vw, 5.5rem);
  --radius-sm:      6px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --radius-xl:      28px;
  --radius-full:    9999px;
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:      0 12px 40px rgba(0,0,0,0.12);
  --shadow-primary: 0 8px 32px rgba(26,107,138,0.30);
  --shadow-accent:  0 8px 32px rgba(224,123,57,0.35);
  --transition:     all 0.25s cubic-bezier(0.4,0,0.2,1);
  --transition-slow:all 0.4s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  color: var(--c-text-100);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); line-height: 1.2; font-weight: 700; color: var(--c-text-100); }

.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.section { padding-block: var(--section-py); }
.section--dark { background: var(--c-dark); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4 { color: #fff; }
.section--dark p { color: rgba(255,255,255,0.75); }
.section--alt { background: var(--c-bg-alt); }
.section--teal { background: var(--c-primary-50); }
.section--primary { background: var(--c-primary); }

.section-header { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: 3rem; }
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c-primary); margin-bottom: 0.75rem;
  font-family: var(--font-heading);
}
.section-eyebrow::before,.section-eyebrow::after { content:''; width:20px; height:2px; background:var(--c-primary-400); border-radius:2px; }
.section-eyebrow--white { color:rgba(255,255,255,0.8); }
.section-eyebrow--white::before,.section-eyebrow--white::after { background:rgba(255,255,255,0.3); }
.section-eyebrow--accent { color:var(--c-accent); }
.section-eyebrow--accent::before,.section-eyebrow--accent::after { background:var(--c-accent-light); }
.section-title { font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 800; margin-bottom: 1rem; line-height:1.2; }
.section-title .hl { color: var(--c-primary); }
.section-title--white { color: #fff; }
.section-title--white .hl { color: var(--c-primary-400); }
.section-desc { font-size: 1.05rem; color: var(--c-text-500); line-height: 1.8; }
.section-desc--white { color: rgba(255,255,255,0.72); }

.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.flex { display:flex; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.flex-col { display:flex; flex-direction:column; }
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}
.text-center{text-align:center}.text-white{color:#fff}.text-primary{color:var(--c-primary)}.text-accent{color:var(--c-accent)}

[data-reveal] { opacity:0; transform:translateY(28px); transition:opacity 0.65s cubic-bezier(0.4,0,0.2,1),transform 0.65s cubic-bezier(0.4,0,0.2,1); }
[data-reveal].revealed { opacity:1; transform:translateY(0); }
[data-reveal="left"] { transform:translateX(-28px); }
[data-reveal="left"].revealed { transform:translateX(0); }
[data-reveal="right"] { transform:translateX(28px); }
[data-reveal="right"].revealed { transform:translateX(0); }
[data-reveal-delay="100"]{transition-delay:.1s}[data-reveal-delay="200"]{transition-delay:.2s}
[data-reveal-delay="300"]{transition-delay:.3s}[data-reveal-delay="400"]{transition-delay:.4s}
[data-reveal-delay="500"]{transition-delay:.5s}[data-reveal-delay="600"]{transition-delay:.6s}

.back-to-top {
  position:fixed; bottom:1.5rem; right:1.5rem; width:46px; height:46px;
  background:var(--c-primary); color:#fff; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); opacity:0; transform:translateY(12px);
  transition:var(--transition); z-index:900;
}
.back-to-top.visible { opacity:1; transform:translateY(0); }
.back-to-top:hover { background:var(--c-primary-600); transform:translateY(-2px); }

.marquee-wrapper { overflow:hidden; white-space:nowrap; }
.marquee-track { display:inline-flex; animation:marquee 35s linear infinite; }
.marquee-track:hover { animation-play-state:paused; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

.skip-link { position:absolute; top:-100%; left:0; padding:.75rem 1.5rem; background:var(--c-primary); color:#fff; font-weight:600; z-index:9999; border-radius:0 0 var(--radius-md) 0; }
.skip-link:focus { top:0; }

@media(max-width:1024px) { .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)} }
@media(max-width:768px) { :root{--section-py:3rem} .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} .section-header{margin-bottom:2rem} }
