/*
Theme Name: ORBICUL — Design System v2.2
Theme URI: https://orbicul.com
Author: ORGX
Version: 2.2
Text Domain: orbicul
Description: Orbicul — Real-time valuation intelligence for private equity. By ORGX. ORGX Web Family design-system aligned build.
*/

/* =============================================================================
   RESET
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
:where(body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure) { margin: 0; padding: 0; }
body { min-height: 100vh; overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
input, button, select, textarea { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto !important; }
}

/* =============================================================================
   TOKENS
   ============================================================================= */
:root {
  --black:      #070a0f;
  --navy:       #0D0F12;
  --panel:      #16181C;
  --panel-soft: #1B1E23;
  --border:     rgba(255, 255, 255, 0.07);
  --border-hi:  rgba(255, 255, 255, 0.12);
  --text:       #EDEFF1;
  --muted:      #9EA3AA;
  --dim:        #62676E;
  --lime:       #C6E62E;
  --lime-muted: #A8C425;
  --lime-soft:  rgba(198, 230, 46, 0.22);
  --lime-dim:   rgba(198, 230, 46, 0.09);
  --lime-glow:  rgba(198, 230, 46, 0.16);

  --f-display: Georgia, "Times New Roman", serif;
  --f-ui:      Inter, Arial, Helvetica, sans-serif;

  --wrap:  1200px;
  --pad:   clamp(24px, 5vw, 64px);

  --sp-xs: clamp(16px,  2vw,  28px);
  --sp-sm: clamp(32px,  4vw,  60px);
  --sp-md: clamp(72px,  9vw, 120px);
  --sp-lg: clamp(104px,13vw, 168px);

  --r:        12px;
  --r-lg:     20px;
  --hdr-h:    84px;
  --surface:  #111316;

  /* ── Category/data colours — were literal hex repeated 6+ times, now named
        to remove drift risk. Palette choice itself is unchanged. */
  --data-blue:  #4B9EE8;
  --data-amber: #E8A84B;
  --data-teal:  #4BE8B0;

  /* ==========================================================================
     ORGX FOUNDATION — shared semantic design tokens (ORGX Web Family)
     Added during the ORGX/Digital Services/Orbicul harmonisation project.
     Token NAMES match ORGX Clean's and Digital Services' semantic convention;
     VALUES are Orbicul's own — this shares the discipline, not the appearance.
     Orbicul's dark surfaces, lime accent, category colours, and --r/-lg radii
     above are untouched: they are the product's own identity and/or were
     already found well-disciplined by the audit. See ORGX-DESIGN-SYSTEM.md.
     ========================================================================== */

  /* -- typography: family. Orbicul deliberately uses two families (serif
        display + sans UI) — --orgx-font-primary names the UI/body family,
        matching the other two themes' convention that font-primary is the
        default body font. --f-display stays as its own distinct token;
        it is Orbicul's product identity, not a shared-family concern. -- */
  --orgx-font-primary: var(--f-ui);

  /* -- typography: card/feature-title hierarchy — the audit found 5 near-
        identical "H3-equivalent" card headings (0.98–1.08rem) with no shared
        token. On inspection they split into two real tiers by card padding/
        density, not one accident: the three tighter-padding cards (model,
        how-step, and the pillar-name strip) already cluster at ~1rem: the
        two more spacious cards (platform, who) run slightly larger. -- */
  --orgx-font-size-card-title:    1rem;    /* model-card, how-step, pillar-name (0.98/1/1 → 1, ≤0.32px) */
  --orgx-font-size-card-title-lg: 1.06rem; /* platform-card, who-card (1.05/1.08 → 1.06, ≤0.32px) — more spacious card family */

  /* -- typography: body/paragraph — the audit's 13-value body-size sprawl,
        resolved into 4 deliberate roles rather than force-merged into one.
        body-sm is a genuinely smaller "card supporting text" tier; lead is
        the larger intro-paragraph tier; body-lg sits between for secondary/
        intro body copy. Values picked from the dominant exact-match cluster
        in each band, per-site deltas are all ≤0.32px (a couple of body-lg
        merges reach ~0.64px, consistent with merges already accepted
        elsewhere in this project). -- */
  --orgx-font-size-body-sm: 0.76rem;
  --orgx-font-size-body:    0.82rem;
  --orgx-font-size-body-lg: 0.9rem;
  --orgx-font-size-lead:    1rem;

  /* -- typography: label/meta — the audit's largest inconsistency cluster
        (~18 sizes, 0.48–0.82rem for 3-4 real roles). Resolved into the
        roles the audit itself named, plus the dashboard's own compressed
        micro-scale kept DELIBERATELY separate (see the audit: "should
        probably stay somewhat separate from the page-level type scale...
        preserve as intentional product-UI density"). -- */
  --orgx-font-size-eyebrow: 0.8rem;   /* category/section eyebrow labels */
  --orgx-font-size-label:   0.72rem;  /* nav links, footer links, captions, pills */
  --orgx-font-size-index:   0.58rem;  /* small numbered/tag index markers across card families */
  --orgx-font-size-micro:   0.6rem;   /* small utility text (dashboard readouts, footer sub-line) */

  /* -- typography: dashboard's own micro-label tier — intentionally its own
        role, not merged into --orgx-font-size-label/-index, per the audit's
        explicit recommendation to preserve the device-frame mock's density. -- */
  --orgx-font-size-metric-label: 0.54rem;

  /* -- typography: button-specific size shared by two nav/CTA button
        variants (real exact duplicate, not a coincidental match — unlike
        the base .orb-btn/--lg sizes, which happen to equal --orgx-font-
        size-body/-body-lg by coincidence and are deliberately NOT aliased
        to them, since a button's size and body text's size are different
        design decisions that happen to share a number today). -- */
  --orgx-font-size-button-sm: 0.78rem;

  /* -- typography: line-height. Orbicul's line-heights drift accidentally
        (unlike its font-sizes, which the audit found deliberately shrink
        for density) — ten near-identical values for comparable copy.
        Resolved into 3 roles from the real dominant clusters; the global
        p{} default (1.72) is named as --relaxed since it is the single
        most-used value in the file by inheritance. -- */
  --orgx-line-height-tight:   1.55;
  --orgx-line-height-body:    1.65;
  --orgx-line-height-relaxed: 1.72;

  /* -- spacing: fixed — applied ONLY where an existing exact px value
        already matched a canonical step (zero visual change). Steps with
        no real call site were not declared, to avoid repeating the
        "declared but unused" mistake corrected earlier in this project. -- */
  --orgx-space-2: 8px;
  --orgx-space-3: 12px;
  --orgx-space-4: 16px;
  --orgx-space-5: 24px;

  /* -- spacing: fluid — two clamp() curves that recurred identically across
        unrelated components with no prior name. -- */
  --orgx-space-fluid-md: clamp(18px, 2.2vw, 28px);
  --orgx-space-fluid-lg: clamp(32px, 4vw, 56px);

  /* -- elevation: the audit's two near-duplicate "elevated card" shadow
        recipes, named rather than force-merged (merging would be a real,
        visible depth change to whichever family didn't win). -card is the
        more common recipe (model/platform/who); -card-subtle is the
        problem/how variant. -domains-card was previously missing its outer
        shadow entirely (a real bug, not a lighter treatment) — fixed to
        use -card, matching its 3 visual siblings. -- */
  --orgx-shadow-card:        0 2px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 var(--border-hi);
  --orgx-shadow-card-subtle: 0 2px 20px rgba(0, 0, 0, 0.4),  inset 0 1px 0 var(--border-hi);

  /* -- motion: the audit's 4-value "fast" cluster (0.2/0.22/0.25/0.28s)
        turned out to be THREE real, distinct clusters tied to genuine
        component families, not one accident — named as 3 tiers rather than
        force-merged into one, matching how Digital Services' similarly-
        close 180/220/320ms clusters were kept as 3 tiers. 0.28s (mobile nav
        reveal) is its own distinct "reveal" timing, left as a literal. No
        --orgx-ease-standard is declared: Orbicul has no existing explicit
        easing curve to name (the audit confirms only implicit default
        `ease` is used throughout) — inventing one would be a new design
        decision, not a naming pass. -- */
  --orgx-duration-fast:    0.2s;   /* problem/domains cards, nav + footer links */
  --orgx-duration-default: 0.22s;  /* button family, qa accordion icon */
  --orgx-duration-slow:    0.25s;  /* model/how/platform/who cards */

  /* -- motion: hover-lift — two real tiers found across cards AND buttons,
        not one. -sm is shared by the problem/domains card pair and the
        primary/ghost buttons; the plain tier is shared by how/platform/who
        cards. model-card's -4px and nav-cta's -1px are each genuine
        single-use extremes of the same interaction and are left as
        literals rather than forced into either tier. -- */
  --orgx-hover-lift:    -3px;
  --orgx-hover-lift-sm: -2px;
}

