/* ==========================================================================
   JAVORION V3 — CINEMATIC SCROLL EXPERIENCE STYLESHEET
   Brand: Obsidian (#090B0D), Copper Ember (#C8794A), Deep Teal (#2FA89A), Sofia Ice Blue (#63A7FF)
   ========================================================================== */

:root {
  --jv-canvas: #090B0D;
  --jv-sidebar: #0D1115;
  --jv-surface-1: #141A20;
  --jv-surface-2: #192127;
  --jv-surface-3: #202A31;
  --jv-surface-elevated: rgba(25, 33, 39, 0.7);

  --jv-border: rgba(255, 255, 255, 0.08);
  --jv-border-subtle: rgba(255, 255, 255, 0.04);
  --jv-border-hover: rgba(255, 255, 255, 0.18);
  --jv-border-copper: rgba(200, 121, 74, 0.35);
  --jv-border-copper-strong: rgba(200, 121, 74, 0.6);

  --jv-brand: #C8794A;
  --jv-brand-hover: #D68B5E;
  --jv-brand-glow: rgba(200, 121, 74, 0.16);
  --jv-brand-glow-lg: rgba(200, 121, 74, 0.28);

  --jv-teal: #2FA89A;
  --jv-teal-glow: rgba(47, 168, 154, 0.14);

  --jv-ice: #63A7FF;
  --jv-ice-glow: rgba(99, 167, 255, 0.18);

  --jv-text: #F5F7F8;
  --jv-text-secondary: #B9C1C7;
  --jv-text-muted: #7E8B94;
  --jv-text-faint: rgba(255, 255, 255, 0.25);

  --jv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --jv-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --jv-max-w: 1320px;
  --jv-radius-sm: 6px;
  --jv-radius-md: 12px;
  --jv-radius-lg: 20px;
  --jv-radius-xl: 32px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  background-color: var(--jv-canvas);
  overflow-x: clip;
}

body {
  background-color: var(--jv-canvas);
  color: var(--jv-text);
  font-family: var(--jv-font);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  position: relative;
}

/* Subtle background ambient mesh */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  background: 
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(200, 121, 74, 0.08), transparent 70%),
    radial-gradient(ellipse 60% 40% at 85% 60%, rgba(99, 167, 255, 0.04), transparent 60%);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container-cinematic {
  width: 100%;
  max-width: var(--jv-max-w);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2;
}

.container-wide {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

/* -------------------------------------------------------------------------- */
/* Scroll Progress Bar & Navigation */
/* -------------------------------------------------------------------------- */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #C8794A 0%, #2FA89A 100%);
  z-index: 1200;
  width: 0%;
  pointer-events: none;
  transition: width 0.05s ease-out;
}

/* Executive Enterprise Navigation Bar */
.nav-cinematic {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 74px;
  z-index: 1100;
  display: flex;
  align-items: center;
  background: rgba(9, 11, 13, 0.15);
  border-bottom: 1px solid transparent;
  transition: height 220ms ease, background 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.nav-cinematic.scrolled {
  height: 62px;
  background: rgba(9, 11, 13, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

.nav-cinematic .container-cinematic {
  max-width: 1420px;
  padding: 0 28px;
}

.nav-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

/* Brand Logo */
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  justify-self: start;
  user-select: none;
  white-space: nowrap;
}

.nav-logo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jv-brand);
  box-shadow: 0 0 10px var(--jv-brand);
  flex-shrink: 0;
}

.nav-logo-text-group {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nav-logo-brand {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--jv-text);
  white-space: nowrap;
}

.nav-logo-sub {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--jv-text-muted);
  opacity: 0.8;
  margin-top: 1px;
  white-space: nowrap;
}

/* Center Navigation Links */
.nav-desktop-menu {
  justify-self: center;
}

.nav-menu-list {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item a {
  position: relative;
  font-size: 14.5px;
  font-weight: 550;
  color: rgba(245, 247, 248, 0.72);
  white-space: nowrap;
  padding: 6px 0;
  text-decoration: none;
  transition: color 0.18s ease;
  display: inline-flex;
  align-items: center;
}

.nav-item a:hover {
  color: #F5F7F8;
}

.nav-item a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #C8794A, #2FA89A);
  border-radius: 2px;
  transition: width 0.2s ease, left 0.2s ease, opacity 0.2s ease;
  opacity: 0;
}

.nav-item a:hover::after,
.nav-item.active a::after {
  width: 100%;
  left: 0;
  opacity: 1;
}

/* Right Navigation Action Items */
.nav-actions-group {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}

.nav-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px;
  padding: 0 10px;
  min-width: 58px;
  font-size: 13px;
  font-weight: 550;
  color: var(--jv-text-secondary);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.nav-lang-btn:hover {
  color: #F5F7F8;
  border-color: rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.03);
}

.nav-login-btn {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 550;
  color: var(--jv-text-secondary);
  background: transparent;
  border: none;
  padding: 8px 12px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.18s ease;
}

.nav-login-btn:hover {
  color: #F5F7F8;
}

.nav-demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--jv-teal);
  background: rgba(47, 168, 154, 0.08);
  border: 1px solid rgba(47, 168, 154, 0.35);
  border-radius: 10px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.nav-demo-btn:hover {
  background: rgba(47, 168, 154, 0.18);
  border-color: var(--jv-teal);
  color: #FFFFFF;
  box-shadow: 0 0 16px rgba(47, 168, 154, 0.22);
}

.nav-primary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  font-size: 14.5px;
  font-weight: 650;
  color: #FFFFFF;
  background: var(--jv-brand);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 11px;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 2px 14px var(--jv-brand-glow);
  transition: background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.nav-primary-cta:hover {
  background: var(--jv-brand-hover);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 20px var(--jv-brand-glow-lg);
  color: #FFFFFF;
}

/* Mobile Trigger (Hidden on Desktop) */
.nav-mobile-btn {
  display: none !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: var(--jv-text);
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.nav-mobile-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.20);
}

.nav-mobile-btn svg {
  width: 22px;
  height: 22px;
  stroke: var(--jv-text);
}

/* Mobile Drawer */
.nav-mobile-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: rgba(9, 11, 13, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  max-height: calc(100vh - 74px);
  overflow-y: auto;
}

.nav-mobile-drawer.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.drawer-inner {
  padding: 24px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 500px;
  margin: 0 auto;
}

.drawer-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.drawer-link {
  display: block;
  padding: 13px 8px;
  font-size: 17px;
  font-weight: 550;
  color: var(--jv-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  text-decoration: none;
  transition: color 0.15s ease, padding-left 0.15s ease;
}

.drawer-link:hover {
  color: var(--jv-brand);
  padding-left: 12px;
}

.drawer-separator {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 8px 0 12px;
}

.drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drawer-demo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--jv-teal);
  background: rgba(47, 168, 154, 0.10);
  border: 1px solid rgba(47, 168, 154, 0.40);
  text-decoration: none;
}

.drawer-primary-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 10px;
  font-size: 15.5px;
  font-weight: 650;
  color: #FFFFFF;
  background: var(--jv-brand);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 16px var(--jv-brand-glow);
  text-decoration: none;
}

.drawer-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  font-size: 14.5px;
  font-weight: 550;
  color: var(--jv-text-secondary);
  text-decoration: none;
  background: transparent;
}

/* Responsive Tightening (1024px - 1240px) */
@media (max-width: 1240px) and (min-width: 961px) {
  .nav-grid {
    grid-template-columns: auto 1fr auto;
  }
  .nav-menu-list {
    gap: 16px;
  }
  .nav-item a {
    font-size: 13.5px;
  }
  .nav-actions-group {
    gap: 6px;
  }
  .nav-lang-btn {
    min-width: 48px;
    padding: 0 6px;
    font-size: 12px;
    height: 34px;
  }
  .nav-login-btn {
    font-size: 13px;
    padding: 4px 6px;
  }
  .nav-demo-btn {
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
  }
  .nav-primary-cta {
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
  }
}

/* Responsive Mobile Navigation Trigger (<= 960px) */
@media (max-width: 960px) {
  .nav-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav-desktop-menu {
    display: none !important;
  }

  .nav-login-btn,
  .nav-demo-btn,
  .nav-primary-cta {
    display: none !important;
  }

  .nav-mobile-btn {
    display: inline-flex !important;
  }

  .nav-actions-group {
    gap: 8px;
  }
}

