/* Maverick public landing simplification pass, 2026-05-06.
   Imports after legacy CSS. Keeps existing DOM IDs/API hooks intact. */

body[data-site="maverick"] {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 30rem),
    radial-gradient(circle at 84% 8%, rgba(74, 222, 255, 0.12), transparent 34rem),
    linear-gradient(145deg, var(--bg), var(--bg-2) 56%, #02040a);
  color: var(--text);
  font-family: var(--sans);
}

/* 2026-05-26: light-mode Maverick homepage fix.
   The dark tail in the body gradient was creating the grey/black fade under
   Security and camouflaging the closing-banner text. Keep dark mode cinematic;
   keep day mode one continuous light surface. */
[data-theme="light"] body[data-site="maverick"] {
  background:
    radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 30rem),
    radial-gradient(circle at 84% 8%, rgba(15, 95, 168, 0.06), transparent 34rem),
    linear-gradient(145deg, var(--bg), var(--bg-2) 62%, var(--bg));
}

body[data-site="maverick"]::before {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(148, 210, 255, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 210, 255, 0.052) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 86%);
}

body[data-site="maverick"] .grid-bg,
body[data-site="maverick"] .nav-neon-line,
body[data-site="maverick"] .hero-glow {
  display: none !important;
}

body[data-site="maverick"] .site-ticker {
  border-color: var(--line);
  background: rgba(7, 19, 34, 0.7);
}

/* 2026-05-07: home-page nav now inherits from style.css to match inner pages
   (today, performance, swarm, etc). Removed sticky pill nav, "Night"/"Day"
   text label, custom theme-btn sizing, mobile-dropdown border, and the
   no-animation override on dropdown children. The family burger cascade and
   icon-only chrome (padlock + GitHub + theme toggle) are now identical across
   the whole Maverick site. */

body[data-site="maverick"] .hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(330px, 0.8fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  width: min(var(--max), calc(100% - 32px));
  min-height: calc(100svh - 120px);
  margin: 0 auto;
  padding: 76px 0 64px;
  text-align: left;
}

body[data-site="maverick"] .hero-badge {
  grid-column: 1;
  grid-row: 1;
  max-width: 100%;
  width: fit-content;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--green);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: normal;
}

body[data-site="maverick"] .hero-title {
  display: block !important;
  grid-column: 1;
  grid-row: 2;
  max-width: 100%;
  margin: 0;
  color: var(--text);
  opacity: 1 !important;
  filter: none !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: var(--sans);
  font-size: clamp(3.4rem, 9vw, 7.4rem);
  line-height: 0.92;
  font-weight: 950;
  letter-spacing: -0.05em;
  text-shadow: none;
  white-space: normal;
}

body[data-site="maverick"] .hero-subtitle-brand {
  display: block !important;
  grid-column: 1;
  grid-row: 3;
  width: fit-content;
  margin: 14px 0 0;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: var(--radius-pill);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-site="maverick"] .hero-desc {
  grid-column: 1;
  grid-row: 4;
  width: 100%;
  max-width: 690px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.65;
  text-align: left;
  overflow-wrap: normal;
}

body[data-site="maverick"] .hero-actions {
  grid-column: 1;
  grid-row: 5;
  justify-content: flex-start !important;
  margin-top: 28px !important;
}

body[data-site="maverick"] .social-bar {
  grid-column: 1;
  grid-row: 6;
  justify-content: flex-start;
  margin-top: 18px;
}

body[data-site="maverick"] .hero-logo-img {
  grid-column: 2;
  grid-row: 1 / span 6;
  width: 100%;
  max-width: 560px !important;
  margin: 0 !important;
  justify-self: end;
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  background: linear-gradient(180deg, rgba(9, 28, 48, 0.68), rgba(3, 11, 20, 0.42));
  box-shadow: var(--shadow);
  overflow: hidden;
  aspect-ratio: 672 / 448;
}

body[data-site="maverick"] .hero-logo-img video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: var(--radius-large);
}