/* =============================================================================
   ANIMATIONS
   ============================================================================= */
@keyframes spin     { to { transform: rotate(360deg);  } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px var(--lime-glow); }
  50%       { box-shadow: 0 0 22px var(--lime-glow), 0 0 48px var(--lime-dim); }
}

@keyframes bar-in {
  from { width: 0; }
  to   { width: var(--w, 100%); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scroll-hint {
  0%   { transform: scaleY(0); transform-origin: top;    opacity: 0; }
  45%  { transform: scaleY(1); transform-origin: top;    opacity: 0.45; }
  55%  { transform: scaleY(1); transform-origin: bottom; opacity: 0.45; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* =============================================================================
   GLOBAL
   ============================================================================= */
html { scroll-behavior: smooth; overflow-x: hidden; background: var(--black); }

body {
  background: var(--black);
  color: var(--text);
  font-family: var(--orgx-font-primary);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Subtle grain texture — fixed overlay across entire page */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  background-size: 280px 280px;
  opacity: 0.022;
  pointer-events: none;
  z-index: 9000;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--text);
  line-height: 1.14;
  letter-spacing: -0.02em;
}

p { color: var(--muted); line-height: var(--orgx-line-height-relaxed); }

strong { color: var(--text); font-weight: 600; }

/* =============================================================================
   LAYOUT
   ============================================================================= */
.orb-container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.orb-section { position: relative; padding-block: var(--sp-md); }

.orb-center { text-align: center; }

.orb-section__header { max-width: 640px; margin-bottom: var(--sp-sm); }
.orb-section__header.orb-center { margin-inline: auto; }

.orb-section__title {
  font-size: clamp(1.95rem, 3.8vw, 3.1rem);
  margin-bottom: 1rem;
}

.orb-section__intro {
  font-size: var(--orgx-font-size-lead); /* was 1.02rem, Δ0.32px — shared across most sections' intro paragraph */
  color: var(--muted);
  max-width: 520px;
  line-height: var(--orgx-line-height-relaxed);
}
.orb-section__header.orb-center .orb-section__intro { margin-inline: auto; }

/* Orbital ring decoration element */
.orb-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  pointer-events: none;
}

/* =============================================================================
   UTILITIES
   ============================================================================= */
.orb-eyebrow {
  display: block;
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-eyebrow); /* was 0.82rem, merged onto the eyebrow role (Δ0.32px) */
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--lime);
  margin-bottom: 1.25rem;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* =============================================================================
   BUTTONS
   ============================================================================= */
.orb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.8rem 1.75rem;
  font-family: var(--f-ui);
  font-size: 0.82rem; /* coincidentally equals --orgx-font-size-body; deliberately NOT aliased — button size and body-text size are different decisions that happen to share a value today */
  font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: var(--r);
  border: none;
  cursor: pointer;
  transition: background var(--orgx-duration-default), color var(--orgx-duration-default), border-color var(--orgx-duration-default),
              transform var(--orgx-duration-default), box-shadow var(--orgx-duration-default);
  white-space: nowrap;
}

.orb-btn--primary {
  background: var(--lime);
  color: #060708;
  font-weight: 600;
}
.orb-btn--primary:hover {
  background: #d5f042;
  transform: translateY(var(--orgx-hover-lift-sm));
  box-shadow: 0 8px 32px var(--lime-glow);
}

.orb-btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.orb-btn--ghost:hover {
  border-color: rgba(198, 230, 46, 0.38);
  color: var(--lime);
  transform: translateY(var(--orgx-hover-lift-sm));
}

.orb-btn--subtle {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: var(--orgx-font-size-button-sm);
}
.orb-btn--subtle:hover { color: var(--text); border-color: var(--border-hi); }
/* No hover-lift here, unlike --primary/--ghost — reviewed against the audit's
   "plausibly deliberate" note and preserved as intentional: --subtle is
   consistently the quieter tertiary action (smaller font too), not a
   missed transform. */

.orb-btn--lg {
  padding: 1rem 2.5rem;
  font-size: 0.9rem; /* coincidentally equals --orgx-font-size-body-lg; deliberately NOT aliased, same reasoning as the base .orb-btn size */
  letter-spacing: 0.05em;
}

.orb-btn--nav-cta {
  background: transparent;
  color: var(--lime);
  border: 1px solid rgba(198, 230, 46, 0.50);
  font-size: var(--orgx-font-size-button-sm);
  padding: 0.6rem 1.35rem;
  border-radius: var(--r); /* was hardcoded 12px — same value, wrong reference; real bug per audit */
}
.orb-btn--nav-cta:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: #060708;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--lime-glow);
}

/* =============================================================================
   HEADER
   ============================================================================= */
.orb-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--hdr-h);
  z-index: 100;
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background 0.35s, backdrop-filter 0.35s, border-color 0.35s;
}

.orb-header::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(7, 10, 15, 0.72) 0%, rgba(7, 10, 15, 0.28) 55%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

.orb-header.is-scrolled {
  background: rgba(7, 10, 15, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--border);
}

.orb-header__inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  gap: 1rem;
}

/* Logo — actual image */
.orb-header__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  text-decoration: none;
}

.orb-header__logo {
  height: 38px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.orb-header__by {
  font-family: var(--f-ui);
  font-size: 0.56rem; /* reviewed against --orgx-font-size-metric-label (0.54rem); left as its own
                         literal — header brand caption, not part of the dashboard's own micro-scale */
  letter-spacing: 0.08em;
  color: var(--dim);
  margin-top: 1px;
}

/* Nav */
.orb-header__nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: auto;
}

.orb-header__menu {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.2vw, 2.2rem);
}

.orb-header__menu a {
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-label);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--orgx-duration-fast);
}
.orb-header__menu a:hover { color: var(--text); }

/* Mobile toggle */
.orb-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
}

.orb-header__toggle-line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  border-radius: 1px;
  transition: transform var(--orgx-duration-slow), opacity var(--orgx-duration-slow);
}

/* =============================================================================
   HERO
   ============================================================================= */
.orb-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--hdr-h) + 80px);
  padding-bottom: 100px;
  overflow: hidden;
  background-color: var(--black);
  background-image:
    linear-gradient(90deg, rgba(5,6,7,0.98) 0%, rgba(5,6,7,0.94) 40%, rgba(5,6,7,0.70) 68%, rgba(5,6,7,0.42) 100%),
    radial-gradient(ellipse 55% 80% at 10% 50%, rgba(5,6,7,0.78) 0%, transparent 80%),
    var(--hero-bg, none);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* Bottom-fade into next section */
.orb-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, var(--black));
  pointer-events: none;
  z-index: 1;
}

/* Orbital rings + glow container — sits above the hero image */
.orb-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* CSS dot-grid — data-wave / particle feel */
.orb-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(198, 230, 46, 0.022) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 65% 65% at 65% 50%, rgba(0,0,0,0.35) 0%, transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse 65% 65% at 65% 50%, rgba(0,0,0,0.35) 0%, transparent 68%);
}

/* Lime glow point near dashboard */
.orb-hero__glow {
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(198, 230, 46, 0.038) 0%, transparent 62%);
  pointer-events: none;
}

.orb-ring--1 {
  width: 560px; height: 560px;
  top: 50%; right: -40px;
  transform: translateY(-50%);
  border-color: rgba(198, 230, 46, 0.022);
  animation: spin 120s linear infinite;
}
.orb-ring--2 {
  width: 840px; height: 840px;
  top: 50%; right: -180px;
  transform: translateY(-50%);
  border-color: rgba(198, 230, 46, 0.012);
  animation: spin-rev 180s linear infinite;
}
.orb-ring--3 {
  width: 1160px; height: 1160px;
  top: 50%; right: -360px;
  transform: translateY(-50%);
  border-color: rgba(255, 255, 255, 0.005);
  animation: spin 260s linear infinite;
}
.orb-ring--4 { display: none; }

.orb-hero__layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

/* Hero copy */
.orb-hero__copy {
  max-width: 560px;
  animation: fade-up 0.9s ease both;
}

