/**
 * BionicEye — Reimagine v1.0
 * Modern design system: OKLCH tokens, fluid type, bento grid, flow diagrams,
 * orbital agents, cyberpunk AI glow. Layered ON TOP of styles.css.
 */

/* Visually-hidden text for screen readers only (a11y + SEO link context) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================================
   1. DESIGN TOKENS — OKLCH palette + fluid scale
   ========================================================= */
:root {
  /* Brand palette (OKLCH — wider gamut, consistent perceptual luminance) */
  --re-iris: oklch(68% 0.21 275);        /* primary violet */
  --re-iris-bright: oklch(78% 0.22 275);
  --re-iris-dim: oklch(55% 0.18 275);
  --re-cyan: oklch(80% 0.16 200);        /* accent cyan */
  --re-magenta: oklch(72% 0.25 335);     /* accent magenta */
  --re-amber: oklch(82% 0.17 75);        /* accent amber */
  --re-emerald: oklch(75% 0.17 155);     /* success */
  --re-crimson: oklch(65% 0.24 25);      /* danger */

  /* Surfaces (dark first) */
  --re-bg-0: oklch(11% 0.015 275);
  --re-bg-1: oklch(14% 0.02 275);
  --re-bg-2: oklch(18% 0.025 275);
  --re-surface: oklch(17% 0.02 275 / 0.6);
  --re-surface-hover: oklch(21% 0.03 275 / 0.8);
  --re-border: oklch(35% 0.05 275 / 0.3);
  --re-border-strong: oklch(55% 0.1 275 / 0.5);

  /* Text */
  --re-ink: oklch(96% 0.01 275);
  --re-ink-muted: oklch(72% 0.025 275);
  --re-ink-dim: oklch(55% 0.02 275);

  /* Fluid typography (clamp based) */
  --re-text-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --re-text-sm: clamp(0.85rem, 0.82rem + 0.2vw, 0.95rem);
  --re-text-base: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  --re-text-lg: clamp(1.15rem, 1.1rem + 0.3vw, 1.35rem);
  --re-text-xl: clamp(1.4rem, 1.3rem + 0.5vw, 1.75rem);
  --re-text-2xl: clamp(1.85rem, 1.6rem + 1vw, 2.5rem);
  --re-text-3xl: clamp(2.4rem, 2rem + 2vw, 3.75rem);
  --re-text-hero: clamp(2.8rem, 2rem + 4vw, 5.5rem);

  /* Rhythm */
  --re-space-1: 0.35rem;
  --re-space-2: 0.7rem;
  --re-space-3: 1.15rem;
  --re-space-4: 1.75rem;
  --re-space-5: 2.5rem;
  --re-space-6: clamp(3rem, 2rem + 4vw, 5.5rem);
  --re-space-section: clamp(4rem, 3rem + 5vw, 9rem);

  /* Depth */
  --re-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3);
  --re-shadow-md: 0 8px 20px oklch(0% 0 0 / 0.35), 0 2px 6px oklch(0% 0 0 / 0.2);
  --re-shadow-lg: 0 25px 60px oklch(0% 0 0 / 0.45), 0 8px 20px oklch(0% 0 0 / 0.3);
  --re-shadow-glow: 0 0 40px oklch(68% 0.21 275 / 0.35), 0 0 80px oklch(72% 0.25 335 / 0.2);
  --re-shadow-glow-cyan: 0 0 40px oklch(80% 0.16 200 / 0.4);

  /* Motion */
  --re-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --re-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --re-ease-spring: cubic-bezier(0.5, 1.25, 0.5, 1);
  --re-dur-fast: 180ms;
  --re-dur-base: 320ms;
  --re-dur-slow: 680ms;

  /* Radii */
  --re-radius-sm: 10px;
  --re-radius-md: 18px;
  --re-radius-lg: 26px;
  --re-radius-xl: 40px;
}

[data-theme="light"] {
  --re-bg-0: oklch(98% 0.005 275);
  --re-bg-1: oklch(96% 0.008 275);
  --re-bg-2: oklch(94% 0.012 275);
  --re-surface: oklch(100% 0 0 / 0.85);
  --re-surface-hover: oklch(100% 0 0 / 1);
  --re-border: oklch(65% 0.04 275 / 0.2);
  --re-border-strong: oklch(45% 0.08 275 / 0.35);
  --re-ink: oklch(18% 0.02 275);
  --re-ink-muted: oklch(40% 0.025 275);
  --re-ink-dim: oklch(55% 0.02 275);
}

/* =========================================================
   2. TYPOGRAPHY — display + body
   ========================================================= */
.re-display {
  font-family: 'Space Grotesk', 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-feature-settings: 'ss01', 'cv11';
}
.re-mono {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-feature-settings: 'liga', 'calt';
}
.re-ink-gradient {
  background: linear-gradient(
    120deg,
    var(--re-iris-bright) 0%,
    var(--re-magenta) 45%,
    var(--re-cyan) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =========================================================
   3. REIMAGINE WRAPPER — scopes new system to index/new pages
   ========================================================= */
.reimagine {
  background: var(--re-bg-0);
  color: var(--re-ink);
}
.reimagine section { position: relative; }
.reimagine .re-container {
  width: min(1280px, 92vw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 2vw, 2rem);
}

/* =========================================================
   4. HERO — mesh gradient + orbit + ticker
   ========================================================= */
.re-hero {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--re-space-section) * 1.2) 0 var(--re-space-section);
  overflow: hidden;
  isolation: isolate;
}
.re-hero__mesh {
  position: absolute;
  inset: -10%;
  z-index: -2;
  filter: blur(60px) saturate(1.3);
  opacity: 0.55;
  animation: re-meshFloat 24s ease-in-out infinite alternate;
  background:
    radial-gradient(circle at 25% 30%, oklch(68% 0.21 275 / 0.6), transparent 45%),
    radial-gradient(circle at 75% 20%, oklch(72% 0.25 335 / 0.55), transparent 50%),
    radial-gradient(circle at 50% 80%, oklch(80% 0.16 200 / 0.55), transparent 55%),
    radial-gradient(circle at 85% 70%, oklch(82% 0.17 75 / 0.4), transparent 45%);
}
[data-theme="light"] .re-hero__mesh { opacity: 0.35; }

@keyframes re-meshFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-2%, 3%) scale(1.05); }
  66% { transform: translate(3%, -2%) scale(0.97); }
}

.re-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(oklch(68% 0.21 275 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(68% 0.21 275 / 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
}

.re-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--re-space-2);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: var(--re-surface);
  border: 1px solid var(--re-border-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: var(--re-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--re-ink-muted);
  margin-bottom: var(--re-space-4);
}
.re-hero__eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--re-emerald);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--re-emerald);
  animation: re-pulse 2s ease-in-out infinite;
}
@keyframes re-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.re-hero h1 {
  font-size: var(--re-text-hero);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin-bottom: var(--re-space-3);
  max-width: 14ch;
}
.re-hero__lede {
  font-size: var(--re-text-lg);
  color: var(--re-ink-muted);
  max-width: 62ch;
  line-height: 1.55;
  margin-bottom: var(--re-space-4);
}
.re-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--re-space-2);
  margin-bottom: var(--re-space-5);
}

