/*
Purpose: presentation-only Mullusi Causal Governance Nexus visual layer for the canonical homepage.
Governance scope: layout, spacing, theme-aware visual hierarchy, surface treatment, and responsive presentation.
Invariants: the selected light or dark theme remains authoritative, canonical content never depends on animation for visibility, and status/proof semantics remain owned by canonical HTML and structured data.
*/

html[data-mullusi-homepage-presentation="nexus-v1"] {
  --nexus-bg: #06100c;
  --nexus-panel: rgba(10, 25, 18, 0.86);
  --nexus-panel-strong: #0b1b14;
  --nexus-ink: #f4f8f5;
  --nexus-muted: #aebbb4;
  --nexus-line: rgba(197, 226, 210, 0.14);
  --nexus-line-strong: rgba(197, 237, 216, 0.28);
  --nexus-accent: #baf6d8;
  --nexus-accent-soft: rgba(186, 246, 216, 0.08);
  --nexus-warning: #f0d29a;
  --nexus-body-background:
    radial-gradient(circle at 10% 0%, rgba(65, 163, 113, 0.15), transparent 30rem),
    radial-gradient(circle at 92% 13%, rgba(70, 142, 160, 0.08), transparent 27rem),
    linear-gradient(180deg, #06100c 0%, #07100d 44%, #050b08 100%);
  --nexus-nav-background: rgba(6, 16, 12, 0.82);
  --nexus-grid-line: rgba(186, 246, 216, 0.028);
  --nexus-lead: #c5d0ca;
  --nexus-snapshot-cell: rgba(7, 18, 13, 0.96);
  --nexus-machine-background:
    radial-gradient(circle at center, rgba(133, 220, 177, 0.13), transparent 58%),
    rgba(8, 19, 15, 0.9);
  --nexus-machine-shadow: inset 0 0 90px rgba(0, 0, 0, 0.32), 0 30px 100px rgba(0, 0, 0, 0.18);
  --nexus-node-background: rgba(7, 17, 13, 0.93);
  --nexus-button-ink: #06100c;
  --nexus-warning-line: rgba(240, 210, 154, 0.2);
  --nexus-warning-background: rgba(240, 210, 154, 0.055);
}

html[data-mullusi-homepage-presentation="nexus-v1"][data-theme="light"] {
  --nexus-bg: #f7f8fb;
  --nexus-panel: rgba(255, 255, 255, 0.9);
  --nexus-panel-strong: #ffffff;
  --nexus-ink: #111827;
  --nexus-muted: #4f5b6c;
  --nexus-line: rgba(73, 96, 117, 0.18);
  --nexus-line-strong: rgba(10, 95, 89, 0.34);
  --nexus-accent: #0a5f59;
  --nexus-accent-soft: rgba(10, 95, 89, 0.08);
  --nexus-warning: #7a4b08;
  --nexus-body-background:
    radial-gradient(circle at 10% 0%, rgba(10, 95, 89, 0.09), transparent 30rem),
    radial-gradient(circle at 92% 13%, rgba(43, 101, 121, 0.07), transparent 27rem),
    linear-gradient(180deg, #f7f8fb 0%, #f2f6f5 44%, #ffffff 100%);
  --nexus-nav-background: rgba(247, 248, 251, 0.9);
  --nexus-grid-line: rgba(10, 95, 89, 0.055);
  --nexus-lead: #455366;
  --nexus-snapshot-cell: rgba(255, 255, 255, 0.96);
  --nexus-machine-background:
    radial-gradient(circle at center, rgba(10, 95, 89, 0.1), transparent 58%),
    rgba(255, 255, 255, 0.92);
  --nexus-machine-shadow: inset 0 0 72px rgba(10, 95, 89, 0.07), 0 24px 72px rgba(43, 60, 74, 0.12);
  --nexus-node-background: rgba(255, 255, 255, 0.94);
  --nexus-button-ink: #ffffff;
  --nexus-warning-line: rgba(122, 75, 8, 0.24);
  --nexus-warning-background: rgba(240, 210, 154, 0.18);
}

html[data-mullusi-homepage-presentation="nexus-v1"] body.homepage {
  background: var(--nexus-body-background);
  color: var(--nexus-ink);
}

html[data-mullusi-homepage-presentation="nexus-v1"] .site-nav {
  background: var(--nexus-nav-background);
  border-bottom-color: var(--nexus-line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens-hero {
  position: relative;
  overflow: clip;
  padding-top: clamp(72px, 9vw, 120px);
  padding-bottom: clamp(52px, 7vw, 88px);
}

html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--nexus-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--nexus-grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 92%);
}

html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: clamp(38px, 6vw, 78px);
  align-items: center;
}

html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens-copy {
  max-width: 760px;
}

html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens-copy h1 {
  margin: 18px 0 22px;
  max-width: 780px;
  font-size: clamp(3.25rem, 7.1vw, 6.8rem);
  line-height: .92;
  letter-spacing: -.062em;
  text-wrap: balance;
}

html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens-copy .lead {
  max-width: 720px;
  color: var(--nexus-lead);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.72;
}

html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens-snapshot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid var(--nexus-line);
  border-radius: 16px;
  background: var(--nexus-line);
}

