/**
 * 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; }
}

/* =========================================================
   26. AppNet-specific: Bootstrap coexistence + RTL
   ========================================================= */
body.reimagine-an {
  background: var(--re-bg-0);
  color: var(--re-ink);
  font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
}
/* Let Bootstrap container work inside reimagine */
body.reimagine-an .container {
  max-width: 1280px;
}
/* Neutralize Bootstrap defaults that clash */
body.reimagine-an .btn {
  border-radius: 999px;
}
/* RTL support for Arabic */
body.reimagine-an[dir="rtl"] .re-flow__step:not(:last-child)::before {
  left: auto;
  right: 14px;
}
body.reimagine-an[dir="rtl"] .re-bento__badge {
  right: auto;
  left: var(--re-space-3);
}
body.reimagine-an[dir="rtl"] .re-btn__arrow {
  transform: scaleX(-1);
}
body.reimagine-an[dir="rtl"] .re-btn:hover .re-btn__arrow {
  transform: scaleX(-1) translateX(4px);
}
body.reimagine-an[dir="rtl"] .re-hero h1 {
  text-align: right;
}
body.reimagine-an[dir="rtl"] .re-flow__steps,
body.reimagine-an[dir="rtl"] .re-plan__features,
body.reimagine-an[dir="rtl"] .article-content ul,
body.reimagine-an[dir="rtl"] .article-content ol {
  padding-right: 1.4rem;
  padding-left: 0;
}
body.reimagine-an[dir="rtl"] .re-flow__step {
  grid-template-columns: 1fr 32px;
}
body.reimagine-an[dir="rtl"] .re-flow__dot {
  order: 2;
}
body.reimagine-an[dir="rtl"] .re-flow__body {
  order: 1;
  text-align: right;
}
body.reimagine-an[dir="rtl"] .re-timeline__node:not(:last-child)::after {
  content: '←';
  right: auto;
  left: calc(-1 * var(--re-space-2) - 8px);
}
/* Preloader visibility in reimagine */
body.reimagine-an #preloader {
  background: var(--re-bg-0);
}
/* Language selector spacing (coexists with existing) */
body.reimagine-an .lang-selector-float {
  z-index: 9999;
}

/* =========================================================
   27. HEADER · responsive con hamburguesa + theme toggle
   ========================================================= */
.re-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: oklch(11% 0.015 275 / 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--re-border);
    transition: background 0.3s ease;
}
[data-theme="light"] .re-header {
    background: oklch(98% 0.005 275 / 0.85);
}
.re-header__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 0;
    gap: 1rem;
}
.re-header__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--re-ink);
    font-weight: 700;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.re-header__logo img {
    border-radius: 8px;
}

.re-header__menu {
    display: flex;
    gap: 1.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--re-text-sm);
    flex: 1;
    justify-content: center;
}
.re-header__menu a {
    color: var(--re-ink-muted);
    text-decoration: none;
    transition: color var(--re-dur-base) ease;
    font-weight: 500;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
}
.re-header__menu a:hover,
.re-header__menu a:focus-visible {
    color: var(--re-iris-bright);
}

.re-header__actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}
.re-header__theme {
    background: var(--re-surface);
    border: 1px solid var(--re-border);
    color: var(--re-ink);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.95rem;
    display: inline-grid;
    place-items: center;
    transition: all var(--re-dur-base) ease;
}
.re-header__theme:hover {
    border-color: var(--re-iris-bright);
    transform: translateY(-1px);
}

.re-header__cta {
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
}

/* Lang switcher */
.lang-switcher { position: relative; }
.lang-switcher__btn {
    background: var(--re-surface);
    border: 1px solid var(--re-border-strong);
    color: var(--re-ink);
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all var(--re-dur-base) ease;
}
.lang-switcher__btn:hover {
    border-color: var(--re-iris-bright);
}
.lang-switcher__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--re-surface);
    border: 1px solid var(--re-border-strong);
    border-radius: var(--re-radius-md);
    padding: 0.4rem;
    list-style: none;
    margin: 0;
    min-width: 180px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--re-dur-base) ease;
    z-index: 101;
}
.lang-switcher__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lang-switcher__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    color: var(--re-ink);
    text-decoration: none;
    border-radius: 8px;
    transition: background var(--re-dur-base) ease;
    font-size: 0.85rem;
}
.lang-switcher__item:hover {
    background: var(--re-surface-hover);
}