.re-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--re-text-sm);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: transform var(--re-dur-base) var(--re-ease-out-expo),
              box-shadow var(--re-dur-base) var(--re-ease-out-expo);
  isolation: isolate;
  cursor: pointer;
  border: 0;
}
.re-btn--primary {
  background: linear-gradient(135deg, var(--re-iris) 0%, var(--re-magenta) 100%);
  color: white;
  box-shadow: var(--re-shadow-glow);
}
.re-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 60px oklch(68% 0.21 275 / 0.5), 0 0 120px oklch(72% 0.25 335 / 0.3);
}
.re-btn--ghost {
  background: var(--re-surface);
  color: var(--re-ink);
  border: 1px solid var(--re-border-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.re-btn--ghost:hover {
  transform: translateY(-2px);
  background: var(--re-surface-hover);
  border-color: var(--re-iris);
}
.re-btn__arrow {
  transition: transform var(--re-dur-base) var(--re-ease-out-expo);
}
.re-btn:hover .re-btn__arrow { transform: translateX(4px); }

/* Ticker stats */
.re-hero__ticker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--re-space-3);
  margin-top: var(--re-space-5);
  padding-top: var(--re-space-4);
  border-top: 1px solid var(--re-border);
  max-width: 900px;
}
.re-ticker__item { text-align: left; }
.re-ticker__val {
  font-size: var(--re-text-2xl);
  font-weight: 800;
  letter-spacing: -0.025em;
  background: linear-gradient(120deg, var(--re-ink) 0%, var(--re-iris-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.re-ticker__lbl {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--re-text-xs);
  color: var(--re-ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* =========================================================
   5. SECTION PRIMITIVES
   ========================================================= */
.re-section { padding: var(--re-space-section) 0; }
.re-section--tight { padding: calc(var(--re-space-section) * 0.7) 0; }

.re-section__head {
  max-width: 820px;
  margin: 0 auto var(--re-space-6);
  text-align: center;
}
.re-section__kicker {
  display: inline-block;
  font-size: var(--re-text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--re-iris-bright);
  margin-bottom: var(--re-space-2);
}
.re-section__title {
  font-size: var(--re-text-3xl);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: var(--re-space-3);
  font-weight: 700;
}
.re-section__sub {
  font-size: var(--re-text-base);
  color: var(--re-ink-muted);
  line-height: 1.6;
  max-width: 62ch;
  margin-inline: auto;
}

/* =========================================================
   6. BENTO GRID — modules map
   ========================================================= */
.re-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(160px, auto);
  gap: var(--re-space-3);
}
.re-bento__cell {
  position: relative;
  background: var(--re-surface);
  border: 1px solid var(--re-border);
  border-radius: var(--re-radius-md);
  padding: var(--re-space-4);
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform var(--re-dur-base) var(--re-ease-out-expo),
              border-color var(--re-dur-base) ease,
              background var(--re-dur-base) ease;
  isolation: isolate;
}
.re-bento__cell::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    600px circle at var(--x, 50%) var(--y, 50%),
    oklch(68% 0.21 275 / 0.15),
    transparent 40%
  );
  opacity: 0;
  transition: opacity var(--re-dur-base) ease;
}
.re-bento__cell:hover {
  transform: translateY(-4px);
  border-color: var(--re-border-strong);
  background: var(--re-surface-hover);
}
.re-bento__cell:hover::before { opacity: 1; }

.re-bento__cell--hero {
  grid-column: span 4;
  grid-row: span 2;
}
.re-bento__cell--tall { grid-column: span 2; grid-row: span 2; }
.re-bento__cell--wide { grid-column: span 3; }
.re-bento__cell--std { grid-column: span 2; }

@media (max-width: 960px) {
  .re-bento { grid-template-columns: repeat(2, 1fr); }
  .re-bento__cell,
  .re-bento__cell--hero,
  .re-bento__cell--tall,
  .re-bento__cell--wide,
  .re-bento__cell--std { grid-column: span 2; grid-row: auto; }
}

.re-bento__icon {
  font-size: 1.8rem;
  width: 48px; height: 48px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, oklch(68% 0.21 275 / 0.2), oklch(72% 0.25 335 / 0.2));
  border: 1px solid var(--re-border-strong);
  border-radius: var(--re-radius-sm);
  margin-bottom: var(--re-space-2);
}
.re-bento__title {
  font-size: var(--re-text-lg);
  font-weight: 700;
  margin-bottom: var(--re-space-1);
  letter-spacing: -0.02em;
}
.re-bento__desc {
  color: var(--re-ink-muted);
  font-size: var(--re-text-sm);
  line-height: 1.55;
}
.re-bento__badge {
  position: absolute;
  top: var(--re-space-3);
  right: var(--re-space-3);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: oklch(75% 0.17 155 / 0.15);
  border: 1px solid oklch(75% 0.17 155 / 0.3);
  color: var(--re-emerald);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Module progress bar inside bento */
.re-bento__progress {
  margin-top: var(--re-space-3);
  height: 4px;
  background: oklch(45% 0.08 275 / 0.2);
  border-radius: 999px;
  overflow: hidden;
}
.re-bento__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--re-iris) 0%, var(--re-magenta) 100%);
  width: 0;
  transition: width 1.4s var(--re-ease-out-expo);
  box-shadow: 0 0 10px oklch(68% 0.21 275 / 0.6);
}

/* =========================================================
   7. FLOWS — autonomous workflow diagrams
   ========================================================= */
.re-flows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--re-space-4);
}
.re-flow {
  position: relative;
  padding: var(--re-space-5);
  border-radius: var(--re-radius-lg);
  background: linear-gradient(
    160deg,
    oklch(17% 0.02 275 / 0.8) 0%,
    oklch(14% 0.02 275 / 0.9) 100%
  );
  border: 1px solid var(--re-border);
  overflow: hidden;
  transition: transform var(--re-dur-base) var(--re-ease-out-expo);
}
[data-theme="light"] .re-flow {
  background: linear-gradient(
    160deg,
    oklch(100% 0 0 / 0.95) 0%,
    oklch(96% 0.008 275 / 0.9) 100%
  );
}
.re-flow:hover { transform: translateY(-6px); }
.re-flow::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--re-iris), var(--re-magenta), transparent);
  opacity: 0;
  transition: opacity var(--re-dur-base) ease;
}
.re-flow:hover::after { opacity: 1; }

.re-flow__tag {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: oklch(68% 0.21 275 / 0.15);
  border: 1px solid oklch(68% 0.21 275 / 0.3);
  color: var(--re-iris-bright);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--re-space-2);
}
.re-flow__title {
  font-size: var(--re-text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--re-space-2);
}
.re-flow__lede {
  color: var(--re-ink-muted);
  font-size: var(--re-text-sm);
  margin-bottom: var(--re-space-4);
  line-height: 1.55;
}
.re-flow__steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--re-space-2);
  margin-bottom: var(--re-space-4);
}
.re-flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: start;
  gap: var(--re-space-2);
  padding-left: 0.2rem;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 600ms var(--re-ease-out-expo), transform 600ms var(--re-ease-out-expo);
}
.re-flow.is-visible .re-flow__step { opacity: 1; transform: translateX(0); }
.re-flow.is-visible .re-flow__step:nth-child(1) { transition-delay: 100ms; }
.re-flow.is-visible .re-flow__step:nth-child(2) { transition-delay: 220ms; }
.re-flow.is-visible .re-flow__step:nth-child(3) { transition-delay: 340ms; }
.re-flow.is-visible .re-flow__step:nth-child(4) { transition-delay: 460ms; }
.re-flow.is-visible .re-flow__step:nth-child(5) { transition-delay: 580ms; }
.re-flow.is-visible .re-flow__step:nth-child(6) { transition-delay: 700ms; }
.re-flow.is-visible .re-flow__step:nth-child(7) { transition-delay: 820ms; }

