/* ============================================
   NEXEVER - COMPREHENSIVE RESPONSIVE STYLES
   For All Pages - Mobile & Tablet Optimized
   ============================================ */

/* ============================================
   TABLE OF CONTENTS:
   1. Global Responsive Utilities
   2. Navigation Responsive
   3. Homepage (Frontend) Responsive
   4. Pricing Page Responsive
   5. About Us Page Responsive
   6. Contact Page Responsive
   7. How It Works Page Responsive
   8. FAQ Page Responsive
   9. Blog Pages Responsive
   10. Career/Team Pages Responsive
   11. Enterprise Page Responsive
   12. Technology Page Responsive
   13. Portfolio Page Responsive
   14. Listings Directory Responsive
   15. Auth Pages Responsive
   16. Legal Pages Responsive
   17. Footer Responsive
   ============================================ */

/* ============================================
   1. GLOBAL RESPONSIVE UTILITIES
   ============================================ */

/* Large Desktops */
@media (max-width: 1399px) {
    .container {
        max-width: 1140px;
    }
}

/* Desktops */
@media (max-width: 1199px) {
    .container {
        max-width: 960px;
    }
    
    .section-padding {
        padding: 80px 0;
    }
    
    .section-header h2 {
        font-size: 2.25rem;
    }
}

/* Tablets */
@media (max-width: 991px) {
    .container {
        max-width: 720px;
    }
    
    .section-padding {
        padding: 60px 0;
    }
    
    .section-header {
        margin-bottom: 40px;
    }
    
    .section-header h2 {
        font-size: 1.9rem;
    }
    
    .section-header p {
        font-size: 1rem;
    }
    
    /* Reduce animation on mobile for performance */
    .particle,
    .orbit-ring,
    .decorative-ring,
    .hero-bg-grid {
        animation-duration: 30s !important;
    }
}