/* Hamburger (hidden on desktop) */
.re-header__burger {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--re-border-strong);
    background: var(--re-surface);
    border-radius: 10px;
    padding: 0;
    cursor: pointer;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}
.re-header__burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--re-ink);
    border-radius: 1px;
    transition: all var(--re-dur-base) ease;
}
.re-header__burger.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.re-header__burger.is-active span:nth-child(2) { opacity: 0; }
.re-header__burger.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =========================================================
   28. MOBILE BREAKPOINT (≤960px)
   ========================================================= */
@media (max-width: 960px) {
    .re-header__menu {
        position: fixed;
        top: 65px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--re-bg-0);
        flex-direction: column;
        justify-content: flex-start;
        gap: 0;
        padding: var(--re-space-4) var(--re-space-3);
        transform: translateX(100%);
        transition: transform 0.35s var(--re-ease-out-expo);
        overflow-y: auto;
        z-index: 99;
    }
    .re-header__menu.is-mobile-open {
        transform: translateX(0);
    }
    .re-header__menu li {
        border-bottom: 1px solid var(--re-border);
    }
    .re-header__menu a {
        display: block;
        padding: 1rem 0.5rem;
        font-size: var(--re-text-base);
    }

    .re-header__burger {
        display: inline-flex;
    }
    .re-header__cta {
        display: none !important;
    }
    .re-header__theme {
        width: 38px;
        height: 38px;
    }
    .lang-switcher__btn span:last-child {
        display: none;
    }
    .lang-switcher__btn {
        padding: 0.4rem 0.6rem;
    }
}

@media (max-width: 600px) {
    .re-header__logo span {
        display: none;
    }
    .re-header__logo img {
        width: 36px;
        height: 36px;
    }
    .re-header__nav {
        padding: 0.7rem 0;
    }
    .re-hero {
        padding: calc(var(--re-space-section) * 0.6) 0 var(--re-space-4);
        min-height: auto;
    }
    .re-hero h1 {
        font-size: clamp(2.2rem, 9vw, 3rem);
    }
    .re-hero__lede {
        font-size: var(--re-text-base);
    }
    .re-hero__ctas {
        flex-direction: column;
        align-items: stretch;
    }
    .re-hero__ctas .re-btn {
        justify-content: center;
    }
    .re-hero__ticker {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--re-space-2);
    }
    .re-ticker__val {
        font-size: var(--re-text-xl);
    }
    .re-section {
        padding: var(--re-space-5) 0;
    }
    .re-section__title {
        font-size: var(--re-text-2xl);
    }
    .re-bento {
        grid-template-columns: 1fr !important;
    }
    .re-bento__cell,
    .re-bento__cell--hero,
    .re-bento__cell--tall,
    .re-bento__cell--wide,
    .re-bento__cell--std {
        grid-column: span 1 !important;
        grid-row: auto !important;
        min-height: auto;
    }
    .re-usecases,
    .re-flows,
    .re-plans,
    .re-stat-cards,
    .re-compliance,
    .re-blog-grid,
    .re-agent-deep {
        grid-template-columns: 1fr !important;
    }
    .re-contact-grid {
        grid-template-columns: 1fr;
    }
    .re-form__row {
        grid-template-columns: 1fr;
    }
    .re-pricing-tabs {
        flex-wrap: wrap;
        gap: 4px;
    }
    .re-pricing-tab {
        font-size: 0.8rem;
        padding: 0.5rem 0.9rem;
    }
    .re-cta h2 {
        font-size: var(--re-text-2xl);
    }
    .re-cta p {
        font-size: var(--re-text-sm);
    }
    footer .footer-grid,
    footer > div > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: var(--re-space-4) !important;
    }
    .re-container {
        padding-inline: 1rem;
    }
    .whatsapp-float {
        width: 52px !important;
        height: 52px !important;
        bottom: 16px !important;
        right: 16px !important;
    }
    .re-orbit { display: none; }
    .re-orbit-fallback {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--re-space-2);
    }
    .re-agentic__grid {
        grid-template-columns: 1fr !important;
    }
    .re-agentic__svg-wrap {
        max-width: 340px;
    }
}

