:root {
  --radius: 0.5rem;
  /* ===== NexCommerce brand system ===== */
  --nx-navy: #050A1F;
  --nx-midnight: #081126;
  --nx-surface: #101722;
  --nx-panel: #151D2A;
  --nx-black: #030712;
  --nx-blue: #3B6DFF;
  --nx-cyan: #22D3EE;
  --nx-cyan-bright: #20E6FF;
  --nx-pink: #FF2E7A;
  --nx-rose: #E6005C;
  --nx-violet: #7C3AED;
  --nx-purple: #A855F7;
  --nx-green: #28E98C;
  --nx-deliver: #38BDF8;
  --nx-amber: #F5B942;
  --nx-alert: #FB3E75;
  --nx-text: #FFFFFF;
  --nx-soft: #D8DEE9;
  --nx-muted: #9CA7BA;
  --nx-dim: #64748B;
  --nx-card: rgba(15, 23, 42, 0.72);
  --nx-border: rgba(255,255,255,0.10);
  --nx-border-active: rgba(255,46,122,0.75);
  --nx-border-blue: rgba(59,109,255,0.60);
  /* Mapped to existing token names the components consume */
  --background: var(--nx-navy);
  --foreground: var(--nx-text);
  --card: rgba(21, 29, 42, 0.72);
  --card-foreground: var(--nx-text);
  --popover: #101722;
  --popover-foreground: var(--nx-text);
  --primary: var(--nx-blue);
  --primary-foreground: #ffffff;
  --secondary: #151D2A;
  --secondary-foreground: var(--nx-text);
  --muted: #151D2A;
  --muted-foreground: var(--nx-muted);
  --accent: #1b2436;
  --accent-foreground: var(--nx-text);
  --destructive: var(--nx-alert);
  --destructive-foreground: #ffffff;
  --border: rgba(255,255,255,0.10);
  --input: rgba(255,255,255,0.14);
  --ring: var(--nx-blue);
  --brand: var(--nx-blue);
  --brand-foreground: #ffffff;
  /* nexCommerce accents (kept names, repointed to brand) */
  --brand-blue: #3B6DFF;
  --brand-blue-deep: #1d3a8f;
  --brand-rose: #FF2E7A;
  --brand-rose-soft: #FF6FA5;
  --wire: oklch(1 0 0 / 12%);
  --wire-strong: oklch(1 0 0 / 24%);
  /* Intelligence Orb palette (scoped to the right-side hero visual) */
  --orb-cyan: #38bdf8;
  --orb-pink: #f43f8e;
  --orb-purple: #a78bfa;
  --orb-indigo: #6c3fff;
  --orb-green: #22c55e;
  --orb-amber: #fb923c;
  --orb-navy: #080b1a;
  --orb-pill-fill: rgba(13, 17, 40, 0.88);
  --orb-text: #f0f4ff;
}

* { border-color: var(--border); }

