/* ============================================================
   Codewave Solutions — responsive.css
   All Media Queries | One rule per class
   Breakpoints: 1400px+ | 1200px | 992px | 768px | 576px | 380px
   ============================================================ */

/* ==================== Large Screens — min 1400px ==================== */

@media (min-width: 1400px) {
.nav-container { max-width: 1400px }
.hero-container { max-width: 1400px }
.footer-grid { max-width: 1400px }
.feat-grid { max-width: 1400px }
.packages-grid { max-width: 1400px }
.port-grid { max-width: 1400px }
.comp-table-container { max-width: 1200px }
}

/* ==================== XL — max 1200px ==================== */

@media (max-width: 1200px) {
.hero-container { gap: 3rem }
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem }
.packages-grid { grid-template-columns: repeat(3, 1fr) }
.port-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem }
.comp-table-container { margin: 0 1rem }
.feat-grid { grid-template-columns: repeat(3, 1fr) }
}

/* ==================== LG — max 992px ==================== */

@media (max-width: 992px) {
/* Navbar */ .nav-links { display: none }
.hamburger { display: flex }
.nav-actions { gap: 1rem }
/* Hero — two-column → single column */ .hero { padding: 120px 5% 80px }
.hero-container { grid-template-columns: 1fr; text-align: center; gap: 2.5rem }
.hero-title { text-align: center; font-size: clamp(2.5rem, 7vw, 3.6rem) }
.hero-subtitle { text-align: center; max-width: 560px; margin-left: auto; margin-right: auto }
.hero-input-group { margin: 0 auto; max-width: 480px }
.hero-trusted { justify-content: center }
.hero-graphic { height: 360px; max-width: 560px; margin: 0 auto }
.hg-card-stack { left: 50%; transform: translateX(-50%) translateY(20px); bottom: -30px; animation: fade-in-up-hg-centered 0.8s ease 0.6s forwards }
/* Wave */ .wave-svg { height: 80px }
/* Built For */ .built-for-container { grid-template-columns: 1fr; text-align: center; padding: 3rem 2rem; gap: 2rem }
.bf-desc { max-width: 560px; margin: 0 auto 2rem }
.bf-checks li { justify-content: center }
.bf-visual { transform: scale(0.85) }
/* Features */ .feat-grid { grid-template-columns: repeat(2, 1fr) }
/* Packages */ .packages-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto }
.pkg-card.popular { transform: none; box-shadow: 0 0 40px rgba(37, 99, 235, 0.15); border-color: rgba(59, 130, 246, 0.4) }
/* Portfolio */ .port-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem }
/* FAQ */ .faq-question { font-size: 1rem; padding: 1.2rem 1.5rem }
.faq-answer { padding: 0 1.5rem }
.faq-item.active .faq-answer { padding: 0 1.5rem 1.2rem }
/* Footer */ .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem }
}

/* ==================== MD — max 768px ==================== */

