/*
  More color on the site (David, 29 Oct 2026: "i wanted the website clean but you have
  taken it to extreme"). Loaded last on every page, so it sits over each page's own styles.
  Navy header, hero and footer; the page between stays white with its pale-blue fades,
  so no hard band cuts across the middle of a page. Cards, tiles and buttons get rounded
  corners and a soft blue shadow so they stand off the page. Blue only: no purple, no teal.
*/
:root {
  --tc-navy: #0a1f44;
  --tc-navy-2: #12306a;
  --tc-on-navy: #dbe7ff;
  --tc-on-navy-soft: #a9bfe6;
  --tc-blue: #1058e5;
  --tc-sky: #5aa9ff;
  --tc-lift: 0 1px 2px rgba(10, 31, 68, .06), 0 10px 28px -8px rgba(10, 31, 68, .16);
  --tc-lift-hover: 0 2px 4px rgba(10, 31, 68, .08), 0 18px 36px -10px rgba(16, 88, 229, .28);
  --tc-radius: 14px;
}

/* ── header ─────────────────────────────────────────────────────────────── */
body > header, .nx-head {
  background: var(--tc-navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}
body > header nav, body > header nav a, body > header .right, body > header .signin,
.nx-head .nx-nav a, .nx-head .nx-signin, .nx-head .nx-right { color: var(--tc-on-navy) !important; }
body > header nav a:hover, .nx-head .nx-nav a:hover, .nx-head .nx-nav a[aria-current] { color: #fff !important; }
body > header nav a::after { color: var(--tc-on-navy-soft) !important; }
body > header .logo, .nx-head .nx-logo { color: #fff !important; }
body > header .btn, .nx-head .nx-btn {
  background: var(--tc-blue) !important; color: #fff !important; border-radius: 10px !important;
}
body > header .btn:hover, .nx-head .nx-btn:hover { background: #2e8fff !important; }
.nx-head .nx-menu > summary { color: #fff !important; border-color: rgba(255, 255, 255, .25) !important; border-radius: 10px; }
.nx-head .nx-menu-panel { border-radius: 0 0 var(--tc-radius) var(--tc-radius); }

/* ── hero: navy with a blue glow, at the top of the page ──────────────────── */
.hero, section.deep:not(#next) {
  background:
    radial-gradient(900px 420px at 85% 0%, rgba(46, 143, 255, .35), transparent 70%),
    radial-gradient(700px 380px at 0% 100%, rgba(16, 88, 229, .28), transparent 70%),
    linear-gradient(180deg, var(--tc-navy) 0%, var(--tc-navy-2) 100%) !important;
  border-bottom: 0 !important;
}
section.deep:not(#next)::after { display: none !important; }
.hero h1, .hero h2, section.deep:not(#next) h1, section.deep:not(#next) h2 { color: #fff !important; }
.hero p, section.deep:not(#next) p, section.deep:not(#next) li { color: var(--tc-on-navy) !important; }
.hero .accent, .hero h1 em, section.deep:not(#next) h1 em {
  color: var(--tc-sky) !important; -webkit-text-fill-color: var(--tc-sky) !important; background: none !important;
}
.hero .label, .hero .pill, section.deep:not(#next) .pill {
  color: var(--tc-sky) !important; -webkit-text-fill-color: var(--tc-sky) !important; background: none !important;
}
section.deep:not(#next) .pill::before { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.hero .btn, section.deep:not(#next) .btn { background: var(--tc-blue) !important; color: #fff !important; }
.hero .btn:hover, section.deep:not(#next) .btn:hover { background: #2e8fff !important; }
.hero .btn.ghost, section.deep:not(#next) .btn.ghost {
  background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .45) !important;
}
.hero a:not(.btn), section.deep:not(#next) a:not(.btn) { color: var(--tc-sky) !important; }
.hero .dash { opacity: .9; }

/* ── cards, tiles and panels stand off the page ───────────────────────────── */
.card, .tile, .aud, .stats div, .feature, .nx-panel, .paper, .proof div, .cta, .panel, .tabs {
  border-radius: var(--tc-radius) !important;
}
.card, .tile, .aud, .stats div, .feature, .nx-panel {
  box-shadow: var(--tc-lift) !important;
  border-color: #dfe8f5 !important;
  transition: box-shadow .25s ease, transform .25s ease;
}
.aud:hover, .feature:hover, .tile:hover { box-shadow: var(--tc-lift-hover) !important; }
.panel, .tabs, .cta { overflow: hidden; }
.tabs ul { border-radius: var(--tc-radius) 0 0 var(--tc-radius); }
.btn, .chip, .tag { border-radius: 10px !important; }
.proof div { border-top: 3px solid var(--tc-blue) !important; border-radius: 0 !important; }

/* ── footer ─────────────────────────────────────────────────────────────── */
body > footer, .nx-foot {
  background: var(--tc-navy) !important; border-top: 0 !important; color: var(--tc-on-navy) !important;
}
body > footer h4, .nx-foot h4 { color: var(--tc-on-navy-soft) !important; }
body > footer li, body > footer a, .nx-foot a, .nx-foot li { color: var(--tc-on-navy) !important; }
body > footer a:hover, .nx-foot a:hover { color: #fff !important; }
body > footer .logo, .nx-foot .nx-logo { color: #fff !important; }

@media (max-width: 820px) {
  .tabs ul { border-radius: var(--tc-radius) var(--tc-radius) 0 0; }
}