.btn-cinematic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--jv-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

/* Color Semantics from Official Reference */
.text-copper {
  color: var(--jv-brand) !important;
}

.text-teal {
  color: var(--jv-teal) !important;
}

.text-ice {
  color: var(--jv-ice) !important;
}

/* Reference Button Styles */
.btn-ref-primary {
  background: var(--jv-brand);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 15.5px;
  padding: 13px 26px;
  border-radius: 8px;
  border: 1px solid transparent;
  box-shadow: 0 4px 20px var(--jv-brand-glow);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
}

.btn-ref-primary:hover {
  background: var(--jv-brand-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--jv-brand-glow-lg);
  color: #FFFFFF;
}

.btn-ref-secondary {
  background: rgba(20, 26, 32, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--jv-text);
  font-weight: 600;
  font-size: 15.5px;
  padding: 13px 24px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
}

.btn-ref-secondary:hover {
  background: var(--jv-surface-3);
  border-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.btn-ref-demo-nav {
  background: rgba(47, 168, 154, 0.08);
  border: 1px solid rgba(47, 168, 154, 0.4);
  color: var(--jv-teal);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-ref-demo-nav:hover {
  background: rgba(47, 168, 154, 0.18);
  border-color: var(--jv-teal);
  color: #FFFFFF;
  box-shadow: 0 0 14px var(--jv-teal-glow);
}

/* -------------------------------------------------------------------------- */
/* SCENE 01 — REFERENCE-LOCKED HERO SPLIT COMPOSITION                        */
/* -------------------------------------------------------------------------- */
.scene-hero-ref {
  min-height: 100svh;
  padding-top: 120px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.scene-hero-ref .container-cinematic {
  max-width: 1420px;
  padding: 0 24px;
}

.hero-reference-split {
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: 36px;
  align-items: center;
  width: 100%;
}

.hero-left-col {
  display: flex;
  flex-direction: column;
  z-index: 5;
}

.hero-eyebrow-ref {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jv-text-muted);
  margin-bottom: 20px;
}

.hero-eyebrow-ref .dot-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--jv-border-strong);
}

.hero-headline-ref {
  font-size: clamp(44px, 4.4vw, 76px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: #FFFFFF;
  margin-bottom: 24px;
}

.hero-supporting-ref {
  font-size: clamp(16.5px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--jv-text-secondary);
  margin-bottom: 34px;
  max-width: 530px;
}

.hero-supporting-ref strong {
  color: var(--jv-text);
  font-weight: 600;
}

.hero-actions-ref {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-trust-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--jv-text-secondary);
}

.trust-check-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--jv-teal);
  color: var(--jv-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 0 8px var(--jv-teal-glow);
}

/* -------------------------------------------------------------------------- */
/* HERO RIGHT — REAL JAVORION CRM PRODUCT STAGE                              */
/* -------------------------------------------------------------------------- */
.hero-stage-ref {
  position: relative;
  width: 100%;
  padding-right: 0;
}

/* Handwritten Script Annotation & Curved Arrow */
.hero-script-annotation {
  position: absolute;
  top: -46px;
  right: 25px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

.script-text {
  font-family: 'Caveat', 'Segoe Script', 'Brush Script MT', cursive, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--jv-text-secondary);
  line-height: 1.15;
  text-align: right;
  opacity: 0.85;
}

.script-arrow-svg {
  width: 44px;
  height: 38px;
  margin-top: 2px;
  margin-right: 14px;
}

/* REAL JAVORION CRM APPLICATION FRAME */
.crm-stage-container {
  background: #0D1115;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 
    0 32px 90px rgba(0, 0, 0, 0.92),
    0 0 70px rgba(200, 121, 74, 0.12);
  position: relative;
  width: 100%;
}

.crm-image-viewport {
  position: relative;
  width: 100%;
  background: #090B0D;
  overflow: hidden;
}

.crm-hero-img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  border-radius: 0 0 18px 18px;
}

/* App Window Header Bar */
.crm-frame-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: #10151A;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.crm-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.crm-mac-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mac-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  opacity: 0.85;
}

.mac-dot.red { background: #FF5F56; }
.mac-dot.yellow { background: #FFBD2E; }
.mac-dot.green { background: #27C93F; }

.crm-url-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 26, 32, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 4px 12px;
  font-family: var(--jv-font-mono);
  font-size: 11.5px;
  color: var(--jv-text-muted);
}

.crm-sofia-status-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Floating Glass Overlay Cards on Hero Stage */
.hero-floating-glass-card {
  position: absolute;
  background: rgba(13, 17, 21, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(99, 167, 255, 0.12);
  z-index: 25;
  transition: transform 0.3s ease, border-color 0.3s ease;
  user-select: none;
}

.hero-floating-glass-card:hover {
  transform: translateY(-3px);
  border-color: rgba(99, 167, 255, 0.5);
}

.hero-glass-sofia {
  bottom: 20px;
  right: 18px;
  max-width: 360px;
  padding: 12px 16px;
  border-color: rgba(99, 167, 255, 0.35);
}

.glass-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.glass-badge-sofia {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--jv-ice);
}

.glass-live-pill {
  font-family: var(--jv-font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(39, 201, 63, 0.15);
  border: 1px solid rgba(39, 201, 63, 0.4);
  color: #27C93F;
}

.glass-card-quote {
  font-size: 12px;
  line-height: 1.45;
  color: var(--jv-text);
  margin-bottom: 8px;
}

.glass-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--jv-text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 6px;
}

.hero-glass-revenue {
  top: 55px;
  left: -20px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-color: rgba(200, 121, 74, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(200, 121, 74, 0.12);
}

.glass-rev-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(200, 121, 74, 0.16);
  border: 1px solid rgba(200, 121, 74, 0.4);
  color: var(--jv-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.glass-rev-text {
  display: flex;
  flex-direction: column;
}

.glass-rev-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--jv-text-muted);
}

.glass-rev-amount {
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

.glass-roi-badge {
  font-family: var(--jv-font-mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--jv-brand);
  background: rgba(200, 121, 74, 0.12);
  border: 1px solid rgba(200, 121, 74, 0.3);
  padding: 3px 8px;
  border-radius: 999px;
}

/* Feature Highlights Row below Stage */
.hero-stage-badges-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
  width: 100%;
}

.side-badge-card {
  background: rgba(13, 17, 21, 0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.side-badge-card:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 168, 154, 0.4);
}

.side-badge-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(47, 168, 154, 0.14);
  border: 1px solid rgba(47, 168, 154, 0.35);
  color: var(--jv-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.side-badge-info h5 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--jv-text);
  line-height: 1.25;
}

.side-badge-info p {
  font-size: 11.5px;
  color: var(--jv-text-muted);
}

.crm-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.crm-header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #FFFFFF;
}

.crm-header-brand-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jv-brand);
  box-shadow: 0 0 8px var(--jv-brand);
}

.crm-header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 26, 32, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--jv-text-muted);
}

.crm-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crm-sofia-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--jv-ice);
  background: rgba(99, 167, 255, 0.1);
  border: 1px solid rgba(99, 167, 255, 0.28);
  padding: 3px 10px;
  border-radius: 999px;
}

.crm-sofia-status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jv-ice);
  box-shadow: 0 0 8px var(--jv-ice);
}

.crm-avatar-pill {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--jv-surface-3);
  color: var(--jv-text);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--jv-border);
}

/* App Window Main Body Split */
.crm-frame-body {
  display: grid;
  grid-template-columns: 148px 1fr;
  min-height: 490px;
  background: #090B0D;
  position: relative;
}

/* Mini Left Sidebar */
.crm-mini-sidebar {
  background: #0D1115;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.crm-mini-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.crm-nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 500;
  color: var(--jv-text-muted);
  padding: 7px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.crm-nav-link:hover {
  color: var(--jv-text);
  background: rgba(255, 255, 255, 0.03);
}

.crm-nav-link.active {
  background: rgba(200, 121, 74, 0.14);
  color: #FFFFFF;
  font-weight: 700;
  border-left: 2.5px solid var(--jv-brand);
}

.crm-sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 10px;
}

.crm-company-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--jv-text-secondary);
}