/* 2026-05-07: ripped out the bespoke .hero-fusion wrapper styling per operator
   review. The Shadow franchise page (canonical fusion-core.css alone) is the
   look we want. The Maverick landing now uses the same .fc-fusion-switcher
   section structure as Shadow, so we let franchise CSS render it untouched
   and only keep a Maverick-tinted heading colour below. */

/* 2026-05-07: Maverick now uses the canonical hub fc-core component
   (fc-core.css + fc-core.js, identical across the entire suite). All
   per-site .fusion-* / .fc-fusion-* overrides removed.

   The slot below sits between hero-desc and hero-proof-grid. It is a square
   centred frame so .core-wrap can render a perfect circle without the hero
   flex-column stretching it. */

body[data-site="maverick"] .hero-core-slot {
  /* hero is a flex column with explicit order:1..9 on every other child.
     Slot the core between hero-desc (order 4 desktop / 5 mobile) and the
     proof grid (order 8). On mobile this collapses to order 5 alongside
     hero-desc and DOM-order tiebreaks so it lands after the description. */
  order: 5;
  width: 100%;
  display: flex;
  justify-content: center;
  margin: clamp(20px, 4vw, 40px) auto clamp(48px, 6vw, 72px);
}

@media (max-width: 720px) {
  body[data-site="maverick"] .hero-core-slot {
    order: 6 !important;
  }
}

body[data-site="maverick"] .hero-core-slot .core-wrap {
  margin: 0 auto;
  width: clamp(280px, 78vw, 480px);
  height: clamp(280px, 78vw, 480px);
}

/* Belt + braces — guarantee the central CSS sphere stays a circle even if any
   ancestor flex/grid tries to stretch it. */
body[data-site="maverick"] .hero-core-slot .core-orb {
  width: clamp(118px, 30%, 168px);
  height: clamp(118px, 30%, 168px);
  aspect-ratio: 1;
  border-radius: 50%;
}

/* Maverick centre uses gold accent stops so the sphere reads as a glowing
   gold core (like the hub's yellow), with a stronger highlight + outer glow
   so it doesn't look flat against the hero. */
body[data-site="maverick"] .hero-core-slot .core-orb {
  background:
    radial-gradient(closest-side,
      color-mix(in srgb, white 92%, transparent),
      color-mix(in srgb, var(--gold) 70%, white 30%) 16%,
      color-mix(in srgb, var(--gold) 96%, black 4%) 46%,
      color-mix(in srgb, var(--gold) 78%, black 22%) 72%,
      color-mix(in srgb, var(--bg) 95%, transparent));
  box-shadow:
    0 0 60px 8px color-mix(in srgb, var(--gold) 38%, transparent),
    0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent),
    inset 0 0 28px color-mix(in srgb, var(--gold) 55%, transparent),
    inset 0 0 8px color-mix(in srgb, white 55%, transparent);
}

/* Stack the icon on top of the MAVERICK text inside the centre orb. */
body[data-site="maverick"] .hero-core-slot .core-orb-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

body[data-site="maverick"] .hero-core-slot .core-orb-mark {
  width: clamp(56px, 18%, 96px);
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 18px color-mix(in srgb, var(--gold) 55%, transparent));
  pointer-events: none;
}

/* Dark mode: keep the label white so it pops on the gold. */
body[data-site="maverick"] .hero-core-slot .core-orb-name {
  color: color-mix(in srgb, white 95%, transparent);
  font-size: clamp(0.78rem, 1.7vw, 0.95rem);
  text-shadow:
    0 1px 6px rgba(0, 0, 0, 0.75),
    0 0 18px color-mix(in srgb, var(--gold) 55%, transparent);
}

/* Day mode: the gold sphere washes lighter, so flip the label to a near-black
   that holds against the highlight + add a soft white halo so the edge reads
   even where the sphere is brightest. */
[data-theme="light"] body[data-site="maverick"] .hero-core-slot .core-orb-name {
  color: #0a0a0f;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 6px rgba(255, 255, 255, 0.45),
    0 0 16px color-mix(in srgb, var(--gold) 55%, transparent);
}