/* =========================================================
   29. LIGHT THEME · full support
   ========================================================= */
[data-theme="light"] body.reimagine,
[data-theme="light"] body.reimagine-an {
    background: var(--re-bg-0);
    color: var(--re-ink);
}
[data-theme="light"] .re-header__logo {
    color: var(--re-ink);
}
[data-theme="light"] .re-header__menu a {
    color: var(--re-ink-muted);
}
[data-theme="light"] .re-header__theme,
[data-theme="light"] .lang-switcher__btn,
[data-theme="light"] .re-header__burger {
    background: var(--re-surface);
    border-color: var(--re-border);
    color: var(--re-ink);
}
[data-theme="light"] .re-header__burger span {
    background: var(--re-ink);
}
[data-theme="light"] .re-header__menu {
    background: var(--re-bg-0);
}
[data-theme="light"] .re-hero__mesh {
    opacity: 0.45;
    mix-blend-mode: multiply;
}
[data-theme="light"] .re-bento__cell,
[data-theme="light"] .re-flow,
[data-theme="light"] .re-plan,
[data-theme="light"] .re-uc,
[data-theme="light"] .re-comp,
[data-theme="light"] .re-agent-deep__card,
[data-theme="light"] .re-blog-card,
[data-theme="light"] .re-stat-card,
[data-theme="light"] .re-contact-aside__card,
[data-theme="light"] .re-faq__item {
    background: var(--re-surface);
    border-color: var(--re-border);
}
[data-theme="light"] .re-bento__title,
[data-theme="light"] .re-flow__title,
[data-theme="light"] .re-plan__name,
[data-theme="light"] .re-uc__title,
[data-theme="light"] .re-comp__name,
[data-theme="light"] .re-agent-deep__title,
[data-theme="light"] .re-blog-card__title {
    color: var(--re-ink);
}
[data-theme="light"] .re-bento__desc,
[data-theme="light"] .re-flow__lede,
[data-theme="light"] .re-uc__desc,
[data-theme="light"] .re-agent-deep__desc,
[data-theme="light"] .re-blog-card__lede,
[data-theme="light"] .re-hero__lede,
[data-theme="light"] .re-subhero__lede,
[data-theme="light"] .re-section__sub {
    color: var(--re-ink-muted);
}
[data-theme="light"] footer {
    background: linear-gradient(180deg, var(--re-bg-0), var(--re-bg-1));
}
[data-theme="light"] .re-ag-node__bg {
    fill: var(--re-surface);
}
[data-theme="light"] .re-ag-node__label {
    fill: var(--re-ink);
}
[data-theme="light"] .re-ag-feed {
    background: oklch(98% 0.005 275 / 0.85);
}
[data-theme="light"] .re-cta {
    /* CTA keeps dark bg even in light mode for contrast */
}

/* =========================================================
   30. SR-ONLY (accessibility)
   ========================================================= */
.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;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--re-iris);
    color: white;
    padding: 8px 16px;
    z-index: 200;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    transition: top var(--re-dur-base) ease;
}
.skip-link:focus {
    top: 0;
}

/* =========================================================
   31. OVERFLOW FIX · prevent horizontal scroll on mobile
   ========================================================= */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}
body.reimagine,
body.reimagine-an {
    overflow-x: hidden;
}
.re-hero {
    overflow: hidden;
}
.re-hero__mesh,
.re-hero__grid {
    inset: 0 !important;
}