.orb-hero__headline {
  font-size: clamp(2.75rem, 5.4vw, 4.8rem);
  font-weight: 400;
  margin-bottom: 1.6rem;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.orb-hero__sub {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: rgba(237, 239, 241, 0.88);
  margin-bottom: 1.4rem;
  line-height: var(--orgx-line-height-body);
  max-width: 500px;
}

.orb-hero__body {
  font-size: var(--orgx-font-size-body);
  color: var(--dim);
  line-height: var(--orgx-line-height-relaxed); /* was 1.7, Δ0.02 */
  margin-bottom: 2.75rem;
  max-width: 440px;
  padding-left: 1rem;
  border-left: 1px solid rgba(198, 230, 46, 0.18);
}

.orb-hero__ctas { display: flex; gap: 0.875rem; flex-wrap: wrap; }

/* Scroll hint */
.orb-hero__scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 2; }
.orb-hero__scroll span {
  display: block;
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, transparent, var(--lime));
  animation: scroll-hint 2.4s ease-in-out infinite;
}

/* =============================================================================
   HERO: DASHBOARD
   ============================================================================= */
.orb-hero__visual {
  display: flex;
  justify-content: center;
  animation: fade-up 0.9s 0.2s ease both;
}

.orb-dash {
  width: 100%;
  max-width: 480px;
  background: rgba(22, 24, 28, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02),
    0 32px 80px rgba(0, 0, 0, 0.65),
    0 0 60px rgba(198, 230, 46, 0.014);
}

/* Top highlight edge */
.orb-dash::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(198, 230, 46, 0.42) 50%, transparent 95%);
}

/* Dashboard header */
.orb-dash__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.orb-dash__label {
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-micro); /* was 0.62rem, Δ0.32px */
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
}

.orb-dash__live {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-micro);
  letter-spacing: 0.06em;
  color: var(--lime);
}

.orb-dash__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  animation: pulse-glow 2s ease-in-out infinite;
}

/* KPI row — Portfolio Value / EBITDA / EV-multiple */
.orb-dash__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 16px;
}

.orb-dash__kpi {
  background: rgba(13, 15, 18, 0.9);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.orb-dash__kpi-label {
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-metric-label); /* was 0.52rem, Δ0.32px */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}

.orb-dash__kpi-val {
  font-family: var(--f-ui);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.orb-dash__kpi-delta {
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-metric-label); /* was 0.56rem, Δ0.32px */
  margin-top: 1px;
}

.orb-dash__kpi-up     { color: var(--lime); }
.orb-dash__kpi-neutral { color: var(--muted); }

/* Orb + dimension bars */
.orb-dash__main {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.orb-dash__orb-wrap { flex-shrink: 0; text-align: center; }

.orb-dash__orb {
  position: relative;
  width: 100px; height: 100px;
  margin: 0 auto 6px;
}

.orb-dash__orb-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
}
.orb-dash__orb-ring--1 {
  inset: 0;
  border-color: rgba(198, 230, 46, 0.38);
  box-shadow: 0 0 8px rgba(198, 230, 46, 0.07);
  animation: spin 24s linear infinite;
}
.orb-dash__orb-ring--2 {
  inset: 12px;
  border-color: rgba(198, 230, 46, 0.18);
  animation: spin-rev 38s linear infinite;
}
.orb-dash__orb-ring--3 {
  inset: 24px;
  border-color: rgba(198, 230, 46, 0.09);
  animation: spin 56s linear infinite;
}

.orb-dash__orb-center {
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 24, 28, 0.9) 60%, var(--navy) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.orb-dash__score {
  font-family: var(--f-ui);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--lime);
  line-height: 1;
}

.orb-dash__score-sub { font-family: var(--f-ui); font-size: 0.48rem; /* smallest annotation in the dashboard's own density scale — its own extreme, left as a literal */ color: var(--dim); margin-top: 2px; }

.orb-dash__orb-label { font-family: var(--f-ui); font-size: var(--orgx-font-size-metric-label); color: var(--dim); letter-spacing: 0.04em; margin: 0; }

/* Dimension bars */
.orb-dash__metrics { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }

.orb-dash__metric { display: flex; align-items: center; gap: 8px; }

.orb-dash__metric-name { font-family: var(--f-ui); font-size: var(--orgx-font-size-micro); color: var(--muted); width: 68px; flex-shrink: 0; }

.orb-dash__bar-track {
  flex: 1; height: 3px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow: hidden;
}

.orb-dash__bar {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, rgba(198, 230, 46, 0.5), var(--lime));
  width: 0;
  animation: bar-in 1.4s 0.7s ease forwards;
}

.orb-dash__metric-val { font-family: var(--f-ui); font-size: var(--orgx-font-size-micro); font-weight: 600; color: var(--lime); width: 18px; text-align: right; }

/* Sparkline */
.orb-dash__sparkline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.orb-dash__sp-label { font-family: var(--f-ui); font-size: var(--orgx-font-size-metric-label); color: var(--dim); flex-shrink: 0; }

.orb-dash__sp-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
}

.orb-dash__sp-bars span {
  flex: 1;
  height: var(--h, 50%);
  background: rgba(198, 230, 46, 0.18);
  border-radius: 2px 2px 0 0;
}

.orb-dash__sp-bars span:last-child { background: rgba(198, 230, 46, 0.62); }

.orb-dash__sp-val { font-family: var(--f-ui); font-size: var(--orgx-font-size-micro); font-weight: 600; color: var(--lime); flex-shrink: 0; }

/* Bottom chips */
.orb-dash__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.orb-dash__card {
  background: rgba(13, 15, 18, 0.9);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-metric-label);
  color: var(--dim);
  text-align: center;
}

.orb-dash__card-dot { width: 6px; height: 6px; border-radius: 50%; }
.orb-dash__card-dot[data-c="lime"]  { background: var(--lime); }
.orb-dash__card-dot[data-c="blue"]  { background: var(--data-blue); }
.orb-dash__card-dot[data-c="amber"] { background: var(--data-amber); }
.orb-dash__card-dot[data-c="teal"]  { background: var(--data-teal); }

/* Metric value numbers — match category colour */
.orb-dash__metric[data-c="blue"]  .orb-dash__metric-val { color: var(--data-blue); }
.orb-dash__metric[data-c="amber"] .orb-dash__metric-val { color: var(--data-amber); }
.orb-dash__metric[data-c="teal"]  .orb-dash__metric-val { color: var(--data-teal); }

/* Metric bars — match category colour */
.orb-dash__metric[data-c="blue"]  .orb-dash__bar { background: linear-gradient(90deg, rgba(75, 158, 232, 0.4), var(--data-blue)); }
.orb-dash__metric[data-c="amber"] .orb-dash__bar { background: linear-gradient(90deg, rgba(232, 168, 75, 0.4), var(--data-amber)); }
.orb-dash__metric[data-c="teal"]  .orb-dash__bar { background: linear-gradient(90deg, rgba(75, 232, 176, 0.4), var(--data-teal)); }

/* =============================================================================
   PROBLEM
   ============================================================================= */
.orb-problem {
  background: var(--navy);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.orb-problem__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
  align-items: start;
}

.orb-problem__text .orb-section__title { margin-bottom: 1.75rem; }

.orb-problem__right { padding-top: clamp(1.5rem, 22vw, 17rem); }

.orb-problem__stacks {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 2rem;
  padding-left: 1.1rem;
  border-left: 1px solid rgba(198, 230, 46, 0.22);
}

.orb-problem__stacks p { font-size: var(--orgx-font-size-body-lg); margin: 0; } /* was 0.94rem, Δ0.64px */

.orb-problem__insight { font-size: var(--orgx-font-size-body-lg); margin-bottom: 1rem; } /* was 0.92rem, Δ0.32px */

.orb-problem__emphasis {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--text);
  margin: 0;
}

.orb-problem__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--orgx-space-3);
  margin-bottom: 18px;
}

.orb-problem__card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: var(--orgx-space-2);
  position: relative;
  overflow: hidden;
  box-shadow: var(--orgx-shadow-card-subtle);
  transition: border-color var(--orgx-duration-fast), transform var(--orgx-duration-fast);
}
.orb-problem__card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  /* 0.35 peak opacity — slightly subtler than its 5 siblings' 0.45; reviewed
     and left as-is rather than merged, since the audit didn't identify this
     specific delta as accidental and forcing it would be a visible change */
  background: linear-gradient(90deg, transparent 5%, rgba(198, 230, 46, 0.35) 50%, transparent 95%);
  opacity: 0;
  transition: opacity var(--orgx-duration-fast);
}
.orb-problem__card:hover { border-color: rgba(198, 230, 46, 0.15); transform: translateY(var(--orgx-hover-lift-sm)); }
.orb-problem__card:hover::after { opacity: 1; }

.orb-problem__card-num { font-family: var(--f-ui); font-size: var(--orgx-font-size-index); font-weight: 600; letter-spacing: 0.1em; color: var(--dim); }


.orb-problem__card-label { font-family: var(--f-ui); font-size: var(--orgx-font-size-eyebrow); font-weight: 500; color: var(--muted); }