@media (max-width: 768px) {
/* Base */ html { font-size: 15px }
/* Navbar */ .navbar { padding: 0.9rem 5% }
.navbar.scrolled { padding: 0.7rem 5% }
.nav-actions{ display: none;}
.nav-cta { padding: 0.6rem 1.1rem; font-size: 0.88rem }

/* Hero */ .hero { padding: 100px 5% 60px }
.hero-container { gap: 2rem }
.hero-title { font-size: clamp(2rem, 8vw, 3rem) }
.hero-subtitle { font-size: 1rem }
.hero-orb--1 { width: 300px; height: 300px; filter: blur(50px) }
.hero-orb--2 { width: 220px; height: 220px; filter: blur(40px) }
.hero-orb--3 { width: 160px; height: 160px; filter: blur(40px) }
.hero-graphic { height: 280px }
.hero-trusted { flex-direction: column; align-items: center; gap: 0.6rem }
.hero-trusted-logos { gap: 1rem }
/* Wave */ .wave-svg { height: 60px }
/* Section paddings */ .built-for-wrapper { padding: 3rem 5% }
.features-section { padding: 60px 5% }
.packages-section { padding: 60px 5% }
.comparison-section { padding: 60px 5% }
.portfolio { padding: 60px 5% }
.faq-section { padding: 60px 5% }
.cta-section { padding: 60px 5% }
.cta-block { padding: 60px 5% }
/* Section headers */ .section-header { margin-bottom: 2.5rem }
.feat-header { margin-bottom: 2.5rem }
.packages-header { margin-bottom: 2.5rem }
.comp-header { margin-bottom: 2.5rem }
.faq-header { margin-bottom: 2.5rem }
/* Built For radar */ .bf-radar { width: 260px; height: 260px }
.bf-radar::before { width: 190px; height: 190px }
.bf-radar::after { width: 110px; height: 110px }
/* Features */ .feat-grid { grid-template-columns: 1fr 1fr; gap: 1rem }
.feat-card { padding: 2rem 1.5rem }
/* Packages */ .packages-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto }
/* Comparison — make it scrollable on small screens */ .comp-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 }
.comp-table { min-width: 520px }
.comp-table th, .comp-table td { padding: 1rem 0.9rem; font-size: 0.85rem }
.comp-table th:first-child, .comp-table td:first-child { font-size: 0.82rem }
/* Portfolio */ .port-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto }
/* CTA */ .cta-container { padding: 3.5rem 1.5rem; border-radius: 24px }
.cta-buttons { flex-direction: column; width: 100%; max-width: 280px; margin: 0 auto }
.cta-btn-primary { width: 100%; text-align: center }
.cta-btn-secondary { width: 100%; text-align: center }
/* Footer */ .footer { padding: 55px 5% 24px }
.footer-grid { grid-template-columns: 1fr; text-align: center; gap: 2rem }
.footer-brand .logo{justify-content: center;}
.social-links { justify-content: center }
.footer-column h4 { margin-bottom: 1rem }
/* Forms */ .form-page { padding: 100px 5% 60px }
.form-card { padding: 2rem 1.5rem }
}

/* ==================== SM — max 576px ==================== */

@media (max-width: 576px) {
/* Navbar */ .navbar { padding: 0.8rem 4% }
.hero-title { font-size: clamp(1.85rem, 9vw, 2.6rem); letter-spacing: -0.5px }
.hero-subtitle { font-size: 0.98rem }
.hero-input-group { flex-direction: column; gap: 0.5rem; border-radius: 14px; padding: 8px }
.hero-input { padding: 0.85rem 1rem }
.hero-btn { width: 100%; border-radius: 10px; padding: 0.85rem 1rem; text-align: center; justify-content: center }
.hero-graphic { height: 220px }
.hero-trusted { font-size: 0.8rem }
.hero-trusted-logos { flex-wrap: wrap; justify-content: center; gap: 0.75rem }
.hg-card-stack { width: 190px; padding: 1rem }
.hg-card-stack .score { font-size: 1.7rem }
/* Wave */ .wave-svg { height: 50px }
/* Built For */ .bf-visual { transform: scale(0.6); margin-top: -3rem; margin-bottom: -3rem }
.bf-title { font-size: 1.7rem }
.bf-desc { font-size: 0.95rem }
.built-for-container { padding: 2.5rem 1.5rem }
/* Features */ .features-section { padding: 50px 4% }
.feat-grid { grid-template-columns: 1fr; gap: 1rem }
.feat-card { padding: 1.8rem 1.4rem }
.feat-title { font-size: 1.7rem }
.feat-card h3 { font-size: 1.15rem }
.feat-card p { font-size: 0.9rem }
/* Packages */ .packages-section { padding: 50px 4% }
.packages-title { font-size: 1.7rem }
.pkg-card { padding: 2rem 1.4rem }
.pkg-name { font-size: 1.3rem }
/* Comparison */ .comparison-section { padding: 50px 4% }
.comp-title { font-size: 1.7rem }
.comp-table { min-width: 480px }
.comp-table th, .comp-table td { padding: 0.85rem 0.7rem; font-size: 0.8rem }
/* Portfolio */ .portfolio { padding: 50px 4% }
.port-grid { max-width: 100%; gap: 1rem }
.port-title { font-size: 1.15rem }
.port-overlay { padding: 1.5rem }
.port-cat { font-size: 0.72rem }
/* FAQ */ .faq-section { padding: 50px 4% }
.faq-title { font-size: 1.7rem }
.faq-question { font-size: 0.93rem; padding: 1rem 1.2rem }
.faq-icon { width: 20px; height: 20px }
.faq-answer { font-size: 0.9rem; padding: 0 1.2rem }
.faq-item.active .faq-answer { padding: 0 1.2rem 1rem }
/* CTA */ .cta-section { padding: 50px 4% }
.cta-container { padding: 3rem 1.2rem; border-radius: 20px }
.cta-title { font-size: 1.85rem; line-height: 1.15 }
.cta-subtitle { font-size: 0.95rem }
.cta-buttons { max-width: 100% }
/* Buttons */ .btn { padding: 0.8rem 1.4rem; font-size: 0.92rem }
.hero-buttons { flex-direction: column; align-items: stretch; gap: 0.75rem }
/* Footer */ .footer { padding: 45px 4% 20px }
.footer-grid { gap: 1.8rem }
.footer-bottom { font-size: 0.8rem; padding-top: 1.5rem }
/* Forms */ .form-page { padding: 88px 4% 50px }
.form-card { padding: 1.5rem 1.1rem }
.form-group { margin-bottom: 1.2rem }
.form-group input, .form-group select, .form-group textarea { padding: 0.8rem 0.9rem; font-size: 0.95rem }
.form-group textarea { min-height: 120px }
}

