/* =========================================================
   HoloBox911 light theme. Active when <html data-theme="light">.
   The announcement strip, quote band, footer and phone quick-contact bar stay dark on purpose.
   ========================================================= */

/* ---------- Toggle button (both themes) ---------- */
.theme-toggle {
  position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); transition: background .3s, border-color .3s, transform .3s;
}
.theme-toggle:hover { border-color: rgba(255,255,255,.3); transform: rotate(-12deg); }
.theme-toggle svg { position: absolute; width: 20px; height: 20px; transition: opacity .35s, transform .5s var(--ease); }
.theme-toggle .i-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
html[data-theme="light"] .theme-toggle .i-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
html[data-theme="light"] .theme-toggle .i-moon { opacity: 1; transform: none; }
.nav-cta + .theme-toggle { margin-left: 4px; }
@media (max-width: 1180px) { .theme-toggle { margin-left: auto !important; } }

/* Logo swap */
.on-light { display: none; }
html[data-theme="light"] .on-light { display: block; }
html[data-theme="light"] .on-dark { display: none; }
html[data-theme="light"] .footer .on-light, html[data-theme="light"] .cta-band .on-light { display: none; }
html[data-theme="light"] .footer .on-dark, html[data-theme="light"] .cta-band .on-dark { display: block; }

/* Smooth colour change when switching */
html.theme-anim, html.theme-anim body, html.theme-anim .nav, html.theme-anim main * { transition: background-color .45s ease, color .45s ease, border-color .45s ease !important; }

/* ---------- Tokens ---------- */
html[data-theme="light"] {
  --ink: #f4f6fb; --ink-2: #ffffff;
  --panel: #ffffff; --panel-2: #f0f2f8;
  --line: rgba(15, 18, 34, .1);
  --text: #0f1222; --muted: #4a5068; --dim: #7a8099;
  color-scheme: light;
}
html[data-theme="light"] body { background: var(--ink); color: var(--text); }

