/* Noventech brand layer — overrides Nocturne's violet accent with the brand
   kit's blue ramp and near-black navy ground. Loaded after styles.css. */
:root {
  /* Section rhythm. Keyed to viewport WIDTH, not height: the pages previously
     used four near-duplicate height-keyed clamps (5vh/56, 6vh/72, 9vh/96,
     9vh/100), so gaps read as 99/81/81 on a 900px-tall window and 128/96/100
     on a tall one — uneven, and re-flowing whenever the window was resized
     vertically. One width-keyed token gives every section the same gap and
     holds it steady through a resize. At 1440px this resolves to ~89px, which
     is inside the range the pages were already using. */
  --nv-sec: clamp(56px, 6.2vw, 92px);
  --nv-hero-top: clamp(44px, 5.4vw, 80px);
  /* Light brand system, taken from the Noventech brand kit: navy ink #0b1226
     (the lockup), brand blue #144feb -> #3f98f4 (the mark's gradient) and the
     kit's slate tagline grey. White is the ground; blue is the accent. */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-section: #f4f7fc;
  --color-section-glow: #e8effc;
  --color-text: #0b1226;
  --color-divider: rgba(11, 18, 38, 0.1);

  --nv-ink: #0b1226;
  --nv-slate: #5b6478;
  --nv-offwhite: #f6f8fc;
  --nv-blue-deep: #0c339e;
  --nv-blue: #144feb;
  --nv-blue-mid: #2371ed;
  --nv-sky: #1f64e6;
  --nv-grad: linear-gradient(115deg, #144feb 0%, #2371ed 50%, #3f98f4 100%);
  --nv-grad-deep: linear-gradient(125deg, #0b1f6e 0%, #1240cf 55%, #2371ed 100%);

  --color-accent: #144feb;
  --color-accent-100: #eaf1ff;
  --color-accent-200: #cfdefd;
  --color-accent-300: #0f3fc4;
  --color-accent-400: #2371ed;
  --color-accent-500: #144feb;
  --color-accent-600: #0f3fc4;
  --color-accent-700: #dbe6fd;
  --color-accent-800: #e8effd;
  --color-accent-900: #f1f5fe;

  --color-accent-2-500: #3f98f4;
  --color-accent-2-700: #dbe6fd;
  --color-accent-2-900: #f1f5fe;

  --color-neutral-100: #0b1226;
  --color-neutral-200: #2a3350;
  --color-neutral-300: #5b6478;
  --color-neutral-700: #e3e8f1;
  --color-neutral-800: #eef2f8;
  --color-neutral-900: #f6f8fc;

  --shadow-sm: 0 1px 2px rgba(11, 18, 38, 0.05), 0 1px 1px rgba(11, 18, 38, 0.03);
  --shadow-md: 0 6px 18px rgba(11, 18, 38, 0.07), 0 1px 3px rgba(11, 18, 38, 0.05);
  --shadow-lg: 0 18px 44px rgba(11, 18, 38, 0.1), 0 2px 6px rgba(11, 18, 38, 0.05);
}

/* the mark, painted with the brand gradient through an alpha mask */
.nv-mark {
  display: inline-block;
  background: var(--nv-grad);
  -webkit-mask: url(logo-mask.png) no-repeat center / contain;
  mask: url(logo-mask.png) no-repeat center / contain;
}

.nv-grad-text {
  background: var(--nv-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ── shared cross-page primitives ────────────────────────────────────────
   These were previously duplicated in each page's own <style> block, which
   meant a new page silently rendered without them. They live here because
   every page already loads brand.css. */

/* section kicker: number, label, and a rule that fades out to the right */
.nv-kicker { display: flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 20px; }
.nv-kicker span[data-n] { font-feature-settings: 'tnum' 1; color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.nv-kicker::after { content: ""; flex: 1; height: 1px; max-width: 120px; background: linear-gradient(to right, color-mix(in srgb, var(--color-accent) 45%, transparent), transparent); }

/* magnetic glow: consumes --nv-mag (0..1), written by the [data-obj3d]
   pointer spring in site-fx.js. Without this rule the proximity response is
   computed and then thrown away. */
.nv-glow { opacity: calc(.4 + var(--nv-mag, 0) * .6); transition: none; }


/* ── light theme component layer ─────────────────────────────────────────
   Buttons: solid brand blue with white text for primary; white with a blue
   outline for ghost/secondary. No glow. Page-level .btn rules only add
   transitions and the hover sheen, so these win on colour. */
html, body { background: var(--color-bg); color: var(--color-text); }
::selection { background: #cfdefd; color: var(--nv-ink); }
a { color: var(--color-accent); }
a:hover { color: #0f3fc4 !important; }
.btn-primary, a.btn-primary { background: var(--nv-blue) !important; border-color: var(--nv-blue) !important; color: #ffffff !important; box-shadow: 0 1px 2px rgba(11,18,38,.08), 0 6px 16px rgba(20,79,235,.18); }
.btn-primary:hover, a.btn-primary:hover { background: #0f3fc4 !important; border-color: #0f3fc4 !important; color: #ffffff !important; }
.btn-primary i { color: inherit !important; }
.btn-ghost, a.btn-ghost, .btn-secondary, a.btn-secondary { background: #ffffff !important; border: 1px solid color-mix(in srgb, var(--nv-blue) 38%, transparent) !important; color: var(--nv-blue) !important; }
.btn-ghost:hover, a.btn-ghost:hover, .btn-secondary:hover, a.btn-secondary:hover { background: var(--color-accent-100) !important; border-color: var(--nv-blue) !important; color: #0f3fc4 !important; }

/* Cards: white, hairline border, soft neutral shadow, blue on hover. */
.nv-glass { background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: rgba(11,18,38,.09) !important; box-shadow: var(--shadow-md); }
.nv-glass:hover { border-color: color-mix(in srgb, var(--nv-blue) 45%, transparent) !important; box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--nv-blue) 22%, transparent) !important; }
.nv-cardlink::after { opacity: 0 !important; }

/* The mark keeps the brand gradient; gradient text is kept only for the
   handful of accent words that already used it. */
.nv-glow { opacity: calc(.25 + var(--nv-mag, 0) * .35); }

/* Blue sections. A section opts in with data-nv-blue; inside it the tokens
   flip so every existing inline style (which reads the tokens) turns white
   on blue without touching its markup. */
[data-nv-blue] {
  background: var(--nv-grad-deep) !important;
  --color-text: #ffffff;
  --color-divider: rgba(255,255,255,.18);
  --color-surface: rgba(255,255,255,.07);
  --color-accent: #ffffff;
  --color-accent-300: #dbe6fd;
  --nv-sky: #cfe0ff;
  --color-neutral-100: #ffffff;
  --color-neutral-200: #e6edfb;
  --color-neutral-300: #c9d6f3;
  --color-accent-200: #ffffff;
  --color-accent-400: #ffffff;
  --color-accent-500: #ffffff;
  color: #ffffff;
}
[data-nv-blue] i.ph, [data-nv-blue] svg { color: #ffffff; }
[data-nv-blue] .nv-glass { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.18) !important; box-shadow: none; }
[data-nv-blue] .nv-glass:hover { background: rgba(255,255,255,.11) !important; border-color: rgba(255,255,255,.4) !important; box-shadow: none !important; }
[data-nv-blue] .btn-primary, [data-nv-blue] a.btn-primary { background: #ffffff !important; border-color: #ffffff !important; color: var(--nv-blue) !important; box-shadow: none; }
[data-nv-blue] .btn-primary:hover, [data-nv-blue] a.btn-primary:hover { background: #eaf1ff !important; color: #0f3fc4 !important; }
[data-nv-blue] .btn-ghost, [data-nv-blue] a.btn-ghost, [data-nv-blue] .btn-secondary, [data-nv-blue] a.btn-secondary { background: transparent !important; border-color: rgba(255,255,255,.5) !important; color: #ffffff !important; }
[data-nv-blue] a:hover { color: #ffffff !important; }
[data-nv-blue] .nv-grad-text { background: none; color: #ffffff; -webkit-text-fill-color: #ffffff; }
[data-nv-blue] .nv-mark { background: #ffffff; }


/* ── depth pass: every surface gets a visible edge on white ─────────────── */
body { background: radial-gradient(1000px 640px at 88% -160px, rgba(20,79,235,.075), transparent 70%) no-repeat, radial-gradient(760px 520px at -8% 380px, rgba(63,152,244,.05), transparent 70%) no-repeat, #ffffff !important; }

/* cards: off-white lift, blue-tinted hairline, soft neutral shadow */
.nv-glass { background: linear-gradient(180deg, #ffffff 0%, #f6f9fe 100%) !important; border: 1px solid rgba(20,79,235,.13) !important; box-shadow: 0 1px 2px rgba(11,18,38,.04), 0 10px 28px rgba(11,18,38,.06), inset 0 1px 0 #ffffff !important; transition: border-color .35s ease, box-shadow .35s ease, background .35s ease, translate .35s cubic-bezier(.22,.7,.3,1); }
.nv-glass:hover { border-color: rgba(20,79,235,.42) !important; background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%) !important; box-shadow: 0 16px 38px rgba(20,79,235,.13), 0 0 0 4px rgba(20,79,235,.06), inset 0 1px 0 #ffffff !important; }
a.nv-glass:hover, .nv-cardlink:hover, .nv-contact:hover, .gb-pick:hover, .gb-chip:hover, .gd-btn:hover { translate: 0 -3px; }
.nv-cardlink i.ph, .nv-glass i.ph { transition: color .3s ease, transform .35s cubic-bezier(.2,1.2,.4,1); }
.nv-cardlink:hover i.ph { color: #144feb !important; }

/* section kicker number becomes a small blue pill */
.nv-kicker span[data-n] { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; background: #eaf1ff; color: #144feb !important; font-weight: 500; }
.nv-kicker::after { background: linear-gradient(to right, rgba(20,79,235,.45), transparent) !important; }

/* icon chips */
.nv-contact-ic, .nv-step-ic { background: linear-gradient(135deg, #144feb, #3f98f4) !important; color: #ffffff !important; border: 0 !important; box-shadow: 0 6px 14px rgba(20,79,235,.22); }
.nv-contact-ic i, .nv-step-ic i { color: #ffffff !important; }
.nv-contact { background: linear-gradient(180deg, #ffffff, #f6f9fe) !important; border: 1px solid rgba(20,79,235,.13) !important; box-shadow: 0 8px 22px rgba(11,18,38,.05); transition: border-color .3s ease, box-shadow .3s ease, translate .35s cubic-bezier(.22,.7,.3,1); }
.nv-contact:hover { border-color: rgba(20,79,235,.45) !important; box-shadow: 0 14px 32px rgba(20,79,235,.14), 0 0 0 4px rgba(20,79,235,.06); }
.nv-quote { background: linear-gradient(135deg, #f3f7ff, #ffffff) !important; border: 1px solid rgba(20,79,235,.14) !important; border-radius: 14px; }

/* buttons: gradient primary, lift + soft blue halo on hover */
.btn-primary, a.btn-primary { background: linear-gradient(135deg, #144feb 0%, #2371ed 100%) !important; transition: translate .25s cubic-bezier(.22,.7,.3,1), box-shadow .3s ease, background .3s ease !important; }
.btn-primary:hover, a.btn-primary:hover { background: linear-gradient(135deg, #1a5bf0 0%, #3a8cf3 100%) !important; translate: 0 -2px; box-shadow: 0 12px 26px rgba(20,79,235,.28), 0 0 0 4px rgba(20,79,235,.09) !important; }
.btn-ghost:hover, a.btn-ghost:hover, .btn-secondary:hover, a.btn-secondary:hover { translate: 0 -2px; box-shadow: 0 10px 22px rgba(20,79,235,.12), 0 0 0 4px rgba(20,79,235,.06); }
.nv-navlink { transition: color .2s ease; }
.nv-navlink:hover { color: #144feb !important; }

/* hero floating UI objects: visible edge + blue-tinted depth */
[data-obj3d][style*="border-radius: 9px"] { border-color: rgba(20,79,235,.2) !important; box-shadow: 0 18px 40px rgba(20,79,235,.14), 0 2px 6px rgba(11,18,38,.06) !important; }

/* footer and other closing areas: deep navy rather than bright blue */
[data-nv-blue][data-nv-navy] { background: linear-gradient(165deg, #0b1226 0%, #0e1d4a 100%) !important; }

/* ── Growth Builder ─────────────────────────────────────────────────────── */
.gb-pick { background: linear-gradient(180deg, #ffffff, #f6f9fe) !important; border: 1px solid rgba(20,79,235,.14) !important; box-shadow: 0 8px 22px rgba(11,18,38,.05); transition: border-color .3s ease, box-shadow .3s ease, opacity .3s ease, translate .35s cubic-bezier(.22,.7,.3,1) !important; }
.gb-pick:hover { border-color: rgba(20,79,235,.45) !important; box-shadow: 0 14px 32px rgba(20,79,235,.14), 0 0 0 4px rgba(20,79,235,.06) !important; }
.gb-pick[data-on="1"] { border-color: #144feb !important; background: linear-gradient(180deg, #ffffff, #eaf1ff) !important; box-shadow: 0 14px 32px rgba(20,79,235,.18), 0 0 0 3px rgba(20,79,235,.14) !important; translate: 0 -2px; }
.gb-pick > span:first-child { background: linear-gradient(135deg, #144feb, #3f98f4) !important; box-shadow: 0 6px 14px rgba(20,79,235,.22); }
.gb-pick > span:first-child i { color: #ffffff !important; }
.gb-chip { background: #ffffff !important; border: 1px solid rgba(20,79,235,.16) !important; box-shadow: 0 6px 16px rgba(11,18,38,.05); transition: border-color .25s ease, box-shadow .3s ease, opacity .3s ease, translate .3s cubic-bezier(.22,.7,.3,1) !important; }
.gb-chip:hover { border-color: rgba(20,79,235,.5) !important; box-shadow: 0 12px 26px rgba(20,79,235,.15), 0 0 0 4px rgba(20,79,235,.06) !important; }
.gb-chip > span:first-child i { color: #ffffff !important; }
/* one brand shade per building block, so each piece reads as its own thing */
.gb-chip:nth-child(1) > span:first-child { background: linear-gradient(135deg, #0b1226, #22335f) !important; }
.gb-chip:nth-child(2) > span:first-child { background: linear-gradient(135deg, #0c339e, #144feb) !important; }
.gb-chip:nth-child(3) > span:first-child { background: linear-gradient(135deg, #144feb, #2371ed) !important; }
.gb-chip:nth-child(4) > span:first-child { background: linear-gradient(135deg, #2371ed, #3f98f4) !important; }
.gb-chip:nth-child(5) > span:first-child { background: linear-gradient(135deg, #3f98f4, #7cb8f8) !important; }
.gb-chip:nth-child(6) > span:first-child { background: linear-gradient(135deg, #0b1226 0%, #144feb 60%, #3f98f4 100%) !important; }
.gb-ghost { background: #ffffff !important; border: 1px solid #144feb !important; color: #0b1226 !important; box-shadow: 0 18px 40px rgba(20,79,235,.28), 0 0 0 4px rgba(20,79,235,.08) !important; scale: 1.04; }
.gb-ghost > span:first-child { background: linear-gradient(135deg, #144feb, #3f98f4) !important; }
.gb-ghost i { color: #ffffff !important; }
.gb-ws { background: radial-gradient(circle at 50% 50%, #eef4ff, #f8faff 70%) !important; border: 1.5px dashed rgba(20,79,235,.32) !important; transition: border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.gb-ws[data-over="1"] { background: radial-gradient(circle at 50% 50%, #dfeaff, #f1f6ff 72%) !important; border-color: #144feb !important; box-shadow: 0 0 0 6px rgba(20,79,235,.08), 0 18px 40px rgba(20,79,235,.14); }
.gb-ws[data-full="1"] { border-style: solid !important; border-color: rgba(20,79,235,.4) !important; }
.gb-hub { background: linear-gradient(145deg, #0b1226, #173a9c) !important; border: 1px solid rgba(20,79,235,.4) !important; box-shadow: 0 0 0 8px rgba(20,79,235,.08), 0 14px 32px rgba(11,18,38,.22) !important; }
.gb-hub .nv-mark { background: linear-gradient(135deg, #ffffff, #bcd4ff); }
.gb-node { background: #ffffff !important; border: 1px solid rgba(20,79,235,.35) !important; box-shadow: 0 10px 24px rgba(20,79,235,.16) !important; color: #0b1226; }
.gb-node i { color: #144feb !important; }
.gb-slot { border-color: rgba(20,79,235,.22) !important; background: rgba(255,255,255,.6); }
.gb-chainword { background: #eaf1ff !important; border-color: rgba(20,79,235,.3) !important; color: #144feb !important; }
.gb-dot[data-on="1"] { color: #144feb !important; }

/* ── Digital Dash ───────────────────────────────────────────────────────── */
.gd-stage { background: linear-gradient(180deg, #f5f8fe 0%, #eaf1fd 100%) !important; border: 1px solid rgba(20,79,235,.18) !important; box-shadow: inset 0 1px 0 #ffffff, 0 14px 34px rgba(11,18,38,.07) !important; }
.gd-ob-card { background: #ffffff !important; border-color: rgba(20,79,235,.28) !important; box-shadow: 0 10px 24px rgba(11,18,38,.1) !important; color: #0b1226 !important; }
.gd-btn { box-shadow: 0 6px 16px rgba(11,18,38,.05); transition: border-color .25s ease, box-shadow .3s ease, translate .3s cubic-bezier(.22,.7,.3,1) !important; }
.gd-btn:hover { border-color: rgba(20,79,235,.5) !important; box-shadow: 0 12px 26px rgba(20,79,235,.15), 0 0 0 4px rgba(20,79,235,.06) !important; }

/* ── loader deck: three sheets sweep across behind the mark ──────────────── */
@keyframes nv-l-deck { 0% { transform: translate3d(-101%,0,0); } 42% { transform: translate3d(0,0,0); } 100% { transform: translate3d(101%,0,0); } }
.nv-l-sheet { position: absolute; inset: 0; transform: translate3d(-101%,0,0); animation: nv-l-deck 1.05s cubic-bezier(.76,0,.24,1) forwards; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .nv-l-sheet { display: none; }
  a.nv-glass:hover, .nv-cardlink:hover, .nv-contact:hover, .gb-pick:hover, .gb-chip:hover, .gd-btn:hover, .btn:hover { translate: none; }
}


/* ── signature pass ──────────────────────────────────────────────────────── */
/* interactive environments: deep navy stage with a fine grid and a blue rim */
.nv-xp[data-nv-navy] { background: linear-gradient(rgba(63,152,244,.07) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(63,152,244,.07) 1px, transparent 1px) 0 0 / 32px 32px, radial-gradient(700px 360px at 85% -10%, rgba(35,113,237,.35), transparent 70%), linear-gradient(165deg, #0b1226 0%, #0e1d4a 100%) !important; border: 1px solid rgba(63,152,244,.35); box-shadow: 0 30px 70px rgba(11,18,38,.22), 0 0 0 6px rgba(20,79,235,.06); }
.nv-xp-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #ffffff; }
@keyframes nv-xp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(63,152,244,.6); } 70% { box-shadow: 0 0 0 7px rgba(63,152,244,0); } }
.nv-xp-dot { width: 7px; height: 7px; border-radius: 50%; background: #3f98f4; animation: nv-xp-pulse 2s ease-out infinite; }
[data-nv-blue] .gb-dot[data-on="1"] { color: #9dc2ff !important; }
[data-nv-blue] .gb-dot[data-done="1"] + .gb-bar { background: #3f98f4 !important; }

/* white components that sit inside navy/blue areas keep dark ink */
.gb-pick, .gb-chip, .gb-ws, .gd-stage, .gd-btn, .gb-result, .nv-hchip-card { --color-text: #0b1226; --color-accent: #144feb; --color-accent-300: #0f3fc4; --color-divider: rgba(11,18,38,.1); --nv-sky: #1f64e6; color: #0b1226; }
[data-nv-blue] :is(.gd-stage, .gd-btn, .gb-ws, .gb-result) i.ph { color: #144feb; }
.gb-result { background: linear-gradient(180deg, #ffffff, #f1f6ff) !important; border: 1px solid rgba(63,152,244,.4) !important; box-shadow: 0 20px 44px rgba(0,0,0,.18); }
.gb-result .nv-grad-text { background: linear-gradient(115deg, #144feb, #3f98f4); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@keyframes gb-g-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes gb-g-pop { 0%, 60% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: scale(1); } }
.gb-g-line { stroke-dasharray: 100; animation: gb-g-draw 1.4s cubic-bezier(.45,0,.25,1) .3s both; }
.gb-g-area { animation: nv-fade-in 1s ease .9s both; }
.gb-g-dot { transform-origin: 240px 4px; animation: gb-g-pop 1.8s ease both; }
@keyframes nv-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* navigation: underline draws in from the left */
.nv-navlink { background: linear-gradient(#144feb, #144feb) left calc(100% - 2px) / 0 1.5px no-repeat; padding-bottom: 4px; transition: color .2s ease, background-size .32s cubic-bezier(.22,.7,.3,1) !important; }
.nv-navlink:hover { background-size: 100% 1.5px; }
@keyframes nv-dr-item { from { opacity: 0; transform: translate3d(-10px,0,0); } to { opacity: 1; transform: none; } }
.nv-drawer > div > * { animation: nv-dr-item .42s cubic-bezier(.22,.7,.3,1) both; }
.nv-drawer > div > *:nth-child(2) { animation-delay: .04s; } .nv-drawer > div > *:nth-child(3) { animation-delay: .08s; }
.nv-drawer > div > *:nth-child(4) { animation-delay: .12s; } .nv-drawer > div > *:nth-child(5) { animation-delay: .16s; }
.nv-drawer > div > *:nth-child(6) { animation-delay: .2s; }
.nv-drawer a.nv-dlink { transition: color .2s ease, padding-left .25s ease; }
.nv-drawer a.nv-dlink:hover { padding-left: 6px; }

/* primary button: the gradient travels on hover */
.btn-primary, a.btn-primary { background: linear-gradient(120deg, #144feb 0%, #2371ed 50%, #3f98f4 100%) 0 0 / 200% 100% !important; transition: background-position .45s ease, translate .25s cubic-bezier(.22,.7,.3,1), box-shadow .3s ease !important; }
.btn-primary:hover, a.btn-primary:hover { background: linear-gradient(120deg, #144feb 0%, #2371ed 50%, #3f98f4 100%) 100% 0 / 200% 100% !important; }
[data-nv-blue] .btn-primary, [data-nv-blue] a.btn-primary { background: #ffffff !important; }
[data-nv-blue] .btn-primary:hover, [data-nv-blue] a.btn-primary:hover { background: #eaf1ff !important; }

/* static content panels get a thin brand line along the top edge */
.nv-glass:not(a):not([data-nv-blue]) { box-shadow: inset 0 2px 0 #144feb, 0 1px 2px rgba(11,18,38,.04), 0 10px 28px rgba(11,18,38,.06) !important; }
.nv-cardlink:hover i.ph { transform: translateY(-2px) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .nv-xp-dot, .nv-drawer > div > *, .gb-g-line, .gb-g-area, .gb-g-dot { animation: none !important; }
}

/* The game's start/end card is a light surface inside the navy panel, so its
   buttons use the light-ground styles, not the blue-section ones. */
[data-nv-blue] .gd-stage .btn-primary, [data-nv-blue] .gd-stage a.btn-primary { background: linear-gradient(120deg, #144feb 0%, #2371ed 50%, #3f98f4 100%) 0 0 / 200% 100% !important; border-color: #144feb !important; color: #ffffff !important; }
[data-nv-blue] .gd-stage .btn-primary:hover, [data-nv-blue] .gd-stage a.btn-primary:hover { background-position: 100% 0 !important; color: #ffffff !important; }
[data-nv-blue] .gd-stage .btn-primary i { color: #ffffff !important; }
[data-nv-blue] .gd-stage .btn-secondary, [data-nv-blue] .gd-stage a.btn-secondary, [data-nv-blue] .gd-stage .btn-ghost { background: #ffffff !important; border: 1px solid rgba(20,79,235,.38) !important; color: #144feb !important; }
[data-nv-blue] .gd-stage .btn-secondary:hover, [data-nv-blue] .gd-stage a.btn-secondary:hover { background: #eaf1ff !important; border-color: #144feb !important; color: #0f3fc4 !important; }
[data-nv-blue] .gd-stage .btn-secondary i, [data-nv-blue] .gd-stage a.btn-secondary i { color: #144feb !important; }

/* ── service-page emblem: navy orb with a live brand-blue rim ─────────────
   Same markup on all eight service pages; restyled here so each page keeps
   its own icons. Child order: 1 halo, 2 outer ring, 3 dashed ring, 4 core. */
@keyframes nv-em-sweep { to { transform: rotate(360deg); } }
@keyframes nv-em-ripple { 0% { transform: translate(-50%,-50%) scale(.42); opacity: .7; } 100% { transform: translate(-50%,-50%) scale(1); opacity: 0; } }
@keyframes nv-em-sat-ping { 0%, 100% { box-shadow: 0 8px 18px rgba(20,79,235,.35), 0 0 0 0 rgba(63,152,244,.55); } 50% { box-shadow: 0 8px 18px rgba(20,79,235,.35), 0 0 0 7px rgba(63,152,244,0); } }
.nv-em { isolation: isolate; }
.nv-em::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 50% 50%, rgba(35,113,237,.55) 0%, rgba(20,79,235,.18) 32%, transparent 58%),
              repeating-radial-gradient(circle at 50% 50%, rgba(99,160,255,.09) 0 1px, transparent 1px 22px),
              linear-gradient(160deg, #13265e 0%, #0b1226 70%);
  box-shadow: 0 30px 70px rgba(11,18,38,.28), 0 0 0 1px rgba(63,152,244,.35), inset 0 0 60px rgba(20,79,235,.35); }
.nv-em::after { content: ""; position: absolute; inset: 7%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(99,170,255,.32) 38deg, transparent 72deg);
  animation: nv-em-sweep 6s linear infinite; }
.nv-em > .nv-em-ring:nth-child(1) { background: conic-gradient(from 0deg, transparent 0deg, #144feb 70deg, #3f98f4 120deg, transparent 170deg, transparent 200deg, #2371ed 280deg, transparent 340deg) !important;
  mask-image: radial-gradient(circle, transparent 83%, #000 84.5%, #000 86.5%, transparent 88%) !important; -webkit-mask-image: radial-gradient(circle, transparent 83%, #000 84.5%, #000 86.5%, transparent 88%) !important; animation-duration: 9s !important; filter: drop-shadow(0 0 6px rgba(63,152,244,.6)); }
.nv-em > .nv-em-ring:nth-child(2) { border: 1px solid rgba(120,175,255,.45) !important; }
.nv-em > .nv-em-ring:nth-child(3) { border: 1px dashed rgba(150,195,255,.5) !important; }
.nv-em > .nv-em-ring:nth-child(4) { width: 30% !important; height: 30% !important; background: radial-gradient(circle, rgba(63,152,244,.9), rgba(20,79,235,.45) 45%, transparent 72%) !important; }
.nv-em > .nv-em-ring:nth-child(4)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 280%; height: 280%; border-radius: 50%; border: 1px solid rgba(120,180,255,.7); animation: nv-em-ripple 3.2s cubic-bezier(.2,.6,.3,1) infinite; }
.nv-em > .nv-mark { background: linear-gradient(160deg, #ffffff 30%, #bcd6ff 100%) !important; filter: drop-shadow(0 4px 14px rgba(63,152,244,.8)); }
.nv-em-sat { background: linear-gradient(135deg, #144feb, #3f98f4) !important; border: 1px solid rgba(255,255,255,.7) !important; animation: nv-em-sat-ping 3s ease-in-out infinite; z-index: 2; }
.nv-em-sat i { color: #ffffff !important; }
@media (prefers-reduced-motion: reduce) { .nv-em::after, .nv-em > .nv-em-ring:nth-child(4)::after { animation: none; display: none; } }

/* ── services ticker: navy band, blue-chip items, a light passing through ── */
@keyframes nv-mq-sheen { 0% { transform: translate3d(-30vw,0,0); } 100% { transform: translate3d(130vw,0,0); } }
@keyframes nv-mq-flow { to { background-position: 200% 0; } }
.nv-marq-band { position: relative; background: linear-gradient(90deg, #0b1226 0%, #0f2566 50%, #0b1226 100%) !important; border: 0 !important; padding: 18px 0 !important; box-shadow: 0 18px 40px rgba(11,18,38,.16); }
.nv-marq-band::before, .nv-marq-band::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #144feb, #3f98f4, #144feb, transparent) 0 0 / 200% 100%; animation: nv-mq-flow 5s linear infinite; z-index: 2; }
.nv-marq-band::before { top: 0; } .nv-marq-band::after { bottom: 0; animation-direction: reverse; }
.nv-marq-band > .nv-marq { position: relative; }
.nv-marq-band .nv-marq > span > span { padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(120,175,255,.28); color: #ffffff !important; font-size: 14.5px !important; }
.nv-marq-band .nv-marq i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #144feb, #3f98f4); color: #ffffff !important; font-size: 15px !important; box-shadow: 0 0 0 3px rgba(63,152,244,.18); }
.nv-marq-band > i.nv-mq-sheen, .nv-mq-sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 22vw; background: linear-gradient(100deg, transparent, rgba(120,180,255,.22), transparent); animation: nv-mq-sheen 5.5s cubic-bezier(.5,0,.5,1) infinite; pointer-events: none; z-index: 1; }
@media (max-width: 560px) { .nv-marq-band .nv-marq > span > span { font-size: 13px !important; padding: 6px 12px 6px 6px; } .nv-marq-band .nv-marq i { width: 24px; height: 24px; font-size: 13px !important; } }
@media (prefers-reduced-motion: reduce) { .nv-marq-band::before, .nv-marq-band::after, .nv-mq-sheen { animation: none; } }

/* ── service cards: defined navy edge, icon chip, animated rim on hover ──── */
@property --nv-rim { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes nv-rim-spin { to { --nv-rim: 360deg; } }
a.nv-glass.nv-cardlink { position: relative; display: flex !important; flex-direction: column; height: 100%; box-sizing: border-box;
  border: 1.5px solid rgba(11,18,38,.28) !important; border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%) !important;
  box-shadow: 0 1px 0 rgba(11,18,38,.04), 0 12px 28px rgba(11,18,38,.07) !important; overflow: hidden; isolation: isolate; }
a.nv-glass.nv-cardlink > .nv-sub { margin-top: auto !important; padding-top: 14px; border-top: 1px dashed rgba(11,18,38,.16); }
/* accent bar that grows along the top edge */
a.nv-glass.nv-cardlink::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 26%; background: linear-gradient(90deg, #144feb, #3f98f4); transition: width .5s cubic-bezier(.22,.7,.3,1); z-index: 2; }
/* spinning gradient rim, only visible on hover */
a.nv-glass.nv-cardlink::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 2px; opacity: 0 !important;
  background: conic-gradient(from var(--nv-rim), #144feb, #3f98f4, #0b1226, #144feb);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  transition: opacity .35s ease; animation: nv-rim-spin 3s linear infinite; pointer-events: none; z-index: 3; }
a.nv-glass.nv-cardlink:hover { border-color: transparent !important; background: linear-gradient(180deg, #ffffff 0%, #e9f1ff 100%) !important; box-shadow: 0 22px 46px rgba(20,79,235,.18), 0 0 0 5px rgba(20,79,235,.07) !important; }
a.nv-glass.nv-cardlink:hover::before { width: 100%; }
a.nv-glass.nv-cardlink:hover::after { opacity: 1 !important; }
/* icon becomes a solid chip */
a.nv-glass.nv-cardlink .nv-ic { display: grid !important; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 20px !important;
  background: linear-gradient(135deg, #0b1226, #173a9c); color: #ffffff !important; box-shadow: 0 8px 18px rgba(11,18,38,.18);
  transition: background .35s ease, transform .4s cubic-bezier(.2,1.2,.4,1), box-shadow .35s ease !important; }
a.nv-glass.nv-cardlink:hover .nv-ic { background: linear-gradient(135deg, #144feb, #3f98f4); transform: translateY(-2px) rotate(-6deg) scale(1.06) !important; box-shadow: 0 10px 22px rgba(20,79,235,.35); }
a.nv-glass.nv-cardlink .nv-arrow { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(20,79,235,.3); transition: background .3s ease, color .3s ease, transform .3s cubic-bezier(.2,1.3,.4,1) !important; }
a.nv-glass.nv-cardlink:hover .nv-arrow { background: #144feb; color: #ffffff !important; border-color: #144feb; }
@media (prefers-reduced-motion: reduce) { a.nv-glass.nv-cardlink::after { animation: none; } }

/* ── defined boxes: goal picker, practice list, why-us, closing CTA ─────── */
.nv-need, .nv-prac { position: relative; border: 1.5px solid rgba(11,18,38,.24) !important; background: #ffffff !important; box-shadow: 0 2px 6px rgba(11,18,38,.04); overflow: hidden; }
.nv-need::before, .nv-prac::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, #144feb, #3f98f4); transition: width .35s cubic-bezier(.22,.7,.3,1); }
.nv-need:hover, .nv-prac:hover { border-color: #144feb !important; box-shadow: 0 10px 24px rgba(20,79,235,.14), 0 0 0 4px rgba(20,79,235,.06) !important; translate: 3px 0; }
.nv-need:hover::before, .nv-prac:hover::before { width: 3px; }
.nv-need[data-on="1"], .nv-prac[data-on="1"] { border-color: #144feb !important; background: linear-gradient(90deg, #e6efff, #ffffff) !important; box-shadow: 0 12px 28px rgba(20,79,235,.18), 0 0 0 3px rgba(20,79,235,.12) !important; color: #0b1226 !important; }
.nv-need[data-on="1"]::before, .nv-prac[data-on="1"]::before { width: 4px; }
.nv-prac[data-on="1"] i { color: #144feb !important; }
.nv-need > span:first-child { border: 1.5px solid rgba(11,18,38,.35) !important; }
.nv-need[data-on="1"] > span:first-child { background: linear-gradient(135deg, #144feb, #3f98f4) !important; border-color: #144feb !important; }
.nv-need[data-on="1"] > span:first-child i { color: #ffffff !important; }

.nv-g4 > .nv-glass { position: relative; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; border: 1.5px solid rgba(11,18,38,.26) !important; border-radius: 16px; box-shadow: 0 12px 28px rgba(11,18,38,.07) !important; transition: border-color .35s ease, box-shadow .35s ease, translate .4s cubic-bezier(.22,.7,.3,1), background .35s ease !important; }
.nv-g4 > .nv-glass:hover { border-color: #144feb !important; translate: 0 -4px; background: linear-gradient(180deg, #ffffff, #e9f1ff) !important; box-shadow: inset 0 3px 0 #144feb, 0 22px 44px rgba(20,79,235,.17), 0 0 0 5px rgba(20,79,235,.07) !important; }
.nv-g4 > .nv-glass .nv-ic-sm { display: grid !important; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 19px !important; background: linear-gradient(135deg, #0b1226, #173a9c); color: #ffffff !important; box-shadow: 0 8px 18px rgba(11,18,38,.18); transition: background .35s ease, transform .4s cubic-bezier(.2,1.2,.4,1) !important; }
.nv-g4 > .nv-glass:hover .nv-ic-sm { background: linear-gradient(135deg, #144feb, #3f98f4); transform: translateY(-2px) rotate(-6deg) scale(1.06); }

@keyframes nv-cta-flow { to { background-position: 200% 0; } }
.nv-cta-box { position: relative; border: 1.5px solid rgba(11,18,38,.3) !important; border-radius: 20px !important; overflow: hidden; isolation: isolate; box-shadow: 0 26px 56px rgba(11,18,38,.1) !important; }
.nv-cta-box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #0b1226, #144feb, #3f98f4, #144feb, #0b1226) 0 0 / 200% 100%; animation: nv-cta-flow 4s linear infinite; }
.nv-cta-box::after { content: ""; position: absolute; right: -8%; top: -40%; width: 46%; aspect-ratio: 1; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(20,79,235,.14), transparent); }
@media (prefers-reduced-motion: reduce) { .nv-cta-box::before { animation: none; } }

/* ── growth engine: a spinning navy cube inside tilted orbit rings ──────── */
@keyframes nv-cube-spin { from { transform: rotateX(-22deg) rotateY(0deg); } to { transform: rotateX(-22deg) rotateY(360deg); } }
@keyframes nv-eng-orbit { to { transform: translate(-50%,-50%) rotateX(72deg) rotateZ(360deg); } }
@keyframes nv-eng-orbit2 { to { transform: translate(-50%,-50%) rotateX(72deg) rotateY(-24deg) rotateZ(-360deg); } }
@keyframes nv-eng-orbit3 { to { transform: translate(-50%,-50%) rotateX(64deg) rotateY(38deg) rotateZ(360deg); } }
@keyframes nv-eng-bar { 0%, 100% { height: calc(var(--h) * .45); } 50% { height: var(--h); } }
@keyframes nv-eng-float { 0%,100% { transform: translate3d(0,-8px,0); } 50% { transform: translate3d(0,8px,0); } }
@keyframes nv-eng-core { 0%,100% { opacity: .55; transform: translate(-50%,-50%) scale(.85); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); } }
@keyframes nv-eng-tag { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-6px,0); } }
.nv-engine { perspective: 1000px; }
.nv-eng-glow { position: absolute; left: 50%; top: 48%; width: 110%; height: 110%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(20,79,235,.22), rgba(63,152,244,.08) 55%, transparent); }
.nv-eng-scene { position: absolute; left: 50%; top: 44%; width: 120px; height: 120px; margin: -60px 0 0 -60px; perspective: 700px; animation: nv-eng-float 6s ease-in-out infinite; }
.nv-cube { position: absolute; inset: 0; transform-style: preserve-3d; animation: nv-cube-spin 14s linear infinite; }
.nv-cube-f { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; backface-visibility: visible;
  background: linear-gradient(145deg, rgba(23,58,156,.94), rgba(11,18,38,.96)); border: 1.5px solid rgba(99,170,255,.75);
  box-shadow: inset 0 0 26px rgba(63,152,244,.45), inset 0 0 0 6px rgba(255,255,255,.03); }
.nv-cube-f i { font-size: 40px; color: #ffffff; filter: drop-shadow(0 0 10px rgba(99,170,255,.8)); }
.nv-cube-core { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, #ffffff, #3f98f4 45%, transparent 70%); animation: nv-eng-core 2.4s ease-in-out infinite; }
.nv-eng-ring { position: absolute; left: 50%; top: 44%; border-radius: 50%; border: 1.5px solid rgba(20,79,235,.45); transform-style: preserve-3d; }
.nv-eng-r1 { width: 300px; height: 300px; transform: translate(-50%,-50%) rotateX(72deg); animation: nv-eng-orbit 10s linear infinite; border-color: rgba(20,79,235,.55); }
.nv-eng-r2 { width: 240px; height: 240px; transform: translate(-50%,-50%) rotateX(72deg) rotateY(-24deg); animation: nv-eng-orbit2 7s linear infinite; border-style: dashed; border-color: rgba(63,152,244,.6); }
.nv-eng-r3 { width: 196px; height: 196px; transform: translate(-50%,-50%) rotateX(64deg) rotateY(38deg); animation: nv-eng-orbit3 12s linear infinite; border-color: rgba(11,18,38,.3); }
.nv-eng-ring i { position: absolute; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: radial-gradient(circle, #ffffff 20%, #3f98f4 60%, #144feb); box-shadow: 0 0 12px rgba(63,152,244,.9); }
.nv-eng-ring i:nth-child(1) { left: 50%; top: 0; } .nv-eng-ring i:nth-child(2) { left: 100%; top: 50%; } .nv-eng-ring i:nth-child(3) { left: 14.6%; top: 85.4%; }
.nv-eng-bars { position: absolute; left: 50%; bottom: 4%; width: 176px; height: 64px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 8px; }
.nv-eng-bars i { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #3f98f4, #144feb 60%, #0b1226); box-shadow: 0 6px 14px rgba(20,79,235,.3); animation: nv-eng-bar 2.6s ease-in-out infinite; }
.nv-eng-tag { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #ffffff; border: 1.5px solid rgba(11,18,38,.2); box-shadow: 0 12px 26px rgba(20,79,235,.18); font-size: 12px; font-weight: 500; color: #0b1226; animation: nv-eng-tag 4s ease-in-out infinite; }
.nv-eng-tag i { color: #144feb; font-size: 14px; }
.nv-eng-t1 { left: 0; top: 14%; } .nv-eng-t2 { right: 2%; top: 62%; animation-delay: -2s; }
@media (prefers-reduced-motion: reduce) { .nv-engine * { animation: none !important; } }

/* growth engine below 1100px: moves under the section's content, centred,
   scaled to the width available. The section reserves the space, so nothing
   overlaps and nothing escapes the viewport. */
@media (max-width: 1099px) {
  section:has(> .nv-engine) { padding-bottom: calc(var(--nv-step) + 380px * var(--nv-eng-s, .9) + 16px) !important; }
  .nv-engine { --nv-eng-s: .9; display: block !important; right: auto !important; top: auto !important; left: 50% !important; bottom: calc(var(--nv-step) * .5); margin: 0 0 0 -190px !important; width: 380px !important; height: 380px !important; transform: scale(var(--nv-eng-s)); transform-origin: 50% 100%; }
}
@media (max-width: 560px) { .nv-engine, section:has(> .nv-engine) { --nv-eng-s: .78; } }
@media (max-width: 400px) { .nv-engine, section:has(> .nv-engine) { --nv-eng-s: .68; } }
@media (max-width: 340px) { .nv-engine, section:has(> .nv-engine) { --nv-eng-s: .6; } }

/* ══ THEME TOGGLE ══════════════════════════════════════════════════════════
   Light is the base stylesheet. Dark re-points the tokens back to the
   original night palette and re-tints the few surfaces that were hard-set
   white during the light pass. Graphics, layout and motion are shared. */
.nv-theme-btn { position: relative; display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1.5px solid rgba(11,18,38,.18); background: #ffffff; color: #0b1226; cursor: pointer; overflow: hidden; transition: border-color .25s ease, background .25s ease, translate .25s ease, box-shadow .25s ease; }
.nv-theme-btn:hover { border-color: #144feb; translate: 0 -1px; box-shadow: 0 6px 16px rgba(20,79,235,.2); }
.nv-theme-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.nv-theme-btn i { position: absolute; font-size: 17px; transition: transform .5s cubic-bezier(.2,1.1,.3,1), opacity .3s ease; }
.nv-th-sun { color: #f2b544; transform: translateY(130%) rotate(-90deg); opacity: 0; }
.nv-th-moon { color: #144feb; transform: none; opacity: 1; }
html[data-theme="dark"] .nv-th-sun { transform: none; opacity: 1; }
html[data-theme="dark"] .nv-th-moon { transform: translateY(-130%) rotate(90deg); opacity: 0; }
@media (max-width: 380px) { .nv-theme-btn { width: 32px; height: 32px; } }
html.nv-theme-anim, html.nv-theme-anim *, html.nv-theme-anim *::before, html.nv-theme-anim *::after { transition: background-color .5s ease, border-color .5s ease, color .4s ease, box-shadow .5s ease, fill .4s ease !important; }

html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #050b1c;
  --color-surface: #0d1f45;
  --color-section: #071433;
  --color-section-glow: #0d2352;
  --color-text: #eaf2ff;
  --color-divider: rgba(140,180,255,.16);
  --nv-ink: #eaf2ff;
  --nv-slate: #9fb2d6;
  --nv-sky: #59c6fe;
  --color-accent: #59c6fe;
  --color-accent-100: #12305f;
  --color-accent-200: #1a3d78;
  --color-accent-300: #9fd4ff;
  --color-accent-400: #7fd3ff;
  --color-accent-500: #59c6fe;
  --color-accent-600: #9fd4ff;
  --color-accent-700: #12305f;
  --color-accent-800: #0d2450;
  --color-accent-900: #0a1a3c;
  --color-neutral-100: #eaf2ff;
  --color-neutral-200: #c9d6f3;
  --color-neutral-300: #9fb2d6;
  --color-neutral-700: #1c2d55;
  --color-neutral-800: #12224a;
  --color-neutral-900: #0a1631;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 22px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.55);
}
html[data-theme="dark"], html[data-theme="dark"] body { background: #050b1c; color: #eaf2ff; }
html[data-theme="dark"] ::selection { background: #1a3d78; color: #ffffff; }
html[data-theme="dark"] a:hover { color: #9fd4ff !important; }
html[data-theme="dark"] .nv-theme-btn { background: #0d1f45; border-color: rgba(140,180,255,.3); color: #eaf2ff; }
html[data-theme="dark"] .nv-theme-btn:hover { border-color: #59c6fe; box-shadow: 0 0 0 4px rgba(89,198,254,.12); }

/* page backdrops painted inline with the light hex values */
html[data-theme="dark"] #dc-root > .sc-host > div,
html[data-theme="dark"] [data-dc-root] > div { background: radial-gradient(1100px 680px at 78% -10%, #0d2352 0%, #050b1c 58%), #050b1c !important; }
html[data-theme="dark"] [data-nv-loader] { background: radial-gradient(820px 640px at 50% 45%, #0d2352, #050b1c 70%) !important; }
html[data-theme="dark"] .nv-bar, html[data-theme="dark"] header nav, html[data-theme="dark"] .nv-drawer { background: rgba(5,11,28,.82) !important; border-color: rgba(140,180,255,.14) !important; }

/* cards & panels */
html[data-theme="dark"] .nv-glass { background: linear-gradient(158deg, rgba(16,41,79,.72), rgba(7,20,51,.82)) !important; border-color: rgba(140,180,255,.2) !important; box-shadow: 0 14px 34px rgba(0,0,0,.4) !important; }
html[data-theme="dark"] .nv-glass:not(a):not([data-nv-blue]) { box-shadow: inset 0 2px 0 #59c6fe, 0 14px 34px rgba(0,0,0,.4) !important; }
html[data-theme="dark"] .nv-glass:hover { border-color: rgba(89,198,254,.6) !important; box-shadow: 0 20px 46px rgba(0,0,0,.5), 0 0 0 1px rgba(89,198,254,.3), 0 0 30px rgba(89,198,254,.14) !important; }
html[data-theme="dark"] .nv-g4 > .nv-glass { border-color: rgba(140,180,255,.3) !important; }
html[data-theme="dark"] .nv-g4 > .nv-glass:hover { background: linear-gradient(180deg, #10294f, #0a1a3c) !important; box-shadow: inset 0 3px 0 #59c6fe, 0 22px 44px rgba(0,0,0,.5), 0 0 26px rgba(89,198,254,.18) !important; }
html[data-theme="dark"] .nv-g4 > .nv-glass .nv-ic-sm { background: linear-gradient(135deg, #144feb, #59c6fe); }
html[data-theme="dark"] .nv-cta-box { border-color: rgba(140,180,255,.35) !important; }
html[data-theme="dark"] .nv-need, html[data-theme="dark"] .nv-prac { background: rgba(13,31,69,.7) !important; border-color: rgba(140,180,255,.3) !important; color: #eaf2ff !important; }
html[data-theme="dark"] .nv-need[data-on="1"], html[data-theme="dark"] .nv-prac[data-on="1"] { background: linear-gradient(90deg, #12305f, rgba(13,31,69,.7)) !important; border-color: #59c6fe !important; color: #ffffff !important; box-shadow: 0 0 0 3px rgba(89,198,254,.16), 0 0 24px rgba(89,198,254,.18) !important; }
html[data-theme="dark"] .nv-prac[data-on="1"] i { color: #59c6fe !important; }
html[data-theme="dark"] .nv-need > span:first-child { border-color: rgba(140,180,255,.45) !important; }

/* buttons */
html[data-theme="dark"] .btn-primary, html[data-theme="dark"] a.btn-primary { background: linear-gradient(120deg, #1147e7 0%, #2f7ff0 50%, #59c6fe 100%) 0 0 / 200% 100% !important; border-color: transparent !important; box-shadow: 0 8px 22px rgba(17,71,231,.4) !important; }
html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] a.btn-primary:hover { background: linear-gradient(120deg, #1147e7 0%, #2f7ff0 50%, #59c6fe 100%) 100% 0 / 200% 100% !important; box-shadow: 0 10px 28px rgba(17,71,231,.5), 0 0 24px rgba(89,198,254,.3) !important; }
html[data-theme="dark"] .btn-ghost, html[data-theme="dark"] a.btn-ghost, html[data-theme="dark"] .btn-secondary, html[data-theme="dark"] a.btn-secondary { background: rgba(13,31,69,.5) !important; border-color: rgba(89,198,254,.45) !important; color: #eaf2ff !important; }
html[data-theme="dark"] .btn-ghost:hover, html[data-theme="dark"] a.btn-ghost:hover { background: rgba(18,48,95,.8) !important; border-color: #59c6fe !important; color: #ffffff !important; }

/* blue/navy feature sections keep their look; just deepen to sit on dark */
html[data-theme="dark"] [data-nv-blue]:not(.nv-xp) { background: linear-gradient(125deg, #0b1f6e 0%, #1240cf 55%, #2371ed 100%) !important; }
html[data-theme="dark"] .nv-xp[data-nv-navy] { box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(89,198,254,.3), 0 0 40px rgba(89,198,254,.12); }

/* hero graphic & floating objects */
html[data-theme="dark"] .nv-hchip-card, html[data-theme="dark"] .nv-eng-tag, html[data-theme="dark"] .nv-hstep { background: #0d1f45; border-color: rgba(140,180,255,.3); color: #eaf2ff; box-shadow: 0 10px 26px rgba(0,0,0,.45); }
html[data-theme="dark"] .nv-hchip-card { --color-text: #eaf2ff; }
html[data-theme="dark"] .nv-eng-r3 { border-color: rgba(140,180,255,.35); }
html[data-theme="dark"] .nv-eng-glow { background: radial-gradient(closest-side, rgba(89,198,254,.22), rgba(17,71,231,.1) 55%, transparent); }
html[data-theme="dark"] .nv-hlinks { stroke: #59c6fe; }
html[data-theme="dark"] .nv-obj > div > div, html[data-theme="dark"] .nv-obj-tilt > div { filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); }

/* growth builder / game white components stay legible white-on-navy cards;
   only the page-level light sections around them flip */
html[data-theme="dark"] section[style*="--color-section"], html[data-theme="dark"] [style*="background: var(--color-section)"] { background-color: #071433 !important; }

/* ══ DARK MODE · pass 2 ════════════════════════════════════════════════════
   Selectors are deliberately one step more specific than the light rules
   they replace (a.nv-glass.nv-cardlink etc.), so source order can't flip them. */
html[data-theme="dark"] a.nv-glass.nv-cardlink { background: linear-gradient(170deg, #0f2550 0%, #0a1834 100%) !important; border-color: rgba(140,180,255,.24) !important; box-shadow: 0 14px 34px rgba(0,0,0,.42) !important; color: #eaf2ff; }
html[data-theme="dark"] a.nv-glass.nv-cardlink > .nv-sub { border-top-color: rgba(140,180,255,.18); color: #9fb2d6; }
html[data-theme="dark"] a.nv-glass.nv-cardlink:hover { border-color: transparent !important; background: linear-gradient(170deg, #143064 0%, #0c1d40 100%) !important; box-shadow: 0 24px 50px rgba(0,0,0,.55), 0 0 0 5px rgba(89,198,254,.08), 0 0 36px rgba(89,198,254,.18) !important; color: #ffffff; }
html[data-theme="dark"] a.nv-glass.nv-cardlink:hover h3, html[data-theme="dark"] a.nv-glass.nv-cardlink:hover p { color: #ffffff !important; }
html[data-theme="dark"] a.nv-glass.nv-cardlink:hover > .nv-sub { color: #c9d6f3; }
html[data-theme="dark"] a.nv-glass.nv-cardlink::before { background: linear-gradient(90deg, #2f7ff0, #59c6fe); }
html[data-theme="dark"] a.nv-glass.nv-cardlink::after { background: conic-gradient(from var(--nv-rim), #1147e7, #59c6fe, #0b1f4d, #1147e7); }
html[data-theme="dark"] a.nv-glass.nv-cardlink .nv-ic { background: linear-gradient(135deg, #1147e7, #2f7ff0); box-shadow: 0 8px 20px rgba(17,71,231,.4); }
html[data-theme="dark"] a.nv-glass.nv-cardlink:hover .nv-ic { background: linear-gradient(135deg, #2f7ff0, #59c6fe); box-shadow: 0 10px 24px rgba(89,198,254,.35); }
html[data-theme="dark"] a.nv-glass.nv-cardlink .nv-arrow { border-color: rgba(89,198,254,.4); color: #59c6fe !important; }
html[data-theme="dark"] a.nv-glass.nv-cardlink:hover .nv-arrow { background: #59c6fe; border-color: #59c6fe; color: #05132e !important; }
html[data-theme="dark"] .nv-cardlink:hover i.ph:not(.nv-ic):not(.nv-arrow) { color: #59c6fe !important; }
html[data-theme="dark"] .nv-contact { background: linear-gradient(170deg, #0f2550, #0a1834) !important; border-color: rgba(140,180,255,.24) !important; color: #eaf2ff !important; }
html[data-theme="dark"] .nv-contact:hover { border-color: #59c6fe !important; box-shadow: 0 0 30px rgba(89,198,254,.16) !important; }

/* Blue sections: the bright royal-blue gradient read as flat on a dark page.
   In dark mode they become deep navy with a lit sky-blue horizon. */
html[data-theme="dark"] [data-nv-blue]:not(.nv-xp) { background: radial-gradient(900px 380px at 82% -8%, rgba(47,127,240,.38), transparent 62%), radial-gradient(700px 300px at 0% 110%, rgba(89,198,254,.14), transparent 60%), linear-gradient(170deg, #0a1a40 0%, #071330 100%) !important; border: 1px solid rgba(89,198,254,.22) !important; box-shadow: inset 0 1px 0 rgba(140,190,255,.18), 0 30px 70px rgba(0,0,0,.45) !important; }
html[data-theme="dark"] footer[data-nv-blue] { border-width: 1px 0 0 !important; box-shadow: inset 0 1px 0 rgba(89,198,254,.35) !important; }
html[data-theme="dark"] [data-nv-blue] { --nv-sky: #59c6fe; --color-accent: #59c6fe; }
html[data-theme="dark"] [data-nv-blue] .btn-primary, html[data-theme="dark"] [data-nv-blue] a.btn-primary { background: linear-gradient(120deg, #1147e7 0%, #2f7ff0 50%, #59c6fe 100%) 0 0 / 200% 100% !important; color: #ffffff !important; border-color: transparent !important; }
html[data-theme="dark"] [data-nv-blue] .btn-primary:hover, html[data-theme="dark"] [data-nv-blue] a.btn-primary:hover { background-position: 100% 0 !important; color: #ffffff !important; }
html[data-theme="dark"] [data-nv-blue] .btn-primary i { color: #ffffff !important; }

/* Interactive panels: the white cards inside become navy instruments */
html[data-theme="dark"] :is(.gb-pick, .gb-chip, .gb-ws, .gd-stage, .gd-btn, .gb-result, .gd-ob-card) { --color-text: #eaf2ff; --color-accent: #59c6fe; --color-accent-300: #9fd4ff; --color-divider: rgba(140,180,255,.18); --nv-sky: #59c6fe; color: #eaf2ff; }
html[data-theme="dark"] .gb-pick, html[data-theme="dark"] .gb-chip { background: linear-gradient(160deg, #11295a, #0a1834) !important; border-color: rgba(140,180,255,.26) !important; }
html[data-theme="dark"] .gb-pick:hover, html[data-theme="dark"] .gb-chip:hover, html[data-theme="dark"] .gb-pick[data-on="1"] { border-color: #59c6fe !important; box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 26px rgba(89,198,254,.2) !important; }
html[data-theme="dark"] .gb-ws { background: radial-gradient(circle, rgba(47,127,240,.22), transparent 66%), #081634 !important; border-color: rgba(89,198,254,.35) !important; }
html[data-theme="dark"] .gb-ws[data-over="1"] { border-color: #59c6fe !important; box-shadow: 0 0 0 4px rgba(89,198,254,.14), 0 0 40px rgba(89,198,254,.22) !important; }
html[data-theme="dark"] .gb-result { background: linear-gradient(170deg, #11295a, #0a1834) !important; border-color: rgba(89,198,254,.4) !important; }
html[data-theme="dark"] .gb-result .nv-grad-text { background: linear-gradient(115deg, #59c6fe, #ffffff); -webkit-background-clip: text; background-clip: text; }
html[data-theme="dark"] .gb-g-line { stroke: #59c6fe; }
html[data-theme="dark"] [data-nv-blue] :is(.gd-stage, .gd-btn, .gb-ws, .gb-result) i.ph { color: #59c6fe; }

/* The game: dark-blue stage with a slow breathing glow */
@keyframes gd-breathe { 0%, 100% { opacity: .55; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); } }
@keyframes gd-drift { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 0, 64px 0; } }
html[data-theme="dark"] .gd-stage { background: radial-gradient(120% 90% at 0% 50%, rgba(17,71,231,.32), transparent 60%), radial-gradient(90% 80% at 100% 0%, rgba(89,198,254,.16), transparent 60%), linear-gradient(180deg, #081a3e 0%, #050f28 100%) !important; border-color: rgba(89,198,254,.32) !important; box-shadow: inset 0 1px 0 rgba(140,190,255,.16), 0 0 0 1px rgba(89,198,254,.08), 0 20px 50px rgba(0,0,0,.5) !important; }
html[data-theme="dark"] .gd-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1.6; z-index: 0; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(89,198,254,.28), rgba(17,71,231,.14) 50%, transparent); animation: gd-breathe 5s ease-in-out infinite; }
html[data-theme="dark"] .gd-stage::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(rgba(89,198,254,.06) 1px, transparent 1px) 0 0 / 100% 32px, linear-gradient(90deg, rgba(89,198,254,.06) 1px, transparent 1px) 0 0 / 32px 100%; animation: gd-drift 6s linear infinite; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%); }
html[data-theme="dark"] .gd-overlay { background: radial-gradient(60% 70% at 50% 45%, rgba(17,71,231,.35), transparent 70%), rgba(5,15,40,.72) !important; }
html[data-theme="dark"] .gd-overlay h3 { color: #ffffff !important; }
html[data-theme="dark"] .gd-overlay p { color: #c9d6f3 !important; }
html[data-theme="dark"] .gd-overlay > div > i { color: #59c6fe !important; filter: drop-shadow(0 0 12px rgba(89,198,254,.6)); }
html[data-theme="dark"] [data-nv-blue] .gd-stage .btn-secondary, html[data-theme="dark"] [data-nv-blue] .gd-stage a.btn-secondary { background: rgba(13,31,69,.7) !important; border-color: rgba(89,198,254,.5) !important; color: #eaf2ff !important; }
html[data-theme="dark"] [data-nv-blue] .gd-stage .btn-secondary i { color: #59c6fe !important; }
html[data-theme="dark"] [data-nv-blue] .gd-stage .btn-primary, html[data-theme="dark"] [data-nv-blue] .gd-stage a.btn-primary { background: linear-gradient(120deg, #1147e7 0%, #2f7ff0 50%, #59c6fe 100%) 0 0 / 200% 100% !important; border-color: transparent !important; box-shadow: 0 8px 24px rgba(17,71,231,.45), 0 0 24px rgba(89,198,254,.25) !important; }
html[data-theme="dark"] .gd-ob-card { background: linear-gradient(160deg, #12305f, #0a1a3c) !important; border-color: rgba(140,180,255,.35) !important; box-shadow: 0 12px 28px rgba(0,0,0,.5) !important; color: #eaf2ff !important; }
html[data-theme="dark"] .gd-ob-card b { color: #ffffff !important; }
html[data-theme="dark"] .gd-btn { background: linear-gradient(160deg, #11295a, #0a1834) !important; color: #eaf2ff !important; }
html[data-theme="dark"] .gd-btn span { color: #c9d6f3 !important; }
html[data-theme="dark"] .gd-btn b, html[data-theme="dark"] .gd-btn strong { color: #ffffff !important; }
@media (prefers-reduced-motion: reduce) { html[data-theme="dark"] .gd-stage::before, html[data-theme="dark"] .gd-stage::after { animation: none; } }

/* misc stragglers in dark */
html[data-theme="dark"] .nv-hstep { background: #0d1f45 !important; color: #eaf2ff !important; }
html[data-theme="dark"] .nv-screen { box-shadow: 0 0 40px rgba(89,198,254,.18); }
html[data-theme="dark"] .nv-xp-badge { border-color: rgba(89,198,254,.4); }

/* dark: every .nv-glass hover keeps a navy ground (the light hover sets white !important) */
html[data-theme="dark"] .nv-glass:hover, html[data-theme="dark"] a.nv-glass:hover { background: linear-gradient(170deg, #143064 0%, #0c1d40 100%) !important; color: #ffffff; }
html[data-theme="dark"] .nv-glass:hover :is(h2, h3, h4, p, span:not(.nv-mark)) { color: #ffffff; }
html[data-theme="dark"] .nv-glass:hover .nv-sub { color: #c9d6f3 !important; }
html[data-theme="dark"] [data-nv-blue].nv-glass:hover { background: radial-gradient(900px 380px at 82% -8%, rgba(47,127,240,.44), transparent 62%), linear-gradient(170deg, #0c1f4a 0%, #081636 100%) !important; }
html[data-theme="dark"] .nv-need:hover, html[data-theme="dark"] .nv-prac:hover { background: linear-gradient(90deg, #12305f, rgba(13,31,69,.8)) !important; border-color: #59c6fe !important; color: #ffffff !important; box-shadow: 0 0 24px rgba(89,198,254,.18) !important; }
html[data-theme="dark"] .nv-prac:hover i { color: #59c6fe !important; }

/* ── home hero: slow breathing glow behind the whole hero ─────────────────
   Two soft light pools drift behind the copy and the laptop. Horizontal
   insets stay at 0 so the glow can never cause sideways scrolling. */
@keyframes nv-hglow-a { 0%, 100% { transform: translate3d(0,0,0) scale(1); opacity: .75; } 50% { transform: translate3d(-4%,3%,0) scale(1.12); opacity: 1; } }
@keyframes nv-hglow-b { 0%, 100% { transform: translate3d(0,0,0) scale(1.05); opacity: .55; } 50% { transform: translate3d(5%,-4%,0) scale(.92); opacity: .9; } }
section:has(> .nv-hero-lab) { isolation: isolate; }
section:has(> .nv-hero-lab)::before, section:has(> .nv-hero-lab)::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; will-change: transform, opacity; }
section:has(> .nv-hero-lab)::before { right: 0; top: 4%; width: min(62%, 760px); aspect-ratio: 1.1; background: radial-gradient(closest-side, rgba(20,79,235,.2), rgba(63,152,244,.1) 45%, transparent 72%); animation: nv-hglow-a 9s ease-in-out infinite; }
section:has(> .nv-hero-lab)::after { left: 0; bottom: 0; width: min(48%, 560px); aspect-ratio: 1.3; background: radial-gradient(closest-side, rgba(63,152,244,.14), rgba(20,79,235,.06) 50%, transparent 74%); animation: nv-hglow-b 12s ease-in-out infinite; }
html[data-theme="dark"] section:has(> .nv-hero-lab)::before { background: radial-gradient(closest-side, rgba(47,127,240,.42), rgba(89,198,254,.16) 45%, transparent 72%); }
html[data-theme="dark"] section:has(> .nv-hero-lab)::after { background: radial-gradient(closest-side, rgba(89,198,254,.24), rgba(17,71,231,.12) 50%, transparent 74%); }
@media (max-width: 760px) { section:has(> .nv-hero-lab)::before { width: 100%; top: 30%; } section:has(> .nv-hero-lab)::after { width: 90%; } }
@media (prefers-reduced-motion: reduce) { section:has(> .nv-hero-lab)::before, section:has(> .nv-hero-lab)::after { animation: none; } }