/* ==========================================================================
   EmergingX — Homepage (Phase 1)
   Uses the design tokens from theme.css. Loaded after it, so page-specific
   rules win. Nothing here depends on main.css.
   ========================================================================== */

/* ---------- shared section furniture ------------------------------------ */
.ex-section { padding: var(--ex-section) 0; position: relative; }
.ex-section-alt {
  background: var(--ex-bg-alt);
  border-block: 1px solid var(--ex-line);
}
.ex-section-head { max-width: 62ch; margin-bottom: clamp(44px, 5vw, 68px); }
.ex-section-title {
  font-size: clamp(30px, 3.7vw, 47px);
  line-height: 1.08;
  letter-spacing: -0.032em;
  margin: 0 0 18px;
}
.ex-section-lead {
  font-size: clamp(16px, 1.35vw, 18.5px);
  color: var(--ex-text-muted);
  margin: 0;
  max-width: 60ch;
}

/* ---------- hero -------------------------------------------------------- */
.ex-hero {
  position: relative;
  padding: clamp(150px, 17vw, 232px) 0 clamp(76px, 9vw, 118px);
  overflow: hidden;
  isolation: isolate;
}
.ex-hero-bg { position: absolute; inset: 0; z-index: -2; }
.ex-hero-bg::before {
  /* generated mesh glow — soft colour that CSS gradients band on */
  content: "";
  position: absolute; inset: 0;
  background: url("../../../images/bg/hero-mesh.jpg") center/cover no-repeat;
  opacity: .5;
}
.ex-hero-bg::after {
  /* generated engineering grid, fading downward */
  content: "";
  position: absolute; inset: 0;
  background: url("../../../images/bg/grid-fade.png") top center/1200px auto repeat-x;
  opacity: .5;
}
:root[data-theme="light"] .ex-hero-bg::before { opacity: .13; }
:root[data-theme="light"] .ex-hero-bg::after { opacity: .5; filter: invert(1); }
#exHeroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ex-hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 190px; z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--ex-bg));
}
.ex-hero-inner { position: relative; z-index: 1; }
.ex-hero-copy { max-width: 21ch; }
.ex-hero-copy { max-width: none; }

.ex-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ex-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--ex-text); background: var(--ex-surface);
  border: 1px solid var(--ex-line); border-radius: 999px;
  padding: 7px 15px 7px 12px; margin-bottom: 26px;
}
.ex-badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ex-accent-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ex-accent-2) 22%, transparent);
}

.ex-hero-title {
  font-size: clamp(40px, 6.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.042em;
  margin: 0 0 24px;
  max-width: 17ch;
}
.ex-hero-lead {
  font-size: clamp(16.5px, 1.5vw, 20px);
  color: var(--ex-text-muted);
  max-width: 60ch;
  margin: 0 0 36px;
}
.ex-hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }

.ex-hero-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 26px 34px;
  margin: clamp(50px, 6vw, 76px) 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--ex-line);
  max-width: 780px;
}
.ex-hero-proof dt {
  font-family: var(--ex-display);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600; letter-spacing: -0.03em;
  color: var(--ex-text-strong);
  font-variant-numeric: tabular-nums;
}
.ex-hero-proof dd {
  margin: 5px 0 0; font-size: 13.5px; color: var(--ex-text-muted); line-height: 1.45;
}

/* ---------- product rows ------------------------------------------------ */
.ex-products { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px); }

.ex-product {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: center;
  background: var(--ex-surface);
  border: 1px solid var(--ex-line);
  border-radius: var(--ex-radius-lg);
  padding: clamp(26px, 3.4vw, 46px);
  transition: border-color .3s var(--ex-ease), background-color .3s var(--ex-ease);
}
.ex-product:hover { border-color: var(--ex-line-strong); background: var(--ex-surface-hover); }
.ex-product-flip .ex-product-body { order: 2; }
.ex-product-flip .ex-product-visual { order: 1; }

