s5l.ru-crm/app/pages/Home/index.styl

// Стили для главной страницы
.home-page
  max-width: 1200px
  margin: 0 auto
  padding: 0 var(--spacing-md)

.hero-section
  text-align: center
  padding: var(--spacing-2xl) 0
  background: linear-gradient(135deg, var(--color-primary-10) 0%, transparent 50%)
  border-radius: var(--border-radius-lg)
  margin-bottom: var(--spacing-2xl)
  
  .theme-dark &
    background: linear-gradient(135deg, var(--color-primary-20) 0%, transparent 50%)

.hero-title
  font-size: var(--font-size-3xl)
  font-weight: var(--font-weight-bold)
  margin-bottom: var(--spacing-md)
  color: var(--color-primary)
  line-height: var(--line-height-tight)
  
  @media (max-width: 768px)
    font-size: var(--font-size-2xl)

.hero-subtitle
  font-size: var(--font-size-xl)
  color: var(--color-secondary)
  margin-bottom: var(--spacing-xl)
  line-height: var(--line-height-relaxed)
  
  @media (max-width: 768px)
    font-size: var(--font-size-lg)

.hero-actions
  display: flex
  gap: var(--spacing-md)
  justify-content: center
  flex-wrap: wrap

.features-section
  padding: var(--spacing-2xl) 0

.section-title
  text-align: center
  font-size: var(--font-size-2xl)
  margin-bottom: var(--spacing-xl)
  color: var(--color-dark)
  font-weight: var(--font-weight-semibold)
  
  .theme-dark &
    color: var(--color-light)

.features-grid
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
  gap: var(--spacing-lg)
  
  @media (max-width: 768px)
    grid-template-columns: 1fr
    gap: var(--spacing-md)

.feature-card
  padding: var(--spacing-xl)
  border-radius: var(--border-radius)
  background: var(--color-white)
  box-shadow: var(--shadow-sm)
  border: var(--border-width) solid var(--border-color)
  transition: var(--transition-normal)
  text-align: center
  
  &:hover
    transform: translateY(-2px)
    box-shadow: var(--shadow-md)
  
  .theme-dark &
    background: var(--color-dark-50)
    border-color: var(--color-light-10)
  
  h3
    font-size: var(--font-size-lg)
    font-weight: var(--font-weight-semibold)
    margin-bottom: var(--spacing-sm)
    color: var(--color-primary)
  
  p
    color: var(--color-secondary)
    line-height: var(--line-height-relaxed)
    margin: 0

.cta-section
  text-align: center
  padding: var(--spacing-2xl) 0
  background: var(--color-light-10)
  border-radius: var(--border-radius-lg)
  margin-top: var(--spacing-2xl)
  
  .theme-dark &
    background: var(--color-dark-50)

.cta-title
  font-size: var(--font-size-2xl)
  margin-bottom: var(--spacing-md)
  color: var(--color-dark)
  
  .theme-dark &
    color: var(--color-light)

.cta-description
  font-size: var(--font-size-lg)
  color: var(--color-secondary)
  margin-bottom: var(--spacing-xl)
  max-width: 600px
  margin-left: auto
  margin-right: auto

// Адаптивность
@media (max-width: 480px)
  .home-page
    padding: 0 var(--spacing-sm)
  
  .hero-section
    padding: var(--spacing-xl) var(--spacing-md)
  
  .feature-card
    padding: var(--spacing-lg)
  
  .hero-actions
    flex-direction: column
    align-items: center
    
    .btn
      width: 100%
      max-width: 280px