/* Montenegro Vantage Systems — Main Stylesheet
   Aesthetic: Vercel / Apple Minimalist Bento Box
   Colors: Bone White (#FAF8F5) & Refined Dark Slate (#0F172A)
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Bone White Palette */
  --bg-bone: #FAF8F5;
  --card-bone: #FFFFFF;
  --border-bone: #E8E4DC;
  --border-bone-hover: rgba(15, 23, 42, 0.22);
  --text-bone-primary: #0F172A;
  --text-bone-muted: #57534E;

  /* Zinc / Apple / Vercel Premium Dark Palette */
  --bg-obsidian: #09090B;
  --card-obsidian: #18181B;
  --border-obsidian: #27272A;
  --border-obsidian-hover: #3F3F46;
  --text-obsidian-primary: #FAFAFA;
  --text-obsidian-muted: #A1A1AA;

  --bg-zinc-950: #09090B;
  --bg-zinc-900: #18181B;
  --border-zinc-800: #27272A;
  --text-zinc-50: #FAFAFA;
  --text-zinc-400: #A1A1AA;

  /* ===================================================
     DISCIPLINE ACCENT TOKENS (F15 / R4)
     =================================================== */
  /* Pilar 1 — Web Engineering & SEO (Cobalto #2563EB & Cyan #38BDF8) */
  --accent-web: #2563EB;
  --accent-web-light: #38BDF8;
  --accent-web-bg: rgba(37, 99, 235, 0.08);
  --accent-web-glow: rgba(37, 99, 235, 0.15);
  --accent-web-border: rgba(37, 99, 235, 0.22);
  --accent-web-text: #1D4ED8;

  /* Pilar 2 — Operative Automations (Emerald #059669 & #34D399) */
  --accent-auto: #059669;
  --accent-auto-light: #34D399;
  --accent-auto-bg: rgba(5, 150, 105, 0.08);
  --accent-auto-glow: rgba(5, 150, 105, 0.15);
  --accent-auto-border: rgba(5, 150, 105, 0.22);
  --accent-auto-text: #047857;

  /* Pilar 3 — BI & Telemetry Dashboards (Indigo #6366F1 & Violet #A78BFA) */
  --accent-data: #6366F1;
  --accent-data-light: #A78BFA;
  --accent-data-bg: rgba(99, 102, 241, 0.08);
  --accent-data-glow: rgba(99, 102, 241, 0.15);
  --accent-data-border: rgba(99, 102, 241, 0.22);
  --accent-data-text: #4F46E5;
}