.orb-problem__connect {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-label); /* was 0.68rem, Δ0.64px */
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--lime);
}

.orb-problem__connect-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), rgba(198, 230, 46, 0.28));
}

/* =============================================================================
   MODEL
   ============================================================================= */
.orb-model {
  background: var(--black);
  background-image: radial-gradient(ellipse 90% 55% at 50% 62%, rgba(198, 230, 46, 0.036) 0%, transparent 58%);
  overflow: hidden;
}

/* Subtle dot grid in model section */
.orb-model::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(198, 230, 46, 0.038) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,0,0,0.5) 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,0,0,0.5) 0%, transparent 75%);
}

.orb-framework-visual {
  margin: clamp(48px, 6vw, 80px) auto clamp(0px, 0vw, 0px);
  max-width: 1100px;
  overflow: hidden;
}

.orb-framework-visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.orb-model__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--orgx-space-4);
  margin-bottom: var(--sp-sm);
  position: relative;
  z-index: 1;
}

.orb-model__card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 26px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--orgx-shadow-card);
  transition: border-color var(--orgx-duration-slow), transform var(--orgx-duration-slow);
}

.orb-model__card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(198, 230, 46, 0.45) 50%, transparent 95%);
  opacity: 0;
  transition: opacity var(--orgx-duration-slow);
}

.orb-model__card:hover { border-color: rgba(198, 230, 46, 0.22); transform: translateY(-4px); } /* -4px is this card's own single-use extreme lift, left as a literal */
.orb-model__card:hover::after { opacity: 1; }

.orb-model__num {
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-index); /* was 0.6rem, Δ0.32px */
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--lime);
  opacity: 0.7;
  margin-bottom: 12px;
}

.orb-model__card h3 { font-family: var(--f-display); font-size: var(--orgx-font-size-card-title); font-weight: 400; margin-bottom: 10px; } /* was 0.98rem, Δ0.32px */

.orb-model__card p { font-size: var(--orgx-font-size-body); line-height: var(--orgx-line-height-body); }

.orb-model__statement {
  text-align: center;
  font-family: var(--f-display);
  font-size: clamp(1rem, 2vw, 1.32rem);
  font-style: italic;
  color: var(--text);
  max-width: 680px;
  margin-inline: auto;
  opacity: 0.82;
  padding-top: var(--sp-sm);
  margin-top: clamp(32px, 4vw, 56px);
  position: relative;
  z-index: 1;
}

/* Model pillars — replaces card grid, sits flush below framework visual */
.orb-model__pillars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  max-width: 1100px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.orb-model__pillar {
  padding: 28px clamp(18px, 2.5vw, 32px);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.orb-model__pillar-num {
  display: block;
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-index); /* was 0.56rem, Δ0.32px */
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--lime);
  opacity: 0.7;
  margin-bottom: 10px;
}



.orb-model__pillar-name {
  font-family: var(--f-display);
  font-size: var(--orgx-font-size-card-title);
  font-weight: 400;
  color: var(--text);
}

.orb-model__pillar-desc {
  font-size: var(--orgx-font-size-body-sm);
  line-height: var(--orgx-line-height-tight);
  color: var(--muted);
  margin-top: 8px;
  margin-bottom: 0;
}

/* =============================================================================
   BUSINESS DOMAINS
   ============================================================================= */
.orb-domains {
  background: var(--black);
  border-top: 1px solid var(--border);
}

.orb-domains__body {
  font-size: var(--orgx-font-size-body-lg); /* was 0.92rem, Δ0.32px */
  line-height: var(--orgx-line-height-relaxed);
  max-width: 640px;
  margin-bottom: var(--sp-sm);
}

.orb-domains__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--orgx-space-3);
}

.orb-domains__card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: var(--orgx-space-2);
  /* was inset-only — a real bug: this card was missing the outer drop-shadow
     all 3 of its visual siblings (model/platform/who) have. Fixed to match. */
  box-shadow: var(--orgx-shadow-card);
  position: relative;
  overflow: hidden;
  transition: border-color var(--orgx-duration-fast), transform var(--orgx-duration-fast);
}
.orb-domains__card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(198, 230, 46, 0.45) 50%, transparent 95%);
  opacity: 0;
  transition: opacity var(--orgx-duration-fast);
}
.orb-domains__card:hover {
  border-color: rgba(198, 230, 46, 0.2);
  transform: translateY(var(--orgx-hover-lift-sm));
}
.orb-domains__card:hover::after { opacity: 1; }
.orb-domains__card-icon {
  width: 26px;
  height: 26px;
  color: var(--dim);
  flex-shrink: 0;
  margin-bottom: 4px;
  transition: color var(--orgx-duration-fast);
}
.orb-domains__card:hover .orb-domains__card-icon { color: rgba(198, 230, 46, 0.7); }
.orb-domains__card-num {
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-index);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--dim);
}
.orb-domains__card-name {
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-body);
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.orb-domains__card-text {
  font-size: var(--orgx-font-size-body-sm);
  line-height: var(--orgx-line-height-tight); /* was 1.58, Δ0.03 */
  color: var(--muted);
  margin: 0;
}

/* =============================================================================
   HOW IT WORKS
   ============================================================================= */
.orb-how {
  background: var(--navy);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.orb-how .orb-section__title { margin-bottom: 1rem; }

.orb-how__steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start;
}

.orb-how__closing {
  font-family: var(--f-display);
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-style: italic;
  color: rgba(237, 239, 241, 0.55);
  text-align: center;
  margin-top: var(--sp-sm);
  letter-spacing: -0.01em;
}

.orb-how__step {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 26px 20px;
  box-shadow: var(--orgx-shadow-card-subtle);
  transition: border-color var(--orgx-duration-slow), transform var(--orgx-duration-slow);
  height: 100%;
}
.orb-how__step:hover { border-color: rgba(198, 230, 46, 0.2); transform: translateY(var(--orgx-hover-lift)); }

.orb-how__num {
  display: block;
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-index); /* was 0.6rem, Δ0.32px */
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--lime);
  opacity: 0.7;
  margin-bottom: 12px;
}

.orb-how__step h3 { font-family: var(--f-display); font-size: var(--orgx-font-size-card-title); font-weight: 400; margin-bottom: 8px; }
.orb-how__step p { font-size: var(--orgx-font-size-body); }

.orb-how__arrow {
  display: flex;
  align-items: flex-start;
  padding-top: 40px;
  padding-inline: 6px;
}
.orb-how__arrow::before {
  content: '';
  display: block;
  width: 24px; height: 1px;
  background: linear-gradient(90deg, var(--border), rgba(198, 230, 46, 0.28));
}

/* =============================================================================
   PLATFORM
   ============================================================================= */
.orb-platform {
  background: var(--black);
  border-top: 1px solid var(--border);
}

.orb-platform__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--orgx-space-4); }

.orb-platform__card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 36px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--orgx-shadow-card);
  transition: border-color var(--orgx-duration-slow), transform var(--orgx-duration-slow);
}
.orb-platform__card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(198, 230, 46, 0.45) 50%, transparent 95%);
  opacity: 0;
  transition: opacity var(--orgx-duration-slow);
}
.orb-platform__card:hover { border-color: rgba(198, 230, 46, 0.2); transform: translateY(var(--orgx-hover-lift)); }
.orb-platform__card:hover::after { opacity: 1; }

/* Icon container (7px) + inset accent square (3px) are proportionally paired,
   not arbitrary — reviewed against the audit's "4 hardcoded small radii"
   finding and left as literals; standardising them onto one small-UI token
   would break the deliberate inset relationship between the two. */
.orb-platform__icon {
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1px solid rgba(198, 230, 46, 0.2);
  background: rgba(198, 230, 46, 0.04);
  margin-bottom: 22px;
  position: relative;
}
.orb-platform__icon::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 3px;
  background: rgba(198, 230, 46, 0.5);
}

.orb-platform__card h3 { font-family: var(--f-display); font-size: var(--orgx-font-size-card-title-lg); font-weight: 400; margin-bottom: 12px; } /* was 1.05rem, Δ0.16px */
.orb-platform__card p { font-size: var(--orgx-font-size-body); line-height: var(--orgx-line-height-body); } /* was 0.84rem/1.68 */


/* =============================================================================
   WHY IT MATTERS
   ============================================================================= */
.orb-why {
  background: var(--navy);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.orb-why::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(198, 230, 46, 0.042) 0%, transparent 68%);
  pointer-events: none;
}

.orb-why__inner { position: relative; z-index: 1; max-width: 880px; margin-inline: auto; text-align: center; }

.orb-why__headline {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.12;
  margin-bottom: 1.75rem;
  letter-spacing: -0.025em;
}