/* ==================== XS — max 380px ==================== */

@media (max-width: 380px) {
.hero-title { font-size: 1.75rem }
.hero-subtitle { font-size: 0.92rem }
.hero-graphic { height: 180px }
.hg-card-stack { display: none }
.bf-visual { display: none }
.bf-title { font-size: 1.5rem }
.feat-card { padding: 1.4rem 1rem }
.feat-title { font-size: 1.5rem }
.feat-card h3 { font-size: 1rem }
.packages-title { font-size: 1.5rem }
.pkg-card { padding: 1.5rem 1rem }
.pkg-name { font-size: 1.2rem }
.comp-title { font-size: 1.5rem }
.comp-table { min-width: 440px }
.comp-table th, .comp-table td { padding: 0.7rem 0.5rem; font-size: 0.75rem }
.port-title { font-size: 1rem }
.port-overlay { padding: 0.9rem }
.faq-title { font-size: 1.5rem }
.faq-question { font-size: 0.85rem; padding: 0.85rem 0.9rem }
.cta-title { font-size: 1.6rem }
.cta-container { padding: 2.5rem 1rem; border-radius: 16px }
.footer-grid { gap: 1.5rem }
.form-submit { font-size: 0.95rem; padding: 0.9rem }
.form-card { padding: 1.2rem 0.9rem }
.wave-svg { height: 36px }
}

/* ==================== Keyframe for centered hg-card-stack on mobile ==================== */

@keyframes fade-in-up-hg-centered {
from { opacity: 0; transform: translateX(-50%) translateY(20px) }
to { opacity: 1; transform: translateX(-50%) translateY(0) }
}

/* ==================== Touch Targets (fat-finger friendly) ==================== */

@media (hover: none) and (pointer: coarse) {
.nav-links a { padding: 0.5rem 0 }
.btn { min-height: 48px }
.nav-cta { min-height: 44px }
.faq-question { min-height: 56px }
.form-submit { min-height: 52px }
.social-links a { width: 44px; height: 44px }
.pkg-btn { min-height: 48px; line-height: 1.4; display: flex; align-items: center; justify-content: center }
.hamburger span { width: 32px; height: 3px }
}

/* ==================== Reduced Motion ==================== */

@media (prefers-reduced-motion: reduce) {
.wave-path--back, .wave-path--mid, .wave-path--front { animation: none }
.wave-path--back { d: path("M0,60 C240,120 480,0 720,60 C960,120 1200,0 1440,60 L1440,120 L0,120 Z") }
.wave-path--mid { d: path("M0,80 C180,20 360,100 540,60 C720,20 900,100 1080,60 C1260,20 1380,80 1440,60 L1440,120 L0,120 Z") }
.wave-path--front { d: path("M0,90 C120,50 300,110 480,70 C660,30 840,110 1020,70 C1200,30 1350,90 1440,70 L1440,120 L0,120 Z") }
}