// Hero Section
.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: $spacing-4xl 0;
  text-align: center;
  
  &__content {
    max-width: 800px;
    margin: 0 auto;
  }
  
  &__title {
    font-size: $font-size-4xl;
    font-weight: $font-weight-bold;
    margin-bottom: $spacing-base;
    
    @include media-down('md') {
      font-size: $font-size-3xl;
    }
  }
  
  &__subtitle {
    font-size: $font-size-xl;
    margin-bottom: $spacing-2xl;
    opacity: 0.9;
    line-height: $line-height-relaxed;
    
    @include media-down('md') {
      font-size: $font-size-lg;
    }
  }
  
  &__actions {
    display: flex;
    gap: $spacing-base;
    justify-content: center;
    flex-wrap: wrap;
    
    .btn {
      @include media-down('sm') {
        width: 100%;
        max-width: 280px;
      }
    }
  }
}

// Features Section
.features {
  padding: $spacing-4xl 0;
  background-color: $bg-color;
}

.section-header {
  text-align: center;
  margin-bottom: $spacing-3xl;
  
  h2 {
    font-size: $font-size-3xl;
    margin-bottom: $spacing-base;
  }
  
  p {
    font-size: $font-size-lg;
    color: $text-muted;
    max-width: 600px;
    margin: 0 auto;
  }
}

.feature {
  text-align: center;
  padding: $spacing-xl;
  
  &__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto $spacing-lg;
    background: linear-gradient(135deg, $primary-color 0%, lighten($primary-color, 10%) 100%);
    @include border-radius(50%);
    @include flex-center;
    color: white;
    
    svg {
      width: 48px;
      height: 48px;
    }
  }
  
  &__title {
    font-size: $font-size-xl;
    font-weight: $font-weight-semibold;
    margin-bottom: $spacing-base;
  }
  
  &__description {
    color: $text-muted;
    line-height: $line-height-relaxed;
  }
}

// Technologies Section
.technologies {
  padding: $spacing-4xl 0;
  background-color: $bg-secondary;
}

.tech-grid {
  @include grid-container(3, $spacing-lg);
  
  @include media-down('lg') {
    @include grid-container(2, $spacing-lg);
  }
  
  @include media-down('sm') {
    @include grid-container(1, $spacing-lg);
  }
}

.tech-item {
  background: white;
  padding: $spacing-xl;
  @include border-radius();
  @include box-shadow($shadow-sm);
  text-align: center;
  @include transition();
  
  &:hover {
    @include box-shadow($shadow-md);
    transform: translateY(-4px);
  }
  
  h4 {
    font-size: $font-size-lg;
    font-weight: $font-weight-semibold;
    margin-bottom: $spacing-sm;
    color: $primary-color;
  }
  
  p {
    color: $text-muted;
    margin: 0;
  }
}