.orb-why__body { font-size: var(--orgx-font-size-lead); max-width: 540px; margin: 0 auto var(--sp-sm); line-height: var(--orgx-line-height-relaxed); }

.orb-why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: var(--r);
  overflow: hidden;
  text-align: left;
}

.orb-why__item {
  background: var(--panel);
  padding: 28px 22px;
  transition: background var(--orgx-duration-fast);
}
.orb-why__item:hover { background: var(--panel-soft); }

.orb-why__item::before {
  content: '';
  display: block;
  width: 20px; height: 2px;
  background: var(--lime);
  opacity: 0.6;
  margin-bottom: 14px;
}

.orb-why__item-label { display: block; font-family: var(--f-ui); font-size: var(--orgx-font-size-eyebrow); font-weight: 600; color: var(--text); margin-bottom: 8px; }

.orb-why__item p { font-size: var(--orgx-font-size-body); line-height: 1.6; } /* was 0.8rem, Δ0.32px; line-height 1.6 restates the body{} base default, not drift — left as-is */

/* =============================================================================
   WHO IT IS FOR
   ============================================================================= */
.orb-who { background: var(--black); }

.orb-who .orb-section__title { margin-bottom: var(--sp-sm); }

.orb-who__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--orgx-space-4); }

.orb-who__card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 34px 26px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--orgx-shadow-card);
  transition: border-color var(--orgx-duration-slow), transform var(--orgx-duration-slow);
}
.orb-who__card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(198, 230, 46, 0.45) 50%, transparent 95%);
  opacity: 0;
  transition: opacity var(--orgx-duration-slow);
}
.orb-who__card:hover { border-color: rgba(198, 230, 46, 0.2); transform: translateY(var(--orgx-hover-lift)); }
.orb-who__card:hover::after { opacity: 1; }

.orb-who__card-num { font-family: var(--f-ui); font-size: var(--orgx-font-size-index); font-weight: 600; letter-spacing: 0.1em; color: var(--dim); margin-bottom: 14px; }

.orb-who__card h3 { font-family: var(--f-display); font-size: var(--orgx-font-size-card-title-lg); font-weight: 400; margin-bottom: 10px; } /* was 1.08rem, Δ0.32px */
.orb-who__card p { font-size: var(--orgx-font-size-body); line-height: var(--orgx-line-height-body); } /* was 0.86rem, Δ0.64px */

/* =============================================================================
   ORGX
   ============================================================================= */
.orb-orgx {
  background: var(--navy);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.orb-orgx__header { max-width: 640px; margin-bottom: var(--sp-sm); }

/* Equation layout */
.orb-orgx__equation { margin-bottom: var(--sp-sm); }

.orb-orgx__eq-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
}

.orb-orgx__eq-item {
  flex: 1;
  padding: clamp(22px, 2.8vw, 36px) var(--orgx-space-fluid-md);
  background: var(--surface);
}

.orb-orgx__eq-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(10px, 1.5vw, 20px);
  background: var(--navy);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-family: var(--f-display);
  font-size: 1.4rem;
  color: var(--dim);
  flex-shrink: 0;
  line-height: 1;
}

.orb-orgx__eq-tag {
  display: block;
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-index); /* was 0.56rem, Δ0.32px */
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--dim);
  margin-bottom: 10px;
}

.orb-orgx__eq-label {
  display: block;
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-eyebrow);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.orb-orgx__eq-item p { font-size: var(--orgx-font-size-body); line-height: var(--orgx-line-height-body); margin: 0; } /* was 0.8rem/1.62 */

.orb-orgx__eq-result {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 3vw, 40px) var(--orgx-space-fluid-md);
  background: rgba(198, 230, 46, 0.035);
  border: 1px solid rgba(198, 230, 46, 0.18);
  border-top: none;
  border-radius: 0 0 var(--r) var(--r);
}

.orb-orgx__eq-sign {
  font-family: var(--f-display);
  font-size: 2.8rem;
  line-height: 1;
  color: rgba(198, 230, 46, 0.4);
  flex-shrink: 0;
}

.orb-orgx__eq-result-label {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1rem, 2vw, 1.45rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 8px;
}

.orb-orgx__eq-result p { font-size: var(--orgx-font-size-body); line-height: var(--orgx-line-height-body); margin: 0; } /* was 0.84rem, Δ0.32px */

.orb-orgx__footer {
  display: flex;
  align-items: center;
  gap: var(--orgx-space-5);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--border);
}

.orb-orgx__headline {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 400;
  color: var(--text);
  line-height: 1.18;
  margin-bottom: 1.5rem;
  max-width: 580px;
}

.orb-orgx__text { font-size: var(--orgx-font-size-body-lg); line-height: var(--orgx-line-height-relaxed); margin-bottom: 1rem; } /* was 0.94rem/1.75, Δ0.64px / Δ0.03 */

.orb-orgx__components {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: var(--sp-sm) 0;
}

.orb-orgx__component {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 22px 20px;
}

.orb-orgx__component-title {
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-body-sm);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}

.orb-orgx__component p {
  font-size: var(--orgx-font-size-body);
  line-height: var(--orgx-line-height-body);
  margin: 0;
}

.orb-orgx__closer {
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-body-lg); /* was 0.88rem, Δ0.32px */
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
  margin-top: 1.5rem;
  margin-bottom: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

/* =============================================================================
   PROOF / CREDIBILITY STRIP
   ============================================================================= */
.orb-proof {
  background: var(--navy);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(36px, 4.5vw, 56px);
}

.orb-proof__intro {
  font-family: var(--f-ui);
  font-size: 0.64rem; /* single-use, with the widest letter-spacing in the file (0.18em) — its own deliberate credibility-strip treatment, left as a literal */
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: clamp(24px, 3vw, 40px);
}

.orb-proof__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid var(--border);
}

.orb-proof__item {
  padding: clamp(20px, 2.5vw, 32px) var(--orgx-space-fluid-md);
  border-right: 1px solid var(--border);
}

.orb-proof__label {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.7vw, 1.22rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.25;
}

.orb-proof__item p { font-size: var(--orgx-font-size-body); line-height: var(--orgx-line-height-body); }

/* =============================================================================
   BUILT FOR
   ============================================================================= */
.orb-for { background: var(--black); }

.orb-for .orb-section__title { margin-bottom: var(--sp-sm); }

.orb-for__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.orb-for__panel {
  background: var(--panel);
  padding: var(--orgx-space-fluid-lg);
}

.orb-for__panel-num {
  display: block;
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-index); /* was 0.56rem, Δ0.32px */
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--dim);
  margin-bottom: 20px;
}

.orb-for__panel-title {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.2;
}

.orb-for__panel-body { font-size: var(--orgx-font-size-body-lg); line-height: var(--orgx-line-height-relaxed); margin-bottom: 24px; }

.orb-for__list { list-style: none; display: flex; flex-direction: column; gap: var(--orgx-space-2); }

.orb-for__list li {
  font-size: var(--orgx-font-size-body); /* was 0.8rem, Δ0.32px */
  color: var(--muted);
  padding-left: 16px;
  position: relative;
  line-height: var(--orgx-line-height-tight);
}

.orb-for__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(198, 230, 46, 0.55);
}

.orb-for__footnote {
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-label); /* was 0.7rem, Δ0.32px */
  letter-spacing: 0.05em;
  color: var(--dim);
  text-align: center;
  margin-top: clamp(18px, 2.5vw, 28px);
}

/* =============================================================================
   WHY ORBICUL EXISTS
   ============================================================================= */
.orb-origin {
  background: var(--navy);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.orb-origin__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.orb-origin__headline {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 3.5vw, 2.9rem);
  font-weight: 400;
  line-height: 1.14;
  color: var(--text);
  margin-top: 0.4rem;
  letter-spacing: -0.02em;
}

.orb-origin__right p {
  font-size: var(--orgx-font-size-body-lg); /* was 0.94rem, Δ0.64px */
  line-height: var(--orgx-line-height-relaxed); /* was 1.78, Δ0.06 */
  margin-bottom: 1rem;
}

.orb-origin__right p:last-child { margin-bottom: 0; }

.orb-origin__emphasis {
  color: var(--text) !important;
  font-family: var(--f-display);
  font-style: italic;
  padding-left: 1.2rem;
  border-left: 1px solid rgba(198, 230, 46, 0.28);
}

/* =============================================================================
   CTA
   ============================================================================= */
.orb-cta {
  background: var(--black);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: var(--sp-lg);
}

.orb-cta__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.orb-cta__glow {
  position: absolute;
  width: 760px; height: 760px;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(198, 230, 46, 0.048) 0%, transparent 60%);
}

.orb-ring--cta-1 {
  width: 400px; height: 400px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-color: rgba(198, 230, 46, 0.08);
  animation: spin 44s linear infinite;
}

