/* AI Business Brain — the light / dark layer.

   The stylesheets ahead of this one carry every colour twice: the original
   value, then the same declaration as light-dark(light, dark). A browser that
   knows light-dark() picks a face from the element's color-scheme; one that
   does not simply keeps the dark design it always had. So this file only owns
   the tokens, which sections show which face, the switch itself, and the few
   surfaces whose light answer needed a hand rather than a formula. */

:root { color-scheme: dark; --orange-text: var(--orange); --gold-text: var(--gold); --ease-out: cubic-bezier(.16, 1, .3, 1); }
:root[data-theme="light"] { color-scheme: light; }

@supports (color: light-dark(#fff,#000)) {
  :root {
    --ink: light-dark(#f5f2ec,#050508);
    --surface: light-dark(#ffffff,#101014);
    --white: light-dark(#141014,#f8f5ef);
    --muted: light-dark(#5f5964,#a2a0a3);
    --line: light-dark(#14101424,#ffffff24);
    --glass: linear-gradient(145deg, light-dark(#ffffffd6,#ffffff16), light-dark(#ffffff7a,#ffffff04) 60%);
    --glass-border: light-dark(#14101426,#ffffff2b);
    --soft-orange: light-dark(#c2360a,#ff9b69);
    --orange-text: light-dark(#c2360a,#ff4400);
    --gold-text: light-dark(#8a6a00,#d4a800);
  }
}

/* ---- which face each section shows ------------------------------------
   Alternation survives the switch: the portal and the impact table wear the
   opposite face of whatever theme is active, the contact form is always paper,
   and the instruments (the atlas, the core, the closing, the footer) stay dark. */
.portal-section, .impact-section { color-scheme: light; }
:root[data-theme="light"] .portal-section, :root[data-theme="light"] .impact-section { color-scheme: dark; }
.brain-contact, .knowledge-art, .knowledge-inspector { color-scheme: light; }
.atlas-shell, .process-core, .closing-section, footer, .manifesto, .knowledge-ribbon, .price-card { color-scheme: dark; }
.is-inverse { color-scheme: light; }
:root[data-theme="light"] .is-inverse { color-scheme: dark; }
/* `color` inherits as a resolved value, so a block that forces its own scheme must ask for the token again. */
.portal-section, .impact-section, .is-inverse, .brain-contact, .knowledge-art, .atlas-shell, .process-core, .closing-section, footer { color: var(--white); }

/* Gradient headline accent: a deeper ramp on paper so the first letters keep contrast. */
h2 em { background-image: linear-gradient(110deg, light-dark(#e8440c,#ffb184), light-dark(#ff4400,#ff4d0d) 56%, light-dark(#c2360a,#ff8747)); }

/* ---- the brand ----------------------------------------------------------- */
.brand { gap: 0; }
.site-header .brand .brand-logo, .footer-top .brand .brand-logo, .brand .brand-logo { width: auto; height: 34px; max-width: none; object-fit: contain; mix-blend-mode: normal; }
.brand-logo.on-light { display: none; }
:root[data-theme="light"] .brand-logo.on-dark { display: none; }
:root[data-theme="light"] .brand-logo.on-light { display: block; }
footer .brand-logo.on-dark { display: block; }
footer .brand-logo.on-light { display: none; }
.footer-top .brand .brand-logo { height: 30px; }
@media (max-width: 900px) { .site-header .brand .brand-logo { height: 30px; } }
@media (max-width: 600px) { .site-header .brand .brand-logo { height: 26px; } .footer-top .brand .brand-logo { height: 24px; } }

/* ---- the switch ------------------------------------------------------------ */
.theme-toggle, .motion-toggle {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 100px; cursor: pointer; font-size: 11px;
  color: #ded8e5; color: light-dark(#3d3742,#ded8e5);
  border: 1px solid #ffffff24; border: 1px solid light-dark(#1410142a,#ffffff24);
  background: linear-gradient(135deg, #ffffff12, #ffffff04); background: linear-gradient(135deg, light-dark(#ffffffe8,#ffffff12), light-dark(#ffffffa0,#ffffff04));
  box-shadow: inset 0 1px 2px #fff1; box-shadow: inset 0 1px 2px light-dark(#ffffff,#ffffff11), 0 2px 8px light-dark(#2a1e1a10,#0000);
  transition: border-color .25s, background .25s, transform .25s;
}
.theme-toggle:hover, .motion-toggle:hover { border-color: #ff875c88; }
.theme-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--soft-orange); overflow: visible; }
.theme-icon .sun, .theme-icon .moon { transform-origin: 50% 50%; transition: opacity .35s var(--ease-out), transform .45s var(--ease-out); }
.theme-icon .sun { fill: none; stroke: currentColor; stroke-width: 1.7; }
.theme-icon .sun circle { fill: currentColor; stroke: none; }
.theme-icon .moon { fill: currentColor; opacity: 0; transform: rotate(-60deg) scale(.5); }
:root[data-theme="light"] .theme-icon .sun { opacity: 0; transform: rotate(60deg) scale(.5); }
:root[data-theme="light"] .theme-icon .moon { opacity: 1; transform: none; }
@media (max-width: 900px) { .theme-label { display: none; } .theme-toggle { width: 36px; padding: 0; justify-content: center; } }
@media (max-width: 600px) { .site-header .theme-toggle { height: 32px; width: 32px; border-radius: 12px; } }

/* A short crossfade so the page turns rather than snaps. */
html.theme-switching body, html.theme-switching .site-header, html.theme-switching .hero-stage, html.theme-switching .section, html.theme-switching article, html.theme-switching .portal-window, html.theme-switching .mobile-menu { transition: background-color .4s ease, color .4s ease, border-color .4s ease; }

/* ---- the hero on paper ------------------------------------------------------- */
.brain-image { mask-image: none; -webkit-mask-image: none; filter: drop-shadow(0 18px 34px #ff440014); filter: drop-shadow(0 18px 34px light-dark(#c2360a22,#ff440014)); }
.hero-grid { background-image: linear-gradient(light-dark(#7a4a3038,#edc0aa44) 1px, transparent 1px), linear-gradient(90deg, light-dark(#7a4a3038,#edc0aa44) 1px, transparent 1px); }
.orbital-back { stroke: light-dark(#7a4a3042,#ffd4bc3b); }
.orbital-back:last-child { stroke: light-dark(#2a5a6a38,#b5eafa1f); }
.hero-intro h1 { text-shadow: 0 3px 30px light-dark(#2a1e1a12,#9eb1d21a); }
.hero-stage:before { background: radial-gradient(ellipse at 52% 60%, light-dark(#ffd9c48c,#361d2266), transparent 56%), linear-gradient(145deg, light-dark(#ffffff80,#262c3408), light-dark(#fff1e766,#55241512)); }
.knowledge-tags .tag { background: linear-gradient(145deg, light-dark(#ffffffeb,#ffffff17), light-dark(#fff7f1d0,#ffffff04)); color: light-dark(#141014,#f8f5ef); box-shadow: inset 0 1px light-dark(#ffffff,#ffffff22), 0 10px 35px light-dark(#2a1e1a1c,#00000055); }
/* Additive light has nothing to add on paper; let the animated channels sit as warm strokes. */
:root[data-theme="light"] .brain-drift > .electric-overlay { mix-blend-mode: normal; opacity: .72; }
:root[data-theme="light"] .brain-halo { background: #ff440030; }
:root[data-theme="light"] .hero-bottom { background: linear-gradient(transparent, #f5f2ec); }
:root[data-theme="light"] .hero-note { background: linear-gradient(145deg, #ffffffee, #fff7f1cc 45%); }

/* ---- surfaces the formula would have got wrong ------------------------------- */
.problem-grid article { box-shadow: inset 0 1px light-dark(#ffffff,#ffffff11), 0 20px 40px light-dark(#2a1e1a14,#00000022); }
.site-header { box-shadow: inset 0 1px light-dark(#ffffff,#ffffff13), 0 8px 32px light-dark(#2a1e1a14,#00000022); }
.site-header.scrolled { box-shadow: inset 0 1px light-dark(#ffffff,#ffffff17), 0 8px 32px light-dark(#2a1e1a1f,#00000055); }
.process-steps article { background: linear-gradient(145deg, light-dark(#ffffffe0,#ffffff05), light-dark(#ffffffa0,#ffffff01)); }
.timeline article, .year-stages > article, .catalog details { background: linear-gradient(145deg, light-dark(#ffffffe6,#ffffff0c), light-dark(#ffffffb0,#ffffff02)); }
.activation-sample { background: light-dark(#ffffffb8,#ffffff08); }
.impact-table-wrap { background: linear-gradient(135deg, light-dark(#ffffffd0,#ffffff06), light-dark(#ffffff90,#ffffff02)); }
.intelligence-layer { background: linear-gradient(125deg, light-dark(#ffe4a850,#ac7d1820), light-dark(#ffffff,#1b1721)); }
.blueprint-card { background: linear-gradient(145deg, light-dark(#ffffff,#30212c), light-dark(#fff6f0,#17101b)); box-shadow: inset 0 1px light-dark(#ffffff,#ffffff11), 0 14px 30px light-dark(#2a1e1a12,#0000); }
.comparison article { box-shadow: inset 0 1px light-dark(#ffffff,#ffffff11), 0 18px 40px light-dark(#2a1e1a12,#0000); }
.mobile-menu:not([hidden]) { box-shadow: 0 20px 50px light-dark(#2a1e1a26,#00000055); }