.crm-company-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--jv-teal);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Kanban Board View */
.crm-kanban-area {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  position: relative;
}

.crm-kanban-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.crm-pipeline-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.crm-pipeline-title-group h3 {
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
}

.crm-stage-filter-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.crm-filter-tab {
  font-size: 12px;
  font-weight: 600;
  color: var(--jv-text-muted);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.crm-filter-tab.active {
  background: var(--jv-surface-2);
  color: var(--jv-text);
  border-color: rgba(255, 255, 255, 0.14);
}

.crm-btn-add-opp {
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--jv-brand);
  border: none;
  padding: 5px 12px;
  border-radius: 5px;
  cursor: pointer;
}

/* 4 Kanban Columns matching Reference */
.crm-kanban-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: flex-start;
}

.crm-col {
  background: #11161B;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.crm-col-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.crm-col-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--jv-text-secondary);
}

.crm-col-count {
  font-size: 12px;
  color: var(--jv-text-muted);
  margin-left: 4px;
}

.crm-col-subtotal {
  font-size: 12px;
  font-weight: 800;
  color: var(--jv-text);
  font-family: var(--jv-font-mono);
}

.crm-deal-card {
  background: #151C22;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, border-color 0.15s ease;
  cursor: default;
}

.crm-deal-card:hover {
  transform: translateY(-1px);
  border-color: rgba(200, 121, 74, 0.4);
}

.crm-deal-title {
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.25;
}

.crm-deal-company {
  font-size: 12px;
  color: var(--jv-text-muted);
}

.crm-deal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.crm-deal-value {
  font-size: 12px;
  font-weight: 800;
  color: var(--jv-text);
  font-family: var(--jv-font-mono);
}

.crm-deal-tag {
  font-size: 12px;
  font-weight: 700;
  padding: 1.5px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}

.tag-nuevo {
  background: rgba(200, 121, 74, 0.15);
  color: var(--jv-brand);
  border: 1px solid rgba(200, 121, 74, 0.3);
}

.tag-seguimiento {
  background: rgba(226, 169, 77, 0.15);
  color: #E2A94D;
  border: 1px solid rgba(226, 169, 77, 0.3);
}

.tag-cita {
  background: rgba(47, 168, 154, 0.15);
  color: var(--jv-teal);
  border: 1px solid rgba(47, 168, 154, 0.3);
}

.tag-propuesta {
  background: rgba(99, 167, 255, 0.15);
  color: var(--jv-ice);
  border: 1px solid rgba(99, 167, 255, 0.3);
}

/* 2 FLOATING CONTEXTUAL OVERLAY PANELS ON THE DASHBOARD */
.floating-sofia-banner {
  position: absolute;
  bottom: 22px;
  left: 172px;
  z-index: 25;
  background: rgba(13, 17, 21, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(99, 167, 255, 0.38);
  border-radius: 999px;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.85),
    0 0 26px rgba(99, 167, 255, 0.22);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-sofia-banner:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 20px 48px rgba(0, 0, 0, 0.9),
    0 0 32px rgba(99, 167, 255, 0.35);
}

.pulse-sofia-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #63A7FF;
  box-shadow: 0 0 12px #63A7FF;
  animation: pulseIce 2s infinite;
}

@keyframes pulseIce {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(99, 167, 255, 0.7); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(99, 167, 255, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(99, 167, 255, 0); }
}

.floating-sofia-text {
  display: flex;
  flex-direction: column;
}

.floating-sofia-text strong {
  font-size: 12.5px;
  color: #FFFFFF;
  font-weight: 700;
}

.floating-sofia-text span {
  font-size: 12px;
  color: var(--jv-text-secondary);
}

.floating-action-banner {
  position: absolute;
  bottom: 22px;
  right: 24px;
  z-index: 25;
  background: rgba(13, 17, 21, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(47, 168, 154, 0.38);
  border-radius: 12px;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.85),
    0 0 24px rgba(47, 168, 154, 0.18);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.floating-action-banner:hover {
  transform: translateY(-2px);
  border-color: var(--jv-teal);
}

.action-banner-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--jv-teal);
  text-transform: uppercase;
}

.action-banner-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #FFFFFF;
}

.action-banner-meta {
  font-size: 12px;
  color: var(--jv-text-muted);
}

/* -------------------------------------------------------------------------- */
/* COMMERCIAL PROOF STRIP (REFERENCE MATCH)                                   */
/* -------------------------------------------------------------------------- */
.proof-strip-section {
  background: #080A0C;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 28px 0;
  margin-top: 40px;
  position: relative;
  z-index: 5;
}

.proof-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 32px;
  align-items: center;
}

.proof-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.proof-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 26, 32, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--jv-teal);
  flex-shrink: 0;
}

.proof-icon-box.copper-icon {
  color: var(--jv-brand);
}

.proof-text-col {
  display: flex;
  flex-direction: column;
}

.proof-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jv-teal);
  margin-bottom: 3px;
}

.proof-desc {
  font-size: 13.5px;
  color: var(--jv-text-secondary);
  line-height: 1.4;
}

.proof-watermark {
  text-align: right;
  font-family: var(--jv-font);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jv-text-muted);
  opacity: 0.4;
}

/* -------------------------------------------------------------------------- */
/* SCENE 02 — PROBLEM SECTION (REFERENCE MATCH WITH GLOWING TERRAIN PATH)     */
/* -------------------------------------------------------------------------- */
/* ==========================================================================
   SCENE 02 — THE BUSINESS PROBLEM (CINEMATIC PANORAMIC LANDSCAPE STAGE)
   ========================================================================== */
.problem-reference-section.problem-panoramic-stage {
  position: relative;
  background-color: #07090B;
  padding: 72px 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  min-height: auto;
}

/* Panoramic Mountain Terrain Background Wrapper (Scroll Parallax Layer) */
.problem-panoramic-parallax-wrap {
  position: absolute;
  top: -6%;
  left: 0;
  width: 100%;
  height: 112%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

/* Panoramic Mountain Terrain Background Layer (Living Video Motion) */
.problem-panoramic-bg {
  position: absolute;
  bottom: 0;
  left: -2%;
  width: 104%;
  height: 100%;
  background-image: url('/images/camino-sin-javorion.jpg');
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  opacity: 0.96;
  z-index: 1;
  will-change: transform;
  transform-origin: center 65%;
  animation: cinematicTerrainDrift 24s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes cinematicTerrainDrift {
  0% {
    transform: scale(1.00) translate3d(0, 0, 0);
  }
  33% {
    transform: scale(1.025) translate3d(-0.8%, -4px, 0);
  }
  66% {
    transform: scale(1.04) translate3d(0.5%, -8px, 0);
  }
  100% {
    transform: scale(1.015) translate3d(0.8%, -2px, 0);
  }
}

/* Living Energy Sheen over the Laser Path */
.problem-energy-sheen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(ellipse 40% 15% at 50% 62%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 120, 50, 0.8) 25%, transparent 65%),
    radial-gradient(ellipse 75% 40% at 50% 62%, rgba(200, 100, 50, 0.5), transparent 70%),
    radial-gradient(ellipse 45% 30% at 36% 54%, rgba(47, 220, 200, 0.4), transparent 60%);
  pointer-events: none;
  mix-blend-mode: color-dodge;
  z-index: 2;
  will-change: opacity, transform;
  animation: energyTrailSweep 7s ease-in-out infinite alternate;
}

@keyframes energyTrailSweep {
  0% {
    opacity: 0.35;
    transform: scale(0.97) translateY(2px);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.03) translateY(-4px);
  }
  100% {
    opacity: 0.45;
    transform: scale(0.99) translateY(0px);
  }
}