.orb-ring--cta-2 {
  width: 700px; height: 700px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-color: rgba(198, 230, 46, 0.04);
  animation: spin-rev 68s linear infinite;
}

.orb-cta__inner { position: relative; z-index: 2; max-width: 620px; margin-inline: auto; }

.orb-cta__headline { font-size: clamp(2.2rem, 4.8vw, 3.8rem); font-weight: 400; margin-bottom: 1.5rem; line-height: 1.1; letter-spacing: -0.025em; }

.orb-cta__body { font-size: 0.95rem; /* reviewed against --orgx-font-size-body-lg (0.9rem); left as its own literal — the closing conversion moment's body copy, plausibly deliberately a touch larger */ margin-bottom: 2.75rem; line-height: var(--orgx-line-height-relaxed); max-width: 480px; margin-inline: auto; }

/* =============================================================================
   FOOTER
   ============================================================================= */
.orb-footer {
  background: var(--navy);
  border-top: 1px solid var(--border);
  position: relative;
}

/* Pre-footer CTA strip */
.orb-footer__pre {
  border-bottom: 1px solid var(--border);
  padding: clamp(44px, 6vw, 72px) var(--pad);
}

.orb-footer__pre-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 5rem);
}

.orb-footer__pre-text { text-align: left; flex: 1; }

.orb-footer__pre-headline {
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.55rem;
}

.orb-footer__pre-body {
  font-size: var(--orgx-font-size-body-lg); /* was 0.88rem, Δ0.32px */
  color: var(--muted);
  line-height: var(--orgx-line-height-body);
  margin: 0;
}

/* Main footer body */
.orb-footer__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(48px, 6vw, 72px) var(--pad) clamp(40px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: stretch;
}

/* 4-column grid: brand col + 3 link cols */
.orb-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.orb-footer__brand-col {
  display: flex;
  flex-direction: column;
  gap: var(--orgx-space-3);
}

.orb-footer__brand-link { display: inline-block; line-height: 0; }

.orb-footer__logo { height: 30px; width: auto; display: block; opacity: 0.75; transition: opacity var(--orgx-duration-fast); }
.orb-footer__logo:hover { opacity: 1; }

.orb-footer__tagline { font-size: var(--orgx-font-size-body-sm); color: var(--muted); font-style: italic; margin: 0; }
.orb-footer__sub { font-size: var(--orgx-font-size-micro); color: var(--dim); letter-spacing: 0.07em; text-transform: uppercase; margin: 0; }

/* Link columns */
.orb-footer__col { display: flex; flex-direction: column; gap: 10px; }

.orb-footer__col-label {
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-micro); /* was 0.62rem, Δ0.32px */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.orb-footer__col a { font-size: var(--orgx-font-size-label); color: var(--dim); transition: color var(--orgx-duration-fast); line-height: 1; }
.orb-footer__col a:hover { color: var(--lime); }

/* Bottom bar */
.orb-footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  display: flex;
  justify-content: center;
}

.orb-footer__copy { font-size: 0.66rem; /* equidistant (Δ0.96px) from both -label and -micro; genuine one-off, left as a literal */ color: var(--dim); margin: 0; }

/* Footer responsive */
@media (max-width: 768px) {
  .orb-footer__pre-inner { flex-direction: column; align-items: flex-start; }
  .orb-footer__pre-inner .orb-btn { width: 100%; justify-content: center; }
  .orb-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 480px) {
  .orb-footer__grid { grid-template-columns: 1fr; }
  .orb-footer__pre { padding-block: 40px; }
}

/* =============================================================================
   RESPONSIVE ≤ 1024px (tablet)
   ============================================================================= */
@media (max-width: 1024px) {
  .orb-hero__layout { gap: clamp(24px, 3vw, 40px); }
  .orb-dash { transform: scale(0.88); transform-origin: center top; }

  .orb-model__grid { grid-template-columns: repeat(2, 1fr); }
  .orb-model__pillars { grid-template-columns: repeat(2, 1fr); }
  .orb-model__pillar:last-child { grid-column: span 2; }

  .orb-domains__grid { grid-template-columns: repeat(2, 1fr); }

  .orb-how__steps { grid-template-columns: 1fr; gap: 10px; }
  .orb-how__arrow { display: none; }

  .orb-platform__grid { grid-template-columns: repeat(2, 1fr); }

  .orb-why__grid { grid-template-columns: repeat(2, 1fr); }
  .orb-why__item:nth-child(5) { grid-column: 1 / -1; }

  .orb-who__cards { grid-template-columns: repeat(2, 1fr); }

  .orb-orgx__components { grid-template-columns: 1fr; gap: 10px; }

  .orb-proof__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================================
   RESPONSIVE ≤ 768px (mobile)
   ============================================================================= */
@media (max-width: 768px) {

  /* Pin header to the true top of the viewport.
     padding-top shifts the content box below the iOS safe-area while the
     element's own background paints from pixel 0 — this is what keeps the
     safe-area strip dark. will-change: transform forces a GPU compositing
     layer so the fixed element repaints immediately during scroll, preventing
     the iOS rendering lag that lets content bleed through the top strip. */
  .orb-header {
    top: 0;
    left: 0;
    right: 0;
    background: var(--black);
    height: calc(var(--hdr-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    will-change: transform;
  }

  /* Keep background solid and remove the blur on mobile — backdrop-filter on a
     solid background is a no-op visually but can cause iOS rendering artefacts. */
  .orb-header.is-scrolled {
    background: var(--black);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Inner no longer needs its own safe-area offset — the header wrapper handles it. */
  .orb-header__inner {
    padding-top: 0;
  }

  .orb-header__toggle { display: flex; }

  /* Hamburger → X when nav is open */
  .orb-header__toggle[aria-expanded="true"] .orb-header__toggle-line:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .orb-header__toggle[aria-expanded="true"] .orb-header__toggle-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .orb-header__toggle[aria-expanded="true"] .orb-header__toggle-line:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .orb-header__nav {
    position: fixed;
    inset-block-start: calc(var(--hdr-h) + env(safe-area-inset-top));
    inset-inline: 0;
    background: rgba(7, 10, 15, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(198, 230, 46, 0.15);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 24px var(--pad) 28px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s ease, opacity 0.28s ease;
    z-index: 99;
  }

  .orb-header__nav.is-open { transform: translateY(0); opacity: 1; pointer-events: all; }

  /* CTA button full-width in mobile dropdown */
  .orb-header__nav .orb-btn { width: 100%; justify-content: center; }

  .orb-header__menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    width: 100%;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
  }

  .orb-header__menu a { font-size: 0.88rem; }

  .orb-hero__layout { grid-template-columns: 1fr; }
  .orb-hero__visual { display: none; }

  .orb-hero {
    padding-top: calc(var(--hdr-h) + 32px);
    padding-bottom: 48px;
    background-image:
      linear-gradient(180deg, rgba(5,6,7,0.95) 0%, rgba(5,6,7,0.80) 50%, rgba(5,6,7,0.97) 100%),
      var(--hero-bg, none);
    background-position: center top;
  }

  /* Reduce section padding on mobile */
  .orb-section { padding-block: clamp(52px, 9vw, 72px); }
  .orb-cta { padding-block: 72px; }

  .orb-problem__layout { grid-template-columns: 1fr; }
  .orb-problem__right { padding-top: 0; }

  .orb-model__grid { grid-template-columns: 1fr; }
  .orb-model__pillars { grid-template-columns: 1fr; }
  .orb-model__pillar:last-child { grid-column: auto; }

  .orb-orgx__eq-row { flex-direction: column; border-radius: var(--r) var(--r) 0 0; }
  .orb-orgx__eq-item { border-right: none; border-bottom: 1px solid var(--border); }
  .orb-orgx__eq-item:last-child { border-bottom: none; }
  .orb-orgx__eq-plus {
    padding: 10px var(--orgx-space-fluid-md);
    justify-content: flex-start;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--border);
  }
  .orb-orgx__eq-result { flex-direction: column; align-items: flex-start; gap: 12px; }
  .orb-orgx__footer { flex-direction: column; align-items: flex-start; gap: 16px; }

  .orb-domains__grid { grid-template-columns: repeat(2, 1fr); }

  .orb-platform__grid { grid-template-columns: 1fr; }

  .orb-why__grid { grid-template-columns: 1fr; }
  .orb-why__item:nth-child(5) { grid-column: auto; }

  .orb-who__cards { grid-template-columns: 1fr; }

  .orb-proof__grid { grid-template-columns: 1fr; }

  .orb-for__split { grid-template-columns: 1fr; border-radius: var(--r); }

  .orb-origin__inner { grid-template-columns: 1fr; gap: 24px; }

  .orb-cta__body { margin-inline: 0; }
}

/* =============================================================================
   RESPONSIVE ≤ 480px (small mobile)
   ============================================================================= */
@media (max-width: 480px) {
  .orb-problem__cards { grid-template-columns: 1fr; }

  .orb-hero__ctas { flex-direction: column; }
  .orb-hero__ctas .orb-btn { text-align: center; }

  .orb-header__logo { height: 28px; }

  /* Reduce section padding further on smallest screens */
  .orb-section { padding-block: clamp(56px, 8vw, 80px); }
  .orb-cta { padding-block: 64px; }

  /* Domains single column on very small screens */
  .orb-domains__grid { grid-template-columns: 1fr; }

  /* Hero bottom padding */
  .orb-hero { padding-bottom: 36px; }
}

/* =============================================================================
   ADMIN BAR OFFSET
   WordPress normally injects html{margin-top:32px/46px} for the admin bar.
   That CSS is removed in functions.php (get_header hook) because on iOS Safari
   html{margin-top} shifts position:fixed elements, pushing the fixed header off
   the top of the viewport. Instead we use body{padding-top} — body padding does
   NOT affect fixed element positioning on iOS Safari — and we explicitly position
   the theme header below the admin bar via top: 32px / 46px.
   ============================================================================= */

/* Desktop admin bar — 32 px tall */
.admin-bar body        { padding-top: 32px; }
.admin-bar .orb-header { top: 32px; }
.admin-bar .orb-qa-nav-bar { top: calc(32px + var(--hdr-h)); }

/* Mobile admin bar — 46 px tall (WordPress breakpoint is 782 px) */
@media screen and (max-width: 782px) {
  .admin-bar body        { padding-top: 46px; }

  .admin-bar .orb-header {
    top: 46px;
    height: var(--hdr-h);
  }

  /* No safe-area nudge needed inside the inner when admin bar is present */
  .admin-bar .orb-header__inner {
    padding-top: 0;
  }

  /* Mobile nav dropdown must start below admin bar + header */
  .admin-bar .orb-header__nav {
    inset-block-start: calc(46px + var(--hdr-h));
  }

  .admin-bar .orb-qa-nav-bar {
    top: calc(46px + var(--hdr-h));
  }
}

/* =============================================================================
   Q&A PAGE — VALUE CREATION
   ============================================================================= */

/* ——— Hero ——— */
.orb-qa-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  border-bottom: 1px solid var(--border);
  padding-top: calc(var(--hdr-h) + clamp(52px, 7vw, 80px));
  padding-bottom: clamp(64px, 8vw, 100px);
}
.orb-qa-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 80% at 0% 55%, rgba(198,230,46,0.038) 0%, transparent 68%);
  pointer-events: none;
}
.orb-qa-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
}
.orb-qa-hero__headline {
  font-size: clamp(2.1rem, 4.5vw, 3.8rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-bottom: 1.25rem;
}
.orb-qa-hero__intro {
  font-size: clamp(0.96rem, 1.4vw, 1.06rem);
  color: rgba(237,239,241,0.82);
  line-height: var(--orgx-line-height-body); /* was 1.68, Δ0.03 */
  max-width: 540px;
  margin-bottom: 0.75rem;
}
.orb-qa-hero__sub {
  font-size: var(--orgx-font-size-body-lg);
  color: var(--muted);
  line-height: var(--orgx-line-height-relaxed);
  max-width: 520px;
  margin-bottom: 2.25rem;
}

/* ——— Category navigation bar ——— */
.orb-qa-nav-bar {
  background: var(--black);
  border-bottom: 1px solid var(--border);
  padding-block: 16px;
  position: sticky;
  top: var(--hdr-h);
  z-index: 50;
}
.orb-qa-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.orb-qa-nav__pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-label); /* was 0.68rem, Δ0.64px */
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
  transition: border-color var(--orgx-duration-fast), color var(--orgx-duration-fast), background var(--orgx-duration-fast);
}
.orb-qa-nav__pill:hover {
  border-color: rgba(198,230,46,0.32);
  color: var(--text);
  background: rgba(198,230,46,0.04);
}