.ex-product-meta { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; }
.ex-product-index {
  font-family: var(--ex-mono); font-size: 12px; color: var(--ex-text-muted); letter-spacing: .1em;
}
.ex-status {
  font-family: var(--ex-mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  border: 1px solid transparent;
}
.ex-status-live {
  color: var(--ex-accent-2);
  background: color-mix(in srgb, var(--ex-accent-2) 12%, transparent);
  border-color: color-mix(in srgb, var(--ex-accent-2) 32%, transparent);
}
.ex-status-build {
  color: var(--ex-accent);
  background: var(--ex-accent-soft);
  border-color: color-mix(in srgb, var(--ex-accent) 30%, transparent);
}

.ex-product-name {
  font-size: clamp(26px, 2.7vw, 36px); letter-spacing: -0.032em; margin: 0 0 6px;
}
.ex-product-kicker {
  font-size: 15px; color: var(--ex-accent); margin: 0 0 16px; font-weight: 500;
}
.ex-product-desc { color: var(--ex-text-muted); margin: 0 0 20px; max-width: 58ch; font-size: 16px; }

.ex-product-points { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; }
.ex-product-points li {
  position: relative; padding-left: 24px; font-size: 14.8px; color: var(--ex-text);
}
.ex-product-points li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ex-accent); opacity: .85;
}

.ex-stack { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.ex-stack li {
  font-family: var(--ex-mono); font-size: 11.5px; letter-spacing: .02em;
  color: var(--ex-text-muted);
  background: var(--ex-surface-2);
  border: 1px solid var(--ex-line);
  border-radius: 6px; padding: 4px 9px;
}
.ex-stack-inline { margin-top: 18px; }

.ex-product-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; font-size: 14.5px; font-weight: 500;
  font-family: var(--ex-mono); color: var(--ex-accent-2);
}
.ex-product-link i { font-size: 11px; }

/* ---------- product diagrams (drawn, not screenshots) ------------------- */
.ex-product-visual { display: flex; align-items: center; justify-content: center; min-width: 0; }
.ex-diagram {
  position: relative; width: 100%; aspect-ratio: 5 / 4;
  border-radius: var(--ex-radius);
  background:
    radial-gradient(120% 100% at 50% 0%, var(--ex-accent-soft), transparent 62%),
    var(--ex-bg-alt);
  border: 1px solid var(--ex-line);
  overflow: hidden;
}

/* AgentOS: orchestrator + satellites */
.ex-diagram-agent .ex-node {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--ex-mono); font-size: 10.5px; letter-spacing: .03em;
  color: var(--ex-text-muted);
  background: var(--ex-surface); border: 1px solid var(--ex-line);
  border-radius: 999px; padding: 5px 11px; white-space: nowrap; z-index: 2;
}
.ex-diagram-agent .ex-node-core {
  left: 50%; top: 50%; color: var(--ex-accent-ink);
  background: var(--ex-grad); border-color: transparent; font-size: 11.5px; padding: 8px 16px;
  box-shadow: 0 10px 30px -14px var(--ex-accent-glow);
}
.ex-diagram-agent .ex-n1 { left: 19%; top: 18%; }
.ex-diagram-agent .ex-n2 { left: 82%; top: 18%; }
.ex-diagram-agent .ex-n3 { left: 11%; top: 65%; }
.ex-diagram-agent .ex-n4 { left: 89%; top: 65%; }
.ex-diagram-agent .ex-n5 { left: 50%; top: 89%; }
.ex-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.ex-wires path {
  stroke: var(--ex-accent); stroke-width: 1; fill: none; opacity: .35;
  stroke-dasharray: 3 5;
}