[data-theme="light"] body[data-site="maverick"] .hero-core-slot .core-orb-mark {
  filter: drop-shadow(0 2px 6px rgba(40, 24, 0, 0.45))
          drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
}


body[data-site="maverick"] .hero-proof-grid {
  grid-column: 1 / -1;
  grid-row: 7;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 32px;
}

body[data-site="maverick"] .hero-proof-item,
body[data-site="maverick"] .status-item,
body[data-site="maverick"] .engine-card,
body[data-site="maverick"] .origin-stat,
body[data-site="maverick"] .tier-card,
body[data-site="maverick"] .security-card,
body[data-site="maverick"] .explore-btn {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

body[data-site="maverick"] .hero-proof-item {
  min-height: 116px;
  padding: 18px;
  text-align: left;
}

body[data-site="maverick"] .hero-proof-value {
  font-family: var(--sans);
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: -0.05em;
}

body[data-site="maverick"] .hero-proof-label {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0;
}

body[data-site="maverick"] .frontier-panel,
body[data-site="maverick"] #swarm-hero-banner {
  grid-column: 2;
  grid-row: 7;
  align-self: stretch;
  width: 100% !important;
  max-width: none !important;
  margin: 32px 0 0 !important;
}

body[data-site="maverick"] .frontier-panel {
  display: none;
}

body[data-site="maverick"] .status-bar-wrap {
  grid-column: 1 / -1;
  grid-row: 8;
  width: 100%;
  max-width: none !important;
  margin-top: 18px !important;
}

body[data-site="maverick"] .status-bar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  border: 0;
  background: transparent;
}

body[data-site="maverick"] .status-item {
  min-height: 94px;
  padding: 14px;
}

body[data-site="maverick"] .ticker-bar {
  border-color: var(--line);
  background: rgba(7, 19, 34, 0.72);
}

body[data-site="maverick"] .ticker-bar--section-break {
  display: none !important;
}

body[data-site="maverick"] section,
body[data-site="maverick"] .section-divider {
  border-color: var(--line);
}

body[data-site="maverick"] .section-inner {
  width: min(var(--max), calc(100% - 32px));
  max-width: var(--max);
  padding-block: clamp(64px, 8vw, 104px);
}

body[data-site="maverick"] .section-label {
  margin-bottom: 14px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0;
}

body[data-site="maverick"] .section-title {
  max-width: 820px;
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(2.2rem, 5.4vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-shadow: none;
}

body[data-site="maverick"] .section-text {
  max-width: 820px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

body[data-site="maverick"] #about .section-text:nth-of-type(n+4) {
  display: none;
}

body[data-site="maverick"] .origin-grid,
body[data-site="maverick"] .engine-grid,
body[data-site="maverick"] .explore-grid,
body[data-site="maverick"] .tier-grid,
body[data-site="maverick"] .security-grid {
  gap: 14px;
}

body[data-site="maverick"] .engine-card,
body[data-site="maverick"] .security-card,
body[data-site="maverick"] .tier-card {
  padding: 22px;
}

body[data-site="maverick"] .chain-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body[data-site="maverick"] .chain-line {
  display: none;
}

body[data-site="maverick"] .chain-node {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

body[data-site="maverick"] .chain-desc {
  color: var(--muted);
}

body[data-site="maverick"] .footer {
  border-top: 1px solid var(--line);
  background: rgba(4, 12, 22, 0.78);
}

/* 2026-05-26 — day-mode flip: the dark footer band was wrecking contrast
   below the closing banner once the rest of the page went light.
   Pin to a soft light surface so the page reads as one continuous tone
   from the closing banner through the footer + risk strip. */
[data-theme="light"] body[data-site="maverick"] .footer {
  background: rgba(234, 244, 255, 0.96);
  border-top: 1px solid var(--border);
}

/* Risk-footer + Quantum credit bars are injected by /js/risk-footer.js with
   inline rgba() backgrounds, so we override them by id (specificity wins
   over inline color via this rule's id + !important). */
[data-theme="light"] #fc-risk-footer {
  background: rgba(254, 235, 235, 0.96) !important;
  color: #7f1d1d !important;
  border-top: 1px solid rgba(127, 29, 29, 0.24) !important;
}
[data-theme="light"] #fc-risk-footer strong { color: #7f1d1d !important; }
[data-theme="light"] #fc-risk-footer a { color: #991b1b !important; }

[data-theme="light"] #fc-quantum-credit {
  background: rgba(220, 230, 244, 0.96) !important;
  color: rgba(60, 70, 86, 0.85) !important;
  border-top: 1px solid rgba(60, 70, 86, 0.16) !important;
}
[data-theme="light"] #fc-quantum-credit a { color: rgba(60, 70, 86, 0.85) !important; }

