/* Hero Section Responsive Styles */

/* Small Mobile (320px - 374px) */
@media (max-width: 374px) {
    .hero-section { height: 100vh !important; min-height: 600px; }
    .hero-content-wrapper { padding: 0 1rem !important; }
    .hero-badge { padding: 0.375rem 0.75rem !important; font-size: 0.625rem !important; gap: 0.5rem !important; }
    .hero-badge-dot { height: 0.375rem !important; width: 0.375rem !important; }
    .hero-subtitle { font-size: 1.5rem !important; margin-bottom: 0.25rem !important; }
    .hero-title { font-size: 2.25rem !important; margin-bottom: 0.75rem !important; }
    .hero-description { font-size: 0.875rem !important; max-width: 100% !important; }
    .hero-buttons { flex-direction: column; gap: 0.75rem !important; width: 100%; }
    .hero-btn { width: 100%; justify-content: center; padding: 0.875rem 1.5rem !important; font-size: 0.8125rem !important; }
}

/* Medium Mobile (375px - 424px) */
@media (min-width: 375px) and (max-width: 424px) {
    .hero-section { height: 100vh !important; min-height: 650px; }
    .hero-content-wrapper { padding: 0 1.25rem !important; }
    .hero-badge { padding: 0.4rem 0.875rem !important; font-size: 0.65rem !important; }
    .hero-subtitle { font-size: 1.75rem !important; }
    .hero-title { font-size: 2.5rem !important; }
    .hero-description { font-size: 0.9375rem !important; }
    .hero-buttons { flex-direction: column; gap: 0.875rem !important; width: 100%; }
    .hero-btn { width: 100%; justify-content: center; padding: 0.9375rem 1.75rem !important; }
}

/* Large Mobile (425px - 767px) */
@media (min-width: 425px) and (max-width: 767px) {
    .hero-section { height: 100vh !important; min-height: 700px; }
    .hero-content-wrapper { padding: 0 1.5rem !important; }
    .hero-badge { padding: 0.45rem 0.9375rem !important; font-size: 0.6875rem !important; }
    .hero-subtitle { font-size: 2rem !important; }
    .hero-title { font-size: 2.75rem !important; }
    .hero-description { font-size: 1rem !important; }
    .hero-buttons { gap: 1rem !important; }
    .hero-btn { padding: 1rem 2rem !important; }
}

/* Small Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .hero-section { height: 100vh !important; }
    .hero-content-wrapper { padding: 0 2rem !important; max-width: 90% !important; }
    .hero-subtitle { font-size: 2.25rem !important; }
    .hero-title { font-size: 3.5rem !important; }
    .hero-description { font-size: 1.125rem !important; max-width: 36rem !important; }
    .hero-buttons { gap: 1.125rem !important; }
}

/* Medium Tablets (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero-section { height: 100vh !important; }
    .hero-content-wrapper { max-width: 1200px !important; }
    .hero-subtitle { font-size: 2.5rem !important; }
    .hero-title { font-size: 4rem !important; }
    .hero-description { font-size: 1.25rem !important; max-width: 38rem !important; }
}

/* Large Tablets (1200px - 1365px) */
@media (min-width: 1200px) and (max-width: 1365px) {
    .hero-section { height: 100vh !important; }
    .hero-content-wrapper { max-width: 1300px !important; }
    .hero-subtitle { font-size: 2.75rem !important; }
    .hero-title { font-size: 4.5rem !important; }
    .hero-description { font-size: 1.375rem !important; max-width: 40rem !important; }
}

/* Small Laptops (1366px - 1599px) */
@media (min-width: 1366px) and (max-width: 1599px) {
    .hero-section { height: 100vh !important; }
    .hero-content-wrapper { max-width: 1400px !important; }
    .hero-subtitle { font-size: 3rem !important; }
    .hero-title { font-size: 5rem !important; }
    .hero-description { font-size: 1.5rem !important; max-width: 42rem !important; }
}

/* Medium Laptops (1600px - 1919px) */
@media (min-width: 1600px) and (max-width: 1919px) {
    .hero-section { height: 100vh !important; }
    .hero-content-wrapper { max-width: 1600px !important; }
    .hero-subtitle { font-size: 3.25rem !important; }
    .hero-title { font-size: 5.5rem !important; }
    .hero-description { font-size: 1.625rem !important; max-width: 44rem !important; }
}