html {
  font-family: var(--font-sans);
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure no harsh pure white in dark mode */
.dark {
  color-scheme: dark;

  /* Discipline Accent Tokens (Dark Mode: Elevated Luminance for #0C1120) */
  --accent-web: #38BDF8;
  --accent-web-light: #7DD3FC;
  --accent-web-bg: rgba(56, 189, 248, 0.12);
  --accent-web-glow: rgba(56, 189, 248, 0.25);
  --accent-web-border: rgba(56, 189, 248, 0.28);
  --accent-web-text: #38BDF8;

  --accent-auto: #34D399;
  --accent-auto-light: #6EE7B7;
  --accent-auto-bg: rgba(52, 211, 153, 0.12);
  --accent-auto-glow: rgba(52, 211, 153, 0.25);
  --accent-auto-border: rgba(52, 211, 153, 0.28);
  --accent-auto-text: #34D399;

  --accent-data: #A78BFA;
  --accent-data-light: #C4B5FD;
  --accent-data-bg: rgba(167, 139, 250, 0.12);
  --accent-data-glow: rgba(167, 139, 250, 0.25);
  --accent-data-border: rgba(167, 139, 250, 0.28);
  --accent-data-text: #A78BFA;
}

/* ===================================================
   HIGH-CONTRAST FOCUS VISIBLE OUTLINES (WCAG 2.1 SC 2.4.7)
   =================================================== */
:focus-visible {
  outline: 2px solid var(--accent-web, #2563EB);
  outline-offset: 2px;
}

.dark :focus-visible {
  outline: 2px solid var(--accent-web, #38BDF8);
  outline-offset: 2px;
}

.dark .dark\:text-white,
.dark [class*="dark:text-white"] {
  color: #E2E8F0 !important;
}

.dark .dark\:hover\:text-white:hover,
.dark [class*="dark:hover:text-white"]:hover {
  color: #F1F5F9 !important;
}

/* Subtle background grid */
.bg-grid-subtle {
  background-size: 32px 32px;
  background-image: linear-gradient(to right, rgba(148, 163, 184, 0.06) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
}

.dark .bg-grid-subtle {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}

/* Ambient glow */
.radial-glow {
  background: radial-gradient(circle at 50% 0%, rgba(20, 25, 40, 0.035) 0%, transparent 70%);
}

.dark .radial-glow {
  background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.08) 0%, rgba(15, 23, 42, 0.02) 50%, transparent 70%);
}

/* ===================================================
   BENTO CARD BASE: Estabilidad Geométrica & Iluminación Ambiental
   (Sin translateY físico; respuesta táctil de borde e iluminación interna)
   =================================================== */
.bento-card {
  position: relative;
  border-radius: 1.5rem;
  background-color: var(--card-bone);
  border: 1px solid var(--border-bone);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: none !important;
  /* Transición enfocada exclusivamente en borde, sombra y fondo — 0.35s ease-out */
  transition: border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.35s ease;
  transition-delay: 0s;
  box-shadow: 0 4px 20px -2px rgba(28, 25, 23, 0.03);
}

.dark .bento-card {
  background-color: var(--card-obsidian);
  border-color: var(--border-obsidian);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35);
}

/* Hover Modo Claro: Borde nítido slate-900 e iluminación interior blanca translúcida */
.bento-card:hover {
  border-color: rgba(15, 23, 42, 0.22);
  box-shadow: 0 8px 30px -4px rgba(28, 25, 23, 0.08),
              inset 0 0 24px rgba(255, 255, 255, 0.6);
  transform: none !important;
}

/* Hover Modo Oscuro: Borde de cristal y reflejo interno biselado sutil */
.dark .bento-card:hover {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.55),
              inset 0 0 24px rgba(255, 255, 255, 0.025);
  transform: none !important;
}

/* ===================================================
   DISCIPLINE UTILITY CLASSES (F15 / F19)
   =================================================== */

/* Text Utilities */
.text-accent-web { color: var(--accent-web-text); }
.text-accent-auto { color: var(--accent-auto-text); }
.text-accent-data { color: var(--accent-data-text); }
.dark .text-accent-web { color: var(--accent-web); }
.dark .text-accent-auto { color: var(--accent-auto); }
.dark .text-accent-data { color: var(--accent-data); }

/* Background Fill Utilities */
.bg-accent-web-subtle { background-color: var(--accent-web-bg); }
.bg-accent-auto-subtle { background-color: var(--accent-auto-bg); }
.bg-accent-data-subtle { background-color: var(--accent-data-bg); }

/* Border Utilities */
.border-accent-web-subtle { border-color: var(--accent-web-border); }
.border-accent-auto-subtle { border-color: var(--accent-auto-border); }
.border-accent-data-subtle { border-color: var(--accent-data-border); }

/* Ambient Glow & Shadow */
.glow-accent-web { box-shadow: 0 0 20px -2px var(--accent-web-glow); }
.glow-accent-auto { box-shadow: 0 0 20px -2px var(--accent-auto-glow); }
.glow-accent-data { box-shadow: 0 0 20px -2px var(--accent-data-glow); }

