/**
 * SalesCockpitVisual
 *
 * Component-scoped styles for the cockpit illustration rendered in the
 * Solution section.
 */

.cockpit-visual {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cockpit-visual__frame {
  width: 100%;
  aspect-ratio: 16 / 10;
  max-width: 620px;
}

.cockpit-visual__svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sales-cockpit .cockpit-visual__frame {
  max-width: 100%;
  aspect-ratio: auto;
  padding: clamp(16px, 2.4vw, 22px);
  border-radius: 28px;
  background:
    radial-gradient(120% 160% at 10% -20%, rgba(var(--secondary-rgb), 0.28), transparent 60%),
    radial-gradient(140% 160% at 90% 0%, rgba(34, 211, 238, 0.22), transparent 55%),
    linear-gradient(135deg, rgba(16, 20, 50, 0.96), rgba(10, 14, 38, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 24px 60px -40px rgba(var(--secondary-rgb), 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}