.re-flow__dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--re-iris), var(--re-magenta));
  color: white;
  font-size: 0.75rem;
  font-weight: 800;
  box-shadow: 0 0 18px oklch(68% 0.21 275 / 0.5);
  flex-shrink: 0;
}
.re-flow__step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 14px;
  width: 2px;
  height: calc(100% + var(--re-space-2) - 4px);
  background: linear-gradient(180deg, var(--re-iris) 0%, transparent 100%);
  opacity: 0.35;
}
.re-flow__body {
  padding-top: 2px;
}
.re-flow__body strong {
  color: var(--re-ink);
  font-weight: 600;
  font-size: var(--re-text-sm);
}
.re-flow__body small {
  display: block;
  color: var(--re-ink-dim);
  font-size: 0.78rem;
  margin-top: 0.15rem;
  line-height: 1.5;
}

.re-flow__outcome {
  display: flex;
  gap: var(--re-space-3);
  padding: var(--re-space-3);
  border-radius: var(--re-radius-sm);
  background: oklch(75% 0.17 155 / 0.08);
  border: 1px solid oklch(75% 0.17 155 / 0.25);
}
.re-flow__outcome-val {
  font-size: var(--re-text-lg);
  font-weight: 800;
  color: var(--re-emerald);
  letter-spacing: -0.02em;
}
.re-flow__outcome-lbl {
  font-size: 0.72rem;
  color: var(--re-ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.2rem;
}

/* =========================================================
   8. ORBITAL — 8 ADRI agents
   ========================================================= */
.re-orbit {
  position: relative;
  width: min(720px, 92vw);
  aspect-ratio: 1;
  margin-inline: auto;
  margin-block: var(--re-space-5);
}
.re-orbit__ring {
  position: absolute;
  inset: 10%;
  border: 1px dashed oklch(68% 0.21 275 / 0.25);
  border-radius: 50%;
  animation: re-rotate 60s linear infinite;
}
.re-orbit__ring--mid { inset: 24%; animation-duration: 45s; animation-direction: reverse; }
.re-orbit__ring--inner { inset: 38%; animation-duration: 35s; }
@keyframes re-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .re-orbit__ring { animation: none; }
}

.re-orbit__core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  background: radial-gradient(circle at 30% 30%, var(--re-iris-bright), var(--re-iris-dim) 70%);
  box-shadow: var(--re-shadow-glow), inset 0 0 20px oklch(100% 0 0 / 0.15);
  color: white;
  font-weight: 700;
  z-index: 2;
}
.re-orbit__core strong {
  font-size: var(--re-text-lg);
  display: block;
  letter-spacing: -0.02em;
}
.re-orbit__core small {
  display: block;
  opacity: 0.85;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 0.2rem;
}

.re-orbit__agent {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(140px, 17%, 190px);
  padding: 0.85rem;
  border-radius: var(--re-radius-sm);
  background: var(--re-surface);
  border: 1px solid var(--re-border-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translate(-50%, -50%) translate(var(--tx, 0), var(--ty, 0));
  cursor: pointer;
  transition: transform var(--re-dur-base) var(--re-ease-out-expo),
              border-color var(--re-dur-base) ease,
              box-shadow var(--re-dur-base) ease;
  z-index: 3;
  text-align: center;
}
.re-orbit__agent:hover {
  transform: translate(-50%, -50%) translate(var(--tx, 0), var(--ty, 0)) scale(1.08);
  border-color: var(--re-iris-bright);
  box-shadow: var(--re-shadow-glow-cyan);
}
.re-orbit__agent-emoji {
  font-size: 1.6rem;
  display: block;
  margin-bottom: 0.3rem;
}
.re-orbit__agent-name {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.re-orbit__agent-role {
  display: block;
  font-size: 0.7rem;
  color: var(--re-ink-dim);
  margin-top: 0.1rem;
}

@media (max-width: 700px) {
  .re-orbit { display: none; }
  .re-orbit-fallback { display: grid; }
}
.re-orbit-fallback { display: none; }
.re-orbit-fallback {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--re-space-2);
}
.re-orbit-fallback .re-orbit__agent {
  position: static;
  transform: none;
  width: auto;
}

/* =========================================================
   9. PRICING — 3 modalities
   ========================================================= */
.re-pricing-tabs {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--re-surface);
  border: 1px solid var(--re-border-strong);
  margin-bottom: var(--re-space-5);
}
.re-pricing-tab {
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  background: transparent;
  color: var(--re-ink-muted);
  font-weight: 600;
  font-size: var(--re-text-sm);
  cursor: pointer;
  border: 0;
  transition: all var(--re-dur-base) var(--re-ease-out-expo);
}
.re-pricing-tab.is-active {
  background: linear-gradient(135deg, var(--re-iris), var(--re-magenta));
  color: white;
  box-shadow: var(--re-shadow-glow);
}

.re-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--re-space-3);
  align-items: stretch;
}
.re-plan {
  position: relative;
  padding: var(--re-space-4);
  border-radius: var(--re-radius-lg);
  background: var(--re-surface);
  border: 1px solid var(--re-border);
  display: flex;
  flex-direction: column;
  transition: transform var(--re-dur-base) var(--re-ease-out-expo),
              border-color var(--re-dur-base) ease;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.re-plan:hover {
  transform: translateY(-6px);
  border-color: var(--re-border-strong);
}
.re-plan--featured {
  border: 1px solid var(--re-iris-bright);
  box-shadow: var(--re-shadow-glow);
  background: linear-gradient(
    160deg,
    oklch(17% 0.04 275 / 0.9) 0%,
    oklch(14% 0.03 335 / 0.85) 100%
  );
}
[data-theme="light"] .re-plan--featured {
  background: linear-gradient(
    160deg,
    oklch(100% 0 0 / 0.98) 0%,
    oklch(96% 0.015 275 / 0.95) 100%
  );
}
.re-plan__ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--re-magenta), var(--re-iris));
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: var(--re-shadow-md);
}
.re-plan__name {
  font-size: var(--re-text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}
.re-plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 0.2rem;
}
.re-plan__price-val {
  font-size: var(--re-text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, var(--re-ink) 0%, var(--re-iris-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.re-plan__price-per {
  font-size: var(--re-text-sm);
  color: var(--re-ink-dim);
}
.re-plan__credits {
  padding: 0.6rem 0.85rem;
  border-radius: var(--re-radius-sm);
  background: oklch(68% 0.21 275 / 0.12);
  border: 1px solid oklch(68% 0.21 275 / 0.25);
  color: var(--re-iris-bright);
  font-size: 0.85rem;
  font-weight: 600;
  margin-block: var(--re-space-2);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.re-plan__credits::before {
  content: '◆';
  font-size: 0.7rem;
  opacity: 0.8;
}
.re-plan__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--re-space-4);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-grow: 1;
}
.re-plan__features li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: var(--re-text-sm);
  color: var(--re-ink-muted);
  line-height: 1.5;
}
.re-plan__features li::before {
  content: '✓';
  color: var(--re-emerald);
  font-weight: 700;
  padding-top: 1px;
}

/* =========================================================
   10. TIMELINE — petición viaja por el sistema
   ========================================================= */
.re-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--re-space-2);
  padding: var(--re-space-4) 0;
}
.re-timeline__node {
  position: relative;
  padding: var(--re-space-3) var(--re-space-2);
  border-radius: var(--re-radius-sm);
  background: var(--re-surface);
  border: 1px solid var(--re-border);
  text-align: center;
  transition: all var(--re-dur-base) var(--re-ease-out-expo);
}
.re-timeline__node:hover {
  border-color: var(--re-iris-bright);
  transform: translateY(-3px);
}
.re-timeline__node:not(:last-child)::after {
  content: '→';
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--re-space-2) - 8px);
  transform: translateY(-50%);
  color: var(--re-iris-bright);
  font-size: 1.2rem;
  font-weight: 700;
  z-index: 2;
}
.re-timeline__port {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--re-cyan);
  margin-top: 0.3rem;
}
@media (max-width: 920px) {
  .re-timeline { grid-template-columns: 1fr; }
  .re-timeline__node:not(:last-child)::after {
    top: auto; bottom: -18px; right: 50%;
    transform: translateX(50%) rotate(90deg);
  }
}

