/* ============================================
   RESPONSIVE STYLES - Premium SaaS Design
   ============================================ */

/* ============================================
   EXTRA LARGE DEVICES (Desktops, 1200px+)
   ============================================ */

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .hero-title {
        font-size: 4.5rem;
    }
    
    .section-title {
        font-size: 3.5rem;
    }
}

/* ============================================
   LARGE DEVICES (Laptops, 992px - 1199px)
   ============================================ */

@media (max-width: 1199px) {
    .container {
        max-width: 960px;
    }
    
    .hero-title {
        font-size: 3.5rem;
    }
    
    .section-title {
        font-size: 3rem;
    }
    
    .dashboard-card {
        width: 350px;
    }
    
    .platform-card {
        padding: 0.6rem 0.8rem;
        font-size: 0.875rem;
    }
    
    .platform-card svg {
        width: 28px;
        height: 28px;
    }
}

/* ============================================
   MEDIUM DEVICES (Tablets, 768px - 991px)
   ============================================ */

@media (max-width: 991px) {
    .container {
        max-width: 720px;
    }
    
    /* Hero Section */
    .hero-section {
        min-height: auto;
        padding: 120px 0 80px;
    }
    
    .hero-title {
        font-size: 2.75rem;
    }
    
    .hero-description {
        font-size: 1.125rem;
    }

    
    /* Sections */
    section {
        padding: 4rem 0;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
    
    .section-subtitle {
        font-size: 1.125rem;
    }
    
    /* Features */
    .feature-card {
        padding: 1.5rem;
    }
    
    /* Timeline */
    .timeline-item {
        gap: 1.5rem;
    }
    
    .timeline-marker {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .timeline-content {
        padding: 1.25rem;
    }
    
    .timeline-content h3 {
        font-size: 1.5rem;
    }
    
    /* Automation Showcase */
    .automation-showcase {
        padding: 2rem 1rem;
    }
    
    
    .node-icon {
        width: 60px;
        height: 60px;
    }
    
    .node-icon svg {
        width: 32px;
        height: 32px;
    }
    
    .workflow-connection {
        width: 80px;
    }
    
    /* Dashboard Mockup */
    .dashboard-mockup {
        margin-top: 2rem;
    }
    
    .mockup-body {
        min-height: 400px;
    }
    
    .mockup-sidebar {
        width: 60px;
    }
    
    .sidebar-item {
        width: 40px;
        height: 40px;
    }
    
    .mockup-content {
        padding: 1.5rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Benefits */
    .benefit-card {
        padding: 2rem 1.5rem;
    }
    
    .benefit-icon {
        width: 64px;
        height: 64px;
    }
    
    /* Calendar */
    .calendar-section {
        padding: 4rem 0;
    }
    
    .calendar-mockup {
        margin-top: 2rem;
    }
    
    .calendar-grid {
        padding: 1rem;
        gap: 0.25rem;
    }
    
    .calendar-day-header {
        font-size: 0.75rem;
    }
    
    .day-number {
        font-size: 0.875rem;
    }
    
    /* Testimonials */
    .testimonials-slider {
        grid-template-columns: 1fr;
    }
    
    .testimonial-card {
        padding: 2rem;
    }
    
    /* Pricing */
    .pricing-card.popular {
        transform: scale(1);
    }
    
    .pricing-card.popular:hover {
        transform: translateY(-8px);
    }
    
    /* CTA */
    .cta-card {
        padding: 3rem 2rem;
    }
    
    .cta-title {
        font-size: 2.5rem;
    }
    
    .cta-description {
        font-size: 1.125rem;
    }
    
    /* Footer */
    .footer {
        padding: 3rem 0 1.5rem;
    }
    
    .footer-brand {
        margin-bottom: 1rem;
    }
    
    .footer h5 {
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }
}

/* ============================================
   SMALL DEVICES (Landscape Phones, 576px - 767px)
   ============================================ */

@media (max-width: 767px) {
    .container {
        max-width: 540px;
        padding: 0 1rem;
    }
    
    /* Hero Section */
    .hero-section {
        padding: 100px 0 60px;
        text-align: center;
    }
    
    .hero-badge {
        font-size: 0.875rem;
    }
    
    .hero-title {
        font-size: 2.25rem;
    }
    
    .hero-description {
        font-size: 1rem;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-cta {
        justify-content: center;
    }
    
    .hero-social-proof {
        align-items: center;
    }
    
    
    
    /* Sections */
    section {
        padding: 3rem 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
    
    /* Brands */
    .brands-section {
        padding: 2rem 0;
    }
    
    .brands-track {
        gap: 2rem;
    }
    
    /* Features */
    .feature-card {
        padding: 1.5rem;
    }
    
    .feature-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 1rem;
    }
    
    .feature-card h3 {
        font-size: 1.25rem;
    }
    
    /* Timeline */
    .timeline {
        gap: 1.5rem;
    }
    
    .timeline-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }
    
    .timeline-marker {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .timeline-content {
        width: 100%;
        padding: 1.25rem;
    }
    
    .timeline-content h3 {
        font-size: 1.25rem;
    }
    
    .timeline-connector {
        height: 40px;
    }
    
    /* Automation */
    .automation-showcase {
        padding: 1.5rem 0.5rem;
    }
    
 
    .node-icon {
        width: 50px;
        height: 50px;
    }
    
    .node-icon svg {
        width: 28px;
        height: 28px;
    }
    
    .node-label {
        font-size: 0.75rem;
    }
    
    .workflow-connection {
        width: 60px;
    }
    
    /* Dashboard */
    .mockup-body {
        flex-direction: column;
        min-height: 300px;
    }
    
    .mockup-sidebar {
        width: 100%;
        flex-direction: row;
        padding: 0.5rem;
        overflow-x: auto;
    }
    
    .sidebar-item {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }
    
    .mockup-content {
        padding: 1rem;
    }
    
    .content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .content-header h3 {
        font-size: 1.25rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    .chart-bars {
        height: 150px;
    }
    
    /* Benefits */
    .benefit-card {
        padding: 1.5rem 1rem;
    }
    
    .benefit-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 1rem;
    }
    
    .benefit-card h3 {
        font-size: 1.125rem;
    }
    
    /* Calendar */
    .calendar-features {
        gap: 1rem;
    }
    
    .calendar-grid {
        padding: 0.75rem;
        gap: 0.25rem;
    }
    
    .calendar-day-header {
        font-size: 0.625rem;
        padding: 0.25rem;
    }
    
    .day-number {
        font-size: 0.75rem;
    }
    
    .post-indicator {
        width: 6px;
        height: 6px;
    }
    
    /* Testimonials */
    .testimonial-card {
        padding: 1.5rem;
    }
    
    .testimonial-text {
        font-size: 1rem;
    }
    
    /* Pricing */
    .pricing-card {
        padding: 2rem 1.5rem;
    }
    
    .pricing-header h3 {
        font-size: 1.5rem;
    }
    
    .amount {
        font-size: 2.5rem;
    }
    
    /* FAQ */
    .accordion-button {
        font-size: 1rem;
        padding: 1rem;
    }
    
    .accordion-body {
        padding: 1rem;
        font-size: 0.875rem;
    }
    
    /* CTA */
    .cta-card {
        padding: 2.5rem 1.5rem;
    }
    
    .cta-title {
        font-size: 2rem;
    }
    
    .cta-description {
        font-size: 1rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
    
    /* Footer */
    .footer {
        padding: 2rem 0 1rem;
    }
    
    .footer-brand {
        justify-content: center;
        text-align: center;
    }
    
    .footer-description {
        text-align: center;
    }
    
    .social-links {
        justify-content: center;
    }
    
    .footer h5 {
        text-align: center;
        margin-top: 1.5rem;
    }
    
    .footer-links {
        text-align: center;
    }
    
    .footer-bottom {
        text-align: center;
    }
    
    .copyright,
    .made-with {
        text-align: center;
    }
}

/* ============================================
   EXTRA SMALL DEVICES (Portrait Phones, <576px)
   ============================================ */

@media (max-width: 575px) {
    .container {
        padding: 0 0.75rem;
    }
    
    /* Hero Section */
    .hero-section {
        padding: 80px 0 40px;
    }
    
    .hero-badge {
        font-size: 0.75rem;
    }
    
    .hero-title {
        font-size: 1.875rem;
    }
    
    .hero-description {
        font-size: 0.9375rem;
    }
    
    .hero-cta {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .hero-cta .btn {
        width: 100%;
    }
    
    .hero-illustration {
        height: 350px;
    }
    
    .dashboard-card {
        width: 220px;
    }
    
    .platform-card {
        padding: 0.3rem 0.5rem;
        font-size: 0.6875rem;
    }
    
    .platform-card svg {
        width: 18px;
        height: 18px;
    }
    
    .ai-card {
        padding: 0.5rem 0.75rem;
    }
    
    /* Sections */
    section {
        padding: 2.5rem 0;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
    
    .section-subtitle {
        font-size: 0.9375rem;
    }
    
    /* Brands */
    .brands-section {
        padding: 1.5rem 0;
    }
    
    .brands-track {
        gap: 1.5rem;
    }
    
    .brand-item svg {
        width: 80px;
        height: 30px;
    }
    
    /* Features */
    .feature-card {
        padding: 1.25rem;
    }
    
    .feature-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 0.75rem;
    }
    
    .feature-card h3 {
        font-size: 1.125rem;
    }
    
    .feature-card p {
        font-size: 0.875rem;
    }
    
    /* Timeline */
    .timeline {
        gap: 1rem;
    }
    
    .timeline-marker {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
    
    .timeline-content {
        padding: 1rem;
    }
    
    .timeline-content h3 {
        font-size: 1.125rem;
    }
    
    .timeline-content p {
        font-size: 0.875rem;
    }
    
    .timeline-connector svg {
        width: 30px;
        height: 40px;
    }
    
    /* Automation */
    .automation-showcase {
        padding: 1rem 0.25rem;
    }
    
    
    .node-icon {
        width: 40px;
        height: 40px;
    }
    
    .node-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .node-label {
        font-size: 0.6875rem;
    }
    
    .workflow-connection {
        width: 50px;
    }
    
    /* Dashboard */
    .mockup-body {
        min-height: 250px;
    }
    
    .mockup-sidebar {
        width: 100%;
        padding: 0.4rem;
    }

    .workflow-container{
        flex-direction: column;
    }
    
    .sidebar-item {
        width: 36px;
        height: 36px;
    }
    
    .mockup-content {
        padding: 0.75rem;
    }
    
    .content-header h3 {
        font-size: 1.125rem;
    }
    
    .stat-card {
        padding: 0.75rem;
    }
    
    .stat-value {
        font-size: 1.25rem;
    }
    
    .chart-bars {
        height: 120px;
    }
    
    /* Benefits */
    .benefit-card {
        padding: 1.25rem 1rem;
    }
    
    .benefit-icon {
        width: 48px;
        height: 48px;
    }
    
    .benefit-card h3 {
        font-size: 1rem;
    }
    
    .benefit-card p {
        font-size: 0.875rem;
    }
    
    /* Calendar */
    .calendar-header {
        padding: 1rem;
    }
    
    .calendar-header h4 {
        font-size: 1rem;
    }
    
    .calendar-nav {
        width: 32px;
        height: 32px;
        font-size: 1.5rem;
    }
    
    .calendar-grid {
        padding: 0.5rem;
    }
    
    /* Testimonials */
    .testimonial-card {
        padding: 1.25rem;
    }
    
    .testimonial-text {
        font-size: 0.9375rem;
    }
    
    .author-avatar {
        width: 40px;
        height: 40px;
    }
    
    /* Pricing */
    .pricing-card {
        padding: 1.5rem 1rem;
    }
    
    .pricing-header h3 {
        font-size: 1.25rem;
    }
    
    .amount {
        font-size: 2rem;
    }
    
    .pricing-features li {
        font-size: 0.875rem;
        padding: 0.5rem 0;
    }
    
    /* FAQ */
    .accordion-button {
        font-size: 0.9375rem;
        padding: 0.875rem;
    }
    
    .accordion-body {
        padding: 0.875rem;
        font-size: 0.875rem;
    }
    
    /* CTA */
    .cta-card {
        padding: 2rem 1rem;
    }
    
    .cta-title {
        font-size: 1.75rem;
    }
    
    .cta-description {
        font-size: 0.9375rem;
    }
    
    .cta-note {
        font-size: 0.75rem;
    }
    
    /* Footer */
    .footer {
        padding: 1.5rem 0 1rem;
    }
    
    .footer-brand {
        font-size: 1.125rem;
    }
    
    .footer-description {
        font-size: 0.875rem;
    }
    
    .social-links a {
        width: 36px;
        height: 36px;
    }
    
    .social-links svg {
        width: 18px;
        height: 18px;
    }
}

/* ============================================
   CUSTOM BREAKPOINTS
   ============================================ */

/* Large tablets and small laptops */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero-title {
        font-size: 3rem;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
}

/* Tablets in portrait mode */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .hero-illustration {
        height: 450px;
    }
    
    .dashboard-card {
        width: 280px;
    }
}

/* ============================================
   ORIENTATION SPECIFIC
   ============================================ */

@media (max-width: 767px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: 80px 0 40px;
    }
    
    .hero-illustration {
        height: 300px;
    }
    
    section {
        padding: 2rem 0;
    }
}

/* ============================================
   HIGH RESOLUTION DISPLAYS
   ============================================ */

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    .hero-title {
        font-size: 5rem;
    }
    
    .section-title {
        font-size: 4rem;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    * {
        animation: none !important;
        transition: none !important;
    }
    
    .navbar,
    .hero-bg-shapes,
    .cta-bg-shapes,
    .brands-scroll,
    .platform-card,
    .ai-card,
    .connection-lines {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
    
    section {
        padding: 2rem 0;
        page-break-inside: avoid;
    }
    
    .hero-section {
        min-height: auto;
        padding: 2rem 0;
    }
    
    .hero-title {
        font-size: 2.5rem;
        color: #000;
    }
    
    .btn {
        border: 2px solid #000;
        color: #000;
    }
    
    a {
        text-decoration: underline;
    }
    
    .footer {
        background: #fff;
        color: #000;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .floating,
    .pulse,
    .glow,
    .bounce {
        animation: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --text-primary: #000000;
        --text-secondary: #000000;
        --border-light: #000000;
    }
    
    .btn-primary {
        border: 2px solid #000;
    }
    
    .card {
        border: 2px solid #000;
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --bg-white: #0F172A;
        --bg-light: #1E293B;
        --text-primary: #F1F5F9;
        --text-secondary: #CBD5E1;
        --card-bg: #1E293B;
        --navbar-bg: rgba(15, 23, 42, 0.85);
    }
    
    .hero-section {
        background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    }
    
    .brands-section {
        background: var(--bg-white);
    }
    
    .features-section,
    .benefits-section,
    .testimonials-section,
    .faq-section {
        background: var(--bg-white);
    }
    
    .dashboard-card,
    .platform-card,
    .calendar-mockup,
    .testimonial-card,
    .pricing-card,
    .accordion-item {
        background: var(--bg-light);
        border-color: var(--border-medium);
    }
    
    .mockup-header {
        background: var(--bg-white);
    }
    
    .stat-card,
    .activity-chart {
        background: var(--bg-white);
    }
    
    .timeline-content {
        background: var(--bg-white);
    }
    
    .automation-showcase {
        background: var(--bg-light);
    }
    
    .footer {
        background: #000000;
    }
}

/* ============================================
   MOBILE NAVIGATION
   ============================================ */

@media (max-width: 991px) {
    .navbar-collapse {
        background: var(--bg-white);
        border-radius: var(--radius-lg);
        padding: 1rem;
        margin-top: 1rem;
        box-shadow: var(--shadow-lg);
    }
    
    .nav-link {
        padding: 0.75rem 1rem;
    }
    
    .navbar-nav {
        gap: 0.5rem;
    }
    
    .ms-lg-3 {
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .ms-lg-3 .btn {
        width: 100%;
    }
}

/* ============================================
   TOUCH DEVICES
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    .btn,
    .feature-card,
    .benefit-card,
    .pricing-card,
    .testimonial-card {
        transition: none;
    }
    
    .platform-card,
    .workflow-node {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    
    .calendar-day {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    
    .calendar-day:active {
        background: var(--bg-light);
    }
}

/* ============================================
   FOCUS VISIBLE FOR KEYBOARD NAVIGATION
   ============================================ */

@media (prefers-reduced-motion: no-preference) {
    :focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

@media (max-width: 767px) {
    .text-center-mobile {
        text-align: center;
    }
    
    .hide-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
}

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

/* ============================================
   RESPONSIVE SPACING
   ============================================ */

@media (max-width: 767px) {
    .mb-mobile-0 { margin-bottom: 0; }
    .mb-mobile-1 { margin-bottom: 0.5rem; }
    .mb-mobile-2 { margin-bottom: 1rem; }
    .mb-mobile-3 { margin-bottom: 1.5rem; }
    .mb-mobile-4 { margin-bottom: 2rem; }
    
    .mt-mobile-0 { margin-top: 0; }
    .mt-mobile-1 { margin-top: 0.5rem; }
    .mt-mobile-2 { margin-top: 1rem; }
    .mt-mobile-3 { margin-top: 1.5rem; }
    .mt-mobile-4 { margin-top: 2rem; }
    
    .px-mobile-0 { padding-left: 0; padding-right: 0; }
    .py-mobile-0 { padding-top: 0; padding-bottom: 0; }
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */

@media (max-width: 767px) {
    h1 { font-size: 1.875rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.875rem; }
}

/* ============================================
   RESPONSIVE GRID
   ============================================ */

@media (max-width: 767px) {
    .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    
    [class*="col-"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* ============================================
   RESPONSIVE IMAGES
   ============================================ */

@media (max-width: 767px) {
    img {
        max-width: 100%;
        height: auto;
    }
}

/* ============================================
   RESPONSIVE TABLES
   ============================================ */

@media (max-width: 767px) {
    table {
        font-size: 0.875rem;
    }
    
    th,
    td {
        padding: 0.5rem;
    }
}

/* ============================================
   RESPONSIVE FORMS
   ============================================ */

@media (max-width: 767px) {
    .form-control {
        font-size: 0.9375rem;
    }
    
    .form-label {
        font-size: 0.875rem;
    }
}

/* ============================================
   RESPONSIVE MODALS
   ============================================ */

@media (max-width: 767px) {
    .modal-dialog {
        margin: 1rem;
    }
}

/* ============================================
   RESPONSIVE DROPDOWNS
   ============================================ */

@media (max-width: 767px) {
    .dropdown-menu {
        font-size: 0.875rem;
    }
}

/* ============================================
   RESPONSIVE BADGES
   ============================================ */

@media (max-width: 767px) {
    .badge {
        font-size: 0.75rem;
        padding: 0.35rem 0.65rem;
    }
}

/* ============================================
   RESPONSIVE ALERTS
   ============================================ */

@media (max-width: 767px) {
    .alert {
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
    }
}

/* ============================================
   RESPONSIVE PROGRESS BARS
   ============================================ */

@media (max-width: 767px) {
    .progress {
        height: 0.5rem;
    }
}

/* ============================================
   RESPONSIVE LIST GROUPS
   ============================================ */

@media (max-width: 767px) {
    .list-group-item {
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
    }
}

/* ============================================
   RESPONSIVE CARDS
   ============================================ */

@media (max-width: 767px) {
    .card {
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
}

/* ============================================
   RESPONSIVE BUTTONS
   ============================================ */

@media (max-width: 767px) {
    .btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.9375rem;
    }
    
    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
    
    .btn-sm {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* ============================================
   RESPONSIVE NAVBAR
   ============================================ */

@media (max-width: 991px) {
    .navbar {
        padding: 0.75rem 0;
    }
    
    .navbar-brand {
        font-size: 1.125rem;
    }
    
    .navbar-brand svg {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 767px) {
    .navbar {
        padding: 0.5rem 0;
    }
    
    .navbar-brand {
        font-size: 1rem;
    }
    
    .navbar-brand svg {
        width: 28px;
        height: 28px;
    }
}

/* ============================================
   RESPONSIVE FOOTER
   ============================================ */

@media (max-width: 767px) {
    .footer {
        padding: 2rem 0 1rem;
    }
    
    .footer-brand {
        margin-bottom: 1rem;
    }
    
    .footer h5 {
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }
    
    .footer-links li {
        margin-bottom: 0.5rem;
    }
    
    .footer-bottom {
        padding-top: 1.5rem;
        margin-top: 2rem;
    }
}

/* ============================================
   RESPONSIVE ANIMATIONS
   ============================================ */

@media (max-width: 767px) {
    .floating {
        animation-duration: 8s;
    }
    
    .pulse {
        animation-duration: 3s;
    }
    
    .glow {
        animation-duration: 3s;
    }
}

/* ============================================
   RESPONSIVE UTILITY CLASSES
   ============================================ */

@media (max-width: 767px) {
    .mx-auto-mobile {
        margin-left: auto;
        margin-right: auto;
    }
    
    .text-left-mobile {
        text-align: left;
    }
    
    .d-none-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .d-none-mobile {
        display: block !important;
    }
}