@use "@/common/styles/colors" as *

.home-page
  overflow-x: hidden

.hero
  min-height: 100vh
  display: flex
  align-items: center
  padding: 120px 6rem 80px
  position: relative

.hero-grid
  display: grid
  grid-template-columns: 1fr 1.2fr
  gap: 4rem
  align-items: center
  width: 100%
  max-width: 1400px
  margin: 0 auto

.hero-content
  display: flex
  flex-direction: column
  gap: 1.5rem

.hero-title
  font-size: 3.5rem
  font-weight: 800
  color: $text
  line-height: 1.1
  letter-spacing: -0.02em

  .highlight
    position: relative
    display: inline-block
    color: $primary
    
  .underline-scribble
    position: absolute
    bottom: -4px
    left: -5%
    width: 110%
    height: 16px
    overflow: visible
    
    path
      fill: none
      stroke: $primary
      stroke-width: 3
      stroke-linecap: round
      stroke-dasharray: 200
      stroke-dashoffset: 200
      animation: draw-underline 1s ease-out 0.5s forwards

@keyframes draw-underline
  to
    stroke-dashoffset: 0

.hero-description
  font-size: 1.125rem
  color: $text-secondary
  line-height: 1.7
  max-width: 480px

.hero-actions
  display: flex
  gap: 1rem
  margin-top: 0.5rem

.hero-visual
  position: relative
  display: flex
  justify-content: center
  align-items: center
  perspective: 1000px

.interface-preview
  position: relative
  z-index: 2
  width: 100%
  max-width: 650px
  transform: rotateY(-8deg) rotateX(4deg)
  transform-style: preserve-3d

  img
    width: 100%
    border-radius: 12px

@media (max-width: 1100px)
  .hero
    padding: 120px 3rem 60px

  .hero-grid
    grid-template-columns: 1fr
    gap: 3rem
    text-align: center

  .hero-content
    align-items: center

  .hero-description
    max-width: 600px

  .hero-title
    font-size: 3rem

  .hero-actions
    justify-content: center

@media (max-width: 640px)
  .hero
    padding: 100px 1.5rem 40px

  .hero-title
    font-size: 2.25rem

  .hero-description
    font-size: 1rem

  .hero-actions
    flex-direction: column
    width: 100%

    .btn
      width: 100%
      justify-content: center