/* =========================================================
   11. COMPLIANCE BADGES
   ========================================================= */
.re-compliance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--re-space-2);
}
.re-comp {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: var(--re-space-2);
  padding: var(--re-space-3);
  border-radius: var(--re-radius-md);
  background: var(--re-surface);
  border: 1px solid var(--re-border);
  transition: all var(--re-dur-base) var(--re-ease-out-expo);
}
.re-comp:hover { border-color: var(--re-emerald); }
.re-comp__mark {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  background: oklch(75% 0.17 155 / 0.15);
  border: 1px solid oklch(75% 0.17 155 / 0.3);
  border-radius: 50%;
  font-size: 1.1rem;
}
.re-comp__name {
  font-size: var(--re-text-sm);
  font-weight: 700;
  color: var(--re-ink);
  letter-spacing: -0.01em;
}
.re-comp__law {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--re-ink-dim);
  margin-top: 0.15rem;
}

/* =========================================================
   12. CTA — big closer
   ========================================================= */
.re-cta {
  position: relative;
  padding: var(--re-space-6) var(--re-space-4);
  border-radius: var(--re-radius-xl);
  background: linear-gradient(135deg, oklch(20% 0.06 275) 0%, oklch(22% 0.08 335) 100%);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.re-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 20%, oklch(68% 0.21 275 / 0.6), transparent 40%),
    radial-gradient(circle at 80% 80%, oklch(72% 0.25 335 / 0.5), transparent 45%);
  filter: blur(40px);
  opacity: 0.8;
}
.re-cta h2 {
  font-size: var(--re-text-3xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: white;
  max-width: 18ch;
  margin: 0 auto var(--re-space-2);
}
.re-cta p {
  color: oklch(90% 0.01 275);
  font-size: var(--re-text-base);
  max-width: 58ch;
  margin: 0 auto var(--re-space-4);
  line-height: 1.55;
}

/* =========================================================
   13. REVEAL ON SCROLL — generic
   ========================================================= */
.re-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--re-ease-out-expo), transform 700ms var(--re-ease-out-expo);
}
.re-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger */
.re-reveal[data-delay="1"] { transition-delay: 80ms; }
.re-reveal[data-delay="2"] { transition-delay: 160ms; }
.re-reveal[data-delay="3"] { transition-delay: 240ms; }
.re-reveal[data-delay="4"] { transition-delay: 320ms; }
.re-reveal[data-delay="5"] { transition-delay: 400ms; }
.re-reveal[data-delay="6"] { transition-delay: 480ms; }

/* =========================================================
   14. FAQ · Accordion
   ========================================================= */
.re-faq {
  display: flex;
  flex-direction: column;
  gap: var(--re-space-2);
  max-width: 900px;
  margin-inline: auto;
}
.re-faq__item {
  border: 1px solid var(--re-border);
  border-radius: var(--re-radius-md);
  background: var(--re-surface);
  overflow: hidden;
  transition: border-color var(--re-dur-base) ease;
}
.re-faq__item[open] { border-color: var(--re-border-strong); }
.re-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--re-space-3) var(--re-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--re-space-3);
  font-weight: 600;
  font-size: var(--re-text-base);
  color: var(--re-ink);
  transition: background var(--re-dur-base) ease;
}
.re-faq__item summary::-webkit-details-marker { display: none; }
.re-faq__item summary:hover { background: var(--re-surface-hover); }
.re-faq__item summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--re-iris-bright);
  transition: transform var(--re-dur-base) var(--re-ease-out-expo);
  flex-shrink: 0;
}
.re-faq__item[open] summary::after {
  transform: rotate(45deg);
}
.re-faq__body {
  padding: 0 var(--re-space-4) var(--re-space-4);
  color: var(--re-ink-muted);
  line-height: 1.65;
  font-size: var(--re-text-sm);
}
.re-faq__body a {
  color: var(--re-iris-bright);
  text-decoration: underline;
  text-decoration-color: oklch(68% 0.21 275 / 0.4);
  text-underline-offset: 3px;
}

/* =========================================================
   15. CONTACT FORM · modern
   ========================================================= */
.re-contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--re-space-5);
  align-items: start;
}
@media (max-width: 900px) {
  .re-contact-grid { grid-template-columns: 1fr; }
}

.re-form {
  display: flex;
  flex-direction: column;
  gap: var(--re-space-3);
  padding: var(--re-space-5);
  border-radius: var(--re-radius-lg);
  background: var(--re-surface);
  border: 1px solid var(--re-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.re-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.re-field__label {
  font-size: var(--re-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--re-ink-dim);
  font-weight: 600;
}
.re-field__input,
.re-field__textarea,
.re-field__select {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--re-radius-sm);
  background: var(--re-bg-1);
  border: 1px solid var(--re-border);
  color: var(--re-ink);
  font: inherit;
  font-size: var(--re-text-sm);
  transition: border-color var(--re-dur-base) ease,
              box-shadow var(--re-dur-base) ease,
              background var(--re-dur-base) ease;
}
.re-field__textarea { min-height: 140px; resize: vertical; font-family: inherit; }
.re-field__input:focus,
.re-field__textarea:focus,
.re-field__select:focus {
  outline: none;
  border-color: var(--re-iris-bright);
  box-shadow: 0 0 0 3px oklch(68% 0.21 275 / 0.18);
  background: var(--re-bg-0);
}
.re-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--re-space-3);
}
@media (max-width: 600px) {
  .re-form__row { grid-template-columns: 1fr; }
}

.re-contact-aside {
  display: flex;
  flex-direction: column;
  gap: var(--re-space-3);
}
.re-contact-aside__card {
  padding: var(--re-space-4);
  border-radius: var(--re-radius-md);
  background: var(--re-surface);
  border: 1px solid var(--re-border);
  transition: border-color var(--re-dur-base) ease;
}
.re-contact-aside__card:hover { border-color: var(--re-border-strong); }
.re-contact-aside__card h3 {
  font-size: var(--re-text-base);
  font-weight: 700;
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}
.re-contact-aside__card p,
.re-contact-aside__card a {
  color: var(--re-ink-muted);
  font-size: var(--re-text-sm);
  line-height: 1.55;
  text-decoration: none;
  transition: color var(--re-dur-base) ease;
}
.re-contact-aside__card a:hover { color: var(--re-iris-bright); }

/* =========================================================
   16. BLOG · editorial cards
   ========================================================= */
.re-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--re-space-3);
}
.re-blog-card {
  position: relative;
  padding: var(--re-space-4);
  border-radius: var(--re-radius-lg);
  background: var(--re-surface);
  border: 1px solid var(--re-border);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--re-space-2);
  transition: transform var(--re-dur-base) var(--re-ease-out-expo),
              border-color var(--re-dur-base) ease,
              background var(--re-dur-base) ease;
  isolation: isolate;
  min-height: 260px;
}
.re-blog-card::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--re-iris), var(--re-magenta), var(--re-cyan));
  opacity: 0;
  transition: opacity var(--re-dur-base) ease;
}
.re-blog-card:hover {
  transform: translateY(-6px);
  border-color: var(--re-border-strong);
  background: var(--re-surface-hover);
}
.re-blog-card:hover::before { opacity: 1; }

