/* Neo product finish: shared navigation and the single, fixed ecosystem scene. */
body[data-neo-product] {
  --neo-nav-h: 34px;
  --neo-nav-radius: 9px;
  --neo-nav-gap: 6px;
  --neo-scene-bg: #081226;
  --neo-scene-ink: #eef8ff;
  --neo-scene-muted: #a9bfd2;
  --neo-scene-line: rgba(113, 214, 241, .34);
  --neo-scene-accent: #63dcff;
}
body[data-neo-product="academy"] #app-wrapper,
body[data-neo-product="business"] :is(.biz-header, .biz-subnav, .biz-view, .biz-footer) {
  position: relative;
  z-index: 1;
}
body[data-neo-product] #app-wrapper,
body[data-neo-product] main,
body[data-neo-product] .view,
body[data-neo-product] .home-hero,
body[data-neo-product] .biz-view {
  background-color: transparent;
}
/* business.css/biz-upgrade.css paint .biz-hero with an opaque gradient via the
   `background` shorthand (not just background-color), which fully hides the
   fixed scene behind it. Clearing background-color alone leaves that gradient
   in place, so the shorthand itself must be cleared here. */
body[data-neo-product="business"] .biz-hero {
  background: none;
}
.neo-exact-background.home-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  background: var(--neo-scene-bg);
}
.neo-exact-background.home-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,18,38,.72), transparent 28%, transparent 84%, rgba(8,18,38,.62));
}
.neo-exact-background.home-background > #neo-home-live { position: absolute; inset: 0; }
.neo-exact-background .nl-surface { position: absolute; inset: 0; }
.neo-exact-background .nl-surface[data-size="mini"] { display: none; }
.neo-exact-background .nl-canvas { display: block; width: 100%; height: 100%; }
/* Fallback only: neo-background-exact.css's own [data-neo-exact-mini].mini-emblem
   rules (higher specificity) are the real source of truth for size/position at
   every breakpoint. This just keeps the mini scene sane if that stylesheet is
   ever missing. Selector must match the actual DOM attribute+class the scene
   script creates -- not a class name of our own invention. */
[data-neo-exact-mini] {
  position: absolute;
  right: -12px;
  top: -20px;
  width: 182px;
  height: 172px;
  pointer-events: none;
  z-index: 0;
  opacity: .96;
}
[data-neo-exact-mini] .nl-surface,
[data-neo-exact-mini] .nl-canvas { display: block; width: 100%; height: 100%; }
.neo-exact-controls {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 18;
}
.neo-exact-controls input { position: absolute; opacity: 0; }
.neo-exact-controls label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 36px;
  border: 1px solid var(--neo-scene-line);
  border-radius: 10px;
  background: rgba(8,20,42,.78);
  color: var(--neo-scene-ink);
  cursor: pointer;
  box-shadow: 0 4px 28px rgba(2,9,24,.22);
}
.neo-product-nav {
  grid-area: products;
  display: flex;
  align-items: center;
  gap: var(--neo-nav-gap);
  min-width: 0;
}
.neo-product-nav > a,
.neo-header-utilities :is(a, button, .neo-theme-toggle, .lang-select) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: var(--neo-nav-h);
  height: var(--neo-nav-h);
  box-sizing: border-box;
  padding: 0 10px !important;
  border: 1px solid var(--neo-scene-line) !important;
  border-radius: var(--neo-nav-radius) !important;
  background: rgba(13,28,49,.78) !important;
  color: var(--neo-scene-ink) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.neo-product-nav > a[aria-current="page"] {
  color: var(--neo-scene-accent) !important;
  border-color: var(--neo-scene-accent) !important;
  background: rgba(23,61,80,.9) !important;
}
.neo-product-nav > a:hover,
.neo-header-utilities :is(a, button):hover {
  border-color: var(--neo-scene-accent) !important;
}
.neo-header-utilities {
  grid-area: controls;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: var(--neo-nav-gap);
  min-width: 0;
}
.neo-header-utilities .theme-toggle-btn,
.neo-header-utilities .neo-theme-toggle {
  width: var(--neo-nav-h) !important;
  min-width: var(--neo-nav-h) !important;
  padding: 0 !important;
  font-size: 0 !important;
}
.neo-header-utilities :is(.theme-img-icon, .neo-theme-toggle img, .neo-theme-toggle svg) {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
}
body[data-neo-product="academy"] .header-inner,
body[data-neo-product="business"] .biz-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand products controls" "sections sections sections";
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;
  width: 100%;
}
body[data-neo-product="academy"] .header-inner {
  width: min(1320px, calc(100% - 32px));
  max-width: 1320px;
}
body[data-neo-product="business"] .biz-header {
  height: auto;
  min-height: 82px;
}
body[data-neo-product="business"] .biz-header-switcher,
body[data-neo-product="business"] .biz-header-ecosystem { display: none !important; }
body[data-neo-product="business"] .biz-header-nav { grid-area: sections; justify-content: center; }
body[data-neo-product="academy"] .header-brand { grid-area: brand; }
body[data-neo-product="academy"] .header-controls { grid-area: controls; }
body[data-neo-product] .biz-header-brand > .neo-ecosystem-home-link,
body[data-neo-product] .header-inner > .neo-ecosystem-home-link {
  display: none !important;
}
body[data-neo-product="academy"] .home-hero,
body[data-neo-product="business"] .biz-hero { position: relative; isolation: isolate; }
/* Every other direct child sits above the mini scene, but the mini scene itself
   must keep its own [data-neo-exact-mini].mini-emblem position:absolute rule
   (defined in neo-background-exact.css) -- forcing it to position:relative here
   drops it back into normal document flow, which is what pushed it down near
   the stats block instead of anchoring it top-right of the hero. */