html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens-snapshot > div {
  padding: 15px 17px;
  background: var(--nexus-snapshot-cell);
}

html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens-snapshot dt {
  color: var(--nexus-muted);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens-snapshot dd {
  margin: 4px 0 0;
  font-weight: 760;
}

html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens-machine {
  min-height: 520px;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--nexus-line);
  border-radius: 30px;
  background: var(--nexus-machine-background);
  box-shadow: var(--nexus-machine-shadow);
}

html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens-node,
html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens-center,
html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens-evidence-rail {
  border-color: var(--nexus-line-strong);
  background-color: var(--nexus-node-background);
}

html[data-mullusi-homepage-presentation="nexus-v1"] .hero-actions .btn,
html[data-mullusi-homepage-presentation="nexus-v1"] .public-offer-actions .btn,
html[data-mullusi-homepage-presentation="nexus-v1"] .proof-path-actions .btn,
html[data-mullusi-homepage-presentation="nexus-v1"] .causal-lattice-teaser-actions .btn {
  border-radius: 12px;
  min-height: 48px;
}

html[data-mullusi-homepage-presentation="nexus-v1"] .hero-demo-boundary {
  margin: 0.75rem 0 0;
  color: var(--nexus-muted);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

html[data-mullusi-homepage-presentation="nexus-v1"] .proof-snapshot-grid strong {
  font-variant-numeric: tabular-nums;
}

html[data-mullusi-homepage-presentation="nexus-v1"] [data-proof-snapshot-state="error"] .proof-snapshot-grid {
  border-color: var(--nexus-warm);
}

html[data-mullusi-homepage-presentation="nexus-v1"] .hero-actions .btn-solid,
html[data-mullusi-homepage-presentation="nexus-v1"] .public-offer-actions .btn-solid,
html[data-mullusi-homepage-presentation="nexus-v1"] .proof-path-actions .btn-solid,
html[data-mullusi-homepage-presentation="nexus-v1"] .causal-lattice-teaser-actions .btn-solid {
  background: var(--nexus-accent);
  border-color: var(--nexus-accent);
  color: var(--nexus-button-ink);
}

html[data-mullusi-homepage-presentation="nexus-v1"] .band {
  padding-top: clamp(72px, 8vw, 108px);
  padding-bottom: clamp(72px, 8vw, 108px);
}

html[data-mullusi-homepage-presentation="nexus-v1"] .public-offer,
html[data-mullusi-homepage-presentation="nexus-v1"] .fit-boundary,
html[data-mullusi-homepage-presentation="nexus-v1"] .causal-lattice-teaser,
html[data-mullusi-homepage-presentation="nexus-v1"] .proof-path,
html[data-mullusi-homepage-presentation="nexus-v1"] .brand-architecture {
  border-top: 1px solid var(--nexus-line);
}

html[data-mullusi-homepage-presentation="nexus-v1"] .public-offer-card,
html[data-mullusi-homepage-presentation="nexus-v1"] .fit-boundary-grid article,
html[data-mullusi-homepage-presentation="nexus-v1"] .proof-path-steps li,
html[data-mullusi-homepage-presentation="nexus-v1"] .brand-map-root,
html[data-mullusi-homepage-presentation="nexus-v1"] .brand-map-branch,
html[data-mullusi-homepage-presentation="nexus-v1"] .causal-lattice-teaser-scene {
  border-color: var(--nexus-line);
  background: var(--nexus-panel);
  border-radius: 20px;
}

html[data-mullusi-homepage-presentation="nexus-v1"] .public-offer-intro h2,
html[data-mullusi-homepage-presentation="nexus-v1"] .fit-boundary-copy h2,
html[data-mullusi-homepage-presentation="nexus-v1"] .proof-path-copy h2,
html[data-mullusi-homepage-presentation="nexus-v1"] .brand-architecture-copy h2,
html[data-mullusi-homepage-presentation="nexus-v1"] .causal-lattice-teaser-copy h2 {
  max-width: 860px;
  font-size: clamp(2.15rem, 4.7vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.045em;
  text-wrap: balance;
}

html[data-mullusi-homepage-presentation="nexus-v1"] .causal-lattice-teaser-grid,
html[data-mullusi-homepage-presentation="nexus-v1"] .brand-map-branches {
  gap: clamp(18px, 3vw, 32px);
}

html[data-mullusi-homepage-presentation="nexus-v1"] .causal-lattice-teaser-core {
  filter: drop-shadow(0 0 38px rgba(133, 220, 177, .18));
}

html[data-mullusi-homepage-presentation="nexus-v1"] .causal-lattice-teaser-kernel {
  color: var(--nexus-accent);
}

html[data-mullusi-homepage-presentation="nexus-v1"] .fit-boundary-limit {
  margin-top: 22px;
  border: 1px solid var(--nexus-warning-line);
  border-radius: 16px;
  background: var(--nexus-warning-background);
}

html.js-enabled[data-mullusi-homepage-presentation="nexus-v1"] .reveal {
  opacity: 1;
  transform: none;
}

html[data-mullusi-homepage-presentation="nexus-v1"] .proof-path-steps li > span,
html[data-mullusi-homepage-presentation="nexus-v1"] .public-offer-card > span,
html[data-mullusi-homepage-presentation="nexus-v1"] .tag {
  color: var(--nexus-accent);
}

html[data-mullusi-homepage-presentation="nexus-v1"] .brand-map-root {
  background:
    radial-gradient(circle at top right, rgba(186,246,216,.1), transparent 42%),
    var(--nexus-panel-strong);
}

html[data-mullusi-homepage-presentation="nexus-v1"] a:focus-visible,
html[data-mullusi-homepage-presentation="nexus-v1"] button:focus-visible {
  outline: 3px solid var(--nexus-accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html[data-mullusi-homepage-presentation="nexus-v1"] *,
  html[data-mullusi-homepage-presentation="nexus-v1"] *::before,
  html[data-mullusi-homepage-presentation="nexus-v1"] *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (max-width: 960px) {
  html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens {
    grid-template-columns: 1fr;
  }
  html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens-machine {
    min-height: 460px;
  }
}

@media (max-width: 640px) {
  html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens-hero {
    padding-top: 62px;
  }
  html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens-copy h1 {
    font-size: clamp(2.75rem, 14vw, 4.15rem);
  }
  html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens-snapshot {
    grid-template-columns: 1fr;
  }
  html[data-mullusi-homepage-presentation="nexus-v1"] .claim-lens-machine {
    min-height: 390px;
    border-radius: 22px;
  }
}