.re-blog-card__tag {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: oklch(68% 0.21 275 / 0.12);
  border: 1px solid oklch(68% 0.21 275 / 0.25);
  color: var(--re-iris-bright);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  align-self: flex-start;
}
.re-blog-card__title {
  font-size: var(--re-text-lg);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--re-ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
.re-blog-card__lede {
  color: var(--re-ink-muted);
  font-size: var(--re-text-sm);
  line-height: 1.55;
  flex-grow: 1;
}
.re-blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--re-space-2);
  font-size: 0.78rem;
  color: var(--re-ink-dim);
  padding-top: var(--re-space-2);
  border-top: 1px solid var(--re-border);
  margin-top: auto;
}
.re-blog-card__arrow {
  margin-left: auto;
  transition: transform var(--re-dur-base) var(--re-ease-out-expo);
}
.re-blog-card:hover .re-blog-card__arrow { transform: translateX(4px); color: var(--re-iris-bright); }

/* =========================================================
   17. LEGAL · reading layout
   ========================================================= */
.re-legal {
  max-width: 780px;
  margin-inline: auto;
  padding-block: var(--re-space-5);
  color: var(--re-ink);
  line-height: 1.7;
}
.re-legal h1,
.re-legal h2,
.re-legal h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: -0.02em;
  margin-top: var(--re-space-5);
  margin-bottom: var(--re-space-2);
  line-height: 1.2;
}
.re-legal h1 { font-size: var(--re-text-2xl); }
.re-legal h2 { font-size: var(--re-text-xl); color: var(--re-ink); }
.re-legal h3 { font-size: var(--re-text-lg); color: var(--re-ink-muted); }
.re-legal p,
.re-legal li {
  color: var(--re-ink-muted);
  font-size: var(--re-text-base);
  margin-bottom: var(--re-space-2);
}
.re-legal ul,
.re-legal ol { padding-left: 1.3rem; margin-bottom: var(--re-space-3); }
.re-legal a {
  color: var(--re-iris-bright);
  text-decoration: underline;
  text-decoration-color: oklch(68% 0.21 275 / 0.4);
  text-underline-offset: 3px;
}
.re-legal__tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--re-ink-dim);
  margin-bottom: var(--re-space-2);
  font-weight: 600;
}

/* =========================================================
   18. VISION PAGE · camera dashboard mockup
   ========================================================= */
.re-vision-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--re-space-5);
  align-items: center;
}
@media (max-width: 900px) {
  .re-vision-split { grid-template-columns: 1fr; }
}
.re-cam-mock {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--re-radius-lg);
  background:
    repeating-linear-gradient(
      45deg,
      oklch(18% 0.025 275) 0,
      oklch(18% 0.025 275) 8px,
      oklch(14% 0.02 275) 8px,
      oklch(14% 0.02 275) 16px
    );
  border: 1px solid var(--re-border-strong);
  overflow: hidden;
  box-shadow: var(--re-shadow-lg);
}
.re-cam-mock::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 45%, oklch(72% 0.25 335 / 0.25), transparent 30%),
    radial-gradient(circle at 70% 60%, oklch(80% 0.16 200 / 0.22), transparent 32%);
}
.re-cam-mock__label {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: oklch(0% 0 0 / 0.6);
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  backdrop-filter: blur(8px);
  font-family: 'JetBrains Mono', monospace;
}
.re-cam-mock__rec {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: oklch(65% 0.24 25 / 0.2);
  color: oklch(85% 0.18 25);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: 'JetBrains Mono', monospace;
}
.re-cam-mock__rec::before {
  content: '';
  width: 8px; height: 8px;
  background: oklch(65% 0.24 25);
  border-radius: 50%;
  box-shadow: 0 0 10px oklch(65% 0.24 25);
  animation: re-pulse 1.5s ease-in-out infinite;
}
.re-cam-mock__box {
  position: absolute;
  border: 2px solid oklch(80% 0.16 200);
  border-radius: 4px;
  box-shadow: 0 0 20px oklch(80% 0.16 200 / 0.5);
  background: oklch(80% 0.16 200 / 0.08);
}
.re-cam-mock__box-label {
  position: absolute;
  top: -22px;
  left: -2px;
  padding: 2px 8px;
  background: oklch(80% 0.16 200);
  color: oklch(15% 0.05 200);
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.re-cam-mock__box--p1 { top: 38%; left: 28%; width: 16%; height: 44%; }
.re-cam-mock__box--p2 {
  top: 44%; left: 56%; width: 14%; height: 38%;
  border-color: oklch(82% 0.17 75);
  box-shadow: 0 0 20px oklch(82% 0.17 75 / 0.5);
  background: oklch(82% 0.17 75 / 0.08);
}
.re-cam-mock__box--p2 .re-cam-mock__box-label {
  background: oklch(82% 0.17 75);
  color: oklch(15% 0.05 75);
}
.re-cam-mock__meta {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: oklch(90% 0.01 275);
}
.re-cam-mock__meta span {
  padding: 0.3rem 0.6rem;
  background: oklch(0% 0 0 / 0.55);
  border-radius: 4px;
  backdrop-filter: blur(8px);
}

/* =========================================================
   19. BIG HERO VARIANT (for subpages)
   ========================================================= */
.re-subhero {
  position: relative;
  padding: calc(var(--re-space-section) * 0.85) 0 var(--re-space-5);
  overflow: hidden;
  isolation: isolate;
}
.re-subhero::before {
  content: '';
  position: absolute;
  inset: -10% 0 auto 0;
  height: 80%;
  z-index: -1;
  filter: blur(80px);
  opacity: 0.4;
  background:
    radial-gradient(ellipse at 30% 40%, oklch(68% 0.21 275 / 0.55), transparent 50%),
    radial-gradient(ellipse at 75% 50%, oklch(72% 0.25 335 / 0.4), transparent 55%);
}
.re-subhero__eyebrow {
  display: inline-block;
  font-size: var(--re-text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--re-iris-bright);
  margin-bottom: var(--re-space-2);
}
.re-subhero h1 {
  font-size: var(--re-text-3xl);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--re-space-3);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  max-width: 18ch;
}
.re-subhero__lede {
  font-size: var(--re-text-base);
  color: var(--re-ink-muted);
  max-width: 62ch;
  line-height: 1.6;
}

/* =========================================================
   20. AGENT DETAIL · expanded cards
   ========================================================= */
.re-agent-deep {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--re-space-3);
}
.re-agent-deep__card {
  position: relative;
  padding: var(--re-space-4);
  border-radius: var(--re-radius-lg);
  background: var(--re-surface);
  border: 1px solid var(--re-border);
  transition: transform var(--re-dur-base) var(--re-ease-out-expo),
              border-color var(--re-dur-base) ease;
}
.re-agent-deep__card:hover {
  transform: translateY(-4px);
  border-color: var(--re-iris-bright);
}
.re-agent-deep__head {
  display: flex;
  gap: var(--re-space-2);
  align-items: flex-start;
  margin-bottom: var(--re-space-2);
}
.re-agent-deep__emoji {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--re-radius-sm);
  background: linear-gradient(135deg, oklch(68% 0.21 275 / 0.25), oklch(72% 0.25 335 / 0.2));
  border: 1px solid var(--re-border-strong);
  font-size: 1.6rem;
  flex-shrink: 0;
}
.re-agent-deep__title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: var(--re-text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.re-agent-deep__role {
  display: block;
  font-size: 0.8rem;
  color: var(--re-ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.15rem;
}
.re-agent-deep__desc {
  color: var(--re-ink-muted);
  font-size: var(--re-text-sm);
  line-height: 1.6;
  margin-bottom: var(--re-space-3);
}
.re-agent-deep__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--re-space-3);
}
.re-agent-deep__tool {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--re-bg-1);
  border: 1px solid var(--re-border);
  color: var(--re-ink-muted);
  font-size: 0.72rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}