/* Cinematic Atmospheric Vignette Scrim */
.problem-panoramic-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(180deg, 
      #07090B 0%, 
      rgba(7, 9, 11, 0.88) 12%, 
      rgba(7, 9, 11, 0.20) 35%, 
      transparent 55%, 
      rgba(7, 9, 11, 0.95) 98%),
    radial-gradient(ellipse 95% 70% at 50% 50%, transparent 55%, rgba(7, 9, 11, 0.70) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Foreground Container */
.problem-panoramic-container {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1420px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.problem-panoramic-header {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.problem-badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.problem-ref-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jv-teal);
}

.problem-lead-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(13, 17, 21, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(200, 121, 74, 0.40);
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--jv-text-secondary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.problem-ref-title {
  font-size: clamp(26px, 3.4vw, 48px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  margin-bottom: 14px;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.95);
}

.problem-ref-title .problem-lost-span {
  color: var(--jv-brand);
  display: block;
  text-shadow: 0 0 40px var(--jv-brand-glow-lg);
}

.problem-ref-desc {
  font-size: 16.5px;
  color: #D6DCE0;
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 650px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95);
}

.problem-cta-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* Panoramic Stage Spacer to reveal glowing laser path and all 4 loss nodes */
.problem-panoramic-spacer {
  width: 100%;
  height: clamp(240px, 30vw, 440px);
  pointer-events: none;
}

@media (max-width: 768px) {
  .problem-reference-section.problem-panoramic-stage {
    padding: 48px 0 20px;
  }
  .problem-panoramic-bg {
    left: 0;
    width: 100%;
    background-size: 100% auto;
    background-position: center bottom;
    opacity: 0.95;
    animation: cinematicTerrainDriftMobile 20s ease-in-out infinite alternate;
  }
  @keyframes cinematicTerrainDriftMobile {
    0% {
      transform: scale(1.00) translateY(0);
    }
    100% {
      transform: scale(1.035) translateY(-3px);
    }
  }
  .problem-panoramic-vignette {
    background: linear-gradient(180deg, 
      #07090B 0%, 
      #07090B 35%, 
      rgba(7, 9, 11, 0.4) 55%, 
      transparent 75%, 
      rgba(7, 9, 11, 0.95) 98%);
  }
  .problem-panoramic-spacer {
    height: calc(100vw * 0.5625);
    max-height: 380px;
  }
  .problem-ref-title {
    font-size: 25px;
  }
  .problem-ref-desc {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .problem-panoramic-bg,
  .problem-energy-sheen {
    animation: none !important;
  }
  .problem-panoramic-parallax-wrap {
    transform: none !important;
  }
}

.hero-stage-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  position: relative;
}

.hero-product-stage {
  width: 82vw;
  max-width: 1360px;
  background: var(--jv-surface-1);
  border: 1px solid rgba(200, 121, 74, 0.4);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 20px rgba(47, 168, 154, 0.05);
  border-radius: var(--jv-radius-xl);
  padding: 10px;
  box-shadow: 
    0 32px 90px rgba(0, 0, 0, 0.8),
    0 0 80px rgba(200, 121, 74, 0.12);
  transition: width 0.3s ease-out, transform 0.3s ease-out, box-shadow 0.3s ease-out;
  transform-origin: center top;
}

.stage-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--jv-sidebar);
  border-radius: var(--jv-radius-lg) var(--jv-radius-lg) 0 0;
  border-bottom: 1px solid var(--jv-border);
  margin-bottom: 6px;
}

.window-dots {
  display: flex;
  gap: 8px;
}

.window-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.window-url {
  font-family: var(--jv-font-mono);
  font-size: 13px;
  color: var(--jv-text-muted);
  background: var(--jv-surface-1);
  padding: 4px 18px;
  border-radius: var(--jv-radius-sm);
  border: 1px solid var(--jv-border);
}

.window-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--jv-teal);
  text-transform: uppercase;
}

.window-live-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jv-teal);
  box-shadow: 0 0 10px var(--jv-teal);
}

.stage-screenshot {
  width: 100%;
  border-radius: 0 0 var(--jv-radius-lg) var(--jv-radius-lg);
  display: block;
}

/* -------------------------------------------------------------------------- */
/* SCENE 02 — THE BUSINESS PROBLEM (Large Editorial Typographic Moment) */
/* -------------------------------------------------------------------------- */
.scene-problem {
  min-height: 120svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 0;
  position: relative;
}

.problem-editorial-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
}

.problem-main-statement {
  font-size: clamp(48px, 5.5vw, 76px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--jv-text-muted);
}

.problem-reveal-statement {
  color: var(--jv-brand);
  display: block;
  margin-top: 14px;
}

.problem-editorial-desc {
  font-size: 21px;
  color: var(--jv-text-secondary);
  line-height: 1.6;
  margin-top: 36px;
  max-width: 580px;
}

.problem-cascade-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-left: 2px solid var(--jv-border);
  padding-left: 36px;
}

.cascade-item {
  opacity: 0.35;
  transform: translateX(-10px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cascade-item.active {
  opacity: 1;
  transform: translateX(0);
}

.cascade-word {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--jv-text);
  display: block;
}

.cascade-sub {
  font-size: 16px;
  color: var(--jv-text-muted);
  margin-top: 4px;
}

/* -------------------------------------------------------------------------- */
/* SCENE 03 — SOFIA ENTERS (Signature Scene with Sticky 100svh Stage) */
/* -------------------------------------------------------------------------- */
.scene-sofia-wrapper {
  min-height: 170svh;
  position: relative;
}

.scene-sofia-sticky {
  position: sticky;
  top: 85px;
  height: calc(100svh - 85px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 24px 0 32px 0;
  box-sizing: border-box;
}

.sofia-cinematic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  width: 100%;
}

.sofia-left-content .scene-eyebrow {
  color: var(--jv-ice);
  background: rgba(99, 167, 255, 0.08);
  border: 1px solid rgba(99, 167, 255, 0.25);
  padding: 6px 16px;
  border-radius: 999px;
}

.sofia-left-headline {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.03em;
  margin: 12px 0 16px 0;
  color: var(--jv-text);
}

.sofia-stages-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.sofia-stage-indicator {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  background: var(--jv-surface-1);
  border: 1px solid var(--jv-border);
  border-radius: var(--jv-radius-md);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.45;
}

.sofia-stage-indicator.active {
  opacity: 1;
  border-color: var(--jv-ice);
  background: linear-gradient(90deg, rgba(99, 167, 255, 0.14) 0%, rgba(47, 168, 154, 0.08) 100%);
  box-shadow: 0 4px 24px rgba(99, 167, 255, 0.25), inset 0 0 14px rgba(99, 167, 255, 0.08);
  transform: translateX(8px);
}

.stage-badge-num {
  font-family: var(--jv-font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--jv-ice);
}

.stage-text-group h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--jv-text);
}

.stage-text-group p {
  font-size: 13.5px;
  color: var(--jv-text-secondary);
  margin-top: 2px;
}

.sofia-right-visual {
  position: relative;
}

.sofia-interface-card {
  background: var(--jv-surface-1);
  border: 1px solid rgba(99, 167, 255, 0.35);
  border-radius: var(--jv-radius-xl);
  padding: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 50px var(--jv-ice-glow);
}

.sofia-interface-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--jv-sidebar);
  border-radius: var(--jv-radius-lg) var(--jv-radius-lg) 0 0;
  border-bottom: 1px solid var(--jv-border);
}

.sofia-active-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--jv-ice);
}

.sofia-active-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jv-ice);
  box-shadow: 0 0 10px var(--jv-ice);
  animation: radarDotPulse 1.8s ease-in-out infinite;
}

/* Voice Equalizer Audio Bars */
.voice-equalizer-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 14px;
}

.eq-bar {
  width: 2.5px;
  background: var(--jv-ice);
  border-radius: 2px;
  animation: eqPulse 1.2s ease-in-out infinite alternate;
}

.eq-bar.bar-1 { height: 6px; animation-delay: 0.1s; }
.eq-bar.bar-2 { height: 13px; animation-delay: 0.3s; }
.eq-bar.bar-3 { height: 9px; animation-delay: 0.2s; }
.eq-bar.bar-4 { height: 12px; animation-delay: 0.4s; }

@keyframes eqPulse {
  0% { transform: scaleY(0.35); opacity: 0.4; }
  100% { transform: scaleY(1); opacity: 1; }
}

/* Holographic Laser Beam across Card */
.sofia-interface-card {
  position: relative;
  overflow: hidden;
}

.sofia-interface-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(99, 167, 255, 0.9) 50%, transparent 100%);
  box-shadow: 0 0 16px rgba(99, 167, 255, 0.85);
  animation: cyberScanBeam 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  z-index: 6;
}

.command-screen-frame::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(200, 121, 74, 0.9) 50%, transparent 100%);
  box-shadow: 0 0 16px rgba(200, 121, 74, 0.85);
  animation: cyberScanBeam 7s cubic-bezier(0.4, 0, 0.2, 1) infinite 1.5s;
  pointer-events: none;
  z-index: 6;
}