/* Accessibility: visible keyboard focus rings on all interactive elements (UI/UX §1) */
a, button, [role="button"], input, select, textarea, [tabindex] { touch-action: manipulation; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, .cta-nx:focus-visible, .cta-ghost:focus-visible,
.jx-node:focus-visible, .bfa-arrow:focus-visible, .jx-arrow:focus-visible {
  outline: 2px solid var(--nx-cyan, #3DE0FF);
  outline-offset: 3px;
  border-radius: 6px;
}
/* nav links get a slightly inset rounded ring */
.nav-link:focus-visible { outline-offset: 6px; }
/* enlarge tap/hit area to meet WCAG 2.5.5 (≥24px) without shifting layout */
.nav-link { padding-block: 7px; }
.nav-dot { position: relative; }
.nav-dot::before { content: ""; position: absolute; inset: -10px -6px; }

/* Custom-color utility shim — ensures these resolve with the static Tailwind
   build used for offline standalone export (Play CDN generates them in dev). */
.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.bg-background { background-color: var(--background); }
.bg-card { background-color: var(--card); }
.bg-muted { background-color: var(--muted); }
.border-border { border-color: var(--border); }
.border-input { border-color: var(--input); }
.bg-muted-foreground\/60 { background-color: color-mix(in oklab, var(--muted-foreground) 60%, transparent); }
.hover\:border-foreground\/20:hover { border-color: color-mix(in oklab, var(--foreground) 20%, transparent); }

html {
  scroll-behavior: smooth;
}
section[id] { scroll-margin-top: 96px; }
@media (max-width: 768px) { section[id] { scroll-margin-top: 88px; } }
html, body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
.wire-box {
  border: 1px dashed var(--wire-strong);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      oklch(1 0 0 / 3%) 14px 15px
    );
  border-radius: 12px;
}
.wire-box-solid {
  border: 1px solid var(--wire-strong);
  background: oklch(1 0 0 / 2%);
  border-radius: 12px;
}
.wire-label {
  font-family: "Space Grotesk", sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.anim-note {
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  color: oklch(0.75 0.12 220);
  border-left: 2px solid oklch(0.55 0.18 255);
  padding-left: 8px;
}
.section-tag {
  font-family: "Space Grotesk", sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.editorial-head {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* Unified centered section-header system */
.section-head { max-width: 920px; margin: 0 auto 56px; text-align: center; }
.section-head .stage-kicker,
.section-head .section-eyebrow { display: inline-flex; justify-content: center; align-items: center; margin-bottom: 14px; }
.section-head .section-title {
  margin: 0 auto 18px; max-width: 900px;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: clamp(40px, 4.6vw, 64px); font-weight: 800;
  line-height: 1.05; letter-spacing: -0.04em; color: #fff;
}
.section-head .section-subtitle {
  max-width: 680px; margin: 0 auto;
  font-size: clamp(16px, 1.35vw, 19px); font-weight: 400;
  line-height: 1.6; color: rgba(255,255,255,0.68);
}
@media (max-width: 1024px) {
  .section-head { max-width: 760px; margin-bottom: 44px; }
  .section-head .section-title { font-size: clamp(34px, 5vw, 50px); }
}
@media (max-width: 640px) {
  .section-head { max-width: 92%; margin-bottom: 28px; }
  .section-head .section-title { font-size: clamp(32px, 8.5vw, 40px); line-height: 1.08; }
  .section-head .section-subtitle { font-size: 15px; }

  /* ---- comprehensive mobile refinement ---- */
  section { padding-top: 46px !important; padding-bottom: 46px !important; }
  .orb-label { left: 79% !important; right: auto !important; top: 48% !important; transform: translate(-50%, -50%) !important; font-size: 19px !important; letter-spacing: 0.12em !important; animation: none !important; opacity: 1 !important; z-index: 4 !important; text-align: center !important; }
  /* Fulfill stage: move the floating card down to the thigh/hand zone, off the face */
  .fulfill-chip { top: 62% !important; right: 4% !important; }
  /* journey: 6 stages in one row, compact */
  .jx-nav-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 4px !important; }
  .jx-dot { height: 40px !important; width: 40px !important; border-radius: 11px !important; }
  .jx-dot svg { height: 17px !important; width: 17px !important; }
  .jx-node span:last-child { font-size: 9.5px !important; }
  /* experience showcase: compact + stable so tab-switching can't pull the next section up */
  .exp-showcase { min-height: 0 !important; gap: 1.25rem !important; }
  .exp-visual { min-height: 280px !important; margin-top: 4px !important; }

  /* global mobile overflow guard — no card/content clipped on either side */
  html, body { max-width: 100%; overflow-x: hidden; }
  section { overflow-x: clip; }
  .reveal { transform: translateY(20px); }
  .reveal[style*="translateX"], .reveal { will-change: auto; }

  /* commerce-model: clean 2-column grid with breathing room */
  .where-fit-row { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; column-gap: 24px !important; row-gap: 38px !important; justify-items: center !important; }
  .where-fit-item { width: 100% !important; max-width: 150px !important; }
  .where-fit-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* hero: clear the fixed logo/navbar so the heading doesn't crowd it */
  #top { padding-top: 104px !important; }
  /* journey stage: tighter model area + smaller, edge-anchored floating cards (clear the face) */
  .jx-visual { height: 400px !important; }
  .float-chip { transform: scale(0.82); transform-origin: right center; font-size: 11px !important; }
  .float-pill { transform: scale(0.8); }
  .jx-behind { transform: scale(0.78) !important; transform-origin: top left; }
  /* Personalize: hide the upper two cards on mobile so they don't cover the face */
  .pf-chip-0, .pf-chip-1 { display: none !important; }
  .bento-card { padding: 18px 15px; }
  /* experience tabs: one row, equal width, icon-only */
  .exp-tabs { flex-wrap: nowrap !important; gap: 8px !important; }
  .exp-tabs .exp-tab { flex: 1 1 0; padding-left: 0 !important; padding-right: 0 !important; }
  .exp-tab-label { display: none !important; }

  /* mobile-first touch targets (≥48px) + readable text */
  .exp-tabs .exp-tab { min-height: 48px; }
  .cta-nx, .cta-ghost { min-height: 48px; padding-top: 0.85rem; padding-bottom: 0.85rem; }
  .nav-dot::before { inset: -20px -10px; }
  .jx-dot { height: 52px; width: 52px; }
  .st-fab { min-height: 48px; }
  .jx-arrow { height: 48px; width: 48px; }
  body { -webkit-text-size-adjust: 100%; }
}
@media (max-width: 520px) {
  .arch2-surfaces, .arch2-caps, .arch2-foundation, .arch2-agents-grid { grid-template-columns: 1fr 1fr !important; }
  .arch2-mid { grid-template-columns: 1fr !important; }
}

@keyframes orbLabelMobile { 0% { opacity: 0; } 22% { opacity: 1; } 68% { opacity: 1; } 100% { opacity: 0; } }
/* mobile full-screen menu */
.mobile-menu { opacity: 0; pointer-events: none; transition: opacity 0.28s ease; }
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu-link { transform: translateY(8px); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease; }
.mobile-menu.open .mobile-menu-link { transform: none; opacity: 1; }
.mobile-menu.open .mobile-menu-link:nth-child(1) { transition-delay: 0.06s; }
.mobile-menu.open .mobile-menu-link:nth-child(2) { transition-delay: 0.12s; }
.mobile-menu.open .mobile-menu-link:nth-child(3) { transition-delay: 0.18s; }
.mobile-menu.open .mobile-menu-link:nth-child(4) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .mobile-menu, .mobile-menu-link { transition: none !important; } }
/* mobile orb: radial mask so the canvas/rays fade circularly into the hero (no rectangular crop) */
.mob-orb canvas, .mob-orb svg {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 50%, rgba(0,0,0,0.4) 66%, transparent 78%) !important;
          mask-image: radial-gradient(circle at 50% 50%, #000 50%, rgba(0,0,0,0.4) 66%, transparent 78%) !important;
}
@keyframes marquee-y {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.marquee-col { animation: marquee-y linear infinite; }
.marquee-col-slow   { animation-duration: 55s; }
.marquee-col-slower { animation-duration: 80s; }
.marquee-col-slowest{ animation-duration: 110s; }

@keyframes marquee-x-ltr {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
@keyframes marquee-x-rtl {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-x        { display: flex; width: max-content; animation: marquee-x-rtl 60s linear infinite; }
.marquee-x.ltr    { animation-name: marquee-x-ltr; }
.marquee-x.speed-slow   { animation-duration: 130s; }
.marquee-x.speed-medium { animation-duration: 105s; }
.marquee-x.speed-fast   { animation-duration: 80s; }
.marquee-row-wrap { position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
}
.marquee-row-wrap::before,
.marquee-row-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.marquee-row-wrap::before { left: 0;  background: none; display: none; }
.marquee-row-wrap::after  { right: 0; background: none; display: none; }

/* Section background progression: rose → mid → blue */
.section-bg-rose {
  background:
    radial-gradient(60% 70% at 15% 10%, color-mix(in oklab, var(--brand-rose) 14%, transparent), transparent 60%),
    radial-gradient(50% 60% at 90% 90%, color-mix(in oklab, var(--brand-rose) 8%, transparent), transparent 60%);
}
.section-bg-rose-mid {
  background:
    radial-gradient(60% 70% at 85% 15%, color-mix(in oklab, var(--brand-rose) 12%, transparent), transparent 60%),
    radial-gradient(50% 60% at 10% 85%, color-mix(in oklab, var(--brand-blue) 8%, transparent), transparent 60%);
}
.section-bg-mid {
  background:
    radial-gradient(55% 65% at 50% 20%, color-mix(in oklab, var(--brand-rose) 10%, transparent), transparent 60%),
    radial-gradient(55% 65% at 50% 90%, color-mix(in oklab, var(--brand-blue) 10%, transparent), transparent 60%);
}
.section-bg-mid-blue {
  background:
    radial-gradient(60% 70% at 12% 18%, color-mix(in oklab, var(--brand-rose) 8%, transparent), transparent 60%),
    radial-gradient(55% 65% at 88% 80%, color-mix(in oklab, var(--brand-blue) 14%, transparent), transparent 60%);
}
.section-bg-blue {
  background:
    radial-gradient(60% 70% at 80% 15%, color-mix(in oklab, var(--brand-blue) 16%, transparent), transparent 60%),
    radial-gradient(55% 60% at 10% 90%, color-mix(in oklab, var(--brand-blue) 10%, transparent), transparent 60%);
}

/* ---- MacBook frame (realistic) ---- */
.device-laptop {
  position: relative;
  border-radius: 22px 22px 8px 8px;
  border: 1px solid #2a2a2c;
  background: linear-gradient(180deg, #1d1d1f 0%, #0b0b0d 100%);
  padding: 28px 14px 16px;
  box-shadow:
    inset 0 0 0 1px #3a3a3c,
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 50px 100px -30px rgba(0,0,0,0.85);
  margin-bottom: 28px;
}
.device-laptop::before {
  content: "";
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4a4a4c, #050507 70%);
  box-shadow: 0 0 0 1px #2a2a2c, inset 0 0 2px rgba(120,180,255,0.5);
}
.device-laptop::after {
  content: "";
  position: absolute; left: -10%; right: -10%; bottom: -22px;
  height: 22px;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(180deg, #2a2a2c 0%, #161618 60%, #0a0a0c 100%);
  border: 1px solid #2a2a2c;
  border-top: 1px solid #3a3a3c;
  box-shadow: 0 30px 50px -20px rgba(0,0,0,0.7);
}
.device-laptop > * {
  border-radius: 6px;
  overflow: hidden;
  background: #0a0a0c;
}

/* ---- iPhone frame (realistic) ---- */
.device-phone {
  position: relative;
  width: 264px;
  border-radius: 44px;
  border: 1px solid #3a3a3c;
  background: linear-gradient(180deg, #1d1d1f 0%, #0a0a0c 100%);
  padding: 10px;
  box-shadow:
    inset 0 0 0 2px #050507,
    inset 0 0 0 3px #2a2a2c,
    inset 0 0 0 4px #161618,
    0 50px 100px -30px rgba(0,0,0,0.85);
}
.device-phone::before {
  content: "";
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 28px; border-radius: 16px;
  background: #050507;
  box-shadow: inset 0 0 0 1px #1a1a1c;
  z-index: 3;
}
.device-phone::after {
  content: "";
  position: absolute; left: -3px; top: 90px;
  width: 3px; height: 22px;
  border-radius: 2px 0 0 2px;
  background: #2a2a2c;
  box-shadow:
    0 38px 0 0 #2a2a2c,
    265px 30px 0 0 #2a2a2c;
}
.device-phone > * {
  border-radius: 34px;
  overflow: hidden;
  padding-top: 60px;
  background: #050507;
  min-height: 480px;
  position: relative;
}
.device-phone > *::before {
  content: "9:41";
  position: absolute;
  top: 20px; left: 28px;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  z-index: 4;
  letter-spacing: -0.01em;
}
.device-phone > *::after {
  content: "";
  position: absolute;
  top: 25px; right: 24px;
  width: 24px; height: 11px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 3px;
  background:
    linear-gradient(90deg, #fff 0 80%, transparent 80%) no-repeat;
  background-size: 100% 100%;
  box-shadow: 27px 3px 0 -1px rgba(255,255,255,0.7);
  z-index: 4;
}

@keyframes fade-slide-in {
  0%   { opacity: 0; transform: translateX(24px); }
  100% { opacity: 1; transform: translateX(0); }
}
.slide-in { animation: fade-slide-in 600ms ease-out both; }

/* ---------- Hero ---------- */
.hero-bg {
  background:
    radial-gradient(45% 40% at 82% 18%, color-mix(in oklab, var(--brand-rose) 18%, transparent) 0%, transparent 60%),
    radial-gradient(55% 50% at 12% 85%, color-mix(in oklab, var(--brand-blue) 28%, transparent) 0%, transparent 60%),
    radial-gradient(60% 50% at 50% 0%, color-mix(in oklab, #6aa0ff 14%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #0a1530 0%, #070d20 60%, #050912 100%);
}
.hero-grid-overlay {
  background-image:
    linear-gradient(to right, oklch(1 0 0 / 4%) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(1 0 0 / 4%) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.ambient-signal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(10, 20, 40, 0.55);
  border: 1px solid rgba(122, 182, 255, 0.28);
  font-size: 10.5px;
  color: #dfeaff;
  box-shadow:
    0 0 0 1px rgba(122, 182, 255, 0.05),
    0 0 24px -4px rgba(42, 109, 244, 0.45),
    0 14px 30px -16px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.ambient-signal .dot {
  width: 5px; height: 5px; border-radius: 999px;
  background: #6aa0ff;
  box-shadow: 0 0 10px #6aa0ff, 0 0 18px rgba(106,160,255,0.6);
}
.ambient-signal.rose {
  border-color: rgba(227, 0, 59, 0.32);
  box-shadow:
    0 0 0 1px rgba(227, 0, 59, 0.05),
    0 0 24px -4px rgba(227, 0, 59, 0.45),
    0 14px 30px -16px rgba(0, 0, 0, 0.7);
}
.ambient-signal.rose .dot {
  background: var(--brand-rose);
  box-shadow: 0 0 10px var(--brand-rose), 0 0 18px rgba(227,0,59,0.55);
}
@keyframes float-soft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.float-soft { animation: float-soft 5s ease-in-out infinite; }
.float-soft-2 { animation: float-soft 6.5s ease-in-out infinite; animation-delay: -2s; }
.float-soft-3 { animation: float-soft 7.5s ease-in-out infinite; animation-delay: -4s; }
.brand-gradient-text {
  background: linear-gradient(92deg, #ffffff 0%, #ffffff 55%, var(--brand-rose-soft) 78%, var(--brand-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand-rose) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand-rose) 30%, transparent);
  color: var(--brand-rose-soft);
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.brand-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--brand-rose);
  box-shadow: 0 0 12px var(--brand-rose), 0 0 24px color-mix(in oklab, var(--brand-rose) 60%, transparent);
}
.cta-experience {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: white;
  border: none;
  cursor: pointer;
  background: linear-gradient(120deg, var(--brand-rose) 0%, #c1003f 50%, var(--brand-blue-deep) 100%);
  box-shadow:
    0 10px 30px -8px color-mix(in oklab, var(--brand-rose) 60%, transparent),
    inset 0 1px 0 oklch(1 0 0 / 25%);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cta-experience:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -10px color-mix(in oklab, var(--brand-rose) 70%, transparent); }
.cta-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px;
  background: oklch(1 0 0 / 18%);
}

.stage {
  position: relative;
  border-radius: 20px;
  background:
    linear-gradient(180deg, oklch(1 0 0 / 4%), oklch(1 0 0 / 1%)),
    oklch(0.18 0.02 260);
  border: 1px solid oklch(1 0 0 / 8%);
  box-shadow:
    0 40px 120px -40px color-mix(in oklab, var(--brand-blue) 35%, transparent),
    0 20px 60px -30px color-mix(in oklab, var(--brand-rose) 25%, transparent),
    inset 0 1px 0 oklch(1 0 0 / 6%);
  overflow: hidden;
}
.stage-card {
  background: linear-gradient(180deg, oklch(1 0 0 / 5%), oklch(1 0 0 / 2%));
  border: 1px solid oklch(1 0 0 / 8%);
  border-radius: 14px;
}
.stage-card.active {
  border-color: color-mix(in oklab, var(--brand-rose) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--brand-rose) 35%, transparent),
              0 20px 40px -20px color-mix(in oklab, var(--brand-rose) 60%, transparent);
}
.caret { display: inline-block; width: 8px; height: 1.05em; background: var(--brand-rose-soft); margin-left: 2px; vertical-align: -2px; animation: caret-blink 1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.float-y { animation: float-y 6s ease-in-out infinite; }

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand-rose) 55%, transparent); }
  100% { box-shadow: 0 0 0 14px color-mix(in oklab, var(--brand-rose) 0%, transparent); }
}
.pulse-ring { animation: pulse-ring 1.8s ease-out infinite; }

@keyframes pop-in {
  0%   { opacity: 0; transform: translateY(8px) scale(.98); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}
.pop-in { animation: pop-in .5s ease-out both; }

.scrollbar-none::-webkit-scrollbar { display: none; }

@keyframes beneficiary-backlight-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}
.beneficiary-backlight {
  transform-origin: 50% 45%;
  animation: beneficiary-backlight-pulse 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .beneficiary-backlight { animation: none; }
}

/* ---------- Intelligence Orb — "Agentic AI Commerce" ---------- */
.orb-stage {
  position: absolute;
  left: 50%; top: 50%;
  width: 520px; height: 540px;
  transform: translate(-50%, -50%);
  transform-origin: center;
  overflow: visible;
}
.orb-field-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(44% 34% at 50% 36%, color-mix(in oklab, var(--orb-indigo) 30%, transparent), transparent 70%),
    radial-gradient(120% 120% at 50% 44%, transparent 55%, rgba(2,4,12,0.85) 100%);
}
.orb-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(167,139,250,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(167,139,250,0.10) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, transparent 85%);
          mask-image: radial-gradient(ellipse at center, #000 45%, transparent 85%);
}
.orb-guides { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.orb-guides line { stroke: rgba(167,139,250,0.12); stroke-width: 1; }
.orb-way {
  position: absolute; width: 5px; height: 5px; border-radius: 999px;
  transform: translate(-50%, -50%);
  animation: orb-breathe 5s ease-in-out infinite;
}
.orb-way.pink   { background: var(--orb-pink);   box-shadow: 0 0 10px var(--orb-pink); }
.orb-way.cyan   { background: var(--orb-cyan);   box-shadow: 0 0 10px var(--orb-cyan); animation-delay: -1.6s; }
.orb-way.purple { background: var(--orb-purple); box-shadow: 0 0 10px var(--orb-purple); animation-delay: -3.1s; }
.orb-signal {
  position: absolute; left: 65.5%; top: 36.3%;
  display: flex; gap: 9px; align-items: center; pointer-events: none;
}
.orb-signal span {
  width: 4px; height: 4px; border-radius: 999px;
  background: var(--orb-purple); box-shadow: 0 0 7px var(--orb-purple);
}
.orb-connectors, .orb-rings {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.orb-connectors line { stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.28; }
.orb-ring { fill: none; stroke: rgba(167,139,250,0.18); stroke-width: 1; }
@keyframes orb-spin { to { transform: rotate(360deg); } }

/* Sphere */
.orb-sphere {
  position: absolute;
  width: 156px; height: 156px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.orb-sphere-core {
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; text-align: center;
  background: radial-gradient(circle at 37% 31%, #20264e 0%, #11163a 34%, #0a0e28 62%, #070a1e 100%);
  box-shadow:
    inset 9px 11px 28px rgba(0,0,0,0.62),
    inset -7px -9px 22px rgba(0,0,0,0.5),
    0 34px 80px -34px rgba(0,0,0,0.85);
  animation: orb-breathe 7s ease-in-out infinite;
}
.orb-sphere-rim {
  position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 52deg,
    var(--orb-cyan) 92deg,
    #8fe0ff 118deg,
    #ff7ab0 150deg,
    var(--orb-pink) 172deg,
    transparent 208deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 69%, #000 75%, #000 100%);
          mask: radial-gradient(circle at 50% 50%, transparent 69%, #000 75%, #000 100%);
  filter: drop-shadow(0 0 10px rgba(244,63,142,0.55)) drop-shadow(0 0 14px rgba(56,189,248,0.5));
}
.orb-spark { width: 24px; height: 24px; filter: drop-shadow(0 0 8px color-mix(in oklab, var(--orb-cyan) 70%, transparent)); }
.orb-title {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 600; font-size: 14px; line-height: 1.22;
  letter-spacing: -0.01em; color: var(--orb-text);
}

/* Pills */
.orb-pill-layer { position: absolute; inset: 0; }
.orb-pill {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--orb-pill-fill);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 30px -18px rgba(0,0,0,0.8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  white-space: nowrap; cursor: default; will-change: transform;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.orb-pill-dot { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; }
.orb-pill-label {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 500; font-size: 13px; letter-spacing: -0.005em;
  color: var(--orb-text);
}
.orb-pill.hl {
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 0 22px -6px rgba(167,139,250,0.5), 0 14px 30px -18px rgba(0,0,0,0.8);
}

/* Predictive timeline ribbon */
.orb-tl-axis { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.orb-tl-line { filter: drop-shadow(0 0 6px rgba(56,189,248,0.35)); }
.orb-tl-connector {
  stroke: var(--orb-purple); stroke-width: 1; stroke-dasharray: 3 4;
  animation: orb-tl-conn 3s ease-in-out infinite;
}
@keyframes orb-tl-conn { 0%,100% { opacity: 0.4; } 50% { opacity: 0.7; } }
.orb-tl-events { position: absolute; inset: 0; pointer-events: none; }
.orb-tl-now-glow {
  position: absolute; width: 60px; height: 60px; border-radius: 999px;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(56,189,248,0.45), transparent 68%);
  animation: orb-breathe 3s ease-in-out infinite;
}
.orb-tl-dot {
  position: absolute; left: 0; top: 0;
  width: 7px; height: 7px; border-radius: 999px;
  transform: translate(-50%, -50%);
}
.orb-tl-live {
  position: absolute; left: 0; top: 0;
  width: 12px; height: 12px; border-radius: 999px;
  transform: translate(-50%, -50%); z-index: 3;
  background: linear-gradient(135deg, var(--orb-pink), var(--orb-cyan));
  box-shadow: 0 0 10px var(--orb-pink), 0 0 18px color-mix(in oklab, var(--orb-cyan) 70%, transparent);
  animation: orb-tl-live-pulse 3s ease-in-out infinite;
}
@keyframes orb-tl-live-pulse {
  0%,100% { transform: translate(-50%,-50%) scale(1);    box-shadow: 0 0 10px var(--orb-pink), 0 0 18px color-mix(in oklab, var(--orb-cyan) 65%, transparent); }
  50%     { transform: translate(-50%,-50%) scale(1.16); box-shadow: 0 0 14px var(--orb-pink), 0 0 26px color-mix(in oklab, var(--orb-cyan) 80%, transparent); }
}
.orb-tl-label {
  position: absolute; left: 0; top: 0;
  white-space: nowrap;
  font-family: "Space Grotesk", sans-serif;
  font-size: 9.5px; letter-spacing: 0.02em;
}
.orb-tl-label.past   { color: #8892b0; }
.orb-tl-label.future { color: #8892b0; font-style: italic; }
.orb-tl-fixed {
  position: absolute; left: 0; top: 0; white-space: nowrap; z-index: 3;
  font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 10.5px;
  color: #ffffff; letter-spacing: -0.005em;
}
.orb-tl-fixed.w6 { font-weight: 600; }
.orb-tl-fixed.w5 { font-weight: 500; }
.orb-tl-livename-wrap {
  position: absolute; left: 0; top: 0; z-index: 3;
  transform: translate(-50%, -100%);
  width: 0; height: 0; pointer-events: none;
}
.orb-tl-livename {
  position: absolute; left: 0; bottom: 0;
  transform: translateX(-50%); white-space: nowrap;
  font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: -0.01em; color: #f0f4ff;
}
.orb-tl-livename.in  { animation: orb-tl-name-in  0.8s ease forwards; }
.orb-tl-livename.out { animation: orb-tl-name-out 0.8s ease forwards; }
@keyframes orb-tl-name-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes orb-tl-name-out { from { opacity: 1; } to { opacity: 0; } }
.orb-tl-livecap {
  position: absolute; left: 0; top: 0; transform: translate(-50%, 0);
  font-family: "Space Grotesk", sans-serif;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--orb-cyan); white-space: nowrap;
}
.orb-tl-cap {
  position: absolute; transform: translate(-50%, 0);
  font-family: "Space Grotesk", sans-serif;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  pointer-events: none;
}
.orb-tl-cap.past { color: #6b7a99; }
.orb-tl-cap.pred { color: var(--orb-purple); }

@media (prefers-reduced-motion: reduce) {
  .orb-sphere-core, .orb-way, .orb-rings g, .orb-tl-now-glow, .orb-tl-live, .orb-tl-connector { animation: none !important; }
  .orb-tl-livename.in, .orb-tl-livename.out { animation-duration: 0.01s !important; }
}

/* ===================================================================
   Premium motion layer — scroll reveal, hero entrance, agentic scenes
   =================================================================== */

/* ---- Scroll reveal (driven by IntersectionObserver in main.jsx) ---- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal-left  { transform: translateX(-30px); }
.reveal-left.in-view  { transform: none; }
.reveal-right { transform: translateX(30px); }
.reveal-right.in-view { transform: none; }
.reveal-scale { transform: translateY(20px) scale(0.97); }
.reveal-scale.in-view { transform: none; }

/* ---- Hero entrance ---- */
@keyframes hero-rise {
  0%   { opacity: 0; transform: translateY(26px); }
  100% { opacity: 1; transform: translateY(0); }
}
.hero-rise { animation: hero-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

/* ---- Generic hover lift for cards ---- */
.hover-lift { transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--brand-rose) 40%, transparent);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,0.7), 0 0 0 1px color-mix(in oklab, var(--brand-rose) 20%, transparent);
}

/* ---- Timeline shimmer (active stage bar) ---- */
@keyframes timeline-shimmer { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
.timeline-shimmer { animation: timeline-shimmer 2.2s ease-in-out infinite; }

/* ---- Agent "scanning" sweep across a product image ---- */
@keyframes agent-scan { 0% { transform: translateY(-120%); } 100% { transform: translateY(420%); } }
.agent-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 36%;
  background: linear-gradient(180deg, transparent, rgba(122,182,255,0.45), transparent);
  mix-blend-mode: screen; pointer-events: none;
  animation: agent-scan 2.4s ease-in-out 0.3s 2;
}

/* ---- Scan ring on the best-match card ---- */
@keyframes scan-ring-pulse {
  0%   { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand-rose) 70%, transparent); opacity: 1; }
  70%  { box-shadow: inset 0 0 0 6px color-mix(in oklab, var(--brand-rose) 0%, transparent); opacity: 0; }
  100% { opacity: 0; }
}
.scan-ring {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: scan-ring-pulse 2.2s ease-out 1;
}

/* ---- Agent "thinking" dots ---- */
.agent-thinking { display: inline-flex; gap: 3px; align-items: center; }
.agent-thinking span {
  width: 4px; height: 4px; border-radius: 999px; background: currentColor; opacity: 0.4;
  animation: agent-dot 1.1s ease-in-out infinite;
}
.agent-thinking span:nth-child(2) { animation-delay: 0.18s; }
.agent-thinking span:nth-child(3) { animation-delay: 0.36s; }
@keyframes agent-dot { 0%,100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

/* ---- Live dot pulse on status badges ---- */
.live-dot { animation: live-dot 1.6s ease-in-out infinite; }
@keyframes live-dot { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; } 50% { opacity: 0.6; box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 0%, transparent); } }

/* ---- Compare rows revealing as the agent evaluates ---- */
@keyframes cmp-row { 0% { opacity: 0; transform: translateX(8px); } 100% { opacity: 1; transform: translateX(0); } }
.cmp-row { animation: cmp-row 0.5s ease-out both; }

/* ---- Signals streaming in (personalize / learn) ---- */
@keyframes signal-in { 0% { opacity: 0; transform: translateX(10px); } 100% { opacity: 1; transform: translateX(0); } }
.signal-in { animation: signal-in 0.5s ease-out both; }

/* ---- Checkout: verifying spinner + confirm-ready glow ---- */
.spin-dot {
  width: 9px; height: 9px; border-radius: 999px; display: inline-block;
  border: 1.5px solid rgba(255,255,255,0.25); border-top-color: #7ab6ff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes confirm-ready { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand-rose) 60%, transparent); } 100% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--brand-rose) 0%, transparent); } }
.confirm-ready { animation: confirm-ready 1.1s ease-out 2; }

/* ---- Fulfill progress bars fill on mount ---- */
@keyframes bar-fill { 0% { width: 0; } 100% { width: var(--bar); } }
.bar-fill { width: var(--bar); animation: bar-fill 1s cubic-bezier(0.22,0.61,0.36,1) both; }

/* ---- Learn sparkline draw-on ---- */
.spark-draw {
  stroke-dasharray: 240; stroke-dashoffset: 240;
  animation: spark-draw 1.3s ease-out both;
}
@keyframes spark-draw { to { stroke-dashoffset: 0; } }

/* =====================================================================
   NexCommerce v2 — section moods, person treatment, clean orb, ambient
   ===================================================================== */

/* ---- Section mood backgrounds (each section = a chapter) ---- */
.mood-hero     { background: linear-gradient(135deg, #050A1F 0%, #081126 45%, #180A2E 100%); }
.mood-flow     { background: linear-gradient(180deg, #071024 0%, #090E1F 60%, #111827 100%); }
.mood-means    { background: #F6F8FC; color: #0F172A; }
.mood-usecase  { background: linear-gradient(135deg, #06172E 0%, #0B1C3A 50%, #111827 100%); }
.mood-checkout { background: linear-gradient(135deg, #0B1020 0%, #111827 45%, #1E1233 100%); }
.mood-fulfill  { background: linear-gradient(135deg, #061A1F 0%, #0B2A2E 45%, #111827 100%); }
.mood-deliver  { background: linear-gradient(135deg, #06162A 0%, #0B2447 50%, #0F172A 100%); }
.mood-learn    { background: linear-gradient(135deg, #100A22 0%, #111827 45%, #06172E 100%); }
.mood-cta      { background: linear-gradient(135deg, #050A1F 0%, #140A2E 50%, #06172E 100%); }

/* soft seam so chapters melt into each other */
.chapter-seam-top::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 120px;
  background: linear-gradient(180deg, rgba(5,10,31,0.0), rgba(5,10,31,0.0));
  pointer-events: none;
}

/* ---- Person cutout treatment: clean cutout, soft shadow + rim glow ---- */
.nx-person {
  filter:
    drop-shadow(0 30px 55px rgba(0,0,0,0.45))
    drop-shadow(0 0 42px rgba(59,109,255,0.20))
    drop-shadow(0 0 60px rgba(255,46,122,0.12));
  -webkit-user-select: none; user-select: none;
}
@keyframes person-enter {
  0%   { opacity: 0; transform: translateY(26px) scale(0.965); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0)    scale(1);     filter: blur(0); }
}
.person-enter { animation: person-enter 0.85s cubic-bezier(0.22,0.61,0.36,1) both; }
/* per-stage cross-fade swap */
.person-swap { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,0.61,0.36,1); }

/* ---- Ambient layers: faint grid drift + slow gradient + particles ---- */
@keyframes grid-drift { 0% { background-position: 0 0; } 100% { background-position: 0 -60px; } }
.grid-field {
  background-image:
    linear-gradient(rgba(120,160,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,255,0.06) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(80% 70% at 50% 30%, #000 30%, transparent 75%);
  animation: grid-drift 14s linear infinite;
}
@keyframes gradient-drift {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1.05); }
  50%  { transform: translate3d(4%, 3%, 0)  scale(1.12); }
  100% { transform: translate3d(-4%, -2%, 0) scale(1.05); }
}
.gradient-drift { animation: gradient-drift 22s ease-in-out infinite; will-change: transform; }
@keyframes particle-rise {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-180px); opacity: 0; }
}
.nx-particle { position: absolute; border-radius: 999px; animation: particle-rise linear infinite; }

/* ---- Clean Agentic AI Orb (minimal: core + soft rings + spark + particles) ---- */
.nx-orb-wrap { position: relative; aspect-ratio: 1; }
.nx-orb-core {
  position: absolute; inset: 26%; border-radius: 999px;
  background:
    radial-gradient(40% 40% at 42% 36%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(70% 70% at 50% 44%, rgba(34,211,238,0.55), transparent 64%),
    radial-gradient(90% 90% at 56% 70%, rgba(124,58,237,0.65), transparent 70%),
    radial-gradient(circle at 50% 50%, #0a1130, #060a1c);
  box-shadow:
    inset 0 0 40px rgba(8,12,30,0.9),
    inset 0 6px 26px rgba(255,255,255,0.10),
    0 0 60px rgba(34,211,238,0.22),
    0 0 120px rgba(124,58,237,0.22);
  animation: orb-breathe 6s ease-in-out infinite;
}
@keyframes orb-breathe {
  0%,100% { transform: scale(1);    box-shadow: inset 0 0 40px rgba(8,12,30,0.9), inset 0 6px 26px rgba(255,255,255,0.10), 0 0 60px rgba(34,211,238,0.20), 0 0 120px rgba(124,58,237,0.20); }
  50%     { transform: scale(1.018); box-shadow: inset 0 0 44px rgba(8,12,30,0.92), inset 0 6px 30px rgba(255,255,255,0.14), 0 0 80px rgba(34,211,238,0.30), 0 0 150px rgba(124,58,237,0.28); }
}
.nx-orb-spark {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
  transform: translate(-50%,-50%); border-radius: 999px; background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 26px var(--nx-cyan), 0 0 48px var(--nx-violet);
  animation: spark-pulse 3.2s ease-in-out infinite;
}
@keyframes spark-pulse { 0%,100% { opacity: 0.85; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.35); } }
.nx-orb-ring {
  position: absolute; inset: 0; border-radius: 999px; border: 1px solid rgba(255,255,255,0.10);
}
.nx-orb-ring.glow { box-shadow: inset 0 0 30px rgba(34,211,238,0.10); }
@keyframes orb-spin     { to { transform: rotate(360deg); } }
@keyframes orb-spin-rev { to { transform: rotate(-360deg); } }
.nx-orb-orbit { position: absolute; inset: 0; border-radius: 999px; transform-style: preserve-3d; }
.nx-orb-orbit.r1 { animation: orb-spin 26s linear infinite; }
.nx-orb-orbit.r2 { animation: orb-spin-rev 38s linear infinite; }
.nx-orb-orbit.r3 { animation: orb-spin 52s linear infinite; }
.nx-orb-dot {
  position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 999px; background: var(--nx-cyan);
  box-shadow: 0 0 10px var(--nx-cyan), 0 0 18px rgba(34,211,238,0.6);
}
.nx-orb-halo {
  position: absolute; inset: -8%; border-radius: 999px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(124,58,237,0.18), rgba(34,211,238,0.10) 60%, transparent 72%);
  filter: blur(6px);
}

/* live-panel scene change: slide + scale + fade in */
@keyframes stage-swap { 0% { opacity: 0; transform: translateY(10px) scale(0.992); } 100% { opacity: 1; transform: none; } }
.stage-swap { animation: stage-swap 0.5s cubic-bezier(0.22,0.61,0.36,1) both; }

/* light-section card (What Agentic Commerce Means) */
.means-card {
  background: #ffffff; border: 1px solid rgba(15,23,42,0.08); border-radius: 22px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 18px 40px -24px rgba(15,23,42,0.22);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.means-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 26px 54px -26px rgba(59,109,255,0.30); }

/* primary CTA: pink→blue gradient pill with controlled glow */
.cta-nx {
  position: relative; display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.95rem 1.7rem; border-radius: 999px; font-weight: 600; color: #fff;
  background: linear-gradient(92deg, #FF2E7A 0%, #7C3AED 52%, #3B6DFF 100%);
  box-shadow: 0 10px 30px -8px rgba(255,46,122,0.45), 0 8px 28px -10px rgba(59,109,255,0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.cta-nx:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 44px -10px rgba(255,46,122,0.6), 0 12px 36px -10px rgba(59,109,255,0.55); }
.cta-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.95rem 1.5rem;
  border-radius: 999px; font-weight: 500; color: var(--nx-soft);
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.03);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.cta-ghost:hover { border-color: rgba(34,211,238,0.55); background: rgba(34,211,238,0.06); transform: translateY(-2px); }

/* hero headline display type */
.nx-display {
  font-family: "Hanken Grotesk",system-ui,sans-serif;
  font-weight: 700; letter-spacing: -0.025em; line-height: 0.98;
  font-size: clamp(2.7rem, 6.4vw, 6.4rem);
}
.nx-sub {
  color: var(--nx-soft); font-weight: 400; line-height: 1.5;
  font-size: clamp(1.05rem, 1.5vw, 1.6rem);
}

@media (prefers-reduced-motion: reduce) {
  /* Global catch-all: complete animations instantly, neutralize transitions,
     so motion-sensitive users see the final state with no movement (UI/UX §7). */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-rise, .person-enter { animation: none; opacity: 1; transform: none; filter: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .timeline-shimmer, .agent-scan, .scan-ring, .agent-thinking span, .live-dot,
  .cmp-row, .signal-in, .spin-dot, .confirm-ready, .bar-fill, .spark-draw,
  .grid-field, .gradient-drift, .nx-particle, .orb-breathe, .nx-orb-core,
  .nx-orb-spark, .nx-orb-orbit, .float-soft, .float-soft-2, .float-soft-3, .float-y,
  .float-ui, .float-ui-2, .pill-glow, .bracket-glow, .model-in, .chip-in { animation: none !important; }
  .bar-fill { width: var(--bar); }
  .spark-draw { stroke-dashoffset: 0; }
}

/* =====================================================================
   NexCommerce v3 — MODEL-FIRST composition (Algolia-style)
   Two alternating brand families · model in front · UI behind · clean
   ===================================================================== */

/* ---- Section color families ---- */
.fam-blue {
  background:
    radial-gradient(115% 75% at 82% 0%, rgba(72,120,255,0.12), transparent 56%),
    radial-gradient(95% 70% at 12% 100%, rgba(0,209,255,0.10), transparent 60%),
    linear-gradient(168deg, #07142E 0%, #091A3A 48%, #0B1D44 100%);
}
.fam-violet {
  background:
    radial-gradient(115% 75% at 16% 0%, rgba(152,77,255,0.14), transparent 56%),
    radial-gradient(95% 70% at 88% 100%, rgba(255,61,145,0.12), transparent 60%),
    linear-gradient(168deg, #241042 0%, #2C1350 48%, #34155A 100%);
}

/* ============================================================
   SWITCHABLE SECTION SCHEMES — driven by html[data-scheme].
   Each overrides the two section families (.fam-blue = "A" band,
   .fam-violet = "B" band). All keep dark text/components intact.
   Toggle widget in NexCommerce.html sets the attribute + persists.
   ============================================================ */

/* B · Cool Twilight — Navy ↔ Indigo */
html[data-scheme="twilight"] .fam-violet {
  background:
    radial-gradient(115% 75% at 16% 0%, rgba(99,102,241,0.18), transparent 56%),
    radial-gradient(95% 70% at 88% 100%, rgba(79,140,255,0.12), transparent 60%),
    linear-gradient(168deg, #11123A 0%, #171748 48%, #1E1E54 100%);
}

/* C · Aurora — Teal-Navy ↔ Violet */
html[data-scheme="aurora"] .fam-blue {
  background:
    radial-gradient(115% 75% at 82% 0%, rgba(52,229,176,0.13), transparent 56%),
    radial-gradient(95% 70% at 12% 100%, rgba(0,209,255,0.10), transparent 60%),
    linear-gradient(168deg, #04161C 0%, #06222C 48%, #073A44 100%);
}

/* D · Plum — Navy ↔ Magenta-Plum */
html[data-scheme="plum"] .fam-violet {
  background:
    radial-gradient(115% 75% at 16% 0%, rgba(255,77,166,0.16), transparent 56%),
    radial-gradient(95% 70% at 88% 100%, rgba(232,91,255,0.12), transparent 60%),
    linear-gradient(168deg, #2A0E2E 0%, #380F42 48%, #471452 100%);
}

/* E · Midnight Mono — Navy ↔ Elevated Navy (single hue, two depths) */
html[data-scheme="mono"] .fam-blue {
  background:
    radial-gradient(110% 70% at 82% 0%, rgba(72,120,255,0.10), transparent 58%),
    linear-gradient(168deg, #050E22 0%, #081530 48%, #0A1430 100%);
}
html[data-scheme="mono"] .fam-violet {
  background:
    radial-gradient(110% 70% at 16% 0%, rgba(79,140,255,0.16), transparent 58%),
    radial-gradient(95% 70% at 88% 100%, rgba(0,209,255,0.10), transparent 62%),
    linear-gradient(168deg, #0C2150 0%, #102A60 48%, #13295C 100%);
}

/* F · Ink Drama — Near-black ↔ Violet */
html[data-scheme="ink"] .fam-blue {
  background:
    radial-gradient(110% 70% at 82% 0%, rgba(79,140,255,0.16), transparent 56%),
    radial-gradient(80% 60% at 18% 100%, rgba(255,77,166,0.10), transparent 60%),
    linear-gradient(168deg, #05080F 0%, #080D1C 48%, #0A1024 100%);
}

/* G · Royal — saturated Blue ↔ saturated Violet */
html[data-scheme="royal"] .fam-blue {
  background:
    radial-gradient(115% 75% at 82% 0%, rgba(56,99,255,0.20), transparent 56%),
    radial-gradient(95% 70% at 12% 100%, rgba(0,209,255,0.10), transparent 60%),
    linear-gradient(168deg, #081A52 0%, #0A2068 48%, #0C2A86 100%);
}
html[data-scheme="royal"] .fam-violet {
  background:
    radial-gradient(115% 75% at 16% 0%, rgba(168,77,255,0.20), transparent 56%),
    radial-gradient(95% 70% at 88% 100%, rgba(255,61,145,0.12), transparent 60%),
    linear-gradient(168deg, #2E0A6E 0%, #3A0F82 48%, #4A149E 100%);
}

/* H · Slate — desaturated steel-navy ↔ muted plum (most understated) */
html[data-scheme="slate"] .fam-blue {
  background:
    radial-gradient(115% 75% at 82% 0%, rgba(96,125,170,0.13), transparent 56%),
    linear-gradient(168deg, #0E1726 0%, #131F33 48%, #182740 100%);
}
html[data-scheme="slate"] .fam-violet {
  background:
    radial-gradient(115% 75% at 16% 0%, rgba(140,110,170,0.15), transparent 56%),
    linear-gradient(168deg, #1B1530 0%, #221B3D 48%, #2A2049 100%);
}

/* ============================================================
   LIGHT SECOND-BAND SCHEMES — keep .fam-blue (incl. hero) DARK,
   flip .fam-violet sections to LIGHT. data-violet-tone="light"
   carries the shared text/card overrides; per-scheme bg below.
   !important is required to beat component inline styles.
   ============================================================ */

/* per-scheme light backgrounds for the .fam-violet band */
html[data-scheme="ice"] .fam-violet{
  background:
    radial-gradient(110% 70% at 84% 0%, rgba(79,140,255,0.10), transparent 60%),
    radial-gradient(90% 70% at 10% 100%, rgba(155,92,255,0.07), transparent 62%),
    linear-gradient(168deg, #EEF3FB 0%, #E6EDF8 100%) !important;
}
html[data-scheme="porcelain"] .fam-violet{
  background:
    radial-gradient(110% 70% at 84% 0%, rgba(255,77,166,0.08), transparent 60%),
    radial-gradient(90% 70% at 10% 100%, rgba(79,140,255,0.07), transparent 62%),
    linear-gradient(168deg, #F6F3EE 0%, #EFEAE1 100%) !important;
}
html[data-scheme="lilac"] .fam-violet{
  background:
    radial-gradient(110% 70% at 84% 0%, rgba(155,92,255,0.12), transparent 60%),
    radial-gradient(90% 70% at 10% 100%, rgba(255,77,166,0.07), transparent 62%),
    linear-gradient(168deg, #F1ECFB 0%, #EAE2F6 100%) !important;
}

/* shared LIGHT-band treatment (text + cards) */
html[data-violet-tone="light"] .fam-violet :is(h1,h2,h3,h4){ color:#0B1430 !important; }
html[data-violet-tone="light"] .fam-violet .text-white,
html[data-violet-tone="light"] .fam-violet [class*="text-white/"]{ color:#1b2540 !important; }
html[data-violet-tone="light"] .fam-violet .text-foreground,
html[data-violet-tone="light"] .fam-violet [class*="text-foreground"]{ color:#1b2540 !important; }
html[data-violet-tone="light"] .fam-violet p{ color:#46506a !important; }
html[data-violet-tone="light"] .fam-violet .text-muted-foreground{ color:#5a657c !important; }
html[data-violet-tone="light"] .fam-violet .wire-label{ color:#5a657c !important; }
html[data-violet-tone="light"] .fam-violet .stage-kicker{ color:#7b3fd0 !important; }
/* low-alpha white chip/panel surfaces → light glass so their text reads */
html[data-violet-tone="light"] .fam-violet .bg-white\/\[0\.02\],
html[data-violet-tone="light"] .fam-violet .bg-white\/\[0\.03\]{
  background:rgba(11,20,48,0.04) !important;
  border-color:rgba(11,20,48,0.10) !important;
}
/* keep gradient-clipped accent text working (don't force its color) */
html[data-violet-tone="light"] .fam-violet [class*="text-grad"]{ color:transparent !important; }

/* lighten glass cards that sit in the light band */
html[data-violet-tone="light"] .fam-violet .bento-card{
  background:linear-gradient(165deg,#ffffff,#f3f1f9) !important;
  border-color:rgba(11,20,48,0.10) !important;
  box-shadow:0 18px 40px -28px rgba(11,20,48,0.45) !important;
}
html[data-violet-tone="light"] .fam-violet .bento-card h3{ color:#0B1430 !important; }
html[data-violet-tone="light"] .fam-violet .bento-card p{ color:#5a657c !important; }
html[data-violet-tone="light"] .fam-violet .ghost-panel{
  background:rgba(255,255,255,0.72) !important;
  border-color:rgba(11,20,48,0.12) !important;
}
/* dotted grid texture is too dark on light — soften it */
html[data-violet-tone="light"] .fam-violet .grid-field{ opacity:0.06 !important; }

/* Journey nav labels are inline-styled white → force readable dark */
html[data-violet-tone="light"] .fam-violet .jx-node span{ color:#46506a !important; }
html[data-violet-tone="light"] .fam-violet .jx-node[aria-current="true"] span{ color:#0B1430 !important; }
/* Journey device panels stay DARK cards on the light section (re-assert white text) */
html[data-violet-tone="light"] .fam-violet .jx-behind{
  background:#0B1430 !important; border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:16px !important; padding:12px !important;
}
html[data-violet-tone="light"] .fam-violet .jx-behind :is(.text-white,[class*="text-white/"],.text-foreground,[class*="text-foreground"],p,.text-muted-foreground){ color:#F8FAFF !important; }

/* ---- Scheme toggle widget ---- */
#scheme-toggle{position:fixed;left:18px;bottom:18px;z-index:9999;font-family:"Hanken Grotesk",system-ui,sans-serif;}
#scheme-toggle .st-fab{display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:999px;cursor:pointer;
  background:rgba(10,16,34,0.86);border:1px solid rgba(255,255,255,0.16);color:#F8FAFF;font-size:13px;font-weight:600;
  backdrop-filter:blur(10px);box-shadow:0 14px 40px -16px rgba(0,0,0,0.8);transition:border-color .25s ease,transform .25s ease;}
#scheme-toggle .st-fab:hover{border-color:rgba(61,224,255,0.5);transform:translateY(-1px);}
#scheme-toggle .st-fab .ring{width:15px;height:15px;border-radius:50%;background:conic-gradient(#3DE0FF,#4F8CFF,#9B5CFF,#FF4DA6,#34E5B0,#3DE0FF);}
#scheme-toggle .st-panel{position:absolute;left:0;bottom:54px;width:260px;padding:12px;border-radius:16px;
  background:rgba(9,14,30,0.94);border:1px solid rgba(255,255,255,0.14);backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,0.9);opacity:0;transform:translateY(8px) scale(.98);pointer-events:none;transition:opacity .2s ease,transform .2s ease;}
#scheme-toggle.open .st-panel{opacity:1;transform:none;pointer-events:auto;}
#scheme-toggle .st-title{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9aa6bf;font-family:"Space Grotesk", sans-serif;margin:2px 4px 10px;}
#scheme-toggle .st-opt{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:10px;cursor:pointer;
  background:transparent;border:1px solid transparent;color:#D8DEE9;font-size:13px;text-align:left;transition:background .18s ease,border-color .18s ease;}
#scheme-toggle .st-opt:hover{background:rgba(255,255,255,0.05);}
#scheme-toggle .st-opt[aria-checked="true"]{background:rgba(61,224,255,0.10);border-color:rgba(61,224,255,0.35);color:#fff;}
#scheme-toggle .st-opt .pair{display:flex;flex:0 0 auto;width:34px;height:18px;border-radius:5px;overflow:hidden;border:1px solid rgba(255,255,255,0.14);}
#scheme-toggle .st-opt .pair span{flex:1;}
#scheme-toggle .st-opt .nm{flex:1;}
#scheme-toggle .st-opt .lt{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#0B1430;background:#dfe7f4;border-radius:5px;padding:2px 6px;font-weight:700;}
#scheme-toggle .st-opt .ck{opacity:0;color:#3DE0FF;font-size:13px;}
#scheme-toggle .st-opt[aria-checked="true"] .ck{opacity:1;}
@media (prefers-reduced-motion: reduce){#scheme-toggle .st-panel,#scheme-toggle .st-fab{transition:none;}}
.fam-blue-legacy {
  background:
    radial-gradient(90% 70% at 0% 100%, rgba(34,211,238,0.12), transparent 60%),
    linear-gradient(160deg, #050A1F 0%, #081126 45%, #0B1E4D 100%);
}
.fam-violet-legacy {
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(59,109,255,0.18), transparent 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(232,121,249,0.16), transparent 60%),
    linear-gradient(160deg, #140A2E 0%, #1F103D 40%, #2B1148 70%, #3A145C 100%);
}
.fam-blue .accent   { color: var(--nx-cyan); }
.fam-violet .accent { color: #E879F9; }

/* soft seam blur between stacked sections */
.seam-fade::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 140px; z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(5,8,20,0.0));
}

/* ---- Stage visual: 3 stacked layers ---- */
.stage-visual { position: relative; }
.stage-stack  { position: relative; width: 100%; height: clamp(460px, 52vw, 640px); }

/* Layer-1: radial backlight behind the model */
.model-backlight {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(42% 50% at var(--bx,62%) 42%, rgba(59,109,255,0.42), transparent 66%),
              radial-gradient(30% 34% at var(--bx,62%) 64%, rgba(255,46,122,0.30), transparent 70%);
  filter: blur(18px);
}
.fam-violet .model-backlight {
  background: radial-gradient(42% 50% at var(--bx,62%) 42%, rgba(168,85,247,0.42), transparent 66%),
              radial-gradient(30% 34% at var(--bx,62%) 64%, rgba(34,211,238,0.26), transparent 70%);
}

/* glowing L-bracket frame (Algolia signature) */
.stage-bracket {
  position: absolute; z-index: 2; pointer-events: none;
  border-left: 2px solid; border-top: 2px solid;
  border-top-left-radius: 26px;
  border-color: rgba(34,211,238,0.55);
  box-shadow: -6px -6px 28px -6px rgba(34,211,238,0.5), inset 4px 4px 24px -10px rgba(34,211,238,0.4);
  animation: bracket-glow 5s ease-in-out infinite;
}
.fam-violet .stage-bracket {
  border-color: rgba(232,121,249,0.55);
  box-shadow: -6px -6px 28px -6px rgba(232,121,249,0.5), inset 4px 4px 24px -10px rgba(232,121,249,0.4);
}
@keyframes bracket-glow { 0%,100% { opacity: 0.65; } 50% { opacity: 1; } }

/* Layer-2: simplified UI behind model */
.behind-ui {
  position: absolute; z-index: 3; pointer-events: none;
  opacity: 0.78; filter: blur(0.3px);
  transform: scale(0.985);
}
/* fade the side of the UI that tucks under the model */
.behind-ui.fade-right { -webkit-mask-image: linear-gradient(90deg, #000 52%, transparent 92%); mask-image: linear-gradient(90deg, #000 52%, transparent 92%); }
.behind-ui.fade-left  { -webkit-mask-image: linear-gradient(270deg, #000 52%, transparent 92%); mask-image: linear-gradient(270deg, #000 52%, transparent 92%); }
.float-ui   { animation: float-ui 9s ease-in-out infinite; }
.float-ui-2 { animation: float-ui 11s ease-in-out infinite; animation-delay: -3s; }
@keyframes float-ui { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* glass mini-panel used behind models */
.ghost-panel {
  border-radius: 18px;
  background: rgba(13,20,40,0.62);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 60px -34px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
}
.fam-violet .ghost-panel { background: rgba(26,15,48,0.62); }

/* Layer-3: model in front */
.stage-model {
  position: absolute; z-index: 5; bottom: 0;
  height: 116%; width: auto; max-width: none;
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 30px 55px rgba(0,0,0,0.45)) drop-shadow(0 0 40px rgba(59,109,255,0.22)) drop-shadow(0 0 64px rgba(255,46,122,0.14));
  -webkit-user-select: none; user-select: none;
}
.fam-violet .stage-model { filter: drop-shadow(0 30px 55px rgba(0,0,0,0.45)) drop-shadow(0 0 40px rgba(168,85,247,0.24)) drop-shadow(0 0 64px rgba(34,211,238,0.14)); }
.stage-model.anchor-right { right: -2%; }
.stage-model.anchor-left  { left: -2%; }
@keyframes model-in { 0% { opacity: 0; transform: translateY(24px) scale(0.97); } 100% { opacity: 1; transform: none; } }
.model-in { animation: model-in 0.9s cubic-bezier(0.22,0.61,0.36,1) both; }

/* floating white search/intelligence pill (Layer between UI and overlapping model edge) */
.float-pill {
  position: absolute; z-index: 6;
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0.7rem 0.7rem 1.15rem; border-radius: 999px;
  background: rgba(255,255,255,0.96); color: #0F172A;
  box-shadow: 0 20px 50px -16px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.4);
  font-weight: 500; animation: pill-glow 4s ease-in-out infinite;
}
@keyframes pill-glow { 0%,100% { box-shadow: 0 20px 50px -16px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.4); } 50% { box-shadow: 0 22px 60px -14px rgba(59,109,255,0.45), 0 0 0 1px rgba(255,255,255,0.5); } }
.float-pill .mic { display: inline-flex; align-items: center; justify-content: center; height: 34px; width: 34px; border-radius: 999px; background: var(--nx-blue); color: #fff; }
.fam-violet .float-pill .mic { background: var(--nx-pink); }

/* small floating chip behind/over model */
.float-chip {
  position: absolute; z-index: 6;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.8rem; border-radius: 12px; font-size: 12px; font-weight: 500; color: #fff;
  background: rgba(13,20,40,0.82); border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 16px 40px -20px rgba(0,0,0,0.7); backdrop-filter: blur(8px);
}
.fam-violet .float-chip { background: rgba(26,15,48,0.82); }
@keyframes chip-in { 0% { opacity: 0; transform: translateY(10px) scale(0.96); } 100% { opacity: 1; transform: none; } }
.chip-in { animation: chip-in 0.7s cubic-bezier(0.22,0.61,0.36,1) both; }

/* big stage label headline (gradient text + sparkle) */
.stage-kicker { font-family: "Space Grotesk", sans-serif; font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase; }
.stage-display {
  font-family: "Hanken Grotesk",system-ui,sans-serif; font-weight: 800; line-height: 0.98;
  letter-spacing: -0.02em; font-size: clamp(2.4rem, 4.6vw, 4rem);
}
.text-grad-blue   { background: linear-gradient(92deg,#22D3EE,#3B6DFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-grad-violet { background: linear-gradient(92deg,#E879F9,#A855F7,#FF2E7A); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* pathway / stage-overview chips */
.path-node {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  transition: transform 0.3s ease;
}
.path-node:hover { transform: translateY(-4px); }
.path-dot {
  height: 46px; width: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 18px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.path-node:hover .path-dot { border-color: rgba(255,46,122,0.6); box-shadow: 0 0 22px rgba(255,46,122,0.35); background: rgba(255,46,122,0.10); }

/* ===== Journey carousel ===== */
.jx-node { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; }
.jx-dot {
  height: 50px; width: 50px; border-radius: 15px; display: grid; place-items: center;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.62);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease, color 0.4s ease, transform 0.3s ease;
}
.jx-dot svg { height: 22px; width: 22px; }
.jx-node:hover .jx-dot { transform: translateY(-3px); border-color: rgba(255,255,255,0.3); color: #fff; }

.jx-stage { position: relative; min-height: 430px; }
@media (max-width: 1023px) { .jx-stage { min-height: 560px; } }
@media (max-width: 640px) { .jx-stage { min-height: 500px; } }
.jx-slide {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transform: translateX(0) scale(0.985);
  transition: opacity 0.6s cubic-bezier(0.22,0.61,0.36,1), transform 0.6s cubic-bezier(0.22,0.61,0.36,1);
}
.jx-slide.jx-active { opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); position: relative; }
.jx-slide.jx-prev  { transform: translateX(-42px) scale(0.985); }
.jx-slide.jx-next  { transform: translateX(42px) scale(0.985); }
@media (prefers-reduced-motion: reduce) {
  .jx-slide { transition: opacity 0.3s ease; transform: none !important; }
}

.jx-visual { position: relative; width: 100%; height: clamp(330px, 32vw, 440px); }
.jx-backlight {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(46% 56% at 60% 40%, color-mix(in oklab, var(--acc) 42%, transparent), transparent 66%),
    radial-gradient(34% 40% at 60% 66%, color-mix(in oklab, var(--acc) 26%, transparent), transparent 70%);
  filter: blur(20px);
}
.jx-model-crop {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 99%);
          mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 99%);
}
/* 3/4 marketing crop: zoom in, anchor to the head so feet fall outside the frame */
.jx-model {
  height: 150%; width: auto; max-width: none; object-fit: cover; object-position: 50% 0%;
  transform: translateY(-2%);
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.45)) drop-shadow(0 0 40px color-mix(in oklab, var(--acc) 24%, transparent));
  -webkit-user-select: none; user-select: none;
}
@media (max-width: 1023px) {
  .jx-model { height: 138%; }
}
.jx-behind { position: absolute; left: 2%; top: 14%; z-index: 2; opacity: 0.92; }
@media (max-width: 640px) { .jx-behind { transform: scale(0.82); transform-origin: top left; } }

.jx-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  height: 44px; width: 44px; border-radius: 999px; display: grid; place-items: center;
  font-size: 26px; line-height: 1; color: #fff;
  background: rgba(10,14,30,0.55); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(8px);
  cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; opacity: 0.7;
}
.jx-arrow:hover { background: rgba(10,14,30,0.85); border-color: rgba(255,255,255,0.4); opacity: 1; }
.jx-arrow-l { left: -8px; } .jx-arrow-r { right: -8px; }
@media (max-width: 640px) { .jx-arrow-l { left: -2px; } .jx-arrow-r { right: -2px; } }

/* experiences device slider */
@keyframes exp-slide-in { 0% { opacity: 0; transform: translateX(28px) scale(0.97); } 100% { opacity: 1; transform: none; } }
.exp-slide-in { animation: exp-slide-in 0.6s cubic-bezier(0.22,0.61,0.36,1) both; }
@media (prefers-reduced-motion: reduce) { .exp-slide-in { animation: none; } }

/* experiences — pre-framed mockup images */
.exp-mock-img {
  width: 100%; max-width: 620px; height: auto; display: block;
  border-radius: 14px 14px 0 0;
  filter: drop-shadow(0 26px 60px rgba(0,0,0,0.5));
}

/* ===== Bento capability grid ===== */
.bento-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 26px 24px 28px;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(20,12,40,0.78), rgba(8,13,32,0.74));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 50px -34px rgba(0,0,0,0.8);
  transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1), border-color 0.4s ease, box-shadow 0.4s ease;
}
.bento-card::before {
  content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
  background: radial-gradient(120% 80% at 0% 0%, color-mix(in oklab, var(--bc) 12%, transparent), transparent 60%);
  opacity: 0; transition: opacity 0.4s ease;
}
.bento-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--bc) 40%, transparent);
  box-shadow: 0 32px 60px -30px rgba(0,0,0,0.85), 0 0 30px -12px color-mix(in oklab, var(--bc) 50%, transparent);
}
.bento-card:hover::before { opacity: 1; }
.bento-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; width: 46px; border-radius: 13px;
  border: 1px solid; flex-shrink: 0;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.bento-card:hover .bento-badge {
  transform: translateY(-1px);
  box-shadow: 0 0 22px -4px var(--bc), inset 0 0 16px -8px var(--bc);
}

/* ===== Agentic commerce system map ===== */
.text-grad-cm { background: linear-gradient(100deg,#72E6FF,#8C63FF 50%,#FF3FAE); -webkit-background-clip: text; background-clip: text; color: transparent; }
.arch-grid {
  position: relative; display: grid; min-height: 600px;
  grid-template-columns: 1fr 1.18fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "surfaces intel engine"
    "surfaces intel systems"
    ".        learn  .";
  gap: 22px 30px; align-items: stretch;
}
.arch-surfaces { grid-area: surfaces; align-self: center; }
.arch-intel    { grid-area: intel; }
.arch-engine   { grid-area: engine; }
.arch-systems  { grid-area: systems; }
.arch-learn    { grid-area: learn; align-self: center; }
.arch-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.flow-base { fill: none; stroke-width: 1.4; opacity: 0.5; }
.flow-pulse { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 5 235; opacity: 0.95; animation: flowDash 3s linear infinite; }
.flow-fb { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 2 9; opacity: 0.85; animation: flowDashFb 1.6s linear infinite; }
@keyframes flowDash { to { stroke-dashoffset: -240; } }
@keyframes flowDashFb { to { stroke-dashoffset: -110; } }
@media (prefers-reduced-motion: reduce) { .flow-pulse, .flow-fb { animation: none; } }
.arch-node { position: relative; z-index: 1; display: flex; align-items: center; }
.arch-card {
  position: relative; width: 100%; border-radius: 24px; padding: 20px 20px 22px;
  background: linear-gradient(165deg, rgba(12,22,54,0.84), rgba(7,20,46,0.74));
  border: 1px solid color-mix(in oklab, var(--ac) 22%, rgba(255,255,255,0.06));
  box-shadow: 0 24px 50px -34px rgba(0,0,0,0.8);
  transition: transform .4s, border-color .4s, box-shadow .4s;
}
.arch-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--ac) 50%, transparent); box-shadow: 0 28px 56px -30px rgba(0,0,0,0.85), 0 0 28px -12px color-mix(in oklab, var(--ac) 55%, transparent); }
.arch-field .arch-card {
  align-self: stretch;
  border-color: color-mix(in oklab, var(--ac) 32%, transparent);
  background:
    radial-gradient(62% 60% at 50% 42%, color-mix(in oklab, var(--ac) 22%, transparent), transparent 72%),
    linear-gradient(165deg, rgba(26,16,54,0.78), rgba(14,12,40,0.6));
  box-shadow: 0 0 64px -22px color-mix(in oklab, var(--ac) 75%, transparent), inset 0 0 46px -22px color-mix(in oklab, var(--ac) 65%, transparent);
}
.arch-badge { display: inline-flex; align-items: center; justify-content: center; height: 42px; width: 42px; border-radius: 12px; color: var(--ac); background: color-mix(in oklab, var(--ac) 15%, rgba(8,13,32,0.6)); border: 1px solid color-mix(in oklab, var(--ac) 42%, transparent); }
.arch-num { font: 600 12px/1 "Hanken Grotesk",sans-serif; letter-spacing: 0.12em; color: var(--ac); opacity: 0.85; }
.arch-chips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.arch-surfaces { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.arch-surface { flex: 1 1 0; min-width: 84px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 8px; border-radius: 12px; background: color-mix(in oklab, var(--ac) 8%, rgba(255,255,255,0.03)); border: 1px solid color-mix(in oklab, var(--ac) 30%, transparent); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.arch-surface:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--ac) 55%, transparent); box-shadow: 0 8px 22px -14px var(--ac); }
.arch-surface-ic { display: inline-flex; align-items: center; justify-content: center; height: 34px; width: 34px; border-radius: 9px; color: var(--ac); background: color-mix(in oklab, var(--ac) 16%, rgba(8,14,30,0.5)); border: 1px solid color-mix(in oklab, var(--ac) 32%, transparent); }
.arch-surface-lb { font-size: 11.5px; font-weight: 600; color: #EAF0FB; letter-spacing: -0.005em; text-align: center; }
.arch-chip { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 8px; font-size: 11px; color: #D6DEF0; background: rgba(255,255,255,0.035); border: 1px solid color-mix(in oklab, var(--ac) 18%, rgba(255,255,255,0.07)); }
.arch-mconn, .arch-mfb { display: none; }
.arch-foundation { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; padding: 15px 28px; border-radius: 999px; background: rgba(10,18,42,0.7); border: 1px solid rgba(120,150,255,0.16); box-shadow: 0 0 40px -24px rgba(120,150,255,0.6); backdrop-filter: blur(8px); width: fit-content; margin-left: auto; margin-right: auto; }
.arch-found-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8FA1C1; }
.arch-found-items { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.arch-found-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #D6DEF0; }
.arch-found-dot { height: 6px; width: 6px; border-radius: 999px; background: linear-gradient(90deg,#72E6FF,#FF3FAE); box-shadow: 0 0 8px rgba(120,180,255,0.7); }
.arch-legend { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; }
.arch-leg-item { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #9FB0CE; }
.arch-leg-line { width: 22px; border-top: 2px solid var(--lc); border-radius: 2px; box-shadow: 0 0 6px var(--lc); }
.arch-leg-line.dotted { border-top-style: dotted; border-top-width: 2.5px; }
@media (max-width: 1023px) {
  .arch-grid { min-height: 0; grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: none; gap: 0; }
  .arch-grid > .arch-node { grid-area: auto; align-self: auto; }
  .arch-svg { display: none; }
  .arch-mconn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 0; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #9FB0CE; }
  .arch-mconn-dot { height: 6px; width: 6px; border-radius: 999px; background: var(--mc); box-shadow: 0 0 8px var(--mc); }
  .arch-mconn-arrow { color: var(--mc); }
  .arch-mfb { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 12px 16px; border-radius: 14px; font-size: 12px; color: #D8C9EA; background: rgba(255,79,163,0.07); border: 1px dashed rgba(255,79,163,0.3); }
}

/* ===== Platform architecture (arch2 — layered reference layout) ===== */
.arch2 { display: flex; flex-direction: column; align-items: stretch; gap: 0; }

/* ambient depth glows behind key blocks */
.arch2-ambient { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(70px); opacity: 0.5; }
.arch2-ambient-1 { width: 60%; height: 40%; left: -8%; top: 30%; background: radial-gradient(circle, rgba(79,140,255,0.20), rgba(155,92,255,0.10) 50%, transparent 72%); }
.arch2-ambient-2 { width: 50%; height: 38%; right: -6%; top: 38%; background: radial-gradient(circle, rgba(255,77,166,0.12), rgba(155,92,255,0.08) 55%, transparent 74%); }

/* supporting bands kept light + airy (less boxy) */
.arch2-band { border: 1px solid rgba(120,180,255,0.10); border-radius: 20px; padding: 16px 22px 20px; background: linear-gradient(180deg, rgba(10,18,42,0.42), rgba(8,16,38,0.28)); }
.arch2-band-label { text-align: center; font: 700 12.5px/1 "Space Grotesk", sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: #6FD9FF; margin-bottom: 16px; }

/* glowing flow connectors (energy moving through the system) */
.arch2-conn { display: flex; align-items: center; justify-content: center; padding: 9px 0; }
.arch2-flow { position: relative; width: 2px; height: 30px; border-radius: 2px; background: linear-gradient(180deg, transparent, rgba(120,180,255,0.5), transparent); overflow: hidden; }
.arch2-flow::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; top: -10px; background: linear-gradient(180deg, transparent, #6FD9FF, transparent); animation: archFlowDown 2.4s linear infinite; }
@keyframes archFlowDown { 0% { transform: translateY(0); } 100% { transform: translateY(40px); } }
.arch2-flow-h { width: 34px; height: 2px; background: linear-gradient(90deg, rgba(155,92,255,0.5), rgba(120,180,255,0.5)); }
.arch2-flow-h::after { left: -10px; right: auto; top: 0; bottom: 0; width: 10px; height: 2px; background: linear-gradient(90deg, transparent, #B98CFF, transparent); animation: archFlowRight 2s linear infinite; }
@keyframes archFlowRight { 0% { transform: translateX(0); } 100% { transform: translateX(44px); } }

.arch2-surfaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.arch2-surface { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 18px 14px; border-radius: 14px; background: color-mix(in oklab, var(--ac) 5%, rgba(255,255,255,0.015)); border: 1px solid color-mix(in oklab, var(--ac) 18%, transparent); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.arch2-surface:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--ac) 48%, transparent); box-shadow: 0 12px 30px -16px var(--ac); }
.arch2-surface-ic { display: inline-flex; height: 46px; width: 46px; align-items: center; justify-content: center; border-radius: 13px; color: var(--ac); background: color-mix(in oklab, var(--ac) 13%, rgba(8,14,30,0.5)); border: 1px solid color-mix(in oklab, var(--ac) 26%, transparent); }
.arch2-surface-lb { font-size: 15px; font-weight: 600; color: #EAF0FB; text-align: center; line-height: 1.25; }

/* MIDDLE ROW — the hero layer */
.arch2-mid { display: grid; grid-template-columns: 1.65fr auto 1.05fr; align-items: stretch; gap: 18px; margin: 4px 0; }
.arch2-platform {
  position: relative; display: flex; align-items: center; gap: 20px; padding: 30px 30px; border-radius: 22px;
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(79,140,255,0.22), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(155,92,255,0.20), transparent 58%),
    linear-gradient(165deg, rgba(13,22,52,0.92), rgba(9,16,40,0.92));
  border: 1px solid rgba(140,170,255,0.42);
  box-shadow: 0 30px 70px -34px rgba(79,140,255,0.6), inset 0 0 60px -30px rgba(155,92,255,0.5);
}
.arch2-platform::before { content: ""; position: absolute; inset: 0; border-radius: 22px; padding: 1px; background: linear-gradient(135deg, rgba(111,217,255,0.6), rgba(155,92,255,0.3) 50%, rgba(255,77,166,0.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0.7; pointer-events: none; }
.arch2-platform-ic { position: relative; display: inline-flex; flex: 0 0 auto; height: 76px; width: 76px; align-items: center; justify-content: center; border-radius: 18px; color: #C9B6FF; background: radial-gradient(circle at 40% 30%, rgba(155,92,255,0.35), rgba(79,140,255,0.18)); border: 1px solid rgba(155,92,255,0.5); box-shadow: 0 0 30px -6px rgba(155,92,255,0.7), inset 0 0 22px -10px rgba(111,217,255,0.8); animation: archCoreBreath 5s ease-in-out infinite; }
@keyframes archCoreBreath { 0%,100% { box-shadow: 0 0 30px -6px rgba(155,92,255,0.6), inset 0 0 22px -10px rgba(111,217,255,0.7); } 50% { box-shadow: 0 0 44px -4px rgba(155,92,255,0.9), inset 0 0 26px -8px rgba(111,217,255,0.95); } }
.arch2-platform-tag { font: 700 11px/1 "Space Grotesk", sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: #6FD9FF; margin-bottom: 9px; }
.arch2-platform-name { font-size: clamp(24px, 2.7vw, 34px); font-weight: 800; letter-spacing: -0.02em; color: #fff; line-height: 1.05; }
.arch2-platform-desc { margin-top: 8px; font-size: 14px; line-height: 1.55; color: #CFD8EC; max-width: 42ch; }
.arch2-link { display: flex; align-items: center; justify-content: center; }

.arch2-agents { position: relative; padding: 20px 18px; border-radius: 22px; background: radial-gradient(120% 120% at 100% 0%, rgba(155,92,255,0.16), transparent 60%), linear-gradient(165deg, rgba(20,12,44,0.7), rgba(12,10,34,0.7)); border: 1px solid rgba(155,92,255,0.34); box-shadow: inset 0 0 50px -32px rgba(255,77,166,0.6); }
.arch2-agents-label { text-align: center; font: 700 11px/1 "Space Grotesk", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #C79BFF; margin-bottom: 13px; }
.arch2-agents-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.arch2-agent { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 12px; border-radius: 13px; background: color-mix(in oklab, var(--ac) 10%, rgba(255,255,255,0.02)); border: 1px solid color-mix(in oklab, var(--ac) 30%, transparent); overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.arch2-agent::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ac); box-shadow: 0 0 12px var(--ac); opacity: 0.85; }
.arch2-agent:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--ac) 55%, transparent); box-shadow: 0 10px 26px -16px var(--ac); }
.arch2-agent-ic { display: inline-flex; height: 32px; width: 32px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 9px; color: var(--ac); background: color-mix(in oklab, var(--ac) 18%, rgba(8,14,30,0.5)); border: 1px solid color-mix(in oklab, var(--ac) 32%, transparent); box-shadow: inset 0 0 12px -7px var(--ac); }
.arch2-agent-lb { font-size: 12.5px; font-weight: 600; color: #F0F3FB; line-height: 1.15; }
.arch2-agents-foot { margin-top: 13px; text-align: center; font-size: 11.5px; color: #A6AEC6; }

/* capability modules */
.arch2-caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.arch2-cap { position: relative; padding: 22px 17px; border-radius: 16px; background: linear-gradient(170deg, color-mix(in oklab, var(--ac) 9%, rgba(10,16,38,0.7)), rgba(8,14,32,0.6)); border: 1px solid color-mix(in oklab, var(--ac) 26%, transparent); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.arch2-cap:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--ac) 52%, transparent); box-shadow: 0 18px 40px -22px var(--ac); }
.arch2-cap-ic { display: inline-flex; height: 50px; width: 50px; align-items: center; justify-content: center; border-radius: 14px; color: var(--ac); background: color-mix(in oklab, var(--ac) 14%, transparent); border: 1px solid color-mix(in oklab, var(--ac) 32%, transparent); margin-bottom: 15px; box-shadow: inset 0 0 16px -9px var(--ac); }
.arch2-cap-title { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.arch2-cap-steps { margin-top: 9px; font-size: 12.5px; color: #AEBAD0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.arch2-sep { color: var(--ac); }

/* foundation strip — compact + supportive */
.arch2-foundation { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.arch2-found { padding: 14px 14px 15px; border-radius: 14px; background: rgba(10,16,38,0.34); border: 1px solid color-mix(in oklab, var(--ac) 16%, transparent); }
.arch2-found-label { display: flex; align-items: center; gap: 8px; font: 700 11.5px/1 "Space Grotesk", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ac); margin-bottom: 11px; }
.arch2-found-ic { display: inline-flex; color: var(--ac); }
.arch2-found-items { display: flex; flex-wrap: wrap; gap: 6px; }
.arch2-found-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #CCD6EA; padding: 4px 9px 4px 6px; border-radius: 7px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); }
.arch2-found-item-ic { display: inline-flex; align-items: center; justify-content: center; color: var(--ac); }

@media (prefers-reduced-motion: reduce) {
  .arch2-flow::after, .arch2-flow-h::after, .arch2-platform-ic { animation: none !important; }
}

@media (max-width: 860px) {
  .arch2-mid { grid-template-columns: 1fr; }
  .arch2-link { transform: rotate(90deg); padding: 4px 0; }
  .arch2-caps, .arch2-foundation { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .arch2-surfaces, .arch2-caps, .arch2-foundation, .arch2-agents-grid { grid-template-columns: 1fr; }
}

/* ===== Where-it-fits taxonomy cards (static, no marquee) ===== */
.retail-fit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.retail-fit-card {
  padding: 18px 18px 20px; border-radius: 20px; align-self: start;
  background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
  border: 1px solid color-mix(in oklab, var(--ac) 22%, rgba(255,255,255,0.08));
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 50px -34px rgba(0,0,0,0.7);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.retail-fit-card:hover { border-color: color-mix(in oklab, var(--ac) 42%, transparent); box-shadow: 0 28px 56px -30px rgba(0,0,0,0.8), 0 0 26px -14px var(--ac); }
.retail-fit-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.retail-fit-title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.retail-fit-count { font: 600 11px/1 "Space Grotesk", sans-serif; color: var(--ac); padding: 4px 9px; border-radius: 999px; background: color-mix(in oklab, var(--ac) 14%, transparent); border: 1px solid color-mix(in oklab, var(--ac) 30%, transparent); }
.retail-fit-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.retail-fit-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.84); font-size: 12.5px; white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.retail-fit-chip:hover { background: color-mix(in oklab, var(--ac) 12%, rgba(255,255,255,0.05)); border-color: color-mix(in oklab, var(--ac) 38%, transparent); }
.retail-fit-chip-ic { display: inline-flex; align-items: center; justify-content: center; height: 21px; width: 21px; border-radius: 7px; flex: 0 0 auto; color: var(--ac); background: color-mix(in oklab, var(--ac) 16%, rgba(8,14,30,0.4)); border: 1px solid color-mix(in oklab, var(--ac) 28%, transparent); }
@media (max-width: 1100px) { .retail-fit-grid { grid-template-columns: 1fr; } }

/* ===== Where-it-fits — horizontal icon row ===== */
.fit-ic {
  display: inline-flex; align-items: center; justify-content: center;
  height: 72px; width: 72px; border-radius: 999px; color: var(--ac);
  background: radial-gradient(circle at 50% 42%, color-mix(in oklab, var(--ac) 18%, transparent), color-mix(in oklab, var(--ac) 5%, transparent) 70%);
  border: 1px solid color-mix(in oklab, var(--ac) 34%, transparent);
  box-shadow: 0 0 22px -8px var(--ac), inset 0 0 18px -10px var(--ac);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.fit-ic:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--ac) 55%, transparent);
  box-shadow: 0 0 30px -6px var(--ac), inset 0 0 18px -8px var(--ac);
}
@media (max-height: 850px) and (min-width: 1024px) {
  .retail-fit-card { padding: 18px; }
  .retail-fit-chip { padding: 6px 10px 6px 7px; font-size: 12px; }
}

/* compact for short laptop viewports so the whole diagram fits without scroll */
@media (max-height: 850px) and (min-width: 1024px) {
  .arch2-section { padding-top: 40px; padding-bottom: 40px; }
  .arch2-head { margin-bottom: 22px; }
  .arch2-h2 { font-size: clamp(34px, 5vw, 50px) !important; line-height: 1.05 !important; }
  .arch2 { gap: 0; }
  .arch2-band { padding: 13px 18px 15px; }
  .arch2-band-label { margin-bottom: 10px; }
  .arch2-conn { padding: 4px 0; font-size: 15px; }
  .arch2-surface { padding: 14px 12px; gap: 8px; }
  .arch2-surface-ic { height: 40px; width: 40px; }
  .arch2-surface-lb { font-size: 14px; }
  .arch2-platform { padding: 20px 22px; gap: 16px; }
  .arch2-platform-ic { height: 60px; width: 60px; }
  .arch2-platform-tag { margin-bottom: 6px; }
  .arch2-platform-desc { font-size: 12.5px; margin-top: 6px; }
  .arch2-agents { padding: 13px; }
  .arch2-agents-label { margin-bottom: 9px; }
  .arch2-agent { padding: 9px 10px; }
  .arch2-agents-foot { margin-top: 9px; }
  .arch2-caps { gap: 12px; }
  .arch2-cap { padding: 14px 13px; }
  .arch2-cap-ic { height: 40px; width: 40px; margin-bottom: 10px; }
  .arch2-cap-title { font-size: 15px; }
  .arch2-cap-steps { margin-top: 6px; font-size: 12px; }
  .arch2-foundation { gap: 12px; }
  .arch2-found { padding: 13px 13px 14px; }
  .arch2-found-label { margin-bottom: 9px; }
  .arch2-found-item { font-size: 11px; padding: 4px 8px 4px 6px; }
}