.re-agent-deep__prompt {
  padding: var(--re-space-3);
  border-radius: var(--re-radius-sm);
  background: oklch(12% 0.015 275 / 0.6);
  border: 1px solid var(--re-border);
  font-size: 0.8rem;
  color: var(--re-ink-muted);
  line-height: 1.5;
  font-style: italic;
}
.re-agent-deep__prompt::before {
  content: '“';
  font-size: 1.6rem;
  color: var(--re-iris-bright);
  font-style: normal;
  line-height: 0;
  display: inline-block;
  margin-right: 0.3rem;
}
.re-agent-deep__pool {
  margin-top: var(--re-space-3);
  font-size: 0.72rem;
  color: var(--re-ink-dim);
  font-family: 'JetBrains Mono', monospace;
  padding-top: var(--re-space-2);
  border-top: 1px solid var(--re-border);
}

/* =========================================================
   21. STAT CARDS (success cases)
   ========================================================= */
.re-stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--re-space-3);
}
.re-stat-card {
  padding: var(--re-space-4);
  border-radius: var(--re-radius-lg);
  background: linear-gradient(
    160deg,
    oklch(17% 0.02 275 / 0.9) 0%,
    oklch(14% 0.03 275 / 0.85) 100%
  );
  border: 1px solid var(--re-border);
  transition: transform var(--re-dur-base) var(--re-ease-out-expo),
              border-color var(--re-dur-base) ease;
}
.re-stat-card:hover {
  transform: translateY(-5px);
  border-color: var(--re-emerald);
}
.re-stat-card__val {
  font-size: var(--re-text-3xl);
  font-weight: 800;
  letter-spacing: -0.035em;
  background: linear-gradient(120deg, var(--re-emerald) 0%, var(--re-iris-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
.re-stat-card__lbl {
  display: block;
  margin-top: 0.4rem;
  color: var(--re-ink);
  font-size: var(--re-text-sm);
  font-weight: 600;
}
.re-stat-card__sub {
  display: block;
  margin-top: 0.3rem;
  color: var(--re-ink-dim);
  font-size: var(--re-text-xs);
  line-height: 1.45;
}

/* =========================================================
   22. 404
   ========================================================= */
.re-404 {
  min-height: 80vh;
  display: grid;
  place-items: center;
  padding: var(--re-space-6) var(--re-space-4);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.re-404__code {
  font-size: clamp(6rem, 16vw, 12rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.9;
  background: linear-gradient(135deg, var(--re-iris-bright), var(--re-magenta), var(--re-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  margin-bottom: var(--re-space-3);
  text-shadow: 0 0 80px oklch(68% 0.21 275 / 0.3);
}
.re-404 p { color: var(--re-ink-muted); max-width: 52ch; margin: 0 auto var(--re-space-4); }

/* =========================================================
   23. USE CASES · grid by role / department
   ========================================================= */
.re-usecases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--re-space-3);
}
.re-uc {
  position: relative;
  padding: var(--re-space-4);
  border-radius: var(--re-radius-md);
  background: var(--re-surface);
  border: 1px solid var(--re-border);
  overflow: hidden;
  transition: transform var(--re-dur-base) var(--re-ease-out-expo),
              border-color var(--re-dur-base) ease;
  isolation: isolate;
}
.re-uc::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  background: radial-gradient(
    400px circle at 15% 0%,
    var(--uc-glow, oklch(68% 0.21 275 / 0.18)),
    transparent 55%
  );
  opacity: 0;
  transition: opacity var(--re-dur-base) ease;
}
.re-uc:hover::before { opacity: 1; }
.re-uc:hover {
  transform: translateY(-6px);
  border-color: var(--re-border-strong);
}
.re-uc__role {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--re-bg-1);
  border: 1px solid var(--re-border);
  color: var(--re-ink-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--re-space-2);
}
.re-uc__emoji {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--re-space-2);
  filter: drop-shadow(0 4px 12px oklch(68% 0.21 275 / 0.35));
}
.re-uc__title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: var(--re-text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--re-space-2);
  line-height: 1.2;
}
.re-uc__desc {
  color: var(--re-ink-muted);
  font-size: var(--re-text-sm);
  line-height: 1.55;
  margin-bottom: var(--re-space-3);
}
.re-uc__impact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--re-radius-sm);
  background: oklch(75% 0.17 155 / 0.1);
  border: 1px solid oklch(75% 0.17 155 / 0.25);
  color: var(--re-emerald);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}
.re-uc__impact::before {
  content: '↗';
  font-size: 1rem;
}
.re-uc__agents {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: var(--re-space-2);
}
.re-uc__agent-chip {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: oklch(68% 0.21 275 / 0.12);
  border: 1px solid oklch(68% 0.21 275 / 0.22);
  color: var(--re-iris-bright);
  font-size: 0.68rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

/* Color variants by department */
.re-uc--marketing { --uc-glow: oklch(72% 0.25 335 / 0.22); }
.re-uc--sales { --uc-glow: oklch(68% 0.21 275 / 0.22); }
.re-uc--finance { --uc-glow: oklch(75% 0.17 155 / 0.22); }
.re-uc--support { --uc-glow: oklch(80% 0.16 200 / 0.22); }
.re-uc--hr { --uc-glow: oklch(82% 0.17 75 / 0.22); }
.re-uc--ops { --uc-glow: oklch(65% 0.2 145 / 0.22); }
.re-uc--security { --uc-glow: oklch(65% 0.24 25 / 0.22); }
.re-uc--dev { --uc-glow: oklch(70% 0.18 230 / 0.22); }

/* =========================================================
   24. PILLAR · "it's not an ERP, it's your virtual office"
   ========================================================= */
.re-pillar {
  text-align: center;
  padding: var(--re-space-6) var(--re-space-4);
  border-radius: var(--re-radius-xl);
  background: linear-gradient(
    160deg,
    oklch(17% 0.03 275 / 0.9) 0%,
    oklch(14% 0.04 335 / 0.85) 100%
  );
  border: 1px solid var(--re-border);
  position: relative;
  overflow: hidden;
}
[data-theme="light"] .re-pillar {
  background: linear-gradient(
    160deg,
    oklch(99% 0.005 275) 0%,
    oklch(97% 0.015 275) 100%
  );
}
.re-pillar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 10% 20%, oklch(68% 0.21 275 / 0.25), transparent 40%),
    radial-gradient(circle at 90% 80%, oklch(72% 0.25 335 / 0.2), transparent 45%);
  filter: blur(40px);
  opacity: 0.7;
}
.re-pillar > * { position: relative; z-index: 1; }
.re-pillar h2 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: var(--re-text-3xl);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: var(--re-space-3);
  max-width: 22ch;
  margin-inline: auto;
}
.re-pillar h2 del {
  color: var(--re-ink-dim);
  text-decoration-color: oklch(65% 0.24 25 / 0.5);
  text-decoration-thickness: 3px;
}
.re-pillar h2 strong {
  background: linear-gradient(120deg, var(--re-iris-bright), var(--re-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
.re-pillar__lede {
  color: var(--re-ink-muted);
  font-size: var(--re-text-lg);
  max-width: 58ch;
  margin: 0 auto var(--re-space-4);
  line-height: 1.55;
}

/* =========================================================
   25. AGENTIC WORKFLOWS · SVG network + live feed
   ========================================================= */
.re-agentic {
  position: relative;
  padding: var(--re-space-5);
  border-radius: var(--re-radius-xl);
  background: linear-gradient(
    160deg,
    oklch(12% 0.02 275 / 0.9) 0%,
    oklch(10% 0.04 335 / 0.85) 100%
  );
  border: 1px solid var(--re-border);
  overflow: hidden;
  isolation: isolate;
}
[data-theme="light"] .re-agentic {
  background: linear-gradient(
    160deg,
    oklch(99% 0.005 275) 0%,
    oklch(97% 0.015 275) 100%
  );
}
.re-agentic::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 30%, oklch(68% 0.21 275 / 0.25), transparent 45%),
    radial-gradient(circle at 80% 70%, oklch(72% 0.25 335 / 0.2), transparent 45%);
  filter: blur(60px);
  opacity: 0.8;
}
.re-agentic__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--re-space-5);
  align-items: center;
}
@media (max-width: 980px) {
  .re-agentic__grid { grid-template-columns: 1fr; }
}