/* 2026-05-26 — also flip the mid-page ticker-bar (was a dark navy stripe
   between the positions section and the about section in light mode). */
[data-theme="light"] body[data-site="maverick"] .ticker-bar {
  background: rgba(234, 244, 255, 0.96);
  border-color: var(--border);
}
[data-theme="light"] body[data-site="maverick"] .ticker-bar .ticker-item {
  color: var(--text);
}

[data-theme="light"] body[data-site="maverick"] #security,
[data-theme="light"] body[data-site="maverick"] .maverick-closing-banner {
  background: transparent !important;
  color: var(--text);
}

[data-theme="light"] body[data-site="maverick"] .maverick-closing-banner h2 {
  color: var(--text) !important;
}

[data-theme="light"] body[data-site="maverick"] .maverick-closing-banner p {
  color: var(--muted) !important;
}

@media (max-width: 1120px) {
  body[data-site="maverick"] .nav-center {
    display: none;
  }

  body[data-site="maverick"] .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  body[data-site="maverick"] .hero-logo-img,
  body[data-site="maverick"] .hero-badge,
  body[data-site="maverick"] .hero-title,
  body[data-site="maverick"] .hero-subtitle-brand,
  body[data-site="maverick"] .hero-desc,
  body[data-site="maverick"] .hero-actions,
  body[data-site="maverick"] .social-bar,
  body[data-site="maverick"] .hero-proof-grid,
  body[data-site="maverick"] .status-bar-wrap {
    grid-column: 1;
    grid-row: auto;
  }

  body[data-site="maverick"] .hero-logo-img {
    justify-self: stretch;
    max-width: 100% !important;
  }

  body[data-site="maverick"] .status-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-site="maverick"] .chain-flow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  html,
  body[data-site="maverick"] {
    overflow-x: hidden;
  }

  /* nav rules removed 2026-05-07 — let style.css handle nav at all widths */

  body[data-site="maverick"] .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-inline: auto !important;
    padding: 50px 0 48px !important;
    overflow: visible !important;
  }

  body[data-site="maverick"] .hero > * {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  body[data-site="maverick"] .hero-badge { order: 1; }
  body[data-site="maverick"] .hero-title { order: 2; }
  body[data-site="maverick"] .hero-subtitle-brand { order: 3; }
  body[data-site="maverick"] .hero-desc { order: 4; }
  body[data-site="maverick"] .hero-actions { order: 5; }
  body[data-site="maverick"] .social-bar {
    order: 6;
    justify-content: center;
    margin-top: 18px;
  }
  body[data-site="maverick"] .hero-logo-img { order: 7; }
  body[data-site="maverick"] .hero-proof-grid { order: 8; }
  body[data-site="maverick"] .status-bar-wrap { order: 9; }

  body[data-site="maverick"] .hero-title {
    font-size: clamp(2.65rem, 14vw, 3.75rem);
    letter-spacing: -0.045em;
  }

  body[data-site="maverick"] .hero-badge,
  body[data-site="maverick"] .hero-desc {
    width: 100%;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  body[data-site="maverick"] .hero-logo-img {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 20px !important;
  }

  body[data-site="maverick"] .hero-proof-grid,
  body[data-site="maverick"] .status-bar {
    grid-template-columns: 1fr;
  }

  body[data-site="maverick"] .hero-actions {
    flex-direction: column;
  }

  body[data-site="maverick"] .hero-actions a,
  body[data-site="maverick"] .btn-outline,
  body[data-site="maverick"] .btn-primary {
    width: 100%;
    justify-content: center;
  }

  body[data-site="maverick"] .section-inner {
    width: calc(100% - 24px);
  }
}

/* 2026-05-06: simplify the public MAVERICK hero.
   The previous split-grid placed copy on the left and the video on the right,
   then pushed the video far down on mobile. Use a single, centered stack so the
   product signal is immediate and the same on desktop/mobile. */
body[data-site="maverick"] .hero {
  grid-template-columns: 1fr !important;
  justify-items: center;
  align-items: start;
  gap: 0;
  min-height: auto;
  padding-top: clamp(8px, 2vw, 20px);
  text-align: center;
}

body[data-site="maverick"] .hero-badge,
body[data-site="maverick"] .hero-title,
body[data-site="maverick"] .hero-subtitle-brand,
body[data-site="maverick"] .hero-desc,
body[data-site="maverick"] .hero-actions,
body[data-site="maverick"] .social-bar,
body[data-site="maverick"] .hero-logo-img,
body[data-site="maverick"] .hero-proof-grid,
body[data-site="maverick"] .status-bar-wrap {
  grid-column: 1 !important;
  justify-self: center;
}

body[data-site="maverick"] .hero-badge {
  grid-row: 1;
  margin-inline: auto;
}

body[data-site="maverick"] .hero-title {
  grid-row: 2;
  text-align: center;
}

body[data-site="maverick"] .hero-subtitle-brand {
  grid-row: 3;
  margin-inline: auto;
}

body[data-site="maverick"] .hero-logo-img {
  grid-row: 4 !important;
  width: min(880px, 100%) !important;
  max-width: min(880px, 100%) !important;
  margin: clamp(18px, 3vw, 28px) auto 0 !important;
  justify-self: center !important;
}

body[data-site="maverick"] .hero-desc {
  grid-row: 5;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

body[data-site="maverick"] .hero-actions {
  grid-row: 6;
  justify-content: center !important;
}

body[data-site="maverick"] .social-bar {
  grid-row: 7;
  justify-content: center !important;
}

body[data-site="maverick"] .hero-proof-grid {
  grid-row: 8;
}

body[data-site="maverick"] .status-bar-wrap {
  grid-row: 9;
}

@media (max-width: 720px) {
  body[data-site="maverick"] .connect-wallet,
  body[data-site="maverick"] .wallet-button,
  body[data-site="maverick"] #mav-wallet-badge,
  body[data-site="maverick"] #mav-wallet-btn,
  body[data-site="maverick"] .nav-right .btn-outline {
    display: none !important;
  }

  body[data-site="maverick"] .hero-badge {
    font-size: 0.68rem;
    line-height: 1.35;
  }

  body[data-site="maverick"] .hero-title {
    max-width: 100%;
    font-size: clamp(2.1rem, 17vw, 3.35rem) !important;
    letter-spacing: -0.055em;
    overflow-wrap: normal;
    word-break: normal;
  }

  body[data-site="maverick"] .hero-desc {
    font-size: 1rem;
    line-height: 1.55;
    padding-inline: 2px;
    width: calc(100% - 18px) !important;
    overflow-wrap: break-word;
  }

  body[data-site="maverick"] .hero-logo-img {
    order: 4 !important;
    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    margin-top: 16px !important;
  }

  body[data-site="maverick"] .hero-desc { order: 5 !important; }
  body[data-site="maverick"] .hero-actions { order: 6 !important; }
  body[data-site="maverick"] .social-bar { order: 7 !important; }
  body[data-site="maverick"] .hero-proof-grid { order: 8 !important; }
  body[data-site="maverick"] .status-bar-wrap { order: 9 !important; }
}

/* 2026-05-07: nav positioning + sizing now lives entirely in style.css so the
   landing page matches today/performance/swarm/etc exactly. The previous
   landing-only nav rules (fixed/sticky overrides, hamburger sizing, theme-btn
   sizing, nav-icon-link hover) drifted from the inner-page chrome on mobile,
   producing the wide "Night" pill + missing padlock/GitHub layout. */