@keyframes cyberScanBeam {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { transform: translateY(600px); opacity: 0; }
}

/* -------------------------------------------------------------------------- */
/* SCENE 04 — CONVERSATION TO REVENUE (Horizontal Commercial Journey) */
/* -------------------------------------------------------------------------- */
.scene-journey {
  padding: 140px 0;
  position: relative;
  background: linear-gradient(180deg, var(--jv-canvas) 0%, var(--jv-sidebar) 50%, var(--jv-canvas) 100%);
}

.journey-header {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 72px auto;
}

.journey-header .scene-headline {
  font-size: clamp(40px, 4.8vw, 64px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 18px 0;
}

.journey-track-wrapper {
  overflow-x: auto;
  padding-bottom: 24px;
}

.journey-track {
  display: flex;
  align-items: stretch;
  gap: 16px;
  min-width: 1100px;
  position: relative;
}

.journey-node {
  flex: 1;
  background: var(--jv-surface-1);
  border: 1px solid var(--jv-border);
  border-radius: var(--jv-radius-lg);
  padding: 28px 22px;
  position: relative;
  transition: all 0.25s ease;
  cursor: default;
}

.journey-node:hover, .journey-node.active {
  border-color: var(--jv-border-copper);
  background: var(--jv-surface-2);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px var(--jv-brand-glow);
}

.journey-node-step {
  font-family: var(--jv-font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--jv-brand);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  display: block;
}

.journey-node-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--jv-text);
  margin-bottom: 10px;
  line-height: 1.3;
}

.journey-node-desc {
  font-size: 13.5px;
  color: var(--jv-text-secondary);
  line-height: 1.55;
}

/* -------------------------------------------------------------------------- */
/* SCENE 05 — PRODUCT COMMAND CENTER (3 Scroll Chapters with 85vw Visual) */
/* -------------------------------------------------------------------------- */
.scene-command-center {
  min-height: 170svh;
  position: relative;
  padding-top: 20px;
}

.command-sticky-stage {
  position: sticky;
  top: 85px;
  height: calc(100svh - 85px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
  box-sizing: border-box;
}

.command-top-bar {
  text-align: center;
  margin-bottom: 14px;
}

.command-top-bar h2 {
  font-size: clamp(32px, 3.5vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.chapter-pills-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

.chapter-pill {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid var(--jv-border);
  background: var(--jv-surface-1);
  color: var(--jv-text-muted);
  transition: all 0.2s ease;
  cursor: pointer;
}

.chapter-pill.active {
  border-color: var(--jv-brand);
  color: #FFFFFF;
  background: rgba(200, 121, 74, 0.15);
  box-shadow: 0 0 16px var(--jv-brand-glow);
}

.command-screen-frame {
  width: 86vw;
  max-width: 1340px;
  height: 56vh;
  background: var(--jv-surface-1);
  border: 1px solid var(--jv-border);
  border-radius: var(--jv-radius-xl);
  overflow: hidden;
  position: relative;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.85);
}

.command-screen-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.command-screen-overlay-info {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: rgba(13, 17, 21, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--jv-border);
  border-radius: var(--jv-radius-lg);
  padding: 20px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.overlay-info-text h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--jv-text);
}

.overlay-info-text p {
  font-size: 14.5px;
  color: var(--jv-text-secondary);
  margin-top: 4px;
}

/* -------------------------------------------------------------------------- */
/* SCENE 06 — HUMAN TAKEOVER (Dark Full-Width Transition) */
/* -------------------------------------------------------------------------- */
.scene-takeover {
  padding: 160px 0;
  background: #06080A;
  position: relative;
  border-top: 1px solid var(--jv-border);
  border-bottom: 1px solid var(--jv-border);
}

.takeover-editorial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.takeover-state-machine {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.takeover-state-card {
  background: var(--jv-surface-1);
  border: 1px solid var(--jv-border);
  border-radius: var(--jv-radius-lg);
  padding: 28px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  transition: all 0.3s ease;
}

.takeover-state-card.highlight {
  border-color: var(--jv-brand);
  background: rgba(200, 121, 74, 0.08);
  box-shadow: 0 10px 30px var(--jv-brand-glow);
}

.takeover-state-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--jv-radius-md);
  background: var(--jv-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.takeover-state-details h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--jv-text);
  margin-bottom: 6px;
}

.takeover-state-details p {
  font-size: 14px;
  color: var(--jv-text-secondary);
}

/* -------------------------------------------------------------------------- */
/* SCENE 07 — INDUSTRIES (Left Selector + Right Large Presentation) */
/* -------------------------------------------------------------------------- */
.scene-industries {
  padding: 140px 0;
  position: relative;
}

.industries-stage-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 50px;
  align-items: stretch;
  margin-top: 60px;
}