body[data-neo-product="academy"] .home-hero > :not([data-neo-exact-mini]),
body[data-neo-product="business"] .biz-hero > :not([data-neo-exact-mini]) { position: relative; z-index: 1; }
/* Business hero text used to sit on business.css/biz-upgrade.css's own opaque
   gradient, so its colors were only ever tuned for a pale-lavender/dark-indigo
   backdrop. Now that the hero shows the fixed scene through instead, the text
   needs its own translucent backing so it reads over the scene's mixed
   dark-navy/bright-cyan artwork in both themes, without re-covering the scene
   with a solid opaque block. */
body[data-neo-product="business"] .biz-hero .biz-wrap {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin-inline: auto;
  padding: 28px clamp(16px, 4vw, 40px) 32px;
  border-radius: 24px;
  background: rgba(6, 14, 28, .58);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
html:not([data-theme="dark"]) body[data-neo-product="business"] .biz-hero .biz-wrap {
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 8px 30px rgba(20,30,55,.08);
}
body[data-neo-product="business"] .biz-hero h1,
body[data-neo-product="business"] .biz-hero-sub,
body[data-neo-product="business"] .biz-hero-sub2 {
  color: var(--neo-scene-ink);
}
body[data-neo-product="business"] .biz-trust-bar {
  color: var(--neo-scene-muted);
}
body[data-neo-product="academy"] #neo-marketing-stats {
  margin: 10px auto 5px;
}
body[data-neo-product="academy"] .neo-mstats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 641px) {
  body[data-neo-product="academy"] .neo-mstats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
body[data-neo-product="academy"] .neo-mstats-card {
  min-height: 70px;
  padding: 9px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
body[data-neo-product="academy"] .neo-mstats-value {
  display: block;
  font-size: 19px;
  text-shadow: 0 0 4px rgba(86, 214, 255, .28);
  animation: neo-stat-breathe 3.6s ease-in-out infinite;
}
body[data-neo-product="academy"] .neo-mstats-label {
  display: block;
  margin: 4px 0 0;
  font-size: 11px;
  text-align: center;
}
@keyframes neo-stat-breathe {
  0%, 100% {
    opacity: .78;
    text-shadow: 0 0 4px rgba(86, 214, 255, .28);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(86, 214, 255, .78), 0 0 22px rgba(86, 214, 255, .38);
  }
}
body.theme-lite[data-neo-product="academy"],
html:not([data-theme="dark"]) body[data-neo-product="business"] {
  --neo-scene-bg: #eaf3fa;
  --neo-scene-ink: #17314a;
  --neo-scene-muted: #45647e;
  --neo-scene-line: rgba(26,99,130,.32);
  --neo-scene-accent: #08647a;
}
body.theme-lite[data-neo-product] .neo-product-nav > a,
html:not([data-theme="dark"]) body[data-neo-product="business"] .neo-product-nav > a,
body.theme-lite[data-neo-product] .neo-header-utilities :is(a, button, .neo-theme-toggle, .lang-select),
html:not([data-theme="dark"]) body[data-neo-product="business"] .neo-header-utilities :is(a, button, .neo-theme-toggle, .lang-select) {
  background: rgba(245,249,255,.88) !important;
  color: var(--neo-scene-ink) !important;
}
@media (max-width: 1160px) {
  body[data-neo-product] .header-inner,
  body[data-neo-product] .biz-header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand controls" "products products" "sections sections";
  }
  .neo-product-nav { max-width: 100%; }
}
@media (max-width: 640px) {
  body[data-neo-product] .header-inner,
  body[data-neo-product] .biz-header {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "products" "controls" "sections";
    row-gap: 8px;
  }
  .neo-product-nav { width: 100%; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .neo-product-nav::-webkit-scrollbar { display: none; }
  .neo-product-nav > a { flex: 1 0 auto; padding-inline: 7px !important; font-size: 10px !important; }
  .neo-header-utilities { width: 100%; }
  [data-neo-exact-mini] { width: 130px; height: 139px; right: -17px; top: -24px; }
  body[data-neo-product="business"] .biz-header-nav { display: none !important; }
  body[data-neo-product="business"] .biz-header { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-neo-product="academy"] .neo-mstats-value {
    animation: none;
    opacity: 1;
    text-shadow: 0 0 5px rgba(86, 214, 255, .38);
  }
}
/* Business section headers and the footer sit in .biz-section rows that never
   painted their own background even before this scene existed (only
   .biz-section-alt/.biz-lead-section/.biz-cc-section/inline-styled rows did),
   so they now show the fixed scene directly behind them. Their copy still
   uses the flat --biz-text-muted/--text-primary tones tuned for a plain page
   background, which lose contrast against the scene's bright cyan/nebula
   artwork. A dark protective text-shadow (the same halo trick already used
   for Academy's .home-title) keeps the scene fully visible -- no added panel
   or opaque block -- while guaranteeing the text reads over any part of it. */
body[data-neo-product="business"] .biz-section:not(.biz-section-alt):not(.biz-lead-section):not(.biz-cc-section):not([style*="background"]) .biz-section-header,
body[data-neo-product="business"] .biz-pricing-2col > div:first-child,
body[data-neo-product="business"] .biz-footer {
  text-shadow: 0 1px 4px rgba(0,0,0,.5), 0 0 20px rgba(0,0,0,.32);
}
html:not([data-theme="dark"]) body[data-neo-product="business"] .biz-section:not(.biz-section-alt):not(.biz-lead-section):not(.biz-cc-section):not([style*="background"]) .biz-section-header,
html:not([data-theme="dark"]) body[data-neo-product="business"] .biz-pricing-2col > div:first-child,
html:not([data-theme="dark"]) body[data-neo-product="business"] .biz-footer {
  text-shadow: 0 1px 3px rgba(255,255,255,.65), 0 0 16px rgba(255,255,255,.5);
}
/* Academy's hero slogan and stats badge sit directly over the scene's core
   glow with no card backing of their own -- unlike the stats grid and
   shortcut cards right below them, which already paint a dark translucent
   card. That glow is animated (the canvas pulses), so a text-shadow alone
   isn't reliably enough contrast against every brightness the animation
   passes through, in either theme. A small translucent chip -- the same
   dark-card language already used one line below for the stats badge and
   the shortcut cards -- gives fixed, animation-proof contrast instead. */
body[data-neo-product="academy"] .home-slogan {
  display: inline-block;
  background: rgba(8,20,42,.55);
  padding: 4px 14px;
  border-radius: 999px;
  text-shadow: 0 1px 4px rgba(0,0,0,.5), 0 0 20px rgba(0,0,0,.32);
}
body[data-neo-product="academy"] #neo-marketing-stats .neo-mstats-badge {
  background: rgba(8,20,42,.78);
  border-color: rgba(113,214,241,.34);
}