/* ——— Category sections ——— */
.orb-qa-category {
  background: var(--black);
  border-top: 1px solid var(--border);
  padding-block: clamp(56px, 7vw, 88px);
}
.orb-qa-category--alt { background: var(--navy); }

/* ——— Accordion list ——— */
.orb-qa-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ——— Single accordion item (<details>) ——— */
.orb-qa-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: inset 0 1px 0 var(--border-hi);
  transition: border-color var(--orgx-duration-fast);
}
.orb-qa-item[open] { border-color: rgba(198,230,46,0.18); }

.orb-qa-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  user-select: none;
}
.orb-qa-item summary::-webkit-details-marker { display: none; }

.orb-qa-item__num {
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-index);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--dim);
  flex-shrink: 0;
  min-width: 20px;
}

.orb-qa-item__q {
  flex: 1;
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-body-lg); /* was 0.875rem, Δ0.4px */
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
}

.orb-qa-item__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px; /* reviewed against the audit's small-UI-radius finding; kept as its own literal — see .orb-platform__icon's note on proportional icon radii */
  font-family: var(--f-ui);
  font-size: 0.9rem;
  line-height: 1;
  color: var(--dim);
  transition: border-color var(--orgx-duration-default), color var(--orgx-duration-default), transform var(--orgx-duration-default);
}
.orb-qa-item[open] .orb-qa-item__icon {
  transform: rotate(45deg);
  border-color: rgba(198,230,46,0.3);
  color: var(--lime);
}

.orb-qa-answer {
  padding: 14px 18px 18px 50px;
  border-top: 1px solid var(--border);
}
.orb-qa-answer p {
  font-size: var(--orgx-font-size-body-lg); /* was 0.875rem, Δ0.4px */
  line-height: var(--orgx-line-height-relaxed);
  color: var(--muted);
  margin: 0;
}

/* ——— Bottom CTA ——— */
.orb-qa-cta {
  background: var(--black);
  border-top: 1px solid var(--border);
  text-align: center;
  padding-block: var(--sp-md);
  position: relative;
  overflow: hidden;
}
.orb-qa-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(198,230,46,0.035) 0%, transparent 70%);
  pointer-events: none;
}
.orb-qa-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin-inline: auto;
}
.orb-qa-cta__headline {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 400;
  line-height: 1.18;
  margin-bottom: 1rem;
}
.orb-qa-cta__body {
  font-size: var(--orgx-font-size-body-lg);
  line-height: var(--orgx-line-height-relaxed);
  max-width: 440px;
  margin: 0 auto 2.25rem;
}

/* ——— Q&A responsive ——— */
@media (max-width: 768px) {
  .orb-qa-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
  }
  .orb-qa-nav::-webkit-scrollbar { display: none; }
  .orb-qa-item__q { font-size: 0.84rem; }
  .orb-qa-category { padding-block: 52px; }
  .orb-qa-cta { padding-block: 72px; }
}

@media (max-width: 480px) {
  .orb-qa-hero { padding-top: calc(var(--hdr-h) + 32px); padding-bottom: 40px; }
  .orb-qa-item summary { padding: 14px 16px; }
  .orb-qa-answer { padding: 12px 16px 16px; }
  .orb-qa-category { padding-block: 44px; }
  .orb-qa-cta { padding-block: 56px; }
}

/* =============================================================================
   VIDEO SECTION
   ============================================================================= */
.orb-video-section {
  background: var(--navy);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.orb-video-wrap {
  max-width: 900px;
  margin-inline: auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-hi);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02),
    0 8px 48px rgba(0, 0, 0, 0.65);
  background: var(--black);
  position: relative;
}

.orb-video-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(198, 230, 46, 0.25) 50%, transparent 95%);
  z-index: 1;
  pointer-events: none;
}

.orb-video-player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--black);
}

.orb-video-caption {
  text-align: center;
  font-family: var(--f-ui);
  font-size: var(--orgx-font-size-label);
  color: var(--dim);
  letter-spacing: 0.03em;
  margin-top: 1rem;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .orb-video-wrap { border-radius: var(--r); }
}

/* =============================================================================
   STALL — WHY PORTFOLIO COMPANIES STALL
   ============================================================================= */