.industry-selector-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.industry-select-btn {
  background: var(--jv-surface-1);
  border: 1px solid var(--jv-border);
  border-radius: var(--jv-radius-md);
  padding: 18px 24px;
  text-align: left;
  font-size: 17px;
  font-weight: 700;
  color: var(--jv-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.industry-select-btn:hover {
  background: var(--jv-surface-2);
  color: var(--jv-text);
}

.industry-select-btn.active {
  border-color: var(--jv-brand);
  background: rgba(200, 121, 74, 0.1);
  color: #FFFFFF;
  box-shadow: 0 4px 18px var(--jv-brand-glow);
}

.industry-presentation-card {
  background: var(--jv-surface-1);
  border: 1px solid var(--jv-border);
  border-radius: var(--jv-radius-xl);
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.industry-header-box h3 {
  font-size: 28px;
  font-weight: 800;
  color: var(--jv-text);
  margin-bottom: 16px;
}

.industry-problem-text {
  font-size: 16px;
  color: var(--jv-text-secondary);
  line-height: 1.6;
  margin-bottom: 28px;
}

.industry-sofia-box {
  background: var(--jv-sidebar);
  border: 1px solid rgba(99, 167, 255, 0.25);
  border-radius: var(--jv-radius-lg);
  padding: 24px;
  margin-bottom: 28px;
}

.industry-sofia-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jv-ice);
  margin-bottom: 8px;
  display: block;
}

.industry-sofia-desc {
  font-size: 14.5px;
  color: var(--jv-text);
}

/* -------------------------------------------------------------------------- */
/* SCENE 08 — DEMO (Second Hero) */
/* -------------------------------------------------------------------------- */
.scene-demo-hero {
  padding: 160px 0;
  background: radial-gradient(ellipse 90% 60% at 50% 50%, rgba(200, 121, 74, 0.1), transparent 70%);
  text-align: center;
  position: relative;
}

.demo-massive-title {
  font-size: clamp(52px, 6vw, 84px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin-bottom: 20px;
}

.demo-hero-stage-box {
  margin: 50px auto 40px auto;
  max-width: 1200px;
  background: var(--jv-surface-1);
  border: 1px solid var(--jv-border-copper);
  border-radius: var(--jv-radius-xl);
  padding: 8px;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.9);
}

.demo-microcopy-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  font-size: 13.5px;
  color: var(--jv-text-muted);
  margin-top: 24px;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------------------- */
/* SCENE 09 — PRICING & FOUNDING PARTNER */
/* -------------------------------------------------------------------------- */
.scene-pricing {
  padding: 140px 0;
  position: relative;
  background: var(--jv-sidebar);
}

.founding-partner-editorial {
  background: var(--jv-surface-1);
  border: 1px solid var(--jv-border-copper);
  border-radius: var(--jv-radius-xl);
  padding: 60px 52px;
  margin-bottom: 56px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
  box-shadow: 0 24px 70px var(--jv-brand-glow);
}

.founding-left h3 {
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.founding-left p {
  font-size: 18px;
  color: var(--jv-text-secondary);
  line-height: 1.6;
}

.founding-price-block {
  background: var(--jv-sidebar);
  border: 1px solid var(--jv-border);
  border-radius: var(--jv-radius-lg);
  padding: 36px;
  text-align: center;
}

.founding-badge-top {
  display: inline-block;
  background: var(--jv-brand);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.pricing-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.pricing-comp-card {
  background: var(--jv-surface-1);
  border: 1px solid var(--jv-border);
  border-radius: var(--jv-radius-xl);
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pricing-comp-card h4 {
  font-size: 24px;
  font-weight: 800;
  color: var(--jv-text);
  margin-bottom: 8px;
}

/* -------------------------------------------------------------------------- */
/* SCENE 10 — TRUST (4 Minimal Large Statements) */
/* -------------------------------------------------------------------------- */
.scene-trust {
  padding: 120px 0;
  position: relative;
}

.trust-editorial-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.trust-pillar {
  border-top: 2px solid var(--jv-border);
  padding-top: 28px;
}

.trust-pillar h4 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--jv-text);
  margin-bottom: 12px;
}

.trust-pillar p {
  font-size: 14.5px;
  color: var(--jv-text-secondary);
  line-height: 1.6;
}

/* -------------------------------------------------------------------------- */
/* SCENE 11 — IMPLEMENTATION FORM (2 Columns Premium) */
/* -------------------------------------------------------------------------- */
.scene-form-cinematic {
  padding: 140px 0;
  background: var(--jv-sidebar);
  border-top: 1px solid var(--jv-border);
}

.form-split-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: flex-start;
}

.form-left-copy h2 {
  font-size: clamp(40px, 4.4vw, 58px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}

.form-left-copy p {
  font-size: 19px;
  color: var(--jv-text-secondary);
  line-height: 1.6;
  margin-bottom: 32px;
}

.form-onboarding-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-onboarding-steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: var(--jv-text-muted);
}

.form-onboarding-steps li span {
  color: var(--jv-teal);
  font-weight: 800;
}

.form-right-card {
  background: var(--jv-surface-1);
  border: 1px solid var(--jv-border);
  border-radius: var(--jv-radius-xl);
  padding: 50px 44px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.form-group-cinematic {
  margin-bottom: 22px;
}

.form-row-cinematic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.label-cinematic {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--jv-text);
  margin-bottom: 8px;
}

.input-cinematic, .select-cinematic, .textarea-cinematic {
  width: 100%;
  padding: 14px 18px;
  background: var(--jv-surface-2);
  border: 1px solid var(--jv-border);
  border-radius: var(--jv-radius-md);
  color: var(--jv-text);
  font-size: 15px;
  font-family: inherit;
  transition: all 0.18s ease;
}

.input-cinematic:focus, .select-cinematic:focus, .textarea-cinematic:focus {
  outline: none;
  border-color: var(--jv-brand);
  box-shadow: 0 0 0 3px var(--jv-brand-glow);
}

.textarea-cinematic {
  resize: vertical;
  min-height: 110px;
}

/* -------------------------------------------------------------------------- */
/* FINAL SCENE (Substantial Closing Statement) */
/* -------------------------------------------------------------------------- */
.scene-final-closing {
  min-height: 80svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 140px 0;
  position: relative;
  width: 100%;
}

.scene-final-closing .container-cinematic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.closing-headline {
  font-size: clamp(40px, 4.8vw, 76px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  max-width: 1020px;
  width: 100%;
  margin: 0 auto 24px auto !important;
  text-align: center !important;
  text-wrap: balance;
  display: block;
}

.closing-question {
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.55;
  color: var(--jv-brand);
  max-width: 860px;
  width: 100%;
  margin: 0 auto 48px auto !important;
  text-align: center !important;
  text-wrap: balance;
}

.scene-final-closing .hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.footer-cinematic {
  padding: 60px 0 36px 0;
  border-top: 1px solid var(--jv-border);
  background: var(--jv-sidebar);
  font-size: 14px;
  color: var(--jv-text-muted);
}

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

/* -------------------------------------------------------------------------- */
/* MOBILE (390x844 TARGET) */
/* -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .container-cinematic {
    padding: 0 20px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .problem-editorial-layout,
  .sofia-cinematic-grid,
  .takeover-editorial-grid,
  .industries-stage-layout,
  .founding-partner-editorial,
  .pricing-comparison-grid,
  .trust-editorial-grid,
  .form-split-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .problem-editorial-layout > *,
  .sofia-cinematic-grid > *,
  .takeover-editorial-grid > *,
  .industries-stage-layout > *,
  .founding-partner-editorial > *,
  .pricing-comparison-grid > *,
  .trust-editorial-grid > *,
  .form-split-layout > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .hero-product-stage {
    width: 94vw;
  }

  .stage-window-bar {
    padding: 8px 12px;
    gap: 8px;
  }
  .window-url {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px 8px;
    font-size: 12px;
  }
  .window-live-badge {
    font-size: 12px;
  }

  .command-screen-frame {
    width: 94vw;
    height: 50vh;
  }

  .command-sticky-stage {
    position: relative;
    top: 0;
    height: auto;
  }

  .scene-command-center {
    min-height: auto;
    padding-bottom: 80px;
  }

  .scene-sofia-wrapper {
    min-height: auto;
  }

  .scene-sofia-sticky {
    position: relative;
    height: auto;
    padding: 60px 0;
  }

  .journey-track-wrapper {
    overflow-x: hidden;
  }

  .journey-track {
    flex-direction: column;
    min-width: 0;
    width: 100%;
  }

  .industry-select-btn {
    padding: 14px 16px;
    font-size: 15px;
    width: 100%;
  }

  .industry-presentation-card {
    padding: 28px 20px;
  }

  .founding-partner-editorial {
    padding: 36px 20px;
  }

  .founding-price-block {
    padding: 24px 16px;
  }

  .hero-reference-split {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero-stage-ref {
    padding-right: 0;
  }

  .hero-side-badges {
    display: none;
  }

  .hero-script-annotation {
    display: none;
  }

  .crm-frame-body {
    grid-template-columns: 1fr;
  }

  .crm-mini-sidebar {
    display: none;
  }

  .crm-kanban-columns {
    grid-template-columns: repeat(2, 1fr);
  }

  .floating-sofia-banner {
    left: 16px;
    bottom: 12px;
    padding: 6px 14px;
  }

  .floating-action-banner {
    right: 16px;
    bottom: 12px;
    padding: 8px 12px;
  }

  .proof-strip-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .proof-watermark {
    grid-column: span 2;
    text-align: center;
  }

  .problem-reference-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .problem-terrain-flow {
    flex-direction: column;
    gap: 24px;
  }

  .terrain-flow-arrow {
    transform: rotate(90deg);
  }

  .form-row-cinematic {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .container-cinematic {
    padding: 0 16px;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .hero-headline-ref {
    font-size: 36px;
  }
  .hero-headline {
    font-size: 38px;
  }
  .hero-supporting {
    font-size: 17px;
  }
  .hero-brand-statement {
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    padding: 12px 16px;
  }
  .hero-actions-ref {
    flex-direction: column;
    width: 100%;
  }
  .hero-actions-ref .btn-ref-primary,
  .hero-actions-ref .btn-ref-secondary {
    width: 100%;
    justify-content: center;
  }
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .hero-actions .btn-cinematic {
    width: 100%;
  }
  .crm-kanban-columns {
    grid-template-columns: 1fr;
  }
  .floating-action-banner {
    display: none;
  }
  .floating-sofia-banner {
    position: static;
    margin: 12px auto 0 auto;
    width: fit-content;
  }
  .proof-strip-grid {
    grid-template-columns: 1fr;
  }
  .proof-watermark {
    grid-column: span 1;
  }
  .form-right-card {
    padding: 24px 16px;
  }
  .command-screen-overlay-info {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    margin-top: 12px;
    border-radius: var(--jv-radius-md);
  }
  .window-url {
    max-width: 110px;
  }
}

/* ==========================================================================
   AMBIENT NEURAL MATRIX, CONTINUOUS LASER SPINE & SCROLL DYNAMICS
   ========================================================================== */

/* 1. Full-Screen Interactive Neural Particle Canvas */
.ambient-neural-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  opacity: 0.72;
  transition: opacity 0.5s ease;
}

/* 2. Continuous Vertical Neural Laser Spine */
.neural-laser-spine {
  position: fixed;
  top: 0;
  left: 20px;
  width: 2px;
  height: 100vh;
  pointer-events: none;
  z-index: 99;
  background: rgba(255, 255, 255, 0.04);
}

.neural-laser-spine::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--spine-progress, 0%);
  background: linear-gradient(180deg, var(--jv-brand) 0%, var(--jv-teal) 60%, var(--jv-ice) 100%);
  box-shadow: 
    0 0 10px rgba(200, 121, 74, 0.7),
    0 0 20px rgba(47, 168, 154, 0.5);
  transition: height 0.06s ease-out;
}

