// Demo Header
.demo-header {
  background: linear-gradient(135deg, $primary-color 0%, darken($primary-color, 10%) 100%);
  color: white;
  padding: $spacing-3xl 0;
  text-align: center;
  
  h1 {
    font-size: $font-size-3xl;
    margin-bottom: $spacing-base;
  }
  
  p {
    font-size: $font-size-lg;
    opacity: 0.9;
    margin: 0;
  }
}

// Demo Sections
.demo-section {
  padding: $spacing-3xl 0;
  border-bottom: 1px solid $border-light;
  
  &:last-child {
    border-bottom: none;
  }
}

.demo-title {
  text-align: center;
  margin-bottom: $spacing-2xl;
  
  h2 {
    font-size: $font-size-2xl;
    margin-bottom: $spacing-sm;
  }
  
  p {
    color: $text-muted;
    font-size: $font-size-lg;
    margin: 0;
  }
}

.demo-content {
  max-width: 800px;
  margin: 0 auto;
}

.demo-buttons {
  display: flex;
  gap: $spacing-base;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: $spacing-xl;
  
  @include media-down('sm') {
    flex-direction: column;
    align-items: center;
    
    .btn {
      width: 100%;
      max-width: 280px;
    }
  }
}

// Navigation styles
.header {
  background: white;
  @include box-shadow($shadow-sm);
  position: sticky;
  top: 0;
  z-index: $z-sticky;
}

.nav {
  @include flex-between;
  padding: $spacing-base 0;
  
  &__brand {
    font-size: $font-size-xl;
    font-weight: $font-weight-bold;
  }
  
  &__logo {
    color: $primary-color;
    text-decoration: none;
  }
  
  &__menu {
    @include flex-center;
    gap: $spacing-lg;
    margin: 0;
    
    @include media-down('sm') {
      gap: $spacing-base;
    }
  }
  
  &__item {
    list-style: none;
  }
  
  &__link {
    color: $text-color;
    text-decoration: none;
    font-weight: $font-weight-medium;
    padding: $spacing-sm $spacing-base;
    @include border-radius();
    @include transition();
    
    &:hover {
      background-color: $bg-secondary;
      color: $primary-color;
    }
    
    &--active {
      background-color: $primary-color;
      color: white;
      
      &:hover {
        background-color: darken($primary-color, 8%);
        color: white;
      }
    }
  }
}

// Footer styles
.footer {
  background-color: $bg-tertiary;
  padding: $spacing-xl 0;
  margin-top: $spacing-4xl;
  
  &__content {
    text-align: center;
    color: $text-muted;
  }
}