:root, html.dark {
      --dark-or:#ff7426;
      --dark-or2:#9d3800;
      --color-background:               #0d0f14;
      --color-surface:                  #0d0f14;
      --color-surface-dim:              #0d0f14;
      --color-surface-bright:           #2e3240;
      --color-surface-container-lowest: #080a0e;
      --color-surface-container-low:    #151820;
      --color-surface-container:        #1a1d28;
      --color-surface-container-high:   #222535;
      --color-surface-container-highest:#2a2e3f;
      --color-surface-variant:          #2a2e3f;
      --color-on-surface:               #e2e4f0;
      --color-on-surface-variant:       #9ea4bc;
      --color-on-background:            #e2e4f0;
      /* --color-primary:                  #7b9fff; */
      --color-primary:                  #0535b0; 
      /* --color-on-primary:               #001553; */
      --color-on-primary:               #ffffff;
      --color-primary-container:        #3d6bff;
      --color-on-primary-container:     #d0deff;
      --color-secondary:                #b45309;
      --color-on-secondary:             #003734;
      --color-secondary-container:      #00635e;
      --color-on-secondary-container:   #8af2eb;
      --color-tertiary:                 #ff8fa3;
      --color-on-tertiary:              #5c0015;
      --color-tertiary-container:       #e03a5a;
      --color-error:                    #ffb4ab;
      --color-on-error:                 #690005;
      --color-error-container:          #93000a;
      --color-outline:                  #5d6478;
      --color-outline-variant:          #343848;
      --color-inverse-surface:          #e2e4f0;
      --color-inverse-on-surface:       #282c3a;
      --color-inverse-primary:          #0535b0;
      --glass-bg:     rgba(13, 15, 20, 0.75);
      --glass-border: rgba(255, 255, 255, 0.07);
      --body-bg:      #080a0e;
    }
    html:not(.dark) {
      --color-background:               #f8f9ff;
      --color-surface:                  #f8f9ff;
      --color-surface-dim:              #d6d8e8;
      --color-surface-bright:           #f8f9ff;
      --color-surface-container-lowest: #ffffff;
      --color-surface-container-low:    #f3f3f3;
      --color-surface-container:        #eaecf5;
      --color-surface-container-high:   #e4e6ef;
      --color-surface-container-highest:#dedfe9;
      --color-surface-variant:          #dde0ec;
      --color-on-surface:               #181c28;
      --color-on-surface-variant:       #43475a;
      --color-on-background:            #181c28;
      --color-primary:                  #0535b0;
      --color-on-primary:               #ffffff;
      --color-primary-container:        #c8d5ff;
      --color-on-primary-container:     #00165a;
      --color-secondary:                #b45309;
      --color-on-secondary:             #ffffff;
      --color-secondary-container:      #8af2eb;
      --color-on-secondary-container:   #002020;
      --color-tertiary:                 #8e2c4a;
      --color-on-tertiary:              #ffffff;
      --color-tertiary-container:       #ffd9e1;
      --color-error:                    #ba1a1a;
      --color-on-error:                 #ffffff;
      --color-error-container:          #ffdad6;
      --color-outline:                  #737688;
      --color-outline-variant:          #c3c6d8;
      --color-inverse-surface:          #2d3040;
      --color-inverse-on-surface:       #eef0fb;
      --color-inverse-primary:          #adc6ff;
      --glass-bg:     rgba(255,255,255,0.72);
      --glass-border: rgba(0,0,0,0.07);
      --body-bg:      #ffffff;
    }

    
    
    *, *::before, *::after {
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    body { background-color: var(--body-bg); color: var(--color-on-surface); font-family: 'Inter', sans-serif; }
    .glass-card {
      background: var(--glass-bg);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--glass-border);
    }
    /* .text-gradient {
      background: linear-gradient(135deg, var(--color-secondary) 0%, var(--dark-or) 60%, var(--dark-or2) 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    } */

    .text-gradient {
      background: linear-gradient(135deg, #ff5f1f 0%, #ff7426 20%, #ff8a2b 40%, #ff9d3f 60%, #ffb85c 80%, #ffd08a 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: inline-block;
      filter: saturate(135%) contrast(105%);
      text-shadow: 0 2px 14px rgba(255, 120, 30, .12);
}
    .aurora-gradient { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-tertiary) 100%); }
    .glow-primary { box-shadow: 0 0 40px rgba(123,159,255,0.18); }
    .glow-secondary { box-shadow: 0 0 40px rgba(109,212,205,0.15); }

 #theme-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: transparent;
      cursor: pointer;
      padding: 0;
      transition: background 0.2s;
    }
    #theme-toggle:hover {
      background: rgba(128,128,128,0.15);
    }
    #theme-icon {
      font-size: 22px;
      line-height: 1;
      display: block;
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
      /* Ensure no inherited styles break Material Symbols rendering */
      font-family: 'Material Symbols Outlined', sans-serif !important;
      color: inherit;
      user-select: none;
    }

    #theme-toggle {
     position: relative;
    width: 52px;
    height: 28px;
    border-radius: 9999px;
    padding: 0;
    background: var(--color-surface-container-high);
    border: 1.5px solid var(--color-outline-variant);
    cursor: pointer;
    flex-shrink: 0;
    }
    #theme-toggle .toggle-thumb {
      position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 9999px;
      background: var(--color-primary); display: flex; align-items: center; justify-content: center;
      transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), background 0.3s ease;
    }
    html.dark #theme-toggle .toggle-thumb { transform: translateX(24px); }
    #theme-toggle .toggle-thumb .material-symbols-outlined { font-size: 13px; color: var(--color-on-primary); transition: none; }
    /* #theme-toggle > span { display: none !important; } */
    .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
    .section-fade { animation: fadeUp 0.6s ease both; }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
    .card-hover { transition: transform 0.25s ease, box-shadow 0.25s ease; }
    .card-hover:hover { transform: translateY(-5px); }
    .pulse-dot { animation: pulse 2s ease-in-out infinite; }
    @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } }


    