.spine-glow-head {
  position: absolute;
  left: -4px;
  top: var(--spine-progress, 0%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 
    0 0 8px #FFFFFF,
    0 0 16px var(--jv-teal),
    0 0 24px var(--jv-brand);
  transform: translateY(-50%);
  pointer-events: none;
  transition: top 0.06s ease-out;
}

@media (max-width: 1024px) {
  .neural-laser-spine {
    display: none;
  }
}

/* 3. Ambient Aurora Radial Light Fields */
.ambient-aurora-bg {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  -webkit-filter: blur(130px);
  pointer-events: none;
  opacity: 0.24;
  animation: auroraBreathing 14s ease-in-out infinite alternate;
  z-index: 1;
}

.aurora-copper {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(200, 121, 74, 0.40) 0%, rgba(200, 121, 74, 0.05) 60%, transparent 80%);
}

.aurora-teal {
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(47, 168, 154, 0.35) 0%, rgba(47, 168, 154, 0.05) 60%, transparent 80%);
}

.aurora-ice {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(99, 167, 255, 0.28) 0%, rgba(99, 167, 255, 0.04) 60%, transparent 80%);
}

@keyframes auroraBreathing {
  0% {
    transform: scale(0.92) translate3d(0, 0, 0);
    opacity: 0.18;
  }
  50% {
    transform: scale(1.18) translate3d(30px, -20px, 0);
    opacity: 0.30;
  }
  100% {
    transform: scale(1.04) translate3d(-20px, 25px, 0);
    opacity: 0.22;
  }
}

/* 4. Ambient Telemetry Chips (Floating Micro-Status Nodes) */
.ambient-telemetry-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(13, 17, 21, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--jv-text-secondary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: telemetryFloat 7s ease-in-out infinite alternate;
  z-index: 10;
  user-select: none;
}

.ambient-telemetry-chip:hover {
  border-color: rgba(47, 168, 154, 0.5);
  color: #FFFFFF;
}

.telemetry-chip-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jv-teal);
  box-shadow: 0 0 8px var(--jv-teal);
  animation: radarDotPulse 2s ease-in-out infinite;
}

.telemetry-chip-pulse.pulse-copper {
  background: var(--jv-brand);
  box-shadow: 0 0 8px var(--jv-brand);
}

.telemetry-chip-pulse.pulse-ice {
  background: var(--jv-ice);
  box-shadow: 0 0 8px var(--jv-ice);
}

@keyframes telemetryFloat {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-10px); }
}

@keyframes radarDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