/* ProcureAI360: the governance lanes */
.ex-diagram-gate { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 12%; }
.ex-lane { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 11px; }
.ex-lane-label, .ex-lane-val {
  font-family: var(--ex-mono); font-size: 10.5px; color: var(--ex-text-muted); letter-spacing: .04em;
}
.ex-lane-val { color: var(--ex-text); }
.ex-lane-bar { height: 6px; border-radius: 999px; background: var(--ex-surface-2); position: relative; overflow: hidden; }
.ex-lane-bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ex-lane-a::after { width: 100%; background: var(--ex-grad); }
.ex-lane-b::after { width: 78%; background: var(--ex-accent); opacity: .75; }
.ex-lane-c::after { width: 42%; background: var(--ex-accent-2); opacity: .6; }
.ex-gate-note { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-family: var(--ex-mono); font-size: 10.5px; }
.ex-gate-pass { color: var(--ex-accent-2); }
.ex-gate-fail { color: var(--ex-text-muted); }

/* Agrozent: the value chain */
.ex-diagram-chain { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 13%; }
.ex-chain-step {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--ex-mono); font-size: 11.5px; color: var(--ex-text);
  background: var(--ex-surface); border: 1px solid var(--ex-line);
  border-radius: var(--ex-radius-sm); padding: 9px 13px;
}
.ex-chain-step i { color: var(--ex-accent-2); width: 15px; text-align: center; }
.ex-chain-step:nth-child(2) { margin-left: 12%; }
.ex-chain-step:nth-child(3) { margin-left: 24%; }
.ex-chain-step:nth-child(4) { margin-left: 36%; }

/* Haramayn: offline device */
.ex-diagram-offline { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 10%; }
.ex-phone {
  position: relative; width: 108px; aspect-ratio: 9/17;
  border: 1px solid var(--ex-line-strong); border-radius: 15px;
  background: var(--ex-surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.ex-phone-pill {
  font-family: var(--ex-mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ex-accent-2); border: 1px solid color-mix(in srgb, var(--ex-accent-2) 34%, transparent);
  background: color-mix(in srgb, var(--ex-accent-2) 12%, transparent);
  border-radius: 999px; padding: 3px 8px;
}
.ex-phone-ring {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--ex-line); border-top-color: var(--ex-accent);
  border-right-color: var(--ex-accent);
}
.ex-phone-label { font-family: var(--ex-mono); font-size: 10px; color: var(--ex-text-muted); }
.ex-langs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 210px; }
.ex-langs span {
  font-size: 11px; color: var(--ex-text-muted);
  border: 1px solid var(--ex-line); border-radius: 999px; padding: 3px 9px;
  background: var(--ex-surface);
}

/* ---------- bento ------------------------------------------------------- */
.ex-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ex-bento-card {
  background: var(--ex-surface);
  border: 1px solid var(--ex-line);
  border-radius: var(--ex-radius-lg);
  padding: clamp(24px, 2.6vw, 34px);
  transition: border-color .3s var(--ex-ease), background-color .3s var(--ex-ease), transform .3s var(--ex-ease);
}
.ex-bento-card:hover { border-color: var(--ex-line-strong); background: var(--ex-surface-hover); transform: translateY(-3px); }
/* Three equal cards, then one full-width band. An earlier row-span left the
   first card with ~300px of dead space below its list. */
.ex-bento-wide { grid-column: 1 / -1; }
.ex-bento-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ex-accent-soft); color: var(--ex-accent);
  border: 1px solid color-mix(in srgb, var(--ex-accent) 26%, transparent);
  font-size: 18px; margin-bottom: 20px;
}
.ex-bento-card h3 { font-size: clamp(19px, 1.7vw, 23px); margin: 0 0 12px; letter-spacing: -0.025em; }
.ex-bento-card p { color: var(--ex-text-muted); font-size: 15.5px; margin: 0; }
.ex-bento-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.ex-bento-list li {
  position: relative; padding-left: 20px; font-size: 14.3px; color: var(--ex-text);
}
.ex-bento-list li::before {
  content: ""; position: absolute; left: 2px; top: .58em;
  width: 9px; height: 1px; background: var(--ex-accent);
}