/* Discipline Badges */
.badge-discipline-web {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background-color: var(--accent-web-bg);
  border: 1px solid var(--accent-web-border);
  color: var(--accent-web-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1rem;
}
.dark .badge-discipline-web {
  color: var(--accent-web-light);
}

.badge-discipline-auto {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background-color: var(--accent-auto-bg);
  border: 1px solid var(--accent-auto-border);
  color: var(--accent-auto-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1rem;
}
.dark .badge-discipline-auto {
  color: var(--accent-auto-light);
}

.badge-discipline-data {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background-color: var(--accent-data-bg);
  border: 1px solid var(--accent-data-border);
  color: var(--accent-data-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1rem;
}
.dark .badge-discipline-data {
  color: var(--accent-data-light);
}

/* Discipline Icon Containers */
.icon-box-web {
  background-color: var(--accent-web-bg);
  border: 1px solid var(--accent-web-border);
  color: var(--accent-web);
}
.dark .icon-box-web {
  color: var(--accent-web-light);
}

.icon-box-auto {
  background-color: var(--accent-auto-bg);
  border: 1px solid var(--accent-auto-border);
  color: var(--accent-auto);
}
.dark .icon-box-auto {
  color: var(--accent-auto-light);
}

.icon-box-data {
  background-color: var(--accent-data-bg);
  border: 1px solid var(--accent-data-border);
  color: var(--accent-data);
}
.dark .icon-box-data {
  color: var(--accent-data-light);
}

/* Discipline Card Hover Illuminations */
.bento-card-web:hover {
  border-color: var(--accent-web-border) !important;
  box-shadow: 0 10px 30px -4px var(--accent-web-glow),
              inset 0 0 24px rgba(37, 99, 235, 0.03) !important;
  transform: none !important;
}
.dark .bento-card-web:hover {
  border-color: var(--accent-web-border) !important;
  box-shadow: 0 16px 40px -10px var(--accent-web-glow),
              inset 0 0 24px rgba(56, 189, 248, 0.04) !important;
  transform: none !important;
}

.bento-card-auto:hover {
  border-color: var(--accent-auto-border) !important;
  box-shadow: 0 10px 30px -4px var(--accent-auto-glow),
              inset 0 0 24px rgba(5, 150, 105, 0.03) !important;
  transform: none !important;
}
.dark .bento-card-auto:hover {
  border-color: var(--accent-auto-border) !important;
  box-shadow: 0 16px 40px -10px var(--accent-auto-glow),
              inset 0 0 24px rgba(52, 211, 153, 0.04) !important;
  transform: none !important;
}

.bento-card-data:hover {
  border-color: var(--accent-data-border) !important;
  box-shadow: 0 10px 30px -4px var(--accent-data-glow),
              inset 0 0 24px rgba(99, 102, 241, 0.03) !important;
  transform: none !important;
}
.dark .bento-card-data:hover {
  border-color: var(--accent-data-border) !important;
  box-shadow: 0 16px 40px -10px var(--accent-data-glow),
              inset 0 0 24px rgba(167, 139, 250, 0.04) !important;
  transform: none !important;
}

/* ===================================================
   MICRO-MOVIMIENTO INTERNO: Badges, Nodos de Flujo e Iconos
   (La tarjeta permanece quieta mientras el componente interno responde)
   =================================================== */
.bento-card [class*="w-10"][class*="rounded-xl"],
.bento-card [class*="w-12"][class*="rounded-2xl"],
.bento-card .flow-node,
.bento-card .card-icon-badge {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
  transition-delay: 0s;
  will-change: transform;
}

.bento-card:hover [class*="w-10"][class*="rounded-xl"],
.bento-card:hover [class*="w-12"][class*="rounded-2xl"],
.bento-card:hover .flow-node,
.bento-card:hover .card-icon-badge {
  transform: scale(1.05);
}

/* ===================================================
   BODY OVERFLOW CLIPPING (Preserves position: sticky)
   =================================================== */
html,
body {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* ===================================================
   SECTION SCROLL REVEAL ANIMATIONS
   =================================================== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay classes for sibling reveal elements */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* No-JS Fallback for Scroll Reveal (Progressive Enhancement) */
@media (scripting: none) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.no-js .reveal-on-scroll,
html:not(.js) .reveal-on-scroll {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ===================================================
   MICRO-INTERACTION 1: Pilar 1 Instant Assembly
   (Assembles smoothly on hover/focus; resets instantly on exit)
   =================================================== */
.assembly-piece {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease-out;
  transition-delay: 0s;
  will-change: transform, opacity;
}

/* Resting / Disassembled state (exploded isometric schematic view) */
.p1-tile-1 { transform: translate(-18px, -14px) rotate(-8deg); opacity: 0.65; }
.p1-tile-2 { transform: translate(18px, -14px) rotate(8deg); opacity: 0.65; }
.p1-tile-3 { transform: translate(-18px, 14px) rotate(6deg); opacity: 0.65; }
.p1-tile-4 { transform: translate(18px, 14px) rotate(-6deg); opacity: 0.65; }

/* Lightning bolt resting state: 0s delay on exit */
.p1-core-speed {
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s;
}

/* Assembled state on hover, keyboard focus, or activation class */
.group:hover .p1-tile-1,
.group:hover .p1-tile-2,
.group:hover .p1-tile-3,
.group:hover .p1-tile-4,
.group:focus-within .p1-tile-1,
.group:focus-within .p1-tile-2,
.group:focus-within .p1-tile-3,
.group:focus-within .p1-tile-4,
.pilar-assembled .p1-tile-1,
.pilar-assembled .p1-tile-2,
.pilar-assembled .p1-tile-3,
.pilar-assembled .p1-tile-4,
.pilar-assembled-preview .p1-tile-1,
.pilar-assembled-preview .p1-tile-2,
.pilar-assembled-preview .p1-tile-3,
.pilar-assembled-preview .p1-tile-4 {
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
}

/* Staged entrance for lightning bolt: 0.16s entrance delay */
.group:hover .p1-core-speed,
.group:focus-within .p1-core-speed,
.pilar-assembled .p1-core-speed,
.pilar-assembled-preview .p1-core-speed {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.16s;
}

/* Blueprint frame & status transitions for Pilar 1 */
.p1-status-idle { display: block; }
.p1-status-active { display: none; }

.group:hover .p1-status-idle,
.group:focus-within .p1-status-idle,
.pilar-assembled .p1-status-idle,
.pilar-assembled-preview .p1-status-idle {
  display: none !important;
}

.group:hover .p1-status-active,
.group:focus-within .p1-status-active,
.pilar-assembled .p1-status-active,
.pilar-assembled-preview .p1-status-active {
  display: block !important;
}

.group:hover .p1-blueprint-frame,
.group:focus-within .p1-blueprint-frame,
.pilar-assembled .p1-blueprint-frame,
.pilar-assembled-preview .p1-blueprint-frame {
  border-color: rgba(37, 99, 235, 0.35) !important;
  background-color: rgba(37, 99, 235, 0.02) !important;
}

.dark .group:hover .p1-blueprint-frame,
.dark .group:focus-within .p1-blueprint-frame,
.dark .pilar-assembled .p1-blueprint-frame,
.dark .pilar-assembled-preview .p1-blueprint-frame {
  border-color: rgba(56, 189, 248, 0.35) !important;
  background-color: rgba(56, 189, 248, 0.03) !important;
}

.group:hover .p1-metric-tile,
.group:focus-within .p1-metric-tile,
.pilar-assembled .p1-metric-tile,
.pilar-assembled-preview .p1-metric-tile {
  background-color: rgba(37, 99, 235, 0.08) !important;
}

.dark .group:hover .p1-metric-tile,
.dark .group:focus-within .p1-metric-tile,
.dark .pilar-assembled .p1-metric-tile,
.dark .pilar-assembled-preview .p1-metric-tile {
  background-color: rgba(56, 189, 248, 0.1) !important;
}

/* ===================================================
   MICRO-INTERACTION 2: Pilar 2 Merge to Green Check
   (Icons slide into automated green check on hover/focus)
   =================================================== */
.merge-source-left,
.merge-source-right {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease-out;
  transition-delay: 0s;
  will-change: transform, opacity;
}

.merge-dots {
  transition: opacity 0.25s ease-out;
  transition-delay: 0s;
}

.merge-result-check {
  opacity: 0;
  transform: scale(0.65);
  pointer-events: none;
  /* Instantaneous clean exit: strictly 0s exit delay */
  transition: opacity 0.18s ease-out, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s;
  will-change: transform, opacity;
}

/* Hover / Focus-Within / Active Entrance: Smooth Inward Merge */
.group:hover .merge-source-left,
.group:focus-within .merge-source-left,
.pilar-synced .merge-source-left,
.pilar-synced-preview .merge-source-left {
  transform: translateX(36px) scale(0.65);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease-out;
}

.group:hover .merge-source-right,
.group:focus-within .merge-source-right,
.pilar-synced .merge-source-right,
.pilar-synced-preview .merge-source-right {
  transform: translateX(-36px) scale(0.65);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease-out;
}

.group:hover .merge-dots,
.group:focus-within .merge-dots,
.pilar-synced .merge-dots,
.pilar-synced-preview .merge-dots {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.group:hover .merge-result-check,
.group:focus-within .merge-result-check,
.pilar-synced .merge-result-check,
.pilar-synced-preview .merge-result-check {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.28s ease-out 0.16s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.16s;
}

/* Micro-pulse bounce on the checkmark icon */
@keyframes check-pulse {
  0% { transform: scale(0.82); }
  50% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.group:hover .merge-result-check i,
.group:focus-within .merge-result-check i,
.pilar-synced .merge-result-check i,
.pilar-synced-preview .merge-result-check i {
  animation: check-pulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s both;
}

/* Status & metrics transitions for Pilar 2 */
.p2-status-idle { display: block; }
.p2-status-active { display: none; }

.group:hover .p2-status-idle,
.group:focus-within .p2-status-idle,
.pilar-synced .p2-status-idle,
.pilar-synced-preview .p2-status-idle {
  display: none !important;
}

.group:hover .p2-status-active,
.group:focus-within .p2-status-active,
.pilar-synced .p2-status-active,
.pilar-synced-preview .p2-status-active {
  display: block !important;
}

.group:hover .p2-metric-tile,
.group:focus-within .p2-metric-tile,
.pilar-synced .p2-metric-tile,
.pilar-synced-preview .p2-metric-tile {
  background-color: rgba(16, 185, 129, 0.08) !important;
}

.dark .group:hover .p2-metric-tile,
.dark .group:focus-within .p2-metric-tile,
.dark .pilar-synced .p2-metric-tile,
.dark .pilar-synced-preview .p2-metric-tile {
  background-color: rgba(52, 211, 153, 0.1) !important;
}

/* ===================================================
   MICRO-INTERACTION 3: Pilar 3 Live Dynamic Telemetry
   (Responsive modulation on hover, clean baseline reset on leave)
   =================================================== */
.chart-bar-fill {
  transform-origin: bottom;
  transform: scaleY(0.2);
  /* Baseline resting transition: strictly 0s exit delay for instantaneous smooth return */
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease, box-shadow 0.3s ease;
  transition-delay: 0s;
  will-change: transform, filter, box-shadow;
}

/* Dynamic Telemetry Modulation on Hover / Focus / Active */
.group:hover .chart-bar-fill,
.group:focus-within .chart-bar-fill,
.is-interactive-active .chart-bar-fill,
.bar-animated.chart-bar-fill {
  transform: scaleY(1);
  filter: brightness(1.08);
}

.group:hover .bar-d-1,
.group:focus-within .bar-d-1,
.is-interactive-active .bar-d-1,
.bar-d-1.bar-animated {
  transition-delay: 0.03s;
}

.group:hover .bar-d-2,
.group:focus-within .bar-d-2,
.is-interactive-active .bar-d-2,
.bar-d-2.bar-animated {
  transition-delay: 0.07s;
}

.group:hover .bar-d-3,
.group:focus-within .bar-d-3,
.is-interactive-active .bar-d-3,
.bar-d-3.bar-animated {
  transition-delay: 0.11s;
}

.group:hover .bar-d-4,
.group:focus-within .bar-d-4,
.is-interactive-active .bar-d-4,
.bar-d-4.bar-animated {
  transition-delay: 0.15s;
}

.group:hover .bar-d-5,
.group:focus-within .bar-d-5,
.is-interactive-active .bar-d-5,
.bar-d-5.bar-animated {
  transition-delay: 0.19s;
  filter: brightness(1.15);
  box-shadow: 0 0 18px rgba(99, 102, 241, 0.55),
              0 0 4px rgba(167, 139, 250, 0.8);
}

.dark .group:hover .bar-d-5,
.dark .group:focus-within .bar-d-5,
.dark .is-interactive-active .bar-d-5,
.dark .bar-d-5.bar-animated {
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.6),
              0 0 6px rgba(196, 181, 253, 0.9);
}

/* Ambient container glow on hover */
.group:hover .bento-chart-container,
.group:focus-within .bento-chart-container,
.is-interactive-active.bento-chart-container {
  border-color: rgba(99, 102, 241, 0.25);
  box-shadow: inset 0 0 24px rgba(99, 102, 241, 0.03);
}

.dark .group:hover .bento-chart-container,
.dark .group:focus-within .bento-chart-container,
.dark .is-interactive-active.bento-chart-container {
  border-color: rgba(167, 139, 250, 0.25);
  box-shadow: inset 0 0 24px rgba(167, 139, 250, 0.04);
}

/* Telemetry Status Badge & Pulse */
.telemetry-status-badge {
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.3s ease,
              box-shadow 0.3s ease;
  transition-delay: 0s;
}

.group:hover .telemetry-status-badge,
.group:focus-within .telemetry-status-badge,
.is-interactive-active .telemetry-status-badge {
  border-color: rgba(16, 185, 129, 0.4);
  background-color: rgba(16, 185, 129, 0.08);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.15);
}

.dark .group:hover .telemetry-status-badge,
.dark .group:focus-within .telemetry-status-badge,
.dark .is-interactive-active .telemetry-status-badge {
  border-color: rgba(52, 211, 153, 0.4);
  background-color: rgba(5, 150, 105, 0.15);
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.2);
}

.group:hover .telemetry-dot,
.group:focus-within .telemetry-dot,
.is-interactive-active .telemetry-dot {
  background-color: #10B981 !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
}

.dark .group:hover .telemetry-dot,
.dark .group:focus-within .telemetry-dot,
.dark .is-interactive-active .telemetry-dot {
  background-color: #34D399 !important;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.9);
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.group:hover .telemetry-ping,
.group:focus-within .telemetry-ping,
.is-interactive-active .telemetry-ping {
  opacity: 0.75;
  animation: ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.group:hover .telemetry-label-idle,
.group:focus-within .telemetry-label-idle,
.is-interactive-active .telemetry-label-idle {
  opacity: 0;
}

.group:hover .telemetry-label-live,
.group:focus-within .telemetry-label-live,
.is-interactive-active .telemetry-label-live {
  opacity: 1;
}

/* Reduced Motion Support (WCAG 2.2 Criterion 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  .assembly-piece,
  .p1-core-speed,
  .merge-source-left,
  .merge-source-right,
  .merge-result-check,
  .chart-bar-fill,
  .telemetry-status-badge,
  .telemetry-ping {
    transition: opacity 0.2s ease !important;
    animation: none !important;
    transform: none !important;
  }
  .group:hover .merge-result-check,
  .group:focus-within .merge-result-check,
  .pilar-synced .merge-result-check {
    opacity: 1 !important;
  }
}

/* ===================================================
   STICKY HERO & CURTAIN SCROLL STYLES
   - Mobile & Tablet (< 1024px): Standard natural document flow (relative, top: 0, z-index: 1).
     Ensures the hero never stays stuck behind the screen on mobile devices when scrolling down.
   - Desktop (>= 1024px & height >= 600px): Elegant sticky curtain presentation effect.
   =================================================== */
.hero-sticky-section {
  position: relative !important;
  top: 0 !important;
  z-index: 1 !important;
  background-color: var(--bg-bone);
}

.dark .hero-sticky-section {
  background-color: var(--bg-obsidian);
}

@media (min-width: 1024px) and (min-height: 600px) {
  .hero-sticky-section {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 4rem !important;
    z-index: 10 !important;
    will-change: transform, opacity;
  }
}

.pilares-layer {
  position: relative;
  z-index: 20;
  background-color: var(--bg-bone);
  box-shadow: 0 -20px 40px -10px rgba(0, 0, 0, 0.06);
}

.dark .pilares-layer {
  background-color: var(--bg-obsidian);
  box-shadow: 0 -25px 50px -10px rgba(0, 0, 0, 0.5);
}

/* ===================================================
   MINIMALIST HERO SCROLL ANIMATION
   =================================================== */
@keyframes scroll-pill {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  60% {
    transform: translateY(10px);
    opacity: 0.8;
  }
  100% {
    transform: translateY(14px);
    opacity: 0;
  }
}

.animate-scroll-pill {
  animation: scroll-pill 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-bone);
}
.dark ::-webkit-scrollbar-track {
  background: var(--bg-obsidian);
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}
/* Hero entrance animation */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-badge {
  animation: hero-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.hero-h1 {
  animation: hero-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}
.hero-subtitle {
  animation: hero-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both;
}
.hero-buttons {
  animation: hero-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}
.hero-scroll {
  animation: hero-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
}

/* Micro-animation will-change resets */
.pilar-assembled .assembly-piece,
.pilar-synced .merge-source-left,
.pilar-synced .merge-source-right {
  will-change: auto;
}


@keyframes growRight {
  from { width: 0%; }
}
/* Primary button hover */
a.bg-slate-900:hover, button.bg-slate-900:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px rgba(15, 23, 42, 0.3);
}
.dark a.bg-slate-100:hover, .dark button.bg-slate-100:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px rgba(241, 245, 249, 0.3);
}

/* ===================================================
   PREMIUM ZINC / APPLE / VERCEL COMPONENT STYLES
   =================================================== */

/* --- PILAR 1: Result-Oriented Web & SEO Visuals --- */
.gauge-score-value {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  transition-delay: 0s;
}

.maps-pin-pulse {
  animation: radar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes radar-ping {
  75%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.device-viewport-frame {
  transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s ease;
  will-change: max-width;
}

.device-viewport-frame[data-active-view="desktop"] {
  max-width: 100%;
}

.device-viewport-frame[data-active-view="tablet"] {
  max-width: 78%;
}

.device-viewport-frame[data-active-view="mobile"] {
  max-width: 52%;
}

/* --- PILAR 2: Enterprise Automation Center (6-Node Flow) --- */
.workflow-step-node {
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
  transition-delay: 0s;
}

.workflow-connector-line {
  position: relative;
  overflow: hidden;
}

.workflow-connector-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.9), transparent);
  transform: translateX(-100%);
  animation: flow-beam 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes flow-beam {
  0% { transform: translateX(-100%); }
  50%, 100% { transform: translateX(100%); }
}

.group:hover .workflow-step-node,
.pilar-synced .workflow-step-node,
.pilar-synced-preview .workflow-step-node {
  border-color: rgba(16, 185, 129, 0.35);
}

.dark .group:hover .workflow-step-node,
.dark .pilar-synced .workflow-step-node,
.dark .pilar-synced-preview .workflow-step-node {
  border-color: rgba(52, 211, 153, 0.35);
}

/* --- PILAR 3: Executive SaaS Dashboard --- */
.saas-chart-bar {
  transform-origin: bottom;
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s ease;
}

.saas-filter-tab {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.saas-filter-tab.active {
  background-color: #18181B;
  color: #FAFAFA;
  border-color: #27272A;
}

.dark .saas-filter-tab.active {
  background-color: #27272A;
  color: #FAFAFA;
  border-color: #3F3F46;
}

/* --- Process 3-Phase Timeline Connecting Line --- */
.process-timeline-track {
  background: linear-gradient(to right, rgba(161, 161, 170, 0.25), rgba(161, 161, 170, 0.4), rgba(161, 161, 170, 0.25));
}
.dark .process-timeline-track {
  background: linear-gradient(to right, rgba(39, 39, 42, 0.6), rgba(63, 63, 70, 0.9), rgba(39, 39, 42, 0.6));
}