#theme-toggle{
  width:30px;
  height:30px;
  border:none;
  border-radius:50px;
  /* background:#e5e7eb; */
  position:relative;
  cursor:pointer;
  padding:4px;
  display:flex;
  align-items:center;
}

.toggle-thumb{
  width:24px;
  height:24px;
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
  transition:0.3s;
}

    
    .text-gradient2 {
    background: linear-gradient(135deg, #0535b0 0%, #00165a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Dark mode needs brighter stops — the navy gradient vanishes on near-black */
html.dark .text-gradient2 {
    background: linear-gradient(135deg, #8caaff 0%, #5d83ff 55%, #3d6bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* In light mode white/10 borders are invisible — swap to a soft dark border.
   Scoped to light mode only so dark-mode glass borders keep their glow. */
html:not(.dark) .border-white\/10 {
    border-color: rgb(0 0 0 / 0.1)!important;
}

.txt {
  color: #f3f3f3!important;
}

.text-primary2 {
  color: #318d88!important;
}
.bg-primary2 {
  background-color: #318d88!important;
}

.text-gradient3 {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-gradient3 {
    background: linear-gradient(222deg, #318d88 0%, #267a76 20%, #1a5855 40%, #0d746f 60%, #0e857f 80%, #146e6a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    filter: saturate(135%) contrast(105%);
}

.aurora-gradient3 {
    background: linear-gradient(135deg, #318d88 0%, #02162a 100%);
}
.bg-blue-600 {
  background-color: #0535b0!important;
}
.bg-surface-container-low-2, .bg-surface-2{
  background-color: #f3f3f3!important;
}
.bg-surface-container-low-3, .bg-surface-3{
  background-color: #eff6f6!important;
}


.bg-surface-container-3 {
  background-color: #eff6f6!important;
}

.dark\:bg-white\/5:is(.dark *) {
  background-color: #0d0f14!important;
  border-color: rgb(256 256 256 / 0.3)!important;
}

.text-gradient4 {
    background: linear-gradient(135deg, #b45309 0%, #cb3909 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ═══════════════════════════════════════════════════════════════════
   PRO POLISH LAYER — typography, motion & responsive refinements
   Paired with assets/js/site.js (scroll reveals, count-ups, nav state)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Typography: original Inter stack (no display-font override) ── */
html { scroll-behavior: smooth; }
::selection { background: var(--color-primary); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-surface-container-lowest); }
::-webkit-scrollbar-thumb {
  background: var(--color-surface-container-highest);
  border-radius: 8px;
  border: 2px solid var(--color-surface-container-lowest);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-outline); }

/* ── Film-grain overlay (sits under modals, above page art) ──────── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Hero atmosphere ─────────────────────────────────────────────── */
:root, html.dark { --grid-line: rgba(140, 160, 255, .06); }
html:not(.dark)  { --grid-line: rgba(5, 53, 176, .055); }

body > section:first-of-type::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 25%, transparent 78%);
}

/* Ambient drift on the big blurred colour orbs */
section > div[class*="blur-["] {
  animation: orbDrift 20s ease-in-out infinite alternate;
}
section > div[class*="blur-["]:nth-of-type(2) {
  animation-duration: 26s;
  animation-delay: -9s;
}
@keyframes orbDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(48px, -36px, 0) scale(1.18); }
}

/* ── Navbar ──────────────────────────────────────────────────────── */
nav { transition: box-shadow .35s ease, background-color .35s ease; }
nav.nav-scrolled {
  box-shadow: 0 12px 36px -14px rgba(0, 0, 0, .35);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}

/* Animated underline on desktop menu links */
nav .lg\:flex > a {
  position: relative;
  padding-bottom: 2px;
}
nav .lg\:flex > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
nav .lg\:flex > a:hover::after { transform: scaleX(1); }

/* Mobile menu slide-in */
#mobile-menu:not(.hidden) { animation: menuIn .28s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Buttons: lift + sheen sweep ─────────────────────────────────── */
button[class*="bg-primary"], a[class*="bg-primary"],
button[class*="bg-secondary"], a[class*="bg-secondary"] {
  position: relative;
  overflow: hidden;
  transition:
    transform .25s cubic-bezier(.22, 1, .36, 1),
    box-shadow .25s ease, opacity .2s ease,
    background-color .3s ease, border-color .3s ease, color .3s ease;
}
button[class*="bg-primary"]:hover, a[class*="bg-primary"]:hover,
button[class*="bg-secondary"]:hover, a[class*="bg-secondary"]:hover {
  transform: translateY(-2px);
}
button[class*="bg-primary"]:active, a[class*="bg-primary"]:active,
button[class*="bg-secondary"]:active, a[class*="bg-secondary"]:active {
  transform: translateY(0) scale(.985);
}
button[class*="bg-primary"]::before, a[class*="bg-primary"]::before,
button[class*="bg-secondary"]::before, a[class*="bg-secondary"]::before {
  content: "";
  position: absolute;
  top: 0; left: -85%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  transition: left .65s ease;
  pointer-events: none;
}
button[class*="bg-primary"]:hover::before, a[class*="bg-primary"]:hover::before,
button[class*="bg-secondary"]:hover::before, a[class*="bg-secondary"]:hover::before {
  left: 135%;
}

button.glass-card, a.glass-card {
  transition:
    transform .25s cubic-bezier(.22, 1, .36, 1),
    box-shadow .25s ease, background-color .3s ease,
    border-color .3s ease, color .3s ease;
}
button.glass-card:hover, a.glass-card:hover { transform: translateY(-2px); }

/* ── Cards ───────────────────────────────────────────────────────── */
.card-hover {
  transition:
    transform .35s cubic-bezier(.22, 1, .36, 1),
    box-shadow .35s ease, background-color .3s ease,
    border-color .3s ease, color .3s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow:
    0 24px 48px -18px color-mix(in srgb, var(--color-primary) 28%, transparent),
    0 4px 14px rgba(0, 0, 0, .12);
}

/* Floating mini stat cards in heroes drift gently */
section .absolute.glass-card.card-hover {
  animation: floaty 7s ease-in-out infinite;
}
section .absolute.glass-card.card-hover:last-child { animation-delay: -3.5s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ── FAQ accordions ──────────────────────────────────────────────── */
details summary { user-select: none; }
details summary::-webkit-details-marker { display: none; }
details[open] > p, details[open] > div { animation: fadeUp .35s ease both; }

/* ── Stat numbers (count-up targets) ─────────────────────────────── */
.stat-counting { font-variant-numeric: tabular-nums; }

/* ── Scroll-reveal system (tagged by assets/js/site.js) ──────────── */
html.anim-ready .rv {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1),
    transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--rv-d, 0ms);
  will-change: opacity, transform;
}
html.anim-ready .rv.in {
  opacity: 1;
  transform: none;
}

/* ── Reduced motion: settle everything instantly ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  html.anim-ready .rv { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOTION ADDITIONS — brand colours unchanged (navy/blue scheme)
   ═══════════════════════════════════════════════════════════════════ */

/* Cinematic looping aurora behind the hero — three blended light
   fields slowly orbiting (24s loop). Pure CSS, no video asset; the
   global reduced-motion rule freezes it to a static first frame. */
body > section:first-of-type::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(38% 42% at 22% 28%, rgba(61, 107, 255, .13), transparent 70%),
    radial-gradient(34% 38% at 78% 18%, rgba(123, 159, 255, .09), transparent 70%),
    radial-gradient(46% 50% at 55% 85%, rgba(5, 53, 176, .14), transparent 72%);
  animation: auroraLoop 24s ease-in-out infinite;
  will-change: transform;
}
html:not(.dark) body > section:first-of-type::after {
  background:
    radial-gradient(38% 42% at 22% 28%, rgba(5, 53, 176, .08), transparent 70%),
    radial-gradient(34% 38% at 78% 18%, rgba(61, 107, 255, .06), transparent 70%),
    radial-gradient(46% 50% at 55% 85%, rgba(123, 159, 255, .07), transparent 72%);
}
@keyframes auroraLoop {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  33%  { transform: translate3d(4%, -3%, 0) rotate(2deg) scale(1.06); }
  66%  { transform: translate3d(-3%, 2%, 0) rotate(-2deg) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

/* Accent bar that draws across the card top on hover — uses the
   existing primary palette */
.card-hover { position: relative; }
.card-hover::after {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-container));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.card-hover:hover::after { transform: scaleX(1); }