.orb-stall {
  background: var(--black);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.orb-stall__grid { margin-top: 0; }

.orb-stall__closing {
  text-align: center;
  font-family: var(--f-display);
  font-size: clamp(1rem, 2vw, 1.32rem);
  font-style: italic;
  color: var(--text);
  max-width: 680px;
  margin: var(--sp-sm) auto 0;
  opacity: 0.82;
}

/* =============================================================================
   VALUE LOGIC — ENTERPRISE VALUE EQUATION
   ============================================================================= */
.orb-value-logic {
  background: var(--navy);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.orb-value-logic__equation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 28px);
  padding: var(--orgx-space-fluid-lg) var(--pad);
  margin: 0 auto var(--sp-sm);
  max-width: 760px;
  background: rgba(198, 230, 46, 0.025);
  border: 1px solid rgba(198, 230, 46, 0.12);
  border-radius: var(--r-lg);
}

.orb-value-logic__eq-label {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2.4vw, 1.75rem);
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1;
}

.orb-value-logic__eq-op {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: rgba(198, 230, 46, 0.55);
  flex-shrink: 0;
  line-height: 1;
}

/* =============================================================================
   PE REALITY — BUILT FOR PRIVATE EQUITY
   ============================================================================= */
.orb-pe-reality {
  background: var(--black);
  border-top: 1px solid var(--border);
}

.orb-pe-reality__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--orgx-space-4);
}

/* =============================================================================
   HOW IT WORKS — 6-STEP VARIANT
   ============================================================================= */
.orb-how__steps.orb-how__steps--six {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--orgx-space-4);
  align-items: stretch;
}

/* =============================================================================
   NEW SECTIONS — RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
  .orb-pe-reality__grid { grid-template-columns: repeat(2, 1fr); }
  .orb-how__steps.orb-how__steps--six { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .orb-pe-reality__grid { grid-template-columns: 1fr; }
  .orb-how__steps.orb-how__steps--six { grid-template-columns: 1fr; }
  .orb-value-logic__equation { gap: 10px; }
  .orb-stall__closing { margin-top: clamp(32px, 5vw, 52px); }
}

@media (max-width: 480px) {
  .orb-value-logic__equation { flex-direction: column; text-align: center; }
}

/* =============================================================================
   SCHEDULER MODAL
   Same modal pattern used across the ORGX family (Digital Services and the
   proposition sites run the identical chrome, each under their own accent).
   The shared booking widget's colour custom properties are remapped to
   Orbicul's own tokens so it reads as native rather than a bolted-on plugin.
   ============================================================================= */
body.scheduler-body-lock { overflow: hidden; }

.scheduler-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(7, 10, 15, 0.72);
  visibility: hidden; opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.scheduler-backdrop.is-open { visibility: visible; }
.scheduler-backdrop.is-visible { opacity: 1; }

.scheduler-modal {
  position: relative;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--orgx-shadow-card);
  width: 100%; max-width: 840px; max-height: 92vh; overflow-y: auto;
  padding: clamp(24px, 4vw, 48px);
  display: flex; flex-direction: column; gap: 1.5rem;
  transform: translateY(16px);
  transition: transform 0.2s ease;
  font-family: var(--f-ui);
}
.scheduler-backdrop.is-visible .scheduler-modal { transform: translateY(0); }

.scheduler-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.scheduler-modal__heading { flex: 1; min-width: 0; }
.scheduler-modal__title {
  font-family: var(--f-display); font-size: 1.4rem; font-weight: 400;
  color: var(--text); margin: 0 0 0.4rem;
}
.scheduler-modal__subtitle { color: var(--muted); margin: 0; font-size: var(--orgx-font-size-body); }
.scheduler-modal__close {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--r);
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.scheduler-modal__close:hover { border-color: var(--lime); color: var(--lime); }
.scheduler-modal__close:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.scheduler-cb-wrap .orgx-cb-widget {
  /* --border, --text and --muted are deliberately NOT redeclared here — the
     widget already inherits those from :root under the exact same names,
     and writing e.g. `--border: var(--border)` on this same element would
     be a self-reference: per the CSS custom-properties spec that's a
     cycle, which makes the property invalid rather than "keep the
     inherited value". Only the names that differ need remapping below. */
  --bg:             var(--navy);
  --surface:        var(--panel);
  --surface-raised: var(--panel-soft);
  --accent:         var(--lime);
  --accent-strong:  color-mix(in srgb, var(--lime) 82%, #fff);
  --accent-ink:     var(--black);
  --radius:         var(--r);
  font-family: var(--f-ui);
  max-width: none;
}

.scheduler-cb-fallback { color: var(--muted); font-family: var(--f-ui); }
.scheduler-cb-fallback a { color: var(--lime); }

/* ── Weekly grid layout for the shared widget's day list ─────────────────── */
.orgx-cb-weekgrid__nav {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-bottom: 0.8rem;
}
.orgx-cb-weekgrid__label {
  font-size: var(--orgx-font-size-label); font-weight: 700; color: var(--muted);
  min-width: 140px; text-align: center;
}
.orgx-cb-weekgrid__navbtn {
  width: 28px; height: 28px; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  cursor: pointer; font-size: 1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.orgx-cb-weekgrid__navbtn:hover:not(:disabled) { border-color: var(--lime); color: var(--lime); }
.orgx-cb-weekgrid__navbtn:disabled { opacity: 0.35; cursor: not-allowed; }

.orgx-cb-weekgrid__panel {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin-bottom: 1.8rem;
}
.orgx-cb-weekgrid__panel[hidden] { display: none; }

/* Defensive consistency with the rest of the ORGX family (ORGX Clean v1
   needs this to stop long day names blowing out a grid column; harmless
   here today since these h4s already wrap instead of forcing min-content
   width, but keeps the family in sync if that ever changes). */
.orgx-cb-weekgrid__col { min-width: 0; }

.orgx-cb-weekgrid__col.orgx-cb-day { margin-bottom: 0; }
/* Higher specificity than the plugin's own .orgx-cb-day h4 (booking.css,
   font-size .95rem) — populated day columns keep BOTH classes
   (.orgx-cb-day from the plugin, .orgx-cb-weekgrid__col added here), so
   without this the plugin's rule wins on source order and the heading
   renders noticeably bigger than the empty-day placeholder next to it.
   min-height reserves space for 2 lines regardless of whether THIS day's
   name happens to wrap to 1 or 2 lines — without it, a short name makes
   its own column shorter than its neighbours, which visibly knocks that
   column's first time-slot row out of horizontal alignment with the rest. */
.orgx-cb-weekgrid__col.orgx-cb-day h4,
.orgx-cb-weekgrid__col--empty h4 { font-family: var(--f-ui); text-align: center; font-size: 0.72rem; line-height: 1.3; min-height: 2.6em; margin: 0 0 0.6rem; white-space: normal; overflow-wrap: break-word; }
.orgx-cb-weekgrid__col .orgx-cb-slots { display: flex; flex-direction: column; gap: 0.4rem; }
.orgx-cb-weekgrid__col .orgx-cb-slot { width: 100%; }

.orgx-cb-weekgrid__col--empty { display: flex; flex-direction: column; align-items: center; }
.orgx-cb-weekgrid__col--empty h4 { font-weight: 700; color: var(--text); }
.orgx-cb-weekgrid__daydate { display: block; font-weight: 400; color: var(--muted); font-size: 0.7rem; margin-top: 0.2rem; }
.orgx-cb-weekgrid__noavail { color: var(--muted); opacity: 0.4; padding-top: 0.5rem; }

@media (max-width: 680px) {
  .scheduler-modal { padding: 18px 14px; max-height: 96vh; }
  .scheduler-modal__subtitle { display: none; }
  .orgx-cb-weekgrid__panel { grid-template-columns: repeat(5, minmax(56px, 1fr)); gap: 0.3rem; overflow-x: auto; }
  .orgx-cb-weekgrid__label { min-width: 0; font-size: 0.75rem; }

  /* The plugin's own day heading is a full "Wednesday 16 September" —
     fine in a 5-per-row desktop grid, but overlaps the next column at
     these narrower widths. Truncate rather than let it collide. Selector
     must match (or exceed) the base rule's specificity
     (.orgx-cb-weekgrid__col.orgx-cb-day h4), or it loses to that rule's
     white-space:normal regardless of this media query. */
  .orgx-cb-weekgrid__col.orgx-cb-day h4,
  .orgx-cb-weekgrid__col--empty h4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 0;
  }
}

/* ── Generic page.php (any Page not using its own template, e.g. About) ── */
.orb-page__content { max-width: 720px; }
.orb-page__content p { margin-bottom: 1.2em; line-height: var(--orgx-line-height-relaxed); color: var(--muted); }
.orb-page__content h2, .orb-page__content h3 { margin: 1.6em 0 0.6em; color: var(--text); }
.orb-page__content ul, .orb-page__content ol { margin: 0 0 1.2em 1.2em; list-style: revert; }
.orb-page__content a { color: var(--lime); text-decoration: underline; }
.orb-page__content img { border-radius: var(--r); margin-block: 1em; }