/* Premium Design Overrides - Final Polish */

/* Enhanced Shadows & Depth - Using Global Tokens */
.browser-mockup {
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(79, 70, 229, 0.1), var(--shadow-accent);
}

.browser-mockup:hover {
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(79, 70, 229, 0.2), var(--shadow-accent-lg);
  transform: translateY(-4px);
}

.feature-card {
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.feature-card:hover {
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(79, 70, 229, 0.2), 0 4px 16px rgba(79, 70, 229, 0.15);
  transform: translateY(-2px);
}

.feature-card--highlight {
  box-shadow: var(--shadow-md), var(--shadow-glow), 0 0 0 1px rgba(56, 189, 248, 0.3);
}

.feature-card--highlight:hover {
  box-shadow: var(--shadow-lg), var(--shadow-glow), 0 0 0 1px rgba(56, 189, 248, 0.5);
  transform: translateY(-3px);
}

.pricing-card {
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.pricing-card:hover {
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(79, 70, 229, 0.2);
  transform: translateY(-2px);
}

.pricing-card--featured {
  box-shadow: var(--shadow-md), var(--shadow-glow), 0 0 0 1px rgba(56, 189, 248, 0.3);
}

.pricing-card--featured:hover {
  box-shadow: var(--shadow-lg), var(--shadow-glow), 0 0 0 1px rgba(56, 189, 248, 0.5);
  transform: translateY(-3px);
}

/* Enhanced Hero Mockup - More Product-Like */
.app-sidebar {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 100%);
  border-right: 1px solid var(--border-subtle);
}

.sidebar-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  transition: all var(--transition-base);
}

.sidebar-item.active {
  background: linear-gradient(90deg, var(--accent-soft) 0%, rgba(79, 70, 229, 0.05) 100%);
  border-color: rgba(79, 70, 229, 0.2);
  box-shadow: 0 0 12px rgba(79, 70, 229, 0.15);
}

.sidebar-item.active::before {
  box-shadow: 0 0 8px var(--accent);
}

.app-header-line {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
}

.app-header-right {
  background: linear-gradient(135deg, var(--accent-soft) 0%, rgba(79, 70, 229, 0.2) 100%);
  box-shadow: 0 0 12px rgba(79, 70, 229, 0.2);
}

.app-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.app-card-header {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
}

/* Enhanced Feature Icons - SVG Icons */
.feature-card__icon {
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.2);
}

.feature-card:hover .feature-card__icon {
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}

.feature-card--highlight .feature-card__icon {
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.4);
}

/* Enhanced Pricing Cards - Updated for new structure */
.pricing-card__badge {
  box-shadow: 0 2px 8px rgba(34, 211, 238, 0.4);
}

/* Enhanced Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  box-shadow: 
    0 4px 16px rgba(79, 70, 229, 0.4),
    0 0 0 1px rgba(79, 70, 229, 0.2);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-hover) 0%, #818cf8 100%);
  box-shadow: 
    0 8px 24px rgba(79, 70, 229, 0.5),
    0 0 0 1px rgba(79, 70, 229, 0.3);
  transform: translateY(-3px) scale(1.02);
}

.btn-primary:active {
  transform: translateY(-1px) scale(1);
}

.btn-secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.btn-outline:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
}

/* Typography enhancements handled in base.css and components.css */

/* FAQ enhancements handled in components.css */

/* Enhanced Pricing Section Background - Now handled by section-bg--muted utility */

/* Scroll animations now handled in base.css with standardized motion tokens */

/* Enhanced Section Alternating Backgrounds - Now handled by section-bg utilities */

/* Mobile Refinements */
@media (max-width: 768px) {
  .pricing-card--featured {
    transform: none;
  }
  
  .pricing-card--featured:hover {
    transform: translateY(-2px);
  }
  
  .browser-mockup:hover {
    transform: translateY(-2px);
  }
  
  .feature-card:hover,
  .pricing-card:hover {
    transform: translateY(-3px);
  }
}