/* ---------- approach steps --------------------------------------------- */
/* Own grid rather than Bootstrap's .row.g-5: its negative gutter margins
   pushed 12px past the viewport on a 390px screen. */
.ex-approach {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(34px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 991.98px) { .ex-approach { grid-template-columns: 1fr; } }

.ex-sticky { position: sticky; top: 108px; }
.ex-sticky .btn { margin-top: 26px; }
.ex-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ex-step {
  display: grid; grid-template-columns: 62px 1fr; gap: 18px; align-items: start;
  padding: 26px 0; border-top: 1px solid var(--ex-line);
}
.ex-step:last-child { border-bottom: 1px solid var(--ex-line); }
.ex-step-num {
  font-family: var(--ex-mono); font-size: 12px; letter-spacing: .1em;
  color: var(--ex-accent); padding-top: 4px;
}
.ex-step h3 { font-size: clamp(18px, 1.6vw, 21px); margin: 0 0 8px; letter-spacing: -0.022em; }
.ex-step p { color: var(--ex-text-muted); font-size: 15.3px; margin: 0; max-width: 58ch; }

/* ---------- closing CTA ------------------------------------------------- */
.ex-cta { padding: 0 0 var(--ex-section); }
.ex-cta-card {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--ex-line);
  border-radius: var(--ex-radius-lg);
  background: var(--ex-bg-alt);
  padding: clamp(40px, 6vw, 82px) clamp(26px, 5vw, 68px);
  text-align: center;
}
.ex-cta-glow {
  position: absolute; z-index: -1; inset: -40% -10% auto -10%; height: 320px;
  background: radial-gradient(60% 100% at 50% 0%, var(--ex-accent-glow), transparent 70%);
  opacity: .5;
}
.ex-cta-card .ex-eyebrow { justify-content: center; }
.ex-cta-title {
  font-size: clamp(28px, 4vw, 50px); letter-spacing: -0.035em; margin: 0 0 16px;
}
.ex-cta-lead {
  color: var(--ex-text-muted); max-width: 54ch; margin: 0 auto 32px;
  font-size: clamp(15.5px, 1.3vw, 18px);
}
.ex-cta-card .ex-hero-actions { justify-content: center; }

/* ---------- responsive -------------------------------------------------- */
@media (max-width: 991.98px) {
  .ex-product { grid-template-columns: 1fr; }
  .ex-product-flip .ex-product-body { order: 1; }
  .ex-product-flip .ex-product-visual { order: 2; }
  .ex-product-visual { max-width: 420px; margin: 0 auto; width: 100%; }
  .ex-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-bento-wide { grid-column: 1 / -1; }
  .ex-sticky { position: static; }
}
@media (max-width: 640px) {
  .ex-bento { grid-template-columns: 1fr; }
  .ex-hero-actions .btn { width: 100%; }
  .ex-step { grid-template-columns: 1fr; gap: 8px; }
  .ex-step-num { padding-top: 0; }
  .ex-diagram { aspect-ratio: 4 / 3; }
}

