/* ============================================
   VIRTUWELL THEME — Healthcare Purple
   ============================================
   A calm, trustworthy healthcare theme with
   virtuwell's signature purple and soft accents.
   ============================================ */

:root {
  /* Primary palette - virtuwell Purple */
  --color-primary: #6B4C9A;
  --color-primary-dark: #533A7A;
  --color-primary-light: #9B7BC7;
  
  --color-secondary: #00B4A0;
  --color-secondary-dark: #008F7F;
  --color-secondary-light: #4DD4C4;
  
  /* Theme-specific accent */
  --theme-accent: #9B7BC7;
  
  /* Dark backgrounds - softer for healthcare */
  --theme-dark-1: #1a1625;
  --theme-dark-2: #241f33;
  --theme-dark-3: #2e2844;
}

/* ============================================
   HERO - Calming purple gradient
   ============================================ */
.hero {
  background: linear-gradient(
    135deg,
    var(--theme-dark-1) 0%,
    var(--theme-dark-2) 25%,
    var(--theme-dark-3) 50%,
    var(--theme-dark-2) 75%,
    var(--theme-dark-1) 100%
  );
}

.hero__title {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__badge {
  background: rgba(107, 76, 154, 0.15);
  border-color: rgba(107, 76, 154, 0.3);
}

.hero__badge-dot {
  background: var(--color-secondary);
  box-shadow: 0 0 12px var(--color-secondary);
}

/* ============================================
   FLOATING GRAPHICS - Healthcare icons
   ============================================ */
.floating-graphics__icon {
  color: var(--color-primary-light);
}

/* ============================================
   SECTION COLORS
   ============================================ */
.section--gradient {
  background: linear-gradient(
    160deg,
    var(--theme-dark-2) 0%,
    #2d2347 30%,
    #3d2f5c 60%,
    var(--theme-dark-2) 100%
  );
}

.section--blue {
  background: linear-gradient(135deg, #533A7A 0%, #6B4C9A 50%, #7D5FAD 100%);
}

.section--orange {
  background: linear-gradient(135deg, #00897B 0%, #00B4A0 50%, #26C6B5 100%);
}

/* ============================================
   ACCENT ELEMENTS
   ============================================ */
.section__number {
  color: var(--color-primary);
}

.floating-nav__item.active {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.floating-nav__item:hover {
  background: rgba(107, 76, 154, 0.15);
}

.floating-nav__item:hover .floating-nav__number {
  color: var(--color-primary-light);
}

.insights__card--blue {
  border-left-color: var(--color-primary);
  background: linear-gradient(135deg, rgba(107, 76, 154, 0.08) 0%, rgba(0, 180, 160, 0.04) 100%);
}

.insights__card--green {
  border-left-color: var(--color-secondary);
  background: linear-gradient(135deg, rgba(0, 180, 160, 0.08) 0%, rgba(107, 76, 154, 0.04) 100%);
}

.insights__card--purple {
  border-left-color: #9B7BC7;
  background: linear-gradient(135deg, rgba(155, 123, 199, 0.08) 0%, rgba(107, 76, 154, 0.04) 100%);
}

/* CTA Buttons */
.cta__button--primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.cta__button--primary:hover {
  box-shadow: 0 15px 40px rgba(107, 76, 154, 0.4);
}

/* Results highlight */
.results__card--highlight {
  background: white;
  border-color: var(--color-secondary);
}

.results__adoption-text strong {
  color: var(--theme-dark-3);
}

/* Process timeline */
.process__step-marker {
  background: white;
}

/* Role tools */
.role__tool {
  border-color: rgba(107, 76, 154, 0.2);
}

.role__tool:hover {
  border-color: var(--color-primary);
  background: rgba(107, 76, 154, 0.05);
}

/* Hero metrics - healthcare feel */
.hero-metric__value {
  text-shadow: 0 0 30px rgba(0, 180, 160, 0.3);
}

/* Browser frame - virtuwell themed */
.browser-frame__address {
  color: var(--theme-accent);
}

/* Problem cards - use teal accent for healthcare */
.problem-card__icon {
  background: rgba(0, 180, 160, 0.15);
  color: var(--color-secondary);
}

/* Research pills */
.research__pill {
  background: rgba(107, 76, 154, 0.1);
  border-color: rgba(107, 76, 154, 0.3);
  color: var(--color-primary-light);
}

/* Solution cards */
.solution__card-icon {
  background: none;
}

/* Architecture list icons */
.architecture__list-icon {
  color: var(--color-primary);
}

/* Learnings cards */
.learnings__card-icon {
  background: none;
}

/* ============================================
   VIDEO DEMO SECTION
   ============================================ */
.video-demo {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.video-demo__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}

.video-demo__description {
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.video-demo__player {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(155, 123, 199, 0.2);
  background: #000;
}

.video-demo__player video {
  width: 100%;
  display: block;
}

/* ============================================
   HERO CTA - Visit Website Button
   ============================================ */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding: 0.875rem 1.75rem;
  background: transparent;
  border: 2px solid var(--color-primary-light);
  border-radius: 8px;
  color: var(--color-primary-light);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.hero__cta:hover {
  background: var(--color-primary-light);
  color: var(--theme-dark-1);
  box-shadow: 0 8px 25px rgba(155, 123, 199, 0.35);
  transform: translateY(-2px);
}

.hero__cta svg {
  transition: transform 0.3s ease;
}

.hero__cta:hover svg {
  transform: translate(3px, -3px);
}