/* 5. Scroll-Driven Perspective Reveal */
.scroll-reveal-target {
  opacity: 0.85;
  transform: translateY(22px) scale(0.99);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.scroll-reveal-target.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 6. Dynamic Card Border Shimmer on Hover and Scroll */
.card-glow-shimmer {
  position: relative;
  overflow: hidden;
}

.card-glow-shimmer::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(200, 121, 74, 0.15) 0%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.card-glow-shimmer:hover::before {
  opacity: 1;
}

/* 7. Subtle 3D perspective shift on hero stage */
.hero-stage-ref {
  perspective: 1200px;
}

.crm-stage-container {
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

/* ==================================================
   JAVORION V3 — CINEMATIC COMMERCIAL SCENES (UTF-8 CLEAN)
   ================================================== */

/* 1. #flujo (Flow - Glowing Game-Style Conduit) */
.premium-flow {
  padding: 140px 0;
  background: var(--jv-surface-0);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}
.flow-timeline-container {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}
.flow-line {
  position: absolute;
  left: 24px;
  top: 31px;
  bottom: 35px;
  width: 6px;
  background: #080B10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.95);
  overflow: visible;
}
.flow-line-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #C8794A 0%, #E2A94D 35%, #63A7FF 70%, #39C58A 100%);
  border-radius: 999px;
  box-shadow: 0 0 14px #E2A94D, 0 0 28px rgba(200, 121, 74, 0.85), 0 0 45px rgba(99, 167, 255, 0.6);
  transition: height 0.05s linear;
}
.flow-head-spark {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 12px #FFFFFF, 0 0 24px #E2A94D, 0 0 40px #C8794A, 0 0 60px rgba(99, 167, 255, 0.95);
  z-index: 6;
  pointer-events: none;
  animation: laserHeadPulse 0.9s ease-in-out infinite alternate;
}
@keyframes laserHeadPulse {
  0% { transform: translateX(-50%) scale(0.85); filter: brightness(1); }
  100% { transform: translateX(-50%) scale(1.35); filter: brightness(1.7); }
}
.flow-steps {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-left: 68px;
}
.flow-step {
  position: relative;
  opacity: 0.24;
  filter: brightness(0.65);
  transform: translateX(12px);
  transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
}
.flow-step.active {
  opacity: 1;
  filter: brightness(1);
  transform: translateX(0);
}
.flow-node {
  position: absolute;
  left: -52px;
  top: 20px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0D1117;
  border: 2px solid rgba(255, 255, 255, 0.25);
  z-index: 4;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-node::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
  opacity: 0;
}
.flow-node::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

/* Checkpoint Ignition: Copper Nodes (01, 04, 05) */
.flow-step.active .flow-node {
  background: #FFFFFF;
  border-color: #E2A94D;
  box-shadow: 0 0 16px #E2A94D, 0 0 32px rgba(226, 169, 77, 0.8);
  transform: scale(1.2);
}
.flow-step.active .flow-node::after {
  background: #C8794A;
  box-shadow: 0 0 8px #E2A94D;
  transform: scale(1.3);
}
.flow-step.active .flow-node::before {
  border-color: #E2A94D;
  animation: checkpointShockwave 1.8s cubic-bezier(0.1, 0.8, 0.2, 1) infinite;
}

/* Checkpoint Ignition: Sofia Ice Blue Nodes (02, 03) */
.flow-step.active .node-sofia {
  background: #FFFFFF !important;
  border-color: #63A7FF !important;
  box-shadow: 0 0 16px #63A7FF, 0 0 32px rgba(99, 167, 255, 0.85) !important;
  transform: scale(1.2);
}
.flow-step.active .node-sofia::after {
  background: #2D9CDB !important;
  box-shadow: 0 0 8px #63A7FF !important;
  transform: scale(1.3);
}
.flow-step.active .node-sofia::before {
  border-color: #63A7FF !important;
  animation: checkpointShockwave 1.8s cubic-bezier(0.1, 0.8, 0.2, 1) infinite;
}

/* Checkpoint Ignition: Teal Nodes (06, 07) */
.flow-step.active .node-teal {
  background: #FFFFFF !important;
  border-color: #2FA89A !important;
  box-shadow: 0 0 16px #2FA89A, 0 0 32px rgba(47, 168, 154, 0.85) !important;
  transform: scale(1.2);
}
.flow-step.active .node-teal::after {
  background: #39C58A !important;
  box-shadow: 0 0 8px #2FA89A !important;
  transform: scale(1.3);
}
.flow-step.active .node-teal::before {
  border-color: #2FA89A !important;
  animation: checkpointShockwave 1.8s cubic-bezier(0.1, 0.8, 0.2, 1) infinite;
}

@keyframes checkpointShockwave {
  0% {
    transform: scale(0.9);
    opacity: 0.95;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.flow-content {
  background: rgba(14, 18, 23, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 18px 24px;
  transition: all 0.35s ease;
  backdrop-filter: blur(6px);
}
.flow-step.active .flow-content {
  background: rgba(17, 23, 30, 0.9);
  border-color: rgba(226, 169, 77, 0.28);
  border-left-color: #E2A94D;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.7), 0 0 20px rgba(200, 121, 74, 0.16);
  transform: translateX(3px);
}
.flow-step.active:has(.node-sofia) .flow-content {
  border-color: rgba(99, 167, 255, 0.28);
  border-left-color: #63A7FF;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.7), 0 0 20px rgba(99, 167, 255, 0.18);
}
.flow-step.active:has(.node-teal) .flow-content {
  border-color: rgba(57, 197, 138, 0.28);
  border-left-color: #39C58A;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.7), 0 0 20px rgba(57, 197, 138, 0.18);
}
.flow-content h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--jv-primary-white);
  line-height: 1.3;
}
.flow-content p {
  color: var(--jv-text-secondary);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
.flow-num {
  font-family: var(--jv-font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--jv-text-muted);
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.flow-step.active .flow-num {
  color: #E2A94D;
  background: rgba(200, 121, 74, 0.14);
  border-color: rgba(200, 121, 74, 0.4);
}
.flow-step.active:has(.node-sofia) .flow-num {
  color: #63A7FF;
  background: rgba(99, 167, 255, 0.14);
  border-color: rgba(99, 167, 255, 0.4);
}
.flow-step.active:has(.node-teal) .flow-num {
  color: #39C58A;
  background: rgba(57, 197, 138, 0.14);
  border-color: rgba(57, 197, 138, 0.4);
}


/* 2. #comando (Command Center) */
.sticky-showcase {
  background: #000;
  position: relative;
  padding: 0;
}
.command-container {
  display: flex;
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  align-items: flex-start;
}
.command-text-scroll {
  width: 35%;
  padding: 120px 40px 120px 20px;
}
.command-chapter {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.3;
  transition: opacity 0.5s ease;
}
.command-chapter.active {
  opacity: 1;
}
.command-super-title {
  font-size: 28px;
  color: var(--jv-text-secondary);
  margin-bottom: 3rem;
  font-weight: 400;
}
.chapter-title {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--jv-border-copper);
  margin-bottom: 1rem;
}
.command-chapter p {
  font-size: 18px;
  color: var(--jv-text-secondary);
  line-height: 1.6;
}
.command-chapter p strong {
  color: var(--jv-primary-white);
  display: block;
  margin-bottom: 8px;
  font-size: 22px;
}
.command-visual-sticky {
  width: 65%;
  position: sticky;
  top: 100px;
  height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.command-mockup-frame {
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 16/9;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--jv-surface-1);
  box-shadow: 0 30px 60px rgba(0,0,0,0.8);
  overflow: hidden;
}
.command-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  transform: scale(1.02);
}
.command-img.active {
  opacity: 1;
  transform: scale(1);
}

/* 3. #sectores (Industries - Rich Enterprise Presentation) */
.premium-sectors {
  padding: 120px 0;
  background: var(--jv-surface-0);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.sectors-header-block {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 48px auto;
}
.sectors-grid {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.sectors-sidebar {
  width: 36%;
  flex-shrink: 0;
}
.industries-vertical-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.industry-item {
  text-align: left;
  background: var(--jv-surface-1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 20px;
  color: var(--jv-text-secondary);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.industry-item:hover {
  background: var(--jv-surface-2);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--jv-text);
  transform: translateX(4px);
}
.industry-item.active {
  background: rgba(200, 121, 74, 0.12);
  border-color: var(--jv-border-copper);
  color: #FFFFFF;
  box-shadow: 0 4px 20px rgba(200, 121, 74, 0.25);
  transform: translateX(6px);
}
.industry-item-icon {
  font-size: 22px;
  line-height: 1;
  width: 32px;
  display: flex;
  justify-content: center;
}
.industry-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.industry-item-title {
  font-size: 15px;
  font-weight: 700;
  color: inherit;
}
.industry-item-sub {
  font-size: 12px;
  color: var(--jv-text-muted);
}
.industry-item.active .industry-item-sub {
  color: #E2A94D;
}
.sectors-presentation {
  width: 64%;
  flex-grow: 1;
}
.sector-card {
  background: var(--jv-surface-1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 36px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.sector-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 20px;
  margin-bottom: 24px;
}
.sector-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jv-border-copper);
  display: block;
  margin-bottom: 6px;
}
.sector-card-header h3 {
  font-size: 26px;
  font-weight: 800;
  color: var(--jv-primary-white);
  margin: 0;
  line-height: 1.2;
}
.sector-badge {
  font-size: 12px;
  font-weight: 700;
  color: #2FA89A;
  background: rgba(47, 168, 154, 0.12);
  border: 1px solid rgba(47, 168, 154, 0.3);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.sector-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.sector-metric-chip {
  background: #0B0E12;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.metric-chip-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jv-text-muted);
}
.metric-chip-val {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--jv-primary-white);
}
.metric-chip-val.val-teal {
  color: #2FA89A;
}
.metric-chip-val.val-copper {
  color: #E2A94D;
}
.sector-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 22px;
}
.sector-detail-block {
  background: #0B0E12;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 18px;
}
.sector-detail-block.block-problem {
  border-left: 3px solid var(--jv-border-copper);
}
.sector-detail-block.block-sofia {
  border-left: 3px solid #63A7FF;
}
.detail-block-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.detail-icon {
  font-size: 14px;
}
.detail-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jv-text-secondary);
}
.sector-detail-block.block-problem .detail-label {
  color: #E2A94D;
}
.sector-detail-block.block-sofia .detail-label {
  color: #63A7FF;
}
.sector-detail-block p {
  font-size: 14px;
  color: var(--jv-text-secondary);
  line-height: 1.6;
  margin: 0;
}
.sector-pipeline-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(200, 121, 74, 0.06);
  border: 1px solid rgba(200, 121, 74, 0.2);
  border-radius: 8px;
  padding: 12px 18px;
  margin-bottom: 22px;
  gap: 14px;
}
.pipeline-strip-step {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.strip-num {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jv-text-muted);
}
.pipeline-strip-step strong {
  font-size: 13px;
  color: var(--jv-primary-white);
  font-weight: 700;
}
.pipeline-strip-arrow {
  color: var(--jv-border-copper);
  font-size: 18px;
  font-weight: 800;
}
.sector-conversation-box {
  background: #090C0F;
  border: 1px solid rgba(99, 167, 255, 0.2);
  border-radius: 10px;
  padding: 16px 18px;
}
.conv-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 8px;
}
.conv-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #63A7FF;
  box-shadow: 0 0 8px #63A7FF;
}
.conv-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #63A7FF;
}
.conv-dialog {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.conv-msg {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.msg-author {
  font-weight: 700;
  flex-shrink: 0;
}
.msg-sofia .msg-author {
  color: #63A7FF;
}
.msg-client .msg-author {
  color: #B9C1C7;
}
.msg-sofia .msg-text {
  color: #F5F7F8;
}
.msg-client .msg-text {
  color: #A0ACB6;
}

/* 4. #contacto (Premium Contact) */
.premium-contact {
  padding: 120px 0;
  background: linear-gradient(to bottom, var(--jv-surface-0), #000);
}
.contact-grid {
  display: flex;
  gap: 60px;
  max-width: 1200px;
  align-items: flex-start;
}
.contact-left {
  width: 45%;
}
.contact-eyebrow {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--jv-border-copper);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  font-weight: 700;
}
.contact-trust-points {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.trust-point {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--jv-text-secondary);
  font-size: 15px;
}
.trust-icon {
  color: var(--jv-border-copper);
}
.contact-right {
  width: 55%;
}
.form-premium-card {
  background: var(--jv-surface-1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

/* Responsive Resets for Mobile */
@media (max-width: 900px) {
  .command-container {
    flex-direction: column;
  }
  .command-visual-sticky {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    margin-bottom: 2rem;
  }
  .command-mockup-frame {
    aspect-ratio: 4/3;
  }
  .command-text-scroll {
    width: 100%;
    padding: 20px 0;
  }
  .command-chapter {
    min-height: auto;
    padding: 40px 0;
  }
  .sectors-grid {
    flex-direction: column;
    gap: 32px;
  }
  .sectors-sidebar, .sectors-presentation {
    width: 100%;
  }
  .sector-metrics-grid {
    grid-template-columns: 1fr;
  }
  .sector-details-grid {
    grid-template-columns: 1fr;
  }
  .sector-pipeline-strip {
    flex-direction: column;
    align-items: flex-start;
  }
  .pipeline-strip-arrow {
    display: none;
  }
  .contact-grid {
    flex-direction: column;
  }
  .contact-left, .contact-right {
    width: 100%;
  }
  .flow-line {
    left: 12px;
  }
  .flow-steps {
    padding-left: 40px;
  }
  .flow-node {
    left: -33px;
  }
}