:root {
  --color-accent:#2fa6e8; --color-accent-600:#1f8fd0; --color-accent-700:#166ea6; --color-accent-800:#104f78; --color-accent-100:#dceffb;
  --color-accent-2:#e23b2e; --color-accent-2-700:#a11f18; --color-accent-2-800:#761410; --color-accent-2-100:#ffe1de;
  --band:#dceffb; --band-warm:#f4e7c4;
  --color-bg:#eef6fc; --color-surface:#ffffff; --color-text:#12303f;
  --color-divider: color-mix(in srgb, #12303f 14%, transparent);
  --joy-green:#2f8f5b; --joy-gold:#c1902b;
}
html[data-theme="dark"] {
  --color-bg:#0e2233; --color-surface:#173347; --color-text:#eaf4fb;
  --color-divider: color-mix(in srgb, #eaf4fb 16%, transparent);
  --color-accent:#4fb8f2; --color-accent-600:#2fa6e8; --color-accent-700:#8fd3f7; --color-accent-800:#cbe9fb; --color-accent-100:#1c405a;
  --color-accent-2:#ff5a4d; --color-accent-2-700:#ffb3ac; --color-accent-2-800:#ffd7d3; --color-accent-2-100:#4a2320;
  --band:#122c40; --band-warm:#33231f;
  --joy-green:#5cb884; --joy-gold:#e0b654;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow-md:0 4px 16px rgba(0,0,0,.5); --shadow-lg:0 18px 44px rgba(0,0,0,.6);
}
html, body { background: var(--color-bg); }
body { margin:0; color: var(--color-text); font-family: var(--font-body); font-size:16px; }
html, body, * { transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
a { cursor:pointer; }
.wrap { max-width:1080px; margin:0 auto; padding:0 40px; }
.blob { border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; overflow:hidden; }
.washed { filter: saturate(1.02) contrast(0.96) brightness(1.04) opacity(1); }
.washed.rich { filter: saturate(1.12) contrast(0.98) brightness(1.03) opacity(1); }
.icon { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2.75; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.eyebrow { font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent-700); font-weight:700; margin:0 0 16px; }
html[data-theme="dark"] .eyebrow { color: var(--color-accent); }
.navlink { color:inherit; text-decoration:none; font-size:15px; padding:6px 4px; }
.navlink:hover { color:var(--color-accent); }
.navlink[aria-current="page"] { color:var(--color-accent); font-weight:700; }
.stat-num { font-size:56px; line-height:1; font-family:var(--font-heading); color:var(--color-accent); }
.stat-num.red { color:var(--color-accent-2); }
.stat-num.green { color:var(--joy-green); }
.stat-num.gold { color:var(--joy-gold); }
.stat-lbl { font-size:14px; color:color-mix(in srgb,var(--color-text) 72%, transparent); margin-top:8px; }
.amt { flex:1; justify-content:center; }
.amt:hover { background:var(--color-accent-100); border-color:var(--color-accent); }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@media (prefers-reduced-motion: reduce) { .blob { animation:none !important; } }

/* theme toggle icon/label swap */
.btn .i-sun { display:none; }
.btn .i-moon { display:block; }
.lbl-light { display:none; }
.lbl-dark { display:inline; }
html[data-theme="dark"] .btn .i-sun { display:block; }
html[data-theme="dark"] .btn .i-moon { display:none; }
html[data-theme="dark"] .lbl-light { display:inline; }
html[data-theme="dark"] .lbl-dark { display:none; }

/* mobile nav toggle */
#navToggle { display:none; background:none; border:0; color:inherit; cursor:pointer; padding:8px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .wrap { padding:0 28px; }
  h1 { font-size:44px !important; }
  h2 { font-size:32px !important; }
  section[style*="grid-template-columns"], main > div[style*="grid-template-columns"],
  .card[style*="grid-template-columns"], div[style*="grid-template-columns:1fr 1fr"],
  [style*="repeat(3,1fr)"], .grid-3 {
    grid-template-columns: 1fr !important;
  }
  [style*="repeat(4,1fr)"], .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .card[style*="flex-direction:row"], .card[style*="flex-direction:row-reverse"] { flex-direction:column !important; }
  .stat-num { font-size:44px; }
}
@media (max-width: 860px) {
  #navToggle { display:block; }
  #siteNav { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start;
    background:var(--color-bg); border-bottom:1px solid var(--color-divider); padding:16px 28px 22px; gap:14px; }
  #siteNav.open { display:flex; }
  .hdr-cta { display:none; }
  .grid-3, [style*="repeat(3,1fr)"] { grid-template-columns:1fr !important; }
}
@media (max-width: 560px) {
  .wrap { padding:0 20px; }
  h1 { font-size:34px !important; }
  .amt-row { flex-wrap:wrap; }
  .card[style*="padding:56px"], .card[style*="padding:48px"] { padding:28px !important; }
  div[style*="padding:44px"] { padding:24px !important; }
}
@media (max-width: 560px) {
  [style*="repeat(4,1fr)"], .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
}

/* ═══════════ cross-document view transitions ═══════════
   Chrome/Edge/Safari animate between pages; Firefox simply navigates normally. */
@view-transition { navigation: auto; }

header { view-transition-name: site-header; }
footer { view-transition-name: site-footer; }
main   { view-transition-name: page-main; }

/* the chrome stays put; only the page body cross-fades and lifts */
::view-transition-old(page-main) { animation: vt-out .20s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(page-main) { animation: vt-in  .32s cubic-bezier(0,0,.2,1) both; }
@keyframes vt-out { to   { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(12px); } }

/* header/footer hold still rather than cross-fading against themselves */
::view-transition-old(site-header), ::view-transition-new(site-header),
::view-transition-old(site-footer), ::view-transition-new(site-footer) {
  animation: none; mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(page-main), ::view-transition-new(page-main) { animation: none; }
}