/* Mobile Landscape */
@media (max-width: 767px) {
    .container {
        max-width: 540px;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .section-padding {
        padding: 50px 0;
    }
    
    .section-header h2 {
        font-size: 1.65rem;
    }
    
    .section-header p {
        font-size: 0.95rem;
    }
    
    .section-badge {
        font-size: 0.75rem;
        padding: 6px 14px;
    }
}

/* Mobile Portrait */
@media (max-width: 575px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .section-padding {
        padding: 40px 0;
    }
    
    .section-header h2 {
        font-size: 1.5rem;
    }
    
    .btn-lg {
        padding: 14px 28px;
        font-size: 0.95rem;
    }
}

/* ============================================
   2. NAVIGATION RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    #mainNav {
        height: 65px;
    }
    
    #mainNav.scrolled {
        height: 60px;
    }
    
    .nav-logo {
        width: 140px !important;
    }
    
    #mainNav .navbar-collapse {
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        margin-top: 10px;
        padding: 15px;
    }
    
    .nav-auth {
        margin-top: 10px;
        padding-top: 10px;
    }
    
    .btn-nav-primary {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 575px) {
    #mainNav {
        height: 60px;
    }
    
    .nav-logo {
        width: 130px !important;
    }
    
    .navbar-toggler {
        width: 40px;
        height: 40px;
    }
    
    .toggle-line {
        width: 18px;
    }
}

/* iPad Pro / Tablet Navigation Fix (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    #mainNav .navbar-nav {
        gap: 4px;
    }
    
    #mainNav .nav-link {
        padding: 8px 12px !important;
        font-size: 0.875rem;
    }
    
    #mainNav .nav-text {
        font-size: 0.875rem;
    }
    
    .nav-auth .nav-link {
        padding: 8px 12px !important;
        font-size: 0.875rem;
    }
    
    .btn-nav-primary {
        padding: 8px 16px;
        font-size: 0.875rem;
    }
    
    .btn-nav-primary i {
        display: none;
    }
    
    .nav-logo {
        width: 140px !important;
    }
}

/* ============================================
   3. HOMEPAGE (FRONTEND) RESPONSIVE
   ============================================ */

/* Hero Section Responsive */
@media (max-width: 1199px) {
    .hero-section-premium {
        padding: 100px 0 60px;
    }
    
    .hero-title-premium {
        font-size: 2.2rem;
    }
    
    .hero-subheadline {
        font-size: 1rem;
    }
}

@media (max-width: 991px) {
    .hero-section-premium {
        padding: 90px 0 50px;
        min-height: auto;
    }
    
    .hero-title-premium {
        font-size: 1.9rem;
        text-align: center;
    }
    
    .hero-subheadline {
        font-size: 0.95rem;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-benefits-ultra {
        justify-content: center;
    }
    
    .hero-cta-group {
        justify-content: center;
    }
    
    .hero-micro-text {
        text-align: center;
    }
    
    .hero-visual-3d {
        margin-top: 30px;
        min-height: 350px;
    }
    
    .card-stack-3d {
        transform: scale(0.8);
    }
    
    .hex-3d {
        display: none;
    }
}

@media (max-width: 767px) {
    .hero-section-premium {
        padding: 80px 0 40px;
    }
    
    .hero-title-premium {
        font-size: 1.65rem;
    }
    
    .hero-benefits-ultra {
        gap: 8px;
    }
    
    .benefit-pill {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    .hero-cta-group {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100%;
        justify-content: center;
    }
    
    .hero-visual-3d {
        min-height: 320px;
    }
    
    .card-stack-3d {
        transform: scale(0.7);
    }
}

/* Vendor Comparison Arrow - Mobile Rotation */
@media (max-width: 767px) {
    .vendor-arrow {
        transform: rotate(90deg);
        padding-top: 0 !important;
    }
    
    .vendor-arrow i {
        animation: pulse-arrow-down 2s infinite !important;
    }
    
    @keyframes pulse-arrow-down {
        0%, 100% {
            opacity: 0.4;
            transform: translateX(0);
        }
        50% {
            opacity: 0.8;
            transform: translateX(5px);
        }
    }
    
    .arrow-text {
        display: none;
    }
}

@media (max-width: 575px) {
    .hero-title-premium {
        font-size: 1.5rem;
    }
    
    .hero-subheadline {
        font-size: 0.9rem;
    }
    
    .hero-trust-badge {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    
    .hero-trust-badge span {
        font-size: 0.75rem;
    }
    
    .card-stack-3d {
        transform: scale(0.65);
    }
    
    .hero-visual-3d {
        min-height: 300px;
    }
}

/* Vendor Strip Responsive */
@media (max-width: 991px) {
    .vendor-strip {
        padding: 50px 0;
    }
    
    .vendor-strip h3 {
        font-size: 1.5rem;
    }
    
    .vendor-comparison {
        flex-direction: column;
        gap: 30px;
    }
    
    .vendor-arrow {
        transform: rotate(90deg);
    }
    
    .vendor-old,
    .vendor-new {
        width: 100%;
    }
    
    .trust-indicators-wrapper {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .trust-pill {
        padding: 8px 14px;
        font-size: 0.85rem;
    }
}

@media (max-width: 767px) {
    .vendor-strip h3 {
        font-size: 1.3rem;
    }
    
    .vendor-strip-subtitle {
        font-size: 0.9rem;
    }
    
    .vendors-old {
        grid-template-columns: 1fr;
    }
    
    .vendor-includes {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .vendor-diy-note {
        font-size: 0.85rem;
    }
}

/* Bento Grid (What We Do) Responsive */
@media (max-width: 1199px) {
    .bento-grid {
        gap: 16px;
    }
    
    .bento-card {
        padding: 24px;
    }
}

@media (max-width: 991px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .bento-large {
        grid-column: span 2;
    }
    
    .bento-card h4 {
        font-size: 1.05rem;
    }
    
    .bento-card p {
        font-size: 0.88rem;
    }
}

@media (max-width: 767px) {
    .bento-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .bento-large {
        grid-column: span 1;
    }
    
    .bento-card {
        padding: 20px;
    }
    
    .bento-icon {
        width: 46px;
        height: 46px;
        font-size: 1.2rem;
    }
}

/* How It Works Steps Responsive */
@media (max-width: 991px) {
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .step-item:nth-child(2) .step-connector,
    .step-item:nth-child(4) .step-connector {
        display: none;
    }
    
    .step-card-v2 {
        padding: 24px 20px;
    }
}

@media (max-width: 767px) {
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .step-connector {
        display: none;
    }
    
    .step-card-v2 {
        padding: 20px;
    }
    
    .step-number-v2 {
        font-size: 2rem;
    }
    
    .step-icon-v2 {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
}

/* Directory Section Responsive */
@media (max-width: 991px) {
    .directory-filter-bar {
        padding: 20px;
    }
    
    .filter-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .filter-group {
        width: 100%;
    }
    
    .filter-btn {
        width: 100%;
        margin-top: 10px;
    }
    
    .directory-carousel-wrapper {
        padding: 0 40px;
    }
    
    .business-card {
        width: 280px;
    }
}

@media (max-width: 767px) {
    .directory-filter-bar {
        padding: 15px;
    }
    
    .business-card {
        width: 260px;
    }
    
    .directory-ctas {
        flex-direction: column;
        gap: 12px;
    }
    
    .directory-ctas .btn {
        width: 100%;
        justify-content: center;
    }
    
    .visibility-levels {
        font-size: 0.8rem;
    }
}

/* Trust Section Responsive */
@media (max-width: 991px) {
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .trust-card {
        padding: 24px 20px;
    }
    
    .feedback-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .trust-grid {
        grid-template-columns: 1fr;
    }
    
    .trust-card h4 {
        font-size: 1rem;
    }
    
    .trust-card p {
        font-size: 0.85rem;
    }
    
    .feedback-card {
        padding: 20px;
    }
    
    .feedback-text {
        font-size: 0.9rem;
    }
}

/* ============================================
   4. PRICING PAGE RESPONSIVE
   ============================================ */

@media (max-width: 1199px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pricing-card.enterprise {
        grid-column: span 2;
    }
}

@media (max-width: 991px) {
    .pricing-hero {
        padding: 120px 0 40px;
    }
    
    .pricing-hero .hero-title {
        font-size: 2rem;
    }
    
    .value-anchors {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .value-item {
        padding: 10px 16px;
        font-size: 0.85rem;
    }
    
    .launch-offer-banner {
        padding: 20px;
    }
    
    .offer-top {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .steps {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .step {
        flex: 1;
        min-width: 140px;
    }
}

@media (max-width: 767px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .pricing-card,
    .pricing-card.enterprise {
        grid-column: span 1;
    }
    
    .pricing-card.popular {
        transform: scale(1);
        order: -1;
    }
    
    .popular-ribbon {
        font-size: 0.75rem;
    }
    
    .plan-name {
        font-size: 1.3rem;
    }
    
    .discounted-price .amount {
        font-size: 2.5rem;
    }
    
    .features-list {
        max-height: 300px;
        overflow-y: auto;
    }
    
    .comparison-table {
        font-size: 0.85rem;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 12px 8px;
    }
    
    .included-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .trust-badges {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .trust-item {
        font-size: 0.8rem;
    }
}

@media (max-width: 575px) {
    .pricing-hero .hero-title {
        font-size: 1.6rem;
    }
    
    .billing-toggle {
        flex-direction: column;
        width: 100%;
    }
    
    .toggle-btn {
        width: 100%;
        justify-content: center;
    }
    
    .included-grid {
        grid-template-columns: 1fr;
    }
    
    .comparison-table {
        font-size: 0.8rem;
    }
    
    .exit-details {
        grid-template-columns: 1fr;
    }
    
    .addons-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   5. ABOUT US PAGE RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    .about-hero {
        padding: 100px 0 60px;
    }
    
    .about-hero h1 {
        font-size: 2.2rem;
    }
    
    .about-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .about-content-row {
        flex-direction: column;
    }
    
    .about-image-col,
    .about-text-col {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .about-hero h1 {
        font-size: 1.75rem;
    }
    
    .about-hero p {
        font-size: 0.95rem;
    }
    
    .about-stats {
        grid-template-columns: 1fr 1fr;
    }
    
    .stat-card-large .stat-number {
        font-size: 2.5rem;
    }
    
    .mission-vision-grid {
        grid-template-columns: 1fr;
    }
    
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .about-stats {
        grid-template-columns: 1fr;
    }
    
    .values-grid {
        grid-template-columns: 1fr;
    }
    
    .value-card {
        padding: 20px;
    }
}

/* ============================================
   6. CONTACT PAGE RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    .contact-hero {
        padding: 100px 0 60px;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .contact-info-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-form-wrapper {
        padding: 30px;
    }
}

@media (max-width: 767px) {
    .contact-hero h1 {
        font-size: 1.75rem;
    }
    
    .contact-info-cards {
        grid-template-columns: 1fr;
    }
    
    .contact-form-wrapper {
        padding: 24px 20px;
    }
    
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .social-connect {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

/* ============================================
   7. HOW IT WORKS PAGE RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    .how-it-works-hero {
        padding: 100px 0 60px;
    }
    
    .how-it-works-hero h1 {
        font-size: 2rem;
    }
    
    .process-timeline {
        padding-left: 30px;
    }
    
    .timeline-step {
        flex-direction: column;
        gap: 20px;
    }
    
    .timeline-content {
        width: 100%;
    }
    
    .timeline-visual {
        width: 100%;
        order: -1;
    }
}

@media (max-width: 767px) {
    .how-it-works-hero h1 {
        font-size: 1.65rem;
    }
    
    .process-timeline::before {
        left: 15px;
    }
    
    .timeline-step {
        padding-left: 40px;
    }
    
    .timeline-number {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
        left: 0;
    }
    
    .timeline-content h3 {
        font-size: 1.1rem;
    }
}

/* ============================================
   8. FAQ PAGE RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    .faq-hero {
        padding: 100px 0 60px;
    }
    
    .faq-hero h1 {
        font-size: 2rem;
    }
    
    .faq-search-box {
        max-width: 100%;
        margin: 0 20px;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
    }
    
    .faq-sidebar {
        position: static;
        margin-bottom: 30px;
    }
    
    .faq-categories {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .faq-category-btn {
        flex: 1;
        min-width: 140px;
    }
}

@media (max-width: 767px) {
    .faq-hero h1 {
        font-size: 1.65rem;
    }
    
    .faq-hero p {
        font-size: 0.95rem;
    }
    
    .faq-category-btn {
        min-width: 120px;
        padding: 12px 16px;
        font-size: 0.85rem;
    }
    
    .accordion-button {
        font-size: 0.95rem;
        padding: 16px 20px;
    }
    
    .accordion-body {
        font-size: 0.9rem;
    }
}

/* ============================================
   9. BLOG PAGES RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    .blog-hero {
        padding: 100px 0 60px;
    }
    
    .blog-hero h1 {
        font-size: 2rem;
    }
    
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .blog-card.featured {
        grid-column: span 2;
    }
    
    .blog-single-content {
        padding: 30px;
    }
    
    .blog-single-content h1 {
        font-size: 1.75rem;
    }
}

@media (max-width: 767px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .blog-card.featured {
        grid-column: span 1;
    }
    
    .blog-card.featured .blog-card-image {
        height: 200px;
    }
    
    .blog-single-content h1 {
        font-size: 1.5rem;
    }
    
    .blog-single-content {
        padding: 24px 20px;
    }
    
    .blog-meta-bar {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}

/* ============================================
   10. CAREER & TEAM PAGES RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    .career-hero,
    .team-hero {
        padding: 100px 0 60px;
    }
    
    .career-hero h1,
    .team-hero h1 {
        font-size: 2rem;
    }
    
    .jobs-list {
        grid-template-columns: 1fr;
    }
    
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .job-card {
        flex-direction: column;
        gap: 20px;
    }
    
    .job-apply-btn {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .career-hero h1,
    .team-hero h1 {
        font-size: 1.65rem;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
    }
    
    .team-card {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .job-header {
        flex-direction: column;
        gap: 10px;
    }
    
    .job-meta {
        flex-wrap: wrap;
    }
}

@media (max-width: 575px) {
    .benefits-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   11. ENTERPRISE PAGE RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    .enterprise-hero {
        padding: 100px 0 60px;
    }
    
    .enterprise-hero h1 {
        font-size: 2rem;
    }
    
    .enterprise-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .enterprise-form-wrapper {
        padding: 30px;
    }
}

@media (max-width: 767px) {
    .enterprise-hero h1 {
        font-size: 1.65rem;
    }
    
    .enterprise-features-grid {
        grid-template-columns: 1fr;
    }
    
    .enterprise-form-wrapper {
        padding: 24px 20px;
    }
    
    .enterprise-contact-options {
        flex-direction: column;
        gap: 20px;
    }
}

/* ============================================
   12. TECHNOLOGY PAGE RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    .tech-hero {
        padding: 100px 0 60px;
    }
    
    .tech-hero h1 {
        font-size: 2rem;
    }
    
    .tech-stack-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tech-showcase {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .tech-hero h1 {
        font-size: 1.65rem;
    }
    
    .tech-stack-grid {
        grid-template-columns: 1fr;
    }
    
    .tech-category-card {
        padding: 24px 20px;
    }
}

/* ============================================
   13. PORTFOLIO PAGE RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    .portfolio-hero {
        padding: 100px 0 60px;
    }
    
    .portfolio-hero h1 {
        font-size: 2rem;
    }
    
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .portfolio-filters {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .portfolio-filter-btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}

@media (max-width: 767px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    
    .portfolio-hero h1 {
        font-size: 1.65rem;
    }
}

/* ============================================
   14. LISTINGS DIRECTORY RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    .listings-hero {
        padding: 100px 0 60px;
    }
    
    .listings-hero h1 {
        font-size: 2rem;
    }
    
    .listings-filter-bar {
        padding: 20px;
    }
    
    .listings-filter-row {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .listings-filter-group {
        flex: 1;
        min-width: 200px;
    }
    
    .listings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .listings-hero h1 {
        font-size: 1.65rem;
    }
    
    .listings-grid {
        grid-template-columns: 1fr;
    }
    
    .listing-card {
        flex-direction: column;
    }
    
    .listing-card-image {
        width: 100%;
        height: 180px;
    }
    
    .listing-detail-header {
        flex-direction: column;
        text-align: center;
    }
    
    .listing-detail-logo {
        margin: 0 auto;
    }
    
    .listing-detail-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .listing-detail-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   15. AUTH PAGES RESPONSIVE
   ============================================ */

/* Global Auth Logo Centering */
.auth-logo {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px !important;
    width: fit-content !important;
    text-decoration: none;
}

.auth-logo img {
    height: 40px;
    width: auto;
    display: block;
}

@media (max-width: 991px) {
    .auth-split-layout {
        flex-direction: column;
    }
    
    .auth-visual-side {
        display: none;
    }
    
    .auth-form-side {
        width: 100%;
        min-height: 100vh;
        padding: 40px 20px;
    }
    
    .auth-box {
        max-width: 450px;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .auth-form-side {
        padding: 30px 15px;
    }
    
    .auth-box {
        padding: 30px 20px;
    }
    
    .auth-logo {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px !important;
        width: fit-content !important;
    }
    
    .auth-logo img {
        height: 40px;
        width: auto;
    }
    
    .auth-box h1 {
        font-size: 1.5rem;
    }
    
    .social-auth-buttons {
        flex-direction: column;
    }
    
    .social-auth-btn {
        width: 100%;
        justify-content: center;
    }
    
    .auth-footer {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* ============================================
   16. LEGAL PAGES RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    .legal-hero {
        padding: 100px 0 60px;
    }
    
    .legal-hero h1 {
        font-size: 2rem;
    }
    
    .legal-content-wrapper {
        flex-direction: column;
    }
    
    .legal-sidebar {
        width: 100%;
        position: static;
        margin-bottom: 30px;
    }
    
    .legal-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .legal-nav a {
        flex: 1;
        min-width: 140px;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .legal-hero h1 {
        font-size: 1.65rem;
    }
    
    .legal-content {
        padding: 30px 20px;
    }
    
    .legal-content h2 {
        font-size: 1.25rem;
    }
    
    .legal-content h3 {
        font-size: 1.1rem;
    }
    
    .legal-nav a {
        min-width: 120px;
        padding: 10px 14px;
        font-size: 0.85rem;
    }
}

/* ============================================
   17. FOOTER RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    .footer {
        padding: 60px 0 25px;
    }
    
    .footer-brand img {
        height: 35px;
    }
    
    .footer h5 {
        font-size: 0.95rem;
        margin-bottom: 16px;
    }
    
    .footer-links li {
        margin-bottom: 10px;
    }
    
    .footer-links a {
        font-size: 0.88rem;
    }
    
    .legal-bar {
        padding: 18px 20px;
        margin: 30px 0 20px;
    }
}

@media (max-width: 767px) {
    .footer {
        padding: 50px 0 20px;
    }
    
    .footer [class*="col-"] {
        margin-bottom: 30px;
    }
    
    .footer-brand {
        text-align: center;
    }
    
    .footer-tagline {
        text-align: center;
        max-width: 100%;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer h5 {
        text-align: center;
    }
    
    .footer h5::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-links {
        text-align: center;
    }
    
    .legal-bar {
        padding: 15px;
    }
    
    .legal-info p {
        font-size: 0.8rem;
    }
    
    .trust-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .trust-divider {
        display: none;
    }
    
    .trust-locations {
        flex-direction: column;
        gap: 8px;
    }
    
    .loc-divider {
        display: none;
    }
}

/* ============================================
   18. CTA SECTION RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    .cta-premium {
        padding: 50px 30px;
        margin: 0 15px;
    }
    
    .cta-headline-premium {
        font-size: 1.9rem;
    }
    
    .headline-accent {
        font-size: 1.6rem;
    }
    
    .cta-subheadline-premium {
        font-size: 1rem;
    }
    
    .cta-pills {
        gap: 10px;
    }
    
    .value-pill {
        padding: 10px 16px;
    }
    
    .cta-buttons-premium {
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }
    
    .btn-cta-main,
    .btn-outline-cta {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .cta-premium {
        padding: 40px 20px;
        border-radius: 24px;
    }
    
    .cta-headline-premium {
        font-size: 1.6rem;
    }
    
    .headline-accent {
        font-size: 1.4rem;
    }
    
    .cta-subheadline-premium {
        font-size: 0.95rem;
    }
    
    .cta-pills {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    .value-pill {
        width: 100%;
        max-width: 250px;
        justify-content: center;
    }
    
    .cta-offers-premium {
        flex-direction: column;
    }
    
    .offer-divider {
        display: none;
    }
}

@media (max-width: 575px) {
    .cta-headline-premium {
        font-size: 1.4rem;
    }
    
    .headline-accent {
        font-size: 1.2rem;
    }
    
    .cta-badge {
        padding: 8px 14px;
    }
    
    .cta-badge span {
        font-size: 0.8rem;
    }
}

/* ============================================
   19. UTILITY CLASSES
   ============================================ */

/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on tablet and below */
@media (max-width: 991px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 768px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* Text center on mobile */
@media (max-width: 767px) {
    .text-center-mobile {
        text-align: center !important;
    }
}

/* Full width on mobile */
@media (max-width: 767px) {
    .w-100-mobile {
        width: 100% !important;
    }
}

/* ============================================
   20. PRINT STYLES
   ============================================ */

@media print {
    .navbar,
    .footer,
    .chatbot-float,
    .back-to-top,
    .cta-section,
    .hero-visual-3d,
    .hex-3d,
    .orbit-ring-3d {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .section-padding {
        padding: 20px 0 !important;
    }
    
    a {
        text-decoration: underline !important;
        color: black !important;
    }
}