/* Fixed mobile menu: contained in viewport */
@media (max-width: 960px) {
    .re-header__menu {
        width: 100vw;
        max-width: 100vw;
        right: 0;
        left: auto;
    }
    .re-header__menu:not(.is-mobile-open) {
        visibility: hidden;
        pointer-events: none;
    }
    /* Container paddings on very small screens */
    .re-container {
        padding-left: 16px;
        padding-right: 16px;
    }
    /* SVG agentic responsive */
    .re-agentic__svg-wrap {
        max-width: 100%;
    }
    /* Images should never overflow */
    img, svg, video {
        max-width: 100%;
        height: auto;
    }
    /* Legacy content inside blog */
    .legacy-content img,
    .legacy-content table {
        max-width: 100%;
        height: auto;
    }
    .legacy-content table {
        display: block;
        overflow-x: auto;
    }
}

/* =========================================================
   32. Final mobile menu constraint — prevent phantom scroll
   ========================================================= */
@media (max-width: 960px) {
    .re-header__menu {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: auto !important;
        padding-left: var(--re-space-3);
        padding-right: var(--re-space-3);
        box-sizing: border-box;
    }
    /* When closed: move off-screen but don't cause scroll */
    .re-header__menu:not(.is-mobile-open) {
        transform: translateX(100vw);
    }
}

/* =========================================================
   33. Mobile menu height fix — fullscreen drawer
   ========================================================= */
@media (max-width: 960px) {
    .re-header__menu {
        /* Explicit height: from below header to bottom of viewport */
        height: calc(100vh - 65px) !important;
        max-height: calc(100vh - 65px) !important;
        bottom: 0 !important;
        top: 65px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        overflow-y: auto !important;
        /* Ensure it's flush with right edge when closed */
    }
    .re-header__menu li {
        display: block !important;
        width: 100%;
    }
    .re-header__menu a {
        display: block !important;
        width: 100%;
        padding: 1rem 0.5rem !important;
        font-size: var(--re-text-base) !important;
        color: var(--re-ink) !important;
    }
    [data-theme="light"] .re-header__menu a {
        color: var(--re-ink) !important;
    }
}

/* =========================================================
   24. PARTNERS · Ecosistema AppNet
   ========================================================= */
.re-partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--re-space-3);
}
.re-partner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--re-space-3);
  padding: var(--re-space-4);
  border-radius: var(--re-radius-md);
  background: var(--re-surface);
  border: 1px solid var(--re-border);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  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;
}
.re-partner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    420px circle at 80% 0%,
    oklch(68% 0.21 275 / 0.10),
    transparent 55%
  );
  opacity: 0;
  transition: opacity var(--re-dur-base) ease;
}
.re-partner:hover {
  transform: translateY(-4px);
  border-color: var(--re-border-strong);
  box-shadow: 0 18px 40px -22px oklch(68% 0.21 275 / 0.45);
}
.re-partner:hover::before { opacity: 1; }
.re-partner:focus-visible {
  outline: 2px solid var(--re-iris-bright);
  outline-offset: 4px;
}
.re-partner__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 64px;
  padding: var(--re-space-3) 0;
  border-bottom: 1px solid var(--re-border);
}
.re-partner__logo img {
  max-width: 220px;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Logos suelen venir en negro: en tema oscuro los invertimos para legibilidad. */
  filter: none;
}
[data-theme="dark"] .re-partner__logo img {
  filter: invert(1) brightness(1.1);
}
.re-partner__name {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: var(--re-text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
.re-partner__desc {
  color: var(--re-ink-muted);
  font-size: var(--re-text-sm);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.re-partner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--re-iris-bright);
  margin-top: auto;
}
.re-partner:hover .re-partner__cta {
  color: var(--re-magenta, var(--re-iris-bright));
}

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

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

/* Reveal safety: never leave content invisible if JS fails/blocked. */
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;
}
@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);
  --re-ink-dim: oklch(68% 0.02 275);
}
[data-theme="light"] {
  --re-ink-muted: oklch(38% 0.025 275);
  --re-ink-dim: oklch(46% 0.02 275);
}