/* ---------- LRO diagram: paper -> living research object ---------------- */
.ex-diagram-lro {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 9%;
}
.ex-lro-paper {
  flex: none; width: 62px; aspect-ratio: 3/4;
  border: 1px solid var(--ex-line-strong); border-radius: 6px;
  background: var(--ex-surface);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
  font-family: var(--ex-mono); font-size: 9.5px; color: var(--ex-text-muted);
  position: relative; overflow: hidden;
}
.ex-lro-paper::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: 12px; height: 1px;
  background: var(--ex-line-strong);
  box-shadow: 0 6px 0 var(--ex-line-strong), 0 12px 0 var(--ex-line-strong),
              0 18px 0 var(--ex-line-strong), 0 24px 0 var(--ex-line-strong);
}
.ex-lro-arrow { flex: none; color: var(--ex-accent); font-size: 17px; }
.ex-lro-object { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; max-width: 190px; }
.ex-lro-layer {
  font-family: var(--ex-mono); font-size: 10.5px; letter-spacing: .02em;
  color: var(--ex-text); background: var(--ex-surface);
  border: 1px solid var(--ex-line); border-radius: var(--ex-radius-sm);
  padding: 7px 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ex-lro-layer.ex-lro-seal {
  color: var(--ex-accent-2);
  border-color: color-mix(in srgb, var(--ex-accent-2) 38%, transparent);
  background: color-mix(in srgb, var(--ex-accent-2) 11%, transparent);
}

/* ---------- "also in the workshop" ------------------------------------- */
.ex-more-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; margin-top: clamp(22px, 3vw, 34px);
}
.ex-more-card {
  background: var(--ex-bg-alt);
  border: 1px solid var(--ex-line);
  border-radius: var(--ex-radius);
  padding: clamp(22px, 2.4vw, 28px);
  display: flex; flex-direction: column; gap: 11px;
  transition: border-color .28s var(--ex-ease), background-color .28s var(--ex-ease), transform .28s var(--ex-ease);
}
.ex-more-card:hover { border-color: var(--ex-line-strong); background: var(--ex-surface); transform: translateY(-3px); }
.ex-more-card .ex-status { align-self: flex-start; }
.ex-more-card h3 { font-size: 20px; letter-spacing: -0.026em; margin: 0; }
.ex-more-card p { color: var(--ex-text-muted); font-size: 14.8px; margin: 0; }
.ex-more-card .ex-stack { margin-top: auto; padding-top: 6px; }
.ex-more-card .ex-product-link { margin-top: 4px; }

/* Client / collaborative work reads differently from our own products */
.ex-status-client {
  color: var(--ex-text);
  background: var(--ex-surface-2);
  border-color: var(--ex-line-strong);
}

@media (max-width: 991.98px) { .ex-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)   { .ex-more-grid { grid-template-columns: 1fr; }
                              .ex-diagram-lro { padding: 7%; } }

/* ==========================================================================
   Visual polish pass
   ========================================================================== */

/* Two stacked sections produced ~264px of dead space. When the following
   section shares the same ground, collapse the seam; a section that changes
   background (.ex-section-alt) keeps its full padding so the band breathes. */
.ex-section + .ex-section:not(.ex-section-alt) { padding-top: 0; }
.ex-section-head { margin-bottom: clamp(36px, 4vw, 54px); }

/* Diagrams: aspect-ratio 5/4 forced a tall panel regardless of how much was
   in it, leaving the flow-layout diagrams half empty. Only the AgentOS graph
   needs a fixed ratio — its nodes are absolutely positioned. The rest size to
   their content. */
.ex-diagram-chain,
.ex-diagram-offline,
.ex-diagram-lro {
  aspect-ratio: auto;
  min-height: 268px;
  padding: clamp(22px, 2.6vw, 32px);
}

/* Agrozent chain: the steps were stretching to full width, so the staircase
   read as ragged bars. Size each to its content instead. */
.ex-diagram-chain { align-items: flex-start; gap: 9px; }
.ex-chain-step { align-self: flex-start; }
.ex-chain-step:nth-child(2) { margin-left: 9%; }
.ex-chain-step:nth-child(3) { margin-left: 18%; }
.ex-chain-step:nth-child(4) { margin-left: 27%; }

/* Card chips were pinned to the bottom with margin-top:auto, which opened a
   hole between the text and the chips whenever a neighbouring card was
   longer. Letting them follow the content puts the slack at the card's
   bottom edge, where it reads as breathing room rather than a gap. */
.ex-more-card .ex-stack { margin-top: 4px; padding-top: 0; }
.ex-more-card { gap: 10px; }

/* The orchestrator graph needs a fixed ratio (its nodes are positioned by
   percentage) but 5:4 made it taller than the copy beside it. 16:10 keeps the
   node spread readable while matching the text column better. */
.ex-diagram-agent { aspect-ratio: 16 / 10; }