/* Hero Component Styles */
.hero-container {
  @apply relative bg-gradient-to-b from-purple-900 to-indigo-900 text-white;
}

.hero-content {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 pb-24;
}

.hero-logo {
  @apply flex items-center mb-16;
}

.hero-logo-img {
  @apply w-8 h-8 mr-3;
}

.hero-logo-text {
  @apply text-xl font-semibold;
}

.hero-title-section {
  @apply text-center mb-12;
}

.hero-main-title {
  @apply text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold mb-6;
}

.hero-description {
  @apply text-xl md:text-2xl mb-8 text-gray-200;
}

.hero-download-section {
  @apply flex flex-col items-center mb-8;
}

.hero-store-buttons {
  @apply flex flex-col sm:flex-row justify-center items-center gap-4 mb-6;
}

.hero-store-button {
  @apply w-40 transition-transform hover:scale-105;
}

.hero-demo-images {
  @apply mt-16 hidden md:grid grid-cols-1 md:grid-cols-3 gap-8;
}

.hero-demo-image {
  @apply rounded-lg shadow-2xl;
}

/* Examples Component Styles */
.examples-container {
  @apply py-24 bg-gray-900;
}

.examples-content {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.examples-header {
  @apply text-center mb-16;
}

.examples-title {
  @apply text-4xl font-bold text-white mb-4;
}

.examples-subtitle {
  @apply text-xl text-gray-300;
}

.examples-grid {
  @apply grid grid-cols-1 gap-16;
}

.example-item {
  @apply space-y-4;
}

.example-slider-container {
  @apply relative rounded-lg overflow-hidden shadow-2xl;
}

.example-slider {
  @apply w-full h-[250px] sm:h-[350px] md:h-[450px] lg:h-[550px] xl:h-[600px];
}

.example-after-badge {
  @apply absolute top-4 right-4 bg-purple-600 text-white px-4 py-2 rounded-full text-sm font-semibold;
}

.example-info {
  @apply absolute bottom-2 sm:bottom-4 left-2 sm:left-4 right-2 sm:right-4 bg-black/70 p-2 sm:p-4 rounded-lg;
}

.example-title {
  @apply text-lg sm:text-xl md:text-xl;
}

/* Features Component Styles */
.features-container {
  @apply py-24 bg-black;
}

.features-content {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.features-section {
  @apply mb-32;
}

.features-header {
  @apply text-center mb-16;
}

.features-title {
  @apply text-4xl font-bold text-white mb-4;
}

.features-subtitle {
  @apply text-xl text-gray-300;
}

.motion-grid {
  @apply grid grid-cols-1 md:grid-cols-2 gap-8;
}

.motion-item {
  @apply relative rounded-lg overflow-hidden;
}

.motion-media {
  @apply w-full h-[400px] object-cover;
}

.motion-overlay {
  @apply absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 p-4;
}

.motion-title {
  @apply text-white text-xl font-bold;
}

.motion-description {
  @apply text-gray-200;
}

.motion-button {
  @apply absolute top-4 right-4 flex items-center justify-center gap-2 px-4 h-10 min-h-[40px] rounded-full font-semibold transition-colors duration-300 shadow-lg;
}

.motion-button-active {
  @apply bg-gray-500 text-white hover:bg-gray-600;
}

.motion-button-inactive {
  @apply bg-purple-600 text-white hover:bg-purple-700;
}

.portrait-slider {
  @apply w-full max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
}

.portrait-slider .swiper-slide {
  @apply transform-gpu;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.portrait-slide {
  @apply relative rounded-lg overflow-hidden w-full;
}

.portrait-container {
  @apply relative w-full;
}

.portrait-aspect-ratio {
  aspect-ratio: 3/4;
  @apply min-h-0;
}

.portrait-image {
  @apply w-full h-full object-cover transition-transform duration-300;
}

.portrait-image:hover {
  @apply scale-105;
}

.portrait-overlay {
  @apply absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-3 sm:p-4;
}

.portrait-title {
  @apply text-white text-center font-semibold text-sm sm:text-base;
}

/* AppStores Component Styles */
.app-stores-container {
  @apply py-24 bg-gray-900;
}

.app-stores-content {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.app-stores-header {
  @apply text-center mb-16;
}

.app-stores-title {
  @apply text-4xl font-bold text-white mb-4;
}

.app-stores-subtitle {
  @apply text-xl text-gray-300 mb-8;
}

.app-stores-buttons {
  @apply flex flex-col sm:flex-row justify-center items-center gap-4;
}

.app-store-button {
  @apply w-40 transition-transform hover:scale-105;
}

/* Footer Component Styles */
.footer-container {
  @apply bg-black text-white py-12;
}

.footer-content {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.footer-section {
  @apply text-center;
}

.footer-logo {
  @apply flex items-center justify-center mb-6;
}

.footer-logo-img {
  @apply w-6 h-6 mr-2;
}

.footer-logo-text {
  @apply text-lg font-semibold;
}

.footer-description {
  @apply text-gray-400 mb-6 max-w-2xl mx-auto;
}

.footer-links {
  @apply flex flex-wrap justify-center gap-6 mb-6;
}

.footer-link {
  @apply text-gray-400 hover:text-white transition-colors;
}

.footer-copyright {
  @apply text-gray-500 text-sm;
}

/* StarRating Component Styles */
.star-rating {
  @apply flex items-center gap-2;
}

.star-rating-stars {
  @apply flex items-center;
}

.star-rating-star {
  @apply text-yellow-400;
}

.star-rating-text {
  @apply text-gray-300 text-sm;
}

/* ImageCard Component Styles */
.image-card {
  @apply relative rounded-lg overflow-hidden shadow-lg;
}

.image-card-image {
  @apply w-full h-full object-cover;
}

.image-card-overlay {
  @apply absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-30 transition-all duration-300;
}

.image-card-content {
  @apply absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent;
}

.image-card-title {
  @apply text-white font-semibold;
}

/* ImageGrid Component Styles */
.image-grid {
  @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4;
}

.image-grid-item {
  @apply aspect-square;
}

/* Pricing Component Styles */
.pricing-container {
  @apply py-24 bg-gray-900;
}

.pricing-content {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.pricing-header {
  @apply text-center mb-16;
}

.pricing-title {
  @apply text-4xl font-bold text-white mb-4;
}

.pricing-subtitle {
  @apply text-xl text-gray-300;
}

.pricing-grid {
  @apply grid grid-cols-1 md:grid-cols-3 gap-8;
}

.pricing-card {
  @apply bg-white rounded-lg p-8 text-center shadow-lg;
}

.pricing-card-featured {
  @apply bg-purple-600 text-white;
}

.pricing-card-title {
  @apply text-2xl font-bold mb-4;
}

.pricing-card-price {
  @apply text-4xl font-bold mb-6;
}

.pricing-card-features {
  @apply space-y-3 mb-8;
}

.pricing-card-feature {
  @apply flex items-center justify-center;
}

.pricing-card-button {
  @apply w-full py-3 px-6 rounded-lg font-semibold transition-colors;
}

.pricing-card-button-primary {
  @apply bg-purple-600 text-white hover:bg-purple-700;
}

.pricing-card-button-secondary {
  @apply bg-gray-200 text-gray-800 hover:bg-gray-300;
}

/* Common Animation Classes */
.fade-in-up {
  @apply opacity-0 translate-y-4;
}

.fade-in-up.animate {
  @apply opacity-100 translate-y-0 transition-all duration-700;
}

.fade-in-left {
  @apply opacity-0 -translate-x-4;
}

.fade-in-left.animate {
  @apply opacity-100 translate-x-0 transition-all duration-700;
}

.fade-in-right {
  @apply opacity-0 translate-x-4;
}

.fade-in-right.animate {
  @apply opacity-100 translate-x-0 transition-all duration-700;
}

/* Responsive Utilities */
.section-padding {
  @apply py-12 sm:py-16 md:py-20 lg:py-24;
}

.container-padding {
  @apply px-4 sm:px-6 lg:px-8;
}

.max-width-container {
  @apply max-w-7xl mx-auto;
}

/* UserReviews Component Styles */
.user-reviews-container {
  @apply py-24 bg-gray-800;
}

.user-reviews-content {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.user-reviews-header {
  @apply text-center mb-16;
}

.user-reviews-title {
  @apply text-4xl font-bold text-white mb-4;
}

.user-reviews-subtitle {
  @apply text-xl text-gray-300;
}

.user-reviews-scroll-container {
  @apply relative overflow-hidden;
}

.user-reviews-grid {
  @apply flex gap-6 overflow-x-auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.user-reviews-grid::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.review-card {
  @apply bg-white rounded-lg p-6 shadow-lg flex-shrink-0;
  min-width: 280px;
  width: calc(100vw - 2rem);
  max-width: 350px;
}

@media (min-width: 640px) {
  .review-card {
    width: 320px;
  }
}

@media (min-width: 768px) {
  .review-card {
    width: 350px;
  }
}

.review-header {
  @apply flex justify-center mb-4;
}

.review-content {
  @apply text-gray-700 text-sm leading-relaxed text-center;
}