/* Large Laptops & Small Monitors (1920px - 2559px) */
@media (min-width: 1920px) and (max-width: 2559px) {
    .hero-section { height: 100vh !important; }
    .hero-content-wrapper { max-width: 1800px !important; }
    .hero-subtitle { font-size: 3.5rem !important; }
    .hero-title { font-size: 6rem !important; }
    .hero-description { font-size: 1.75rem !important; max-width: 48rem !important; }
    .hero-btn { padding: 1.125rem 2.25rem !important; font-size: 0.9375rem !important; }
}

/* Medium Monitors (2560px - 3439px) */
@media (min-width: 2560px) and (max-width: 3439px) {
    .hero-section { height: 100vh !important; }
    .hero-content-wrapper { max-width: 2200px !important; }
    .hero-subtitle { font-size: 4rem !important; }
    .hero-title { font-size: 7rem !important; }
    .hero-description { font-size: 2rem !important; max-width: 52rem !important; }
    .hero-btn { padding: 1.25rem 2.5rem !important; font-size: 1rem !important; }
    .hero-badge { padding: 0.625rem 1.25rem !important; font-size: 0.875rem !important; }
}

/* Large Monitors (3440px - 5119px) */
@media (min-width: 3440px) and (max-width: 5119px) {
    .hero-section { height: 100vh !important; }
    .hero-content-wrapper { max-width: 2800px !important; }
    .hero-subtitle { font-size: 5rem !important; }
    .hero-title { font-size: 8.5rem !important; }
    .hero-description { font-size: 2.5rem !important; max-width: 60rem !important; }
    .hero-btn { padding: 1.5rem 3rem !important; font-size: 1.125rem !important; }
    .hero-badge { padding: 0.75rem 1.5rem !important; font-size: 1rem !important; }
}

/* 49" Odyssey OLED G9 (5120x1440) */
@media (min-width: 5120px) and (max-height: 1440px) {
    .hero-section { height: 100vh !important; }
    .hero-content-wrapper { max-width: 3200px !important; padding: 0 4rem !important; }
    .hero-subtitle { font-size: 4.5rem !important; }
    .hero-title { font-size: 8rem !important; }
    .hero-description { font-size: 2.25rem !important; max-width: 70rem !important; }
    .hero-btn { padding: 1.5rem 3rem !important; font-size: 1.125rem !important; }
}

/* 57" Odyssey Neo G9 (7680x2160) */
@media (min-width: 7680px) {
    .hero-section { height: 100vh !important; }
    .hero-content-wrapper { max-width: 4800px !important; padding: 0 6rem !important; }
    .hero-subtitle { font-size: 6rem !important; }
    .hero-title { font-size: 11rem !important; }
    .hero-description { font-size: 3rem !important; max-width: 90rem !important; }
    .hero-btn { padding: 2rem 4rem !important; font-size: 1.5rem !important; }
    .hero-badge { padding: 1rem 2rem !important; font-size: 1.25rem !important; }
}

/* Vertical/Portrait Monitors */
@media (orientation: portrait) and (min-width: 768px) {
    .hero-section { height: 60vh !important; min-height: 700px; }
    .hero-content-wrapper { padding-top: 4rem !important; }
    .hero-subtitle { font-size: 2.5rem !important; }
    .hero-title { font-size: 4rem !important; }
    .hero-description { font-size: 1.25rem !important; }
}

/* Ultra-wide aspect ratios (21:9, 32:9) */
@media (min-aspect-ratio: 21/9) {
    .hero-content-wrapper { max-width: 50% !important; }
    .hero-title { font-size: clamp(4rem, 6vw, 8rem) !important; }
}

/* Short screens (height < 700px) */
@media (max-height: 699px) and (min-width: 768px) {
    .hero-section { height: auto !important; min-height: 100vh; padding: 6rem 0 !important; }
    .hero-subtitle { font-size: 2rem !important; }
    .hero-title { font-size: 3.5rem !important; }
    .hero-description { font-size: 1.125rem !important; }
    .hero-btn { padding: 0.875rem 1.75rem !important; }
}

/* Tall screens (height > 1200px) */
@media (min-height: 1200px) {
    .hero-content-wrapper { padding-top: 8rem !important; }
}