.re-agentic__svg-wrap {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}
.re-agentic__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* SVG nodes */
.re-ag-node {
  transform-box: fill-box;
  transform-origin: center;
}
.re-ag-node__bg {
  fill: oklch(18% 0.03 275);
  stroke: oklch(55% 0.15 275 / 0.6);
  stroke-width: 1.5;
  transition: all var(--re-dur-base) var(--re-ease-out-expo);
}
.re-ag-node--core .re-ag-node__bg {
  fill: url(#agGradCore);
  stroke: oklch(78% 0.22 275);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 16px oklch(68% 0.21 275 / 0.6));
}
.re-ag-node:hover .re-ag-node__bg {
  fill: oklch(22% 0.05 275);
  stroke: oklch(72% 0.25 335);
}

.re-ag-node__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  fill: oklch(95% 0.01 275);
  text-anchor: middle;
  letter-spacing: 0.08em;
  pointer-events: none;
}
.re-ag-node__emoji {
  font-size: 18px;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.re-ag-node--core .re-ag-node__emoji {
  font-size: 26px;
}
.re-ag-node--core .re-ag-node__label {
  font-size: 10px;
  fill: oklch(98% 0 0);
}

/* Connection lines */
.re-ag-link {
  fill: none;
  stroke: oklch(55% 0.15 275 / 0.25);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.re-ag-link--active {
  stroke: oklch(78% 0.22 275 / 0.8);
  stroke-width: 1.5;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 3px oklch(68% 0.21 275 / 0.6));
}

/* Pulse dots traveling along paths */
.re-ag-pulse {
  fill: oklch(85% 0.15 200);
  filter: drop-shadow(0 0 6px oklch(80% 0.16 200));
}
.re-ag-pulse--magenta { fill: oklch(80% 0.22 335); filter: drop-shadow(0 0 6px oklch(72% 0.25 335)); }
.re-ag-pulse--amber { fill: oklch(88% 0.17 75); filter: drop-shadow(0 0 6px oklch(82% 0.17 75)); }
.re-ag-pulse--green { fill: oklch(85% 0.18 155); filter: drop-shadow(0 0 6px oklch(75% 0.17 155)); }

@keyframes re-travel {
  to { motion-offset: 100%; offset-distance: 100%; }
}

/* Orbit halo */
.re-ag-halo {
  fill: none;
  stroke: oklch(55% 0.15 275 / 0.15);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  animation: re-rotate 60s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@media (prefers-reduced-motion: reduce) {
  .re-ag-halo { animation: none; }
}

/* LIVE FEED */
.re-ag-feed {
  position: relative;
  z-index: 1;
  background: oklch(11% 0.015 275 / 0.7);
  border: 1px solid var(--re-border);
  border-radius: var(--re-radius-md);
  padding: var(--re-space-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--re-ink-muted);
  max-height: 460px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-theme="light"] .re-ag-feed {
  background: oklch(98% 0.005 275 / 0.85);
}
.re-ag-feed__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--re-space-2);
  border-bottom: 1px solid var(--re-border);
  margin-bottom: var(--re-space-2);
}
.re-ag-feed__title {
  color: var(--re-ink);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.re-ag-feed__live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: oklch(65% 0.24 25 / 0.15);
  border: 1px solid oklch(65% 0.24 25 / 0.3);
  color: oklch(75% 0.2 25);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.re-ag-feed__live::before {
  content: '';
  width: 6px; height: 6px;
  background: oklch(65% 0.24 25);
  border-radius: 50%;
  animation: re-pulse 1.2s ease-in-out infinite;
}
.re-ag-feed__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.re-ag-feed__item {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 0.65rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed oklch(35% 0.05 275 / 0.2);
  opacity: 0;
  animation: re-feedIn 0.6s var(--re-ease-out-expo) forwards;
}
@keyframes re-feedIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}
.re-ag-feed__item:nth-child(1) { animation-delay: 0ms; }
.re-ag-feed__item:nth-child(2) { animation-delay: 350ms; }
.re-ag-feed__item:nth-child(3) { animation-delay: 700ms; }
.re-ag-feed__item:nth-child(4) { animation-delay: 1050ms; }
.re-ag-feed__item:nth-child(5) { animation-delay: 1400ms; }
.re-ag-feed__item:nth-child(6) { animation-delay: 1750ms; }
.re-ag-feed__item:nth-child(7) { animation-delay: 2100ms; }

.re-ag-feed__time {
  color: var(--re-cyan);
  font-size: 0.72rem;
}
.re-ag-feed__content strong {
  color: var(--re-iris-bright);
  font-weight: 700;
}
.re-ag-feed__content em {
  color: var(--re-emerald);
  font-style: normal;
}

/* Legend */
.re-agentic__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--re-space-3);
  margin-top: var(--re-space-4);
  padding-top: var(--re-space-3);
  border-top: 1px solid var(--re-border);
  font-size: var(--re-text-xs);
  color: var(--re-ink-dim);
}
.re-agentic__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.re-agentic__legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px currentColor;
}
.re-agentic__legend-dot--req { background: oklch(85% 0.15 200); color: oklch(80% 0.16 200); }
.re-agentic__legend-dot--res { background: oklch(85% 0.18 155); color: oklch(75% 0.17 155); }
.re-agentic__legend-dot--tool { background: oklch(88% 0.17 75); color: oklch(82% 0.17 75); }
.re-agentic__legend-dot--ctx { background: oklch(80% 0.22 335); color: oklch(72% 0.25 335); }

/* =========================================================
   26. FINAL — REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .re-hero__mesh { animation: none; }
}

    .nav-links.active a:hover {
        background: rgba(99, 102, 241, 0.15) !important;
        color: var(--primary) !important;
    }

}

/* ========== LIGHT MODE MOBILE ========== */
@media (max-width: 968px) {
    [data-theme="light"] .menu-toggle {
        background: rgba(255, 255, 255, 0.9) !important;
        border-color: rgba(99, 102, 241, 0.2) !important;
    }
    [data-theme="light"] .menu-toggle span {
        background: #1e293b !important;
    }
    [data-theme="light"] .nav-links.active {
        background: rgba(255, 255, 255, 0.98) !important;
    }
    [data-theme="light"] .nav-links.active a {
        color: #1e293b !important;
    }
    [data-theme="light"] .nav-links.active a:hover {
        background: rgba(99, 102, 241, 0.1) !important;
        color: var(--primary) !important;
    }
}

/* ========== WHATSAPP FLOATING BUTTON ========== */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(37, 211, 102, 0.55);
}
.whatsapp-float svg {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    fill: #fff !important;
    flex-shrink: 0;
}
.whatsapp-float .wa-tooltip {
    position: absolute;
    right: 72px;
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(8px);
}
.whatsapp-float:hover .wa-tooltip {
    opacity: 1;
}
[data-theme="light"] .whatsapp-float .wa-tooltip {
    background: rgba(255, 255, 255, 0.95);
    color: #1e293b;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 16px;
        right: 16px;
        width: 54px;
        height: 54px;
    }
    .whatsapp-float svg {
        width: 28px;
        height: 28px;
    }
    .whatsapp-float .wa-tooltip {
        display: none;
    }
}