/* Areas that stay dark: give them back the dark tokens */
html[data-theme="light"] .announce, html[data-theme="light"] .footer, html[data-theme="light"] .cta-band, html[data-theme="light"] .mcta, html[data-theme="light"] .video-frame, html[data-theme="light"] .reel-player, html[data-theme="light"] .film-frame {
  --text: #f3f5ff; --muted: #a6abc6; --dim: #6d7290; --line: rgba(255,255,255,.1); --panel: rgba(255,255,255,.045);
  color: var(--text);
}
html[data-theme="light"] .footer { background: #070818; }
html[data-theme="light"] .footer .eyebrow { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #e2e5f7; }

/* ---------- Background, hero ---------- */
html[data-theme="light"] .ambient i { opacity: .14 !important; }
html[data-theme="light"] .hero-bg .base {
  background:
    radial-gradient(1100px 650px at 78% 35%, rgba(123,42,144,.16), transparent 60%),
    radial-gradient(900px 600px at 8% 90%, rgba(0,168,232,.16), transparent 60%),
    linear-gradient(180deg, #eef1fb 0%, var(--ink) 100%);
}
html[data-theme="light"] .orb { opacity: .18 !important; }
html[data-theme="light"] .floor { opacity: .35; background-image: linear-gradient(rgba(0,90,158,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(0,90,158,.18) 1px, transparent 1px); }
html[data-theme="light"] .device img { filter: drop-shadow(0 40px 50px rgba(15,18,34,.25)); }
html[data-theme="light"] .device .glow { opacity: .45; }
html[data-theme="light"] .cursor-glow { mix-blend-mode: multiply; opacity: .35; }
html[data-theme="light"] .scroll-cue span { border-color: rgba(15,18,34,.3); }
html[data-theme="light"] .scroll-cue span::after { background: var(--text); }
html[data-theme="light"] .chip { background: #fff; border-color: var(--line); color: var(--muted); }
html[data-theme="light"] .phero .tagline { color: var(--text); }

/* ---------- Nav, mega menu, drawer ---------- */
html[data-theme="light"] .nav.scrolled { background: rgba(255,255,255,.82); border-bottom-color: var(--line); }
html[data-theme="light"] .nav-links > li > a, html[data-theme="light"] .nav-links > li > button { color: #2a2f45; }
html[data-theme="light"] .nav-links > li > a:hover, html[data-theme="light"] .nav-links > li > button:hover,
html[data-theme="light"] .nav-links > li.open > button, html[data-theme="light"] .nav-links > li > a[aria-current="page"],
html[data-theme="light"] .nav-links > li.is-active > button { background: rgba(15,18,34,.06); color: var(--text); }
html[data-theme="light"] .burger { border-color: var(--line); }
html[data-theme="light"] .burger span { background: var(--text); }
html[data-theme="light"] .theme-toggle { background: #fff; }
html[data-theme="light"] .theme-toggle:hover { border-color: rgba(15,18,34,.3); }
html[data-theme="light"] .mega { background: rgba(255,255,255,.98); box-shadow: 0 40px 80px -30px rgba(15,18,34,.35); }
html[data-theme="light"] .mega a.item:hover { background: rgba(15,18,34,.05); }
html[data-theme="light"] .mega .t { color: var(--text); }
html[data-theme="light"] .drawer { background: rgba(255,255,255,.98); }
html[data-theme="light"] .drawer .sub a:hover { color: var(--text); }

/* ---------- Type and small UI ---------- */
html[data-theme="light"] .eyebrow { background: #fff; border-color: var(--line); color: var(--muted); }
html[data-theme="light"] .grad-text { filter: none; }
html[data-theme="light"] .btn-ghost { background: #fff; border-color: rgba(15,18,34,.14); color: var(--text); }
html[data-theme="light"] .btn-ghost:hover { border-color: rgba(15,18,34,.35); background: #fff; }
html[data-theme="light"] .text-link, html[data-theme="light"] .faq-grid .lead a, html[data-theme="light"] .big-quote figcaption a { color: var(--text); }
html[data-theme="light"] .caps-count b, html[data-theme="light"] .spec-list b, html[data-theme="light"] .fin-name b, html[data-theme="light"] .prose h2,
html[data-theme="light"] .prose h3, html[data-theme="light"] .prose b, html[data-theme="light"] .prose strong, html[data-theme="light"] .prose th,
html[data-theme="light"] .chip-f:hover, html[data-theme="light"] .legal-toc a:hover, html[data-theme="light"] .legal-toc a.on { color: var(--text); }
html[data-theme="light"] .story-block p, html[data-theme="light"] .text-body p, html[data-theme="light"] .reel-info p, html[data-theme="light"] .preview,
html[data-theme="light"] .ccard p, html[data-theme="light"] .option li, html[data-theme="light"] .big-copy, html[data-theme="light"] .prose,
html[data-theme="light"] .stat-card span, html[data-theme="light"] .pills a { color: #3a3f58; }
html[data-theme="light"] .chip-f[aria-pressed="true"], html[data-theme="light"] .toggle button[aria-pressed="true"] { background: var(--text); color: #fff; border-color: var(--text); }
html[data-theme="light"] .swatch[aria-pressed="true"] { border-color: var(--text); background: rgba(15,18,34,.05); }
html[data-theme="light"] .swatch, html[data-theme="light"] .toggle { background: #fff; }
html[data-theme="light"] .specs .bg-word { -webkit-text-stroke: 1px rgba(15,18,34,.07); }
html[data-theme="light"] .caps-stage .ring { border-color: rgba(15,18,34,.14); }
html[data-theme="light"] .use-n { -webkit-text-stroke: 1px rgba(15,18,34,.22); }
html[data-theme="light"] .legal-meta div, html[data-theme="light"] .prose th { background: #fff; }
html[data-theme="light"] .legal-toc a:hover, html[data-theme="light"] .legal-toc a.on { background: rgba(15,18,34,.05); }

/* Accent tags: darker tint so they read on white */
html[data-theme="light"] .ccard .tag, html[data-theme="light"] .vcard-body .tag, html[data-theme="light"] .route .tag,
html[data-theme="light"] .centre .flag, html[data-theme="light"] .cmini .flag, html[data-theme="light"] .cap li, html[data-theme="light"] .icard-body .ic,
html[data-theme="light"] .why .k, html[data-theme="light"] .fstep .n, html[data-theme="light"] .use .num, html[data-theme="light"] .cap .num {
  color: color-mix(in srgb, var(--c, var(--blue)) 75%, #000);
}

/* ---------- Cards and panels: white with a tint of their accent ---------- */
html[data-theme="light"] .ccard, html[data-theme="light"] .vcard, html[data-theme="light"] .kind-card, html[data-theme="light"] .option,
html[data-theme="light"] .stat-card, html[data-theme="light"] .glance, html[data-theme="light"] .layer, html[data-theme="light"] .big-quote, html[data-theme="light"] .story {
  background: linear-gradient(165deg, color-mix(in srgb, var(--c, var(--blue)) 10%, #fff), #fff 70%) !important;
  box-shadow: 0 24px 50px -32px rgba(15,18,34,.35);
}
html[data-theme="light"] .award-card { background: linear-gradient(135deg, #fff8e0, #fff 55%, #ffeef7); }
html[data-theme="light"] .award-stats strong { background: linear-gradient(135deg, var(--text), var(--orange)); -webkit-background-clip: text; background-clip: text; }
html[data-theme="light"] .use-vis { background: radial-gradient(400px 260px at 50% 70%, color-mix(in srgb, var(--c) 25%, transparent), transparent 70%), linear-gradient(180deg, #fff, #eef1f8); }
html[data-theme="light"] .spec, html[data-theme="light"] .trust, html[data-theme="light"] .person, html[data-theme="light"] .parent-card,
html[data-theme="light"] .other-ind, html[data-theme="light"] .route, html[data-theme="light"] .cstat, html[data-theme="light"] .next-card {
  background-color: #fff; box-shadow: 0 20px 40px -30px rgba(15,18,34,.3);
}
html[data-theme="light"] .gstat { background: #fff; }
html[data-theme="light"] .gstat strong, html[data-theme="light"] .num-cell strong { background: linear-gradient(120deg, var(--text) 10%, color-mix(in srgb, var(--c, var(--magenta)) 80%, #000) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .numband { background: #fff; box-shadow: 0 24px 50px -36px rgba(15,18,34,.4); }
html[data-theme="light"] .reel-info { background: linear-gradient(160deg, rgba(0,168,232,.1), #fff 70%); }
html[data-theme="light"] .icard-body .ic, html[data-theme="light"] .step .n { background: #fff; }
html[data-theme="light"] .logo-chip { box-shadow: 0 8px 20px -12px rgba(15,18,34,.35), 0 0 0 1px var(--line); }
html[data-theme="light"] .proof { background: linear-gradient(90deg, transparent, rgba(15,18,34,.03) 20%, rgba(15,18,34,.03) 80%, transparent); }
html[data-theme="light"] .proof::before, html[data-theme="light"] .proof::after { background: linear-gradient(90deg, transparent, rgba(15,18,34,.12), transparent); }

/* Gradient-edge cards: white face, faint accent edge; full spectrum edge on hover */
html[data-theme="light"] .why, html[data-theme="light"] .route, html[data-theme="light"] .cmini, html[data-theme="light"] .centre, html[data-theme="light"] .icard,
html[data-theme="light"] .fstep, html[data-theme="light"] .gcell, html[data-theme="light"] .mcell, html[data-theme="light"] .reel-tab {
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--ang), color-mix(in srgb, var(--c, var(--blue)) 45%, transparent), rgba(15,18,34,.08) 22%, rgba(15,18,34,.08) 62%, color-mix(in srgb, var(--c, var(--magenta)) 40%, transparent)) border-box !important;
  box-shadow: 0 20px 40px -32px rgba(15,18,34,.35);
}
html[data-theme="light"] .why:hover, html[data-theme="light"] .route:hover, html[data-theme="light"] .cmini:hover, html[data-theme="light"] .centre:hover,
html[data-theme="light"] .icard:hover, html[data-theme="light"] .fstep:hover, html[data-theme="light"] .gcell:hover, html[data-theme="light"] .mcell:hover {
  background:
    linear-gradient(#fff, #f8f9fd) padding-box,
    conic-gradient(from var(--ang), var(--cyan), var(--blue), var(--purple), var(--magenta), var(--yellow), var(--green), var(--cyan)) border-box !important;
}
html[data-theme="light"] .reel-tab[aria-pressed="true"] {
  background: linear-gradient(color-mix(in srgb, var(--c) 12%, #fff), color-mix(in srgb, var(--c) 12%, #fff)) padding-box,
    linear-gradient(var(--c), var(--c)) border-box !important;
}

/* Text sitting on photos stays white */
html[data-theme="light"] .mcard-body, html[data-theme="light"] .mcard-body h3, html[data-theme="light"] .mcard p.preview { color: #fff; }
html[data-theme="light"] .mcard-body .tag { color: color-mix(in srgb, var(--c) 75%, #fff); }

/* FAQ, forms outside the dark band, misc */
html[data-theme="light"] .faq-item summary svg { color: var(--dim); }
html[data-theme="light"] .faq-item[open] summary svg { color: var(--blue); }
html[data-theme="light"] .f-legal summary { color: var(--muted); }
html[data-theme="light"] .medal { box-shadow: 0 30px 70px -25px rgba(242,145,0,.5), inset 0 0 0 8px rgba(255,255,255,.35); }
html[data-theme="light"] ::selection { background: var(--magenta); color: #fff; }

/* Contrast fixes found by the light-mode audit */
html[data-theme="light"] .person .role { color: color-mix(in srgb, var(--c) 68%, #000); }
html[data-theme="light"] .reel-tab span { color: #3a3f58; }
html[data-theme="light"] .prose a { color: var(--deep); border-bottom-color: rgba(0, 90, 158, .35); }
/* Team initials: deepen the tile so white letters read in both themes */
.person .ph { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 72%, #000), color-mix(in srgb, var(--c) 35%, #0b0c20)); }
/* Role titles: lighter tint on the dark theme so every accent colour reads */
.person .role { color: color-mix(in srgb, var(--c) 65%, #fff); }

/* Labels that sit on dark pills over photos/video keep white text in light mode */
.mcell span, .gcell span, .photo-stage figcaption, .corner-pill, .corner-pill b { color: #fff; }
.video-hint { color: #dfe2f5; }