.home-page
  padding: 2rem 1rem
  max-width: 1200px
  margin: 0 auto

.home-hero
  text-align: center
  padding: 4rem 0
  border-bottom: 1px solid $gray-200
  margin-bottom: 4rem

  .dark &
    border-bottom-color: $gray-700

.home-hero__title
  font-size: 3rem
  font-weight: bold
  color: $gray-900
  margin-bottom: 1rem
  line-height: 1.2

  .dark &
    color: $white

.home-hero__subtitle
  font-size: 1.25rem
  color: $gray-600
  margin-bottom: 2rem
  max-width: 600px
  margin-left: auto
  margin-right: auto

  .dark &
    color: $gray-400

.home-hero__actions
  display: flex
  gap: 1rem
  justify-content: center
  flex-wrap: wrap

.home-features
  padding: 4rem 0
  border-bottom: 1px solid $gray-200
  margin-bottom: 4rem

  .dark &
    border-bottom-color: $gray-700

.home-features__title
  font-size: 2.25rem
  font-weight: bold
  text-align: center
  color: $gray-900
  margin-bottom: 3rem

  .dark &
    color: $white

.home-features__grid
  display: grid
  grid-template-columns: 1fr
  gap: 2rem

  @media (min-width: 768px)
    grid-template-columns: repeat(2, 1fr)

  @media (min-width: 1024px)
    grid-template-columns: repeat(3, 1fr)

.home-feature
  background-color: $white
  padding: 2rem
  border-radius: 0.5rem
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
  text-align: center
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out

  &:hover
    transform: translateY(-2px)
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1)

  .dark &
    background-color: $gray-800

.home-feature__icon
  width: 4rem
  height: 4rem
  margin: 0 auto 1rem
  background-color: $primary-100
  border-radius: 50%
  display: flex
  align-items: center
  justify-content: center
  font-size: 1.5rem

  .dark &
    background-color: $primary-900

.home-feature__title
  font-size: 1.25rem
  font-weight: 600
  color: $gray-900
  margin-bottom: 1rem

  .dark &
    color: $white

.home-feature__description
  color: $gray-600
  line-height: 1.6

  .dark &
    color: $gray-400

.home-categories
  padding: 4rem 0
  border-bottom: 1px solid $gray-200
  margin-bottom: 4rem

  .dark &
    border-bottom-color: $gray-700

.home-categories__title
  font-size: 2.25rem
  font-weight: bold
  text-align: center
  color: $gray-900
  margin-bottom: 3rem

  .dark &
    color: $white

.home-categories__grid
  display: grid
  grid-template-columns: 1fr
  gap: 1.5rem

  @media (min-width: 640px)
    grid-template-columns: repeat(2, 1fr)

  @media (min-width: 1024px)
    grid-template-columns: repeat(4, 1fr)

.home-category
  background-color: $white
  border-radius: 0.5rem
  overflow: hidden
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out

  &:hover
    transform: translateY(-2px)
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1)

  .dark &
    background-color: $gray-800

.home-category__image
  width: 100%
  height: 200px
  object-fit: cover

.home-category__content
  padding: 1.5rem

.home-category__name
  font-size: 1.125rem
  font-weight: 600
  color: $gray-900
  margin-bottom: 0.5rem

  .dark &
    color: $white

.home-category__count
  color: $gray-500
  font-size: 0.875rem

  .dark &
    color: $gray-400

.home-cta
  background: linear-gradient(135deg, $primary-500, $accent-500)
  color: $white
  padding: 4rem 1rem
  text-align: center
  border-radius: 1rem
  margin: 4rem 0

.home-cta__title
  font-size: 2.25rem
  font-weight: bold
  margin-bottom: 1rem

.home-cta__description
  font-size: 1.125rem
  margin-bottom: 2rem
  opacity: 0.9
  max-width: 600px
  margin-left: auto
  margin-right: auto

.home-cta__button
  background-color: $white
  color: $primary-600
  padding: 0.75rem 2rem
  border-radius: 0.5rem
  font-weight: 600
  text-decoration: none
  display: inline-block
  transition: all 0.2s ease-in-out

  &:hover
    background-color: $gray-100
    transform: translateY(-1px)

@media (max-width: 768px)
  .home-hero
    padding: 2rem 0

  .home-hero__title
    font-size: 2rem

  .home-hero__subtitle
    font-size: 1.125rem

  .home-features,
  .home-categories
    padding: 2rem 0

  .home-features__title,
  .home-categories__title
    font-size: 1.875rem

  .home-cta
    padding: 2rem 1rem
    margin: 2rem 0

  .home-cta__title
    font-size: 1.875rem

  .home-cta__description
    font-size: 1rem