/* =========================================================
   PARTNERS · Ecosistema AppNet (BionicAdri)
   ========================================================= */
.ba-partners-section {
  padding: clamp(4rem, 3rem + 4vw, 8rem) 24px;
  max-width: 1280px;
  margin: 0 auto;
}
.ba-partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.ba-partner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 28px;
  border-radius: 20px;
  background: var(--surface, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.ba-partner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at 80% 0%, rgba(138,99,255,0.10), transparent 55%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ba-partner:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 18px 40px -22px rgba(138,99,255,0.45);
}
.ba-partner:hover::before { opacity: 1; }
.ba-partner:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 4px;
}
.ba-partner__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 64px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.ba-partner__logo img {
  max-width: 220px;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Dark theme: invert dark logos for legibility */
html[data-theme="dark"] .ba-partner__logo img {
  filter: invert(1) brightness(1.1);
}
.ba-partner__name {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  color: var(--text, #fff);
}
.ba-partner__desc {
  color: var(--text-muted, rgba(255,255,255,0.65));
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.ba-partner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #a78bfa;
  margin-top: auto;
}
.ba-partner:hover .ba-partner__cta { color: #c4b5fd; }

@media (max-width: 640px) {
  .ba-partners-grid { grid-template-columns: 1fr; }
  .ba-partner__logo img { max-width: 180px; }
}

/* =========================================================
   UI REVIEW PATCH — reveal safety, contrast, icon sizing
   Added during design review. Loaded last → authoritative.
   ========================================================= */

/* --- Reveal safety: never leave content invisible --- */
/* If JS is disabled/blocked, html keeps .no-js → force everything visible. */
html.no-js .re-reveal,
html.no-js .re-flow,
html.no-js .reveal,
html.no-js .reveal-left,
html.no-js .reveal-right,
html.no-js .reveal-scale {
  opacity: 1 !important;
  transform: none !important;
}
/* Reduced-motion users: show content immediately, skip the slide. */
@media (prefers-reduced-motion: reduce) {
  .re-reveal,
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Contrast: lift muted/dim text to meet WCAG AA, per theme --- */
[data-theme="dark"] {
  --re-ink-muted: oklch(80% 0.022 275); /* was 72% — too low on bg-0 */
  --re-ink-dim: oklch(68% 0.02 275);    /* was 55% — failed AA for small text */
}
[data-theme="light"] {
  --re-ink-muted: oklch(38% 0.025 275); /* was 40% — slightly darker for AA */
  --re-ink-dim: oklch(46% 0.02 275);    /* was 55% — too light on light bg */
}

/* --- Cookie consent: compact bottom-center card --- */
.bio-cookie {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 9000;
  width: min(540px, calc(100vw - 28px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  background: oklch(16% 0.022 275 / 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid oklch(62% 0.17 285 / 0.4);
  border-radius: 16px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
  color: oklch(92% 0.01 275);
  font-size: 0.9rem;
  line-height: 1.5;
  animation: bioCookieIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes bioCookieIn {
  from { opacity: 0; transform: translateX(-50%) translateY(22px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.bio-cookie.is-hiding { animation: bioCookieOut 0.25s ease forwards; }
@keyframes bioCookieOut {
  to { opacity: 0; transform: translateX(-50%) translateY(22px); }
}
.bio-cookie__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  color: oklch(78% 0.13 285);
}
.bio-cookie__icon svg { width: 22px; height: 22px; }
.bio-cookie__text { flex: 1; min-width: 0; margin: 0; }
.bio-cookie__text a {
  color: oklch(80% 0.12 285);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.bio-cookie__text a:hover { color: oklch(88% 0.12 285); }
.bio-cookie__accept {
  flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1, #06b6d4);
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bio-cookie__accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.5);
}
.bio-cookie__accept:focus-visible {
  outline: 2px solid oklch(80% 0.12 285);
  outline-offset: 2px;
}
[data-theme="light"] .bio-cookie {
  background: oklch(99% 0.005 275 / 0.97);
  color: oklch(22% 0.02 275);
  border-color: oklch(62% 0.17 285 / 0.3);
}
@media (max-width: 560px) {
  .bio-cookie { flex-wrap: wrap; gap: 10px; }
  .bio-cookie__text { flex: 1 1 60%; }
  .bio-cookie__accept { flex: 1 1 100%; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bio-cookie, .bio-cookie.is-hiding { animation: none; }
}

/* --- Theme-toggle icon: SVG instead of emoji glyph --- */
#themeIcon { display: inline-grid; place-items: center; line-height: 0; }
#themeIcon svg { width: 20px; height: 20px; }

/* --- SVG icon system (replaces emoji glyphs) --- */
.bio-ico {
  width: 1.4rem;
  height: 1.4rem;
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  line-height: 1;
}
/* Inside a sized icon container, match the container's font-size
   (this is exactly how the emoji used to be sized). */
[class*="icon"]  > .bio-ico,
[class*="emoji"] > .bio-ico,
[class*="mark"]  > .bio-ico,
[class*="avatar"] > .bio-ico {
  width: 1em;
  height: 1em;
}
/* Leading icon inside a text run (badges, buttons, list items, headings) */
h1 > .bio-ico, h2 > .bio-ico, h3 > .bio-ico, h4 > .bio-ico,
p > .bio-ico, a > .bio-ico, button > .bio-ico, span > .bio-ico, li > .bio-ico {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.4em;
}
.bio-ico--heart { color: oklch(62% 0.2 18); width: 1em; height: 1em; margin: 0 0.15em; }
/* Footer social brand icons — fixed, consistent size */
.bio-social { display: inline-flex; }
.bio-social .bio-ico { width: 20px; height: 20px; }
/* Agent-diagram nested icons already carry width/height attributes */
.re-ag-node__ico { pointer-events: none; }

/* Guard: an .bio-ico with no sized ancestor never balloons to the
   SVG default 300x150. */
svg.bio-ico:not([width]) { max-width: 3rem; max-height: 3rem; }

/* ===== PARTNER TECNOLÓGICO · Xiaomi MiMo ===== */
.xm-partner-band {
  padding: clamp(2.5rem, 2rem + 2vw, 4rem) 24px 0;
  max-width: 1280px;
  margin: 0 auto;
}
.xm-partner-band__inner {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(28px, 3vw, 44px);
  border-radius: 24px;
  background: linear-gradient(120deg, rgba(255,105,0,0.10), rgba(138,99,255,0.06));
  border: 1px solid rgba(255,105,0,0.22);
}
.xm-partner-band__logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 26px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 34px -20px rgba(255,105,0,0.65);
}
.xm-partner-band__logo img {
  width: auto;
  height: 30px;
  max-width: 210px;
  object-fit: contain;
}
/* Brand logo keeps its Xiaomi orange — never invert in dark theme */
html[data-theme="dark"] .xm-partner-band__logo img { filter: none; }
.xm-partner-band__body { flex: 1; min-width: 0; }
.xm-partner-band__title {
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 8px 0 12px;
  color: var(--text, #fff);
}
.xm-partner-band__sub {
  color: var(--text-muted, rgba(255,255,255,0.7));
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  max-width: 640px;
}
@media (max-width: 720px) {
  .xm-partner-band__inner { flex-direction: column; text-align: center; }
  .xm-partner-band__sub { margin-inline: auto; }
}